3.6 常用对象

通过前面的学习，知道JavaScript是一种基于对象的语言，它可以应用自己创建的对象，因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。下面将对JavaScript的常用对象进行详细介绍。

3.6.1 Window对象

视频讲解：光盘\TM\lx\3\10 Window对象．mp4

Window对象即浏览器窗口对象，是一个全局对象，是所有对象的顶级对象，在JavaScript中起着举足轻重的作用。Window对象提供了许多属性和方法，这些属性和方法被用来操作浏览器页面的内容。Window对象同Math对象一样，也不需要使用new关键字创建对象实例，而是直接使用“对象名．成员”的格式来访问其属性或方法。下面将对Window对象的属性和方法进行介绍。

1.Window对象的属性

Window对象的常用属性如表3.8所示。

表3.8 Window对象的常用属性

2.Window对象的方法

Window对象的常用方法如表3.9所示。

表3.9 Window对象的常用方法

技巧

由于Window对象使用十分频繁，又是其他对象的父对象，所以在使用Window对象的属性和方法时，JavaScript允许省略Window对象的名称。

例如，在使用Window对象的alert()方法弹出一个提示对话框时，可以使用下面的语句：

        window.alert("欢迎访问明日科技网站！");

也可以使用下面的语句：

        alert("欢迎访问明日科技网站！");

由于Window对象的open()方法和close()方法在实际网站开发中经常用到，下面将对其进行详细的介绍。

（1）open()方法

open()方法用于打开一个新的浏览器窗口，并在该窗口中装载指定URL地址的网页。open()方法的语法格式如下：

        windowVar=window.open(url, windowname[, location]);

参数说明：

windowVar：当前打开窗口的句柄。如果open()方法执行成功，则windowVar的值为一个Window对象的句柄，否则windowVar的值是一个空值。

url：目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。

windowname：用于指定新窗口的名称，该名称可以作为<a>标记和<form>的target属性的值。如果该参数指定了一个已经存在的窗口，那么open()方法将不再创建一个新的窗口，而只是返回对指定窗口的引用。

location：对窗口属性进行设置，其可选参数如表3.10所示。

表3.10 对窗口属性进行设置的可选参数

技巧

当Window对象赋给变量后，也可以使用打开窗口句柄的close()方法关闭窗口。

例如，打开一个新的浏览器窗口，在该窗口中显示bbs.htm文件，设置打开窗口的名称为bbs，并设置窗口的顶边距、左边距、宽度和高度。代码如下：

        window.open("bbs.htm", "bbs", "width=531, height=402, top=50, left=20");

（2）close()方法

close()方法用于关闭当前窗口。其语法格式如下：

        window.close()

【例3.30】实现用户注册页面，其中包含“用户名”“密码”“确认密码”3个文本框，还包含“提交”“重置”“关闭”3个按钮。当用户单击“关闭”按钮，将关闭当前浏览器。（实例位置：光盘\TM\sl\3\8）

关键代码如下：

        <form id="form4" name="form4" method="post" action="">
          <label>  </label>
          <table width="353" height="140" border="0">
            <tr>
              <td width="104" align="right">用户名：</td>
              <td width="233" align="left"><label for="textfield"></label>
              <input type="text" name="textfield" id="textfield" /></td>
            </tr>
            <tr>
              <td align="right">密码：</td>
              <td align="left"><label for="textfield2"></label>
              <input type="password" name="textfield2" id="textfield2" /></td>
            </tr>
            <tr>
              <td align="right">确认密码：</td>
              <td align="left"><label for="textfield3"></label>
              <input type="password" name="textfield3" id="textfield3" /></td>
            </tr>
            <tr>
              <td colspan="2" align="center"><label>
              <input type="submit" name="Submit" value="提交" onclick="mysubmit()"/>
              </label>
              <label>
                <input type="reset" name="Submit2" value="重置" />
              </label>
              <label>
                <input type="button"name="Submit3"value="关闭"  onclick="window.close()"/>
              </label></td>
            </tr>
          </table>
          <label><br/>
          </label>
        </form>

运行本实例，结果如图3.17所示。

图3.17 实现用户注册页面

3.6.2 String对象

视频讲解：光盘\TM\lx\3\11 String对象．mp4

String对象是动态对象，需要创建对象实例后才能引用其属性和方法。但是，由于在JavaScript中可以将用单引号或双引号括起来的字符串当作一个字符串对象的实例，所以可以直接在某个字符串后面加上点“.”去调用String对象的属性和方法。下面对String对象的常用属性和方法进行详细介绍。

1.String对象的属性

String对象最常用的属性是length，该属性用于返回String对象的长度。length属性的语法格式如下：

        string.length

返回值：一个只读的整数，它代表指定字符串中的字符数，每个汉字按一个字符计算。

