JavaScript

1.基本语法:

1. 引入JavaScript：
   可以直接在head标签内写。

<script>alert("hello world");</script>

引入外部资源：
注：必须要写两个标签，不能自闭和。

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

---

2. 变量和打印：
   JavaScript是弱类型语言，其变量类型设置为var即可，它会自己自动的依据值进行类型转换。
   打印用console.log();相当于sout

    <script>
        var n =1;
        console.log(n);
    </script>

我们可以在浏览器控制台的source处进行打断点调试

---

3. 数据类型：
   比较运算符：=，==（只比较值，类型不同结果也为true）， ===（含义为绝对等于，必须要值和类型都要相同）特别的：有一个NaN它与任何值包括它自己本身都不相等，只能通过isNaN（NaN）这个方法来判断是否是NaN。
   null和undefined：一个为空，一个是未定义。
   数组：js中的数组中的值不一定要为同一类型，可以为不同的类型如：var arr = [1,2,“hello”]; 当出现数组下标越界异常的时候会显示undefined。
   对象：用花括号{}括起来，数组是用[ ]括起来的。例： var person = {name : “www”,age : 20 }，是以键值对的形式写的，并且在浏览器控制台的console内可以通过 person.age 来获得值。
   注意变量名不可以以数字开头。

---

4. 数组类型
   js的数组长度是动态的，长度可以变长变短.
   数组的slice(x,y)方法：可以截取原数组的x位到y位（左闭右开），获得一个新的数组。
   sort（）方法：排序。

---

5. 对象类型
   属性使用xxxx：xxxx的形式写，不同的属性之间用，隔开，最后一个属性后不用加逗号。
   可以动态的对对象的属性进行删减，用delete去删除：delete person.name。
   可以动态的对对象的属性进行添加，直接写：person.think = “haha”。

---

中括号代表数组，花括号代表对象！

2.函数：

2.1 函数定义：

1. 第一种表示方法：直接写

function a(x) {
            if (x>0){
                console.log(x)
            }else{
                console.log("小于0")
            }
        }

---

2. 第二种方法：类似于匿名内部类，是一个内部的函数,相当于把值赋给了v

let v = function (x) {
            if (x > 0) {
                return x;
            } else {
                return "小于0";
            }
        }

return代表函数结束，返回结果。

---

3. arguments关键字：
   因为js中可以插入很多的值，但是输出的时候只能输出第一个值，这时js中提供一个关键字arguments，可以获得输入的所有参数，相当于一个数组。

function d(x) {
            for (var i = 0;i<arguments.length;i++){
                console.log(arguments[i]);
            }
            return x;
        }

---

4. rest关键字
   我们可以用arguments关键字获得输入参数的数组，但是我们只有通过遍历这个数组才能获得除了已定义外的其他所有值，ES6引入了新特性：rest关键字，使用了这个关键字我们就可以获得除了自己定义外的传入的参数值。
   注：
   这里如果不设置return或者需要return的值为空，则会在控制台返回undefined。
   而且rest必须写在参数列表的最后要加…

function g(x,a,...rest) {
            console.log(x);
            console.log(a);
            console.log(rest);
            return a;
        }

2.2 变量作用域

1. js函数内定义的变量的作用域只在函数内，当变量重名时，采取“就近原则”，内部函数会屏蔽外部函数。

function f() {
            var x = 2;
            function h(){
                var x = "s";
                console.log(x);
            }
            console.log(x);
            h();
        }

---

2. js会自动提升声明，但不会提升赋值，如：此代码中js自动提升了y的声明，所以结果中只显示了y没有定义而不是没找到y。

function j() {
            var x = 'x'+y;
            console.log(x);
            var y = 8;
        }

结果：
j()
xundefined
undefined

---

3. 默认所有的全局变量都绑定在windows对象下，很多方法比如alert也是绑定在windows对象下（用windows.alert调用）
   为了防止使用相同全局变量而导致的冲突问题，我们使用自定义的全局变量来解决。如下：

        var www = {};
        www.name = "djfkls";
        www.add=function(a,b){
            return a+b;
        }

我们将自己的代码放入自己定义的唯一命名空间内（JQuery就是这么定义的）

---

4. let关键字
   ES6新特性：用于解决局部作用域冲突问题，比var更严谨。

---

5. const关键字
   ES6新特性：用于定义常量，在这个关键字还没出现之前使用大写字母定义常量。

2.3 方法

方法就是把函数放在对象内部。
注：我们在调用方法时一定要带上方法的括号。
写法一：

var www = {
            name:"www",
            birth:2001,
            age:function () {
                let year = new Date().getFullYear();
                return year-this.birth;
            }
        }
        www.name
        www.age()

写法二：
单独调用getage()会报错，因为这个this指的是调用此方法的对象。

function getage() {
            let year = new Date().getFullYear();
            return year-this.birth;
        }

        var www = {
            name:"www",
            birth:2001,
            age:getage
        }

注：调用时要使用www.age()调用（方法调用一定要带括号！！）

3. 内部对象

3.1 json

1. 定义：
   JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
   在早期大家都习惯用xml来传送数据，xml是 被设计用来结构化、存储以及传输信息。但是它写起来比较繁琐，后出现了拥有简洁和清晰结构的json代替它成为数据交换语言。
   在JavaScript一切皆为对象，任何js支持的类型都可以用json表示。

格式：

• 对象用 { }
• 数组用 [ ]
• 所有键值对用 key：value

---

2. 转换：
   2. 1. 将js对象转换为json：使用stringify（）方法。

<script>
        var a ={
            name : 'www',
            age: 23,
            sex : 'woman'
        }
        console.log(a)

        let s = JSON.stringify(a);
    </script>

可以明显看到，经过json的转换后，原来的js对象被转换为了一个字符串，并且每个属性和对应的属性都被双引号包裹

2. 将json字符串转化为JavaScript对象：
   使用parse（）方法。

var b = '{"name" : "www","age": "23","sex ": "woman"}';
        let parse = JSON.parse(b);

4.DOM

dom：节点树

几个查找元素的方法：

1. 通过 id 查找 HTML 元素

<p id="p1">hhh</p>
<script>
let elementById = document.getElementById("p1");
</script>

2. 通过标签名查找 HTML 元素

<h1 >www</h1>
<script>
let elementsByTagName = document.getElementsByTagName("h1");
</script>

3. 通过类名查找 HTML 元素

<p class="p2">ppp</p>
<script>
let elementsByClassName = document.getElementsByClassName("p2");
</script>

4.1 获取表单的值

如果直接是document.getElementById(“name”);则打印出来的是整个标签，必须要在getById之后获取它的value，此时获取的才是标签内的值。

姓名：<input type="text" id="name">
<script>
    let elementById = document.getElementById("name");
    console.log(elementById.value);
</script>