三、对象
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); //objectalert(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>