day02（JavaScript）

1. JavaScript
    JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)
2. js的特性
    ① 脚本语言  运行在客户端
    ② 基于对象
    ③ 弱类型
    ④ 事件驱动
    ⑤ 跨平台性
3. js的HelloWorld
    需求：在网页上创建一个按钮，当用户单击这个按钮的时候，给出一个警示框
       ① HTML代码
        <input type="button" value="点我" id="btn01"/>
       ② js代码
            位置：head标签内
            <script>
                window.onload=function () {
                    var btn01=document.getElementById("btn01");
                    btn01.onclick=function () {
                        alert("你点到我了...");
                    }
                }
            </script>
4. js的引入方式
    4.1 内部js
        script标签可以在html代码的任意位置
        代码解释：
            window.onload=function () {}   网页加载完后执行的函数

            var btn01=document.getElementById("btn01");   从文档对象中根据id属性值获得一个Element(元素)

            btn01.onclick=function () {}   为btn01这个元素绑定单击事件，当用户单击元素的时候，执行后面的函数

            alert("你点到我了1234567890001111...");    警示框
    4.2 外部js
        新建一个js文件(后缀名为.js的文件)，将js代码写在js文件内，在html文件内引入js即可
        <script src="js文件的路径"></script>
        注意：此时script标签已经引入一个js文件，那么该标签内的js代码将失效
5. js的数据类型
    5.1 基本数据类型
        数值型：  number   10 20 1.5 1.34 ...
        字符串：  string   "10"  "abc"  "尚硅谷"...
        布尔型：  boolean   true  false
            js中其他数据类型都可以和布尔型自动转化
                空串/0/undefined/null/NaN   都是false,其他都是true
        特殊的值：undefined/null/NaN
    5.2 引用数据类型
        对象
        数组
6. 变量的声明
    var 变量名;
    变量名=值;
    var 变量名=值;
    alert(typeof 变量)
7. 函数
    7.1 内置函数
        alert("警示内容");   警示框
        confirm("提示内容");   确认框,有返回值，确定是true,取消是false
        console.log("输出内容"+flag);
    7.2 自定义函数
        ① 有名函数
            位置：script标签下
            语法：function 方法名(形参列表){代码块}
            无参无返回值
                function fun01(){
                    console.log("这是fun01函数")
                }
            有参无返回值
                function fun02(a,b,c,d){
                    console.log("这是fun02函数"+a+b+c+d)
                }
            有参有返回值
                function fun02(a,b,c,d){
                    console.log("这是fun02函数"+a+b+c+d)
                    return 值;
                }
        ② 匿名函数
            语法：
            function(形参列表){代码块}
            应用场景：
                a. 在事件绑定位置
                    btn01.onclick=function () {}
                b. 可以将函数看作是一个对象
                    var fun03=function(){
                        console.log("这是fun03函数")
                    }
    7.3 函数的调用
        var result=函数名(实参列表)
        注意：
            实参少于形参，多出来的形参是未定义
            实参多于形参，多出来的实参接收不到
8. 对象
    8.1 通过new关键字
        对象的创建
            var obj01=new Object();
        属性和属性值的设置
            obj01.id=101;
            obj01.name="张三";
            obj01.abc="北京";
        属性值的获取
            console.log(obj01.id)
            console.log(obj01.name)
            console.log(obj01.abc)
            console.log(obj01.age)
        函数的设置
            obj01.eat=function () {
                alert(this.name+"在eat");
            }
        函数的调用
            obj01.eat()
    8.2 通过{}
        对象的创建
        var obj02={
            id:102,
            name:"李四",
            age:18,
            eat:function () {
                alert("eat")
            },
            run:function () {
                alert("run")
            }
        }
        使用方式和上述一致
9. 数组
    9.1 数组的创建方式
        ① 通过new关键字
            var arrs=new Array()
        ② 通过[]
            var arrs=[10,"java",12.5,true]
    9.2 数组的基本操作
        添加数据
            arrs[0]=10;
            arrs[1]="java";

            arrs.push(12);
            arrs.push("mysql");
        取值
            console.log(arrs[0])
            arrs.length;   获取数组长度
            arrs.reverse();  数组的反转
            arrs.join;(分割符)  数组元素的拼接       
            arrs.splice(start,count);   数组元素的删除
