2.Javaweb-javascript

mliu222~~發表於2020-10-08

WebJavaScript

javascript回顧

運算子

==：型別不一樣，值一樣，返回true

===：型別一樣，值一樣，返回true（絕對等於）

資料型別

NaN：屬於“number”型別，但它與所有的數值都不相等，包括自己
```
NaN === NaN; //false
isNaN(NaN);  //true
```
null：表示定義了，但沒有賦值

undefined：未定義

陣列

js中陣列的定義

var arr = [1, 23, 4, "js", true, 22.4, null];

java中陣列的定義

int[] a = {1, 2, 34};

陣列相關的操作

let arr = [1, 2, 33, "richard", true];
arr[1] = "js";
console.log(arr); //(5) [1, "js", 33, "richard", true]

// slice()：擷取Array的一部分，返回一個新的陣列，類似java中String的substring操作
// push()：將資料壓入陣列的尾部；
// pop()：彈出尾部的一個元素；
// unshift()：將資料壓入陣列的頭部；
// shift()：彈出頭部的一個元素；
// sort()：對陣列中的元素進行排序；
// reverse()：元素反轉；
// cancat()：將兩個陣列進行拼接（不修改原有陣列，會返回一個拼接的新陣列）；
// join():將陣列的元素通過給定的符號進行連線，返回連線的字串
arr.jion("-");  //"1-js-33-richard-true"

物件

var person = {
    name: "richard",
    age: 3,
    tags: ["js", "java", "web", true]  
};

"age" in person;  //true, 物件中的所有鍵都屬於字串，值可以是任意資料型別
"toString" in person;  //true, toString屬於person物件的原型具有的屬性
person.hasOwnProperty("toString");  //false, hasOwnProperty指person物件自身擁有的屬性

字串

let a = "student";
a[0] = "w";
console.log(a);  //student, 可以對字元陣列的單個賦值，但不會改變原有變數的值；

map

var map1 = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);
map1.get("tom");  //100
map1.set("admin", 123456); //Map(4) {"tom" => 100, "jack" => 90, "haha" => 80, "admin" => 123456}
map1.delete("jack");  //Map(3) {"tom" => 100, "haha" => 80, "admin" => 123456}

set：可以去重（無序、不重複的集合）

var set1 = new Set([2, 1, 3, 22, 1, 33, 3]);  //Set(5) {2, 1, 3, 22, 33}
set1.add(100);  //Set(6) {2, 1, 3, 22, 33, 100}
set1.has(33);  //true

控制迴圈

forin / forof

let arr = [1, 2, 33, "richard", true];

for (let index in arr) {
    console.log(index);
}  // 列印了 0,1,2,3,4（即列印了陣列的下標）

for (let index in arr) {
    console.log(arr[index]);
}  // 列印了 1,2,33,"richard",true

for (let value of arr) {
    console.log(value);
}  // 列印了 1,2,33,"richard",true

for (let number of set1) {
    console.log(number);
}  // 見下圖

for (let map1Element of map1) {
    console.log(map1Element);
}  // 見下圖

在這裡插入圖片描述

函式

函式的定義：arguments陣列引數

var abs = function (x) {
    console.log("x => " + x);
    for (let i = 0; i < arguments.length; i++) {
        // js會有一個預設的arguments陣列，用來接收函式的引數；
        console.log("arguments[" + i + "] => " + arguments[i]);
    }
};

abs(1, 23, "richard", true, 222);

在這裡插入圖片描述

ES6新特性：rest

function abs1(a, b, ...rest) {
    console.log("a => " + a);
    console.log("b => " + b);
    console.log("rest => " + rest);
}

abs1(1, 23, "richard", true, 222);

在這裡插入圖片描述

apply的使用：方法.apply(物件, 引數陣列)

function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth;
};

var richard = {
    name: "richard",
    birth: 2000,
    age: getAge
};

console.log(getAge.apply(richard, []));  // 20， 即使用richard物件去呼叫getAge()方法，getAge()方法中的this.birth指的是richard物件中的                                                  birth屬性

變數的作用域

let：定義區域性變數的關鍵字；const：定義常量的關鍵字

預設所有的全域性變數都繫結在window物件上

var x = "hello, javascript";
alert(window.x);  //彈出“hello, javascript”
window.alert(x);  //彈出“hello, javascript”

