jQuery网页特效设计基础教程(慕课版·第2版)
上QQ阅读APP看书,第一时间看更新

1.1 JavaScript概述

1.1.1 什么是JavaScript

JavaScript概述

JavaScript是由Netscape公司开发的一种Web页面脚本语言,也是一种通用的、跨平台的、基于对象和事件驱动的,并具有相对安全性的解释型脚本语言。它不需要进行编译,而是直接嵌入HTML(Hypertext Markup Language,超文本标记语言)页面中,把静态页面转变成支持用户交互并响应相应事件的动态页面,在Web系统中应用非常广泛。

1.1.2 JavaScript的应用

如今,用户已经习惯了App、微信小程序等移动应用的操作模式,兼具良好的互动体验和及时的用户反馈才能让设计出的网页具备竞争力。而我们常见的鼠标指针悬浮变色、显示或隐藏部分内容、注册表单验证提示、手风琴菜单、幻灯片轮播等特效,都可以使用JavaScript制作。JavaScript给网页带来了丰富的交互效果和动态的用户体验,使网页更加生动和富有活力。下面我们介绍JavaScript的常见应用。

1.校验用户输入的内容

在程序开发过程中,对用户输入内容的校验通常分为两种:校验功能和校验格式。

校验功能常常与服务器端的数据库相关联。例如,在开发密码登录页面时,用户要输入正确的登录名和登录密码。如果用户输入了不正确的登录名或登录密码,页面将弹出相应的提示,如图1-1所示。这种校验必须在表单提交后,由服务器端的程序进行。

校验格式可以只发生在客户端,即在将表单提交到服务器端之前完成。JavaScript能及时响应用户的操作,对提交的表单做即时校验。JavaScript常用于校验用户输入的格式。

图1-2所示为典型的新用户注册信息填写页面,它要求对用户输入的格式进行校验,确认用户名不能为空;密码至少需要6个字符,且密码和确认密码必须一致;手机号格式正确等。例如,当用户输入不符合指定格式的手机号时,就会在页面输出提示信息“手机号不正确”,如图1-2所示。

图1-1 校验登录名和登录密码是否正确

图1-2 校验用户输入的格式是否正确

2.实现实时预览效果

在Web编程中,多数情况下需要程序与用户进行交互,告诉用户已经发生的情况,或者从用户的输入中获得下一步的数据,程序的运行过程大多数是一步步交互的过程。这种完全不用通过服务器端处理,仅在客户端动态显示网页的功能,不仅可以节省网页与服务器端的通信时间,又可以制作出便于用户使用的友好页面,使网页功能更加人性化。

例如,在实现许愿字条时,为了让用户可以实时看到添加内容后许愿字条的效果,用户每输入一个文字,右侧的字条预览区都会实时显示许愿字条的效果,如图1-3所示。

图1-3 实时预览许愿字条效果

3.实现动画效果

网页中经常会有一些动画效果,其能使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果,例如在页面中实现一种星星闪烁的动画效果,如图1-4所示。

图1-4 星星闪烁动画效果

4.实现浮动广告窗口

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

图1-5 浮动广告窗口的应用

5.实现文字特效

使用JavaScript语言可以实现多种文字特效。例如文字滚动的特效,如图1-6所示。

图1-6 文字滚动特效

1.1.3 JavaScript的特点

JavaScript是为适应动态网页制作的需要而产生的一种编程语言,它具有以下特点。

1.无须编译,在浏览器中运行时被解释

JavaScript不同于一些编译性的编程语言(例如C、C++等),它是一种解释性的程序语言,它的源代码不需要经过编译,而是直接在浏览器中运行时被解释。

2.基于对象

JavaScript是一种基于对象的语言,这意味着它能运用自己已经创建的对象。因此,它的许多功能可以来自脚本环境中对象的方法与脚本的相互作用。

3.事件驱动

JavaScript可以直接对用户输入做出响应,无须经过Web服务程序。它对用户输入的响应是以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,此动作称为“事件”。例如按鼠标按键、移动窗口、选择菜单等都可以称为事件。当事件发生后,可能会引起相应的事件响应。

4.相对简单

JavaScript是一种基于Java基本语句和控制流的简单而紧凑的语言,对于学习Java来说是一种非常好的过渡。此外,它的变量类型采用弱类型,并未采用严格的数据类型。

5.支持多种浏览器

JavaScript依赖于浏览器本身,与操作环境无关。只要计算机能运行浏览器,并且浏览器支持JavaScript,就可正确运行JavaScript。

6.安全性高

JavaScript是一种安全性高的语言,不允许将数据存入服务器中和对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,这样可有效地防止数据丢失。