JavaScript


阅读数: 次   

一:介绍

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
一。介绍:

     1.JavaScript是一种专门在浏览器编译并执行的编程语言

	 2.JavaScript处理用户与浏览器之间请求问题

	 3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言


二。弱类型编程语言风格 VS  强类型编程语言风格


        1.强类型编程语言风格：认为对象行为应该受到其修饰类型严格约束。
	        Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言
			       class Student{
			          public String sname;
				      public void sayHello(){
				      System.out.print("hello world");
				  }
			       
			       }
			       Student  stu = new Student();
			       stu.sname="mike"; stu对象能够调用属性只有sname
			       stu.sayHello();   stu对象能够调用方法只有sayHello()
			       stu.sid =10;  // 在Java认为是语法错误，修饰stu对象的Student类型没有提供这个属性

        2.弱类型编程语言风格： 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定
	                        对象可以调用属性和方法
				JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

				var  stu = new Object();//stu对象相当于【阿Q】
				stu.car = "劳斯莱斯";//合法
				stu.play = function (){ return  "天天打游戏"}
				stu.play();

示例:

1
2
3
4
5
6
7
common.js:
//在JavaScript命令文件（静态资源文件），可以直接声明JavaScript命令或则JavaScript函数
//不需要声明<script>
//通知浏览器弹出一个对话框
function fun2(){
    window.alert("你愁啥");
}
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       通知浏览器将common.js文件内容加载到当前网页中
    -->
    <script type="text/javascript" src="common.js">
        /*
        *  当浏览器解析script标签时，根据src要求
        *  将common.js文件所有的内容加载到当前script
        *  标签内部
        *   function fun2(){
              window.alert("你愁啥");
               }
        */
    </script>
</head>
<body>
           <center>
                <input type="button" value="老崔" onclick="fun2()"/>

           </center>
</body>
</html>

二:JavaScript中变量声明方式:

1
2
3
4
5
6
7
8
1.命令格式:
           var 变量名;
     var 变量名 = 值;
     var 变量名1,变量名2=值；

2.注意：
         在JavaScript变量/对象，在声明不允许指定【修饰类型】
   只能通过var来进行修饰

三:JavaScript中标识符命名规则:

1
2
3
1.标识符只能由四种符号组成  英文字母，数字 , 下划线，美元符号($)
2.标识符首字母不能以"数字"开头
3.标识符不能采用JavaScript关键字 比如 var

四:JavaScript数据类型：

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
1.分类：  基本数据类型   &  高级引用数据类型

2.基本数据类型：数字类型（number）,
              字符串类型(string),
			  布尔类型(boolean)

3.数字类型（number）：JavaScript中将整数与小数合称为number类型

4.字符串类型(string)：JavaScript中字符与字符串合称为string类型
                    JavaScript字符或则字符串既可以使用''又可以使用""

5.布尔类型(boolean):  JavaScript中boolean类型的值只有true或则false

6.高级引用数据类型:
                 object类型
			     function类型

7.object类型：       JavaScript中所有通过【构造函数】生成的对象都是object类型


8.function类型：     相当于Java中（java.lang.reflect.Method）
                     JavaScript所有函数都是function类型

********** JavaScript是弱类型编程语言，根据变量赋值内容来判断变量数据类型
		  JavaScript中变量的数据类型可以根据赋值内容来进行动态改变

五:JavaScript中特殊【值】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1.undefined: JavaScript中所有变量在没有赋值时，其默认值都是undefined
             由于JavaScript根据变量的赋值来判断变量类型，此时由于变量
		    没有赋值因此JavaScript无法判断当前变量数据类型，此时返回
		    也是undefiled,因此初学者将undefined也理解为是一种数据类型
		    这种理解是错误


2.null：  JavaScript中当一个对象赋值为null时，表示对象引用了一个【空内存】
          这个空内存既不能存储数据也不能读取数据。
		  此时这个对象数据类型，在JavaScript依然认为是object类型


