第8章网页源代码的编辑.docVIP

第8章 网页源代码的编辑 课题： 脚本简介（8.2） 教学分析与准备 1．教学任务 了解什么是JavaScript 掌握在HTML中使用JavaScript的方法 理解常见网页特效的脚本设计 2. 教学重点 什么是JavaScript 3. 教学难点 在HTML中使用JavaScript的方法 4. 教学策略 任务驱动学习和协作学习、探究学习相结合 5. 教学环境 多媒体网络教室 6．建议课时数 4课时 三、学习过程 教学环节及手段 教学内容 备注 组织课堂： 导入新课： 教师演示网页脚本特效，吸引学生兴趣，引入新课 讲述新课： 讲授法 PPT演示 多媒体演示 讲授法 讲授法 演示制作过程 讲授法 提示学生虽然HTML语言是不区分大小写的，但是JavaScript是区分大小写的。 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 讲授法 演示制作过程 课堂练习 课堂小结 师生问好 整顿课堂纪律，检查书本情况，准备进入教学。 第8章 网页源代码的编辑 8.2 脚本简介 8.2.1 JavaScript在HTML中的使用 1．什么是JavaScript。 JavaScript是Netscape（网景）开发的一种脚本语言。脚本是一系列程序指令或语句，脚本语言的作用是扩展使用它的应用程序的性能，而JavaScript脚本语言的作用则是扩展HTML的功能。具体来说，JavaScript是专用于WWW的，它是对编写Web网页的标记语言HTML的扩展。使用JavaScript，可以让静态的HTML网页变成动态的具有真正交互性的网页。 JavaScript的命令和函数可以同HTML标识符一起，放置在用户的Web网页中。当用户的浏览器检查网页时，浏览器将直接运行这些程序并执行相应的操作。 2．在HTML文档中使用JavaScript。 使用HTML标记script和/script，就可将JavaScript代码嵌入到HTML文档中，其基本格式如下： script language=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代码。 5．“//”符号是JavaScript语言的注释标记，可以将对程序的说明和注释等文字放在“//”符号之后。如，例8.6中的JavaScript代码段可改写如下： script language=JavaScript !-- alert(这是我的第一个JavaScript程序！); // JavaScript代码结束 -- /script 这里，“//”符号之后的“JavaScript代码结束”就是注释文字。 学生根据例题进行练习 8.2.2 鼠标跟踪的脚本设计 例8.7 图片跟随鼠标移动。 这个例子的运行结果是，当鼠标