第8章网页源代码的编辑

1、第8章 网页源代码的编辑课题： 脚本简介（8.2）教学分析与准备1教学任务了解什么是JavaScript掌握在HTML中使用JavaScript的方法理解常见网页特效的脚本设计2. 教学重点什么是JavaScript3. 教学难点在HTML中使用JavaScript的方法4. 教学策略任务驱动学习和协作学习、探究学习相结合5. 教学环境多媒体网络教室6建议课时数4课时三、学习过程教学环节及手段教学内容备注组织课堂：导入新课：教师演示网页脚本特效，吸引学生兴趣，引入新课讲述新课：讲授法PPT演示多媒体演示讲授法讲授法演示制作过程讲授法提示学生虽然HTML语言是不区分大小写的，但是JavaScri

2、pt是区分大小写的。课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习课堂小结师生问好整顿课堂纪律，检查书本情况，准备进入教学。第8章 网页源代码的编辑8.2 脚本简介8.2.1 JavaScript在HTML中的使用1什么是JavaScript。JavaScript是Netscape（网景）开发的一种脚本语言。脚本是一系列程序指令或语句，脚本语言的作用是扩展使用它的应用程序的性能，而JavaScript脚本语言的作用则是扩展HT

3、ML的功能。具体来说，JavaScript是专用于WWW的，它是对编写Web网页的标记语言HTML的扩展。使用JavaScript，可以让静态的HTML网页变成动态的具有真正交互性的网页。JavaScript的命令和函数可以同HTML标识符一起，放置在用户的Web网页中。当用户的浏览器检查网页时，浏览器将直接运行这些程序并执行相应的操作。2在HTML文档中使用JavaScript。使用HTML标记和，就可将JavaScript代码嵌入到HTML文档中，其基本格式如下： 例8.6 一个最简单的JavaScript程序。这个例子通过JavaScript代码显示一个提示框，提示框中的内容为“这是我的

4、第一个JavaScript程序！”，如图8-6所示。单击提示框中的“确定”按钮后，提示框即可关闭。（网页原代码见教材）【注意事项】1JavaScript代码使用和标记集成到HTML文档中。在一个HTML文档中，可以有多对和标记来嵌入多段JavaScript代码。每段JavaScript代码中可以包含一个或多个JavaScript语句。2每个JavaScript语句以分号“;”结束。3以为开始标记、为结束标记的JavaScript代码，原则上可以放在HTML文档的任何部分，但为了使HTML文档结构清晰、便于维护，通常把实现数学计算、字符串处理或函数定义的JavaScript代码，放在和标记之间，

5、而把实现在网页上显示处理结果的JavaScript代码放在和标记之间。4是HTML中注释的开始标记和结束标记。由于一些较老的不支持JavaScript的浏览器在打开含有JavaScript代码的HTML文档时，会将JavaScript代码当作一般的HTML来处理，从而导致页面显示混乱，因此，为了避免这种现象，通常将JavaScript代码放在HTML的注释标记之间。支持JavaScript的浏览器，能够识别并执行放在HTML注释标记之间的JavaScript代码，而不支持JavaScript的浏览器，则会忽略HTML注释标记之间的JavaScript代码。5“/”符号是JavaScript语言

6、的注释标记，可以将对程序的说明和注释等文字放在“/”符号之后。如，例8.6中的JavaScript代码段可改写如下： 这里，“/”符号之后的“JavaScript代码结束”就是注释文字。学生根据例题进行练习8.2.2 鼠标跟踪的脚本设计例8.7 图片跟随鼠标移动。这个例子的运行结果是，当鼠标在网页上移动时，始终有一个IE标志图片跟随着鼠标同时移动。（网页原代码见教材）【注意事项】1如果想在你自己的HTML文档中套用这个图片跟随鼠标移动的特效，就将范例代码中和之间的JavaScript代码段复制到你的网页原代码中的和之间，并将范例代码中和之间的JavaScript代码段复制到你的网页原代码中的和

