第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文档中,如下例所示 <HTML> <HEAD><TLE> JavaScript入门</mTLE> <SCRIPT LANGUAGE="JavaScript"> <!- JavaScript程序开始 document. write("这是 JavaScript!") ∥- JavaScript结束--> </SCRIPT> </HEAD> ≤BODY> <P这是 JavaScript程序<P> </BODY> </HTML> 在这个例子中,我们可看到在<HEAD>…<HEAD>之间插入了一个新的标签: < SCRIPT>…< SCRIPT>,而< SCRIPT LANGUaGE=" JavaScript">用来告诉浏览器这是用 JavaScript编写的程序。HIML的注释标签<-和->用来告诉浏览器不要显示注释 2422事件的概念 在 JavaScript语言中,事件( events)和事件处理程序( event handlers是非常重要的事情 绝大部分事件都是由用户的动作所引发的。如果用户按鼠标器的按钮,就产生 Click(点击) 事件,如果鼠标器的指针在链接上移动,就产生 MouseOver事件。在 JavaScript中定义有许 多事件。要使 JavaScriμ程序能够响应事件,就需要事件处理程序的帮助。当点击按钮时, 按钮可创建一个弹出窗口,我们需要使用的事件处理程序就叫做 ONCLICK。如果出现按钮 事件,事件处理程序就告诉计算机做什么工作。例如,下面所示的源程序: <FORM>
第 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 文档中，如下例所示： <HTML> <HEAD> <TITLE>JavaScript 入门</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript 程序开始 - document.write("这是 JavaScript!") // - JavaScript 结束 - --> </SCRIPT> </HEAD> <BODY> <P>这是 JavaScript 程序</P> </BODY> </HTML> 在这个例子中，我们可看到在<HEAD> … </HEAD> 之间插入了一个新的标签： <SCRIPT> … </SCRIPT>，而<SCRIPT LANGUAGE="JavaScript">用来告诉浏览器这是用 JavaScript 编写的程序。HTML 的注释标签<!-- 和 -->用来告诉浏览器不要显示注释 24.2.2 事件的概念 在 JavaScript 语言中，事件(events)和事件处理程序(event handlers)是非常重要的事情。 绝大部分事件都是由用户的动作所引发的。如果用户按鼠标器的按钮，就产生 Click(点击) 事件，如果鼠标器的指针在链接上移动，就产生 MouseOver 事件。在 JavaScript 中定义有许 多事件。要使 JavaScript 程序能够响应事件，就需要事件处理程序的帮助。当点击按钮时， 按钮可创建一个弹出窗口，我们需要使用的事件处理程序就叫做 ONCLICK。如果出现按钮 事件，事件处理程序就告诉计算机做什么工作。例如，下面所示的源程序： <FORM>
第24章使用 Javascript <Ⅰ NPUT TYPE=" BUTTON"ⅥALUE="点击该按钮” ONCLICK="aler哈哈!)"> 在浏览器上将显示如图2401和图24-02所示的页面 郑Ne scape Microsoft Internet Explorer Edit View Go Communicator Help 点击该按钮之后产生 点击该按钮 图24-01事件概念(一) 图24-02事件概念(二) 在这个源程序中,< INPUT>标签中的TYPE=" BUTTON"ⅥALUE=”点击该按钮”这部 分产生一个按钮点击谈按钮, ONCLICK=aer哈!)”这部分告诉计算机在有点击事 件出现后要执行 alert('哈哈!)程序, alert将创建一个弹出窗口,括号中指定的是字符串 本例中是哈哈!,这是要在窗口上显示的文字。执行程序的结果是产生一个窗口,并显示 “哈哈!” 在 ONCLICK=" alert((哈哈!)"这部分中用了单引号()和双引号("")。这两种引号都可以 使用,次序也可以颠倒,即可写成 ONCLICK= alert(("哈哈!")'。 在 Javascript中有许多事件处理程序可用,但不包含所有的事件处理程序。如果需要全 面了解,请参看 JavaScript的参考手册 2423函数的概念 在 JavaScript中,函数( Function)是一个很重要的概念。函数实际上是把几个命令捆绑在 起的子程序。由于历史的原因,现在许多中文教科书都把“ Function”叫做函数,但其实 质是“函数例程” 假如我们要写一段重复输出相同文本三次的程序,下面是一种完成这个功能的源程序: <HTML> <SCRIPT LANGUAGE="JavaScript"> <l-. hide ocument, write(" JavaScript不是很难学!<br>") document. write("这是 JavaScript!<br>") document write(" JavaScript不是很难学!<br>") document. write("这是 JavaScript!<br>") document write(" JavaScript不是很难学!<br>") document write("这是 JavaScript!<br>") <SCRIPT> </HTML> 这段程序在浏览器上将显示如图24-03所示的页面
第 24 章 使用 JavaScript 3 <INPUT TYPE="BUTTON" VALUE="点击该按钮" ONCLICK="alert('哈哈！')"> </FORM> 在浏览器上将显示如图 24-01 和图 24-02 所示的页面。 点击该按钮之后产生→ 图 24-01 事件概念(一) 图 24-02 事件概念(二) 在这个源程序中，<INPUT>标签中的 TYPE=" BUTTON " VALUE="点击该按钮" 这部 分产生一个按钮 ，ONCLICK="alert('哈哈！')"这部分告诉计算机在有点击事 件出现后要执行 alert( ' 哈哈！')程序，alert()将创建一个弹出窗口，括号中指定的是字符串， 本例中是' 哈哈！'，这是要在窗口上显示的文字。执行程序的结果是产生一个窗口，并显示 “哈哈!”。 在 ONCLICK="alert('哈哈！')"这部分中用了单引号(' ')和双引号(" ")。这两种引号都可以 使用，次序也可以颠倒，即可写成 ONCLICK='alert("哈哈！") '。 在 JavaScript 中有许多事件处理程序可用，但不包含所有的事件处理程序。如果需要全 面了解，请参看 JavaScript 的参考手册。 24.2.3 函数的概念 在 JavaScript 中，函数(Function)是一个很重要的概念。函数实际上是把几个命令捆绑在 一起的子程序。由于历史的原因，现在许多中文教科书都把“Function”叫做函数，但其实 质是“函数例程”。 假如我们要写一段重复输出相同文本三次的程序，下面是一种完成这个功能的源程序： <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- hide document.write("JavaScript 不是很难学!<br>"); document.write("这是 JavaScript!<br>"); document.write("JavaScript 不是很难学!<br>"); document.write("这是 JavaScript!<br>"); document.write("JavaScript 不是很难学!<br>"); document.write("这是 JavaScript!<br>"); // --> </SCRIPT> </HTML> 这段程序在浏览器上将显示如图 24-03 所示的页面
第24章使用 Javascript 燕Nets 三回 Eile Ed View Go Communicator Help JavaScript不是很难学 这是 JavaScript! javAscript不是很难学! 这是 过息中不是很难学 图24-03演示函数概念的页面 完成同样功能的这段源程序也可以用下面的程序来实现 <HTML> <SCRIPT LANGUAGE="JavaScript <l-- hide function my( i document. write(" JavaScript不是很难学!<br") document write("这是 JavaScript!<br>") my Function my Function </SCRIPT> </HTML> 在这段程序中我们定义了一个函数 function my Function( i document. write(" JavaScript不是很难学!<br>") document. write(这是 JavaScript<br>") 其中, function是 JavaScript函数的声明语句, function后面跟的函数名“ my Function” 可以是任意的名字, my Function函数的命令放在大括号“{}”中,该函数捆绑了两个 JavaScript 的“ document. write”命令,并且可通过函数调用来执行。在这个例子中可以看到,在函数 定义下面调用函数 my Function共3次 函数也可以与事件处理程序联用。例如 <HTML> <SCRIPT LANGUAGE="JavaScript"> unction calculation(( var x= 12 vary=5 var result=x+y alert(result) </SCRIPT> </HEAD> <BODY <FORM> <Ⅰ NPUT TYPE=" BUTTON" VALUE="计算" ONCLICK=" calculation"> </FORM> </BODY> HTML> 其中,关键字“var”是 JavaScript的变量( variable声明语句,声明“x”“y”和“ result
第 24 章 使用 JavaScript 4 图 24-03 演示函数概念的页面 完成同样功能的这段源程序也可以用下面的程序来实现： <HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- hide function myFunction() { document.write("JavaScript 不是很难学!<br>"); document.write("这是 JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // --> </SCRIPT> </HTML> 在这段程序中我们定义了一个函数： function myFunction() { document.write("JavaScript 不是很难学!<br>"); document.write(这是 JavaScript!<br>"); 其中，function 是 JavaScript 函数的声明语句，function 后面跟的函数名“myFunction” 可以是任意的名字，myFunction 函数的命令放在大括号“{ }”中，该函数捆绑了两个 JavaScript 的“document.write()”命令，并且可通过函数调用来执行。在这个例子中可以看到，在函数 定义下面调用函数 myFunction()共 3 次。 函数也可以与事件处理程序联用。例如， <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; alert(result); } // --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="BUTTON" VALUE="计算" ONCLICK=" calculation()"> </FORM> </BODY> </HTML> 其中，关键字“var”是 JavaScript 的变量(variable)声明语句，声明“x”、“y”和“result
第24章使用 Javascript 是变量:<ⅠNPUT…>这条语句表示,当点击标有“计算”字样的 BUTTON按钮时就调用 函数 calculation(。你可以把这段程序存放在一个名为 fuc test html文件中,然后用浏览器试 试,看计算结果是否等于1 243层次结构 2431 JavaScript的层次结构 JavaScript以分层结构的方式组织Web网页上的所有文素。每个文素都被作为一个对象 ( Object)来看待,称为“HIML对象”,每个对象都有属性( Properties)和处理法( methods)下 面是一个简单的HIML文档,存放该文档的文件名假设为 justest. html: <HTML> <HEAD> </HEAD> <BODY BGCOLORE#FFFFF"> <CENTER><IMG SRC="image(0).gif" WIDTH=126 HEIGHT=115> </CENTER><P> <FORM ID="My Form"> 姓名 <INPUT TYPE=TEXT" NAME="name VALUE=><BR><BR> email <INPUT TYPE="TEXT" NAME="email"VALUE=><BR><BR> < INPUT TYPE=" BUTTON" VALUE="请按此按钮 Name="myButtonOncliCk="lOcatIon.hrefhttp://www.edu.cn;"> <FORM><P> <CENTER> <IMG SRC="image(1). gif"WIDTH=400 HEIGHT=10><BR><BR> < A HREF="htp/166116847/">我的主页<A> CENTER </BODY> </HTML> 在浏览器上将显示如图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 是变量；<INPUT … >这条语句表示，当点击标有“计算”字样的 BUTTON 按钮时就调用 函数 calculation()。你可以把这段程序存放在一个名为 fuc_test.html 文件中，然后用浏览器试 一试，看计算结果是否等于 17。 24.3 层次结构 24.3.1 JavaScript 的层次结构 JavaScript 以分层结构的方式组织 Web 网页上的所有文素。每个文素都被作为一个对象 (Object)来看待，称为“HTML 对象”，每个对象都有属性(Properties)和处理法(methods)。下 面是一个简单的 HTML 文档，存放该文档的文件名假设为 jstest.html： <HTML> <HEAD> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER><IMG SRC="image(0).gif" WIDTH=126 HEIGHT=115> </CENTER><P> <FORM ID="MyForm"> 姓名: <INPUT TYPE="TEXT" NAME="name" VALUE=""><BR><BR> email: <INPUT TYPE="TEXT" NAME="email" VALUE=""><BR><BR> <INPUT TYPE="BUTTON" VALUE="请按此按钮" NAME="myButton" ONCLICK="location.href='http://www.edu.cn'; "> </FORM><P> <CENTER> <IMG SRC="image(1).gif" WIDTH=400 HEIGHT=10><BR><BR> <A HREF="http://166.111.68.47/">我的主页</A> </CENTER> </BODY> </HTML> 在浏览器上将显示如图 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])和一个按钮