JS＜dom、json＞

JS： Java  Script

一、特性

（1） 脚本语言：avaScript是一种解释型的脚本语言。不同于Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

（2）基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承(本身没有继承)，不支持多态，所以它不是一门面向对象的编程语言。

（3）弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

（4） 事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

（5）跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

1、Javascript代码要写在script标签内，script标签可以在文档内任意位置。

2、按钮  <button> </button>

<button id="btn">按钮</button>

<script>
    //1.获取按钮
    var btn1 = document.getElementById("btn");

    //2.绑定事件
    btn1.onclick=function(){
        //弹窗
        alert("HelloWorld");
    }
</script>

2、内部引入，外部引入[创建jswen文件]

<script>
    //内部js 可以放到html任意位置
    alert("我不困");
</script>
    <!--外部js
    使用script标签行引入,src:jc资源的位置-->
    <script src="demo.js"></script>

3、基本数据类型

不区分整数、小数，都是数值number类型的；

也不区分字符、字符串，单引号、双引号意思一样；

Boolean：true、false<0 "" null undefined NaN  false>

输出语句：console.log();

<!--基本数据类型-->
<script>
    //在js内，整数和小数都是number类型的
    var a = 10;
    console.log(a);

    console.log(typeof a);

    var b = 3.14;
    console.log(b);

    console.log("----------------------string------------------------------");

    //js内，单引号双引号都是用来表示字符串的
    var c = "你好";
    console.log(c);
    console.log(typeof c);

    c='我是中国人';

    console.log(c);
    console.log(typeof c);

    console.log("----------------------boolean------------------------------");

    var d = false;
    d = true;

    console.log(d);
    console.log(typeof d);
    //0 "" null undefined<声明变量但没有赋值的情况> NaN  false
    //只要不是上述内容就是true

    var b = 10;
    var c = "10";

    console.log(b == c);//true  自动转换类型再比较
    console.log(b === c);//false  带类型比较


</script>

4、函数

（1）内置函数    弹窗 alert

<!--内置函数-->
<script>
    //弹窗
    alert("666");

    //确定框
    var b = confirm("您确定要吃饭吗?");
    console.log(b);

    //输入框
    var s = prompt("请输入您的年龄:");
    console.log(s);

    var s = prompt("请输入您的地址","北京");
    console.log(s);


</script>

产生范围内随机数：  [m,n]
java:(int)(Math.random()*(n-m+1)+m);

 js : Math.floor(Math.random()*(n-m+1)+m)

(2) 声明函数    function 

<!--声明函数-->
<!--
    function  函数名(形参){
        函数内容
    }

1、通过函数名()进行调用
2、js中函数没有重载的概念，当有多个函数名字相同时，以最后声明的为准
3、如果没有给指定的形参传值,那么没那么没有值的形参值就是undefined
4、如果函数没有写返回值，那么执意接受值为undefined
    -->

<script>
    //函数声明
    function showMessage() {
        console.log("this is showMessage");
    }
    showMessage();//函数调用

    //有形参的函数
    function sum(a,b) {
        console.log(a+b);
    }
    //函数名+（）
    sum(10,20);

    sum(10);

    //有返回值的函数
    function isOuShu(num) {
        if(num%2==0){
            return true;
        }else{
            return false;
        }
    }
    var b = isOuShu(11);
    console.log(b);

    function isJiShu(num) {

        if(num%2!=0){
            console.log("是奇数");
        }else{
            console.log("不是奇数");
        }
    }
    //如果函数没有写返回值 那么执意接收 值为 undefined
    var c =   isJiShu(11);
    console.log(c);

</script>

(3)函数调用   通过函数名直接调用

5、对象

<!--对象-->
 <!-- 创建对象的方式一：
     var obj =  new Object();
       新增属性 并完成了对属性的赋值
       对象名.属性名 = 值；
    创建对象的方式二：
      var 对象名 = {
        属性名： 属性值,
        属性名： 属性值,
        属性名： 属性值
        ......
  }
  获取属性值： 对象名.属性名;
