Web服务应用开发（基于J2EE）JavaScript学习

综合实例

代码：



代码：





代码：






代码：

1JavaScript概述

1.1JavaScript简介

JavaScript最初由Netscape公司的Brendan Eich（布兰登﹒艾奇）设计，最初命名为LiveScript，是一种动态、弱类型、基于原型的语言。后来，Netscape与Sun公司进行合作，将LiveScript改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸如欢迎信息、数字日历、跑马灯，显示浏览器停留时间等特殊效果，提高网页的可观性。

1.2基本语法

< script type=“text/javascript [src=“外部JS文件”]>js语句块;</ script>	
< script language=“javascript [src=“外部JS文件”]>js语句块;</ script>	

1.3JavaScript放置的位置

JavaScript代码放置的位置: (1)头部;(2)主体;(3)单独的js文件;(4)直接在事件处理代码中。
JavaScript程序本身不能独立存在，它是依附于HTML代码，经浏览器解释执行。
可将JavaScript函数写成一个独立的js文件，在HTML文档中引用该js文件，引用时必须使用src属性。JavaScript文件的扩展名为*.js。格式如下：

 < script type=“text/javascript src=“外部JS文件”></ script>

注：此时在< script></ script>标记之间的所有JS语句都被忽略，不会执行。

1.3.1JavaScript放置-头部

注：JS脚本插入在头部时，通常需要定义为函数格式，格式：
function 函数名(参数1,参数2,…，参数n){函数体语句;}

1.3.2JavaScript放置-主体

注：JS脚本插入在主体时，JavaScript语句能够被立即执行。也可以定义成函数，但必须引用才能执行。

1.3.3JavaScript放置-外部JS

注：外部JS文件需要引用到HTML文件中才能被执行。编写外部JS文件时不需要使用< script></ script>标记。

1.3.4JavaScript放置-事件处理代码

注：JS代码直接放置在事件处理的代码中，可以直接运行。也可以加上“javascript:alert(‘信息’);”

2JavaScript程序

JavaScript程序由语句、语句块、函数、对象、方法、属性等构成，通过顺序、分支和循环三种基本程序控制结构来进行编程。

2.1语句和语句块

JavaScript语句是发送给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。
alert(“这是告警消息框!”); //弹出告警消息框
JavaScript语句可以分批组合起来形成语句块，语句块以左花括号“{”开始，以右花括号“}”束。
{var s=0;document.write(“S的值=”+s);} //赋值，并输出到页面

2.2代码

JavaScript代码是由若干条语句或语句块构成的执行体。

2.3消息对话框

JavaScript中的消息对话框分为告警框、确认框和提示框。

2.3.1警告框

 alert (message) ;
 注：确定按钮必须响应，否则屏蔽一切操作。告警信息为纯文本信息或字符串，不能含有HTML标记。

2.3.2确认框

  var yn=confirm (message); 
  注：确认按钮的返回值，类型为逻辑值，确定true，取消false。

2.3.3提示框

 var s1=prompt (text, defaultText);
 注：选择“确定”返回输入的值，选择“取消”返回null。

2.3.4JavaScript注释

JavaScript注释：单行注释和多行注释。
单行注释：使用“//”作为注释标记，可以单独一行或跟在代码末尾，放在同一行中，“//”后为注释内容部分。
多行注释：以“/* ”标记开始，以“*/”标记结束，两个标记之间所有的内容都是注释文本。
使用注释防止代码执行-----屏蔽某些语句行的执行。

3标识符和变量

在任何一种编程语言中，实际编程时都要使用变量以存储常用的数据。所谓变量，顾名思义，就是在运行期间其值可以通过程序改变的量。
为了便于变量的使用，实际使用时需要给变量加以命名，变量的名字则称为标识符。

3.1命名规范

3.1.1标识符

   标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下：

