前端基础（8）：javascript 基础语法（2）--实例与显示

2018年2月4日

【引言】学习springmvc时，遇到了Ajax异步处理，终究还是接触到JQuery和Json，于是回忆一下JavaScript（这门世界最流行的脚本语言）

【回顾】

1、test1-文本

1. <script language="JavaScript">  
2.     document.write("Hello World!!!");  
3. </script>  

2、test2-弹窗

1. <a href="JavaScript:alert('Hello World!!!')">请单击</a>  
2.   
3. <a href="#" onclick="alert('Hello World!!!')">请单击</a>  
4.   
5. <a href="JavaScript://" onclick="alert('Hello World!!!')">请单击</a>  

3、test3-with关键字用法 --简化代码用

1. 开域语句,表示在with语句中的任何表达式的所属对象或者是类都由with后紧跟的变量所代表  
2. 功能：为一段程序建立默认对象。简化代码<br>   
3. <br>格式：  
4. <br>with (<对象>){  
5. <br>　　<语句组>  
6. <br>｝  
7.   
8. <Script>  
9. with (document) {  
10.     write ("<br><Li>限时抢购物品：");  
11.     write ("<Li>ViewSonic 17\" 显示器。");  
12.     write ("<Li>EPSON 打印机。");  
13. }  
14. document.write ("<br>---------------");  
15. document.write ("<Li>限时抢购物品：");  
16. document.write ("<Li>ViewSonic 17\" 显示器。");  
17. document.write ("<Li>EPSON 打印机。");  
18. </Script>  

4、test4-变量声明，总是var 开头

1. <br>整数：由正负号、数字构成，八进制、十进制、十六进制；   
2. <br>浮点数：由正负号、数字和小数点构成，常规记数法、科学记数法；   
3. <br>逻辑值：true、false   
4. <br>字符串值：单引号、双引号   
5. <br>空值：null   
6. <br>未定义值：根本不存在的对象、已定义但没有赋值的量；   
7. <br>  
8. <br>  
9. <script language="JavaScript">  
10. var stdId;   
11. var total=3721;   
12. var notNull=true;   
13. var name="李小龙",sex="先生";   
14.   
15. var i=j=0;    
16.   
17. var hobby=["听音乐","看电影"];  
18. hobby[2]="123";  
19. var test;  
20. stdId = 2004007;  
21. document.write("变量stdId="+stdId+"<br>");  
22. document.write("变量i="+i+"<br>");  
23. document.write("变量j="+j+"<br>");  
24. document.write("变量name="+name+"<br>");  
25. document.write("变量sex="+sex+"<br>");  
26. document.write("变量notNull="+notNull+"<br>");  
27.   
28. document.write("变量hobby="+hobby+"<br>");  
29. document.write("变量hobby[0]="+hobby[0]+"<br>");  
30. document.write("变量hobby[1]="+hobby[1]+"<br>");  
31. document.write("变量hobby[2]="+hobby[2]+"<br>");  
32. document.write("变量hobby[3]="+hobby[3]+"<br>");  
33. document.write("未赋值的变量test="+test+"<br>");  
34. document.write("不存在的数值(0.0/0.0)="+(0.0/0.0)+"<br>");  
35.   
36. var t1=1.7976931348623157E+10308  
37. document.write("正数超出范围的值"+t1)  
38.   
39. document.write("<br />")  
40.   
41. var t2=-1.7976931348623157E+10308  
42. document.write("负数超出范围的值"+t2)  
43. </script>   

5、全局变量声明

1. <Script>  
2. var langJS = "JavaScript"; //langJS是全局变量  
3. test();   
4. function test() {  
5.     var langVBS = "VBScript"; //langVBS是局部变量  
6.     document.write("<LI>" + langJS);  
7.     document.write("<LI>" + langVBS);   
8. }  
9. document.write("<LI>" + langJS);  
10. document.write("<LI>" + langVBS);  
11.   
12. </Script>  

6、运算符号和加减乘除

1. <script language="JavaScript">  
2. var x = 11;   
3. var y = 5;  
4.   
5. with (document) {  
6.     write("x = 11, y = 5");  
7.     write("<LI>x + y 是 ", x + y);  
8.     write("<LI>x - y 是 ", x - y);  
9.     write("<LI>x * y 是 ", x * y);  
10.     write("<LI>x / y 是 ", x / y);  
11.     write("<LI>x % y 是 ", x % y);  
12.     write("<LI>++ x 是 ", ++ x);  
13.     write("<LI>-- y 是 ", -- y);  
14.     write("<LI>x 是 ", x);  
15.     write("<LI>y 是 ", y);  
16.     write("<LI>x-- 是 ", x--);  
17.     write("<LI>y-- 是 ", y--);  
18. }  
19. </script>  

7、++运算

1. <Script>  
2. var x = y = 3;   
3.   
4.   
5. with (document) {  
6.     write("y++=",(y++),"<br>");  
7.     write("++y=",(++y),"<br>");  
8.     write("x = 3, y = 5 <br>");  
9.     write("若x = y++ 运算之后：");  
10.     x = y++;//y→x，y+1→y  
11.     write("x 是 ", x, "; y 是 ", y, "<br>");  
12.     write("再作x = ++y 运算：");  
13.     x = ++y;//y+1→x，y+1→y  
14.     write("x 是 ", x, "; y 是 ", y);  
15. }  
16. </Script>  

8、逻辑运算符且

1. &&　　||　　!   
2.   
3. 例１：  
4. <Script>  
5. var t = true;  
6. var f = false;  
7.   
8. with(document) {  
9. write("<OL><LI>true && true 的结果是 ", t && t);  
10. write("<LI>true && false 的结果是 ", t && f);  
11. write("<LI>false && true 的结果是 ", f && t);  
12. write("<LI>false && false 的结果是 ", f && f);  
13. write("<LI>true && (1==1) 的结果是 ", t && (1==1));  
14. write("<LI>false && 'A' 的结果是 ", f && 'A');  
15. write("<LI>'A' && false 的结果是 ", 'A' && f);  
16. write("<LI>true && 'A' 的结果是 ", t && 'A');  
17. write("<LI>'A' && true 的结果是 ", 'A' && t);  
18. write("<LI>'A' && 'B' 的结果是 ", 'A' && 'B');  
19. write("<LI>1 && 1 的结果是 ", 1 && 1);  
20. write("<LI>1 && 0 的结果是 ", 1 && 0);  
21. write("<LI>true && 0 的结果是 ", true && 0);  
22. write("<LI>true && 1 的结果是 ", true && 1);  
23. write("<LI>true && '0' 的结果是 ", true && '0');  
24.     //&&：有一个不是逻辑值，只要第一个操作数的值为flase，则返回第一个操作数的值flase，否则，返回第二个操作数的值  
25. }  
26. </Script>  

9、逻辑运算符 或

1. <Script>  
2. var t = true;  
3. var f = false;  
4.   
5. with(document) {  
6. write("<OL><LI>true || true 的结果是 ", t || t);  
7. write("<LI>true || false 的结果是 ", t || f);  
8. write("<LI>false || true 的结果是 ", f || t);  
9. write("<LI>false || false 的结果是 ", f || f);  
10. write("<LI>true || (1==1) 的结果是 ", t || (1==1));  
11. write("<LI>false || 'A' 的结果是 ", f || 'A');  
12. write("<LI>'A' || false 的结果是 ", 'A' || f);  
13. write("<LI>true || 'A' 的结果是 ", t || 'A');  
14. write("<LI>'A' || true 的结果是 ", 'A' || t);  
15. write("<LI>'A' || 'B' 的结果是 ", 'A' || 'B');  
16. write("<LI>1 || 1 的结果是 ", 1 || 1);  
17. write("<LI>1 || 0 的结果是 ", 1 || 0);  
18. write("<LI>true || 0 的结果是 ", true || 0);  
19. write("<LI>true || 1 的结果是 ", true || 1);  
20. write("<LI>true || '0' 的结果是 ", true || '0');  
21.     //||：有一个不是逻辑值，只要第一个操作数为的值true、字符或非零的数字，则返回第一个操作数的值，否则，返回第二个操作数的值  
22. }  
23. </Script>  

10、逻辑运算符 取反

1. <Script>  
2. with(document) {  
3.     write("<LI>!true 的结果是 ", !true);  
4.     write("<LI>!false 的结果是 ", !false);  
5.     write("<LI>!'A' 的结果是 ", !'A');  
6.     write("<LI>!0 的结果是 ", !0);  
7.     write("<LI>!1 的结果是 ", !1);  
8.     write("<LI>!2 的结果是 ", !2);  
9.     write("<LI>!'0' 的结果是 ", !'0');  
10.     write("<LI>!'1' 的结果是 ", !'1');  
11.     write("<LI>!-1 的结果是 ", !-1);  
12. }  
13. </Script>  

11、逻辑运算优先级

12、this关键字 this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象

1. <Script>  
2. function validate(obj) {  
3.     alert("你输入的值是："+ obj.value);  
4. } </Script>  
5. 请输入任意字符：<BR>  
6. <INPUT TYPE="text" onKeyup="validate(this)">  
7. <BR>  
8. 当按钮松开时执行脚本 长按不会触发  

13、条件运算符（三目运算符）

1. <Script>  
2. //forms 集合可返回对文档中所有 Form 对象的引用。  
3. function showSex() {  
4. onOroff = document.forms[0].sex[0].checked  
5. status = (onOroff)? "帅哥" : "美女"  
6. alert("Hello! " + status)  
7. }  
8. </Script>   
9. 请输入你的性别：  
10. <FORM >  
11. <INPUT TYPE=radio NAME=sex onClick=showSex()>男生  
12. <INPUT TYPE=radio NAME=sex onClick=showSex()>女生  
13. </FORM>  

14、注释语句

1. <Script>  
2. //单行注释   
3. /*  
4.   多行注释  
5.           */  
6.   
7. //例：  
8. /***************************************  
9. *             源 码 之 家               *  
10. *        http://www.mycodes.net         *  
11. *      下载:http://www.mycodes.net      *  
12. *     论坛http://www.mycodes.net/bbs    *  
13. *****************************************/  
14. </Script>  

15、if.......else......

1. <Script>   
2. var now = new Date();  
3. var hour = now.getHours();  
4.   
5. document.write(now);  
6. document.write("<br>");  
7. if (6 < hour && hour < 18)  
8.     document.write ("现在"+hour+"点是白天");  
9. else  
10.     document.write ("现在"+hour+"点是晚上");  
11. </Script>  

16、while语句

1. <Script>   
2. var i = 5;  
3.   
4. while ( i > 0 ) {  
5.     document.write("i = " ,i ,"<BR>");  
6.     i--;  
7. }   
8. </Script>  

17、do.....while语句

1. <Script>   
2. var i = 5;  
3.   
4. do {  
5.     document.write("i = " ,i ,"<BR>");  
6.     i++;  
7. } while ( i < 10 )   
8. </Script>  

18、for循环语句

1. <Script>   
2. for ( var i = 5; i > 0; i-- ) {  
3.     document.write("i = " ,i ,"<BR>");  
4. }   
5. </Script>  

19、if.......else.....if

1. <Script>   
2. var now = new Date();  
3. var day = now.getDay();  
4. var dayName;  
5.   
6. if (day == 0) dayName = "星期日";  
7. else if (day == 1) dayName = "星期一";  
8. else if (day == 2) dayName = "星期二";   
9. else if (day == 3) dayName = "星期三";  
10. else if (day == 4) dayName = "星期四";   
11. else if (day == 5) dayName = "星期五";  
12. else dayName = "星期六";   
13.   
14. document.write ("今天是快乐的", dayName);  
15. </Script>  

20、for in（一）用法  遍历一个数组的所有子集

1. <html>  
2. <body>  
3.   
4. <script type="text/javascript">  
5. var x  
6. var mycars = new Array()  
7. mycars[0] = "Saab"  
8. mycars[1] = "Volvo"  
9. mycars[2] = "BMW"  
10.   
11. for (x in mycars)  
12. {  
13. document.write(mycars[x] + "<br />")  
14. }  
15. </script>  
16.   
17. </body>  
18. </html>  

21、for in（二）用法 遍历一个对象的所有属性

1. <br>格式：  
2. <br>  
3. <br>for ( 变量 in 对象 ){  
4. <br>    <语句组>  
5. <br>}   
6. <br>  
7. <br>例：  
8. <br>  
9. <Script>  
10. function member(name, sex) {//构造函数member  
11.     this.name = name;  
12.     this.sex = sex;  
13. }  
14.   
15. function showProperty(obj, objString) {  
16. var str = "";  
17. for (var i in obj)  
18.     str += objString + "." + i + " = " + obj[i] + "<BR>";  
19.  return str;  
20. }  
21.   
22. papa = new member("杨宏文", "男生");//建立对象实例papa  
23. document.write(showProperty(papa, "papa"))   
24. </Script>