Windows对象详解.ppt

1、Window 对象详解,作者 裘森伟,Window 对象,Window对象也叫做窗口对象，他是javascript浏览器对象层次中的最顶层对象。Window对象的下面有很多子对象，例如document对象、navigator对象、location对象等。Window对象的子对象会在后面一一讲解。,第一章 打开和关闭窗口,对窗口的操作首先应该学会的就是打开和关闭窗口。打开和关闭窗口是学会窗口的基础，他很简单，但却非常的重要。用户可以直接启动浏览器打开一个窗口，并显示主页。也可以使用浏览器的中的菜单命令来打开一个窗口。但是在这里主要学习怎么样通过程序来打开一个新窗口。,1.1 打开窗口,在java

2、script中为Window对象定义了open方法来打开一个新的窗口。在open方法中最少有两个参数，最多可以有四个参数，后面的两个参数是可选的。 第一个参数表示要打开窗口的URL，该URL可以使网络中的特定的页，也可以是本地的HTML文档。如果是本地的HTML文档，就分为是使用相对路径还是使用绝对路径。也就是说如果与该程序在同一目录下就可以直接给出该文档的名称，不在同一目录下的就需要给出完整的URL。 Open方法还可以为空，表示打开一个空白文档。创建空白文档后可是使用document.write方法来写入HTML语句。需要注意的是HTML的内容必须组成一个长字符串。,1.1 打开窗口,Op

3、en方法的第二个参数指的是新创建窗口的名称。该新创建窗口的名称既不是HTMl文档中的标题名，也不是创建的Window对象名。所定义的名称在程序的后面很少用到，该名称主要用于判断打开的窗口是哪一个，如果两次打开的窗口名称不一样，则打开两个窗口；如果两次打开的窗口名称相同，则在第一次打开的窗口内打开第二个窗口。,1.1 打开窗口,代码1： Window对象open方法的使用 Window对行啊open方法的使用 窗口一窗口一); var newwindow2 = open(,name2); newwindow2.document.write(窗口二窗口二); /- ,1.1 打开窗口,代码二： W

4、indow对象open方法的使用 Window对行啊open方法的使用 窗口一窗口一); var newwindow2 = open(,name1); newwindow2.document.write(窗口二窗口二); /- ,1.1 打开窗口,从前两个程序和运行结果可以看出，当使用open方法来创建新窗口时，如果使用两个不同名称，就会创建两个窗口，如果使用两个相同的名称，就会只创建一个窗口。使用多个open方法时，如果方法中的第二个参数也就是窗口名相同，就不会创建多个窗口；如果open方法中的URL指定的特定的网页，得到的将是最后一个open方法中的URL指定的网页。,1.2 打开窗口属性

5、设置,本节将继续讲解使用open方法来打开一个新窗口，这里主要讲解open方法中的两个可选参数。Open方法的第三个参数指设置打开的新窗口效果，该参数是默认的，如果没有该参数，则显示窗口中的所有效果，并显示默认大小。,1.2 打开窗口属性设置,Location是否显示地址栏 yes/no 1/0 Menubar是否显示菜单栏yes/no 1/0 Resizable是否允许改变大小yes/no 1/0 Scrollbars是否显示滚动条yes/no 1/0 Status是否显示状态栏 yes/no 1/0 Toolbar是否显示工具栏 yes/no 1/0 Height新窗口高度 整数值 wid

6、th新窗口宽度 整数值 需要注意的是，参数boolean值不是使用true和false来表示。表示true值可以用yes、1或者属性名；表示false值可以使用no或0.将需要的所有效果组成一个长字符串作为第三个参数，效果之间使用逗号分隔。当这只一些效果后，则没有设置的效果值都为false，没有设置高度和宽度就显示默认的高度和宽度。,1.2 打开窗口属性设置,窗口的效果不只是这些，这些知识比较常用的。在特定的浏览器中，都有自己的窗口效果。由于它只对一部分的浏览器起作用，所以它们有使用局限。这里就不多对这部分的内容进行讲解。 Open方法的第四个参数是一个布尔值，他表示是否允许指定的URL替换原

7、窗口中的内容。它很少用到，而且它只使用于已经常见的窗口。所以这里不多做介绍。,1.3 关闭窗口,在上面的两小节中队打开窗口进行了讲解，在本节中就来学习如何关闭窗口，在讲解打开窗口时，使用open方法不需要任何的对象来调用，但是用来关闭窗口close方法就需要一个窗口对象来调用，该对象名称就是使用open方法创建的对象窗口名称。,1.3 关闭窗口,代码： window对象close方法的使用 window对象close方法的使用 ,1.3 关闭窗口,在上面讲的是在主窗口中关闭子窗口，不但这样，还可以使用子窗口来关闭主窗口。这里用到了self和opener等还没学到的知识这里只需要知道它们代表主窗

