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语言的方法重载特性。