第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” 进行操作。例如, <FORM name="my Form"> 对象1 < NPUT TYPE=" TEXT NAME="inpu" VALUE="原来的数据">p 对象2: < INPUTTYPE=" BUTTON" VALUE="更新数据” ONCLICK=" document. my Form. input value=新的数据">p> 对象3 < INPUT TYPE=" BUTTON" VALUE="恢复数据 ONCLICK=" document. my Form, input value="原来的数据!;"> </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” 进行操作。例如， <FORM name="myForm"> 对象 1： <INPUT TYPE="TEXT" NAME="input" VALUE="原来的数据"><p> 对象 2： <INPUT TYPE="BUTTON" VALUE="更新数据" ONCLICK="document.myForm.input.value= '新的数据!'; "> <p> 对象 3： <INPUT TYPE="BUTTON" VALUE="恢复数据" ONCLICK="document.myForm.input.value= '原来的数据!'; "> </FORM> 在浏览器上将显示如图 24-06 所示的页面。 图 24-06 对象间的操作 点击“更新数据”按钮就对“对象 1”进行操作，显示“新的数据!”。 24.3.2 网址对象 除了 window(窗口对象)和 document(文档对象)之外，另一个重要的对象是 location(网址
第24章使用 Javascript 对象)。这个对象代表的是要访问的HIML文档所在的网络地址。因此,如果你要访问网页 ht/www.xyz.com/page.html,那么locationhref就等于这个网址。 更重要的是你可以给 location. href指定新的值。下面的例子就可以把新的网页加载到窗 口上: <FORM <Ⅰ NPUT TYPE=" BUTTON" VALUE=”中国教育和科研计算机网( CERNET” OncliCk="lOcatIon.href-http://www.edu.cn' <FORM> 在浏览器上将显示如图2407所示的页面 File Edt View Go Communicator Help 中国教官和科研计某机周( CERNET Doum强s 图2407网址对象的演示页面 当你点击该按钮时就可浏览“中国教育和科研计算机网”的主页。 244帧窗 2441创建帧窗 也许你浏览万维网(Wb)时已经注意到,Web浏览器窗口被分成两个或者三个显示窗口 分别显示各自的HIML文档。每个这样的小窗口称为 frame,可把它译成“帧窗”。一个常 见的问题就是 JavaScript如何与帧窗一起工作。 创建帧窗需要使用< frameset和< /frameset>标签。例如要把web浏览器窗口分成两个等 宽的帧窗,可用下面的程序实现: <HTML> <FRAMESET ROWS="50%.50%> <FRAME SRC="pagel. html"NAME="framer"> <FRAME SRO="page2. html"NAME="frame2"> </FRAMESET </HTML> 在浏览器上将显示如图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创建帧窗的概念 在这个程序中使用了< rameses>的rows(行)属性把Web浏览器窗口分成上下两个帧窗 上面的帧窗加载 pagel. html,下面的帧窗加载page2html。 如果使用< frameset>的 columns(列)属性,Web浏览器窗口就会被纵向分割。此外,浏览 器窗口的分割还可以嵌套。例如,使用下面的程序可在横向和纵向对浏览器窗口进行分割 <FRAMESET ROWS="50%.50%"> <FRAMESET COLS="50%.50%>
第 24 章 使用 JavaScript 7 对象)。这个对象代表的是要访问的 HTML 文档所在的网络地址。因此，如果你要访问网页 http://www.xyz.com/page.html，那么 location.href 就等于这个网址。 更重要的是你可以给 location.href 指定新的值。下面的例子就可以把新的网页加载到窗 口上： <FORM > <INPUT TYPE="BUTTON" VALUE="中国教育和科研计算机网(CERNET)" ONCLICK="location.href='http://www.edu.cn'; "> </FORM> 在浏览器上将显示如图 24-07 所示的页面。 图 24-07 网址对象的演示页面 当你点击该按钮时就可浏览“中国教育和科研计算机网”的主页。 24.4 帧窗 24.4.1 创建帧窗 也许你浏览万维网(Web)时已经注意到，Web 浏览器窗口被分成两个或者三个显示窗口， 分别显示各自的 HTML 文档。每个这样的小窗口称为 frame，可把它译成“帧窗”。一个常 见的问题就是 JavaScript 如何与帧窗一起工作。 创建帧窗需要使用<frameset>和</frameset>标签。例如要把 Web 浏览器窗口分成两个等 宽的帧窗，可用下面的程序实现： <HTML> <FRAMESET ROWS="50%,50%"> <FRAME SRC="page1.html" NAME="frame1"> <FRAME SRC="page2.html" NAME="frame2"> </FRAMESET> </HTML> 在浏览器上将显示如图 24-08 所示的页面。 图 24-08 创建帧窗的概念 在这个程序中使用了<frameset>的 rows(行)属性把 Web 浏览器窗口分成上下两个帧窗， 上面的帧窗加载 page1.html，下面的帧窗加载 page2.html。 如果使用<frameset>的 columns(列)属性，Web 浏览器窗口就会被纵向分割。此外，浏览 器窗口的分割还可以嵌套。例如，使用下面的程序可在横向和纵向对浏览器窗口进行分割： <FRAMESET ROWS="50%,50%"> <FRAMESET COLS="50%,50%">
第24章使用 Javascript <FRAME SRC="pagel. html"> <FRAME SRC="page2. html"> <FRAMESET> <FRAMESET COLS=33%.33%.33%> <FRAME SRC="page3. html"> <FRAME SRC="page 4. html> <FRAME SRC="pages. html"> </FRAMESET </FRAMESET> 在浏览器上将显示如图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 <FRAME SRC="page1.html"> <FRAME SRC="page2.html"> </FRAMESET> <FRAMESET COLS="33%,33%,33%"> <FRAME SRC="page3.html"> <FRAME SRC="page4.html"> <FRAME SRC="page5.html"> </FRAMESET> </FRAMESET> 在浏览器上将显示如图 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,这个程序可写成 <HTML> <FRAMESET COLS="25%.75%"> <FRAME SRC="menu. html" NAME="menu"> <FRAME SRC=homework html" NAME="main" <FRAMESET </HTML> 在这个程序中,把 frameR命名为menu,开始时显示 menu htm文档;把 frame2命名为 ain,开始时显示 homework. html文档。 homework. html <HTML> <HEAD><HEAD> <BODY> <CENTER> 大学本科生基础课程<BR> <H2>“多媒体技术基础”</H2><BR> 作业式样<BR> (仅供参考)<BR> <CENTER> </BODY> </HTML> menu. html: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <I- hide function load(url)( parent. main location. href=url <SCRIPT> </HEAD> <BODY> <PRE> <A HREF="homework. html" TARGET="main"> 多媒体 技术基础<A> <PRE < A HREF=" start. htm" TARGET="main">作业名称</A><BR> < A HREF= javascript: load('first. htm">内容简介<A><BR> < A HREF=" second. htm" TARGET="main">影视图像</A><BR> < A HREF=" third. htm" TARGET="top">作业总结<A><BR>
第 24 章 使用 JavaScript 9 图 24-11 一个帧窗作为浏览目录的网页 设计这样的网页首先需要一个创建 frame1 和 frame2 两个帧窗的程序，在此假设程序名 为 jstest02.html，这个程序可写成： <HTML> <FRAMESET COLS="25%,75%"> <FRAME SRC="menu.html" NAME="menu"> <FRAME SRC="homework.html" NAME="main"> </FRAMESET> </HTML> 在这个程序中，把 frame1 命名为 menu，开始时显示 menu.html 文档；把 frame2 命名为 main，开始时显示 homework.html 文档。 homework.html： <HTML> <HEAD></HEAD> <BODY> <CENTER> 大学本科生基础课程<BR> <H2>“多媒体技术基础”</H2><BR> 作业式样<BR> (仅供参考)<BR> </CENTER> </BODY> </HTML> menu.html： <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- hide function load(url) { parent.main.location.href= url; } // --> </SCRIPT> </HEAD> <BODY> <PRE> <A HREF="homework.html" TARGET="main"> 多媒体 技术基础</A> </PRE> <A HREF="start.html" TARGET="main">作业名称</A><BR> <A HREF="javascript:：load('first.html')">内容简介 </A><BR> <A HREF="second.html" TARGET="main">影视图像</A><BR> <A HREF="third.html" TARGET="_top">作业总结</A><BR>
第24章使用 Javascript </BODY> </HTML> menu. html文档涉及如下所示的4个文档: ① start. htm文档: <HTML> <BODY> < CENTER><U>开始页<U><BR> <H2>作业名称<H2> </CENTER> </BODY> HTML> ② first htn文档: <HTML> <BODY> < CENTER><U>文档1<><BR> <H2>内容简介</H2>< CENTER </BODY> ⑧ second. html: <HTML> <BODY> < CENTER><U>文档2</U><BR> <H2>影视片段</H2>< CENTER> </BODY> ④ third html <HTML> <BODY < CENTER><U>文档3</U><BR> <H2>学习总结<H2>< CENTER> </BODY> </HTML> 在 menu. html文档中,需要说明如下几点 你(1)使用了一种把新的网页加载到main帧窗中的不同方法。具体说就是,在“<A F=" javascript: load(first. htm)">内容简介<A><BR>”中的链接使用了加载函数 load, 并且在<A>的属性HREF=”"中使用了“ javascript:"来把 first. htm文档加载到man帧窗中 (2) JavaScript的加载函数 load定义为 function load(url)i parent. main location. href= url 括号“()”中的u是传递参数的变量,这就意味字符串 first. html通过u变量来传递 通过变量来传递参数是程序设计的一个重要概念 (3)其他链接使用的是标签“<A>”的“ TARGET”属性,实际上它不是 JavaScript的属 性,而是HIML的属性。 (4)在“< A HREF=" hird. htm" TARGET="top">作业总结<A>”中,“<A>”的属性 “ TARGET=top”是去掉 frame和 frame2帧窗。 third. html将显示在整个浏览器窗口中。 (5)如果浏览器窗口分割成 frame1、fame2和fame3共三个帧窗,使用 JavaScript的 load 函数可能会更灵活,此时的load函数可定义为: function loadtwolurll, url2)i
第 24 章 使用 JavaScript 10 </BODY> </HTML> menu.html 文档涉及如下所示的 4 个文档： ① start.html 文档： <HTML> <BODY> <CENTER><U>开始页</U><BR> <H2>作业名称</H2> … </CENTER> </BODY> </HTML> ② first.html 文档： <HTML> <BODY> <CENTER><U>文档 1</U><BR> <H2>内容简介</H2></CENTER> </BODY> </HTML> ③ second.html: <HTML> <BODY> <CENTER><U>文档 2</U><BR> <H2>影视片段</H2></CENTER> </BODY> </HTML> ④ third.html: <HTML> <BODY> <CENTER><U>文档 3</U><BR> <H2>学习总结</H2></CENTER> </BODY> </HTML> 在 menu.html 文档中，需要说明如下几点： (1) 使用了一种把新的网页加载到 main 帧窗中的不同方法。具体说就是，在“<A HREF="javascript：load('first.html')">内容简介 </A><BR>”中的链接使用了加载函数 load()， 并且在<A>的属性 HREF＝" "中使用了“javascript：”来把 first.html 文档加载到 main 帧窗中。 (2) JavaScript 的加载函数 load()定义为： function load(url) { parent.main.location.href= url; } 括号“( )”中的 url 是传递参数的变量，这就意味字符串'first1.html'通过 url 变量来传递。 通过变量来传递参数是程序设计的一个重要概念。 (3) 其他链接使用的是标签“<A>”的“TARGET”属性，实际上它不是 JavaScript 的属 性，而是 HTML 的属性。 (4) 在“<A HREF="third.html" TARGET="_top">作业总结</A>”中，“<A>”的属性 “TARGET＝_top”是去掉 frame1 和 frame2 帧窗。third.html 将显示在整个浏览器窗口中。 (5) 如果浏览器窗口分割成frame1、frame2和frame3共三个帧窗，使用JavaScript的load() 函数可能会更灵活，此时的 load()函数可定义为： function loadtwo(url1, url2) {