三、對象
1、如何定義對象
<!DOCTYPE html>
<html>
<head>
<title>01_如何定義對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//1 在javascript中,底層存在Object對象:Object對象應該所有對象的父級.
var obj1 = new Object();
//2 JSON的key/value格式,Java中的Map集合
var ob2 = {};
//3 在javascript中,函數即對象:函數對象(我起的)
function obj3(){}
</script>
</html>
2、定義對象的屬性和方法
<!DOCTYPE html>
<html>
<head>
<title>02_定義對象的屬性和方法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//定義普通對象的屬性和方法(JSON的key/value格式)
var hero = {
name : "zhangwuji",
sayMe : function(){
alert("i am zhangwuji.");
}
}
//定義函數對象的屬性和方法
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
}
/*
* this的用法:
* * 指代DOM對象
* * 指代jQuery對象
* * 指代javascript對象
*/
</script>
</html>
3、調用對象的屬性和方法
<!DOCTYPE html>
<html>
<head>
<title>03_調用對象的屬性和方法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//普通對象
// var hero = {
// name : "zhangwuji",
// sayMe : function(){
// alert("i am zhangwuji.");
// }
// }
//調用普通對象hero的屬性和方法
//1
// alert(hero.name);
// hero.sayMe();
//2
// alert(hero['name']);
// hero['sayMe']();
//增加普通對象hero的屬性和方法
//hero.value = "zhouzhiruo";
//alert(hero.value);
// hero.sayVal = function(){
// alert("zhangwuji's value is zhouzhiruo.");
// }
// hero.sayVal();
//修改普通對象hero的屬性和方法
//hero.name = "zhouzhiruo";
//alert(hero.name);
// hero.sayMe = function(){
// alert("i am zhouzhiruo.")
// }
// hero.sayMe();
//刪除普通對象hero的屬性和方法
// delete hero.name;
// alert(hero.name);
// delete hero.sayMe;
// hero.sayMe();
/*
* 函數對象:類似於Java中的類的概念
* * 實際上,是不存在函數對象的概念的(是我們自己起的名)
* * 函數對象實際上是叫做構造器
*/
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("i am zhangwuji.");
}
}
/*
* 調用之前,必須要先new對象
* * 這裏的寫法是構造函數的寫法
* * hero也是javascript對象,是一個普通對象
*/
var hero = new Hero();
//調用函數對象Hero的屬性和方法
// alert(hero.name);
// alert(hero['name']);
// hero.value = "zhouzhiruo";
// alert(hero.value);
// delete hero.name;
// alert(hero.name);
hero.name = "zhouzhiruo";
alert(hero.name);
// class A(){
// String name = "zhangwuji";
// }
//
// A a = new A();
// a.name
</script>
</html>
4、this的用法
<!DOCTYPE html>
<html>
<head>
<title>04_this的用法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* this的用法:
* * 指代DOM對象(常用)
* * 指代JQuery對象(最不常用)
* * 指代javascript對象(居中)
*
* this的實際用法,不止以上三種.
*/
//1 指代DOM對象
// document.getElementById("ok").onclick = function(){
// this.value;
// }
//2 指代jQuery對象:在jQuery的插件中使用
$.each(this,function(){
alert(this.value);
});
//3 指代javascript對象:只要在函數對象中,使用this的話,this永遠都指代函數對象
function Hero(){
this.name = "zhangwuji";
this.sayMe = function(){
alert("hello "+this.name);
}
}
var hero = new Hero();
hero.sayMe();
</script>
</html>
5、舉例
<!DOCTYPE html>
<html>
<head>
<title>05_舉例.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//定義一個字符串
var str = "aaaa";
//定義一個數值
var i = 7;
//定義一個數組
var arr = [1,2,3,4,5];
/*
* 這些所謂的常用類型,可以直接使用
* * 這種方式類似於Java中JDK提供的常用類型
* * 說明在javascript的底層,提供了類似的常用類型
*
* javascript的內建對象:Java中的API提供的常用類型
* * javascript內建對象:幫助文檔"w3school.chm"
* * javascript的內容並不像java一樣,具有完整的幫助文檔.(javascript沒有完整的幫助文檔)
*/
</script>
</html>
四、內建對象
1、Object對象
<!DOCTYPE html>
<html>
<head>
<title>01_Object對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//以下兩種寫法是等價的(面試題)
var obj1 = new Object();
var obj2 = {};
//Object對象是所有javascript對象的父級.
//面試題(真實)
//判斷以下哪個描述是錯誤的?D
// var a = {}; //定義對象
// var b = []; //定義數組
// var c = //; //定義正則表達式
// var d = ();
//面試題(百度)
//alert():提示框,在提示框中實現換行
alert("xxx\nyyy");// \r或\n
</script>
</html>
2、Array對象
<!DOCTYPE html>
<html>
<head>
<title>02_Array對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//以下兩種寫法是等價的
var arr1 = [];
var arr2 = new Array();
alert(typeof arr1); //object
alert(typeof arr2); //object
//Array對象的屬性
//1 length屬性:獲取數組長度
//alert(arr1.length);
//2 index和input屬性,放棄的
//3 constructor屬性:返回對創建此對象的數組函數的引用。(不研究)
//4 prototype屬性:使您有能力向對象添加屬性和方法。(現在不研究,統一放在原型的內容)
//Array對象的方法
//1 toString()方法:把數組轉換爲字符串，並返回結果。
//2 join()方法:把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
//3 pop()和push()方法:刪除並返回數組的最後一個元素；向數組的末尾添加一個或更多元素，並返回新的長度。
//4 reverse()方法:顛倒數組中元素的順序。
//javascript的內建對象的屬性和方法,在Java中的JDK的內容,都有類似的內容
//反轉字符串示例(面試題)
//定義一個字符串
var str = "abcdefg";
//利用String對象的split()方法，將字符串切割成一個數組
var arr = str.split("");
//利用Array對象的reverse()方法，將數組中元素的順序顛倒。
arr = arr.reverse();
//測試打印
alert(arr.toString());
//Java的版本至少在1.5版本以上
</script>
</html>
3、String對象
<!DOCTYPE html>
<html>
<head>
<title>03_String對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
//以下兩種寫法不是等價的(面試)
var str1 = "aaa";
// var str2 = new String("aaa");
//
// alert(typeof str1); //string
// alert(typeof str2); //object
//String對象的屬性
//length屬性:字符串的長度(字符的個數)
//alert(str1.length); //3
//String對象的方法
//1 substr():從起始索引號提取字符串中指定數目的字符。
//2 substring():提取字符串中兩個指定的索引號之間的字符。
//3 split():把字符串分割爲字符串數組。
//4 replace():替換與正則表達式匹配的子串。
//判斷字符串是否包含指定字符串示例
//定義兩個要判斷的字符串
var str = "abcdefg";
var substr = "xyz";
function sub(str,substr){
//將判斷的字符串定義成String對象
var string = new String(str); //不必要,更規範一些
//截取判斷的字符串
var result = string.substr(string.indexOf(substr),substr.length);
if(result==substr){
return true;
}else{
return false;
}
}
alert(sub(str,substr));
</script>
</html>
4、Events對象
<!DOCTYPE html>
<html>
<head>
<title>04_Events對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* Event:事件
* Events對象:事件對象
* * 在javascript中,具有事件的.
* onclick\ondblclick\onchange等
* * 事件對象與之前使用的事件內容,是否存在關係?
* 之前使用的事件內容,其實是javascript中事件對象的屬性.
*/
</script>
</html>
5、Functions對象
<!DOCTYPE html>
<html>
<head>
<title>05_Functions對象.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
This is my HTML page. <br>
</body>
<script type="text/javascript">
/*
* Functions對象:javascript全局對象
* * 全局屬性:
* * NaN:表示不是一個數值
* * undefined:未定義
* * 全局方法
* * decodeURI():解碼某個編碼的 URI。
* * encodeURI():把字符串編碼爲 URI。
* * escape():對字符串進行編碼。
* * eval():計算 JavaScript 字符串，並把它作爲腳本代碼來執行。
* * isNaN():檢查某個值是否是數字。返回值爲Boolean值,true不是數字.
*
* Functions對象與Function對象:是不是一個?
* * Function對象實際上,瀏覽器內核中集成的javascript引擎裏.
* * 對於Function對象,我們只需要瞭解new Function()定義函數即可.
*/
</script>
</html>
