第19章 JavaScript语言.docx

第19章 JavaScript语言.docx

《第19章 JavaScript语言.docx》由会员分享，可在线阅读，更多相关《第19章 JavaScript语言.docx（24页珍藏版）》请在冰豆网上搜索。

第19章JavaScript语言

19

JavaScript语言

第章

核心要点

⏹基本语法

⏹表单校验

⏹事件响应

⏹使用技巧

学习目标

通过本章学习，掌握JavaScript的基本编程思想，掌握基本的语法及应用，熟悉常用的变量定义、语法结构、事件以及在页面中的应用方式，掌握几种常用的技巧。

JavaScript是由Netscape公司开发、介于Java与HTML之间、基于对象事件驱动的编程语言。

它的开发环境简单、不需要Java编译器、直接运行在Web浏览器中。

JavaScript使得信息和用户之间不仅仅是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。

19.1JavaScript语言基础

JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言。

使用它可以与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序等。

它是通过嵌入或调入在标准的HTML语言中实现的。

具有以下几个基本特点：

1.脚本编写语言

JavaScript是一种脚本语言，它采用小程序段的方式实现编程。

像其它脚本语言一样,JavaScript同样已是一种解释性语言，它提供了一个易的开发过程。

2.基于对象的语言

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。

这意味着它能运用自己已经创建的对象。

因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3.简单性

JavaScript的简单性主要体现在：

首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计。

其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4.安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。

从而有效地防止数据的丢失。

5.动态性

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。

它对用户的反映响应，是采用以事件驱动的方式进行的。

6.跨平台性

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

从而实现了“编写一次，走遍天下”的梦想。

19.1.1语法

JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、表达式和算术运算符以及程序的基本框架结构。

JavaScript提供了四种基本的数据类型用来处理数字和文字,而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

1.基本数据类型

在JavaScript中四种基本的数据类型：

数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。

在JavaScript的基本类型中的数据可以是常量，也可以变量。

由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。

当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。

2.变量的命名

变量的主要作用是存取数据、提供存放信息的容器。

对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。

JavaScript中的变量命名同其计算机语言非常相似，这里要注意以下四点：

Ø必须是一个有效的变量，即变量以字母开头，中间可以出现数字如test1、text2等。

除下划线（－）作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其它符号。

Ø不能使用JavaScript中的关键字作为变量。

Ø在JavaScript中定义了４０多个类键字，这些关键是JavaScript内部使用的，不能作为变量的名称。

如Var、int、double、true不能作为变量的名称。

Ø在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。

3.变量的类型

定义了一个mytest变量：

varmytest;

定义了一个mytest变量,同时赋予了它的值：

Varmytest=”Thisisabook”;

在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。

例子如下。

x=100y="125"xy=Truecost=19.5

其中x整数，y为字符串，xy为布尔型，cost为实型。

在JavaScript中有全局变量和局部变量。

全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。

3.常量：

是在程序执行过程中值保持不变的变量。

4.表达式

在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又用表达式来完成，可以说表达式是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。

5.函数

通常在进行一个复杂的程序设计时，总是将所要完成的复杂功能划分为一些相对独立的部分，每部分编写一个函数，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。

然后根据需要来组合这些函数完成最终的功能。

函数的定义形式如下。

Function函数名（参数,变元）{

函数体;

Return表达式;

}

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。

那么怎样才能确定参数变量的个数呢？

在JavaScript中可通过arguments.Length来检查参数的个数。

例如：

实例19-1arguments.Length应用程序内容如下：

Functionfunction_Name（exp1,exp2,exp3,exp4）{

Number=function_Name.arguments.length;

if（Number>1）

document.wrile（exp2）;

if（Number>2）

document.write（exp3）;

if（Number>3）

document.write（exp4）;

}

6.注释

注释是在程序运行时被忽略的部分。

JavaScript注释有两种：

单行注释和多行注释。

单行注释用双反斜杠“//”表示。

当一行代码有“//”，那么，“//”后面的部分将被忽略。

而多行注释是用“/*”和“*/”括起来的一行到多行文字。

程序执行到“/*”处，将忽略以后的所有文字，直到出现“*/”为止。

19.1.2运算符

运算符完成操作的一系列符号，在JavaScript中有算术运算符，如＋、-、*、/等；有比较运算符如!

＝、＝＝等;有逻辑布尔运算符如！

（取反）、|、||;有字串运算如＋、＋＝等。

1、算术运算符

双目运算符：

+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&（按位与）、<<（左移）、>>（右移）、>>>（右移，零填充）。

单目运算符：

-（取反）、~（取补）、++（递加1）、--（递减1）。

2、比较运算符

有８个比较运算符：

<（小于）、>（大于）、<=（小于等于）、>=（大于等于）、==（等于）、!

=（不等于）。

3、布尔逻辑运算符

!

