JavaScript语言编程

  1. 云栖社区>
  2. 博客>
  3. 正文

JavaScript语言编程

xiaoqiu0817 2013-10-30 23:11:00 浏览1067
展开阅读全文

 JavaScript

  --2013103023: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循环,具体语法如下。

1if语句的语法结构

if语句的语法结构如下:

1. if (条件表达式A) {  

2. //条件表达式Atrue,所执行的代码块  

3. } else if(条件表达式)B {  

4.     //条件表达式Btrue,所执行的代码块  

5. } else {  

6.     // 条件表达式A和条件表达式B都为false,所执行的代码块  

7. }  

2switch语句的语法结构

switch语句的语法结构如下:

1. switch (表达式) {  

2.    case 1 :  

3.        //表达式与值1匹配时,所执行的代码块  

4.         break;  

5.    case 2 :  

6.        //表达式与值2匹配时,所执行的代码块  

7.         break;  

8.    default :  

9.        //所有case值都与表达式不匹配时,所执行的代码块  

10. }  

3for语句的语法结构

for语句的语法结构如下:

1. for (初始化语句循环判断条件循环执行语句) {  

2.        //循环体   

3. }  

4while语句的语法结构

while语句的语法结构如下:

1. while (循环判断条件) {  

2. //循环体     

3. }  

5dowhile语句的语法结构

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("现在演示alertconfirmprompt方法");  

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

网友评论

登录后评论
0/500
评论
xiaoqiu0817
+ 关注