-->
<script>
/*
this
    如果直接在script标签内输出this ，window 代表整个浏览器窗口
    如果有对象调用函数，那么函数内的this 指向函数的调用者即当前的对象
 */
    //创建对象方式一：
    var obj = new Object();

        obj.username="李白";
        obj.age=20;
        obj.salary=9999.6;
    console.log(obj);
    console.log(typeof obj);

    console.log("-------------------------------------------------");

    //创建方式二:
    var obj1 = {
        "username=":"杜甫",
        "age":19,
        height:1.81
    };

    console.log("------------------------有行为的对象----------------------")

    var cat = {
        "catname":"小白",
        'age':1,
        'catchmouse':function () {
            console.log("小猫抓老鼠...");
        }
    };

    cat.catname();
    cat.catchmouse();

    console.log("-------------------------------------------------");

    var obj = {
        "name":"杜甫",
        "age":"20",
        "showName":function () {
            console.log(this);
            console.log(this.name);
        }
    };
    obj.showName();
    //定义函数 getName()
    function getName() {
        console.log(this);
        console.log(this.name);
    }
    var obj1 = {
        "name":"王安石",
        "getName":getName
    };
    var obj2 = {
        "name":"李清照",
        "getName":getName
    };
    obj1.getName();
    obj2.getName();


</script>

6、构造器创建对象

<!--构造器创建对象-->
<script>
    //js构造器本质  函数
    //构造器函数 默认 函数名的首字母大写
    function Person(username, age, salary, height) {
        this.username = username;
        this.age = age;
        this.salary = salary;
        this.height = height;
    }

    var p4 = new Person("苏轼", 29, 9779.3, 1.96);
    console.log(p4);

    console.log("-------------------------------------");
    var p3 = new Person("王安石", 19, 9999.3, 1.76);
    console.log("函数调用前：" + p3.username);//王安石

    //对象传递的是地址值
    function chang(e) {
        e.username = "安琪拉";
        console.log("函数调用中：" + e.username);//安琪拉
    }
    //调用函数
    chang(p3);
    console.log("函数调用后：" + p3.username);//安琪拉

</script>

7、数组

<script>
    //创建数组
    //方法一
    var arr1 = new Array(2);

    arr1[0]="王昭君";
    arr1[1]="安琪拉";
    arr1[2]="妲己";

    console.log(arr1);
    console.log(arr1.length);
    //方法二
    var arr2 = new Array();
    arr2[0]="李白";
    arr2[1]="杜甫";
    arr2[2]="王安石";
    arr2[3]="李商隐";

    console.log(arr2);
    console.log(arr2.length);
    /*
    内数组可以改变，一旦数组长度小于原有数组的数量，从前往后，舍弃多的元素
                             大与原有数组的数量，则自动补empty
     */
    arr2.length=2;
    console.log(arr2);
    console.log(arr2.length);


</script>
</body>
>
<!--数组中的函数-->
<script>
    //创建数组
    var arr = ["项羽","虞姬","孙悟空","猪八戒"]
    console.log(arr);
    console.log(arr.length);

    //添加元素
    arr.push("嫦娥","蔡文姬","澜");
    console.log(arr);
    console.log(arr.length);


    //移除最后一个元素
    arr.pop();
    arr.pop();
    console.log(arr);
    console.log(arr.length);

    //元素反转
    arr.reverse();
    console.log(arr);

    //截取数组元素，数组名，slice（开始下标，删除的数量）
    arr.slice(1,2)
    console.log(arr);

    //删除指定下标的元素，数组名。splice(开始下标，删除的数量)
    arr.splice(1,2)
    console.log(arr);

    //将数组元素变为字符串，按照指定的分隔符进行填充
    var arr1 = ["a","b","c","d"];
    var s = arr.join(",");
    console.log(arr);




</script>

