JavaScript网页.ppt

1、Javascript在网页中的运用,窗口对象、文档对象与框架对象,课程目标,熟悉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属性。,体验项目,想在窗口中使用框架吗？想将页面

2、显示到框架中吗？想知道框架的标题吗？想在页面中使用滚动字幕吗？请看本章的体验程序，程序运行后的首页面如图3-1所示：,当用户点击“学员登录”后，进入“学员登录”页面，如图所示,在“学员登录”页面中输入用户姓名，例如填入“那英”，然后点击“填写完毕”按钮，将显示如图所示页面：,当用户点击“热门课程”后，将进入“热门课程”页面，如图3-4所示,窗口对象,窗口对象是JavaScript对象的主要对象之一，而窗口对象中最常用的以下几种：,opener对象,self对象,parent对象,top对象,history历史对象,opener对象和self对象,opener对象可以用于确定open方法打开窗口

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

4、pener.document.bgColor=color; self.close(); 请选择你喜欢的颜色? 蓝色 红色 ,改变父窗口的颜色,关闭子窗口,调用改变父窗口颜色的函数,parent对象,parent对象仅仅是对子窗口有意义，也就是说，窗口不是顶层窗口。 parent的属性请大家参考框架的框架集窗口，这一点我们以后还会讲到，一个框架集内的子窗口可以使用parent.frameName来查访它的兄弟窗口，比如：一个框架集中的第四个窗口有一个属性name=“homeFrame”，那么它的兄弟窗口可以通过使用parent.homeFrame或者parent.frames3去访问它。,top

5、对象,top对象是顶层窗口的同义词，可以通过使用top.close()将顶层窗口关闭，可以通过使用top.length来得到顶层窗口中含有的框架个数。,location位置对象,location位置对象：用来代表特定窗口的URL信息。 URL的格式：protocol/host:port/path#hash?search URL的种类主要有：http、file、ftp、mailto、news,location位置对象的属性说明,location位置对象的方法,比如，要实现当按下一个按钮后前往网易网站，那么使用下面的代码,history历史对象,用于存储客户端最近访问过的网址清单,history历

6、史对象的属性,history历史对象的方法,窗口常用方法,窗口的常用方法有以下几种:,alert()方法,confirm()方法,close()方法,open()方法,forward()方法,back()方法,alert()方法,alert()方法显示一个带有“确定”按钮的消息框 语法：alert(message) 参数：message是一个字符串 下面的例子是点击按钮执行alert()方法，弹出一个对话框。, ,confirm()方法,confirm()方法显示一个带有确认信息及“确定”和“取消”按钮的消息确认对话框。 语法：confirm(message)。 参数：message 是一个字

7、符串。 点击“确定”之后会返回true，点击“取消”之后会返回false。, function confirmTest() alert(confirm(真的吗?); ,这里我们用alert()方法查看confirm()方法的返回值,点击,close()方法：关闭指定的窗口,语法：close() （直接使用） 参数：无 如果是关闭当前的窗口，可以用下列任意一种方法：,window.close(),self.close(),close(),如果是关闭主浏览器窗口，可以使用top.close(),如果是关闭已经打开的页面，可以使用如下的方法,用页面打开时返回的ID调用close函数。即页面如果用如下

8、的方式打开： messageWin=window.open(XXX.html),其中XXX.html为将要打开的页面，其中messageWin为window.open函数返回的ID。 那么关闭消息窗口，可以使用： messageWin.close(),open()方法：打开一个WEB浏览器窗口,语法：open(Url, windowName, windowFeatures),参数说明如表,forward()方法,指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮。,语法：history.forward() 参数：forward()方法没有参数,这个方法等价于浏览器的“前进”按钮

9、,onClick=history.forward(),back()方法,指向浏览器历史列表中的上一个URL，相当于点击浏览器的“后退”按钮。,语法：history.back() 参数：back()方法没有参数,这个方法等价于浏览器的“后退”按钮, onClick=history.back(),文档对象,文档对象在JavaScript中是一个很重要的对象。,常用的文档对象属性包括,links属性,anchors属性,forms属性,TITLE属性,还有一个重要的方法：write()方法。,links属性,是一个对应于源文件中相应顺序的链接对象构成的数组。 如果文档里有三个链接标签即三个 ，那么可

10、以使用如下的方法查询它们： document.links0 document.links1 document.links2,anchors属性,你可以在代码中通过使用anchors数组查询anchor对象，如果你在文档里容纳了三个命名anchor，它们的名字分别为anchor1，anchor2和 anchor3，那么可以使用下面的代码分别查询它们： document.anchorsanchor1 document.anchorsanchor2 document.anchorsanchor3 或者使用： document.anchors0 document.anchors1 document.a

11、nchors2 如果想要得到文档中anchors的数量，可以使用length属性，即调用：document.anchors.length。,forms属性,如果你在文档里容纳了三个命名forms，它们的属性名分别为form1，form2和form3，那么可以使用下面的代码分别查询它们： document.formsform1 document.formsform2 document.formsform3 或者用： document.forms0 document.forms1 document.forms2 如果想查询第二个form中一个名字为quantity的text对象的值，那么你可以使用

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

13、存在变量docTitle中。,write()方法,write()方法是文档对象中一个很重要的方法，它是将一个或多个表达式写到指定窗口的文档中。 语法：document.write(expr1，.，exprN) 。 参数：expr1，.，exprN，这些参数可以是任何JavaScript的表达式 var mystery = world; /用write方法输出字符串、字符串变量和数字 document.write(Hello ,mystery, testing ,123); /用write方法输出的同时将一个值赋给变量mystr document.write(mystr=Hello ,world

14、.); document.write(mystr); /输出变量mystr的值 var age=16; /如果age=18成立,则输出Adult,否则输出Minor,并将该字符串赋给newage变量 document.write(newage=(age=18)?Adult:Minor); document.write(newage); /输出newage变量 ,框架对象,框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。 frames属性：是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。 可以通过框架数组来查询窗口中的子框架，如果一个窗口含有三个名字分别为fr1、fr2和fr3的子框架，那么可以用下面的方法查询它们： parent.framesfr1 parent.framesfr2 parent.framesfr3 或者用： parent.frames0 parent.frames1 parent.frames2 length属性：可以使用窗口的length属性来查询框架中的子框架的数量。,本章总结,熟悉JavaScrip