(1)必须使用字母或者下划线和$开始。
(2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
(3)不能使用JavaScript关键字与JavaScript保留字。
(4)不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
(5)大小写敏感，如name和Name是不同的两个标识符。

3.1.2关键字

关键字是JavaScript中已经被赋予特定意义的一些单词，关键字不能作为标识符来使用。

3.1.3保留字

   JavaScript中除了关键字以外，还有一些用于未来扩展时使用的保留字，保留字同样不能用于标识符的定义。 

3.2数据类型

数据类型是每一种计算机语言中的重要基础，JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。

3.2.1字符型

   字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、‘你好！’、“学习‘语言’”。

在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。
如：“学习不是一件‘容易”的事件’(×，交叉错误)。

3.2.2数值型

JavaScript中最基本的数据类型之一，分为整型、浮点型、内部常量以及特殊值。
整型数值即整数，例如100、-3500、0等都是整数。整数表示方法有十进制表示、八进制和十六进制的方式表示。

使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。
使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。

3.2.3Boolean（布尔型）

一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。
在实际应用中，布尔型数据常用在关系、逻辑等运算中，运算的结果往往就是true或者false。例如1<2的比较结果是true，而3==4的比较结果是false。此外，布尔型变量还常用在控制结构的语句中，如if语句等。
JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。

3.2.4其它类型

4.Null : null,表示空,不是0，0是有值的。
5.Undefined：变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:false） 。
6.Object:对象也是JS的重要组成部分，如date、window、document等，在后面介绍。
数据类型之间可以通过函数进行转换。
转换函数如下：
Nnumber(value):把值转换成数字（整型或浮点数）
String(value):把值转换成字符串
Boolean(value):把值转换成Boolean类型

3.3变量

变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。
格式： var 变量名 [=初值][,变量名[=初值] …] ；
var作用：声明或创建变量。
具有良好编程习惯的程序员应该“先声明变量再使用”。例如：

  var userName =““ ; 
  var x=0，y=2,str1=“欢迎你学习JS”;  
  var status = true; 
  var a,b,c;
  str_name=“张为民";   //向未声明的变量赋值

3.4转义字符

如果在字符串中涉及到一些特殊字符如“\”、“"”、'”等，这些字符无法直接使用，需要采用转义字符的方式。

4运算符和表达式

JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。
根据操作数的个数，将运算符分为一元运算符、二元运算符和三元运算符。
由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。
对应的表达式包括：算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。

4.1算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。

双元运算符（op1 operator op2）
单元运算符（op operator或operator op )

4.2关系运算符和表达式

注：=与= =的区别： =是赋值运算符，= =是等于运算符
= = =与! = =：===全等于，不仅判断数值，而且判断类型

4.3逻辑运算符和表达式

4.4赋值运算符和表达式

基本语法：

简单赋值运算：<变量> = <变量> operator <表达式>
复合赋值运算：<变量> operator = <表达式>

4.5位运算符和表达式

位运算符是对二进制表示的整数进行按位操作的运算符。
如果操作数是十进制或者其他进制表示的整数，运算前先将这些整数转换成32位的二进制数字，如果操作数无法转换成32位的二进制数表示，位运算的结果为NaN。
位运算符：&-按位与；~ -按位非；|-按位或；^-按位异或
其中位运算~， NOT 实质上是对数字求负，然后减 1。

4.6条件运算符和表达式

条件运算符是一个3元运算符，也就是该运算涉及3个操作数。
基本语法：

变量=布尔表达式 ? 真值表达式 : 假值表达式
var variable = boolean_expression ? true_value : false_value; 

4.7其它运算符和表达式

1.逗号运算符（,）

var x=1 , y=2 , z=3;
x=y+z , y=x+z;

2.新建对象运算符（new）

var str1=new String();var stu=new Array();

3.删除运算符（delete）：是一个一元运算符，用于删除一个对象的属性或某个数组的元素。

delete array[30],delete object.height

4.类型运算符（typeof）

 typeof(300),typeof("Welcome to You!")

5JavaScript程序控制结构

JavaScript程序设计分为两种:

面向过程程序设计、面向对象程序设计

程序控制结构：

顺序结构、分支结构、循环结构

5.1顺序结构

顺序结构是最常用的一种程序结构，是按照语句出现的顺序，从第一条语句开始一步一步逐条执行，直至最后一条语句。

5.2分支结构

在 JavaScript 中，可以使用下面几种条件语句：

5.2.1if 语句（单条件单分支）

在一个指定的条件成立时执行代码。

5.2.2if…else 语句（单条件双分支）

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

5.2.3if…else if…else 语句（多条件多分支）

使用这个语句可以选择执行若干块代码中的一个。

5.2.4switch 语句（单条件多分支）

使用这个语句可以选择执行若干块代码中的一个。

switch(变量或表达式) {
case 常量:
  { 语句a; }
    break;
case 常量:
    { 语句f; }
    break; 
   ...
default:
    { 语句n; }
}

5.3循环结构

5.3.1for

for (初始化表达式;判断表达式;循环表达式){
需循环执行的代码 }

5.3.2while

while(表达式) {需执行的代码; }

5.3.3do-while

do{需执行的代码; }while(表达式)

5.3.4for-in

for (变量 in 对象){ 执行代码； }

5.3.5循环嵌套

循环的嵌套：一个循环内又包含着另一个完整的循环结构，称为循环的嵌套。

5.3.6循环中断与继续

break作用:立即结束循环并转到循环后续语句执行。
continue作用:结束本次循环，其后的语句本次不再执行，开始下一次的循环。

6JavaScript函数

6.1全局函数