3.NaN:  JavaScript中当一个变量赋值为NaN，表示变量接收了一个【非法数字】（123 合法数字  abc123 非法数字）
        此时这个变量数据类型，在JavaScript依然认为number类型

4.infinity： JavaScript中当一个变量赋值为infinity，表示变量接收了一个【无穷大数字】
                  此时这个变量数据类型，在JavaScript依然认为number类型

六:JavaScript中控制语句

1
JavaScript中控制语句与Java中控制语句语法格式完全一致

七:JavaScript中函数声明方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.命令格式:
          function   函数名(形参名1，形参名2){	  
		      JavaScript命令行
		      JavaScript命令行
		      return  将函数运行结果进行返回	  
		  }

2.注意:
          1)JavaScript中，所有函数在声明时，都需要使用function进行修饰

		  2)JavaScript中，所有函数在声明时，禁止指定函数返回数据类型

		  3)JavaScript中，所有函数在声明时，形参既不能使用var来修饰也不能使用数据类型修饰

		  4)JavaScript中，所有函数在声明时，如果有返回值，此时应该通过return进行返回

八:JavaScript函数调用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1.浏览器并不会自动调用JavaScript函数

2.可以通过命令行方式来调用Java函数
    <script type="text/javascript">

        function fun1(name){
            window.alert("Hello "+name);
        }

        function fun2(n1,n2){
            var num = n1 + n2;
            return num;
        }

        function fun3(){
            window.alert("瞅你咋地。。。。。")
        }

        fun1("mike"); //通知浏览器调用fun1;
        //  var result = fun2(25,25)
        //  window.alert("result "+result);
    </script>

3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理

二:JavaScript应用

一:JavaScript作用:

1
帮助浏览器对用户提出请求进行处理

二:DOM对象:

1
2
3
4
1.DOM = Document Object  Model， 【文档模型对象】

2.JavaScript不能直接操作HTML标签，只能通过HTML标签
	关联的DOM对象对HTML标签下达指令

三:DOM对象生命周期：

1
2
3
4
5
6
7
8
9
1.浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，
	每当加载一个html标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象

2.在浏览器关闭之前或则浏览器请求其他资源文件之前，本次生成的DOM对象
	一直存活在浏览器缓存中

3.在浏览器关闭时候，浏览器缓存中dom对象将要被销毁
		        
4.在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖

四:document对象：

1
2
3
1.document对象被称为【文档对象】

2.document对象用于在浏览器内存中根据定位条件定位DOM对象

五:document对象生命周期:

1
2
3
4
5
6
7
1.在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】
	存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树（DOM树）
	****在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象

2.一个浏览器窗口运行期间，只会生成一个document对象

3.在浏览器关闭时，负责将document对象进行销毁

六:通过document对象定位DOM对象方式:

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
1.根据html标签的id属性值定位DOM对象

	命令格式       var domObj =  document.getElementById("id属性值")；

	举个栗子       var domObj =  document.getElementById("one")；
		          通知document对象定位id属性等于one的标签关联的DOM对象

2.根据html标签的name属性值定位DOM对象

	命令格式       var domArray =  document.getElementsByName("name属性值");

	举个栗子       <input type="checkbox" name="deptNo" value="10">部门10
		          <input type="checkbox" name="deptNo" value="20">部门20
				  <input type="checkbox" name="deptNo" value="30">部门30

				  var domArray =  document.getElementsByName("deptNo");
				     
				  通知document对象将所有name属性等于deptNo的标签关联的DOM对象
				  进行定位并封装到一个数组进行返回。 domArray就是一个数组存放
				  本次返回的所有DOM对象

 3.根据html标签类型定位DOM对象

	命令格式      var domArray =   document.getElementsByTagName("标签类型名");

	举个栗子      var  domArray = document.getElementsByTagName("p");

		           <p>段落标签</p>

	通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回

