
1.1.2 JavaScript的作用
使用JavaScript脚本实现的动态页面,在Web上随处可见。下面将介绍几种JavaScript常见的应用。
□ 验证用户输入的内容
在程序开发过程中,用户输入内容的校验常分为两种:功能性校验和格式性校验。
功能性校验常常与服务器端的数据库相关联,因此,这种校验必须将表单提交到服务器端后才能进行。例如,在开发管理员登录页面时,要求用户输入正确的用户名和密码,以确定管理员的真实身份。如果用户输入了错误的信息,将弹出相应的提示,如图1-1所示。这项校验必须通过表单提交后,由服务器端的程序进行验证。

图1-1 验证用户名和密码是否正确
格式性校验可以只发生在客户端,即在表单提交到服务器端之前完成。JavaScript能及时响应用户的操作,对提交表单做即时的检查,交由CGI验证无须浪费时间。JavaScript常用于对于用户输入的格式性校验。
图1-2所示为一个要求用户输入购卡人的详细信息,它要求对用户的输入进行以下校验。
(1)学生考号、移动电话、固定电话和E-mail不能为空。
(2)学生考号必须是12位。
(3)移动电话必须由11位数字组成,且以“13”和“15”开头。
(4)固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。
(5)E-mail必须包含“@”和“。”两个有效字符。
当用户输入不符合指定格式的移动电话号码时,就会在页面输出提示信息“移动电话号码的格式不正确”,如图1-2所示。

图1-2 校验用户输入的格式是否正确
□ 实时显示添加内容
在Web编程中,在多数情况下需要程序与用户进行交互,告诉用户已经发生的情况,或者从用户的输入中获得下一步的数据,程序的运行过程大多数是一步步交互的过程。这种完全不用通过服务器端处理,仅在客户端动态显示网页的功能,不仅可以节省网页与服务器端之间的通信时间,又可以制作出便于用户使用的友好界面,使程序功能更加人性化。
例如,在签写许愿信息时,为了让用户可以实时看到添加后字条的样式,用户每输入一个文字,在右侧的字条预览区实时预览签写许愿字条内容的效果,如图1-3所示。

图1-3 实时预览许愿字条
□ 动画效果
在浏览网页时,经常会看到一些动画效果,使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果,例如,在页面中实现一种星星闪烁的效果,如图1-4所示。

图1-4 动画效果
□ 窗口的应用
在打开网页时经常会看到一些浮动的广告窗口,这些广告窗口是网站最大的盈利手段。也可以通过JavaScript脚本语言来实现,例如,图1-5所示的广告窗口。

图1-5 窗口的应用
□ 文字特效
使用JavaScript脚本语言可以使文字实现多种特效。例如波浪文字,如图1-6所示。

图1-6 文字特效