JSP技术第3章 JavaScriptWord文档格式.docx
《JSP技术第3章 JavaScriptWord文档格式.docx》由会员分享，可在线阅读，更多相关《JSP技术第3章 JavaScriptWord文档格式.docx（37页珍藏版）》请在冰豆网上搜索。
Hello.html
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
>
html>
<
head>
title>
Hello.html<
/title>
scripttype="
text/javascript"
document.write（"
Hello!
ThisisthefirstJavaScriptprogram."
）;
//-->
/script>
/head>
body>
/body>
/html>
在浏览器中运行的结果如下：
在上面的HTML文档中嵌入了一段JavaScript代码，JavaScript代码段一般放置在head>
..<
/Head>
或<
Body>
...<
/Body>
之间。
若将代码段放置<
Head>
...<
在头部之间，代码段会被首先装载，文档的其余部分都可以使用，从而可使代码的功能更强大；
将代码段放置在<
之间可以实现某些部分动态地创建文档。
3.2JavaScript基本语法
3.2.1注释
JavaScript的注释与其它语言一样，在运行时会被忽略。
注释有两种：
单行注释和多行注释。
单行注释用双反斜杠“//”表示，使用“//”时从其出现开始到本行结尾都补忽略；
而多行注释是用“/*”和“*/”括起来的一行到多行文字。
使用多行注释时，程序将忽略“/*”与“*/”之间的所有文字。
3.2.2基本数据类型
JavaScript有如下几种常用的数据类型。
1．数值型
与C++、Java不同，JavaScript语言并不严格的区分整数和浮点数。
在底层JavaScript的各种数值类型都当作浮点数来处理，只是在高层上区分整数和浮点数，因而在程序中两者可以自由的转换。
在JavaScript中整数可以格式化为十进制、八进制和十六进制。
其中，八进制整数必须以0开始，十六进制必须以0x或0X开始。
JavaScript的浮点数包含小数部分，由十进制整数、小数点和小数部分组成，它还可以以指数形式表示。
此外，JavaScript语言还定义了若干数学领域常见的特殊值：
Number.MAX_VALUE（可以表示的最大数值），Number.MIN_VALUE（可以表示的最小数值），Number.POSITIVE_INFINITY（正无穷大），Number.NEGATIVE_INFINITY（负无穷大），Number.NaN（非数学字符）。
2．布尔型
布尔型比较简单，它只有连个可选值：
true（真）和false（假）。
true和false是JavaScript的两个保留字。
布尔型常用于表示判断。
3．字符串
字符串是由单引号（‘）或双引号（“）界定的零个或多个字符。
字符串内部也可以包含单引号或双引号：
如果在一对单引号之间出现双引号，则将双引号视为字符串的一部分；
如果在一对双引号之间出现单引号，则将单引号视为字符串的一部分。
如，”This’saJavaScriptString”、’Whatisthe“JavaScript”?
’都是合法的字符串。
与C++、Java类似，JavaScript也提供转义字符串，如“\f”表示换页、“\n”表示换行、“\r”表示回车、“\t”表示制表符、“\\”表示反斜杠等等。
值得注意的是，在JSP中如果需要对两个字符串进行比较需要使用equeal方法，而在JavaScript中对字符串的比较只需要使用==运算符。
StrCompare.html
HTML>
HEAD>
TITLE>
javascript中字符串的比较<
/TITLE>
/HEAD>
BODY>
FONTsize="
5"
color="
red"
/FONT>
HR>
SCRIPTlanguage="
javascript"
--
varstr1="
JavaScript"
;
varstr2="
varstr3="
Java"
LI/>
str1="
+str1）;
str2="
+str2）;
str3="
+str3）;
BR>
"
if（str1==str2）
str4="
str1和str2的内容相同!
\n"
else
str1和str2!
的内容不相同\n"
if（str1==str3）
str4+="
str1和str3的内容相同!
str1㎝str3的内容不相同!
functionmyFunction（）
{
alert（str4）;
}
//-->
/SCRIPT>
INPUTtype="
button"
value="
字符串比较"
onclick="
myFunction（）"
/BODY>
/HTML>
在浏览器中显示的结果如下：
程序说明：
该程序中首先声明了三个变量并符以初值，在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*y
/
除法运算
x/y
%
取模运算
x%y
+
加法运算
x+y
减法运算
x-y
字符串连接
str1+str2
左移位
x<
n
算术右移位
x>
逻辑右移位
<
=
小于、小于等于
yx<
=y
>
大于、大于等于
=yx>
y
==
等于
x==y
不等于
x!
===
同一性
x===y
不同一性
===y
&
位逻辑与
x&
^
位逻辑异或
x^y
|
位逻辑或
x|y
逻辑与
||
逻辑或
x||y
?
:
条件
c?
x:
符值
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
NavigatorInfomation<
ScriptLanguage="
varstr;
for（varinfoinnavigator）
str+="
navigator."
+info;
=<
I>
+navigator[info];
/I>
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
METANAME="
GENERATOR"
Content="
MicrosoftVisualStudio6.0"
用JavaScript实现网页计算器<
STYLETYPE="
text/css"
.buttonStyle1{HEIGHT:
25px;
WIDTH:
25px}
.buttonStyle2{HEIGHT:
60px;
FONT:
12}
/STYLE>
SCRIPTLanguage="
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;
CENTER>
B>
FONTcolor=redsize=6>
计算器<
/B>
/CENTER>
HR/>
FORMname="
calForm"
inputtype="
text"
name="
exp"
size=15value="
p/>
7"
button7"
class=buttonStyle1onClick="
input（this.value）"
8"
button8"
9"
button9"
-"
mulButton"
4"
button4"
button5"
6"
button6"
*"
minusButton"
1"
button1"
2"
button2"
3"
button3"
/"
addButton"
0"
button0"
input
升级会员 