七:DOM对象对HTML标签属性操作

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
1.DOM对象对标签value属性进行取值与赋值操作

	取值操作:
		  var domObj =  document.getElementById("one");
		  var num = domObj.value;
    赋值操作:
		  var domObj = document.getElementById("one");
		  domObj.value = "abc";

2.DOM对象对标签中【样式属性】进行取值与赋值操作

	取值操作:
		 var domObj =  document.getElementById("one");
		//读取当前标签【背景颜色属性】值
		var color = domObj.style.背景颜色属性

    赋值操作:
		 var domObj =  document.getElementById("one");
		//通过DOM对象对标签中【背景颜色属性】进行赋值
		 domObj.style.背景颜色属性 = 值；

3.DOM对象对标签中【状态属性】进行取值与赋值操作

	状态属性：  状态属性的值都是boolean类型

		          disabled = true ; 表示当前标签不可以使用
				  disabled = false; 表示当前标签可以使用

				  checked: 只存在与radio标签与checkbox标签
				  checked = true ;  表示当前标签被选中了
				  checked = false;  表示当前标签未被选中

   取值操作:
		          var domObj = document.getElementById("one");
				  var num = domObj.checked;

   赋值操作:
		         var domObj = document.getElementById("one");
				 domObj.checked = true;
4. DOM对象对标签中【文字显示内容】进行赋值与取值 
     文字显示内容:  只存在于双目标签之间;<tr>100</tr>

	 取值操作:
		     var domObj = document.getElementById("one");
			 var num1 = domObj.innerText;

     赋值操作:
		     var domObj = document.getElementById("one");
			 domObj.innerText = 值；

    innerText与innerHTML 区别:

      innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值
		innerText只能接收字符串
          
		innerHTML既可以接收字符串又可以接收html标签
    
例子:文字显示内容
    <script type="text/javascript">
        function fun1(){
            //1.得到用户在文本框输入内容
            var content = document.getElementById("two").value;
            //2.将得到输入内容作为【文字显示内容】写入到DIV标签之间
            document.getElementById("one").innerText =content;
        }
    </script>

例子全选与全不选与鼠标悬停变色:

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
<script type="text/javascript">
    //功能0,在浏览器将页面加载完毕时,自动将监听事件与标签进行绑定
    function main(){
    	//为标题行checkbox绑定onclike时间并关联fun1
  		document.getElementById("one").onclike = fun1;
    	//为数据行所有checkbox绑定onclike时间并关联fun2
    	var domArray = document.getElementsByName("ck");
    	for(var i=0;i<domArray.length;i++){
            var domObj = domArray[i];
            domObj.onclike = fun2;
        }
    //为所有数据行绑定onmouseover监听事件并关联fun3
    domArray = document.getElementByTagName("tr");
    for(var i=1;i<domArray.length;i++){
        var domObj =domArray[i];
        domObj.onmouseover=fun3;
        domObj.onmouseout = fun4;
    }
	}
        //通过标题行选中状态来控制数据行所有checkbox的选中状态
        function fun1(){
            //1.获得标题行上checkbox的checked属性值
            var flag = document.getElementById("one").checked;
            //2.定位数据行所有的checkbox
            var domArray = document.getElementsByName("ck")
            //3.标题行上checkbox的checked属性值依次赋值给数据行上checkbox
            for(var i=0;i<domArray.length;i++){
                    var domObj = domArray[i];
                    domObj.checked = flag;
            }
        }

		function fun2(){
            //1.获取数据行上所有checkbox的个数
            var domArray = document.getElementByName("ck");
            //2.获取数据行上被选中的checkbox的个数
            var checkedNum =0;
            for(var i=0;i<domArray.length;i++){
                var domObj = domArray[i];
                if(domOvj.checked == true){
                    ++checkedNum;
                }
            }
            //3.根据实际情况判断标题行checkbox的状态
            if(checkedNum == domarray.length){
                document.getElementById("one").checked = true;
            }else{
                document.getElementById("one").checked = false;
            }
           //功能3:将鼠标悬停的数据行背景颜色设置为green 将字体颜色设置为红色
            function fun3(){
                this.style.backgroundColor="green";
                this.style.color="red";
                //this指向当前鼠标悬停的tr标签的dom对象
            }
            //功能4:将鼠标移开的数据行背景颜色设置为白色,将字体颜色者只为黑色
            function fun4(){
                this.style.backgroundColor="white'";
                this.style.color="black";
                //this指向当前鼠标悬停的tr标签的dom对象
            }
        }