7、之间。2如果想把范例中跟随鼠标移动的IE标志图片改为你自己喜欢的图片，则可修改下面的JavaScript代码： document.write();只要将src=ie.gif 中的ie.gif换成自己的图片文件名即可。学生根据例题进行练习例8.8 文字跟随鼠标移动。本例的运行结果是，当鼠标在网页上移动时，会有一串文字随着鼠标移动，而且文字跟随鼠标移动时会有一种漂动的效果。（网页原代码见教材）【注意事项】1本例代码中，下面的代码段定义了跟随鼠标移动的字符串的样式： .spanstyle position:absolute; visibility:visible; top:-50px; font-s

8、ize:13pt; font-family:楷体_GB2312; color: #2010D0; font-weight:bold; 其中，font-size定义字符大小，font-family定义字体，color定义字符的颜色。可以通过修改这些属性的值，来修改跟随鼠标移动的字符串的格式。2如果想修改跟随鼠标移动的字符串的内容，则可修改以下代码： var message=欢迎光临网上之家！;只要将字符串欢迎光临网上之家！ 改为自己想要的文字内容即可。3如果想调整字符串各个字符之间的间距，则可修改以下代码： var step=25;该语句定义了一个用于存放字符间距值的变量step，并将其初始化为

9、25，即字符间距为25px。学生根据例题进行练习8.2.3 状态栏的脚本设计状态栏位于IE浏览器窗口的底部，其中显示了当前浏览器的运行状况。我们可以通过JavaScript脚本设计，来自由设置状态栏中显示的内容，或是设置动态显示的状态栏信息，使网页效果更加富有趣味性。例8.9 改变状态栏的显示信息。在本例中，我们将看到如何通过设置window对象的defaultStatus属性和status属性，来改变状态栏的显示信息。本例的运行结果如图8-9所示，当鼠标光标置于超链接“”处时，状态栏中会显示“单击这里进入天府热线”，而当鼠标光标位于超链接之外时，状态栏中则会

10、显示“欢迎访问网上之家”。（网页原代码见教材）【注意事项】1window对象的defaultStatus属性表示状态栏的缺省信息，在没有设置状态栏的显示内容时，状态栏中将显示defaultStatus属性的值。2如果想临时改变状态栏的显示内容，则可设置window对象的status属性。学生根据例题进行练习例8.10 在状态栏产生闪烁的文本效果。本例的运行结果是在状态栏产生闪烁的文字。（网页原代码见教材）【注意事项】1如果想将状态栏中的闪烁文字“欢迎访问网上之家！”改成其他文字，只需在定义字符串变量message时，将其初始化为自己想要的字符串，即，需要修改如下代码： var message=

11、欢迎访问网上之家！;2变量speed的作用是存放文字闪烁的延迟时间值，其时间单位为毫秒。你可以通过修改speed的值来调整状态栏中文字的闪烁速度，speed的值越大，文字闪烁的速度越慢，speed的值越小，文字闪烁的速度就越快。3注意下面的代码： 在标记中加入“onload=flash()”属性，其作用是使网页一被载入，就立即执行函数flash()中的代码。学生根据例题进行练习8.2.4 窗口的脚本设计设计网页时，常常会涉及到对窗口的控制，如打开一个新窗口和关闭窗口，等等。下面给出的范例中，将详细介绍打开和关闭窗口的方法。例8.11 打开和关闭窗口。本例的运行结果是一装载网页即自动打开一个新窗

12、口，该窗口5秒钟后又自动关闭。（网页原代码见教材）【注意事项】1注意下面的代码：newwindow=window.open(new.htm,newwindow,left=100,top=120,width=300,height=100,status,scrollbars);该语句用window.open()方法定义了一个名为newwindow的窗口对象，window.open()方法的功能是打开一个新窗口，其调用格式为：window.open(URL,windowname,windowFeatures);其中三个参数的意义如下：（1）URL：表示新建窗口中显示的页面的URL地址。（2）wind