【例3.31】获取字符串对象的长度。代码如下：

        "flowre的哭泣".length;               //值为9
        "wgh".length;                        //值为3

2.String对象的方法

String对象提供了很多用于对字符串进行操作的方法，如表3.11所示。

表3.11 String对象的常用方法

下面对比较常用的方法进行详细介绍。

（1）indexOf()方法

indexOf()方法用于返回String对象内第一次出现子字符串的字符位置。如果没有找到指定的子字符串，则返回-1。其语法格式如下：

        string.indexOf(subString[, startIndex])

参数说明：

subString：必选项。要在String对象中查找的子字符串。

startIndex：可选项。该整数值指出在String对象内开始查找索引。如果省略，则从字符串的开始处查找。

【例3.32】从一个邮箱地址中查找@所在的位置，可以用下面的代码：

        var str="wgh717@sohu.com";
        var index=str.indexOf('@');                 //返回的索引值为6
        var index=str.indexOf('@',7);               //返回值为-1

说明

由于在JavaScript中，String对象的索引值是从0开始的，所以此处返回的值为6，而不是7。String对象各字符的索引值如图3.18所示。

图3.18 String对象各字符的索引值

说明

String对象还有一个lastIndexOf()方法，该方法的语法格式同indexOf()方法类似，所不同的是，indexOf()从字符串的第一个字符开始查找，而lastIndexOf()方法从字符串的最后一个字符开始查找。

【例3.33】下面的代码将演示indexOf()方法与lastIndexOf()方法的区别。

        var str="2016-05-15";
        var index=str.indexOf('-');                    //返回的索引值为4
        var lastIndex=str.lastIndexOf('-');            //返回的索引值为7

（2）substr()方法

substr()方法用于返回指定字符串的一个子串。其语法格式如下：

        string.substr(start[, length])

参数说明：

start：用于指定获取子字符串的起始下标，如果是一个负数，那么表示从字符串的尾部开始算起的位置。即-1代表字符串的最后一个字符，-2代表字符串的倒数第二个字符，依此类推。

length：可选项，用于指定子字符串中字符的个数。如果省略该参数，则返回从start开始位置到字符串结尾的子串。

【例3.34】使用substr()方法获取指定字符串的子串，代码如下：

      var word= "One World One Dream! ";
      var subs=word.substr(10,9);               //subs的值为One Dream

（3）substring()方法

substring()方法用于返回指定字符串的一个子串。其语法格式如下：

        string.substring(from[, to])

参数说明：

from：用于指定要获取子字符串的第一个字符在string中的位置。

to：可选项，用于指定要获取子字符串的最后一个字符在string中的位置。

注意

由于substring()方法在获取子字符串时，是从string中的from处到to-1处复制，所以to的值应该是要获取子字符串的最后一个字符在string中的位置加1。如果省略该参数，则返回从from开始到字符串结尾处的子串。

【例3.35】使用substring()方法获取指定字符串的子串，代码如下：

      var word= "One World One Dream! ";
      var subs=word.substring(10,19);            //subs的值为One Dream

（4）replace()方法

replace()方法用于替换一个与正则表达式匹配的子串。其语法格式如下：

        string.replace(regExp, substring);

参数说明：

regExp：一个正则表达式。如果正则表达式中设置了标志g，那么该方法将用替换字符串替换检索到的所有与模式匹配的子串，否则只替换所检索到的第一个与模式匹配的子串。

substring：用于指定替换文本或生成替换文本的函数。如果substring是一个字符串，那么每个匹配都将由该字符串替换，但是在substring中的“$”字符具有特殊的意义，如表3.12所示。

表3.12 substring中的“$”字符的意义

【例3.36】去掉字符串中的首尾空格。（实例位置：光盘\TM\sl\3\9）

①在页面中添加用于输入原字符串和显示转换后的字符串的表单及表单元素，具体代码如下：

        <form name="form1" method="post" action="">
        原字符串：
        <textarea name="oldString" cols="40" rows="4"></textarea>
        转换后的字符串：
        <textarea name="newString" cols="40" rows="4"></textarea>
        <input name="Button" type="button" class="btn_grey" value="去掉字符串的首尾空格">
        </form>

②编写自定义的JavaScript函数trim()，在该函数中应用String对象的replace()方法去掉字符串中的首尾空格。trim()函数的具体代码如下：

        <script language="javascript">
            function trim(){
                var str=form1.oldString.value;              //获取原字符串
                if(str==""){                                //当原字符串为空时
                    alert("请输入原字符串"); form1.oldString.focus(); return;
                }else{                                      //当原字符串不为空时，去掉字符串中的首尾空格
                    var objExp=/(^\s＊)|(\s＊$)/g;          //创建RegExp对象
                    str=str.replace(objExp, "");        //替换字符串中的首尾空格
                }
                form1.newString.value=str;                  //将转换后的字符串写入“转换后的字符串”文本框中
            }
        </script>