</script>
    <body onload="main()">
    </body>

八:JavaScript监听事件

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
1.监听事件:
            监听用户在何时以何种方式对当前标签进行操作。
		    当监听到相关行为时，通知浏览器调用对应JavaScript
		    函数对当前用户请求进行处理

2.监听事件分类:

            1)监听用户何时使用鼠标操作当前标签

		    2)监听用户何时使用键盘操作当前标签


3.监听用户何时使用鼠标操作当前标签：

            1） onclick :  监听用户何时使用鼠标【单击】当前标签

		    2） onmouseover: 监听用户何时将鼠标【悬停】当前标签上方

		    3） onmouseout : 监听用户何时将鼠标从当前标签上方【移开】

		    4） onfocus    : 监听用户何时通过鼠标让当前标签获得【光标】

		    5） onblur     : 监听用户何时通过鼠标让当前标签丢失【光标】
4.监听用户何时使用键盘操作当前标签
   1) onkeydown :监听用户何时在当前标签上[按下键盘]
   2) onkeyup   :监听用户何时在当前标签上[弹起键盘]

1.登陆密码重复验证:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //检测用户是否填写原始密码
        function fun1(){
            //1获得原始密码内容
            var content = document.getElementById("one").value;
            if(content == ''){
                document.getElementById("one").focus();
                document.getElementById("font_1").innerHTML ="密码不能为空"
            }else{
                document.getElementById("font_1").innerHTML ="*"
            }
        }

        //检测用户密码与重复密码是否一致
        function fun2(){
            //1获得原始密码内容
            var content_1 = document.getElementById("one").value;
            //2.获得重复密码
            var content_2 = document.getElementById("two").value;

            if(content_1 != content_2){
                document.getElementById("two").focus();
                document.getElementById("font_2").innerHTML ="两次输入密码不一致"
            }else{
                document.getElementById("font_2").innerHTML ="*"
            }
        }
    </script>
        
</head>
<body>
<center>
    <form action="/myWeb/user/add" method="get">
        <table border="2">
            <tr>
                <td>用户姓名</td>
                <td><input type="text" name="userName"/></td>
            </tr>
            <tr>
                <td>用户密码</td>
                <td><input type="password" name="password" id="one"/>
                    <font id="font_1" style="color: red">*</font>
                </td>
            </tr>
            <tr>
                <td>重复密码</td>
                <td><input type="password" name="password" id="two" onfocus="fun1()" onblur="fun2()"/>
                    <font id="font_2" style="color: red">*</font>
                </td>
            </tr>
            <tr>
                <td>用户性别</td>
                <td>
                    <input type="radio" name="sex" value="男"/>男
                    <input type="radio" name="sex" value="女"/>女
                </td>
            </tr>
            <tr>
                <td>用户邮箱</td>
                <td><input type="text" name="email"/></td>
            </tr>
            <tr>
                <td><input type="submit" value="用户注册"/></td>
                <td><input type="reset" /></td>
            </tr>
        </table>
    </form>
</center>
</body>
</html>

