2.3 JavaScript基础知识

JavaScript是一种轻型的解释性脚本语言，1995年由Sun公司和Netscape公司共同研发出。它是由Web浏览器内的解释器解释执行的程序语言，一般嵌入在HTML中运行，实现了与用户的交互，产生动态效果。

2.3.1 JavaScript语言概述

JavaScript是一种嵌入HTML文档、解释型、跨平台、基于对象和事件驱动的脚本语言。JavaScript诞生后页面不再是一成不变的静态页面，增加了更多的用户交互、控制浏览器以及动态创建页面内容等功能，最主要的是使合法性验证之类的工作在客户端就可以完成。

JavaScript的运行过程如下。

1）用户在浏览器地址栏中输入请求页面的URL，该页面嵌入了JavaScript的程序片段。

2）浏览器将用户请求发送到服务器端。

3）服务器响应该请求，将嵌入JavaScript的HTML文档发送到客户端。

4）客户端浏览器从上到下逐行解释执行HTML标记和JavaScript脚本，同时把JavaS-cript脚本交给脚本引擎执行，最后把执行结果显示给用户。

JavaScript的诞生无疑给网页注入了新的活力，除了普通的表单验证外，还可以制作各种漂亮的页面特效。近年来越来越火的Ajax技术也是利用JavaScript与服务器的通信功能实现的。JavaScript的主要作用具体如下。

1．表单验证

用户输入的信息包括用户名、密码以及其他一些相关信息的长度、类型以及是否为空的验证。

2．实现网页特效

主要包括文字特效、鼠标特效、图片特效、页面特效、时间特效、状态栏特效、导航特效以及综合特效。

3．改善页面样式

页面样式通常是通过样式表（CSS）来定义的。通过样式表，能够随着页面的加载定义页面元素的表现形式。但是有时需要根据实际情况，动态地改变页面的样式，这就需要用到JavaScript。比如单击某个按钮会使得两张图片互换；鼠标移到一个链接上会有不一样的样式效果等。

4．应用Ajax

Ajax技术并不是一个新的技术，是JavaScript、XMLHTTP、CSS、XHTML、XML等的一个综合应用。它的应用颠覆了传统的Web应用中数据传输的方式，将数据传输由同步传输改为异步传输，从而减少了交互的时间，提升了用户体验。

2.3.2 JavaScript语法基础

JavaScript同其他程序设计语言一样，有着自己的语法结构，主要包含变量名的命名，注释的使用以及语句之间的分隔符等。下面简要介绍一下JavaScript的基本语法结构。

1．大小写敏感

JavaScript是一种对大小写敏感的语言，比如对于变量名“myName”“MyName”“my-name”“Myname”来说是完全不同的四个变量。注意：在HTML中是不区别大小写的，而JavaScript是嵌入到HTML中去的，所以很容易混淆。

2．空格、制表符和换行符

关键字、变量名、数字、函数名或者其他的标识符中间的空格、制表符以及换行符在JavaScript程序中是会被忽略的，除非这个空格是属于字符串或者其他变量的一部分。如果在一个关键字、变量名、数字、函数名或其他标识符之间加入了空格、制表符或换行符后，就会变成两个变量了。例如：“ABC”是一个变量名，而“A BC”就变成了两个独立的变量名，这样就产生了语法错误。

在编写JavaScript的过程中，可以使用这些分隔符来把程序语句对齐，或将一条长语句分成几行来编写，这样对于程序布局的美观、整洁是有好处的，同时规整的结构也增加了程序的可读性。

3．直接量

直接量就是在程序中直接显示出来的数值。原则上讲，直接量就是任何一种程序设计语言必不可少的一部分。例如：30、0.8、“你好！”、true等。

4．分号

JavaScript里的分号“；”与很多其他程序语言中的分号作用一样，是用来分割两条程序语句的。但JavaScript里的分号可以省略，可以用换行来代替。具体代码如下。

用换行实现两条赋值语句的分隔：

用分号实现两条赋值语句的分隔：

用分号实现两条赋值语句（放在同一行内）的分隔：

注意：为了养成良好的编程习惯，最好每条语句都使用一个分号“；”作为结束标志。

5．标识符

