2.3 JavaScript脚本语言
JavaScript是一种简单的脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。
JavaScript代码可以直接嵌套在HTML网页中，它响应一系列的事件，当一个JavaScript函数响应的动作发生时，浏览器就执行对应的JavaScript代码。本小节主要介绍JavaScript的基本语法、事件和常用对象以及使用方法。
2.3.1 JavaScript的基本语法
JavaScript是一种简单的脚本语言，该脚本语言的基本成分：数据类型、常量变量、运算符、表达式、控制语句、函数等。
1.数据类型
JavaScript有主要数据类型：int、float、string（字符串）、boolean、null（空类型）。
2.变量
在JavaScript中，使用命令var声明变量。在声明变量时，不需要指定变量的类型，而变量的类型将根据其变量赋值来确定。
（1）变量声明，格式如下： var变量名[=值]；（变量声明可以省略） 例如：
（2）数组的声明：数组的声明有如下3种方式（数组元素类型可以不同）。
3.运算符
在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中支持的运算符及其功能相同。
4.控制语句
JavaScript中的控制语句：分支语句（if、switch），循环语句（while、do-while、for），这些语句的语法规则和使用与java语言中的要求一样。
5.函数的定义和调用
在JavaScript中，函数需要先声明定义，然后再调用。
在JavaScript中定义函数，有两种实现方式：一种是在Web页面中直接嵌入JavaScript，另一种是链接外部JavaScript文件。
（1）在页面中直接嵌入JavaScript代码。
使用<script></script>标记对封装代码，且必须放在<head>与</head>之间，其语法格式：
例如：
（2）链接外部JavaScript。
将脚本代码保存在一个单独的文件中，其扩展名为.js，然后在需要的Web页面中链接该JavaScript文件，同样，也必须放在<head>与</head>之间，其链接语法格式：
其中，url指明JavaScript外部文档的地址（相对路径），其文件后缀为“.js”，在外部文档中不需要将脚本代码用<script>和</script>标记括起来。
例如：设计脚本文件test.js，其代码如下（在一个文件中可以设计多个函数）。
而在HTML中，需要采用如下方式（与要使用它的网页在同一目录下）：
提示：当JavaScript的代码量比较大的时候，或者在多个页面都会用到同样功能的JavaScript代码时，通常存放到*.js文件中。
（3）函数的调用
在JavaScript中，函数的调用一般是由事件引起的，调用方法见2.3.2中例子。
2.3.2 JavaScript的事件
在浏览器中网页与客户的交互都是通过“事件”引发的，当一个事件发生时，例如“用户单击某个按钮”，浏览器认为在这个按钮上发生了一个click事件，然后根据该按钮所定义的事件处理函数，执行相应的JavaScript脚本。
1.JavaScript的事件的含义
JavaScript的事件是指用户对网页的一些特定“操作”，例如：鼠标的单击、键盘键被按下等行为都是事件。而事件会引起要处理的“事务”，例如，点击一个超链接，这里的“单击鼠标”就是一个事件，然后由该事件引发网页的加载处理（一般称为事件处理函数）。
事件处理函数是指用于响应某个事件而执行的处理程序。在JavaScript中，规定“on事件名”是对应事件处理程序句柄的名字，例如，当用户单击按钮时，将触发按钮的onClick函数。表2-9给出常用的事件、事件处理函数及何时触发事件处理函数。
表2-9 常用的事件、事件处理函数
2.在HTML中引用（指定）事件处理函数
在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。使用格式：
<标签 各有关属性及其属性值o n事件名称="函数名称（参数）">
【例2-9】 通过input输入标签，引发一个单击事件，该事件的处理函数名是onClick（），其要完成的功能是通过函数test（）实现的，而函数test（）的功能是显示一个提示窗口（由Windows的alert方法完成），并提示“事件引发一操作，并成功执行了这个操作！”。
这里采用在页面中直接嵌入JavaScript代码的实现方式，其代码如下：
该程序的运行界面如图2-11和2-12，当浏览器运行程序ch02_9.html时，首先显示图2-11所示的页面，但单击“按钮”时，出现图2-12所示的提示对话框，当单击“确定”后，该提示对话框消失。
图2-11 例2-9运行界面
图2-12 提示对话框
在HTML文档中，需要JavaScript对HTML文档内的有关信息和数据进行加工处理。如何获取HTML文档中的各种信息和数据呢？需要通过JavaScript内置实现。
2.3.3 JavaScript的对象
JavaScript所实现的动态功能，基本上都是对HTML文档或者是HTML文档运行的环境进行的操作，这些操作必须找到相应的对象，通过这些对象，实现对网页信息的操作和处理加工。
JavaScript中设有内置对象，常用的内置对象有String、Date和浏览器的文档对象（window、navigator、screen、history、location、document）等。对于String对象和Date对象与Java语言中的类似。这里重点介绍window、history、location、document对象的属性、方法和应用。
1.window对象
HTML文档内容在window对象中显示，同时，window对象提供了用于控制浏览器窗口的方法。window对象属性的常用方法如表2-10所示。
表2-10 window对象属性的常用方法
在这些方法中，警告对话框——window.alert（）与确认对话框——window.confirm（）是使用较多的方法，当某些事件发生时，需要通过对话框给用户显示提示信息，其使用方法参考上一小节例2-9。
2.location对象
location对象实现网页页面的跳转。在HTML中使用标记<a></a>来实现页面的跳转，在JavaScript中，利用location对象实现页面的自动跳转。使用格式：
例如，跳转到搜狐网页：
3.history对象
history对象可以访问浏览器窗口的浏览历史，通过go、back、forward等方法控制浏览器的前进和后退。表2-11给出了history对象的属性和方法。
表2-11 history对象的属性和方法
例如：从当前网页，回退到刚访问过的上一个网页页面，需要的语句为：
4.document对象
每个HTML文档被加载后都会在内存中初始化一个document对象，该对象存放整个网页HTML内容，从该对象中，可获取页面表单的各种信息。这里重点介绍获取HTML页面中表单内各输入域信息的方法和使用。
（1）获取表单域对象。
获得表单域对象的主要方法有如下两种：通过表单访问与直接访问。
假设有如下的表单：
则可以通过以下方法获取输入域对象：
①通过表单访问。
②直接访问。
（2）获取表单域的值。
若表单域对象为fObj，由于表单域类型不同，其获取表单域值的方法也不同，常用的方法：
①获取文本域、文本框、密码框的值。
②获取复选框的值。
例如，对于如下的一组复选框：
利用JavaScript取值的方法：
③获取单选按钮的值。
例如，对于如下的一组单选按钮：
利用JavaScript取值的方法如下：
④获取列表框的值。
对于单选列表框，可以用如下方法取出值：
对于多选列表，取值需要循环：
2.3.4 案例——JavaScript实现输入验证
对于一个HTML页面中的表单，可以获取其中的各项表单域的信息，利用这些信息，可以判定各表单域所提供的输入值是否合法，是否符合所要求的格式，这就是表单的输入验证，也是JavaScript最重要的应用。下面通过一个案例，给出具体的实现方法。
【例2-10】 例2-9中已经设计了一个注册页面，并利用CSS样式表进行美化了，在本例中，根据图2-13页面所给出的不同信息的输入要求，利用JavaScript进行表单数据有效性验证，当不符合要求时，通过警告框，给出提示，并重新输入。
图2-13 例2-9给出的修饰后的页面
【分析】 输入表单的验证就是对表单中输入的数据进行检验，如果表单中填入的数据不符合要求，则禁止提交，并给用户适当的提示信息，以便用户重新输入。只有当所有输入的数据符合所要求后，才允许提交，并进入表单标签的action属性所指定的处理程序，即<form action="提交后，进入的处理页面">。
（1）由图2-13，该注册页面，需要验证的表单输入域和要求。
●用户名：用户名是否为空，是否符合规定的格式（用户名由字母开头，后跟字母、数字或下划线！）。
●密码：密码长度是否超过6，两次密码输入是否一致。
●邮箱地址：邮箱地址必须符合邮箱格式。
（2）必须注意提交表单并实现输入验证的方式。
一般使用“button类型”按钮提交，“提交”时先执行“响应函数”。提交方式：
另外，在验证函数中，当都满足格式后，采用如下格式，实现提交：
【设计与实现】 对于验证输入格式，实际上就是编写有关的Javascript函数，去验证表单中各输入域是否符合规定，若不符合规定，给出提示信息。为此，使用JavaScript编写验证函数，并形成文件ch02_10_JavaScript.js，其代码如下：
然后，在页面的<head></head>之，添加一行：
最后，修改注册页面以及最后的“提交输入域”，其代码如下：
