1.1 JavaScript简述
JavaScript是Web页面中的一种脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译,而是直接嵌入在HTML页面中,把静态页面转变成支持用户交互并响应相应事件的动态页面。
1.1.1 JavaScript的起源
JavaScript语言的前身是LiveScript语言,这是由美国Netscape(网景)公司的布瑞登·艾克(Brendan Eich)为1995年发布的Navigator 2.0浏览器的应用而开发的脚本语言。与Sun(升阳)公司(现已被甲骨文公司收购)联手完成LiveScript语言的开发后,就在Navigator 2.0正式发布前,Netscape公司将其改名为JavaScript,也就是最初的JavaScript 1.0版本。虽然当时该版本还存在很多缺陷,却丝毫不影响以JavaScript 1.0版本为基础的Navigator 2.0在浏览器市场上的主宰地位。
因为JavaScript 1.0如此成功,Netscape公司在Navigator 3.0中发布了JavaScript 1.1版本。同时微软开始进军浏览器市场,发布了Internet Explorer 3.0并搭载了一个JavaScript的类似版本,其注册名称为JScript。这成为JavaScript语言发展过程中的重要一步。
在微软进入浏览器市场后,此时有3种不同的JavaScript版本同时存在,Navigator中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与其他编程语言不同的是,JavaScript并没有一个标准来统一其语法或特性,而这3种不同的版本恰恰突出了这个问题。1997年,JavaScript 1.1版本作为一个草案被提交给欧洲计算机制造商协会(ECMA)。最终,由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成了TC39委员会,以制定一个标准化的,可通用、跨平台、中立于厂商的脚本语言。TC39委员会制定了“ECMAScript程序语言的规范书”(又称为“ECMA-262标准”),该标准通过国际标准化组织(ISO)采纳通过,成为各种浏览器生产开发所使用的脚本程序的统一标准。
1.1.2 JavaScript的主要特点
JavaScript脚本语言的主要特点如下:
解释性
JavaScript不同于一些编译性的程序语言,如C、C++等。它是一种解释性的程序语言,其源代码不需要经过编译,而是直接在浏览器运行时被解释。
基于对象
JavaScript是一种基于对象的语言,这意味着它能运用已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
事件驱动
JavaScript可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,此动作称为事件。例如,按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生时,可能会引起相应的事件响应。
跨平台
JavaScript依赖于浏览器本身,与操作环境无关,只要是能运行浏览器的计算机,就可以正确执行。
安全性
JavaScript是一种安全性语言,不允许访问本地的硬盘,不能将数据存入服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,因此可有效地防止数据的丢失。
1.1.3 JavaScript的应用
使用JavaScript脚本实现的动态页面,在Web上随处可见。下面将介绍几种JavaScript常见的应用。
验证用户输入的内容
使用JavaScript脚本语言可以在客户端对用户输入的数据进行验证。例如,在制作用户注册信息页面时,要求用户输入确认密码,以确定用户前面输入的密码是否准确。如果用户在“确认密码”文本框中输入的信息与“密码”文本框中输入的信息不同,将弹出相应的提示信息,如图1.1所示。
图1.1 验证两次密码是否一致
动画效果
在浏览网页时,经常会看到一些动画效果,使页面显得更加生动。使用JavaScript脚本语言也可以实现动画效果。例如,在页面中实现下雪的效果,如图1.2所示。
图1.2 动画效果
窗口的应用
打开网页时经常会看到一些浮动的广告窗口,这些广告窗口是网站主要的盈利手段之一。可以通过JavaScript脚本语言来实现如图1.3所示的广告窗口。
图1.3 窗口的应用
文字特效
使用JavaScript脚本语言可以使文字生成多种特效,例如,使文字旋转,如图1.4所示。
图1.4 文字特效
明日学院应用的jQuery效果
在明日学院的“读书”栏目中,应用jQuery实现了显示和隐藏子菜单的效果。当鼠标单击某个主菜单时,将滑动显示其下相应的子菜单。对应地,其他子菜单将会滑动隐藏,如图1.5所示。
图1.5 明日学院应用的jQuery效果
京东网上商城应用的jQuery效果
京东网上商城的话费充值页面应用jQuery实现了标签页的效果。当鼠标单击“话费快充”选项卡时,标签页中将显示话费快充的相关内容,如图1.6所示。当鼠标单击其他选项卡时,标签页中将显示相应的内容。
图1.6 京东网上商城应用的jQuery效果
应用Ajax技术实现百度搜索提示
在百度首页的搜索文本框中输入要搜索的关键字时,下方会自动给出若干个相关提示。如果给出的提示有符合要求的内容,可以直接选择,非常方便。例如,输入“明日科”后,在下面将显示如图1.7所示的提示信息。
图1.7 百度搜索提示页面