Web前端开发实例教程——HTML5 CSS3 JavaScript 第10章 网页行为语言——JavaScript.pptVIP

第10章 网页行为语言——JavaScript Web前端开发实例教程 ——HTML5+CSS3+JavaScript 10.1 JavaScript概述 JavaScript概述 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。 利用它可以完成以下任务。 ? 响应事件 ? 读写HTML元素 ? 验证用户输入的数据 ? 检测访问者的浏览器 ? 创建cookies 10.2 在网页中调用JavaScript 在网页中调用JavaScript 在网页中调用JavaScript有3种方法：直接加入HTML文档、链接脚本文件和在HTML标签内添加脚本。 1．直接加入HTML文档 JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为： script type=text/javascript JavaScript语言代码; JavaScript语言代码; … /script 10.2 在网页中调用JavaScript 在网页中调用JavaScript 2．链接脚本文件 如果已经存在一个脚本文件（以js为扩展名），则可以使用script标记的src属性引用外部脚本文件的URL。采用引用脚本文件的方式，可以提高程序代码的利用率。其格式为： head … script type=text/javascript src=脚本文件名.js/script … /head 3．在HTML标签内添加脚本 可以在HTML表单的输入标签内添加脚本，以响应输入的事件。 10.3 JavaScript基本交互方法 10.3.1 信息对话框 信息对话框在网站中非常常见，用于告诉浏览者某些信息。其格式为： alert(信息内容); 【例10-1】使用信息对话框实现页面的交互，本例文件10-1.html在浏览器中显示的效果如图10-1和图10-2所示。 10.3 JavaScript基本交互方法 10.3.2 选择对话框 信息对话框只有一个“确定”按钮，这样浏览者没有任何选择。其格式为： confirm(对话框提示文字内容); 【例10-2】本例弹出一个confirm选择对话框。本例文件10-2.html在浏览器中显示的效果如10-3和图10-4所示。 10.3 JavaScript基本交互方法 10.3.3 提示对话框 提示对话框一般用于类似题目测试这样的小程序。其格式为： prompt(提示文字内容,文本框输入默认文本); 【例10-3】使用提示对话框实现页面的交互，如图10-6所示。 10.4 表单对象与交互性 表单对象与交互性 在JavaScript中要访问表单中的基本元素，必须通过对应特定的表单元素的元素名来实现。 1．Text单行单列输入元素 2．Textarea多行多列输入元素 3．Select选择元素 4．Button按钮 5．checkbox复选框 6．Password口令 7．submit提交元素 10.4 表单对象与交互性 表单对象与交互性 【例10-4】使用Form对象实现Web页面信息交互，本例文件10-4.html在浏览器中显示的效果如图10-9所示。 10.5 制作网页特效 10.5.1 Tab选项卡切换效果 【例10-5】制作珠宝商城客服中心页面的栏目切换的效果，页面的显示效果如图10-10所示。 10.5 制作网页特效 10.5.2 循环滚动的图文字幕 1．字幕标签的语法 在网页中，制作滚动字幕使用marquee标签，其格式为： marquee direction=left|right|up|down behavior=scroll|side|alternate loop=i|-1|infinite hspace=m vspace=n scrollamount=i scrolldelay=j bgcolor=色彩 width=x|x% height=y 流动文字或（和）图片 /marquee 10.5 制作网页特效 10.5.2 循环滚动的图文字幕 2．案例——循环滚动的图文字幕 【例10-6】制作循环滚动的珠宝产品展示页面，滚动的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图像后，图像继续滚动，页面显示的效果如图10-11所示。 10.5 制作网页特效 10.5.3 幻灯片广告 2．案例——循环滚动的图文字幕 【例10-7】制作幻灯片广告，每隔一段时间，广告自动切换到下一幅画面，本例文件10-7.html在浏览器中的浏览效果如图10-12所示。 10.5 制作网页特效