8、口就可以了，在创建主程序之前，先看看名为“newwindow.html”的子程序代码。 新窗口程序 新窗口程序 ,1.3 关闭窗口,主程序代码 window对象close方法的使用 window对象close方法的使用 ,第二章 对话框,在上一节中最后引出了对话框的知识，在以前的学习中也已经多次使用到了对话框。使用对话框可以很好的实现与用户进行交互。交互的方式有很多，如最常用的显示内容在页面上，但是这样不能很好的引出用户的注意。使用对话框就能很好的弥补这一点，当弹出对话框时，用户必须进行操作，程序才能进行下去。在javascript中定义了信息对话框，选择对话框和提示对话框，在本节中就对这些对

9、话框进行详细的讲解。,2.1 信息对话框,使用信息对话框来告诉用户一些信息。信息对话框中通常具有两个信息，一部分是要传给用户的信息，另一部分是一个按钮。在中文浏览器中，按钮的内容是“确定”，在英文的浏览器中，是“ok”。 在javascript中通过使用window对象的alert方法来创建一个信息对话框。使用alert方法的基本格式为: Window.alert(“message”); 由于Window对象的特殊原因，也可以简写为如下形式。 Alert.(“message”);,2.1 信息对话框,代码： 信息对话框 信息对话框 ,2.1 信息对话框,上面的程序是使用alert方法创建信息对

10、话框为用户提供信息。Alert方法中的参数是一个字符串，不但这样，它还可以是其他数据类型。这是因为javascript是一种灵活的语言，它自动将其他数据转换成字符型。除了这些，alert方法的参数还可以是一个表达式，这也是很有用的，经常被应用在程序调试和测试上。,2.1 信息对话框,代码： 信息对话框 信息对话框 ,2.1 信息对话框,在上面的程序中只有一个对话框，但是在日常生活中是不会只用一个信息对话框的。 信息对话框 信息对话框 显示的是第一个对话框.); alert(第一个信息对话框); document.write(显示的是第二个对话框.); alert(第二个信息对话框) docum

11、ent.write(不在显示对话框.); /- ,2.2 选择对话框,在javascript中，还有一种对话框就是选择对话框。在信息对话框中为用户提供了一条信息，而在选择对话框中是为用户提供一个问题，由用户决定程序的走向。在javascript中使用confirm方法来创建一个选择对话框，confirm方法创建选择对话框的基本形式为： Confirm(“message”); 在confirm方法中也只需要一个字符串，来提供一个问题。,2.2 选择对话框,代码1 选择对话框 选择对话框 ,2.2 选择对话框,代码2 选择对话框 选择对话框 用户名 密码 ,2.2 选择对话框,前面的两个程序中都没

12、有起到选择的作用，无论选择哪个按钮，结果都一样。选择对话框被用户选择以后返回的是一个boolean值，选择“确定”按钮，返回值为true；如果选择“取消”按钮，返回值为false。因此可以利用选择对话框的返回值进行操作。,2.2 选择对话框,代码3： 选择对话框 选择对话框 开始提交); else document.write(取消提交) /- 用户名 密码 ,2.2 选择对话框,从程序的代码中可以看出，将整个confirm方法作为循环条件很会长，所以可以将confirm方法的结果赋给一个变量，然后使用变量名进行操作。 选择对话框 选择对话框 开始提交); else document.writ

13、e(取消提交) /- ,2.3 提示对话框,前面学习的两种对话框，只需要用户通过鼠标进行，在本节中来学习一种需要通过键盘进行操作的对话框，那就是提示对话框。在提示对话框中有一条提示信息、一个需要用户填写的文本框和“确定”、“取消”这两个按钮。 在javascript中，使用prompt方法来创建一个提示对话框。Prompt方法和alert方法和confirm方法有所不同，他通常具有两个参数。Prompt方法的第一个参数是一个字符串，为提示对话框中的提示消息，第二个参数是可选的，为文本框的默认信息。通常情况下，都给出该方法的第二个参数，也就是给出文本框的默认信息，默认信息为用户起到提示的作用。,

14、2.3 提示对话框,代码： 提示对话框 提示对话框 你好,+sstring+欢迎你访问本网站); /- ,2.3 提示对话框,从运行结果可以看出，输入的内容作为一个字符显示在页面上。在提示对话框中，不管输入的是什么内容，当用户单击“取消”按纽时，提示对话框的返回结果都为null。并使用null来操作。在实际开发中是不希望看到这样的结果的。在实际使用prompt方法时，通常需要先设置当提示对话框的返回值为null时的操作。,2.3提示对话框,代码： 提示对话框 提示对话框 =60) alert(恭喜你，你及格了); else alert(很遗憾，你没有及格); /- 由于提示对话框返回的值为字符

