- 1、本文档共15页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第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 制作网页特效
您可能关注的文档
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第1章 网站规划和网页设计基础.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第2章 HTML概述.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第3章 编辑网页文档.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第4章 网页布局与交互.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第5章 CSS基础.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第6章 CSS盒模型.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第7章 使用CSS修饰常见的网页元素.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第8章 使用CSS设置链接与导航.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第9章 Div+CSS布局页面.ppt
- Web前端开发实例教程——HTML5 CSS3 JavaScript 第11章 珠宝商城前台页面.ppt
- 2024年江西省寻乌县九上数学开学复习检测模拟试题【含答案】.doc
- 2024年江西省省宜春市袁州区数学九上开学学业水平测试模拟试题【含答案】.doc
- 《GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语》.pdf
- 中国国家标准 GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语.pdf
- GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- 《GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构》.pdf
- 中国国家标准 GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 中国国家标准 GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 《GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南》.pdf
最近下载
- 消防控制室工作方案与消防流程.doc
- 幼儿园课件:《食品安全我懂得》.pptx
- 金融投资证券 - 金融投资证券 - 期权、期货和其他衍生品第十版答案手册Options,Futures,andOtherDerivatives-10th-JohnHull&Solutions.pdf
- ×××工程项目建设监理规划(房建).doc
- 脱硫脱硝设备现场安装方案.pdf
- 增强驾驭风险能力_提高科学执政本领(ppt46页).ppt
- 体操头手倒立教学教案.doc VIP
- 242个国家中英文名称对照.xls VIP
- 毕业设计(论文)--某商住楼工程量清单与招标控制价编制.doc
- 毕业设计(论文)--学生公寓楼工程量清单和招标控制价编制.doc
文档评论(0)