2.鼠标移动变色:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function fun1(){
            this.style.backgroundColor="blue";
        }
        function fun2(){
            this.style.backgroundColor="white";
        }
		function main(){
    	var domArray = document.getElementByTagName("tr");
        for(var i=1;i<domArray.length;i++){
            var trDom = domArray[i];
            trDom.onmouseover = fun1;
            trDom.onmouseout = fun2;
        }
		}
    </script>
</head>
<body onload="main()">
<table border="2" align="center">
    <tr>
        <td>

            <input type="checkbox" id="one" >全选/全不选
        </td>
        <td>
            职员姓名
        </td>
        <td>
            职员职位
        </td>
        <td>
            职员工资
        </td>
    </tr>

    <!--this指向当前tr标签关联的DOM对象-->
    <tr onmouseover="fun1(this)" onmouseout="fun2(this)">
        <td>
            <input type="checkbox" name="ck"/>
        </td>
        <td>
            MIKE
        </td>
        <td>
            初级程序员
        </td>
        <td>
            10000
        </td>
    </tr>

    <tr onmouseover="fun1(this)" onmouseout="fun2(this)">
        <td>
            <input type="checkbox" name="ck"/>
        </td>
        <td>
            SMITH
        </td>
        <td>
            高级程序员
        </td>
        <td>
            40000
        </td>
    </tr>

    <tr onmouseover="fun1(this)" onmouseout="fun2(this)">
        <td>
            <input type="checkbox" name="ck"/>
        </td>
        <td>
            KING
        </td>
        <td>
            架构师
        </td>
        <td>
            50000
        </td>
    </tr>
</table>
</body>
</html>

3.百度的模糊查询:

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
   <script type="text/javascript">
    var myArray=[
    				"allen","smith","tom","mike","jones",
    "tomcat","for","while","java","index","radio"
				];
	function fun1(){
        //1.读取用户在文本框输入的内容
        var content = document.getElementById("one").value;
        if(content==""){
            documnet.getElementById("two").style.display="none";
            return;
        }
        //2.到数组中定位包含了指定内容的字符串
        var value="";
        for(var i=0;i<myArray.length;i++){
            var str = myArray[i];
            //"abc".indexOf("a")==0 a在字符串abc中第一次出现的位置
            //"abc".indexOf("d")==-1
            if(str.indexOf(content)!=-1){
                value+=str+"</br>";//allen</br>tomcat</br>
            }
        }
        //3.将定位字符串作为文字显示内容填充到DIV标签
        var domObj = documnet.getElementById("two");
        if(value==""){
            domObj.style.display="none";
            return;
        }
        domObj.innerHTML=value;
        domObj.style.display="block";//显示
    }
    </script>
</head>
<body>
    <center>
    	<input type="text" id="one" size="50" onkeyup="fun1()"/>
    	<input type="button" style="background-color: blue; color:white" value="百度一下">
    	<div id="tow" style="background-color: antiquewhite;color:red:width:400px;
    	height: 300px;display:none"></div>
            <!--display:none是让div隐藏-->
    </center>
</body>
</html>

九:onload监听事件

1
2
3
4
5
6
7
1.作用:监听浏览器何时将网页中html标签加载完毕
    
2.意义: 浏览器每加载一个html标签时,自动在内存生成一个dom对象,
		在浏览器将网页所有标签加载完毕时,意味当前网页中所有的
        标签都生成对应的dom对象,onload此时就可以触发调用函数对
        浏览器中标签进行处理,此时不会出现未找到dom对象问题
3.浏览器加载时,javascript是从上而下执行,如果需要用到dom对象,需要将javascript,命令写道dom文本框对象下面,此时显得比较杂乱,可以采用以下方法进行封装
1
2
3
4
5
6
7
8
9
10
11
使用例子:
<script style="text/javascript">
    function fun1(){
    var domObj=document.getElementById('one');
    var str=domObj.value;
    window.alert(str);
}
</script>
    
<body onload="fun1()">
</body>

十:dom对象实现监听事件与html标签绑定

