JavaScript+DOM+JSON

JavaScript

(1)JavaScript入门案例:要在script标签里写

<script>
    //alert弹窗
       alert(100);
       alert(200); 
</script>

(2)JavaScript数据类型（6大类）

 <script>
 	// (1)字符串
   // 注意：外边单引里边双引、外边双引里边单引。
   var a = "张三";
   document.write(a + "<br>");
   var b = '李四';
   document.write(b + "<br>");
   
   // (2)数字
   var c = 12.34;
   document.write(c + "<br>");
   
   // (3)布尔
   var d = true;
   document.write(d + "<br>");
   
   // (4)数组
   var e = new Array('张三','李四');
   document.write(e[1] + "<br>");
   
   // (5)null空
   var f = null;
   document.write(f + "<br>");	//打印结果是undefined
   
   // (6)undefined未定义
   var g;
   document.write(g + "<br>");//打印结果是undefined
</script>

(3)JavaScript运算符(6大类)

<script>
        // (1)算数
        document.write(3 + 2);
        document.write(3 - 2);
        document.write(3 * 2);
        document.write(3 / 2);
        document.write(3 % 2);
        document.write("<br>");
        
        // (2)比较
        document.write(3 > 2);
        document.write(3 >= 2);
        document.write(3 < 2);
        document.write(3 <= 2);
        document.write(3 == 2);
        document.write(3 != 2);
        document.write("<br>");
        
        // (3)逻辑
        document.write(true && false);
        document.write(true || false);
        document.write(!true);
        document.write("<br>");
        
        // (4)赋值
        var v = 3;
        document.write(v);
        v += 2;
        document.write(v);
        v -= 2;
        document.write(v);
        v *= 2;
        document.write(v);
        v /= 2;
        document.write(v);
        v %= 2;
        document.write(v);
        document.write("<br>");
        
        // (5)自增自减
        var s = 2;
        s++;
        document.write(s);
        s--;
        document.write(s);
        document.write("<br>");
        
        // (6)三目
        var x = 2;
        var y = 3;
        var m = x > y ? x : y;
        document.write(m); 
</script>

(4)if分支语句

<script>
       var a = 2;
       var b = 3;
       var c = 5;
       if (a > b && a > c) {
           document.write(a);
        } else if (b > c) {
            document.write(b);       
        } else {
            document.write(c);
        }
   </script>

(5)for循环

<script
       // 求1+2+3+...+10和?
       var s = 0;
       for (var i=1;i <= 10;i++) {
           s += i;
       }
       document.write(s);
       
       // 求数组元素和
       var arr = new Array(1,3,5,7,9);
       var x = 0;
       for (var i=0; i < arr.length; i++) {
           x += arr[i];
       }
       document.write(x);       
   </script>

(6)JavaScript事件和方法

说明：前台的任何功能都是通过事件触发

事件：鼠标、键盘、屏幕等触发的动作

方法：功能实现

 <script>
    
       // 没有返回值的方法
       // 注意：参数列表只写变量名
       function m1(a, b){
           alert(a + b);
       }
       
       // 有返回值的方法
       // 注意：必须使用return关键字返回结果。
       function m2(c, d) {
           return (c + d);
       }
    
   </script>
   
   <input type="button" value="按钮1" onclick="m1(2,3)">
   <input type="button" value="按钮2" onclick="alert(m2(4,5))">
    
</body>

(7)外部js文件调用方法（方法作用域-多个页面要调用同一个方法）

步骤一：onclick单机事件，调用方法

 <input type="button" value="按钮" onclick="m7();">

步骤二：创建外部js（7.js）文件，并写下方法

//这个方法的意思是：点击按钮弹窗口
function m7() {
    alert(123);
}

步骤三：在head标签内通过script 标签导入js脚本文件

 <script src="7.js"></script>

(8)DOM文档对象模型：查询方法：getElementById

说明：DOM就是document对象，DOM对页面内容进行封装

说明：DOM是网页中的用来表示文档中对象的标准模型

说明：DOM提供前端页面添加、修改、删除、查询方法

说明：JS语言很多内置对象、其中DOM是最常用的

内置对象：浏览器已经创建好直接可以使用的对象。window、location等

//有一个文本框，有一个按钮，需要实现“点击按钮，查询出文本框内容”的功能（m8()）
<input id="a" type="text">
<input type="button" value="按钮" onclick="m8();">

// getElementById:根据id获取元素节点的对象
<script>
    function m8(){
    //变量a代表文本框输入的对象
    //注意：由于这个方法太过常用，浏览器会自动调用这个方法，因此“var a = document.getElementById("a");”这段代码可以省略
        var a = document.getElementById("a");
    //a.value就是查询出来的值
        alert(a.value);
    }
    </script>

(9)DOM文档对象模型：添加方法(静态添加、【动态添加】)