15、型，所以需要先将提示对话框的返回值使用parseIn全局函数转换成数值型。,2.3 提示对话框,在上面的几个程序中，都是结合地使用了信息对话框和提示对话框，同时它们也可以嵌套使用。这种使用很少见到，但是它大大的缩短了程序的长度。,第三章 对窗口的操作,由于Window对象表示的就是浏览器打开的窗口，所以对窗口的操作就是对Window对象的操作。在前一节中讲到了打开和关闭窗口也就是对窗口的曹组哦，只是由于它们比较基础就放在前面讲。在本节中就来讲解其他对窗口的曹组，如移动、缩放和滚动窗口。,3.1 移动窗口,在javascript中定义了两种不同的方法来移动窗口，分别是moveBy方法和moveT

16、o方法。先来看看moveBy方法，moveBy方法可以说是相对移动，他的基本使用形式为： Windowname.moveBy(num1,num2); 其中windowname为要移动的窗口的名称，如果不给出则表示移动的为主窗口。moveBy方法具有两个参数。第一个参数表示水平方向上的窗口的相对移动的像素，正数表示向右移动，负数则表示向左移动。第二个参数表示垂直方向上的窗口相对移动的像素，正数表示向下移动，负数表示向上移动。为了更好地理解窗口的相对移动，在下面的程序中定义了两个按钮，单机该按钮则相对移动指定的像素。,3.1 移动窗口,代码1： 移动窗口 移动窗口 ,3.1 移动窗口,除了可以使用

17、moveBy方法让窗口相对移动外，还可以使用moveTo方法让窗口移动到指定的位置。moveTo方法的使用基本形式为： Windowname.moveTo(num1,num2); 该方法和moveBy方法十分相似。其中windowname为要移动的窗口名称，如果不给出则表示移动的为主窗口。moveTo方法既有两个参数。第一个参数表示窗口 x轴的坐标数。第二个参数表示窗口y轴的坐标数。下面就是用moveTo方法将窗口移动到原点位置。,3.1 移动窗口,代码2： 移动窗口 移动窗口 ,3.2 缩放窗口,缩放窗口就是改变窗口大小，它和移动窗口很相似。在javascript中，定义了resizeBy方

18、法和resizeTo方法来缩放窗口，它们分别为相对缩放窗口和绝对缩放窗口。使用resizeBy方法的基本形式为： Windowname.resizeBy(num1,nun2); resizeBy方法中有两个参数。第一个参数表示水平方向上的相对缩放的像素，整数表示将窗口放大，负数表示将窗口缩小。第二个参数表示垂直方向上窗口相对缩放的像素，同样也是整数表示将窗口放大，负数将窗口缩小。当放大窗口时，窗口的左上角不动，而是向上和向右放大。当缩小窗口时，也是窗口左上角不懂，且向上和向左缩小。,3.2 缩小窗口,代码1: 缩放窗口 缩放窗口 ,3.2 缩小窗口,在对窗口进行缩放操作时，还有另外一个resi

19、zeTo方法，用她来绝对缩放窗口，也就是直接指定窗口的大小。用resizeTo方法基本形式为： Windowname.resizeTo(num1,num2); resizeTo方法的第一个参数表示设定窗口的宽度值，第二个参数表示设定窗口的高度。resizeTo方法的参数都是整数，它们不可能是负数。resizeTo方法的使用和resizeBy方法的使用很相似，这里就不再给出resizeTo方法的程序了。 在对窗口进行缩放操作时，并不能无限地缩放和放大窗口。如不能缩小窗口到宽度值为1像素，高度值为1像素的小窗口。或将窗口放大到显示屏幕不能完全显示时，就另外需要其他的操作来完成，所以最好不要将窗口的

20、大小放大到超过显示屏幕。,3.3 滚动窗口,滚动窗口和移动窗口很相似，只是移动窗口是移动整个窗口，而滚动窗口是窗口不动，窗口中的内容进行滚动。在javascript中，定义了scrollBy方法和scrollTo方法来滚动窗口，它们分别为相对滚动窗口和绝对滚动窗口。这两种方法的使用和移动窗口的方法很相似，这里就不再进行讲解。,3.3 移动窗口,代码： 滚动窗口 滚动窗口 ,3.4 打印窗口内容,在javascript中，提供了print方法，使用print方法可以打印窗口中的内容。Print方法的使用和菜单命令中的“打印命令完全相同。Print方法很少被使用到，但是在特定情况下，就可以使用该方