（取反）、&=（与之后赋值）、&（逻辑与）、|=（或之后赋值）、|（逻辑或）、^=（异或之后赋值）、^（逻辑异或）、?

:

（三目操作符）、||（或）、==（等于）、|=（不等于）。

其中三目操作符主要格式如：

操作数？

结果１：

结果２

若操作数的结果为真，则表述式的结果为结果１，否则为结果２。

19.1.3控制和循环语句

在任何一种语言中，程序控制流是必须的，它能使得整个程序减小混乱，使之顺利按其一定的方式执行。

下面是JavaScript常用的程序控制流结构及语句：

1.if条件语句

if（表述式）

语句段１；

......

Else

语句段２；

.....

功能：

若表达式为true，则执行语句段１；否则执行语句段２。

2.For循环语句

for（初始化；条件；增量）

语句集；

功能：

实现条件循环，当条件成立时，执行语句集，否则跳出循环体。

3.while循环

while（条件）

语句集；

该语句与For语句一样，当条件为真时，重复循环，否则退出循环。

4.break和continue语句

与C++语言相同，使用break语句使得循环从For或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。

实例19-2跑马灯程序内容如下：

varmsg="这是一个跑马灯效果的JavaScript文档";

varinterval=100;varspacelen=120;

varspace10="";varseq=0;

functionScroll（）{

len=msg.length;

window.status=msg.substring（0,seq+1）;

seq++;

if（seq>=len）{

seq=spacelen;

window.setTimeout（"Scroll2（）;",interval）;

}else

window.setTimeout（"Scroll（）;",interval）;

}

functionScroll2（）{

varout="";

for（i=1;i<=spacelen/space10.length;i++）

out+=space10;

out=out+msg;

len=out.length;

window.status=out.substring（seq,len）;

seq++;

if（seq>=len）{seq=0;};

window.setTimeout（"Scroll2（）;",interval）;

}

Scroll（）;

19.2表单校验

19.2.1客户输入的有效性校验

表单的有效性检验是JavaScript一个很有用的方面。

它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的E-mail（电子邮件）地址，然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。

另外，除此以外，对表单标签的一些修改跟其它类型的脚本是类似的。

以下的例子是一个简单的表单，如下面表单所示。

你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号，即是输入错误的内容，看看JavaScript是进行表单的有效性检验的。

实例19-3数据校验程序内容如下：

"

METHOD="POST"ENCTYPE="multipart/form-data"

onSubmit="returnformCheck（）">

--当Submit（提交）按钮被按下的时候，这个时间处理器就被触发，

它接着执行函数formCheck（），这个函数是用于检查表单中是否没有错误了。

formCheck（）函数的代码如下：

-->

functionformCheck（）{

if（document.theform.user_name.value==""）{

alert（"Pleaseputinaname."）;

returnfalse;

}

if（document.theform.email.value.indexOf（"@"）==-1

h______________________________________________________________________________________________________________________________||document.theform.email.value==""）{

alert（"Pleaseincludeaproperemailaddress."）;

returnfalse;

}

}

首先，formCheck（）函数判断是否用户名字输入为空。

如果为空，它也会警告用户并返回false值，这个表单也不会发送给服务器。

接着formCheck（）函数是判断是否Email地址输入包含一个@符号或者是空的。

如果没有包含@符号或者是空的的任何一种情况，它就会警告用户并返回false值，这样这个表单就不会发送给服务器了。

以上的任何一种错误都不会将表单发送给服务器的，直到正确填写完整个表单之后才将表单发送给服务器。

以上程序的原理实质是获得表单中各元素的值“value”，然后加上是否等于“＝＝”某些设定的内容，或者说本身固有的内容（比如EMAIL的＠）。

按此你可以加以扩充它的功能，比如完善Email的检验功能，加上判断“＠”后的邮件服务器的地址和一点“.”。

19.2.2创建可重用的校验代码

1、检查输入字符串是否为空或者全部都是空格

functionisNull（str）{//输入str

if（str==""）returntrue;

varregu="^[]+$";

varre=newRegExp（regu）;

returnre.test（str）;//返回：

如果全是空返回true,否则返回false

}

2、检查输入对象的值是否符合整数格式

functionisInteger（str）{ //str输入的字符串

varregu=/^[-]{0,1}[0-9]{1,}$/;

returnregu.test（str）;//如果通过验证返回true,否则返回false

}

3、检查输入手机号码是否正确

functioncheckMobile（s）{  //输入s字符串

varregu=/^[1][3][0-9]{9}$/;

varre=newRegExp（regu）;

if（re.test（s））{

returntrue;

}else{

returnfalse;

}//如果通过验证返回true,否则返回false

}

4、检查输入对象的值是否符合E-Mail格式

functionisEmail（str）{ //输入str的字符串

varmyReg=/^[-_A-Za-z0-9]+@（[_A-Za-z0-9]+\.）+[A-Za-z0-9]{2,3}$/;

if（myReg.test（str））returntrue;

returnfalse;

}//返回：

