JSP技术第3章 JavaScript.docx

document.write（"

document.write（"

document.write（"
"）;

if（str1==str2）

str4="str1和str2的内容相同!

\n";

else

str4="str1和str2!

的内容不相同\n";

if（str1==str3）

str4+="str1和str3的内容相同!

";

else

str4+="str1㎝str3的内容不相同!

";

functionmyFunction（）

{

alert（str4）;

}

//-->

在浏览器中显示的结果如下：

程序说明：

该程序中首先声明了三个变量并符以初值，在if语句中使用“==”对字符串的内容进行比较。

点击【字符串】比较按钮可以看到图中所示的对话框。

4．null

JavaScript提供关键字“null”表示没有任何值得情况

5．不确定值

JavaScript语言还具有一个特殊的值“不确定值”，用来表示已经创建却没有初值的变量。

对于数值，不确定值为NaN；对于字符串，不确定值为“undefined”；对于逻辑值，不确定值为“false”。

3.2.3变量

变量主要用来存取数据，与C++、Java不同，JavaScript是弱类型语言，即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。

因此，JavaScript变量的使用变得十分简单。

1．变量的定义

JavaScript变量的定义与其它语言非常相似，在定义变量时需要注意以下几点：

●变量名是以字母或下划线开头的任意数值、拉丁字母和下划线的组合。

●变量名必须在一行之内

●变量名是区分大小写的

●不能与保留字重名

2．变量的类型

在JavaScript中，无论变量的种类，都用var语句声明变量，使用“=”进行符值，如：

vars;

var_ab,f1;

s=“JavaScript”;

_ab=123;

f1=true

在JavaScript中，使用var语句声明变量并不是必须的，变量可以不作声明，而在使用时由解释器根据数据的类型来确变量的类型，如：

count=100;

buffer=“thisastring”;

rate=0.158;

上面的几个变量没有预先声明，但它们的使用也是合法的。

但是在使用前对变量进行声明是良好的编程习惯，这样做可以增强程序的可读性。

3．变量的声明及作用域

JavaScript的变量也有全局变量和局部变量之分。

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

在JavaScript中，var语句可以限定变量的范围：

在函数内部用var声明的变量是局部变量，在函数内部无var声明或在函数外部声明的变量是全局变量。

3.2.4运算符

Javascript语言定义了大量的操作符，形式上与C++语言非常相似。

JavaScript语言的操作符包括四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符等。

下表按照优先级有高到低的次序列举了这些操作符。

操作符

操作符名称

结合次序

示例

.

对象属性访问符

从左往右

Window.open（）

[]

数组指针

从左往右

a[1]

（）

括号

从左往右

（x+y）*z

++

前后增量

从右往左

x++,++x

--

前后减量

从右往左

x--,--x

-

取负

从右往左

-x

-

位运算符，按位取反

从右往左

-x

!

逻辑非

从右往左

!

x

*

乘法运算

从左往右

x*y

/

除法运算

从左往右

x/y

%

取模运算

从左往右

x%y

+

加法运算

从左往右

x+y

-

减法运算

从左往右

x-y

+

字符串连接

从左往右

str1+str2

<<

左移位

从左往右

x<

>>

算术右移位

从左往右

x>>n

>>>

逻辑右移位

从左往右

x>>>n

<,<=

小于、小于等于

从左往右

x

>,>=

大于、大于等于

从左往右

x>=yx>y

==

等于

从左往右

x==y

!

=

不等于

从左往右

x!

=y

===

同一性

从左往右

x===y

!

===

不同一性

从左往右

x!

===y

&

位逻辑与

从左往右

x&y

^

位逻辑异或

从左往右

x^y

|

位逻辑或

从左往右

x|y

&&

逻辑与

从左往右

x&&y

||

逻辑或

从左往右

x||y

?

:

条件

从右往左

c?

x:

y

=

符值

从右往左

x=y

*=,/=,%=,+=,-=,<<=,>>=,>>>=,&=,^=,|=

赋值、复合运算

从右往左

x*=y,x/=y,x%=y,x+=y,x-=y,x<<=y,x>>=y,x>>>=y,x&=y,x^=y,

3.2.5流程控制语句

JavaScript语言的流程控制语句和C++语言也非常相似。

、

1．条件语句

在条件语句中，当满足某些条件时执行一些代码，在满足另外某种条件时执行另外一些代码，条件语句有如下两种：

