项目七 使用 JavaScript 实现网页交互特效_第1页
项目七 使用 JavaScript 实现网页交互特效_第2页
项目七 使用 JavaScript 实现网页交互特效_第3页
项目七 使用 JavaScript 实现网页交互特效_第4页
项目七 使用 JavaScript 实现网页交互特效_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目七使用JavaScript

实现网页交互特效电子商务网站建设与网页设计

（微课版）1认识JavaScript脚本语言2课堂练习——使用JavaScript制作网页交互特效3课堂练习——使用JavaScript验证表单目录CONTENTS4课堂练习——为首页添加“焦点图”代码本任务将对JavaScript进行简要介绍，让用户认识JavaScript脚本语言，了解JavaScript的基本结构，并学习如何使用JavaScript语言进行网页动态信息输出。任务一认识JavaScript脚本语言一、JavaScript简介JavaScript是一种解释型的、基于对象的脚本语言。HTML网页在互动性方面能力较弱。例如菜单，当单击某一菜单项时会自动出现该菜单项对应的菜单；又如网页表单验证，使用Dreamweaver中的“行为”面板，虽然可以检查表单，但不够人性化和智能化。使用JavaScript的特殊方式AJAX（AsynchronousJavaScriptandXML，异步JavaScript和XML），可以实现网页异步更新，这意味着可以在不重新加载整个网页的情况下对网页的某些部分进行更新。JavaScript代码主要是基于客户端运行的，浏览者单击包含JavaScript代码的网页，网页中的JavaScript代码就传到浏览器，由浏览器对其进行处理。前面提到的菜单、验证表单有效性等交互功能都是在客户端完成的，不需要和网页服务器发生任何数据交换，也就不会增加Web服务器的负担。几乎所有浏览器都支持JavaScript，因此，在网页设计时使用JavaScript脚本，不必担心发生因浏览器不支持而无法浏览的情况。二、JavaScript的基本结构JavaScript脚本是嵌入在HTML代码中一起被浏览器执行的，理论上可以在HTML页面的任何位置嵌入，但一般都会放置在网页顶部，即标签<head>和</head>之间，以便浏览器加载页面内容时可以预先读取脚本代码。嵌入JavaScript脚本三、使用JavaScript向页面输出信息使用alert("要显示的内容")语句可以让网页在被浏览时弹出提示信息框，显示相应的信息。下面将举例说明，具体操作方法如下。使用alert()语句三、使用JavaScript向页面输出信息使用document.write("要显示的内容")语句可以向页面输出信息。下面将举例说明，具体操作方法如下。使用document.write()语句本任务将学习如何使用JavaScript制作文字滚动特效、日期特效、对联广告特效和下拉菜单特效等网页交互特效。任务二课堂练习——使用JavaScript制作网页交互特效一、制作文字滚动特效文字滚动特效是在较小的页面版块中进行滚动，以显示较多的文字内容，这样不仅可以节约有限的网页版面，还能使文字具有动态的效果，以达到吸引浏览者的目的。文字滚动特效的实现很简单，只需在要滚动的文字两端添加<marquee>脚本代码即可。滚动标记<marquee>的语法如下。<marqueebehavior="scroll"direction="up"scrolldelay="200"scrollamount="2"width="500"height="80"onmouseover="this.stop()"onmouseout="this.start()">欢迎光临本商城，感谢您的访问！</marquee>二、制作日期特效在页面上显示当前日期，不仅可以对浏览者起到提示作用，还能使网页的功能更加完善。要制作日期特效，需要使用JavaScript提供的日期时间函数，并结合前面介绍的document.write()语句在页面的相应位置显示日期和时间。下面将举例说明，具体操作方法如下。三、制作对联广告特效在电子商务网站中，广告几乎是必不可少的。根据广告的制作原理，可以将广告分为层广告、弹出广告、漂浮广告等。在制作广告特效时，一般将广告特效代码添加到网页中，然后设置广告内容，调试页面直至实现想要的效果。下面以制作对联广告特效为例进行介绍，具体操作方法如下。四、制作下拉菜单特效下拉菜单是网页中常见的一种显示形式，将鼠标指针移至链接元素上就会弹出一个下拉菜单。下拉菜单的制作需要用到两种鼠标事件，分别是onMouseOver（鼠标指针移入）和onMouseOut（鼠标指针移出）。下面将举例说明如何制作下拉菜单特效，具体操作方法如下。浏览者在填写网页中的表单信息时，常常会出现填写错误的情况。例如，某些重要信息没有填写、电子邮箱地址格式不正确、密码长度不符合要求等。这时需要对浏览者输入的信息进行验证，如果填写不正确，就给出相应的提示，从而使收集的信息更加完整、有效。这些情况都可以通过JavaScript脚本对表单进行验证。任务三课堂练习——使用JavaScript验证表单一、设置表单非空验证浏览者在注册网站会员时，需要填写相关信息。在提交注册信息时，必填项的内容不能为空，否则会弹出提示信息框提示填写相关信息。在使用JavaScript脚本验证表单时，首先要获取表单对象的值，然后对其进行判断，根据判断情况做出相应的操作。在网页中，一个或者多个不同类型的表单对象共同构成一个表单。下面为表单命名并设置表单非空验证，具体操作方法如下。二、验证密码长度和密码一致性为了避免会员密码设置过于简单而造成密码被破解，可以要求注册者设置具有一定长度的密码。此外，还需要验证注册者输入的“登录密码”和“确定密码”是否一致，具体操作方法如下。三、验证电子邮箱地址正确的邮箱地址必须包含“@”和“.”符号，当注册者输入的邮箱地址未包含这两种符号时应提示重新输入。从文本框中获取的值是字符串类型的数据，可以使用indexOf()方法检查字符串中是否包含必要的字符。验证电子邮箱地址是否有效的具体操作方法如下。焦点图是网站广告图轮替的一种效果，现在的电子商务网站一般会使用焦点图轮替广告图。本任务通过为首页添加“焦点图”代码学习如何使用JavaScript脚本特效。任务四课堂练习——为首页添加“焦点图”

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论