10. JSON
    用途：跨平台数据传输
    json的格式：{} 对象   []  数组
        ① 简单json对象
                var json01={
                    id:103,
                    name:"王五",
                    age:18,
                    address:"北京"
                }
           console.log(json01.id)
           console.log(json01.name)
           console.log(json01.age)
           console.log(json01.address)
        ② 稍微复杂json对象
            var json02={
                    id:103,
                    name:"王五",
                    age:18,
                    address:"北京",
                    computer:{
                        id:501,
                        brand:"联想",
                        price:5000,
                    }
                }
                console.log(json02.id)
                console.log(json02.name)
                console.log(json02.computer.id)
                console.log(json02.computer.brand)
                console.log(json02.computer.price)
        //③ 简单的json数组
                var json03=[10,20,"java"];
                for (var i = 0; i < json03.length; i++) {
                    console.log(json03[i])
                }
                console.log("-------------------------")
        //④ 复杂数组(对象数组)
                var json04=[{
                    id:101,
                    name:"张三",
                    age:18,
                    address:"北京"
                },{
                    id:102,
                    name:"李四",
                    age:18,
                    address:"北京"
                },{
                    id:103,
                    name:"王五",
                    age:18,
                    address:"北京"
                }]
                for (var i = 0; i < json04.length; i++) {
                    console.log(json04[i].id)
                    console.log(json04[i].name)
                }
                console.log("---------------------------")
        //⑤ 复杂对象
                var json05={
                    id:101,
                    name:"张三",
                    computers:[{
                        id:501,
                        brand:"联想",
                        price:5000,
                    },{
                        id:502,
                        brand:"华为",
                        price:6000,
                    }]
                }
                console.log(json05.id)
                console.log(json05.name)
                for (var i = 0; i < json05.computers.length; i++) {
                    console.log(json05.computers[i].id)
                    console.log(json05.computers[i].brand)
                    console.log(json05.computers[i].price)
                }
    json格式的字符串(java)和json对象(js)之间的转化(自动转化)
        var str=JSON.stringify(json05);
        var parse = JSON.parse(str);
11. DOM操作
    功能：对网页文档的内容进行增删改查
    本质：树形结构
    角色：
        文档   Document
        标签   Element(元素)
        属性   Attribute
        标签体  Text
        注释
    11.1 查询
        ① 在整个文档范围内查询元素节点
            document.getElementById("username");   从文档中找id属性值为username的元素(标签)
            document.getElementsByTagName("input");
            document.getElementsByName("aaa");
            document.getElementsByClassName()
        ②  在具体元素节点范围内查找子节点
            element.children
            element.firstElementChild
            element.lastElementChild
        ③ 查找指定元素节点的父节点
            element.parentElement
        ④ 查找指定元素节点的兄弟节点
            element.previousElementSibling
            element.nextElementSibling
    11.2  操作标签体的内容(双标签)
        element.innerText   获得纯文本
        element.innerHTML   获得纯文本+html标签

        element.innerText="纯文本"
        element.innerHTML="文本中的标签可以被识别"
    11.3  操作属性(单标签和双标签都可以)
        element.属性名     取属性值
        element.属性名=值   赋属性值
    11.4 dom操作之新建和删除
        document.createElement("li");           新建一个元素对象
        document.createTextNode("乌克兰");       新建一个文本节点
        citys.appendChild(li);                  将li追加到citys的末尾
        citys.insertBefore(li,wh);              li插入到wh的前面
        citys.replaceChild(li,wh);              li替换wh
        citys.remove()                          删除citys
12. 事件绑定
    12.1 事件的绑定方式
        ① 动态绑定
            在js代码内获得需要绑定的元素对象
                var btn01=document.getElementById("btn01");
            为该元素绑定事件类型
                btn01.onclick=function () {}
        ② 静态绑定
            在需要添加事件的元素上，设置属性
                <input type="button" value="按钮" onclick="fun01(10,'java')">
            准备一个有名函数
                function fun01(a,b) {
                    alert("调用到fun01函数"+a + b);
                }
    12.2 事件的类型
        onclick   单击事件
        ondblclick   双击事件

        事件对象  event
        事件作用在的那个元素对象  event.target