电子商务网站建设与网页设计（微课版）8

制作网页特效CHAPTEREIGHT通过DIV+CSS布局完成网页设计后，还需要对网页添加交互式特性，例如，使用“图像交换”特效可以进行网站广告图片的轮换；对表单进行验证，可以使用交互方式来设计，还有很多浏览器特性，这些都是通过JavaScript脚本来实现的。本项目主要学习如何使用JavaScript制作网页特效和验证表单等。学会JavaScript脚本的基础知识。运用JavaScript脚本实现常见网页特效和表单验证。学习目标Contents目录认识JavaScript脚本语言1使用JavaScript制作网页特效2使用JavaScript验证表单3JavaScript网页特效实例4一、认识JavaScript脚本语言JavaScript简介JavaScript的基本结构使用JavaScript向页面输出信息一、认识JavaScript脚本语言1JavaScript简介可以实现网页异步更新，不重新加载整个网页便可对网页部分更新。1特点基于客户端运行，JavaScript代码传到浏览器进行处理。2特点几乎所有浏览器都支持JavaScript。3特点JavaScript的特点一、认识JavaScript脚本语言2JavaScript的基本结构JavaScript脚本需要放在<script></script>标签内，然后嵌入到HTML代码中，这样才能被浏览器读取并执行。一、认识JavaScript脚本语言3使用JavaScript向页面输出信息使用JavaScript可以动态地向网页输出信息，主要有以下两种方法。使用alert语句1使用document.write()语句2一、认识JavaScript脚本语言3使用JavaScript向页面输出信息一、认识JavaScript脚本语言3使用JavaScript向页面输出信息输出类型代码实例输出结果输出值document.write("hello,world!");Hello,world!输出变量varstr="我爱学习HTML网页!";document.write(str);我爱学习HTML网页!输出HTML标记document.write("<h1>本地生活论坛

</h1>");以标题1显示“本地生活论坛”document.write()语句可以向页面输出3种类型的信息。Contents目录认识JavaScript脚本语言1使用JavaScript制作网页特效2使用JavaScript验证表单3JavaScript网页特效实例4二、使用JavaScript制作网页特效文字滚动特效日期特效广告特效下拉菜单特效二、使用JavaScript制作网页特效1文字滚动特效定义：文字滚动特效就是在较小的页面版块中进行滚动，以显示较多的文字内容。特点：不但可以节约有限的网页版面，还能使文字具有动态的效果，以达到吸引浏览者的目的。方法：只需在要滚动的文字两端添加<marquee>脚本代码即可。二、使用JavaScript制作网页特效1文字滚动特效二、使用JavaScript制作网页特效2日期特效二、使用JavaScript制作网页特效3广告特效1层广告2弹出广告3漂浮广告广告分类二、使用JavaScript制作网页特效3广告特效二、使用JavaScript制作网页特效4下拉菜单特效Contents目录认识JavaScript脚本语言1使用JavaScript制作网页特效2使用JavaScript验证表单3JavaScript网页特效实例4三、使用JavaScript验证表单非空验证邮箱地址验证验证密码长度和一致性三、使用JavaScript验证表单1非空验证三、使用JavaScript验证表单2验证密码长度和一致性三、使用JavaScript验证表单3邮箱地址验证Contents目录认识JavaScript脚本语言1使用JavaScript制作网页特效2使用JavaScript验证表单3JavaScript网页特效实例4四、JavaScript网页特效实例下载焦点图代码添加焦点图代码四、JavaScript网页特效实例1下载焦点图代码四、JavaScript网页特效实例2添加焦点图代码项目习题打开“素材文件/项目八/login.html”，根据需要设置表单非空验证和密码长度验证。设置完成后预览网页，进行表单验证测试，如图所示。0102打开“素材文件/项目八/习题二/8-8.html”，在网页中间文本提示处添加“图像”特效，如做图所