21、法，如需提醒用户打印。,3.4 打印窗口内容,代码： 打印窗口内容 打印窗口内容 此网页很重要 是否需要打印 ,3.5 窗口状态栏,窗口状态栏和窗口内容一样，也是窗口重要的一部分。窗口状态栏是指位于窗口左下角处用于对窗口状态栏进行操作，分别是status属性和defaultStadus属性 Status属性和defaultStatus属性值都是一个字符串，defaultStatus属性值表示在默认情况下窗口状态栏中显示的内容，status属性值表示当某一指定事件发生时，窗口状态栏中显示的内容。,3.5 窗口状态栏,代码： 窗口状态栏 窗口状态栏 精通合计 ,第四章 定时设置,定时设置也是一种对

22、窗口的操作，但由于它有点难懂而且非常重要，所以这里来着重讲解下定时设置。在javascript中，为window对象定义了四种方法来进行定时设置。使用setInterval方法和clearInterval方法来设置和取消循环定时操作。使用setTimeout方法和clearTimeout方法来设置和取消延时定时操作,4.1 循环定时,Javascript中，是用setInterval方法和clearInterval方法来进行循环定时操作。clearInterval方法用来取消循环定时操作，它的使用很简单，其基本形式为： clearInterval(interval); clearInterva

23、l方法有一个参数，该参数是指值setInterval方法的返回值的变量。 setInterval方法是用来设置循环定时操作，它的使用要比clearInterval方法要复杂的多，而且有两种基本形式。其基本形式为： seInterval(expression,milliseconds); setInterval(function,milliseconds,funcarg1.funcargn); 在setInterval方法的第一种形式中，第一个参数是一个字符串，它表示需要循环执行的函数或表达式，如果是函数则不允许出现自变量。第二个参数是一个毫秒值，表示每经过该毫秒就循环执行一次函数或者表达式。第

24、二种形式中的第三个参数表示函数需要的参数。,4.2 延时设定,延时定时和循环定时很相似，在javascript中，使用setTimeout方法和clearTimeout方法来进行延时定时操作。clearTimeout方法用来取消延时定时操作，他的使用很简单，其基本形式为： clearTimeout（interval）； clearTimeout方法中有一个参数，该参数是指值为setTimeout方法返回的变量。 setTimeout方法是用来设置延时定时操作，他的使用要比clearTimeout方法的使用复杂的多，而且有两种基本形式。其基本形式为： setTimeout(expression,

25、milliseconds); setTimeout(function,millisecond,funcarg1.funcargn); 在setTimeout方法的第一种形式中，第一个参数是一个字符串，它表示需要延时执行的函数或表达式，如果是函数则不允许出现自变量。第二个参数是一个毫秒值，表示经过该毫秒就延时执行函数或者表达式，而且是只执行一次。第二种形式中的第三个参数表示函数需要的参数。,3.5 窗口事件,事件是javascript中一个重要的内容，但由于窗口事件很简单且非常容易理解，因此在本章中，就来对窗口事件进行一些简单的了解。窗口事件和浏览器有很大的关系，这里要讲解在各个浏览器中通用的事

26、件。,5.1 文档载入事件,文档载入事件就是onload事件。当文旦那个加载完成后，也就是网页中的所有内容都从服务器下载到浏览器后，触发该事件。Onload事件在实际应用中非常有用，应用该事件能保证在文档完全加载后在进行其他操作。该事件不是有人为触发的，而是当文档加载完成后自动触发的。,5.1 文档载入事件,代码： 文档加载事件 文档载入事件 ,5.1 文档载入事件,在上一个程序中使用的window对象来调用文档载入事件。除了使用这种方法调用事件外，还可以将事件写在bodu标记中，下面就是对上个程序进行改动的代码。 在使用window对象来触发onload事件时，如果触发的事件是一个函数，则只需要函数名，不需要后面的括号；但是在标记中使用onload事件时，除了需要函数名外，还需要后面的括号。,5.1 文档载入事件,代码2： 文档加载事件 文档载入事件 ,5.2 关闭窗口事件,对于当前的知识面而言，onunload事件就是关闭窗口事件，在学到更多知识后，他还可以表示其他的一些事件。Onunload事件也是非常有用的，当向服务器提交信息时，用户可能会关闭窗口，为了能保证提交成功，就可以将提交的操作写在onunload事件中。但是在实际开发中并不是这样操作，一般用于告知用户不要关闭窗口。 Onunl