《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元26：JavaScript技术 “、 课程引导 二、明确知识技能目标 湖南城道质業政鄉学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元26：JavaScript技术 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一) 课程引导 本次课程重点学习JavaScript的对象以及JavaScript 代码嵌入HTML文档的方法。 湖南城道属業政饰学院 网页设计与制作
（一）课程引导 本次课程重点学习JavaScript的对象以及JavaScript 代码嵌入HTML文档的方法
(二) 明确知识技能目标 (l)了解JavaScript的对象，掌握Window>对象、Document 对象和常用的内置对象。 湖南城道盛营政似学院 (2)掌握JavaScript代码嵌入HTML代码的方法。 (3)熟悉应用JavaScript技术制作的几种常见的网页特 效。 网页设计与制作
（二）明确知识技能目标 （1）了解JavaScript的对象，掌握Window对象、Document 对象和常用的内置对象。 （2）掌握JavaScript代码嵌入HTML代码的方法。 （3）熟悉应用JavaScript技术制作的几种常见的网页特 效
(三) 分析操作任务 在文件夹“14JS技术”中创建网页142.html,该网页 打开时会自动弹出一个小窗口，网页中图像禁止下载。 湖南城道职营政新学院 网页设计与制作
（三）分析操作任务 在文件夹“14JS技术”中创建网页14_2.html，该网页 打开时会自动弹出一个小窗口，网页中图像禁止下载
(四) 知识讲解与操作示范 l3.4 JavaScript的对象 湖南城 l3.4.1 JavaScripti对象的层次结构 1.第一层次 JavaScript对象的层次结构中最顶层的对象是窗 口对象(window),它代表当前的浏览器窗口。 Window>对象常用的方法有：open()、close()、alert() 紫 confirmO、prompt(O。 2. 第二层次 窗口对象window-之下是文档(document)、浏览器 考 (navigator)、屏幕(screen).、事件(event)、框架 (frame)、 历史(history)、地址(location)。 3. 第三层次 网页设计与制作
（四）知识讲解与操作示范 13.4 JavaScript的对象 13.4.1 JavaScript对象的层次结构 1．第一层次 JavaScript对象的层次结构中最顶层的对象是窗 口对象（window），它代表当前的浏览器窗口。 Window对象常用的方法有：open()、close()、alert()、 confirm()、prompt()。 2．第二层次 窗口对象window之下是文档(document)、浏览器 (navigator)、屏幕(screen)、事件(event)、框架 (frame)、历史(history)、地址(location)。 3．第三层次
(四)知识讲解与操作示范 l3.4 JavaScript的对象 文档对象之下包括表单(form)、图像(image)、链接 线 (1ink)、锚对象(anchor)等多种对象。浏览器对象之下 包括MIME类型对象(mimeType)、插件对象(plugin)等。 4.第四层次 感 表单对象之下包括按钮(button)、复选框 (checkbox)、单选按钮(radio)、文件域(fileUpload)等。 13.4.2 Window对象 Window>对象代表当前窗口，是每一个已打开的浏览 琴 器窗口的父对象，包含了Document、navigator、 location、historys等子对象。 》 网页设计与制作
（四）知识讲解与操作示范 13.4 JavaScript的对象 文档对象之下包括表单(form)、图像(image)、链接 (link)、锚对象(anchor)等多种对象。浏览器对象之下 包括MIME类型对象(mimeType)、插件对象(plugin)等。 4．第四层次 表单对象之下包括按钮(button)、复选框 (checkbox)、单选按钮(radio)、文件域(fileUpload)等。 13.4.2 Window对象 Window对象代表当前窗口，是每一个已打开的浏览 器窗口的父对象，包含了Document、navigator、 location、history等子对象
(四)知识讲解与操作示范 13.4 JavaScript的对象 该对象常用的属性与方法有： (1)status属性：表示窗口状态栏中的信息。 (2)alert(string):显示提示信息对话框。 道 (3)confirm):显示确认对话框，该对话框中包含 “确定”和“取消”两个按钮，如果单击“确定”按钮， 蒙 则返回true,如果单击“取消”按钮，则返回false。 爽 (4)open(参数表)：创建一个新窗口实例。 13.4.3 Document对象 考 Document对象代表当前浏览器窗口中的文档，使用它 可以访问到文档中的对象，例如图像、表单等。 网页设计与制作
（四）知识讲解与操作示范 13.4 JavaScript的对象 该对象常用的属性与方法有： （1）status属性：表示窗口状态栏中的信息。 （2）alert(string)：显示提示信息对话框。 （3）confirm()：显示确认对话框，该对话框中包含 “确定”和“取消”两个按钮，如果单击“确定”按钮， 则返回true，如果单击“取消”按钮，则返回false。 （4）open( 参数表 )：创建一个新窗口实例。 13.4.3 Document对象 Document对象代表当前浏览器窗口中的文档，使用它 可以访问到文档中的对象，例如图像、表单等
(四)知识讲解与操作示范 I3.4 JavaScript的对象 南 Document对象常用的属性与方法有： (1)al1属性：表示文档中所有HTML标记符的数组。 (2)bgColor,属性：用于描述文档的背景颜色。 道 (3)forms)属性：表示文档中所有表单的数组。 (4)tit1e属性：表示文档的标题。 蕙 (5)write方法：将字符或变量值输出到窗口。 (6)close?方法：将输出关闭。 13.4.4其他的浏览器对象 l.Navigator>对象 琴 提供了浏览器环境的信息，包括浏览器的版本号、运 行的平台等信息。 网页设计与制作
（四）知识讲解与操作示范 13.4 JavaScript的对象 Document对象常用的属性与方法有： （1）all属性：表示文档中所有HTML标记符的数组。 （2）bgColor属性：用于描述文档的背景颜色。 （3）forms属性：表示文档中所有表单的数组。 （4）title属性：表示文档的标题。 （5）write方法：将字符或变量值输出到窗口。 （6）close方法：将输出关闭。 13.4.4 其他的浏览器对象 1．Navigator对象 提供了浏览器环境的信息，包括浏览器的版本号、运 行的平台等信息
(四) 知识讲解与操作示范（2) 13.4 JavaScript的对象 湖 2.Location对象 表示窗口中显示的当前网页的URL地址， 可以使用该 对象让浏览器打开某网页。 道 3. History对象 表示窗口中最近访问网页的UL地址。 13.4.5 JavaScript的内置对象 残 JavaScript提供了一些内置的对象和函数，常用的内 置对象有： 1. string对象 琴 一般利用string>对象提供的函数来处理字符串。 克 String对象字符串的处理主要提供了以下方法： 网页设计与制作
（四）知识讲解与操作示范（2） 2．Location对象 表示窗口中显示的当前网页的URL地址，可以使用该 对象让浏览器打开某网页。 3．History对象 表示窗口中最近访问网页的URL地址。 13.4.5 JavaScript的内置对象 JavaScript提供了一些内置的对象和函数，常用的内 置对象有： 1．string对象 一般利用string对象提供的函数来处理字符串。 String对象字符串的处理主要提供了以下方法： 13.4 JavaScript的对象