13、owname：表示新窗口的名称。（3）windowFeatures：此项参数为可选项，具体包含对新窗口的位置、大小以及菜单栏、工具栏、状态栏和滚动条等属性的设置。如：newwindow=window.open(new.htm,newwindow,left=100,top=120,width=300,height=100,status,scrollbars);表示打开一个新窗口，该窗口内显示的网页为new.htm，窗口的名称为newwindow，窗口左上角在屏幕上的位置是（100,120），窗口的宽度为300，高度为100，新窗口有状态栏，有滚动条。2语句setTimeout(newwindow

14、.close();,5000)的作用是延迟5000毫秒之后关闭newwindow窗口。注意，close()方法的作用是关闭一个窗口，其具体使用格式为：窗口对象名.close();学生根据例题进行练习8.2.5 链接的脚本设计在FrontPage 2000中对文本对象设置超链接时，被链接的文字会自动加上下划线。本节的范例将介绍如何通过脚本设计，取消链接文字的下划线。例8.12 没有下划线的超链接。本例中，将产生一个没有下划线的链接文本“网上之家”，单击该超链接之后，则会在当前浏览器窗口中打开链接的目标网页。（网页原代码见教材）【注意事项】1注意下面的代码： 网上之家这段代码对文本“网上之家”设置

15、了超链接。其中，和标记的作用是使文本以粗体显示，和标记的作用是使文本以斜体显示。标记定义了文本的字体格式，标记中的face属性定义文本的字体类型，color属性定义文本的颜色，size属性定义文本的大小。2style = cursor : hand 表示当鼠标光标置于链接文本之上时，将鼠标变成手形光标。修改hand可得到其他形状的光标，例如： style = cursor : help表示将鼠标变成带问号的帮助光标。3onclick = newpage(); 表示当鼠标在链接文本上单击时，执行函数newpage()中的代码。4在newpage()函数中，代码： window.location=

16、new.htm;其作用在当前浏览器窗口中，打开网页new.htm。window对象的location属性表示窗口中当前文档的URL。学生根据例题进行练习8.2.6 其他脚本设计本节介绍两种特殊显示效果的脚本设计，一种效果是不停闪烁的图片，另一种效果则是网页的背景颜色不断变化。例8.13 不停闪烁的图片。网页上不停闪烁的图片能够吸引人的视线。本例中，一个设置有超链接的图片以闪烁的方式显示。（网页原代码见教材）【注意事项】1本例中最关键的代码段是： function blink() soccer.style.visibility = (soccer.style.visibility = = hid

17、den) ? visible : hidden; setTimeout(blink(), time); 当soccer.style.visibility的值为visible时，将显示指定的图片，而当soccer.style.visibility的值为hidden时，则会隐藏图片。2time的值越小，则图片闪烁的速度就越快，反之，图片闪烁的速度越慢。学生根据例题进行练习例8.14 网页的背景颜色不断变化。本例的运行结果是，网页的背景颜色在10种事先设置好的颜色之间交替变化。（网页原代码见教材）【注意事项】1十种预设的颜色值被放在一个名为col的数组对象中，数组的定义由下面的代码实现： col=n

18、ew Array();数组对象的下标从0开始，下面的代码段将十种不同的颜色值依次输入到数组对象的各个下标元素中： col0 = yellow; col1 = coral; col2 = orange; col3 = red; col4 = greenyellow; col5 = lime; col6 = turquoise; col7 = coral; col8 = blueviolet; col9 = violet;2改变网页背景颜色的代码段是： function changColor() if (pos9) pos=0; document.bgColor = colpos; pos+; setTimeout(changColor(),3000); 其中，语句document.bgColor = colpos;的作用是，将页面的背景设置为以pos为下标的数组对象col的值所代表的颜色。学生根据例题进行练习【学习提示】在Internet上，网页的源代码是公开的，这就为我们学习HTML语言和脚本语言提供了方便之门。多浏览好的网页，不断向他人的网页学习，是迅速提高网页制作水平的行之有效的方法。 总结重点及难点知，总识结任务完成情况学生做好了给予鼓励，出现问题及时给予其提示学生做好了给予鼓励，出现问题及时给予其提示