<ul id="u">
       <li>大连</li>
       <li>沈阳</li>
</ul>
   
   <input type="button" value="按钮" onclick="m9();">
   
   <script>
    function m9(){
        // 创建标签:createElement
        var a = document.createElement("li");
        // 创建文本:createTextNode
        var b = document.createTextNode("北京");
        // 父节点添加子节点（父标签里面嵌套子标签）
        a.appendChild(b);//把文本“北京”封装在标签"li"中
        u.appendChild(a);//把标签"li"封装在标签"ul"中
    }
    </script>

DOM添加练习题:

<table id="t" border="1">
        <tr><td>张三</td><td>30</td></tr>
        <tr><td>李四</td><td>40</td></tr>
</table>
<input type="button" value="按钮" onclick="m10();">
    
//要求：添加一条“王五 50”的信息（静态添加）
<script>    
     function m10(){
            
               //由于要添加一行，首先创造一个行标签
             var b = document.createElement("tr");
         
             //由于有两列，所以需要创建两个列标签
             var a1 = document.createElement("td");
         
             var a2 = document.createElement("td");
           
             var c = document.createTextNode("王五");
         
             var d = document.createTextNode(50);
         
             a1.appendChild(c);
             
             a2.appendChild(d);
         
             b.appendChild(a1);
         
             b.appendChild(a2);
         
             t.appendChild(b);
        }
</script>

DOM添加练习题:查询+添加（动态）

 <table id="t" border="1">
        <tr><td>张三</td><td>30</td></tr>
        <tr><td>李四</td><td>40</td></tr>
</table>
    <input id="x" type="text"><br>
    <input id="y" type="text"><br>
    <input type="button" value="按钮" onclick="m10();">
    
<script>
    function m10(){
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var text1 = document.createTextNode(x.value);
        var text2 = document.createTextNode(y.value);
        t.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        td1.appendChild(text1);
        td2.appendChild(text2);
    }
</script>

DOM文档对象：修改方法：setAttribute（设置属性）

 <img id="t" src="a.png" width="100px" height="100px;"><br>
     //按钮自身的标签：button
     //修改要注意传参数
   <button onclick="m11('a.png');">图片1</button>
   <button onclick="m11('b.png');">图片2</button>
   <button onclick="m11('c.png');">图片3</button>
   
   <script>
    function m11(x) {
        t.setAttribute("src", x);
    }
</script>

<img id="t" src="a.png" width="100px" height="100px;"><br>
   //动态修改
   宽<input id="a" type="text"><br>
   高<input id="b" type="text"><br>
   <button onclick="m12();">按钮</button>
    <script>
    function m12(){
        a.setAttribute("type", "radio");//把输入宽的文本框改成单选，通过id调用
        t.setAttribute("width", a.value + "px");
        t.setAttribute("height", b.value + "px");
    }
    </script>

(13)DOM文档对象模型：删除方法：removeChild

<ul id="a">
       <li id="b">北京</li>
       <li id="c">上海</li>
   </ul>
   
   <button onclick="m13();">按钮</button>
   
   <script>
    function m13(){
       //父标签删除子标签，父标签引用删除子标签
        a.removeChild(c);
    }
    </script>

DOM文档对象：删除案例

<table id="t" border="1">
    <tr><th>姓名</th><th>年龄</th><th>操作</th></tr>
//onclik是单击调用方法d(),this表示当前标签对象,这里的this写在button标签里面，就代表button这个对象
    <tr><td>张三</td><td>30</td><td><button onclik="d(this);">删除</button></td></tr>
    <tr><td>李四</td><td>40</td><td><button onclik="d(this);">删除</button></td></tr>
</table>
   
<script>
        //方法内定义参数b来接受this表示的button对象，此时b就代表button这个标签
function d(b){
     //删除是父删子，如果要想删除掉张三的所有信息（即张三所在行的信息），就要table删除tr
    //首先获取table的标签
   //b.parentNode表示b的父节点，即button标签的父节点td
  //b.parentNode.parentNode表示td的父节点，即tr
 //b.parentNode.parentNode.parentNode取到tr的父节点table（注意这里不是很规范，正常还有tbody，自己心里要清楚）
        //a就代表当前的表格（就目前代码而言）
    var a = b.parentNode.parentNode.parentNode;
       
//c就代表当前按钮所在的行
    var c = b.parentNode.parentNode;
    a.removeChild(c);  
}    
</script>

//注意：通常在页面给用户显示的是超链接删除

没有链接地址就用#号代替，href="#"

<tr><td>张三</td><td>30</td><td><a href="#" onclick="d(this);">删除</a></td></tr>
<tr><td>李四</td><td>40</td><td><a href="#" onclick="d(this);">删除</a></td></tr>

