JavaScript对象
一、对象简介
JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。注意:对象只是一种特殊的数据。对象拥有属性和方法。
1、属性:指与对象有关的值。
eg:使用字符串对象的长度属性来计算字符串中的字符数目。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var str = "Hello World!"; 11 document.write(str.length); 12 </script> 13 </body> 14 </html>
结果:(空格也包含在内)
2、方法:指对象可以执行的行为(或者可以完成的功能)。
eg:使用字符串对象的 toUpperCase() 方法来显示大写字母文本。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var str = "Hello World!"; 11 document.write(str.toUpperCase()); //注意方法的大小写!!! 12 </script> 13 </body> 14 </html>
效果:
二、字符串(String)
String 对象用于处理已有的字符块。
1、String对象属性
2、String 对象方法
3、实例:
(1)indexOf():用来定位字符串中某一个指定的字符首次出现的位置。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var str = "Hello World!"; 11 document.write(str.indexOf("Hello") + "<br />") 12 document.write(str.indexOf("World") + "<br />") 13 document.write(str.indexOf("world")) 14 15 </script> 16 </body> 17 </html>
效果:
(2)match() :用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var str = "Hello World!"; 11 document.write(str.match("world") + "<br />") 12 document.write(str.match("World") + "<br />") 13 document.write(str.match("worlld") + "<br />") 14 document.write(str.match("world!")) 15 16 </script> 17 </body> 18 </html>
效果:
(3) replace() 方法:使用其在字符串中用某些字符替换另一些字符。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var str = "Hello World!"; 11 document.write(str.replace(/World/,"Boy")); //注意大小写!!! 12 </script> 13 </body> 14 </html>
效果:
三、JavaScript Date(日期)对象
日期对象用于处理日期和时间。
1、定义日期
var myDate=new Date()
Date 对象自动使用当前的日期和时间作为其初始值。
2、改变日期
(1)为日期对象设置一个特定的日期 (2008 年 8 月 9 日):
var myDate=new Date()
myDate.setFullYear(2008,7,9)
**表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。**
(2)将日期对象设置为 5 天后的日期:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
**如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。**
3、Date 对象属性
4、Date 对象方法
5、实例
(1)使用 getDay() 来显示星期,而不仅仅是数字。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JavaScript</title> 6 </head> 7 <script type="text/javascript"> 8 var d=new Date(); 9 var weekday=new Array(7); 10 weekday[0]="星期日"; 11 weekday[1]="星期一"; 12 weekday[2]="星期二"; 13 weekday[3]="星期三;" 14 weekday[4]="星期四"; 15 weekday[5]="星期五"; 16 weekday[6]="星期六"; 17 18 document.write("今天是" + weekday[d.getDay()]); 19 </script> 20 21 <body> 22 </body> 23 </html>
效果:
(2)显示一个钟表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 </head> 7 <script type="text/javascript"> 8 function startTime() { 9 var today=new Date(); 10 var h=today.getHours(); //返回当前的时针 11 var m=today.getMinutes(); //返回当前的分针 12 var s=today.getSeconds(); //返回当前的秒针 13 m=checkTime(m); 14 s=checkTime(s); 15 document.getElementById('txt').innerHTML=h+":"+m+":"+s; //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 16 t=setTimeout('startTime()',500); //javascript通过setTimeout函数暂停一段时间后执行,这里每隔500ms就调用一次代码 17 } 18 19 function checkTime(i) { 20 if (i<10) {i="0" + i;} //如果分、秒为个位数,在前面+“0”,这一步很重要 21 return i; 22 } 23 </script> 24 25 <body onload="startTime()"> 26 <div id="txt"></div> 27 </body> 28 </html>
效果:
四、JavaScript Array(数组)对象
1、定义数组
var myArray=new Array()
2、变量赋值
(1)可以添加任意多的值,就像可以定义需要的任意多的变量一样
var mycars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";
可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";
(2)
var mycars=new Array("Saab","Volvo","BMW")
注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。
3、Array 对象属性
4、Array 对象方法
5、实例:
(1)输出数组中的元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JavaScript</title> 6 </head> 7 <script type="text/javascript"> 8 var i,j; 9 var text = new Array("张三","李四","王五"); 10 document.write("1.用for语句来循环输出:"+"<br>"); 11 for(i=0;i<text.length;i++) { 12 document.write(text[i] + "<br>"); 13 } 14 15 document.write("2.用for...in...语句来循环输出:" + "<br>"); 16 for( j in text) { 17 document.write(text[j] + "<br>"); 18 } 19 </script> 20 21 <body> 22 </body> 23 </html>
效果:注意:取数组名时不要和关键字重复,否则运行结果会出错。
(2)合并两个数组:concat()
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var arr = new Array(3); 11 arr[0] = "George"; 12 arr[1] = "John"; 13 arr[2] = "Thomas"; 14 15 var arr2 = new Array(3); 16 arr2[0] = "James"; 17 arr2[1] = "Adrew"; 18 arr2[2] = "Martin"; 19 20 document.write(arr.concat(arr2)); 21 </script> 22 </body> 23 </html>
效果:
五、JavaScript Boolean(逻辑)对象
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
1、使用关键词 new 来定义 Boolean 对象
var myBoolean=new Boolean()
注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
2、Boolean 对象属性
3、Boolean 对象方法
六、JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin()
这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
1、算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值:
- 常数
- 圆周率
- 2 的平方根
- 1/2 的平方根
- 2 的自然对数
- 10 的自然对数
- 以 2 为底的 e 的对数
- 以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1_2
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
2、Math 对象方法
3、eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 document.write(Math.round(0.6)+ "<br />"); //把数四舍五入为最接近的整数 11 document.write(Math.random()+ "<br />") //返回0~1之间的随机数 12 document.write(Math.max(5,7) + "<br />") //返回两个数之间较大的数 13 </script> 14 </body> 15 </html>
效果: 刷新一下:
七、JavaScript RegExp 对象
RegExp 对象用于规定在文本中检索的内容。它是对字符串执行模式匹配的强大工具。
1、什么是 RegExp?
RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等
2、定义 RegExp
RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。
3、RegExp 对象方法
eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JavaScript</title> 6 </head> 7 <script type="text/javascript"> 8 var patt1=new RegExp("e"); 9 document.write(patt1.test("The best things in life are free")+"<br>"); 10 document.write(patt1.exec("The best things in life are free")+"<br>"); 11 document.write(patt1.test("The best things in life are free")+"<br>"); 12 patt1.compile("d"); //compile() 既可以改变检索模式,也可以添加或删除第二个参数。这里改变检索模式,搜索的是d 13 document.write(patt1.test("The best things in life are free")+"<br>"); 14 </script> 15 16 <body> 17 </body> 18 </html>
效果:
**可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。在使用 "g" 参数时,exec() 的工作原理如下:
- 找到第一个 "e",并存储其位置
- 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置
eg:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js</title> 6 </head> 7 8 <body> 9 <script type="text/javascript"> 10 var patt1=new RegExp("e","g"); 11 do { 12 result=patt1.exec("The best things in life are free"); 13 document.write(result); 14 } 15 while (result!=null) 16 </script> 17 </body> 18 </html>
效果: