JavaScript--4.对象编程BOM

五、BOM

1. Window窗口对象

(1) Window对象

1>属性

 

2>方法

补充： setTimeout（fun，500）或setTimeout（“fun()”，500）

 

3>对象的使用

         window.属性名                                    window.方法名（参数列表）       

   使用一些关键字来代替某些特定的窗口。例如，使用“self”代表当前窗口、“parent”代表父级窗口等代表window

(2)对话框（Dialog）

         常用的对话框：警告对话框、询问回答对话框及提示对话框。

1>警告（Alert）

         语法：window.alert(str)

         function al() {

       window.alert("弹出警告对话框!");

    }

 

2>弹出询问回答对话框

语法：window. confirm(question)

3>提示（Prompts）

语法：window.prompt(str1，str2)

         str1：为可选项。表示字符串(String)，指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息。

         str2：为可选项。表示字符串(String)，指定对话框内输入框（input）的值（value）。如果忽略此参数，将被设置为undefined。

 

(3)窗口对象常用操作

1>移动窗口

下面介绍几种移动窗口的方法。

（1）moveTo()方法

利用moveTo()方法可以将窗口移动到指定坐标(x,y)处。

语法：

window.moveTo(x,y)

x：窗口左上角的x坐标。

y：窗口左上角的Y坐标。

例如，将窗口移动到指定到坐标（300,300）处，代码如下：

window.moveTo(300,300)

说明：

   moveTo()方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。

 

 

（2）resizeTo()方法

利用resizeTo()方法可以将当前窗口改变成(x,y)大小，x、y分别为宽度和高度。

语法：

window.resizeTo(x,y)

    x：窗口的水平宽度。

    y：窗口的垂直宽度。

例如，将当前窗口改变成(300,200)大小，代码如下：window.moveTo(300,200)

 

（3）screen对象

   screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设置。该对象的常用属性如表15-3所示。

 

例如，使用screen对象设置屏幕属性，代码如下：

window.screen.width        //屏幕宽度

window.screen.height       //屏幕高度

window.screen.colorDepth   //屏幕色深

window.screen.availWidth   //可用宽度

window.screen.availHeight  //可用高度(除去任务栏的高度)

 

2>改变窗口大小

    利用window对象的resizeBy()方法可以实现将当前窗口改变指定的大小(x,y)，当x、y的值大于0时为扩大，小于0时为缩小。

语法：

window.resizeBy(x,y)

x：放大或缩小的水平宽度。

y：放大或缩小的垂直宽度。

 

3>窗口滚动

利用window对象的scroll()方法可以指定窗口的当前位置，从而实现窗口滚动效果。

语法：

scroll(x,y);

x：屏幕的横向坐标。

y：屏幕的纵向坐标。

Window对象中有3种方法可以用来滚动窗口中的文档，这3种方法的使用如下：

window.scroll（x,y）

window.scrollTo（x,y）

window.scrollBy（x,y）

                                                  

4>访问窗口历史

利用history对象实现访问窗口历史，history对象是一个只读的URL字符串数组，该对象主要用来存储一个最近所访问网页的URL地址的列表。

语法：

 [window.]history.property|method([parameters])

 

 

5>控制窗口状态栏

（1）status()方法

    改变状态栏中的文字可以通过window对象的status()方法实现。status()方法主要功能是设置或给出浏览器窗口中状态栏的当前显示信息。

语法：

window.status=str

（2）defaultstatus()方法

语法：

window.defaultstatus=str

   status()方法与defaultstatus()方法的区别在于信息显示时间的长短。Defaultstatus()方法的值会在任何时间显示，而status()方法的值只在某个事件发生的瞬间显示。

 

2. Document文档对象

(1)文档对象概述

    文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象。

 

(2)文档对象的常用属性、方法与事件

1>属性

 

2>方法

 

3>常用事件

         最常用：onblur，onclick，onload

 

(3)Document对象的应用

 

1>链接文字颜色设置

链接文字颜色设置通过使用alinkColor属性、linkColor属性和vlinkColor属性来实现。

（1）alinkColor属性

该属性用来获取或设置当链接获得焦点时显示的颜色。

语法：

 [color=]document.alinkcolor[=setColor]

   setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。

   color：字符串变量，用来获取颜色值，color是可选项。

（2）linkColor属性

该属性用来获取或设置页面中未单击的链接的颜色。

语法：

[color=]document.linkColor[=setColor]

   setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。

   color：字符串变量，用来获取颜色值，color是可选项。

（3）vlinkColor属性

该属性用来获取或设置页面中单击过的链接的颜色。

语法：

[color=]document.vlinkColor[=setColor]

p  setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。

p  color：字符串变量，用来获取颜色值，color是可选项。

 

2>文档前景色和背景色设置

文档前景色和背景色的设置可以使用gbColor属性和fgColor属性来实现。

（1）bgColor属性

该属性用来获取或设置页面的背景颜色。

语法：

[color=]document.bgColor[=setColor]

p  setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。

p  color：字符串变量，用来获取颜色值，color是可选项。

（2）fgColor属性

该属性用来获取或设置页面的前景颜色，即为页面中文字的颜色。

语法：

[color=]document.fgColor[=setColor]

p  setColor：设置颜色的名称或颜色的RGB值，setColor是可选项。

p  color：字符串变量，用来获取颜色值，color是可选项。

 

3>获取并设置URL

获取并设置URL主要可以使用URL属性来实现，该属性是用来获取或设置当前文档的URL。

语法：

[url=]document.URL[=setUrl]

p  url：字符串表达式，用来存储当前文档的URL。url是可选项。

p  setUrl：字符串变量，用来设置当前文档的URL。setUrl是可选项。

 

4>在文档中输出数据

在文档中输出数据可以使用write方法和writeln方法来实现。

（1）write方法

该方法用来向HTML文档中输出数据，其数据包括字符串、数字和HTML标记等。

语法：

document.write(text);

参数text表示在HTML文档中输出的内容。

（2）writeln方法

    该方法与write方法作用相同，唯一的区别在于writeln方法在所输出的内容后，添加了一个回车换行符。但回车换行符只有在HTML文档中<pre></pre>标记（此标记把文档中的空格、回车、换行等表现出来）内才能被识别。

语法：

document.writeln(text);

参数text表示在HTML文档中输出的内容。

 

5>获取文本框并修改其内容

   获取文本框并修改其内容可以使用getElementById()方法来实现。getElementById()方法可以通过指定的id来获取HTML标记，并将其返回。

语法：

   =document.getElementById(id)

p  sElement：用来接收该方法返回的一个对象。

p  id：用来设置需要获取HTML标记的id值。

 

3.JavaScript与表单操作

 

(1)在JavaScript中访问表单

有3种访问表单的方式，分别如下：name=“form1”

1.        通过document.forms[]按编号访问。

document.forms[0]

2.        通过document.forms[]按名称访问。按照正规元素检索机制（例如，使用document.formname）。

                  document.forms[0] 或document.form1

3.        在支持DOM的浏览器中，使用document.getElementById()。

 

 

(2)在JavaScript中访问表单域

每个表单都包含一个表单的聚集，例如，要访问下面的表单域：

<form name="form1" method="post" action="">

    驱动器名称:

    <input type="text" name="text1">   

    <input type="button" name="Button1" value="驱动器类型" οnclick="dtype(document.form1.text1)">

       </form>

         可以通过elements[]进行访问。因此，对于前面定义的表单，可以使用window.document.forms.elements[0]引用第一个域。还可以使用名称访问表单域，window.document.forms.text1或者window.document.forms.elements["text1"]访问第一个域。

 

 

(3)表单的验证

表单的onsubmit事件处理器中有一组函数负责验证。如果输入中包含非法数据，处理器会返回false，显示一条信息，同时取消提交。如果输入的内容合法，则返回true，提交正常进行。本节将介绍一些表单验证常用的技术。

1>验证表单内容是否为空

验证用户名和密码不能为空，如果为空则给出提示。

通过javascript脚本判断用户和密码是否为空，具体代码如下：

   

   <script language="javascript">

           function checkit() { //自定义函数

              if(form1.name.value== "") { //判断用户名是否为空

                  alert("请输入用户名!");

                  form1.name.select();

                  return FALSE;

              }

              if(form1.pwd.value== "") { //判断密码是否为空

                  alert("请输入密码!");

                  form1.pwd.select();

                  return FALSE;

              }

              return TRUE;

           }

       </script>

通过“登录”按钮的onclick事件调用自定义函数checkit()，代码如下：

<input type="image" name="imageField" οnclick="return checkit();" src="images/dl_06.gif"/>     //登录按钮事件

<input type="image" name="imageField2" οnclick="form.reset(); return FALSE;" src="images/dl_07.gif"/>//取消事件

2．验证表单中的email地址是否正确

验证Email地址的正则表达式如下：

/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/

具体步骤如下：

（1）使用JavaScript编写一个用于检测Email地址是否正确的函数checkemail()，该函数只有一个参数email，用于获取输入的Eamil地址，返回值为TRUE或FALSE。代码如下：

<script language="javascript">

function checkemail(email){

         var str=email;

          //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号

         varExpression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

         var objExp=newRegExp(Expression);

         if(objExp.test(str)==TRUE){

                   return TRUE;

         }else{

                   returnFALSE;

</script>

（2）调用checkemail()函数判断Email地址是否正确，并显示相应的提示信息。关键代码如下：

<script language="javascript">

function check(form1){

         if(form1.email.value==""){

                   alert("请输入Email地址!");form1.email.focus();return;

         }

         if(!checkemail(form1.email.value)){

                   alert("您输入的Email地址不正确!");form1.email.focus();return;

         }

         form1.submit();

</script>