</body>
<!--数组的遍历-->
<script>
    var arr = new Array("李商隐","李白","杜甫","王安石");

    console.log(arr);

    //遍历方式一
    for(var index = 0;index <arr.length;index++){
        console.log(arr[index]);
    }

    //遍历方式二
    //放一个形参 代表数组元素
    arr.forEach(function (a) {
        console.log(a);
    });
    //两个形参，第一个形参代表元素，第二个元素代表下标
    arr.forEach(function (e,i) {
        console.log(e+"---"+i)
    });
    //在数组内，没有类型限制，任意数据都可以直接添加
    var arr1 = [10,20,30,"安琪拉",true];
    console.log(arr1);
</script>

7、JSON

<!--  json:数据的载体  数据的格式  -->
<script>
    //商品信息的json
    //价格 名称 数量 编号 产地
    var json = {
        "id":1,
        "price":100,
        "name":"官方皮肤",
        "area":"腾讯"
    };

    //人的信息
    var json = {
        "username":"李白",
        "age":20,
        "wife":{
            "username":"王昭君",
            "age":20,
        },
        "hobby":[
            "游泳",
            "读书",
            "喝酒" ,
            "写诗"
        ]
    };
</script>


</body>
<!--json与字符串的转换-->
<script>
    //将json对象转为字符串
    var s = JSON.stringify(json);
    console.log(s);
    console.log(typeof s);

    //将字符串对象转为json
    var str = '{"username":"李白","price":"100,"name":"皮肤"}';
    var parse = JSON.parse(str);
    console.log( parse);
    console.log(typeof parse);

</script>

8、DOM

DOM：Document  Object  Model 文档对象模型

document(对象):代表了整个文档
<body>
<input type="text" name="username">  <br>
<input type="text" name="username">  <br>
<input type="text" class="one">  <br>
<input type="text" class="one" id="first">  <br>
<script>
    //根据id获取指定的元素
    var elementById = document.getElementById("fiest");
    console.log(elementById);
    //根据标签名获取指定的元素
    var elementsByTagName = document.getElementsByTagName("input");
    for (var i = 0; i < elementsByTagName; i++) {
        console.log(elementsByTagName[i]);
    }
    //根据类名获取指定的元素
    var elementsByClassName = document.getElementsByClassName("one");
    for (var i = 0; i < elementsByClassName; i++) {
        console.log(elementsByClassName[i]);
    }
    //根据name属性获取指定的元素
    var elementsByName = document.getElementsByName("username");
    for (var i = 0; i < elementsByName.length; i++) {
        console.log(elementsByName[i]);
    }

    /*
    如果此选择器有多个标签满足要求时，取第一个满足要求的数据
        想要全部列出用document.querySelectorAll();
     */
    //获取id名为fiest的元素
    var element = document.querySelector("#first");
    console.log(element);
    //获取类名是one的元素
    var element1 = document.querySelector(".one");
    //querySelectorAll获取所有的数据
    var InputElement = document.querySelector("input");
</script>

</body>
<!--节点测试-->
<div id="box">
    1 <input type="text" name="username"> <br>
    2 <input type="text" name="username" id="three"> <br>
    3 <input type="text" name="username" id="two"> <br>
</div>
4 <input type="text" class="one" id="first"> <br>

<script>
    //获取box div
    var box = document.querySelector("#box");
    console.log(box);
    //获取所有的子元素
    var children = box.children;
    console.log(children);
    //获取父节点
    var two = document.querySelector("#two");
    var parentElement = two.parentElement;
    console.log(parentElement.parentElement.parentElement);
    //获取所有的input
    //选择器可以组合使用
    //#box input 去找 id为box的 标签内 名为 input的子标签
    var querySelectorAll = document.querySelectorAll("#box input");
    console.log(querySelectorAll);
    //获取 id为three的 input
    var three = document.querySelector("#three");
    console.log(three);
    //获取前一个兄弟
    console.log(three.previousElementSibling.previousElementSibling);
    //获取后一个兄弟
    console.log(three.nextElementSibling.nextElementSibling);