③在“去掉字符串的首尾空格”按钮的onclick事件中调用trim()函数，具体代码如下：

        <input name="Button" type="button" class="btn_grey" onclick="trim()" value="去掉字符串的首尾空格">

运行程序，输入原字符串，单击“去掉字符串的首尾空格”按钮，将去掉字符串中的首尾空格，并显示到“转换后的字符串”文本框中，如图3.19所示。

图3.19 去掉字符串的首尾空格

（5）split()方法

split()方法用于将字符串分割为字符串数组。其语法格式如下：

        string.split(delimiter, limit);

参数说明：

delimiter：字符串或正则表达式，用于指定分隔符。

limit：可选项，用于指定返回数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数字，否则整个字符串都会被分割，而不考虑其长度。

返回值：一个字符串数组，该数组是通过delimiter指定的边界将字符串分割成的字符串数组。

注意

在使用split()方法分割数组时，返回的数组不包括delimiter自身。

【例3.37】将字符串“2011-10-15”以“-”为分隔符分割成数组，代码如下：

        var str="2011-10-15";
        var arr=str.split("-");                 //分割字符串数组
        document.write("字符串 "+str+" 进行分割后的数组为：<br>");
        //通过for循环输出各个数组元素
        for(i=0; i<arr.length; i++){
        document.write("arr["+i+"]:"+arr[i]+"<br>");
        }

上面代码的运行结果如图3.20所示。

图3.20 将字符串进行分割

3.6.3 Date对象

视频讲解：光盘\TM\lx\3\12 Date对象．mp4

在Web程序开发的过程中，可以使用JavaScript的Date对象来对日期和时间进行操作。例如，如果想在网页中显示计时的时钟，就可以使用Date对象来获取当前系统的时间并按照指定的格式进行显示。下面将对Date对象进行详细介绍。

1．创建Date对象

Date对象是一个有关日期和时间的对象。它具有动态性，即必须使用new运算符创建一个实例。创建Date对象的语法格式如下：

        dateObj=new Date()
        dateObje=new Date(dateValue)
        dateObj=new Date(year, month, date[, hours[, minutes[, seconds[, ms]]]])

参数说明：

dateValue：如果是数值，则表示指定日期与1970年1月1日午夜间全球标准时间相差的毫秒数；如果是字符串，则dateValue按照parse()方法中的规则进行解析。

year：一个4位数的年份。如果输入的是0～99之间的值，则给它加上1900。

month：表示月份，值为0～11之间的整数，即0代表1月份。

date：表示日，值为1～31之间的整数。

hours：表示小时，值为0～23之间的整数。

minutes：表示分钟，值为0～59之间的整数。

seconds：表示秒钟，值为0～59之间的整数。

ms：表示毫秒，值为0～999之间的整数。

【例3.38】创建一个代表当前系统日期的Date对象。代码如下：

        var now＝new Date();

注意

在上面的代码中，第二个参数应该是当前月份-1，而不能是当前月份5，如果是5则表示6月份。

2.Date对象的方法

Date对象没有提供直接访问的属性，只具有获取、设置日期和时间的方法。Date对象的常用方法如表3.13所示。

表3.13 Date对象的常用方法

【例3.39】实时显示系统时间。（实例位置：光盘\TM\sl\3\10）

（1）在页面的合适位置添加一个id为clock的<div>标记，关键代码如下：

        <div id="clock"></div>

（2）编写自定义的JavaScript函数realSysTime()，在该函数中使用Date对象的相关方法获取系统日期。realSysTime()函数的具体代码如下：

        <script language="javascript">
        function realSysTime(clock){
            var now=new Date();                                                     //创建Date对象
            var year=now.getFullYear();                                             //获取年份
            var month=now.getMonth();                                               //获取月份
            var date=now.getDate();                                                 //获取日期
            var day=now.getDay();                                                   //获取星期
            var hour=now.getHours();                                                //获取小时
            var minu=now.getMinutes();                                              //获取分钟
            var sec=now.getSeconds();                                               //获取秒
            month=month+1;
            var arr_week=new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var week=arr_week[day];                                                 //获取中文的星期
            var time=year+"年"+month+"月"+date+"日 "+week+""+hour+":"+minu+":"+sec; //组合系统时间
            clock.innerHTML="当前时间："+time;                                      //显示系统时间
        }
        </script>

（3）在页面的载入事件中每隔1秒调用一次realSysTime()函数，实时显示系统时间，具体代码如下：

        window.onload=function(){
            window.setInterval("realSysTime(clock)",1000);                          //实时获取并显示系统时间
        }

实例运行结果如图3.21所示。

图3.21 实时显示系统时间

上一章目录下一章