(15)JavaScript中数组类型的常用方法

 <script>    
        // (1)创建数组
        var a = new Array();//创建空数组
        var b = new Array(3);//创建长度为3的数组
        var c = new Array(1,2,3);//创建元素是1,2,3的数组

		//只有c能打印出来1，2，3
        document.write(a);
        document.write(b);
        document.write(c);
        
        // (2)元素存取
		//c[2]的元素赋值给c[1]
        c[1] = c[2];
        document.write(c);
        
        // (3)添加方法（头尾添加）
		
		//push往数组末尾添加的方法
        c.push(4);
        c.push(5);
		//unshift往数组前面添加的方法，较常用
        c.unshift(4);
        c.unshift(5);
		//最后输出显示5在4的前面
        document.write(c);        
    
        // (4)删除方法
		//pop删除数组后面的
        c.pop();
		//shift删除数组前面的
        c.shift();
        document.write(c);        
 </script>

(16)JSON数据格式

说明：JSON是JavaScript语言的对象表示方法

说明：JSON是**服务器端发往前端**的数据标准之一

总结：在json数据中：{}代表对象，[]代表数组，逗号代表分割符

<script>
  // (一)JSON对象的数据格式：一个对象
   // 注意：冒号右边的数据类型，字符串加引号，数字不能加引号
    //json数据中，一个花括号{}就代表一个对象
    //{name:'张三',age:30}就代表一个对象，冒号左边的代表数据名，冒号右边代表数据值，逗号是分隔符
   var a = {name:'张三',age:30};//把对象存到变量a中

	//取值只需要：对象.数据名即可取值，a.name取得是名字值，a.age取得是年龄值
   document.write(a.name + a.age);

  	// (二)JSON数组的数据格式：多个对象，[]代表数组（注意与Java数组表示的区别）
	//存取通过数组下标，一个对象就是一个元素
	//b[0].name取得是第一个对象的name的数据值张三
   var b = [{name:'张三',age:30},{name:'李四',age:40}];
   document.write(b[0].name + b[0].age);
</script>

JSON综合练习题：把JSON中的数据打印出来

<script>    
    var a = {list:[{name:'张三',age:30}]}; 
	//a是对象，冒号左边的list是数据名（注意这里list不是集合）
	//冒号右边是一个数组，通过下标取值
    document.write(a.list[0].name,a.list[0].age);      
    
    var b = {x:true,y:180,z:{name:'李四',age:30}};   
    document.write(b.x,b.y,b.z.name,b.z.age);
       
    var c = {e:'成功',f:null,g:[{name:'李蕾'},{name:'李蓓'},{name:'李梦'}]};  
    document.write(c.e,c.f,c.g[0].name,c.g[1].name,c.g[2].name); 
</script>

(18)JSON数据的遍历(对象遍历和数组遍历)

<script>    
       // (1)JSON对象遍历(不常用)
       var a = {name:'张三', age:30};
	//遍历通过关键字in
	//in关键字的右边是遍历的对象，in的左边是数据名
	//在这里创建变量b，name会自动把赋给变量b，age也相同赋给b(注意：只是把名字赋给b，而不是数据值)
       for (var b in a) {
           //取值用对象方括号加变量，即：a[b]
           //b + a[b] 最后打印出来的结果是：name张三 age30
           document.write(b + a[b] + "<br>");
       }
       
       // (2)JSON对象数组遍历(常用)
       var b = [{name:'张三', age:30},{name:'李四', age:40}];
       for (var i=0;i < b.length; i++) {
           document.write(b[i].name + b[i].age + "<br>");
       }       
</script>

JSON遍历综合案例

//案例场景：前端有个表格，但是表格空的，需要后端给他发数据
<table id="t" border="1"></table>

//设置一个按钮点击触发，点击按钮向后台发请求，获取后台数据（onclick单击调用m方法）  
<button onclick="m();">按钮</button>
 
//我们要做的：用JavaScript语言把json数据添加到表格中去
<script>
function m() {
    var list = [{name:'张三', age:30, s:'男'},{name:'李四', age:40,s:'女'}];
    //第一步：遍历数组
    for (var i=0; i < list.length; i++) {
        //由于for循环是遍历数组，这个数组中有一个元素（即json数据的一个对象），表格中就对应着一行
        //因此遍历几次，就要创建几个tr行标签（获取一个元素，就有一个tr标签）
        var tr = document.createElement("tr");
       
        //遍历对象，这个for循环执行几次，创建几个单元格
        for (var v in list[i]) {
            var td = document.createElement("td");//创建标签
            var tx = document.createTextNode(list[i][v]);//取数据（创建文本节点）
             
            td.appendChild(tx);//td里面加文本
            tr.appendChild(td);//td里面加数据
        }
        t.appendChild(tr);
    }
}
</script>