JavaWeb - js函数，js事件，js的dom对象，document对象，innerHTML，表单提交/校验，json，js解析json

转载请注明出处：https://www.jianshu.com/p/0e7ab62ef79c

一、JavaScript高级

1.js的函数

（1）在java里面定义方法
public void/int 方法名称(参数列表) {
    方法体和返回值;
}

（2）在js里面定义函数有三种方式
第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
* 注意一：参数列表，不需要写类型（var），直接写参数名称
* 注意二：返回值，根据实际需要可以有也可以没有
* 代码
function test1() {
    alert("123456");
}
//test1();
//实现两个数的相加
function add1(a,b) {
    var sum = a+b;
    return sum;
}
alert(add1(2,3));


第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; } 
* 代码
//第二种定义方式
var test1 = function(a,b) {
    return a+b;
}
//调用函数
alert(test1(3,4));


第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）
* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")
* 代码
//第三种定义方式
var param = "a,b";
var method = "var sum;sum=a+b;return sum;";
var test2 = new Function(param,method);
//调用函数
alert(test2(5,6));

2.js的函数的重载

（1）在java里面存在重载，方法名称相同，参数列表不同
（2）js里面是否存在函数的重载？
第一，在js不存在重载
第二，可以使用js函数里面arguments数组模拟重载的效果
（3）模拟重载的效果
* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果
* 代码
//模拟重载的效果
//在js函数里面有一个数组 arguments，保存传递进来的参数的
function add1() {
    //alert(arguments.length);
    //遍历数组
    /*for(var i=0;i<arguments.length;i++) {
        alert(arguments[i]);
    }*/
    //模拟重载的效果（有几个参数，实现这几个参数的相加）     
    var sum = 0;
    for(var i=0;i<arguments.length;i++) {
        sum += arguments[i];
    }
    return sum;
}
//调用
alert(add1(1,2));      
alert(add1(1,2,3));    
alert(add1(1,2,3,4));

3.js的事件

（1）什么是事件：在html的元素里面可以触发事件调用js里面的函数
（2）在html的标签上面如何使用事件
* 有三种方式
* 第一种：使用事件属性调用js方法
** 代码
<input type="button" value="第一种方式" onclick="add1();"/>

* 第二种：首先得到要绑定的标签，在使用事件的属性
** 代码
//第二种方式绑定事件
document.getElementById("buttonid").onclick = add1;

* 第三种：首先得到要绑定的标签，写js的代码
** 代码
document.getElementById("buttonid1").onclick = function() {
    alert("aaaaa");
};

4.js的常用的事件

（1）onload事件和onclick事件
* onload：html页面在加载时候触发事件，调用响应的js方法
**  <body onload="test1();">
* onclick：鼠标点击事件
** <input type="text" onclick="test2();"/>

（2）onfocus事件和onblur事件
* onfocus：获取焦点
* onblur：失去焦点

（3）onmouseover 鼠标被移到某元素之上 

（4）onmouseout 鼠标从某元素移开 

（5）onkeypress：点击键盘上面的某个键，调用方法
* <input type="text" id="textid1" onkeypress="key1(event);"/>
* function key1(obj) {
    //alert(obj.keyCode);
    //如果点击键盘上面的回车键 ，调用方法  13
    if(obj.keyCode==13) {
        alert("key1");
    }
}

5.js的dom对象

（1）什么dom：document  object  model：文档对象模型
* 文档：指的是标记型文档（html、xml）
* 对象：在对象里面有属性和方法
** 使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作

* 要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）
** html中包含 标签、属性、文本内容

（2）使用dom解析html
* 解析过程：根据html的层级结构在内存中分配一个树形结构
* document对象，代表整个文档
* element对象，代表标签
* 属性对象
* 文本对象
* Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

（3）DHTML的简介
* 不是一种技术，是很多技术的简称。
* 包含的技术：
** html：封装数据
** css：使用属性和属性值修改数据的样式
** ECMAScript：语句和语法
** DOM：对标记型文档进行操作

6.document对象

