- JavaScript脚本特效编程给力起飞
- 苟英等编著
- 2971字
- 2020-08-28 21:33:53
2.3 常用对象
JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。
一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。
下面介绍一些JavaScript的常用内置对象。
2.3.1 字符串对象
1. 转义字符串对象
在JavaScript中，有一些特殊的字符串对象，主要包括引号、回车符号、换行，等等。下面列出这些字符的实现方法。
双引号，\"
单引号，\'
反斜杠，\\
退格，\b
Tab，\t
换行，\n
回车，\r
走纸换页，\f
下面的语句就可以实现以上的特殊字符，那在编写JavaScript程序过程中，通过反斜杠加上特殊的字符就实现了特殊字符在页面中表现的方法，请看下面的示例。
例2-18
<html> <head> <title></title> </head> <body> <p align="left">转义字符的引用</p> <script language="javascript"> <!— yuju="大哥说\"我错了\"" Alert(yuju) //--> </script> </body> </html>
显示效果如图2-16所示。
图2-16 转义字符双引号的使用
2. 字符串对象的定义
var s = "这是我的字符串对象";
定义了s这个字符串之后，就有了一个字符串对象，可以访问它的长度属性（length），这个属性不需要定义，它是一个内置的属性。访问的方式如下：
alert(s.length)
下面的例子使用了字符串对象的长度属性来计算字符串的长度。
例2-19
<html> <head> <script languge="javascript"> var txt="Hello China!" alert(txt.length) </script> </head> </html>
输出结果为12，如图2-17所示。
图2-17 字符串长度
3. 字符串对象的方法
■ toUpperCase()方法
下面的例子使用字符串对象的toUpperCase()方法将字符串转换为大写。
例2-20
<html> <head> <script languge="javascript"> var txt="Hello world!" document.write(txt.toUpperCase()) </script> </head> </html>
输出为“HELLO WORLD!”，如图2-18所示。
图2-18 字符串转换为大写
■ toLowerCase
toLowerCase() 方法用于把字符串转换为小写。请看下面的例2-21。
例2-21
<html>
<head>
<title></title>
</head>
<body>
<p align="left">转义字符的引用</p>
<script language="javascript">
<!--
yuju="THIS IS A BIG DOG"
document.writeln("大写：")
document.writeln(yuju)
re=yuju.toLowerCase()
document.writeln("<br>小写："+re)
//-->
</script>
</body>
</html>
显示结果分别为大写和小写的“THIS IS A BIG DOG”和“this is a big dog”，如图2-19所示。
图2-19 字符串转换为小写
■ “+”加法
该方法将两个字符串连接起来，在实际的应用中常涉及到，请看下面的例2-22。
例2-22
<html> <head> <title></title> </head> <body> <p align="left">转义字符的引用</p> <script language="javascript"> <!-- yuju="大哥说错了" cd="小李也不对" document.write(yuju+cd) //--> </script> </body> </html>
显示结果为“大哥说错了小李也不对”，如图2-20所示。
图2-20 字符串相加
■ charAt
该方法从字符串中返回一个字符，这个方法在应用的时候，通常会设置一个起始位置的参数，然后传回位于该字符串对象位置的字符值。在使用的时候，系统认为字符串起始位置为0。
该方法的调用方式如下：
String.charat(index)
其中，index表示返回的字符位置。
请看下面的例子。
例2-23
<html> <head> <title></title> </head> <body> <p align="left">转义字符的引用</p> <script language="javascript"> <!-- yuju="妈妈说好了" cd=yuju.charAt(2) document.write(cd) //--> </script> </body> </html>
显示结果为字符位置为2的“说”，如图2-21所示。
图2-21 返回指定字符
■ indexOf
该方法从一个特定的位置开始查找设置的字符、返回一个字符或是字符串上起始位置值，如果在特定位置找不到用户设置的字符串对象，则返回-1，这在利用JavaScript设置查找数据的格式化过程中非常有用。在后面的综合部分，系统常利用该方法来完成检索和数据检验方面的工作。这里只简单介绍一下其用法。
string1.indexOf(string2,index)
其中，string2表示需检索的字符串值，是必需的；index表示可选的整数参数，规定在字符串中开始检索的位置，它的合法取值是0~string1object.length-1。
例2-24
<html>
<head>
<title></title>
</head>
<body>
<p align="left">转义字符的引用</p>
<script language="javascript">
<!--
yuju="字符串对象"
cd="对象"
re=yuju.indexOf(cd)
document.write(re)
ls=yuju.indexOf(cd,5)
document.write("<br>"+ls)
//-->
</script>
</body>
</html>
显示结果为3和-1，如图2-22所示。
图2-22 返回字符串位置值
■ lastindexOf
该方法的使用与上面的indexOf的使用一样，只是该方法从字符串对象的尾部开始搜索。将上面的例子稍加改动，看看这两个方法的不同之处。
例2-25
<html> <head> <title></title> </head> <body> <p align="left">转义字符的引用</p> <script language="javascript"> <!-- yuju="字符串对象" cd="对象" re=yuju.lastindexOf(cd) document.write(re) //--> </script> </body> </html>
显示结果为3，如图2-23所示。
图2-23 lastindexOf方法
■ substring
该方法为字符串截取方法，在设置的时候一般会设置两个参数指定截取的位置，然后将两个参数间的字符串返回给设置的变量。当两个参数相等的时候，就返回一个空字符串。在涉及的运行中，一般可以不管参数的大小和前后的位置，它截取的顺序都是从最小的参数开始，截取到最大参数位置。如果没有指定最后的参数，系统默认截取到字符串对象的末尾。
该方法的调用格式如下：
string.substring(start,stop)
其中，start必须有，是一个非负的整数，规定要提取的字符串的第一个字符在string中的位置；stop可选，是一个非负的整数，比要提取的字符串的最后一个字符在string中的位置多1，如果省略该参数，那么返回的字符串会一直到字符串的结尾。
例2-26
<html> <head> <title></title> </head> <body> <p align="left">转义字符的引用</p> <script language="javascript"> <!-- yuju="字符串对象" cd="对象" re=yuju.substring(3,5) document.writeln(re) //--> </script> </body> </html>
显示结果为“对象”，如图2-24所示。
图2-24 substring方法
■ anchor
利用该方法在页面中创建和显示一个HTML超文本目标。在利用该方法的时候，必须在文档中建立一个锚点，然后调用write方法在文档中写出该链接锚点，达到在页面中快速定位的目的。
该方法的调用格式如下：
string.anchor(anchorname)
例2-27
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的<a href="#anc">引用</a></p>
<script language="javascript">
<!--
zifu="this is anchor"
anc=zifu.anchor("anc")
document.write("anc")
//-->
</script>
</body>
</html>
显示结果如图2-25所示。
图2-25 anchor方法
■ big
该方法将设置的字符转换为大字体格式，在功能的实现上，与HTML语言的<big>一样。在页面中显示时，会将设置的字符串对象大号显示。
请看下面的示例。
例2-28
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的引用</p>
<script language="javascript">
<!--
zifu="您好"
document.write(zifu)
anc=zifu.big("anc")
document.write(anc)
//-->
</script>
</body>
</html>
显示结果如图2-26所示。
图2-26 big方法
■ bold
该方法将设置的文本粗体显示。在功能的实现中与HTML标签中的<b>相似。这些方法实质上是JavaScript格式的控制语言。
该方法的应用格式如下：
String.bold()
请看下面的示例。
例2-29
<html> <head> <title></title> </head> <body> <p align="left">字符的引用</p> <script language="javascript"> <!-- zifu="字符的引用" anc=zifu.bold() document.write(anc) //--> </script> </body> </html>
显示结果如图2-27所示。
图2-27 bold方法
下面看看其他的一些格式变化：
<html>
<head>
<title></title>
</head>
<body>
<p align="left">字符的引用</p>
<script language="javascript">
<!--
zifu="字符的引用"
anc1=zifu.bold()
document.write(anc1)
anc2=zifu.italics()
document.write("<br>"+anc2)
anc3=zifu.sub()
document.write("<br>"+anc3)
anc4=zifu.sup()
document.write("<br>"+anc4)
anc5=zifu.fontsize(7)
document.write("<br>"+anc5)
anc6=zifu.fontcolor("red")
document.write("<br>"+anc6)
//-->
</script>
</body>
</html>
显示的格式有多种，如图2-28所示。
图2-28 字符格式引用
字符串对象的属性和方法还有很多，这里就不一一讲述了，大家可以查看相关的对象手册。
2.3.2 Date对象
Date对象保存从1970年1月1日0时0分0秒0毫秒到记录时间的毫秒值。在JavaScript中创建Date对象的语法有如下三种。
1. 无参创建
var dt=new Date();
当使用这种方式创建的时候，日期对象保存的是系统的当前时间。
2. 通过值创建
var dt=new Date(dateVal);
这种方式表示创建一个指定时间，dateVal可以是一个数字，也可以是一个字符串。如果是数字，表示日期是从1970年1月1日0时0分0秒0毫秒加上dateVal；如果是字符串，如“2008-8-8”(也可以是 d1 = new Date("8-8, 2008 11:13:00"))，表示指定的时间，当然使用这种方式必须符合日期的格式。
3. 通过多个参数创建
var dt=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]);
其中：
■ year：必选项。完整的年份，比如“1976”（而不是76）。
■ month：必选项。表示的月份，0~11之间的整数（1月至12月）。
■ date：必选项。表示日期，1~31之间的整数。
■ hours：可选项。如果提供了minutes参数则必须给出。表示小时，0~23的整数（午夜到11pm）。
■ minutes：可选项。如果提供了seconds参数则必须给出。表示分，0~59的整数。
■ seconds：可选项。如果提供了milliseconds参数则必须给出。表示秒，0~59的整数。
■ ms：可选项。表示毫秒，0~999的整数。
Date对象常用的方法可以分为三组，分别用于得到日期相应部分的值（表2-1）、设置日期相应部分的值（表2-2）和将日期转换为字符串（表2-3）。
表2-1 get组方法
表2-2 set组方法
表2-3 to组方法
通过下面的示例了解Date对象的基本用法。
例2-30
<html>
<head>
<title>单击事件</title>
<script type="text/javascript">
function disDate(){
//创建日期对象，得到当前时间
var now = new Date();
//得到年、月、日、时、分、秒、毫秒、星期数
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var ms = now.getMilliseconds();
var day = now.getDay();
var strDay = "";
switch(day){
case 1:
strDay = "星期一"; break;
case 2:
strDay = "星期二"; break;
case 3:
strDay = "星期三"; break;
case 4:
strDay = "星期四"; break;
case 5:
strDay = "星期五"; break;
case 6:
strDay = "星期六"; break;
case 0:
strDay = "星期天"; break;
}
var nowStr = year + "年" + month + "月" + date + "日 "
+ hour + "时" + minute + "分" + second + "秒"
+ ms + "毫秒 "+strDay;
//年分加1
now.setFullYear(year+1);
var nextStr = now.toLocaleString();
alert("当前时间是："+nowStr+"\n\n一年后的今天是："+nextStr);
}
</script>
</head>
<body>
<input type="button" value="一年后的今天是？" onClick="disDate()" />
</body>
</html>
运行效果如图2-29所示，单击按钮后效果如图2-30所示。
图2-29 Date对象的使用（一）
图2-30 Date对象的使用（二）
2.3.3 Math对象
Math对象用于复杂的数据计算，JavaScript中Math对象常用属性如表2-4所示、常用方法如表2-5所示。
表2-4 Math对象常用属性
表2-5 Math对象常用方法
例2-31通过计算圆的周长和面积演示了Math对象属性和方法的使用。
例2-31
……
<script type="text/javascript">
function calc(){
//接受用户输入
var r = prompt("请输入圆的半径：");
//计算周长
var zc = 2 * Math.PI * r;
//计算面积
var mj = Math.PI * Math.pow(r,2);
alert("半径为"+r+"的圆的周长是：" + zc + "\n\n半径为" + r
+ "的圆的面积是：" + mj);
}
</script>
</head>
<body>
<input type="button" value="圆周长和面积计算器" onClick="calc()" />
</body>
</html>
在例中使用了一个prompt函数，用于接受用户输入圆的半径，当运行此页面的时候会出现如图2-31所示的效果，单击按钮出现如图2-32所示的对话框，当输入半径后得到最后运算结果，如图2-33所示。
图2-31 Math对象的使用（一）
图2-32 Math对象的使用（二）
图2-33 Math对象的使用（三）