1
2
3
4
5
6
7
8
9
10
1.前提:
	实际开发过程中,同一个监听事件往往与多个html标签进行绑定
    这样增加开发难度,在未来维护过程中增加维护难度
2.命令形式:
	domObj.监听事件名 = 处理函数名 ****此处处理函数名后面是不能出现()****
3.举例
        var domObj = document.getElementById("one");
		domObbj.onclike = fun1;//注意函数名后面不能有()
	相当于:
		<input type ="button" id="one" onclike="fun1()">//此处函数名后面必须有()

十一:typeof

1
typeof obj = obj.getClass().getName();

三:javascript高级篇

一:arguments

1
2
3
4
5
6
7
8
9
1.JavaScript中,每一个函数都包含一个arguments属性
    
2.arguments属性是一个数组
    
3.在函数调用时,将实参出入到函数arguments中,再由arguments将数据传递给形参
    
4.arguments属性存在,可以将JavaScript中函数在调用时传递实参与形参进行格式,增加函数调用灵活性
    
5.arguments属性只能在函数体内使用,不能在函数体外使用

二:function类型对象

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
1.介绍:
	1)function是JavaScript中一种高级数据类型
        
	2)一个function类型对象用于管理一个具体函数
        
	3)JavaScript中function类型相当于Java中Method类型
        
2.function类型对象声明方式:
	1)标准声明方式
	2)匿名声明方式
        
3.function类型对象声明方式----标准声明方式
        function 函数对象名(参数1,参数2){
        命令;
    }

4.function类型对象声明方式----匿名声明方式
    var 函数对象名 = function(参数1 , 参数2){
    命令;
	}
例子: var fun2 = function(p1,p2){window.alert("fun2 is run..")}
调用:fun2();

5.function类型对象的创建时机
    浏览器在加载<script>时,共加载两次
    
    第一次加载,将<script>标签所有标准形式声明函数对象进行创建(即标准声明函数前后都可以执行调用此函数)
    
    第二次加载,将<script>标签所有命令行按照自上而下顺序来执行(只能在函数声明后调用')

三:局部变量和全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1.局部变量:
	1)定义: 在函数执行体内,通过var修饰符声明的变量
        function fun1(){
        var name = "mike";//局部变量
    }
2) 特征:局部变量只能在当前函数执行体使用,不能在函数执行体外使用

2.全局变量:
	定义:
		1):全局变量可以在当前html文件中所有的函数中使用
        2):全局变量被声明时,自动分配给window对象作为其属性
            var name="mike"--->window.name="mike"
    声明全局变量:
		第一种方式:直接在script标签下,通过var声明的变量,就是全局变量
            
        第二种方式:在函数执行体内,没有通过var修饰符修饰的变量也是全局变量

四:object类型对象特征

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
1.[定义]: 在JavaScript认为所有通过[构造函数]生成对象其数据类型都是object类型
    
2.[特征]: object类型对象在创建完毕后,可以根据实际情况,任意添加属性和方法,
		  也可以移除属性和方法
3.[属性维护]:
		第一种维护方案:
		添加属性
            	object对象.新属性名=值:
		添加函数:
				object对象.新函数对象名 = function(){};
例子:
	<script style="text/javascript">
        var obj1 = new Object();//JavaScript内置构造函数
		//新增属性:
		obj1.sid=10;
    </script>


		第二种维护方案:
		添加属性:
				object对象["新属性名"] = 值;
		添加函数:
				object对象["新函数对象名"] = function(){};

		移除对象属性和方法:
				delete object.属性名
                delete object.函数名

五:自定义构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. [命令]:
	function 函数对象名(){
        
    }

2.[调用]
    var object类型对象 = new 函数对象名();

3.[普通函数与构造函数区分]
    1):函数没有调用之前,无法区分函数身份,只能根据函数调用形式区分
        
    2): 判断普通函数:  var num = 函数对象名();

	3): 判断构造函数: var num = new 函数对象名();

	4):返回值: 普通函数运行后需要通过return将结果返回
        	  构造函数运行后,直接返回一个object类型对象,此时函数return相当于无效

