JavaScript
--2013年10月30日23:10:20
1 变量的定义
虽然JavaScript支持变量未经定义直接使用，但推荐进行变量定义，否则变量的生命周期难以确定。
在定义变量时，因为JavaScript为弱类型语言，所以不需要指定变量类型，只需要指定变量名称即可，也可以为变量赋初始值。定义变量时可以使用var关键字。
注意：因为JavaScript代码总是在同一网页内有效，并不能跨网页运行，所以也不需要定义类似于Java语言中的访问修饰符（public、private等）。
JavaScript变量的命名规则与Java相似，只能包含数字、字母、下画线和$符号，大小写敏感，不可以使用JavaScript的关键字和保留字。
例07_2.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. var a; //定义变量
6. var b = 3; //定义变量并赋初始值
7. var c = 'String', d = "String"; //定义多个变量
8. </script>
9. </head>
10. <body>
11. </body>
12. </html>
7.3.2 变量的类型
虽然不能在定义变量时指定变量类型，但是JavaScript会根据变量的值自动决定类型，JavaScript中常见的内置变量类型如下。
数字型：可以存储小数或整数。
布尔型：可以存储true或false。
字符串：属于引用类型，可以存储字符串。
数组：属于引用类型，存储多项数据。
如果要将字符串转换为数字类型，可以使用parseInt或parseFloat方法，如果无法转换为数字，则JavaScript会返回特殊值"NaN（Not a Number）"，如下所示：
例07_3.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. var a = 3;
6. var b = "3";
7. var c = a + b; //结果是33
8. var d = a + parseInt(b); //结果是6
9. var e = a + (b - 0); //结果是6
10. var f = parseInt('a'); //结果是NaN
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
注释与特殊符号
JavaScript语言中的注释与Java语言中的注释规则相同，支持单行注释（//）与多行注释（/*…*/），注意不能在JavaScript内部使用HTML语言中的"<!- -->"注释。在JavaScript中字符串可以使用双引号或单引号引起来，在不引起冲突的情况下可以混用，也可以使用反斜杠进行转义，如下例所示：
例07_4.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. //a的值为It's mine.
6. var a = "It's mine.";
7. //b的值为he say : "good".
8. var b = 'he say : "good".';
9. //c的值he say : "It's good".
10. var c = 'he say : "It\'s good".';
11. </script>
12. </head>
13. <body>
14. </body>
15. </html>
运算符
运算符与表达式基本与Java相同，常用的运算符如表7-1所示（优先级自上而下）。
表7-1 常用的运算符
|
运算符 |
使用格式 |
描 述 |
|
括号 |
(x)、[x] |
中括号表示数组的下标 |
|
逻辑反 |
!x |
返回与x（布尔值）相反的布尔值 |
|
自加/自减 |
x++、x-- |
x自加、自减1，与Java相同，运算后++或-- |
|
++x、--x |
x自加、自减1，与Java相同，运算前++或-- |
|
|
算术运算符 |
x*y、x/y、x%y |
乘、除、取模 |
|
x+y、x-y |
加、减 |
|
|
比较运算符 |
x<y、x<=y、 x>y、x>=y、 x==y、x!=y x===y |
x与y进行对比，并返回true或false3 其中3个等号（===）表示同时比较值和类型 |
|
逻辑运算符 |
x&&y |
x和y同为true，则返回true，否则返回false |
|
x||y |
x和y任一为true，则返回true，否则返回false |
|
|
条件运算符 |
z?x:y |
表达式z为true，返回x，否则返回y |
|
赋值运算符 |
x=y |
把y赋值给x |
|
符合运算符 |
x+=y x-=y x*=y x/=y x%=y |
x加、减、乘、除、模y，结果赋值给x |
7.4 JavaScript中的流程控制语句（1）
JavaScript语言中的流程控制语句与Java语言中几乎完全一致，分支流程可以使用if else结构或switch结构，循环流程可以使用for或while循环，具体语法如下。
1．if语句的语法结构
if语句的语法结构如下：
1. if (条件表达式A) {
2. //条件表达式A为true，所执行的代码块
3. } else if(条件表达式)B {
4. //条件表达式B为true，所执行的代码块
5. } else {
6. // 条件表达式A和条件表达式B都为false，所执行的代码块
7. }
2．switch语句的语法结构
switch语句的语法结构如下：
1. switch (表达式) {
2. case 值1 :
3. //表达式与值1匹配时，所执行的代码块
4. break;
5. case 值2 :
6. //表达式与值2匹配时，所执行的代码块
7. break;
8. default :
9. //所有case值都与表达式不匹配时，所执行的代码块
10. }
3．for语句的语法结构
for语句的语法结构如下：
1. for (初始化语句; 循环判断条件; 循环执行语句) {
2. //循环体
3. }
4．while语句的语法结构
while语句的语法结构如下：
1. while (循环判断条件) {
2. //循环体
3. }
5．do…while语句的语法结构
do…while语句的语法结构如下：
1. do {
2. //循环体
3. } while (循环判断条件);
6．综合演示
下例综合使用各种流程结构通过JavaScript动态在页面中生成一个隔行换色的HTML表格，其中用到了document.write()方法，该方法用于向HTML页面中输出内容。
例07_5.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. //rows为表格的行数，cols为表格的列数
6. var rows = 6;
7. var cols = 8;
8. document.write('<table width="100%" border="1">');
9. document.write('<caption>动态生成表格</caption>');
10. document.write('<tbody>');
11. for (var row = 0; row < rows; row++) {
12. if (row % 2 == 0) {
13. document.write('<tr bgcolor="#cccccc">');
14. } else {
15. document.write('<tr>');
16. }
17. for (var col = 0; col < cols; col++) {
18. document.write('<td>' + col + '</td>');
19. }
20. document.write('</tr>');
21. }
22. document.write('</tbody>');
23. document.write('</table>');
24. </script>
25. </head>
26. <body>
27. </body>
28. </html>
执行代码，结果如图7-2所示。
|
图7-2 代码在IE浏览器中的显示结果 |
JavaScript中的常用方法
JavaScript中提供了很多常用的方法，如上例中用到的document.write方法，现介绍3个用于与用户交互的方法，如表7-2所示。
表7-2 3个用于与用户交互的方法
|
方法名 |
作 用 |
参数与返回值 |
|
alert |
显示消息对话框 |
接收二个字符串参数，用于显示消息，无返回值 |
|
confirm |
显示确认对话框 |
接收二个字符串参数，用于显示提示 消息，返回boolean类型的值，代表用户的选择 |
|
prompt |
显示输入对话框 |
接收两个字符串参数，第一个用于显示 提示消息，第二个用于设置默认值（可省略）， 返回用户的输入（如用户取消输入返回null） |
请注意这3个方法显示的对话框都是模态对话框，即会停止当前脚本的运行直到用户关闭对话框为止，下面的例子综合使用了这3个方法
例07_6.html：
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. alert("现在演示alert、confirm与prompt方法");
6. var name = prompt("请输入您的姓名", "匿名");
7. var flag = confirm("请确认您的姓名：" + name);
8. if (flag) {
9. alert('确认无误！');
10. } else {
11. alert('确认失败');
12. }
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
执行代码，结果如图7-4所示。
|
图7-4 代码在IE浏览器中的显示结果 |
2．自定义方法
JavaScript语言中的自定义方法与Java语言有较大的不同，第一JavaScript中没有方法修饰符，所有方法都是本页面内可以访问；第二由于JavaScript是弱类型语言，所以不需要声明方法的返回值类型；第三JavaScript中的方法不支持重载，但是支持类似于Java中变长参数的特性。定义一个方法的语法如下：
1. function 方法名 ( 参数1, 参数2, … ) {
2. //函数体
3. return 返回值;
4. }
JavaScript中的方法（2）
下例演示了通过定义方法计算两个数的和：
例07_7.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function add(a, b) {
6. //如果不通过parseInt方法转换为数字，会进行字符串的连接
7. var c = parseInt(a) + parseInt(b);
8. return c;
9. }
10.
11. var a = prompt("请输入第一个数", 0);
12. var b = prompt("请输入第二个数", 0);
13. //请注意变量的作用范围
14. var c = add(a, b);
15. alert("计算结果是：" + c);
16. </script>
17. </head>
18. <body>
19. </body>
20. </html>
如果想计算不确定数目的若干个数字的和，就可以使用JavaScript中的一个特殊数组，名为arguments，这个数组用来保存调用方法时传递的所有参数，如下例所示：
例07_8.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function add() {
6. //获取arguments数组的长度
7. var length = arguments.length;
8. var c = 0;
9. for (var i = 0; i < length; i++) {
10. c += parseInt(arguments[i]);
11. }
12. return c;
13. }
14.
15. document.write("<p>无参数 = " + add());
16. document.write("<p>1 = " + add(1));
17. document.write("<p>1,3 = " + add(1,3));
18. document.write("<p>1,3,5 = " + add(1,3,5));
19. document.write("<p>1,3,5,7,9 = " + add(1,3,5,7,9));
20. </script>
21. </head>
22. <body>
23. </body>
24. </html>
执行代码，结果如图7-5所示。
|
图7-5 代码在IE浏览器中的显示结果 |
JavaScript中的方法（3）
JavaScript中函数的参数还有更灵活的运用方式，如下例所示：
例07_9.html
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. <script type="text/javascript">
5. function output(times, char, end) {
6. var s = '';
7. for (var i = 0; i < times; i++) {
8. if (char) {
9. s+=char;
10. } else {
11. s+='*';
12. }
13. }
14. document.write(s);
15. if (end) {
16. document.write(end);
17. } else {
18. document.write("<br/>");
19. }
20. }
21.
22. output(20);
23. output(20, "O");
24. output(20);
25. output(20, "H", "<hr/>");
26. output(20, '<img src="07_8.png"/>', "<hr/>");
27. </script>
28. </head>
29. <body>
30. </body>
31. </html>
执行代码，结果如图7-6所示。
|
图7-6 代码在IE浏览器中的显示结果 |
注意：因为JavaScript中方法的参数长度是可变的，所以JavaScript并不支持类似于Java语言的方法重载特性。