《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元25：JavaScript技术 一、课程引导 湖南城道营政外学院 二、 明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元25：JavaScript技术 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 湖南 网页是用HTML语言写的，HTML语言定义了网页的结 构和网页元素，能够实现网页普通格式要求。CSS样式表 道 弥补了HTML对网页格式化功能的不足，对网页布局和网 页元素的控制功能更加强大，能够实现网页中特殊格式的 要求。本章所学习的JavaScript主要实现实时的、动态的、 爽 可交互性的功能，对客户操作进行响应，显示各种自定义 内容。HTML、CSS、JavaScript三者共同构成了丰富多 拳院 彩的静态网页。 网页设计与制作
（一）课程引导 网页是用HTML语言写的，HTML语言定义了网页的结 构和网页元素，能够实现网页普通格式要求。CSS样式表 弥补了HTML对网页格式化功能的不足，对网页布局和网 页元素的控制功能更加强大，能够实现网页中特殊格式的 要求。本章所学习的JavaScript主要实现实时的、动态的、 可交互性的功能，对客户操作进行响应，显示各种自定义 内容。HTML、CSS、JavaScript三者共同构成了丰富多 彩的静态网页
(二)明确知识技能目标 (1) 掌握JavaScript的常量、变量、运算符和表式。 湖南共道鼎营政術学院 (2) 掌握JavaScript的语句、函数。 (3)了解JavaScript的事件。 网页设计与制作
（二）明确知识技能目标 （1）掌握JavaScript的常量、变量、运算符和表式。 （2）掌握JavaScript的语句、函数。 （3）了解JavaScript的事件
(三) 分析操作任务 湖南 (1)在“长沙世界之窗”站点下创建文件夹“14JS技术” (2)在文件夹“14JS技术”中创建网页14_1.htm1,在该网 道 页中显示当前日期与时间，并且在每天不同时间段显示不 同的问候语，还具有动态显示标题栏信息的功能： (3)在文件夹“14JS技术”中创建网页14_2.html,该网页 爽 打开时会自动弹出一个小窗口，网页中图像禁止下载。 御窖 网页设计与制作
（三）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“14JS技术”。 （2）在文件夹“14JS技术”中创建网页14_1.html，在该网 页中显示当前日期与时间，并且在每天不同时间段显示不 同的问候语，还具有动态显示标题栏信息的功能。 （3）在文件夹“14JS技术”中创建网页14_2.html，该网页 打开时会自动弹出一个小窗口，网页中图像禁止下载
(四)知识讲解与操作示范 13,1 JavaScript概述 JavaScript:是一种基于对象和事件驱动并具有安全 湖南城道质营政饰学院 性能的脚本语言。使用它的目的是与HTM超文本标记语 言一起实现网页中的动态交互功能。 网页设计与制作
（四）知识讲解与操作示范 13.1 JavaScript概述 JavaScript是一种基于对象和事件驱动并具有安全 性能的脚本语言。使用它的目的是与HTML超文本标记语 言一起实现网页中的动态交互功能
(四)知识讲解与操作示范(2) 湖南 13.2 JavaScript的应用举例 利用JavaScript?编写代码，在网页中显示当前日期和 时间。 道 具体实现过程如下： (1)在“长沙世界之窗”站点下创建文件夹“14JS技术”， 在“文件”面板中，将本站点根目录下“02文本操作” 蕙 文件夹中的网页文档“02.html”拷贝到文件夹“14JS技 术”中，且重命名为“141.htm1”。 (2)打开网页文档141.htm1 双击该文档名称打开该网页，在“文档”工具栏中【代码】 琴 按钮，切换到代码视图的编辑窗口。 (3)观察代码窗口中的显示日期的代码： 网设计与制作
（四）知识讲解与操作示范(2) 13.2 JavaScript的应用举例 利用JavaScript编写代码，在网页中显示当前日期 和 时间。 具体实现过程如下： （1） 在“长沙世界之窗”站点下创建文件夹“14JS技术”， 在“文件”面板中，将本站点根目录下“02文本操作” 文件夹中的网页文档“02.html”拷贝到文件夹“14JS技 术”中，且重命名为“14_1.html”。 （2） 打开网页文档14_1.html 双击该文档名称打开该网页，在“文档”工具栏中【代码】 按钮，切换到代码视图的编辑窗口。 （3） 观察代码窗口中的显示日期的代码：
(四)知识讲解与操作示范(2) 湖南绒道 13.2 JavaScript的应用举例 (4)在同一位置删除原有的代码，重新输入代码，显 示当前日期和时间， (5)保存网页。 网页设计与制作
（四）知识讲解与操作示范(2) 13.2 JavaScript的应用举例 （4）在同一位置删除原有的代码，重新输入代 码，显 示当前日期和时间， （5）保存网页
四) 知识讲解与操作示范 湖南 l3.3 JavaScript的基本语法 13.3.1 JavaScript脚本的语法格式 在网页中最常用的一种插入脚本程序的方式是使用 道 script标记符，把脚本标记符置于网页 上的HEAD部分或BODY部分，然后在其中加入脚本程序。 般语法形式如下： 〈script language=“JavaScript1.2” 爽 type=“text/javascript”>〈/script>.通过标识 ).指明其间是JavaScript脚本源代码。 拳院 l3.3.2 JavaScript的常量和变量 网顷设计与制作
（四）知识讲解与操作示范 13.3 JavaScript的基本语法 13.3.1 JavaScript脚本的语法格式 在网页中最常用的一种插入脚本程序的方式是使用 script标记符，把脚本标记符置于网页 上的HEAD部分或BODY部分，然后在其中加入脚本程序。一 般语法形式如下： 通过标识 指明其间是JavaScript脚本源代码。 13.3.2 JavaScript的常量和变量
(四)知识讲解与操作示范 （2) 湖南鐵道 13.3 JavaScript的基本语法 1. 常量 JavaScript有6种基本类型的常量： (1)整型常量 (2)实型常量 (3)布尔值 (4)字符型常量 (5)空值 (6)特殊字符 2.变量 变量有4种类型：整型变量、实型变量、布尔型变量、 魔 字符串变量。 网页设计与先制作
（四）知识讲解与操作示范（2） 13.3 JavaScript的基本语法 1．常量 JavaScript有6种基本类型的常量： （1）整型常量 （2）实型常量 （3）布尔值 （4）字符型常量 （5）空值 （6）特殊字符 2．变量 变量有4种类型：整型变量、实型变量、布尔型变量、 字符串变量