释放双眼，带上耳机，听听看~！
JavaScript也是一种编程语言。并不是Java的分支哦。
可以直接在浏览器中运行的编程语言。
JavaScript 的历史故事：
1、JavaScript语言与名称的由来（Netscape，Sun Java）
最开始是叫LiveScript的~有一个小故事，有兴趣的朋友可以去百度一下。
2、微软的Explorer和JScript
JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1.交互性（它可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1.JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2.JS是基于对象的(对象都做好了的)，Java是面向对象的(自己写对象的)。
3.JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4.JS是弱类型，Java是强类型。
JavaScript与Html的结合方式：
想要将其他代码融入到Html中，都是以标签的形式。
2
3
4
5
6
7
8
22.当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。
3（方便后期维护，扩展）
4注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
5例：<script src=”test.js” type=”text/javascript”></script>
6注：规范中script标签早期有一个属性language
7（因为早期认为可能有多种脚本语言，然而到现在，还是JS一家独大~所以。）,而现在使用type属性。
8
演示：
2
3
4
5
6
7
8
9
10
11
12
2 <head>
3 <title>javascript语言演示</title>
4 </head>
5 <body>
6 <script type="text/javascript">
7 alert("hello world!")
8 </script>
9 </body>
10</html>
11
12
写法一：
2
3
4
5
2 alert("hello world!")
3 </script>
4 这一句放哪里都可以的。别放html标签外就可以了。
5
写法二：
2
3
2 </script>
3
不可以嵌套用！但是可以有很多个script 标签(但是注意顺序啊)
2
3
4
5
2 <script type="text/javascript" src="a.js">
3 alert("hello world!222");//无效代码，被上面的导入方式覆盖了。
4 </script>
5
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1.变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。
例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5 如果两条语句写在同一行，就需要分号隔开。
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2 <head>
3 <title>javascript语法 演示</title>
4 </head>
5
6 <script type="text/javascript">
7 //1标识符,关键字,分隔符---几乎和Java一样
8
9 //2注释：只支持 //单行注释 和 /* 多行注释 */
10
11 //3变量（弱类型）, var（全部用这个定义,只有这个变量）
12 //所有的变量都是用var来声明---本质上就是java当中的Object类型
13
14 var x = 3;
15 var y = "abc";
16 alert(x+","+y);//弹出: 3,acb
17
18 x="xyz";
19 alert(x); //弹出：xyz
20
21 x=true;
22 alert(x); //弹出：true
23
24 x=true+1;//和c一样，布尔类型有0和非0(1)的概念
25 alert(x); //弹出：2
26
27 a=3.14;
28 alert(a);// 因为浏览器有兼容性，所以一个变量不声明类型也可以直接对其赋值，但不要去读
29 //因为是弱类型，写不写都是var
30 //弹出：3.14
31
32 //aa没有声明也没有赋值却直接读取了。
33 //alert(aa);//出错的。没有什么弹窗。也没有提示！
34
35 alert( typeof(a) ); //弹出：number
36 // typeof(a) 返回a的类型
37
38 a=3;
39 alert( typeof(a) ); //弹出：number
40
41 a=3.156441564165564616541564156;
42 alert(a);//弹出：3.1564415641655645
43 alert( typeof(a) );//弹出：number
44
45 a=3156441564165564616541564156;
46 alert(a);//弹出：3156441564165565e+27
47 alert( typeof(a) );//弹出：number
48
49 a='a';
50 //JS当中，单引号和双引号是一样的，对应的变量都是字符串
51 //也就是说JS中没有字符类型---包含在字符串当中了。字符串只有一个字符时~
52
53 //不用分号
54 var m=1
55 var n=2
56 alert(m+n);//弹出：3
57 //由于浏览器有兼容性，一条语句的末尾不加分号也可以正常执行。
58 //但这样写不规范，建议还是加上。
59
60 //var mm=1 var nn=2;
61 //alert(mm+nn);//直接挂了。
62 //另外，同一行的多条语句之间的分号不能省，否则不能正常执行。
63 </script>
64
65 <script type="text/javascript">
66 //4 基本数据类型
67 alert( typeof("aaaa") );//弹出：string
68 //注意string是小写的
69 alert(typeof('0') );//弹出：string
70
71 alert( typeof(false) );//弹出：boolean
72
73 alert( typeof(100) );//弹出：number
74 alert( typeof(1.23) );//弹出number
75
76 //判断是哪种类型
77 alert( typeof('0')=="string" );//弹出：true
78 alert( typeof('0')=="String" );//（大小写敏感）弹出：false
79 //其他类型判断类似
80
81 alert( typeof(x) );//一样可以。前面片段中，在这里仍然是有效的(所以说。注意顺序)
82 alert( typeof(X) );//大小写敏感的！（没定义）弹出：undefined
83
84 //使用单引号和双引号效果是一样的
85 alert( typeof(x)=='number');//弹出：true
86 </script>
87
88 <body>
89 </body>
90</html>
91
92
2.运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1，var x = 3120/1000*1000; x = 3120;而不是3000。
2，var x = 2.4+3.6 ; x = 6;而不是6.0
3，var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;
加号对于字符串是连接符
4，&& || 是逻辑运算符 & | 是位运算符。
5，也支持三元运算符
6，特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
var x = 3;
var y = “123”;
var z = false;
typeof(x); //number
typeof(y); //string
typeof(z); //boolean
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2 //5 运算符：算术、赋值、比较、位运算、三元运算
3
4 //5.1算术运算
5 var a = 3710;
6 alert("a="+a/1000);//a=3.71
7 alert("a="+a/1000*1000);//a=3710
8 var b = 2.3;
9 var c = 5.7;
10 alert( b+c );// 8
11 alert( 23+11 ); //34
12
13 alert("23"+11);//2311---string---加号为字符串连接
14 alert("23"-11);//12
15 //字符串遇到减号自动会转换成数值型进行运算
16 alert(false+1);//1 false是0
17 //true 和数值进行运算时，true为1，false为0
18
19 alert(100%3);//1
20 alert(100%-3);//1
21 alert(-100%3);//-1 如果有负数，结果和前面那个数同符号-和Java一样的
22
23 //5.2 赋值运算：= += -= *= /= %=
24 var n=3,m;
25 m=n++;//用法同Java
26 alert("n="+n+",m="+m);//n=4,m=3
27
28 var n=3,m;//JS中变量可以声明几次--和Java不同
29 m=++n;
30 alert("n="+n+",m="+m);//n=4,m=4
31
32 var n;
33 alert(n);//4---这里没有对该变量重新赋值，所以用的还是前面n的值(内存还是同一片)
34
35 var i=3;
36 i+=3;//其他的类似 -= *= /= %=
37 alert("i="+i);//i=6
38
39 //5.3 比较运算符---和Java类似
40 var j=10;
41 alert(j>5);//true
42 //其他如：>= <= > < == != 类似
43
44 //5.4 逻辑运算符 && || !
45 var k=4;
46 alert(k>3 && k<10);//true
47 alert( !(k>3) ); //false
48 alert( !k );//false---和C一样
49
50 //5.5 位运算符 & | ^ >> << >>>(无符号右移)---和Java一样
51 var c = 6;//6：110
52 alert( c&3 );//3：011
53 //结果是：010 弹出：2
54
55 alert( c^100^100 );//结果还是c -- 6
56 alert(c>>>1);//3
57
58 //5.6 三元运算符（问号表达式）
59 alert( 3>0?100:300 );//100
60
61 var xxyy;
62 alert(xxyy);//undefined---如果一个变量声明后没有赋值，就是这个
63
64 alert(xxyy==undefined);//这里不要写成字符串的形式，true
65 alert(xxyy=="undefined");//false
66 //这个undefined代表和true和false等一样的，是一个值，所以不要用引号
67
68
69 </script>
70
3.语句(与Java语句格式相同)
1.判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2.选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
2 <head>
3 <title>javascript语法演示</title>
4 </head>
5
6 <script type="text/javascript">
7 //1 if语句
8 var x=3;
9 if(x>0){
10 alert("yes");//结果yes
11 }else{
12 alert("no");
13 }
14
15 if(x-4){//和C一样非0的概念，不是0的都是true
16 alert("yes2");//结果yes2
17 }else{
18 alert("no2");
19 }
20
21 if(x=4){//一个等于号是赋值，结果是4---非零，即是true
22 alert("yes3");//yes3
23 }else{
24 alert("no3");
25 }
26
27 if(x=0){
28 alert("yes3");
29 }else{
30 alert("no3");//no3
31 }
32 //赋值是什么，该值同时也作为整个表达式的值
33
34 //建议，如果是判断相等，写成如下方式
35 if(4==x){//把数字放在前面，可以避免一个等于号的bug
36 }
37
38 //逗号表达式--以最后一个逗号后的结果为真正的值
39 var b =(3,4+5);
40 alert(b);//9
41
42 var c = 5;
43 if(c>1){
44 alert("a");//a
45 }else if(c>2){
46 alert("b");
47 }else if(c>3){
48 alert("c");
49 }else{
50 alert("d");
51 }
52 </script>
53
54 <script type="text/javascript">
55 //Java---switch表达式支持的类型：byte,int等整数，char
56 //Java1.7之后 支持字符串String
57
58 //JavaScript语言：支持所有类型，即所有类型的数据都可以用于选择
59 var x = "abc";
60 switch(x){
61 case "aa":
62 alert("a");break;
63 case "abc":
64 alert("b");
65 default:
66 alert("c");
67 }
68 //弹出：b c
69
70 switch(x){
71 default:
72 alert("c");
73 case "aa":
74 alert("a");break;
75 case "abc":
76 alert("b");
77 }
78 //弹出：b
79
80 x="x";
81 switch(x){//如果没有匹配上
82 default:
83 alert("c");//这里运行完，还会运行后面的
84 case "aa":
85 alert("a");break;
86 case "abc":
87 alert("b");
88 }
89 //弹出：c a
90
91 </script>
92
93 <body>
94 </body>
95</html>
96
97
3.循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2 <head>
3 <title>javascript语法演示</title>
4
5 <link rel="stylesheet" href="table.css"/>
6 </head>
7 <body>
8
9 <h3>
10 湖南城市学院
11 </h3>
12 <script type="text/javascript">
13 //循环：for while do-while
14 var sum=0;
15 for(var i=1;i<=100;i++){
16 sum+=i;
17 }
18 document.write("sum="+sum);//直接显示在网页相对应位置！！！
19 //sum=5050
20
21 var x=1;
22 sum=0;
23 while(x<=100){
24 sum+=x;
25 x++;
26 }
27 document.write("<br/><font color=\"#ff0000\" > sum2="+sum+"</font><br/>");
28 //写入了换行和font color=\"#ff0000\" color='#ff0000' --单引号也可以的
29
30 </script>
31
32 <br/>
33 <a href="http://baidu.com"> 百度一下 </a>
34 <br/>
35 <hr>
36
37 <script type="text/javascript">
38 //转移语句：break,continue,return
39
40 for(var x=0;x<3;x++){
41 for(var y=0;y<4;y++){
42 document.write("x="+x+" ");
43 break;
44 }
45 document.write("<br/>");
46 }
47 document.write("<hr/>");
48 a:for(var x=0;x<3;x++){
49 for(var y=0;y<4;y++){
50 document.write("x="+x+" ");
51 break a;
52 }
53 document.write("<br/>");
54 }
55 </script>
56 <hr/>
57 <h2>九九乘法表</h2>
58 <script type="text/javascript">
59 for(var x=1;x<10;x++){
60 for(var y=1;y<=x;y++){
61 document.write(x+"*"+y+"="+x*y+" ");
62 }
63 document.write("<br/>");
64 }
65 </script>
66
67 <h2>九九乘法表2</h2>
68 <script type="text/javascript">
69 document.write("<table>");
70 for(var x=1;x<10;x++){
71 document.write("<tr>");
72 for(var y=1;y<=x;y++){
73 document.write("<td>"+x+"*"+y+"="+x*y+"</td>");
74 }
75 document.write("</tr>");
76 }
77 document.write("</table>");
78 </script>
79
80 </body>
81</html>
82
83
table.css
2
3
4
5
6
7
2 width: 600px;
3}
4table td{
5 border: #f00 solid 1px;
6}
7