标识符相当于一个名称。在程序设计语言中，标识符用来命名变量名或函数名等。JavaScript和其他程序设计语言一样，有着同样的标识符命名规则：必须是以字母、下画线“_”或美元符号“$”开始的，字母、数字、下画线以及美元符号的任意组合。例如合法的标识符：a、_num、b2、$int、abc_1_num。

注意：标识符的命名只要符合规则就可以，但是不能和JavaScript的保留字重名。

6．保留字

保留字也可以称为关键字。保留字在JavaScript中具有特殊意义，是JavaScript语言的一部分。JavaScript的保留字如表2-1所示。

2.3.3 JavaScript函数和事件

函数和事件是JavaScript里最复杂但是又很重要的内容。函数的定义、编写以及调用构成了整个程序的功能，而事件在很多情况下往往是函数的触发条件，通过运用各种各样的事件，可以灵活地控制JavaScript实现具体的功能。

1．使用函数

（1）定义函数

函数和JavaScript其他的普通脚本一样，也要放在“＜script＞”和“＜/script＞”之间。在使用函数前必须使用保留字“function”对函数进行定义，具体的定义语句如下：

说明：

1）使用保留字“function”，保留字后面紧跟着的是函数的名称。

2）函数名的命名规则与变量名的命名规则一样。

3）函数名后面的括号内可以包含若干参数，也可以不带参数。使用参数是为了在调用函数时将变量传入函数的内部。

4）最后是一对大括弧“{}”，在大括弧内就是具体的函数语句。

例如：

说明：定义了一个名为“showResult”的函数，该函数实现的功能是两个数相乘，输出其结果。

（2）调用函数

函数本身是不会自动执行的，所以如果需要某个函数，就需要对其进行调用。调用函数的方法是使用函数名称并在括号中包含着所要传入的参数值，调用语句也要放在“＜script＞”和“＜/script＞”标签之间。

注意：调用函数的前提是这个函数必须事先定义，也就是说函数必须是先定义后使用。

例如：

（3）函数的返回值

函数不仅可以实现一些简单的功能，还能够通过参数接受传入的变量，同时也能够将一些结果返回调用函数的地方。实现函数返回值的语句是“return”，语法如下所示。

例如：

说明：在函数中也可以直接使用return，说明函数在该位置返回，但不带回任何值。仅仅表示函数停止执行。

2．使用事件

利用事件JavaScript可以使HTML具有了动态的特性，还可以控制页面的效果。JavaS-cript是嵌入在HTML文档里的，因此HTML的标签是主要的事件对象。HTML标签及相关事件如表2-2所示。

很多的HTML标签与JavaScript都有事件处理程序，使用合适的事件能够让相应的HTML标签实现一些功能，比如单击事件、双击事件等。

常用的事件包括：

（1）click事件

click事件是任何type属性的“＜input＞”标签都具有的事件，当鼠标在输入框或按钮上单击时，就会触发该事件。示例代码如下。

（2）blur事件

blur事件是指对象失去焦点后触发的事件，比如对设置了触发事件的输入框输入完毕后，将光标放到另一个输入框里面时就会触发该事件，或者光标原来停留在某单选框中，移到别的地方后同样会触发该事件。示例代码如下。

（3）change事件

change事件通常指当输入框的值发生了变化后，就会触发这个事件。示例代码如下。

运行后，在输入框中输入值，当光标移出输入框表示输入完毕，JavaScript如果检测到输入框的内容发生了变化，就触发该事件。

（4）select事件

select事件是指用鼠标在输入框内选中内容时，就会触发事件，示例代码如下。

运行后，在输入框中输入值，当用鼠标选中一段文字后，就会触发该事件。

（5）focus事件

与blur事件正好相反，focus事件是获得焦点时触发的事件，示例代码如下。

运行后，当将光标移到输入框内，就会触发该事件。

（6）load事件

Load事件使用最多的时候是在“＜body＞”标签里，当页面所有内容全部加载完毕后就会触发该事件，示例代码如下。

----------load.jsp-----------

运行效果如图2-17所示。

2.3.4 案例——注册信息客户端验证的实现

一般Web项目中，在网站首页需要用户注册，注册时为保证输入数据的正确性、安全性以及可靠性需要验证，该代码为项目部分代码，其中包括5个主要函数和一个JSP文件。

函数1：

函数2：

函数3：

函数4：

函数5：

JSP文件：