</script>

</body>
<!--属性操作-->
<a href="Test.html" id="aid">点击一下</a>  <br>
<input type="text" value="666" id="input_id">
<script>

    //获取a标签
    var element = document.querySelector("#aid");
    //获取属性值
    //元素.属性名
    console.log(element.href);
    //设置属性值
    // 元素.属性名=值;
    element.href="http://www.baidu.com";
    var element1 = document.querySelector("#input_id");
    console.log(element1.value);
    element1.value=999;

</script>

</body>
<!--设置获取文本-->
    <style>
        #box{
            height: 200px;
            width: 200px;
            background-color: orange;
        }
    </style>
<div id="box">123</div>
<script>
    /*
    innerText
    innerHTML
    同：
        通过元素.innerText/innerHTML 获取文本信息

     不同：
        元素.innerText=值;
        元素.innerHTML=值;
      innerHTML可以解析 值中的 html标签  innerText 不能解析
     */
    var box = document.querySelector("#box");
    /* console.log(box.innerText);
     box.innerText='<h1>你好世界</h1>';*/
    console.log(box.innerHTML);
    box.innerHTML='<h1>你好世界</h1>';
</script>

</body>
<!--节点的操作-->
<div>
    <p id="p1">AA1</p>
    <p id="p2">AA2</p>
    <p id="p3">AA3</p>
</div>
<script>
    //通过js代码 新增节点
    //1、获取boxdiv
    document.querySelector(".box");
    //2、创建新的节点
    document.createElement("p");
    newP.innerText="AA6";
    //3、将新的节点添加到div内
    box.appendChild(newP);
    //4、删除节点
    var p2 = document.quertSelector("#p2");
    //删除自己
    p2.remove();
    //再次创建新节点
    var newP2 = document.querySelector("p");
    newP2.innerText="newP2新节点";
    //在指定的子节点之前，插入新的子节点
    box.insertBefore(newP2,p2);


</script>

9、事件
 

    <title>javaScript的事件驱动</title>
</head>
<body>
<!--事件一：按钮 单击 事件-->
<button onclick="alert(666)">点我</button>
<br>
<button onclick="show()">点我</button>
<br>
<button id="btn">再点我ing</button>
<script>
    /*
    事件绑定三种方式：
        1. 直接在元素上绑定 写js代码
        2. 直接在元素上绑定 引用js的函数
        3. 通过匿名函数的方式对元素进行事件绑定
     */
    function show(a) {
       console.log(a);
    }
    //获取button
    var btn = document.querySelector("#btn");
    btn.onclick = function () {
        alert("你点的爽不爽......")
    }
</script>

</body>
<!--事件二：双击 焦点事件-->
<span>请您输入名字</span> <input type="text" id="in">   <br>
<button id="btn">点我</button>
<script>
    var btn = document.querySelector("#btn")
    //双击事件
    btn.ondblclick=function () {
        alert("终究还是选择了你");
    }

    var input = document.querySelector("#in");
    input.onfocus = function () {
        console.log("获取焦点了");
    };

    input.onblur = function () {
        console.log("失去焦点了");
    };

    //内容发生改变，触发onchange
    input.onchange = function () {
        console.log("onchange 触发了....");
    };

    //键盘被按下
    window.onkeydown = function () {
        console.log("键盘被按下");
        //获取键盘输入 console.log(event.key);
    };
</script>

</body>
<!--事件三：鼠标事件-->
<style>
    div{
        height: 200px;
        width: 200px;
        background-color: orange;
    }
</style>
<div>

</div>
<script>
    var div = document.querySelector("div");
    div.onmousedown=function () {
        console.log("鼠标被按下了");
    };

    div.onmouseup=function () {
        console.log("鼠标被抬起了");
    };

    div.onmousemove=function () {
        console.log("鼠标移动了");
    };

    div.onmouseout=function () {
        console.log("鼠标离开了");
    };

    div.onmouseover=function () {
        console.log("over");
    }
</script>