（1）document对象代表整个文档
（2）方法
第一个：write()，向页面输出内容，可以输出html代码
    * document.write("aa");
    document.write("<hr/>");

第二个：getElementById(): 获取标签对象，通过标签的id值进行获取
    * var input1 = document.getElementById("textid");
    document.write(input1.value);

第三个：getElementsByName(): 根据标签里面name属性的值得到标签对象，返回数组
    * //getElementsByName()
    var inputs1 = document.getElementsByName("name1");
    //alert(inputs1.length);
    //获取每个input里面的value值
    for(var i=0;i<inputs1.length;i++) {
        var input1 = inputs1[i];
        //得到value值
        alert(input1.value);
    }

    * 如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值
    * var inputs2 = document.getElementsByName("name2");
    //alert(inputs2.length);
    alert(inputs2[0].value);

第四个：getElementsByTagName()：根据标签的名称获取标签对象，返回数组
    * var inputs3 = document.getElementsByTagName("input");
    //alert(inputs3.length);
    //遍历数组
    for(var i=0;i<inputs3.length;i++) {
        var input3 = inputs3[i];
        //得到标签的value
        alert(input3.value);
    }

    * 如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值
    var arr = document.getElementsByTagName("input");
    alert(arr[0].value);

7.innerHTML属性

（1）innerHTML属性不是dom里面属性
（2）实现什么功能
第一，获取标签里面的文本内容
    ** var span1 = document.getElementById("spanid");
    alert(span1.innerHTML);

第二，向标签里面设置内容（可以写html代码）
    ** var div1 = document.getElementById("div1");
    div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

8.练习：动态生成表格

（1）实现的步骤
* 首先创建页面，在页面中有两个普通输入项和按钮（有事件）
* 点击生成按钮，生成对应的表格
** 首先得到输入的行和列
** 根据行和列生成表格
*** 循环行 <tr>
*** 在行里面循环单元格 <td>

（2）代码

//实现生成表格
    function add1() {
        //得到输入的行和列
        var hang = document.getElementById("hid").value;
        var lie = document.getElementById("lid").value;
        //alert(hang+" :: "+lie);
        var tab = "<table border='1' cellpadding='10'>";
        //生成行
        for(var i=1;i<=hang;i++) {
            tab += "<tr>";
            //生成单元格
            for(var j=1;j<=lie;j++) {
                tab += "<td>aaaaa</td>";
            }
            tab += "</tr>";
        }
        tab += "</table>";
        //alert(tab);
        //获取div标签
        var div1 = document.getElementById("div1");
        //向div里面写html代码
        div1.innerHTML = tab;
    }

9.表单的提交

（1）在html中写form标签，提交方式
提交表单有三种方式
第一种方式：在form标签里面，写提交按钮 <input type="submit"/>
    = 代码

<form method="get">
            username: <input type="text" name="username"/>
            <br/>
            password: <input type="password" name="password"/>
            <br/>
            <input type="submit" value="提交"/>
        </form>

第二种方式：在form标签里面，写普通按钮 <input type="button"/>
    = 代码

//使用button进行表单的提交
        function form01() {
            //得到form标签
            var form01 = document.getElementById("form01");
            //提交form表单
            form01.submit();
        }

第三种方式：使用超链接提交数据
* <a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
* <a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

10.表单校验

（1）规范数据的输入的格式
（2）如何进行表单的校验
第一，使用submit进行表单提交，进行表单校验
* 使用事件 onsubmit事件，写在form标签里面
<form method="get" onsubmit="return checkForm();">
* 如何return返回的值true可以提交表单，如果返回false不会提交表单
= 代码

//submit表单的校验
    function checkForm() {
        //判断用户名不能为空
        var username = document.getElementById("usernameid").value;
        var password = document.getElementById("passwordid").value;
        if(username == "") {
            alert("用户名不能为空");
            return false;
        }
        if(password == "") {
            alert("密码不能为空");
            return false;
        }
        return true;
    }

第二，使用button进行表单校验
= 代码

