第8章网页源代码的编辑

1第8章网页源代码的编辑课题：脚本简介（8.2）教学分析与准备1．教学任务了解什么是JavaScript掌握在HTML中使用JavaScript的方法理解常见网页特效的脚本设计2.教学重点什么是JavaScript3.教学难点在HTML中使用JavaScript的方法4.教学策略任务驱动学习和协作学习、探究学习相结合5.教学环境多媒体网络教室6．建议课时数4课时三、学习过程教学环节及手段教学内容备注组织课堂：导入新课：教师演示网页脚本特效，吸引学生兴趣，引入新课讲述新课：讲授法师生问好整顿课堂纪律，检查书本情况，准备进入教学。第8章网页源代码的编辑8.2脚本简介8.2.1JavaScript在HTML中的使用1．什么是JavaScript。JavaScript是Netscape（网景）开发的一种脚本语言。脚本是一系列程序指令或语句，脚本语言的作用是扩展使用它的应用程序的性能，而JavaScript脚本语言的作用则是扩展HTML的功能。具体来说，JavaScript是专用于的，它是对编写Web网页的标记语言HTML的扩展。使用JavaScript，可以让静态的HTML网页变成动态的具有真正交互性的网页。JavaScript的命令和函数可以同HTML标识符一起，放置在用户的Web网页中。当用户的浏览器检查网页时，浏览器将直接运行这些程序并执行相应的操2PPT演示多媒体演示讲授法讲授法演示制作过程讲授法提示学生虽然HTML语言是不区分大小写的，但是JavaScript是区分大小写的。作。2．在HTML文档中使用JavaScript。使用HTML标记script和/script，就可将JavaScript代码嵌入到HTML文档中，其基本格式如下：scriptlanguage=JavaScript!--JavaScript程序代码……//--/script例8.6一个最简单的JavaScript程序。这个例子通过JavaScript代码显示一个提示框，提示框中的内容为“这是我的第一个JavaScript程序！”，如图8-6所示。单击提示框中的“确定”按钮后，提示框即可关闭。（网页原代码见教材）【注意事项】1．JavaScript代码使用script和/script标记集成到HTML文档中。在一个HTML文档中，可以有多对script和/script标记来嵌入多段JavaScript代码。每段JavaScript代码中可以包含一个或多个JavaScript语句。2．每个JavaScript语句以分号“;”结束。3．以script为开始标记、/script为结束标记的JavaScript代码，原则上可以放在HTML文档的任何部分，但为了使HTML文档结构清晰、便于维护，通常把实现数学计算、字符串处理或函数定义的JavaScript代码，放在head和/head标记之间，而把实现在网页上显示处理结果的JavaScript代码放在body和/body标记之间。4．!--和--是HTML中注释的开始标记和结束标记。由于一些较老的不支持JavaScript的浏览器在打开含有JavaScript代码的HTML文档时，会将JavaScript代码当作一般的HTML来处理，从而导致页面显示混乱，因此，为了避免这种现象，通常将JavaScript代码放在HTML的注释标记!--和--之间。支持JavaScript的浏览器，能够识别并执行放在HTML注释标记之间的JavaScript代码，而不支持JavaScript的浏览器，则会忽略HTML注释标记之间的JavaScript代码。3课堂练习讲授法演示制作过程课堂练习5．“//”符号是JavaScript语言的注释标记，可以将对程序的说明和注释等文字放在“//”符号之后。如，例8.6中的JavaScript代码段可改写如下：scriptlanguage=JavaScript!--alert(这是我的第一个JavaScript程序！);//JavaScript代码结束--/script这里，“//”符号之后的“JavaScript代码结束”就是注释文字。学生根据例题进行练习8.2.2鼠标跟踪的脚本设计例8.7图片跟随鼠标移动。这个例子的运行结果是，当鼠标在网页上移动时，始终有一个IE标志图片跟随着鼠标同时移动。（网页原代码见教材）【注意事项】1．如果想在你自己的HTML文档中套用这个图片跟随鼠标移动的特效，就将范例代码中head和/head之间的JavaScript代码段复制到你的网页原代码中的head和/head之间，并将范例代码中body和/body之间的JavaScript代码段复制到你的网页原代码中的body和/body之间。2．如果想把范例中跟随鼠标移动的IE标志图片改为你自己喜欢的图片，则可修改下面的JavaScript代码：document.write('imgID=iitsrc=ie.gifSTYLE=position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;');只要将src=ie.gif中的ie.gif换成自己的图片文件名即可。学生根据例题进行练习例8.8文字跟随鼠标移动。本例的运行结果是，当鼠标在网页上移动时，会有一串文字随着鼠标移动，而且文字跟随鼠标移动时会有一种漂动的效果。学生做好了给予鼓励，出现问题及时给予其提示学生做好了给予鼓励，出现问题及时给予其提示4讲授法演示制作过程课堂练习（网页原代码见教材）【注意事项】1．本例代码中，下面的代码段定义了跟随鼠标移动的字符串的样式：styletype=text/css.spanstyle{position:absolute;visibility:visible;top:-50px;font-size:13pt;font-family:楷体_GB2312;color:#2010D0;font-weight:bold;}/style其中，font-size定义字符大小，font-family定义字体，color定义字符的颜色。可以通过修改这些属性的值，来修改跟随鼠标移动的字符串的格式。2．如果想修改跟随鼠标移动的字符串的内容，则可修改以下代码：varmessage=欢迎光临网上之家！;只要将字符串欢迎光临网上之家！改为自己想要的文字内容即可。3．如果想调整字符串各个字符之间的间距，则可修改以下代码：varstep=25;该语句定义了一个用于存放字符间距值的变量step，并将其初始化为25，即字符间距为25px。学生根据例题进行练习8.2.3状态栏的脚本设计状态栏位于IE浏览器窗口的底部，其中显示了当前浏览器的运行状况。我们可以通过JavaScript脚本设计，来自由设置状态栏中显示的内容，或是设置动态显示的状态栏信息，使网页效果更加富有趣味性。例8.9改变状态栏的显示信息。在本例中，我们将看到如何通过设置window对象的defaultStatus属性和status属性，来改变状态栏的显学生做好了给予鼓励，出现问题及时给予其提示5讲授法演示制作过程课堂练习讲授法演示制作过程课堂练习示信息。本例的运行结果如图8-9所示，当鼠标光标置于超链接“”处时，状态栏中会显示“单击这里进入天府热线”，而当鼠标光标位于超链接之外时，状态栏中则会显示“欢迎访问网上之家”。（网页原代码见教材）【注意事项】1．window对象的defaultStatus属性表示状态栏的缺省信息，在没有设置状态栏的显示内容时，状态栏中将显示defaultStatus属性的值。2．如果想临时改变状态栏的显示内容，则可设置window对象的status属性。学生根据例题进行练习例8.10在状态栏产生闪烁的文本效果。本例的运行结果是在状态栏产生闪烁的文字。（网页原代码见教材）【注意事项】1．如果想将状态栏中的闪烁文字“欢迎访问网上之家！”改成其他文字，只需在定义字符串变量message时，将其初始化为自己想要的字符串，即，需要修改如下代码：varmessage=欢迎访问网上之家！;2．变量speed的作用是存放文字闪烁的延迟时间值，其时间单位为毫秒。你可以通过修改speed的值来调整状态栏中文字的闪烁速度，speed的值越大，文字闪烁的速度越慢，speed的值越小，文字闪烁的速度就越快。3．注意下面的代码：bodyonload=flash()在body标记中加入“onload=flash()”属性，其作用是使网页一被载入，就立即执行函数flash()中的代码。学生根据例题进行练习8.2.4窗口的脚本设计设计网页时，常常会涉及到对窗口的控制，如打开一个新窗口和关闭窗口，等等。下面给出的范例中，将详细介绍打开和关闭窗口的方法。学生做好了给予鼓励，出现问题及时给予其提示学生做好了给予鼓励，出现问题及时给予其提示6讲授法演示制作过程课堂练习例8.11打开和关闭窗口。本例的运行结果是一装载网页即自动打开一个新窗口，该窗口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）windowname：表示新窗口的名称。（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.close();,5000)的作用是延迟5000毫秒之后关闭newwindow窗口。注意，close()方法的作用是关闭一个窗口，其具体使用格式为：窗口对象名.close();学生根据例题进行练习8.2.5链接的脚本设计在FrontPage2000中对文本对象设置超链接时，学生做好了给予鼓励，出现问题及时给予其提示7讲授法演示制作过程课堂练习被链接的文字会自动加上下划线。本节的范例将介绍如何通过脚本设计，取消链接文字的下划线。例8.12没有下划线的超链接。本例中，将产生一个没有下划线的链接文本“网上之家”，单击该超链接之后，则会在当前浏览器窗口中打开链接的目标网页。（网页原代码见教材）【注意事项】1．注意下面的代码：astyle=cursor:handonclick=newpage();bifontface=隶书color=#0000FFsize=5网上之家/font/i/b/a这段代码对文本“网上之家”设置了超链接。其中，b和/b标记的作用是使文本以粗体显示，i和/i标记的作用是使文本以斜体显示。font标记定义了文本的字体格式，标记中的face属性定义文本的字体类型，color属性定义文本的颜色，size属性定义文本的大小。2．style=cursor:hand表示当鼠标光标置于链接文本之上时，将鼠