《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院 陈承欢 Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢
教学单元25：JavaScript技术 主要教学环节 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
（一）课程引导 网页是用HTML语言写的，HTML语言定义了网页的结构和网页元素，能够实现网页普通格式要求。CSS样式表弥补了HTML对网页格式化功能的不足，对网页布局和网页元素的控制功能更加强大，能够实现网页中特殊格式的要求。本章所学习的JavaScript主要实现实时的、动态的、可交互性的功能，对客户操作进行响应，显示各种自定义内容。HTML、CSS、JavaScript三者共同构成了丰富多彩的静态网页。
（二）明确知识技能目标 （1）掌握JavaScript的常量、变量、运算符和表式。 （2）掌握JavaScript的语句、函数。
（三）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“14JS技术”。 （2）在文件夹“14JS技术”中创建网页14_1.html，在该网页中显示当前日期与时间，并且在每天不同时间段显示不同的问候语，还具有动态显示标题栏信息的功能。 （3）在文件夹“14JS技术”中创建网页14_2.html，该网页打开时会自动弹出一个小窗口，网页中图像禁止下载。
（四）知识讲解与操作示范 13.1 JavaScript概述 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言一起实现网页中的动态交互功能。
（四）知识讲解与操作示范(2) 13.2 JavaScript的应用举例 利用JavaScript编写代码，在网页中显示当前日期 和时间。 具体实现过程如下： （1） 在“长沙世界之窗”站点下创建文件夹“14JS技术”，在“文件”面板中，将本站点根目录下“02文本操作”文件夹中的网页文档“02.html”拷贝到文件夹“14JS技术”中，且重命名为“14_1.html”。 （2） 打开网页文档14_1.html 双击该文档名称打开该网页，在“文档”工具栏中【代码】按钮，切换到代码视图的编辑窗口。 （3） 观察代码窗口中的显示日期的代码：
13.2 JavaScript的应用举例 （四）知识讲解与操作示范(2) （4）在同一位置删除原有的代码，重新输入代 码，显示当前日期和时间， （5）保存网页。
（四）知识讲解与操作示范 13.3.1 JavaScript脚本的语法格式 在网页中最常用的一种插入脚本程序的方式是使用script标记符，把脚本标记符<script></script>置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。一般语法形式如下： <script language=“JavaScript1.2” type=“text/javascript”> <!-- 在此编写JavaScript代码 //--> </script>通过标识<script></script>指明其间是JavaScript脚本源代码。 13.3.2 JavaScript的常量和变量
（四）知识讲解与操作示范（2） 13.3 JavaScript的基本语法 1．常量 JavaScript有6种基本类型的常量： （1）整型常量 （2）实型常量 （3）布尔值 （4）字符型常量 （5）空值 （6）特殊字符 2．变量 变量有4种类型：整型变量、实型变量、布尔型变量、字符串变量。
（四）知识讲解与操作示范（2） 13.3.3 JavaScript的运算符与表达式 运算符也称为操作符，JavaScript常用的运算符有： JavaScript变量在使用前可以使用var关键字先作声明，并可赋值。 13.3.3 JavaScript的运算符与表达式 运算符也称为操作符，JavaScript常用的运算符有： 算术运算符（包括+、-、*、/、％、++、--） 比较运算符（包括<、<=、>、>=、==、!=） 逻辑运算符（&&、||、!） 赋值运算符（=） 条件运算符（? :） 表达式是运算符和操作数的组合，表达式通过求值确定表达式的值，这个值是操作数据实施运算所确定的结果。
（四）知识讲解与操作示范（3） 13.3 JavaScript的基本语法 13.3.4 JavaScript的语句 1．条件语句 （1）if语句 if语句的语法格式如下： if (表达式) 语句块若表达式的值为true，则执行该语句块，否则就跳过该语句块。 （2）if else语句 if else语句的语法格式如下： if (表达式) 语句块1 else 语句块2若表达式的值为true，则执行语句块1；否则执行语句块2。
（四）知识讲解与操作示范（3） 13.3 JavaScript的基本语法 2．循环语句 循环语句用于在一定条件下重复执行某段代码。JavaScript中提供了多种循环语句：for语句、while语句、do while语句。 （1）form语句 form语句的语法格式如下： for (表达式1 ; 表达式2 ; 表达式3 ) { 循环语句块 }先执行“表达式1”，完成初始化；然后判断“表达式2”的值是否为true，如果为true，则执行“循环语句块”，否则退出
（四）知识讲解与操作示范（3） 13.3 JavaScript的基本语法 （2）while语句while语句的语法格式如下： while (表达式) { 循环语句块 }先计算表达式的值，如果表达式的值为true，则执行循环语句块，否则跳出循环。 3．其他语句 JavaScript中还包括以下语句： （1）赋值语句：使用赋值运算符构成的语句称为赋值语句。 （2）数据声明语句：数据声明语句用于声明一个变量。 （3）函数调用语句：函数调用语句用于调用函数。 （4）return语句：用于返回函数调用的值。
（四）知识讲解与操作示范（3） 13.3.5 JavaScript函数 函数是功能相对独立的代码块，该代码块中的语句被作为一个整体执行，使用函数之前，必须选定义函数，函数的定义格式如下： Function 函数名称（参数表） { 函数执行部分 ; return 表达式 ; } 函数定义中的return语句用于返回函数的值。 JavaScript中包含以下7个全局函数，用于完成一些常用的功
（四）知识讲解与操作示范（3） 13.3 JavaScript的基本语法 能：escape()、eval()、isFinite()、isNaN()、 parseFloat()、parseInt()、unescape()。 12.3.6 JavaScript的事 JavaScript是一种基于对象的语言，基于对象语言的基本特征是采用事件驱动机制。 Web页面触发事件的原因主要有： （1）页面之间跳转； （2）网页的下载、表单提交； （3）网页内部对象的交互，包括界面对象的选定、离开、改变等。
（四）知识讲解与操作示范（3） 13.3 JavaScript的基本语法 JavaScript脚本中常用的事件有： （1）onClick事件 （2）onDblClick事件 （3）onLoad事件 （4）onMouseDown事件 （5）onMouseUp事件。 （6）onMouseOver事件 （7）onMove事件 （8）onReset事件 （9）onSubmit事件 （10）onUnload事件。
（五）课堂实践 1．操作要求 （1） 打开“课堂实践”网站文件“14JS技术”中的网页文档“14.html”。 （2） 在HTML文档中HEAD部分输入以下代码13_8，实现在浏览器的状态栏显示欢迎文本和当前的日期、时间的功能。 //JavaScript代码13_8 <SCRIPT language="JavaScript"> function doClock() { window.setTimeout( "doClock()", 1000 ); today = new Date(); window.status ='<--长沙世界之窗欢迎您!--> ' +today.toString(); } </SCRIPT>
（五）课堂实践 2．效果展示 包含三种特效的网页14.html的浏览效果如图所示。 3．制作要点提示 2．效果展示 包含三种特效的网页14.html的浏览效果如图所示。 3．制作要点提示 （1）要实现在浏览器的状态栏显示欢迎文本和日期，必须在HTML文档的BODY部分的开始位置添加以下代码：<body onMouseOver="doClock()">……</body>. （2）要实现鼠标跟随效果，必须在HTML文档的BODY部分的开始位置添加以下代码：<body onLoad="HappyTrails()" ;>……</body>
（五）课堂实践 图13-4 应用JavaScript技术制作的特效网页的浏览效果
(六)课外拓展实践 应用JavaScript技术实现以下网页特效： （1）创建鼠标跟随效果； （2）制作飘浮广告；
（七）本章小节 应用JavaScript语言编写脚本程序，可以实现许多网页特效，但网页特效并非是网页中的重要组成元素，对JavaScript语言只需一般了解便可以。通过本章学习要求基本掌握JavaScript语言的语法、对象和常见的利用脚本创建特效的方法。