//使用button提交表单，进行校验
    function form01() {
        //得到输入项里面的值，判断值是否为空，如果为空不进行提交
        var username = document.getElementById("usernameid").value;
        var password = document.getElementById("passwordid").value;
        //如果值为空，不进行提交
        if(username == "") {
            alert("用户名不能为空");
        } else if(password == "") {
            alert("密码不能为空");
        } else {
            //得到form标签
            var form01 = document.getElementById("form01");
            form01.submit();
        }
    }

11.json的简介

（1）JavaScript Object  Notation，JavaScript 对象表示法。json是数据的交换格式，比xml更加轻巧。
json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。
（2）json数据格式
* json有两种数据格式
第一种：json的对象的格式
    * 写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
    ** 类似于key-value形式
    ** 名称和值之间使用冒号隔开，多个值之间使用逗号隔开
    ** json数据的名称是字符串的类型，json数据的值 string, number, object, array, true, false, null
    ** 具体数据的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}

第二种：json的数组的格式
    * 写法 [json对象1,json对象2........]
    ** 在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
    ** 具体数据的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]

（3）可以使用json的这两种格式组成更加复杂json的格式
* 复杂的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12.js解析json

（1）js解析json的对象的数据格式
    * 通过json对象数据格式里面的name的名称得到name对应的值
    * 代码
    //js解析json的对象格式的数据
    var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
    //对json的对象格式数据进行操作
    document.write(json1.username);
    document.write("<br/>");
    document.write(json1.age);
    document.write("<br/>");
    document.write(json1.addr);

（2）js解析json的数组的数据格式
    * 根据数组的下标得到json对象，解析json对象，根据数据的名称得到值
    * 遍历json数组，得到json数组里面每个json对象，解析每个json对象，根据json对象的数据
    的名称得到值
    * 代码
    //js解析json数组格式的数据
    var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
                {"username":"lisi","age":30,"addr":"tianjin"},
                {"username":"wangnwu","age":40,"addr":"nanjing"}];
    
    //js操作数组，遍历数组，根据数组的下标得到值
    //遍历json数组格式，得到的是一个json对象，解析json对象（根据名称得到值）
    //得到第二个json对象里面的age的值  数组下标从0开始的
    document.write(json2[1].age);
    //得到第一个json对象里面的addr的值
    document.write("<br/>");
    document.write(json2[0].addr);
    //遍历json数组的格式
    document.write("<hr/>");
    for(var i=0;i<json2.length;i++) {
        //得到数组里面的每一个json对象
        var person = json2[i];
        //得到每个对象里面的值
        var username = person.username;
        var age = person.age;
        var addr = person.addr;
        document.write("username:"+username+" ; age:"+age+" ; addr:"+addr);
        document.write("<br/>");
    }

13.json练习：人员信息的显示

（1）把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。
（2）[{"name":"zhangsan","age":20,"addr":"beijing"},
    {"name":"lisi","age":30,"addr":"tinajin"},
    {"name":"wangwu","age":40,"addr":"nanjing"}]
（3）代码
//创建json的数据的格式，用于存储人员的信息
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
                {"name":"lisi","age":30,"addr":"tinajin"},
                {"name":"wangwu","age":40,"addr":"nanjing"}];
//使用js解析persons格式，把这些人员信息显示到页面上
//遍历json的数组，得到每个人员的信息
//生成表格 ，把数据放到表格里面，把表格显示到页面上
function showData() {
    var tab = "<table border='1' cellpadding='10'>";
    //添加表头
    tab += "<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>";
    for(var i=0;i<persons.length;i++) {
        //得到数组里面的每个json对象
        var person = persons[i];
        //得到每个json对象里面值
        var name = person.name;
        var age = person.age;
        var addr = person.addr;
        //生成表格
        tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";
    }
    tab += "</table>";
    //alert(tab);
    //把table表格的代码显示到页面上，使用innerHTML属性
    //得到div标签
    var div1 = document.getElementById("div1");
    //向div里面写table代码
    div1.innerHTML = tab;
}