六:JavaScript中this指向

1
2
3
4
3/1.JavaScript中this指向和Java中this只想问安全一致
    1): 在构造函数中,this指向当前构造函数生成的object类型对象
    
    2): 在普通函数中,this指向调用当前函数的实例对象

==七:JSON==

服务端与浏览器之间的数据通讯格式

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
1.前提:JavaScript中得到object类型对象方式
      方式1: 由构造函数生成的对象都是object类型对象
      方式2: 由json数据描述格式生成对象都是object类型对象
   
2.JSON数据描述格式
          JavaScript中获得object类型对象简化版
   
3.标准命令格式:
		var obj = {"属性名1":值,"属性名2":值};
		开发人员习惯于将由JSON生成object类型对象称为[JSON对象]
 
4.JSON数组:
	专门存放JSON对象的数组被称为JSON数组
  例子:
	<script type="text/javascript">
        //存放多个城市对象
        var jsonArray = [
        {"cityID":1,"cityName":"北京市"},
        {"cityID":2,"cityName":"上海市"},
        {"cityID":3,"cityName":"广州市"}
    	];
	
	for(var i=0;i<jsonArray.length;i++){
        var cityObj = jsonArray[i];
        window.alert("城市编号"+cintyObj.cityId+"城市名称"+cityObj.cityName);
    }
    </script>

1.通过反射机制将高级类型转化为json

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
public class Student{
    private Integer sid;
    private String sname;
    set和get方法,无参和有参构造方法
}

public class RelectUtil{
    //作用: 将任意类型对象内容转换成json格式字符串返回
    //参数: 一个高级引用对象 Student对象,Dept对象.....
    public static String jsonObject(Object obj){
        Class classFile =null;
        Filed filedArray[] = null;
        StringBUffer str = new StringBuffer("{");
        //1.获取当前对象隶属的[class文件]
        classFile = obj.getClass(); //Student.class
        //2.获取[class文件]所有属性
        filedArray = classFile.getDeclaredFields();
        //3.获取当前对象所有属性
        try{
            for(int i=0;i<filedArray.length;i++){
            Field field = fieldArray[i];
            field.setAccessible(true);//确保私有访问权限属性可以在class文件外使用
            String fieldName = filed.getName();//获取属性名称
            Object value = field.get(obj);
            //4.将获得属性以及其值拼接为json格式字符串
            str.append("\"");
            str.append(filedName);
            str.append("\":");
            str.append("\"");
            str.append(value);
            str.append("\"");//{"sid":"10","sname":"mike"}
            if(i<fieldArray.length-1){
                str.append(",");
            }
    	}catch(IllegalAccessException e){
                e.printStackTrace();
            }finally{
                str.append("}");
            }
        }
        return str.toString();
	}
}


oneServlet调用:
	protected void doGet(HttpServletRequest request,HttpServletResponse response)
    throws ServletException,IOException{
        Student stu = new Student(20,"allen");
        //通过反射机制将Student类型对象转换为JSON格式字符串
        String str = RelectUtil.jsonObject(stu);
        //将学员对象存入到请求作用于对象
        request.setAttribute("key",str);
        //请求转发,向tomcat申请调用index_1.jsp,并将request和response
        通过tomcat交给index_1.jsp
            requset.getRequestDispatcher("/index_1.jsp").forword(request,reponse);
    }


index_1.jsp:
<script type="text/javascript">
    var stuObj = ${requestScope.key};//从request作用域对象得到服务端提供的学生对象
	window.alert("学员编号"+stuObj.sid+"学员姓名"+stuObj.sname);
</script>