1.计算表达式的结果函数：eval（字符串表达式）

 返回值：表达式的值或“undefined”。

2.编码函数escape()：escape(字符串)

   escape() 函数将参数字符串中的特定字符(ISO-Latin-1 字符集)进行编码，并返回一个编码后的字符串。它可以对空格、标点符号及其他非ASCII字母表的字符进行编码，除了以下字符：“*  @  -  _  +  .  / ”。

3.解码函数:unescape(string)

unescape 函数返回的字符串是 ISO-Latin-1 字符集的字符。参数string包含形如“%xx”的字符的字符串，此处xx为两位十六进制数值。

4.字符型转换成数值型函数:parseFloat(string)
5.字符型转换成数值型函数:parseInt(numbestring , radix);

以“0x”开始-16进制；以“0“开始--8进制；其他--10进制。

6.判断是否是NaN()函数:isNaN(testValue);

 NaN:not a Number  （注意大小写)

6.2常用的对象函数

（1）toString(radix)。将Number型数据转换为字符型数据，并返回指定的基数的结果。其中radix范围2～36，若省略该参数，则使用基数10。
（2）toFixed(n)。将浮点数转换为固定小数点位数的数字。n是整数，设置小数的位数，如果省略了该参数，将用0代替。

（3）字符串查找和提取常用函数

6.3自定义函数

基本语法：

function functionname(argument1,argument2,..., argumentn){函数体；}

7函数变量的作用域

变量分为局部变量和全局变量。
局部变量是指在函数内部声明的变量，只在一段程序中起作用的变量；全局变量是指在函数之外声明的变量，在整个JavaScript代码中都可起作用的变量，全局变量的生命周期从声明开始，在页面关闭时结束。
局部变量和全局变量可以重名。即在函数体外声明了一个变量，在函数体内再声明一个同名的变量。在函数体内部，局部变量的优先级高于全局变量，即在函数体内，同名的全局变量被隐藏了。
需要注意到是：专用于函数体内部的变量一定要用var关键字声明，否则该变量将被定义成全局变量，如果函数体外部有同名的变量，可能导致该全局变量被修改。

8JavaScript事件概述

事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。 
事件-事件是可以被JavaScript侦测到的行为(ACTION)。

8.1事件类型

8.1.1鼠标单击

单击button、选中checkbox和radio等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table的范围；

8.1.2键盘按键

当按下按键或释放按键时；

8.1.3HTML事件

页面body被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；

8.1.4突变事件

主要指文档底层元素发生改变时触发的事件，如DomSubtreeModified(DOM子树修改)。

8.2事件句柄

事件句柄 （event handler）
事件句柄是事件发生要进行的操作。onload属性就是我们所说的事件句柄,也称为事件属性。
基本语法 ：

<标记 事件句柄=“JavaScript代码”…></标记>

8.3事件处理

当一个事件发生时，如果需要截获并处理该事件，只需要定义该事件的事件句柄所关联的事件处理代码，具体的处理方式有以下3种：
静态指定：

<HTML标记 ... 事件句柄1="事件处理程序" [事件句柄2 = "事件处理程序" ...]></HTML标记>

动态指定：

<事件主角-对象>.<事件句柄>=<事件处理程序>;

特定对象特定事件的指定：

<script type=“text/javascript”for=“对象” event=“事件”> //事件处理程序代码</ script>

事件处理程序的返回值：在JavaScript中通常事件处理程序不需要有返回值，这时浏览器会按默认方式进行处理；很多情况下需要使用返回值，来判断事件处理程序是否正确进行处理。基本语法：事件句柄=“return 函数名（参数）;"

8.4表单事件

Form表单是网页设计是一种重要的与用户进行交互的工具，它用于采集用户输入各类信息。

8.4.1获得及失去焦点事件

当表单中的元素获得焦点时会触发Focus获得事件，当表单中的元素失去焦点时会触发Blur失去焦点事件。

8.4.2提交及重置事件

表单的Submit事件触发后会将表单中的数据提交到服务器端，Reset事件触发后会将表单中的数据重置为初始值。

8.4.3改变及选择事件

8.5鼠标事件

用户在页面上操作鼠标会触发鼠标事件，如用户单击鼠标左键会触发Click事件，双击鼠标时会触发DblClick事件，移动鼠标会触发鼠标移动事件。

8.5.1鼠标单击、双击事件

8.5.2鼠标移动事件

鼠标移动事件有：MouseOver事件、MouseOut事件、MouseDown及MouseUp等事件。

8.6键盘事件

通过 window的event对象的keyCode属性来获取按键代码的值，其中：

回车：13，0～9：48～57;Aa～Zz:65～90; 

使用方法：window.event.keyCode或event.keyCode。

8.7窗口事件