1 / 28

第三章

第三章. 窗口对象、文档对象与框架对象. 课程目标. 熟悉 JavaScript 的窗口对象,包括 opener 、 self 、 parent 、 top 等。 熟悉 document 、 location 、 history 、 locationbar 、 menubar 、 scrollbars 、 statusbar 、 toolbar 属性, alert() 、 confirm() 、 close() 、 open() 、 forward() , back() 等方法。

shay-farmer
Download Presentation

第三章

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第三章 窗口对象、文档对象与框架对象

  2. 课程目标 • 熟悉JavaScript的窗口对象,包括opener、self、parent、top等。 • 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性,alert()、confirm()、close()、open()、forward(),back()等方法。 • 理解文档对象中的links、anchors、forms、TITLE属性和write()方法,熟练框架对象中的Frames属性。

  3. 体验项目——<“清华IT软件俱乐部”欢迎窗口> 想在窗口中使用框架吗?想将页面显示到框架中吗?想知道框架的标题吗?想在页面中使用滚动字幕吗?请看本章的体验程序,程序运行后的首页面如图3-1所示: 当用户点击“学员登录”后,进入“学员登录”页面,如图所示

  4. 在“学员登录”页面中输入用户姓名,例如填入“那英”,然后点击“填写完毕”按钮,将显示如图所示页面: 当用户点击“热门课程”后,将进入“热门课程”页面,如图3-4所示

  5. 窗口对象 窗口对象是JavaScript对象的主要对象之一,而窗口对象中最常用的以下几种: opener对象 self对象 parent对象 top对象 history历史对象

  6. opener对象和self对象 opener对象可以用于确定open方法打开窗口的源窗口。 self对象实际上代表的是窗口自身,是用于对窗口对象自身的一些属性进行控制。 下面看一个opener和self对象的使用示例,下例将用一个父窗口打开一个子窗口,然后在子窗口中设置两个链接接,用以改变父窗口的背景色。将主窗口的代码保存为main.html,而将子窗口的代码保存为sub.html。 主窗口main.html <script> queryWin=open('sub.html','','height=100 width=150') </script> 在主窗口用open方法打开文件sub.html作为子窗口,其中高度为100,宽度用默认值

  7. 子窗口sub.html <script> function passToOpener(color) { opener.document.bgColor=color; self.close(); } </script> <center> 请选择你喜欢的颜色?<br> <a href="" onClick="passToOpener('BLUE')">蓝色</a> <a href="" onClick="passToOpener('RED')">红色</a> </center> 改变父窗口的颜色 关闭子窗口 调用改变父窗口颜色的函数

  8. parent对象 parent对象仅仅是对子窗口有意义,也就是说,窗口不是顶层窗口。 parent的属性请大家参考框架的框架集窗口,这一点我们以后还会讲到,一个框架集内的子窗口可以使用parent.frameName来查访它的兄弟窗口,比如:一个框架集中的第四个窗口有一个属性name=“homeFrame”,那么它的兄弟窗口可以通过使用parent.homeFrame或者parent.frames[3]去访问它。

  9. top对象 top对象是顶层窗口的同义词,可以通过使用top.close()将顶层窗口关闭,可以通过使用top.length来得到顶层窗口中含有的框架个数。

  10. location位置对象 location位置对象:用来代表特定窗口的URL信息。 URL的格式:protocol//host:port/path#hash?search URL的种类主要有:http、file、ftp、mailto、news location位置对象的属性说明

  11. location位置对象的方法 比如,要实现当按下一个按钮后前往网易网站,那么使用下面的代码 <input type="button" value="走吧!" onClick="location.href='http://www.163.com/'">

  12. history历史对象 用于存储客户端最近访问过的网址清单 history历史对象的属性 history 历史对象的方法

  13. 窗口常用方法 窗口的常用方法有以下几种: alert()方法 confirm()方法 close()方法 open()方法 forward()方法 back()方法

  14. 点击 alert()方法 alert()方法显示一个带有“确定”按钮的消息框 语法:alert("message") 参数:message是一个字符串 下面的例子是点击按钮执行alert()方法,弹出一个对话框。 <html> <body> <input type="button" value="点我呀!!" onClick="alert('我被点击了')"> </body> </html>

  15. confirm()方法 confirm()方法显示一个带有确认信息及“确定”和“取消”按钮的消息确认对话框。 语法:confirm("message")。 参数:message 是一个字符串。 点击“确定”之后会返回true,点击“取消”之后会返回false。 <html> <body> <script> function confirmTest() { alert(confirm("真的吗?")); } </script> <input type=“button” value=“测试" onClick="confirmTest ()"> </body> </html> 这里我们用alert()方法查看confirm()方法的返回值

  16. 确定 取消 点击

  17. close()方法:关闭指定的窗口 语法:close() (直接使用) 参数:无 如果是关闭当前的窗口,可以用下列任意一种方法: window.close() 如果是关闭主浏览器窗口,可以使用top.close() self.close() close() 如果是关闭已经打开的页面,可以使用如下的方法 用页面打开时返回的ID调用close函数。即页面如果用如下的方式打开: messageWin=window.open("XXX.html") 其中XXX.html为将要打开的页面,其中messageWin为window.open函数返回的ID。 那么关闭消息窗口,可以使用: messageWin.close()

  18. open()方法:打开一个WEB浏览器窗口 语法:open(Url, windowName, windowFeatures) 参数说明如表

  19. forward()方法 指向浏览器历史列表中的下一个URL,相当于点击浏览器的“前进”按钮。 语法:history.forward() 参数:forward()方法没有参数 这个方法等价于浏览器的“前进”按钮 <p><input type="button" value="< Go Forth>" onClick="history.forward()">

  20. back()方法 指向浏览器历史列表中的上一个URL,相当于点击浏览器的“后退”按钮。 语法:history.back() 参数:back()方法没有参数 这个方法等价于浏览器的“后退”按钮 <input type="button" value="< Go Back >" onClick="history.back()">

  21. 文档对象 文档对象在JavaScript中是一个很重要的对象。 links属性 anchors属性 常用的文档对象属性包括 forms属性 TITLE属性 还有一个重要的方法:write()方法。

  22. links属性 是一个对应于源文件中相应顺序的链接对象构成的数组。 如果文档里有三个链接标签即三个<a herf=“...”> ,那么可以使用如下的方法查询它们: document.links[0] document.links[1] document.links[2]

  23. anchors属性 你可以在代码中通过使用anchors数组查询anchor对象,如果你在文档里容纳了三个命名anchor,它们的名字分别为anchor1,anchor2和 anchor3,那么可以使用下面的代码分别查询它们: document.anchors["anchor1"] document.anchors["anchor2"] document.anchors["anchor3"] 或者使用: document.anchors[0] document.anchors[1] document.anchors[2] 如果想要得到文档中anchors的数量,可以使用length属性,即调用:document.anchors.length。

  24. forms属性 如果你在文档里容纳了三个命名forms,它们的属性名分别为form1,form2和form3,那么可以使用下面的代码分别查询它们: document.forms["form1"] document.forms["form2"] document.forms["form3"] 或者用: document.forms[0] document.forms[1] document.forms[2] 如果想查询第二个form中一个名字为quantity的text对象的值,那么你可以使用 document.forms[1].quantity.value

  25. TITLE属性:代表文档标题的一个字符串 TITLE属性体现的是TITLE标签的开始和结束之间的值。如果一个文档没有标题,则它的TITLE属性是null,比如,在下面的例子中TITLE属性的值被保存在变量docTitle中。 var newWindow = window.open("http://www.163.com") var docTitle = newWindow.document.title 以上两行代码中,第一行代码是打开网页,同时返回一个ID保存在变量newWindow中,在第二行代码中用返回的ID调用document.title得到其标题,并将这个标题保存在变量docTitle中。

  26. write()方法 write()方法是文档对象中一个很重要的方法,它是将一个或多个表达式写到指定窗口的文档中。 语法:document.write(expr1,...,exprN) 。 参数:expr1,...,exprN,这些参数可以是任何JavaScript的表达式 <script> var mystery = "world"; //用write方法输出字符串、字符串变量和数字 document.write("Hello ",mystery," testing ",123); </script><br> <script> //用write方法输出的同时将一个值赋给变量mystr document.write(mystr="Hello ","world..."); document.write(mystr); //输出变量mystr的值 </script><br> <script> var age=16; //如果age>=18成立,则输出Adult,否则输出Minor,并将该字符串赋给newage变量 document.write(newage=(age>=18)?"Adult":"Minor"); document.write(newage); //输出newage变量 </script><br>

  27. 框架对象 框架对象:是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。 frames属性:是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。 可以通过框架数组来查询窗口中的子框架,如果一个窗口含有三个名字分别为fr1、fr2和fr3的子框架,那么可以用下面的方法查询它们: parent.frames["fr1"] parent.frames["fr2"] parent.frames["fr3"] 或者用: parent.frames[0] parent.frames[1] parent.frames[2] length属性:可以使用窗口的length属性来查询框架中的子框架的数量。

  28. 本章总结 • 熟悉JavaScript的窗口对象,包括opener、self、parent、top等。 • 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性,alert()、confirm()、close()、open()、forward(),back()等方法。 • 理解文档对象中的links、anchors、forms、TITLE属性和write()方法,熟练框架对象中的Frames属性。

More Related