如果通过验证返回true,否则返回false

5、检查输入字符串是否只由英文字母和数字和下划线组成

functionisNumberOr_Letter（s）{//输入s字符串 

varregu="^[0-9a-zA-Z\_]+$";

varre=newRegExp（regu）;

if（re.test（s））{

returntrue;

}else{

returnfalse;

}//如果通过验证返回true,否则返回false

}

6、判断是否是日期

实例19-4判断日期程序内容如下：

functionisDate（date,fmt）{//输入：

date：

日期；fmt：

日期格式

if（fmt==null）fmt="yyyyMMdd";

varyIndex=fmt.indexOf（"yyyy"）;

if（yIndex==-1）returnfalse;

varyear=date.substring（yIndex,yIndex+4）;

varmIndex=fmt.indexOf（"MM"）;

if（mIndex==-1）returnfalse;

varmonth=date.substring（mIndex,mIndex+2）;

vardIndex=fmt.indexOf（"dd"）;

if（dIndex==-1）returnfalse;

varday=date.substring（dIndex,dIndex+2）;

if（!

isNumber（year）||year>"2100"||year<"1900"）

returnfalse;

if（!

isNumber（month）||month>"12"||month<"01"）

returnfalse;

if（day>getMaxDay（year,month）||day<"01"）

returnfalse;

returntrue;

}//返回：

如果通过验证返回true,否则返回false

functiongetMaxDay（year,month）{

if（month==4||month==6||month==9||month==11）

return"30";

if（month==2）

if（year%4==0&&year%100!

=0||year%400==0）

return"29";

else

return"28";

return"31";

}

19.3事件响应

19.3.1事件处理的基本概念

事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性，并易于使用的网页。

浏览器为了响应某个事件而进行的处理过程，叫做事件处理。

事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。

浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。

　事件不仅可以在用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例：

当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。

归纳起来，必需使用的事件有三大类：

Ø引起页面之间跳转的事件，主要是超连接事件。

Ø事件浏览器自己引起的事件。

Ø事件在表单内部同界面对象的交互。

19.3.2JavaScript事件处理器

1.onblur事件

当一个对象失去焦点时，blur事件被触发。

alert（‘youmustinputavalue!

’）;this.focus（）;}”>

2.onchange事件

发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。

捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。

alert（‘youmustinputavalue!

’）;this.focus（）;}”>

3.onclick事件

发生在对象被单击的时候。

单击是指鼠标停留在对象上，按下鼠标键，没有移动鼠标而放开鼠标键这一个完整的过程。

’）”>

4.onfocus事件

发生在一个对象得到焦点的时候。

onFocus=”alert（‘haha,Itisme!

’）”>

5.onload事件

发生在文档全部下载完毕的时候。

全部下载完毕意味着不但HTML文件，而且包含的图片，插件，控件，小程序等全部内容都下载完毕。

本事件是window的事件，但是在HTML中指定事件处理程序的时候，我们是把它写在标记中的。

6.onmouseout事件

发生在鼠标离开对象的时候。

参考onmouseover事件。

7.onmouseover事件

发生在鼠标进入对象范围的时候。

这个事件和onmouseout事件，再加上图片的预读，就可以做到当鼠标移到图像连接上，图像更改的效果了。

有时我们看到，在指向一个连接时，状态栏上不显示地址，而显示其它的资料，看起来这些资料是可以随时更改的。

它们是这样做出来的：

';

returntrue;"onmouseout="window.status='';returntrue;">

19.3.3出错处理

1.onerror事件处理函数

它是第一个用来协助JavaScript处理错误的机制。

页面上出现异常时，error事件便在window对象上触发。

实例19-5错误事件程序内容如下：

window.onerror = function（）{

alert（"发生错误！

"）;

}

 在上述代码中，在页面载入时尝试调用不存在的函数，此时会引发一个异常。

弹出“发生错误”的错误信息。

但是，浏览器的错误信息也显示出来了，如何在浏览器上隐藏它呢，只需onerror方法返回一个true即可。

window.onerror = function（）{

alert（“发生错误！

”）;

return true;

}

2.取出错误信息

onerror处理函数提供了三种信息来确定错误确切的性质：

 i）错误信息——对于给定错误，浏览器会显示同样的信息；

 ii）URL——在哪个文件中发生了错误；

行号——给定URL中发生错误的行号。

访问方法见如下例子：

window.onerror = function（sMessage, sUrl, sLine）{

alert（"发生错误！

\n" + sMessage + "\nURL:

" + sUrl + "\nLine Number:

" + sLine）;

return true;

}

3.处理语法错误

onerror还能处理语法错误。

但有一点必须注意，事件处理函数必须是页面中第一个出现的代码，因为如果语法错误出现在设置事件处理函数之