2.json数据在前端表格显示

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
<script type="text/javascript">
    function init(){
    var jsonArray = ${requsetScope.key};//得到一个json数组[dept1,dept2....]
    for(var i=0;i<jsonArray.length;i++){
        var jsonObj = jsonArray[i];
        var trDom = doucment.createElement("tr")//<tr></tr>
        var tdDom_1 = doucment.createElement("td");
        var tdDom_2 = doucment.createElement("td");
        var tdDom_3 = doucment.createElement("td");
        tdDom_1.innerHTML = jsonObj.deptNo;//<td>10</td>
        tdDom_2.innerHTML = jsonObj.dname;//<td>Accounting</td>
        tdDom_3.innerHTML = jsonObj.loc;//<td>New York</td>
        trDom.appendChid(tdDom_1);//将td添加到tr中
        trDom.appendChid(tdDom_2);
        trDom.appendChid(tdDom_3);
        doucment.getElementById("one").appendChild(trDom);//将tr添加到表格中
    }
        
}
</script>
 <body>
    <table boder="2" align="center" id="one">
    <tr>
    	<td>部门编号</td>
    	<td>部门名称</td>
    	<td>部门位置</td>
    </tr>
 </body>

四:MVC开发规则

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
1.介绍:
	1.MVC开发规则制定了互联网通信开发过程中必须出现角色有哪些
    2.MVC开发规则制定了互联网通信开发过程中必须出现角色担任职责
    3.MVC开发规则制定了互联网通信开发过程中必须出现角色的出场顺序
  
2.角色:
	DAO对象: DAO对象提供某张表文件的操作细节,降低对表文件操作难度
        	避免反复开发表文件操作的代码提高代码复用性
     
    service对象: 服务对象,提供[业务]的具体解决方案
                 service对象一个方法指定一个业务的解决方案
        		 避免业务开发重复性开发行为,提供复用性
        		 网站每一个业务都有一个独立的标准解决方案
        
3.业务:
	浏览器向Http服务器发送请求
     
    用户向网站发送请求
   
4.业务特征:
	1.真实业务场景中,一个业务往往包含多个分支任务,因此解决业务开发工作量往往比较大
    2.真实业务场景中,只有所有分支任务都顺利成功解决,才可以认为当前业务处理成功
   
5.解决业务开发困扰:
	1.一个业务可能在网站的多个地方重复出现,如果不做[封装],增加开发难度,进行业务解决代码重复性开发
        
    2.[百人百味],不同程序员面对同一个业务时,给出解决方法往往有偏差,导致最终解决数据会有偏差
    
6.MVC开发规则-----互联网通信开发过程中必须出现的角色有哪些
        一次互联网开发过程,必须出现角色有三个:
	
		C , controller object ; 控制层对象 (servlet对象)
        
        M , model object ; 业务模型对象 (Service对象)
            
        V , view object ; 视图层对象 (jsp  or  HttpServletResponse)
            
7.MVC开发规则--------------互联网开发过程中必须出现角色担负职责
       
        C(Servlet对象):
				1): [可以] 调用 [请求对象] 读取 [请求包] 参数信息
                    
                2): [必须] 调用 [Service对象] 处理业务
                    
                3): [必须] 调用 [视图层对象] 将结果写入到响应体
          
         M(service对象):
				1): 处理业务中所有分支任务
                    
                2): 根据分支任务执行情况判断业务是否处理成功
                    
                3): 必须通过return将处理结果返回给 [控制层对象]
                 
          V(jsp/HttpServletRespnse)
                 1): [禁止参与业务处理]

				 2): 唯一任务将处理结果写入到响应体

8.互联网通信开发过程中必须出现角色的出场顺序
                     
                   发送请求                      -------->DeptDao业务
 请求调用顺序: 浏览器------->Servlet------->Service
     											--------->EmpDao业务
     
     			  分支任务结果
  			DeptDao--------->     									 tomcat
 响应顺序    		分支任务结果  Service---->Servlet---->View---->响应体------->浏览器
     		EmpDao---------->
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家