第24章使用 JavaScrip *客水容水*涂水*水客客水容客***客水客客*水*水水*称水*水幸 水*客水水 24.1简介 242事件与函数 Wha;Newm5cm12上回x 2421HIML文档中嵌入 JavaScript File Edit View Go Communicator Help 2422事件的概念 3应 2423函数的概念 43层次结构 Search for the△ lowest price on Netscap 2431 JavaScript的层次结构 2432网址对象 [NextI 244帧窗 2441创建帧窗 2442 JavaScript和帧窗 245创建新窗口与建立新文档 Chick here 2451创建新窗口加载HIML文档 Click here! What's 24.52 window open的处理法 New in 2453创建新窗口与建立新文档 Devedge Home 246:状态栏和超时设置 Javascr Documentation Hom 246.1状态栏和超时设置 What's New in 1.2 2462定时设置 2463滚动程序 247预定义对象 Contents the new 247.1时间对象 2472数组对象 features Chapter 1. Event 2473数学对象 Model added to 248确认输入 Chapter 2. eyents JavaScript动画 1.2. such 249.1图像对象 regular 249.2加载和更新图像 门目强 2493预加载图像 2494 JavaScript动画程序举例 24.10层对象 24.10.1层对象的概念 2410.2创建层对象 24.10.3层与 JavaScript 24104层对象的移动 2410.5图像的剪取 2410.6嵌套层 2411层叠样式和 JavaScript样式 练习与思考题 参考文献和站点 **水亦水水客客客水*水 JavaScript是一种解释语言,使用它可以使你的网页制作得更加科学、生动和美观,人 机界面更加友好。本章将提供大量的程序实例介绍 JavaScript的基本概念和应用,为读者进 步深入学习 JavaScript和其他描述性语言打下基础。 除了24.10节和2411节中的部分源程序,本章所示的程序都是在 Netscape公司的 Communicator404浏览器和微软公司的 Internet Explorer30以上版本的浏览器上运行过的
第 24 章 使用 JavaScript *************************************************************************** 24.1 简介 24.2 事件与函数 24.2.1 HTML 文档中嵌入 JavaScript 24.2.2 事件的概念 24.2.3 函数的概念 24.3 层次结构 24.3.1 JavaScript 的层次结构 24.3.2 网址对象 24.4 帧窗 24.4.1 创建帧窗 24.4.2 JavaScript 和帧窗 24.5 创建新窗口与建立新文档 24.5.1 创建新窗口加载 HTML 文档 24.5.2 window.open()的处理法 24.5.3 创建新窗口与建立新文档 24.6: 状态栏和超时设置 24.6.1 状态栏和超时设置 24.6.2 定时设置 24.6.3 滚动程序 24.7 预定义对象 24.7.1 时间对象 24.7.2 数组对象 24.7.3 数学对象 24.8 确认输入 24.9 JavaScript 动画 24.9.1 图像对象 24.9.2 加载和更新图像 24.9.3 预加载图像 24.9.4 JavaScript 动画程序举例 24.10 层对象 24.10.1 层对象的概念 24.10.2 创建层对象 24.10.3 层与 JavaScript 24.10.4 层对象的移动 24.10.5 图像的剪取 24.10.6 嵌套层 24.11 层叠样式和 JavaScript 样式 练习与思考题 参考文献和站点 *************************************************************************** JavaScript 是一种解释语言，使用它可以使你的网页制作得更加科学、生动和美观，人- 机界面更加友好。本章将提供大量的程序实例介绍 JavaScript 的基本概念和应用，为读者进 一步深入学习 JavaScript 和其他描述性语言打下基础。 除了 24.10 节和 24.11 节中的部分源程序，本章所示的程序都是在 Netscape 公司的 Communicator 4.04 浏览器和微软公司的 Internet Explorer 3.0 以上版本的浏览器上运行过的
第24章使用 Javascript 如果使用 Netscape公司和微软公司较低版本的浏览器时,有可能会出现异常。 241简介 JavaScript不是Java!由于 JavaScript与Java类似,而且它们的名称也很相似, JavaScript 又支持大多数Java表示法和基本的流程控制结构,因此许多人都认为 JavaScript就是Java。 其实, JavaScript是由客户机解释的语言,而Java是从服务机上下载在客户机上运行的编译 过的字节码( bytecodes); JavaScript的对象是在运行时引用的,称为动态联编( Dynamic binding),而Java的对象是编译时引用的,称为静态联编( Static binding) JavaScript是由 Netscape公司开发的一种脚本语言( scripting language),或者称为描述语 言。在HIML基础上,使用 JavaScript可以开发交互式web网页。运行用 JavaScript编写的 程序需要能支持 JavaScript语言的浏览器。 Netscape公司 Navigator30以上版本的浏览器都 能支持 JavaScript程序,微软公司 Internet Explorer30以上版本的浏览器基本上支持 JavaScript。微软公司还有她自己开发的 JavaScript,称为 JScript JavaScript和 JScript有许 多相似之处。 在介绍过程中,将通过大量的例子来体会 JavaScript的含义,这些例子与HIM紧紧地 连在一起,并且可以直接应用于网页制作。由于例子中的每条语句、每个对象和每个符号等 许多细节不可能在本书中详细阐述。因此,如果需要更深入更详细的内容,请参看有关 JavaScript语言和HML语言方面的参考文献 242事件与函数 2421HTML文档中嵌入 JavaScript JavaScript程序可直接嵌入到HIML文档中,如下例所示 JavaScript入门 ≤BODY> 在这个例子中,我们可看到在…之间插入了一个新的标签: …,而用来告诉浏览器这是用 JavaScript编写的程序。HIML的注释标签用来告诉浏览器不要显示注释 2422事件的概念 在 JavaScript语言中,事件( events)和事件处理程序( event handlers是非常重要的事情 绝大部分事件都是由用户的动作所引发的。如果用户按鼠标器的按钮,就产生 Click(点击) 事件,如果鼠标器的指针在链接上移动,就产生 MouseOver事件。在 JavaScript中定义有许 多事件。要使 JavaScriμ程序能够响应事件,就需要事件处理程序的帮助。当点击按钮时, 按钮可创建一个弹出窗口,我们需要使用的事件处理程序就叫做 ONCLICK。如果出现按钮 事件,事件处理程序就告诉计算机做什么工作。例如,下面所示的源程序:
第 24 章 使用 JavaScript 2 如果使用 Netscape 公司和微软公司较低版本的浏览器时，有可能会出现异常。 24.1 简介 JavaScript 不是 Java! 由于 JavaScript 与 Java 类似，而且它们的名称也很相似，JavaScript 又支持大多数 Java 表示法和基本的流程控制结构，因此许多人都认为 JavaScript 就是 Java。 其实，JavaScript 是由客户机解释的语言，而 Java 是从服务机上下载在客户机上运行的编译 过的字节码(bytecodes)；JavaScript 的对象是在运行时引用的，称为动态联编(Dynamic binding)，而 Java 的对象是编译时引用的，称为静态联编(Static binding)。 JavaScript 是由 Netscape 公司开发的一种脚本语言(scripting language)，或者称为描述语 言。在 HTML 基础上，使用 JavaScript 可以开发交互式 Web 网页。运行用 JavaScript 编写的 程序需要能支持 JavaScript 语言的浏览器。Netscape 公司 Navigator 3.0 以上版本的浏览器都 能支持 JavaScript 程序，微软公司 Internet Explorer 3.0 以上版本的浏览器基本上支持 JavaScript。微软公司还有她自己开发的 JavaScript，称为 JScript。JavaScript 和 JScript 有许 多相似之处。 在介绍过程中，将通过大量的例子来体会 JavaScript 的含义，这些例子与 HTML 紧紧地 连在一起，并且可以直接应用于网页制作。由于例子中的每条语句、每个对象和每个符号等 许多细节不可能在本书中详细阐述。因此，如果需要更深入更详细的内容，请参看有关 JavaScript 语言和 HTML 语言方面的参考文献。 24.2 事件与函数 24.2.1 HTML 文档中嵌入 JavaScript JavaScript 程序可直接嵌入到 HTML 文档中，如下例所示： JavaScript 入门 这是 JavaScript 程序 在这个例子中，我们可看到在 … 之间插入了一个新的标签： … ，而用来告诉浏览器这是用 JavaScript 编写的程序。HTML 的注释标签用来告诉浏览器不要显示注释 24.2.2 事件的概念 在 JavaScript 语言中，事件(events)和事件处理程序(event handlers)是非常重要的事情。 绝大部分事件都是由用户的动作所引发的。如果用户按鼠标器的按钮，就产生 Click(点击) 事件，如果鼠标器的指针在链接上移动，就产生 MouseOver 事件。在 JavaScript 中定义有许 多事件。要使 JavaScript 程序能够响应事件，就需要事件处理程序的帮助。当点击按钮时， 按钮可创建一个弹出窗口，我们需要使用的事件处理程序就叫做 ONCLICK。如果出现按钮 事件，事件处理程序就告诉计算机做什么工作。例如，下面所示的源程序：
第24章使用 Javascript 在浏览器上将显示如图2401和图24-02所示的页面 郑Ne scape Microsoft Internet Explorer Edit View Go Communicator Help 点击该按钮之后产生 点击该按钮 图24-01事件概念(一) 图24-02事件概念(二) 在这个源程序中,标签中的TYPE=" BUTTON"ⅥALUE=”点击该按钮”这部 分产生一个按钮点击谈按钮, ONCLICK=aer哈!)”这部分告诉计算机在有点击事 件出现后要执行 alert('哈哈!)程序, alert将创建一个弹出窗口,括号中指定的是字符串 本例中是哈哈!,这是要在窗口上显示的文字。执行程序的结果是产生一个窗口,并显示 “哈哈!” 在 ONCLICK=" alert((哈哈!)"这部分中用了单引号()和双引号("")。这两种引号都可以 使用,次序也可以颠倒,即可写成 ONCLICK= alert(("哈哈!")'。 在 Javascript中有许多事件处理程序可用,但不包含所有的事件处理程序。如果需要全 面了解,请参看 JavaScript的参考手册 2423函数的概念 在 JavaScript中,函数( Function)是一个很重要的概念。函数实际上是把几个命令捆绑在 起的子程序。由于历史的原因,现在许多中文教科书都把“ Function”叫做函数,但其实 质是“函数例程” 假如我们要写一段重复输出相同文本三次的程序,下面是一种完成这个功能的源程序: ") document. write("这是 JavaScript!") document write(" JavaScript不是很难学!") document. write("这是 JavaScript!") document write(" JavaScript不是很难学!") document write("这是 JavaScript!") 这段程序在浏览器上将显示如图24-03所示的页面
第 24 章 使用 JavaScript 3 在浏览器上将显示如图 24-01 和图 24-02 所示的页面。 点击该按钮之后产生→ 图 24-01 事件概念(一) 图 24-02 事件概念(二) 在这个源程序中，标签中的 TYPE=" BUTTON " VALUE="点击该按钮" 这部 分产生一个按钮 ，ONCLICK="alert('哈哈！')"这部分告诉计算机在有点击事 件出现后要执行 alert( ' 哈哈！')程序，alert()将创建一个弹出窗口，括号中指定的是字符串， 本例中是' 哈哈！'，这是要在窗口上显示的文字。执行程序的结果是产生一个窗口，并显示 “哈哈!”。 在 ONCLICK="alert('哈哈！')"这部分中用了单引号(' ')和双引号(" ")。这两种引号都可以 使用，次序也可以颠倒，即可写成 ONCLICK='alert("哈哈！") '。 在 JavaScript 中有许多事件处理程序可用，但不包含所有的事件处理程序。如果需要全 面了解，请参看 JavaScript 的参考手册。 24.2.3 函数的概念 在 JavaScript 中，函数(Function)是一个很重要的概念。函数实际上是把几个命令捆绑在 一起的子程序。由于历史的原因，现在许多中文教科书都把“Function”叫做函数，但其实 质是“函数例程”。 假如我们要写一段重复输出相同文本三次的程序，下面是一种完成这个功能的源程序： "); document.write("这是 JavaScript!"); document.write("JavaScript 不是很难学!"); document.write("这是 JavaScript!"); document.write("JavaScript 不是很难学!"); document.write("这是 JavaScript!"); // --> 这段程序在浏览器上将显示如图 24-03 所示的页面
第24章使用 Javascript 燕Nets 三回 Eile Ed View Go Communicator Help JavaScript不是很难学 这是 JavaScript! javAscript不是很难学! 这是 过息中不是很难学 图24-03演示函数概念的页面 完成同样功能的这段源程序也可以用下面的程序来实现 ") my Function my Function 在这段程序中我们定义了一个函数 function my Function( i document. write(" JavaScript不是很难学!") document. write(这是 JavaScript") 其中, function是 JavaScript函数的声明语句, function后面跟的函数名“ my Function” 可以是任意的名字, my Function函数的命令放在大括号“{}”中,该函数捆绑了两个 JavaScript 的“ document. write”命令,并且可通过函数调用来执行。在这个例子中可以看到,在函数 定义下面调用函数 my Function共3次 函数也可以与事件处理程序联用。例如 unction calculation(( var x= 12 vary=5 var result=x+y alert(result) HTML> 其中,关键字“var”是 JavaScript的变量( variable声明语句,声明“x”“y”和“ result
第 24 章 使用 JavaScript 4 图 24-03 演示函数概念的页面 完成同样功能的这段源程序也可以用下面的程序来实现： "); document.write("这是 JavaScript!"); } myFunction(); myFunction(); myFunction(); // --> 在这段程序中我们定义了一个函数： function myFunction() { document.write("JavaScript 不是很难学!"); document.write(这是 JavaScript!"); 其中，function 是 JavaScript 函数的声明语句，function 后面跟的函数名“myFunction” 可以是任意的名字，myFunction 函数的命令放在大括号“{ }”中，该函数捆绑了两个 JavaScript 的“document.write()”命令，并且可通过函数调用来执行。在这个例子中可以看到，在函数 定义下面调用函数 myFunction()共 3 次。 函数也可以与事件处理程序联用。例如， 其中，关键字“var”是 JavaScript 的变量(variable)声明语句，声明“x”、“y”和“result
第24章使用 Javascript 是变量:这条语句表示,当点击标有“计算”字样的 BUTTON按钮时就调用 函数 calculation(。你可以把这段程序存放在一个名为 fuc test html文件中,然后用浏览器试 试,看计算结果是否等于1 243层次结构 2431 JavaScript的层次结构 JavaScript以分层结构的方式组织Web网页上的所有文素。每个文素都被作为一个对象 ( Object)来看待,称为“HIML对象”,每个对象都有属性( Properties)和处理法( methods)下 面是一个简单的HIML文档,存放该文档的文件名假设为 justest. html: 姓名 email 我的主页 CENTER 在浏览器上将显示如图2404所示的页面。 上rdwb中 element( 1I mage[1] 我的 边metn 图2404层次结构分析页面 从 JavaScript的功能来看,web浏览器本身是一个窗口对象( window object,在这个对 象中可以加载HIML文档,例如 justest. html。同样, JavaScript把 justest. html也看成是一个对 象,称为文档对象( document object,它也是 JavaScript中的一个非常重要的对象,而且会经 常用到它。 在 justest. html这个HIML文档中,有两幅图像( image[], Image[])、一个链接( links(OD) 以及一个交易单(form),交易单中带有两个文本域( element[o], element1])和一个按钮
第 24 章 使用 JavaScript 5 是变量；这条语句表示，当点击标有“计算”字样的 BUTTON 按钮时就调用 函数 calculation()。你可以把这段程序存放在一个名为 fuc_test.html 文件中，然后用浏览器试 一试，看计算结果是否等于 17。 24.3 层次结构 24.3.1 JavaScript 的层次结构 JavaScript 以分层结构的方式组织 Web 网页上的所有文素。每个文素都被作为一个对象 (Object)来看待，称为“HTML 对象”，每个对象都有属性(Properties)和处理法(methods)。下 面是一个简单的 HTML 文档，存放该文档的文件名假设为 jstest.html： 姓名: email: 我的主页 在浏览器上将显示如图 24-04 所示的页面。 图 24-04 层次结构分析页面 从 JavaScript 的功能来看，Web 浏览器本身是一个窗口对象(window object)，在这个对 象中可以加载 HTML 文档，例如 jstest.html。同样，JavaScript 把 jstest.html 也看成是一个对 象，称为文档对象(document object)，它也是 JavaScript 中的一个非常重要的对象，而且会经 常用到它。 在 jstest.html 这个 HTML 文档中，有两幅图像(image[0]，image[1])、一个链接(links[0]) 以及一个交易单(form)，交易单中带有两个文本域(element[0]，element[1])和一个按钮
第24章使用 Javascript ( elemen3])。它们的结构如图2405所示。 HIML document imaged imaged elemento 图2405 JavaScript的层次结构 JavaScript把图24-05中的每个框都看成是对象。如果要想得到各种不同对象的信息和 管理它们,首先我们就要知道这些对象的名称,其次我们必须要知道如何去存取这些对象 图2405为我们给各个对象的命名提供了很大的启发,就是按照 JavaScript的层次结构来命 名。据此,可按照从顶向下的路线,第一个对象就被命名为“ document”,第一幅图像被命 名为“ document images[01”,…,第一个交易单中的第一个文本对象被命名为 document forms[O].elements",.", document forms(0].elements 3 为了得到各种对象的属性和可使用的处理法,我们必须要查看有关 JavaScript的文献(请 看参考文献: JavaScript参考手册)。例如,我们查看“text”(文本)对象时,可以看到它有很 多属性( property)和可使用的处理法( method)。其中的一个属性是值( value),这个值是输入到 这个对象的文本,于是我们就可使用下面的格式存取对象的值: names document, forms[O]. elements[O] value 我们可把 forms[0]的名称命名为" my Form",于是“ Input”对象1的名称就可写成 " document. my Form. input'",它的属性是 value,而“对象2”和“对象3”就可对“对象1” 进行操作。例如, 对象1 p 对象2: p> 对象3 </FORI 在浏览器上将显示如图2406所示的页面。 资 Netscape File Edt View Go Communicator He 对象1:所的数据 付象2:更新数据 对象3:黄复鬃据 图2406对象间的操作 点击“更新数据”按钮就对“对象1”进行操作,显示“新的数据!”。 2432网址对象 除了 window(窗口对象)和 document(文档对象)之外,另一个重要的对象是 locatio(网址
第 24 章 使用 JavaScript 6 (element[3])。它们的结构如图 24-05 所示。 HTML document image[0] form[0] image[1] links[0] element[0] element[1] element[2] 图 24-05 JavaScript 的层次结构 JavaScript 把图 24-05 中的每个框都看成是对象。如果要想得到各种不同对象的信息和 管理它们，首先我们就要知道这些对象的名称，其次我们必须要知道如何去存取这些对象。 图 24-05 为我们给各个对象的命名提供了很大的启发，就是按照 JavaScript 的层次结构来命 名。据此，可按照从顶向下的路线，第一个对象就被命名为“document”，第一幅图像被命 名为“document.images[0]”，…，第一个交易单中的第一个文本对象被命名为 “document.forms[0].elements[0]”，…，document.forms[0].elements[3]。 为了得到各种对象的属性和可使用的处理法，我们必须要查看有关 JavaScript 的文献(请 看参考文献：JavaScript 参考手册)。例如，我们查看“text”(文本)对象时，可以看到它有很 多属性(property)和可使用的处理法(method)。其中的一个属性是值(value)，这个值是输入到 这个对象的文本，于是我们就可使用下面的格式存取对象的值： name= document.forms[0].elements[0].value; 我们可把 forms[0]的名称命名为"myForm"，于是“input”对象 1 的名称就可写成 "document.myForm.input"，它的属性是 value，而“对象 2”和“对象 3”就可对“对象 1” 进行操作。例如， 对象 1： 对象 2： 对象 3： 在浏览器上将显示如图 24-06 所示的页面。 图 24-06 对象间的操作 点击“更新数据”按钮就对“对象 1”进行操作，显示“新的数据!”。 24.3.2 网址对象 除了 window(窗口对象)和 document(文档对象)之外，另一个重要的对象是 location(网址
第24章使用 Javascript 对象)。这个对象代表的是要访问的HIML文档所在的网络地址。因此,如果你要访问网页 ht/www.xyz.com/page.html,那么locationhref就等于这个网址。 更重要的是你可以给 location. href指定新的值。下面的例子就可以把新的网页加载到窗 口上: 在浏览器上将显示如图2407所示的页面 File Edt View Go Communicator Help 中国教官和科研计某机周( CERNET Doum强s 图2407网址对象的演示页面 当你点击该按钮时就可浏览“中国教育和科研计算机网”的主页。 244帧窗 2441创建帧窗 也许你浏览万维网(Wb)时已经注意到,Web浏览器窗口被分成两个或者三个显示窗口 分别显示各自的HIML文档。每个这样的小窗口称为 frame,可把它译成“帧窗”。一个常 见的问题就是 JavaScript如何与帧窗一起工作。 创建帧窗需要使用标签。例如要把web浏览器窗口分成两个等 宽的帧窗,可用下面的程序实现: 在浏览器上将显示如图2408所示的页面。 s+ Netscape -[file: ///CI/ajava/istest/hd4.Ox File Edit View Go Bookmarks Options Directory window Help 文档1:这是 Netscape的主页 文档2:这是 Microsoft的主页 Jso Document: Done 图24-08创建帧窗的概念 在这个程序中使用了的rows(行)属性把Web浏览器窗口分成上下两个帧窗 上面的帧窗加载 pagel. html,下面的帧窗加载page2html。 如果使用的 columns(列)属性,Web浏览器窗口就会被纵向分割。此外,浏览 器窗口的分割还可以嵌套。例如,使用下面的程序可在横向和纵向对浏览器窗口进行分割
第 24 章 使用 JavaScript 7 对象)。这个对象代表的是要访问的 HTML 文档所在的网络地址。因此，如果你要访问网页 http://www.xyz.com/page.html，那么 location.href 就等于这个网址。 更重要的是你可以给 location.href 指定新的值。下面的例子就可以把新的网页加载到窗 口上： 在浏览器上将显示如图 24-07 所示的页面。 图 24-07 网址对象的演示页面 当你点击该按钮时就可浏览“中国教育和科研计算机网”的主页。 24.4 帧窗 24.4.1 创建帧窗 也许你浏览万维网(Web)时已经注意到，Web 浏览器窗口被分成两个或者三个显示窗口， 分别显示各自的 HTML 文档。每个这样的小窗口称为 frame，可把它译成“帧窗”。一个常 见的问题就是 JavaScript 如何与帧窗一起工作。 创建帧窗需要使用和标签。例如要把 Web 浏览器窗口分成两个等 宽的帧窗，可用下面的程序实现： 在浏览器上将显示如图 24-08 所示的页面。 图 24-08 创建帧窗的概念 在这个程序中使用了的 rows(行)属性把 Web 浏览器窗口分成上下两个帧窗， 上面的帧窗加载 page1.html，下面的帧窗加载 page2.html。 如果使用的 columns(列)属性，Web 浏览器窗口就会被纵向分割。此外，浏览 器窗口的分割还可以嵌套。例如，使用下面的程序可在横向和纵向对浏览器窗口进行分割：
第24章使用 Javascript 在浏览器上将显示如图24-09所示的页面。 MeNetscape-Ifile: ///CI/ajava/istest/"hd4prev. htmI 回区 File Edit View Go Bookmarks Optons Directory window Help 文档1:这是 Netscape的主页 文档2:这是 Microsc的主页 这是新天地的主页这是濟华大学的主页这是北京大学的 图2409创建不同样式的帧窗 2442 Javascript和帧窗 前面已经介绍, JavaScript以分层结构的方式来组织网页上的所有文素,对帧窗也是如 此。为了简单起见,假设web浏览器窗口被分成 framer和fame2两个帧窗,在这种情况下 的分层结构如图24-10所示 父窗口( parent browser window frame frame2 page l. html age2 html 子帧窗( children) 图24-10两个帧窗的结构 顶层是 browser window(浏览器窗口)对象,称为 parent(父窗口),下层是 frame(帧窗1) 和fame2(帧窗2)对象,称为 children(子帧窗)。通过对这些对象进行命名之后在两个帧窗之 间就可以交换信息。例如,用户在 frame上点击一个链接,本来应该是在 frame显示的 HIML文档,现在可让它显示在 frame2上。这样一来, frame1就可以作为浏览目录,目录 中的每个条目就可以链接到许多不同站点的主页。 图24-11所示的网页是帧窗的一个具体应用。在这个应用中,帧窗 frame作为“多媒 体技术基础”作业的目录项,帧窗fame2用来显示具体内容。例如,在 frame中点击“详 细内容”时,在 frame2中显示作业的详细内容,而帧窗 frame的内容保持不变
第 24 章 使用 JavaScript 8 在浏览器上将显示如图 24-09 所示的页面。 图 24-09 创建不同样式的帧窗 24.4.2 JavaScript 和帧窗 前面已经介绍，JavaScript 以分层结构的方式来组织网页上的所有文素，对帧窗也是如 此。为了简单起见，假设 Web 浏览器窗口被分成 frame1 和 frame2 两个帧窗，在这种情况下 的分层结构如图 24-10 所示： browser window frame1 page1.html window frame2 page2.html 父窗口(parent) 子帧窗 (children) 图 24-10 两个帧窗的结构 顶层是 browser window(浏览器窗口)对象，称为 parent(父窗口)，下层是 frame1(帧窗 1) 和 frame2(帧窗 2)对象，称为 children(子帧窗)。通过对这些对象进行命名之后在两个帧窗之 间就可以交换信息。例如，用户在 frame1 上点击一个链接，本来应该是在 frame1 显示的 HTML 文档，现在可让它显示在 frame2 上。这样一来，frame1 就可以作为浏览目录，目录 中的每个条目就可以链接到许多不同站点的主页。 图 24-11 所示的网页是帧窗的一个具体应用。在这个应用中，帧窗 frame1 作为“多媒 体技术基础”作业的目录项，帧窗 frame2 用来显示具体内容。例如，在 frame1 中点击“详 细内容”时，在 frame2 中显示作业的详细内容，而帧窗 frame1 的内容保持不变
第24章使用 Javascript 大学本科生基础课程 “多媒体技术基础 作业要求 内密简介 弹细内密 总结瓶告 图24-11一个帧窗作为浏览目录的网页 设计这样的网页首先需要一个创建 frame1和 frame两个帧窗的程序,在此假设程序名 为 justest02hm,这个程序可写成 在这个程序中,把 frameR命名为menu,开始时显示 menu htm文档;把 frame2命名为 ain,开始时显示 homework. html文档。 homework. html 大学本科生基础课程 “多媒体技术基础” 作业式样 (仅供参考) menu. html: 多媒体 技术基础 作业名称 内容简介 影视图像 作业总结
第 24 章 使用 JavaScript 9 图 24-11 一个帧窗作为浏览目录的网页 设计这样的网页首先需要一个创建 frame1 和 frame2 两个帧窗的程序，在此假设程序名 为 jstest02.html，这个程序可写成： 在这个程序中，把 frame1 命名为 menu，开始时显示 menu.html 文档；把 frame2 命名为 main，开始时显示 homework.html 文档。 homework.html： 大学本科生基础课程 “多媒体技术基础” 作业式样 (仅供参考) menu.html： 多媒体 技术基础 作业名称 内容简介 影视图像 作业总结
第24章使用 Javascript menu. html文档涉及如下所示的4个文档: ① start. htm文档: 开始页 作业名称 HTML> ② first htn文档: 文档1<> 内容简介 ⑧ second. html: 文档2 影视片段 ④ third html 文档3 学习总结 在 menu. html文档中,需要说明如下几点 你(1)使用了一种把新的网页加载到main帧窗中的不同方法。具体说就是,在“内容简介”中的链接使用了加载函数 load, 并且在的属性HREF=”"中使用了“ javascript:"来把 first. htm文档加载到man帧窗中 (2) JavaScript的加载函数 load定义为 function load(url)i parent. main location. href= url 括号“()”中的u是传递参数的变量,这就意味字符串 first. html通过u变量来传递 通过变量来传递参数是程序设计的一个重要概念 (3)其他链接使用的是标签“”的“ TARGET”属性,实际上它不是 JavaScript的属 性,而是HIML的属性。 (4)在“作业总结”中,“”的属性 “ TARGET=top”是去掉 frame和 frame2帧窗。 third. html将显示在整个浏览器窗口中。 (5)如果浏览器窗口分割成 frame1、fame2和fame3共三个帧窗,使用 JavaScript的 load 函数可能会更灵活,此时的load函数可定义为: function loadtwolurll, url2)i
第 24 章 使用 JavaScript 10 menu.html 文档涉及如下所示的 4 个文档： ① start.html 文档： 开始页 作业名称 … ② first.html 文档： 文档 1 内容简介 ③ second.html: 文档 2 影视片段 ④ third.html: 文档 3 学习总结 在 menu.html 文档中，需要说明如下几点： (1) 使用了一种把新的网页加载到 main 帧窗中的不同方法。具体说就是，在“内容简介 ”中的链接使用了加载函数 load()， 并且在的属性 HREF＝" "中使用了“javascript：”来把 first.html 文档加载到 main 帧窗中。 (2) JavaScript 的加载函数 load()定义为： function load(url) { parent.main.location.href= url; } 括号“( )”中的 url 是传递参数的变量，这就意味字符串'first1.html'通过 url 变量来传递。 通过变量来传递参数是程序设计的一个重要概念。 (3) 其他链接使用的是标签“”的“TARGET”属性，实际上它不是 JavaScript 的属 性，而是 HTML 的属性。 (4) 在“作业总结”中，“”的属性 “TARGET＝_top”是去掉 frame1 和 frame2 帧窗。third.html 将显示在整个浏览器窗口中。 (5) 如果浏览器窗口分割成frame1、frame2和frame3共三个帧窗，使用JavaScript的load() 函数可能会更灵活，此时的 load()函数可定义为： function loadtwo(url1, url2) {