0°

JavaScript—网络编程(1)-介绍、变量、运算符与语句

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中,都是以标签的形式。


1
2
3
4
5
6
7
8
11.JS代码存放在标签对<script> js code...</script>中。
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

演示:


1
2
3
4
5
6
7
8
9
10
11
12
1<html>
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

写法一:


1
2
3
4
5
1    <script type="text/javascript">
2        alert("hello world!")
3    </script>
4    这一句放哪里都可以的。别放html标签外就可以了。
5

写法二:


1
2
3
1<script type="text/javascript" src="a.js">
2    </script>
3

不可以嵌套用!但是可以有很多个script 标签(但是注意顺序啊)


1
2
3
4
5
1    <!-- 注意,这种写法不行--包含在标签内的js代码无效 -->
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 如果两条语句写在同一行,就需要分号隔开。

代码演示:


1
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
1<html>
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

代码演示:


1
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
1 <script type="text/javascript">
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不同的是:因为弱类型,也可以对字符串进行选择。
代码演示:


1
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
1<html>
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语句)。
注:不同的是,没有了具体数据类型的限制,使用时要注意。

代码演示:


1
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
1<html>
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


1
2
3
4
5
6
7
1table{
2    width: 600px;
3}
4table td{
5    border: #f00 solid 1px;
6}
7
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
安全运维