js實際上只有一個全域性作用域，任何變數（函式也可以視為變數），如果在函式的作用域內找不到，就會向外查詢；
由於所有的全域性變數都會繫結到window物件上，如果不同的js檔案使用了相同的全域性變數，就會引起衝突，如何避免？ – 一般是自己定義個獨有的全域性變數物件，將自己的全域性變數繫結到該物件上
```
var App = {};
App.name = "richard";
App.add = function (a, b) {
    return a + b;
};
```

json

json中物件使用大括號{}
json中陣列使用中括號[]
所有的鍵值對使用 key:value

JSON.stringify(物件)：注意：轉成json字串後，所有的key都是字串

var person = {
    name: "richard",
    age: 3,
    tags: ["js", "java", "web", true]
};
JSON.stringify(person);  //"{"name":"richard","age":3,"tags":["js","java","web",true]}"

JSON.parse(json字串)：json字串中，最外層和裡面要用單引號和雙引號區分

JSON.parse('{"name":"richard","age":3,"tags":["js","java","web",true]}')  //{name: "richard", age: 3, tags: Array(4)

ajax

原生的js方法：xhr非同步請求
jQuery封裝的方法：$(選擇器).ajax()
axios請求

原型

指定某個物件A的原型為物件B，型別java中的繼承（A為B的子類）

var Student = {
    name: "richard",
    age: 3,
    run: function () {
        console.log(this.name + " is running...");
    }
};
var xiaoming = {
    name: "xiaoming"
};

xiaoming.__proto__ = Student;

xiaoming.run();  // xiaoming is running...

繼承

ES6開始的新寫法

class Person {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert(this.name + ", hello~");
    }
};

var xiaoming = new Person("xiaoming");
xiaoming.hello();  // 彈出 xiaoming，hello~

class LittleKid extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert(this.name + "'s grade is " + this.grade);
    }
}
var xiaohong = new LittleKid("xiaohong", 5);
xiaohong.myGrade();  // 彈出 xiaohong's grade is 5

BOM

navigator物件：代表瀏覽器
screen物件：代表螢幕

location物件：代表當前頁面的URL資訊

location.assign("https://www.csdn.net/");  //代表從當前頁面設定新的url地址：https://www.csdn.net/

document物件：代表當前頁面的HTML DOM樹

document.cookie;  //獲取頁面的cookie
document.title;  //獲取網頁的title，比如百度的“百度一下，你就知道”
document.getElementById("id");  //根據id獲取文件物件

history物件：代表瀏覽器的歷史記錄
```
history.back;
history.forward;
```

DOM

瀏覽器網頁就是一個DOM樹形結構；

獲取dom元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h4>dom節點</h4>
<li>
    <p id="se" class="aa">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</li>

<script>
    document.getElementsByClassName("aa");  //HTMLCollection [p#se.aa, se: p#se.aa]
    document.getElementById("ee");  //<p id="ee">javaee</p>
    document.getElementsByTagName("p");  //HTMLCollection(3) [p#se.aa, p#ee, p#me, se: p#se.aa, ee: p#ee, me: p#me]
</script>
</body>
</html>

更新dom元素；

element.innerHTML = new html content  //改變元素的 inner HTML
element.attribute = new value  //改變 HTML 元素的屬性值
element.setAttribute(attribute, value)  //改變 HTML 元素的屬性值，可以設定任意屬性和值
element.style.property = new style  //	改變 HTML 元素的樣式

刪除dom節點元素：①先獲取父節點，②然後再刪除自己；
```
document.removeChild(element)  //刪除 HTML 元素
```

插入dom節點元素；

document.createElement(element)  //建立 HTML 元素
document.appendChild(element)  //新增 HTML 元素
document.replaceChild(element)  //替換 HTML 元素
document.write(text)  //寫入 HTML 輸出流
document.getElementById(id).onclick = function(){code}  //向 onclick 事件新增事件處理程式

jQuery

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.js" type="application/javascript"></script>
</head>
<body>

<h4>dom節點</h4>
<li>
    <p id="se" class="aa">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
    <a src="">a標籤</a><br/>
    <input type="button" id="submit" value="提交"/>
</li>

<script>
	// 通過#xx選擇id
    $("#submit").click(function () {
        alert("提交按鈕被點選了")
    });
    // 通過.xx選擇class
    $(".aa").click(function () {
        alert("javase 被點選了");
    });
    //通過tag名稱選擇tagName
    $("a").click(function () {
        alert("<a>標籤被點選了");
    });
</script>
</body>
</html>

可以通過jQuery修改dom，css，發起ajax請求等，可參考：https://jquery.cuishifeng.cn

好看的前端元件

ElementUI
Ant Design
Layer彈窗元件