if…else语句和swith语句。

2．循环语句

循环语句用于重复的执行某些代码，直到循环终止条件满足，否则将一直执行下去。

在JavaScript中常用的循环语句有如下几种：

for语句、while语句以及do…while语句。

3．break和continue语句

使用break语句可以从For或while循环中跳出，使用continue语句可以跳过循环内剩余的语句而进入下一次循环。

4.其它流程控制语句

除上述的流程控制语句外，JavaScript还提供一些特殊的流程控制语句。

for…in语句

for…in语句的一般形式如下所示：

for（变量in对象）

{

代码段

}

使用for…in语句可以列举文档对象中的所有属性。

with语句

with语句的一般形式如下所示：

with（对象）

{

代码段

}

with语句用于声明代码的缺省对象，由with语句界定的代码段中可以直接的使用with语句声明的属性和方法，而不必写出这个属性和方法的完整引用。

看下面这个显示浏览器信息的例子：

NavigatorInfo.html

--

varstr;

for（varinfoinnavigator）

{

str+="navigator."+info;

str+="="+navigator[info];

str+="
";

}

with（document）

{

open（）;

write（unescape（str））;

close（）;

}

//-->

执行的结果如下图所示。

程序说明：

在程序中利用for..in语句列举Navigator的所有属性并显示出来。

程序中open（）、write（）、close（）三个函数完整的形式应该使用document引用，因为使用了with语句声明了document对象，在此处将document省略了。

3.2.6函数

和其他语言一样，可以将相对独立的一部分功能组织成函数。

在程序中使用函数可以简便程序的开发，增强程序的可读性和可维护性。

JavaScript语言另外一个重要的用途就是与事件驱动相关联，可以作为事件驱动的结果而调用，这是和其他语言不同的。

JavaScript中函数的语法如下：

function函数名（参数列表）

{

函数体;.

Return表达式;

}

JavaScrip还定义了一些全局函数，用户无需定义即可使用，下面介绍几个常用的函数：

●escape（string）：

使用ISOLatin-1字符集对字符串进行编码，所有空格、标点符号、等非ASCII字符都编码改为十六进制的"%XX"的形式。

●eval（string）：

执行其中的字符串，如果这个字符串时一个表达式，则进行运算；如果是JavaScript代码，则执行这段代码。

●isNaN（testValue）：

判断一个值是否是数值类型。

●Number（object）：

将一个对象转化为数值。

●parseFloat（string）：

将一个字符串转化为浮点数。

●parseInt（sting）：

将一个字符串转化为整数。

●String（object）：

将一个对象转化为字符串。

●Unescape（string）：

对字符串进行解码，将含有特殊值的16进制编码转换为ASCII字符串。

3.3JavaScript中的事件

在Javascript中通过时间完成用户与Web页面之间的交互，当窗口载入载出或用户进行单击按钮等操作时都可以产生一个事件。

浏览器监听事件，并在事件发生时进行相应的事件处理工作。

在本节中将讲述一些常用的事件处理编程方法。

3.3.1鼠标事件

与鼠标相关的事件很多，在这里将介绍几个常见的鼠标事件的编程实例。

1．处理Click事件

Click事件在JavaScript中十分常见，当用户单击按钮、提交按钮、单选按钮、复选框、链接、客户机图形映射区等HTML元素时都会产生此事件。

下面通过一个简单的例子了解Click事件的使用。

例calculator.html

.buttonStyle1{HEIGHT:

25px;WIDTH:

25px}

.buttonStyle2{HEIGHT:

25px;WIDTH:

60px;FONT:

12}

--

varexpStr="";//保存表达式

//保存用户点击的按钮的值

functioninput（value）

{

expStr+=value;

document.calForm.exp.value=expStr;

}

//如果用户点击了CE按钮，将重置表达式

functionresetExp（）

{

expStr="";

document.calForm.exp.value="";

}

//如果用户单击了“=”按钮，将计算表达式的值

functioncalc（）

{

document.calForm.exp.value=eval（expStr）;

expStr=document.calForm.exp.value

}

//如果用户点击了“Backscpace”按钮，将从表达式中删除一个字符

functionbackSpaceExp（）

{

expStr=expStr.substring（0,expStr.length-1）;

document.calForm.exp.value=expStr;

}

//-->