JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝

趕星而至發表於2021-02-22
JavaScript物件封裝

知識點梳理

課堂講義

1、JavaScript物件導向

1.1、物件導向介紹

  • 在 Java 中我們學習過物件導向，核心思想是萬物皆物件。

  • 在 JavaScript 中同樣也有物件導向。思想類似。

 

 

1.2、類的定義和使用

  • 結構說明

 

 

  • 程式碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>類的定義和使用</title>
    </head>
    <body>
        
    </body>
    <script>
        //定義Person類
        class Person{
            //構造方法
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
    ​
            //show方法
            show(){
                document.write(this.name + "," + this.age + "<br>");
            }
    ​
            //eat方法
            eat(){
                document.write("吃飯...");
            }
        }
    ​
        //使用Person類
        let p = new Person("張三",23);
        p.show();
        p.eat();
    </script>
    </html>

1.3、字面量類的定義和使用 ***

  • 結構說明

     

     

    • 這個其實是直接建立了一個物件

    • 在定義類裡邊的變數和方法的時候，直接就建立了這個類的物件

    • 字面量：就是從程式碼字面意思就知道是啥型別

    • 而物件的字面量就是一對大括號 意思就是，以後我們看到給變數賦值時，等號右邊是一對大括號，那就知道宣告的這個變數就是一個物件

  • 程式碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字面量定義類和使用</title>
    </head>
    <body>
        
    </body>
    <script>
        //定義person
        let person = {
            name : "張三",
            age : 23,
            hobby : ["聽課","學習"],
    ​
            eat : function() {
                document.write("吃飯...");
            }
        };
    ​
        //使用person
        document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
        person.eat();
    </script>
    </html>

1.4、繼承

  • 繼承：讓類與類產生子父類的關係，子類可以使用父類有許可權的成員。

  • 繼承關鍵字：extends

  • 頂級父類：Object

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>繼承</title>
    </head>
    <body>
        
    </body>
    <script>
        //定義Person類
        class Person{
            //構造方法
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
    ​
            //eat方法
            eat(){
                document.write("吃飯...");
            }
        }
    ​
        //定義Worker類繼承Person
        class Worker extends Person{
            constructor(name,age,salary){
                super(name,age);
                this.salary = salary;
            }
    ​
            show(){
                document.write(this.name + "," + this.age + "," + this.salary + "<br>");
            }
        }
    ​
        //使用Worker
        let w = new Worker("張三",23,10000);
        w.show();
        w.eat();
    </script>
    </html>

1.5、小結

  • 物件導向

    把相關的資料和方法組織為一個整體來看待，從更高的層次來進行系統建模，更貼近事物的自然執行模式。

  • 類的定義

    class 類{} 字面量定義

  • 類的使用

    let 物件名 = new 類名(); 物件名.變數名 物件名.方法名()

  • 繼承

    讓類和類產生子父類關係，提高程式碼的複用性和維護性。

    子類 extends 父類

    Object 頂級父類

2、JavaScript內建物件

2.1、Number

  • 方法介紹

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number</title>
</head>
<body>
    
</body>
<script>
    //1. parseFloat()  將傳入的字串浮點數轉為浮點數
    document.write(Number.parseFloat("3.14") + "<br>");
​
    //2. parseInt()    將傳入的字串整數轉為整數
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 從數字開始轉換，直到不是數字為止
    
    
    // 3. isNaN()  判斷某個東西是否是  非數字 
    // not a number ： 非數字
    console.log(Number.isNaN(NaN)); // true
    console.log(Number.isNaN(1)); // false
​
</script>
</html>

2.2、Math

  • 方法介紹 ： random* **

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>
<body>
    
</body>
<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把數四捨五入為最接近的整數
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 隨機數,返回的是0.0-1.0之間範圍(含頭不含尾)
    document.write(Math.random() + "<br>"); // 隨機數
    
    //5. pow(x,y) 冪運算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>

2.3、Date

  • 方法說明

    • 構造方法

     

     

    • 成員方法

     

     

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
    
</body>
<script>
    //構造方法
    //1. Date()  根據當前時間建立物件
    let d1 = new Date();
    document.write(d1 + "<br>");
​
    //2. Date(value) 根據指定毫秒值建立物件
    let d2 = new Date(10000);
    document.write(d2 + "<br>");
​
    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根據指定欄位建立物件(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "<br>");
​
    //成員方法
    //1. getFullYear() 獲取年份
    document.write(d3.getFullYear() + "<br>");
​
    //2. getMonth() 獲取月份 (0-11:代表1-12月)
    document.write(d3.getMonth() + "<br>");
​
    //3. getDate() 獲取天數
    document.write(d3.getDate() + "<br>");
    document.write(d1.getDay() + "<br>");//獲取周幾（0-6：週日-週六）
​
    //4. toLocaleString() 返回本地日期格式的字串
    document.write(d3.toLocaleString());
</script>
</html>

2.4、String

  • 方法說明

    • 構造方法

     

     

    • 成員方法 charAt，indexOf，subString

     

     

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</title>
</head>
<body>
    
</body>
<script>
    //1. 構造方法建立字串物件
    let s1 = new String("hello");
    document.write(s1 + "<br>");
​
    //2. 直接賦值
    let s2 = "hello";
    document.write(s2 + "<br>");
​
    //屬性
    //1. length   獲取字串的長度
    document.write(s2.length + "<br>");
​
    //成員方法
    //1. charAt(index)     獲取指定索引處的字元
    document.write(s2.charAt(1) + "<br>");
​
    //2. indexOf(value)    獲取指定字串出現的索引位置
    document.write(s2.indexOf("l") + "<br>");
​
    //3. substring(start,end)   根據指定索引範圍擷取字串(含頭不含尾)
    document.write(s2.substring(2,4) + "<br>");
​
    //4. split(value)   根據指定規則切割字串，返回陣列
    let s3 = "張三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }
​
    //5. replace(old,new)   使用新字串替換老字串
    let s4 = "你會不會跳傘啊？讓我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "<br>");
</script>
</html>

2.5、RegExp ***

  • 正規表示式：是一種對字串進行匹配的規則

  • 常用在登陸、註冊的表單校驗

 

 

  • 方法說明

    • 構造方法&成員方法

     

     

    • 規則

     

     

    • [] 多選一

    • {}某個規則重複出現的次數

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegExp</title>
</head>
<body>
    
</body>
<script>
    //1.驗證手機號
    //規則：第一位1，第二位358，第三到十一位必須是數字。總長度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888") + "<br>");
​
    //2.驗證使用者名稱
    //規則：字母、數字、下劃線組成。總長度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123"));
</script>
</html>

2.6、Array ***

  • 成員方法：push，pop

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
</head>
<body>
    
</body>
<script>
​
    let arr = [1,2,3,4,5];
​
    //1. push(元素)    新增元素到陣列的末尾
    arr.push(6);
    document.write(arr + "<br>");
​
    //2. pop()         刪除陣列末尾的元素
    arr.pop();
    document.write(arr + "<br>");
​
    //3. shift()       刪除陣列最前面的元素
    arr.shift();
    document.write(arr + "<br>");
​
    //4. includes(元素)  判斷陣列中是否包含指定的元素
    document.write(arr.includes(2) + "<br>");
​
    //5. reverse()      反轉陣列元素
    arr.reverse();
    document.write(arr + "<br>");
​
    //6. sort()         對陣列元素排序
    arr.sort();
    document.write(arr + "<br>");
​
</script>
</html>

2.7、Set

  • JavaScript 中的 Set 集合，元素唯一，存取順序一致

  • 方法說明

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set</title>
</head>
<body>
    
</body>
<script>
    // Set()   建立集合物件
    let s = new Set();
​
    // add(元素)   新增元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");
​
    // size屬性    獲取集合的長度
    document.write(s.size + "<br>");    // 3
​
    // keys()      獲取迭代器物件
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st.next().value + "<br>");
    }
​
    // delete(元素) 刪除指定元素
    document.write(s.delete("c") + "<br>");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "<br>");
    }
</script>
</html>

2.8、Map

  • JavaScript 中的 Map 集合，key 唯一，存取順序一致

  • 方法說明

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    
</body>
<script>
    // Map()   建立Map集合物件
    let map = new Map();
​
    // set(key,value)  新增元素
    map.set("張三",23);
    map.set("李四",24);
    map.set("李四",25);
​
    // size屬性     獲取集合的長度
    document.write(map.size + "<br>");
​
    // get(key)     根據key獲取value
    document.write(map.get("李四") + "<br>");
​
    // entries()    獲取迭代器物件
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et.next().value + "<br>");
    }
​
    // delete(key)  根據key刪除鍵值對
    document.write(map.delete("李四") + "<br>");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et2.next().value + "<br>");
    }
</script>
</html>

2.9、Json ***

  • JSON(JavaScript Object Notation)：是一種輕量級的資料交換格式

    • 它是基於 ECMAScript 規範的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料

    • 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於人閱讀和編寫，同時也易於計算機解析和 生成，並有效的提升網路傳輸效率

     

     

  • 方法說明

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
    
</body>
<script>
    //定義天氣物件
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };
​
    //1.將天氣物件轉換為JSON格式的字串
    let str = JSON.stringify(weather);
    document.write(str + "<br>");
    //{"city":"北京","date":"2088-08-08","wendu":"10° ~ 23°","shidu":"22%"}
    //json: key和value都必須是以雙引號包裹，value如果是數字可以省略
    //2.將JSON格式字串解析成JS物件
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("溫度：" + weather2.wendu + "<br>");
    document.write("溼度：" + weather2.shidu + "<br>");
</script>
</html>

  • json分析圖：

     

     

2.10、表單校驗 ***

  • 案例說明

 

 

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單校驗</title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <div class="login-form-wrap">
        <h1>黑馬程式設計師</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="註冊">
        </form>
    </div>
</body>
<script>
    //1.為表單繫結提交事件
    // 表單的submit按鈕一旦點選，會先去觸發onsubimit事件對應的處理函式:
    // (1) 如果處理函式返回的是false，那就不會提交表單  
    // (2) 如果處理函式返回的是true，那就會提交表單  （提交表單：跳轉到form的action對應的url）
    document.getElementById("regist").onsubmit = function() {
        //2.獲取填寫的使用者名稱和密碼
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
​
        //3.判斷使用者名稱是否符合規則  4~16位純字母
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)) {
            alert("使用者名稱不符合規則，請輸入4到16位的純字母！");
            return false;
        }
​
        //4.判斷密碼是否符合規則  6位純數字
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)) {
            alert("密碼不符合規則，請輸入6位純數字的密碼！");
            return false;
        }
​
        //5.如果所有條件都不滿足，則提交表單
        return true;
    }
    
</script>
</html>

2.11、小結

  • 內建物件是 JavaScript 提供的帶有屬性和方法的特殊資料型別。

  • 數字日期 Number Math Date

  • 字串 String RegExp

  • 陣列集合 Array Set Map

  • 結構化資料 JSON

3、JavaScript BOM

  • BOM(Browser Object Model)：瀏覽器物件模型。

  • 將瀏覽器的各個組成部分封裝成不同的物件，方便我們進行操作。

 

 

3.1、Windows視窗物件

  • 定時器 ***

    • 唯一標識 setTimeout(功能，毫秒值)：設定一次性定時器 （延時定時器）

      • 第一個引數，只需要傳遞函式名即可，不需要呼叫

    • clearTimeout(標識)：取消一次性定時器

    • 唯一標識 setInterval(功能，毫秒值)：設定迴圈定時器 （間隔定時器）

      • 第一個引數，只需要傳遞函式名即可，不需要呼叫

    • clearInterval(標識)：取消迴圈定時器

  • 載入事件 ***

    • window.onload：在頁面載入完畢後觸發此事件的功能

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window視窗物件</title>
    <script>
        //一、定時器
        function fun(){
            alert("該起床了！");
        }
    
        //設定一次性定時器
        //let d1 = setTimeout("fun()",3000);//d1是定時器的id
        let d1 = setTimeout(fun,3000);//推薦寫法
        //取消一次性定時器
        //clearTimeout(d1);
    
        //設定迴圈定時器
        //let d2 = setInterval("fun()",3000);
        let d2 = setInterval(fun,3000);//推薦寫法
        //取消迴圈定時器
        //clearInterval(d2);
    
        //載入事件：當body程式碼解析完相當於介面載入完成
        window.onload = function(){
            let div = document.getElementById("div");
            alert(div);
        }
    </script>
</head>
<body>
    <div id="div">dddd</div>
</body>
<!-- <script>
    //一、定時器
    function fun(){
        alert("該起床了！");
    }
​
    //設定一次性定時器
    //let d1 = setTimeout("fun()",3000);
    //取消一次性定時器
    //clearTimeout(d1);
​
    //設定迴圈定時器
    //let d2 = setInterval("fun()",3000);
    //取消迴圈定時器
    //clearInterval(d2);
​
    //載入事件
    let div = document.getElementById("div");
    alert(div);
</script> -->
</html>

3.2、Location位址列物件

  • href 屬性

    通過設定href來改變位址列地址，進行介面的跳轉。

     

     

  • 程式碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location位址列物件</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        註冊成功！<span id="time">5</span>秒之後自動跳轉到首頁...
    </p>
</body>
<script>
    //1.定義方法。改變秒數，跳轉頁面
    let num = 5;
    function showTime() {
        num--;
​
        if(num <= 0) {
            //跳轉首頁
            location.href = "index.html";  ***
        }
​
        let span = document.getElementById("time");
        span.innerHTML = num;
    }
​
    //2.設定迴圈定時器，每1秒鐘執行showTime方法
    setInterval("showTime()",1000);
</script>
</html>

3.3、案例-動態廣告

  • 案例分析和實現

<!-- 廣告圖片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>

  • 在 css 樣式中，display 屬性可以控制元素是否顯示

style="display: none;"

  • 設定定時器，3 秒後顯示廣告圖片

//1.設定定時器，3秒後顯示廣告圖片
setTimeout(function(){
    let img = document.getElementById("ad_big");
    img.style.display = "block";
},3000);

  • 設定定時器，3 秒後隱藏廣告圖片

//2.設定定時器，3秒後隱藏廣告圖片
setTimeout(function(){
    let img = document.getElementById("ad_big");
    img.style.display = "none";
},6000);

3.4、小結

  • BOM(Browser Object Model)：瀏覽器物件模型。

  • 將瀏覽器的各個組成部分封裝成不同的物件，方便我們進行操作。

    • Window：視窗物件

    • Location：位址列物件

    • Navigator：瀏覽器物件

    • History：當前視窗歷史記錄物件

    • Screen：顯示器螢幕物件

  • Window 視窗物件

    • setTimeout()、clearTimeout()：一次性定時器

    • setInterval()、clearInterval()：迴圈定時器

    • onload 事件：頁面載入完畢觸發執行功能

  • Location 位址列物件 href 屬性：跳轉到指定的 URL 地址

4、JavaScript封裝

封裝思想

  • 封裝：將複雜的操作進行封裝隱藏，對外提供更加簡單的操作。

  • 獲取元素的方法

    • document.getElementById(id值)：根據 id 值獲取元素

    • document.getElementsByName(name值)：根據 name 屬性值獲取元素們

    • document.getElementsByTagName(標籤名)：根據標籤名獲取元素們

  • 程式碼實現

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封裝</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    // let div1 = document.getElementById("div1");
    // alert(div1);

    // let divs = document.getElementsByName("div2");
    // alert(divs.length);

    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
</script>
</html>

    js封裝

    function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

我們之前的操作都是基於原生 JavaScript 的，比較繁瑣。 JQuery 是一個前端框架技術，針對 JavaScript 進行了一系列的封裝，使得操作變得非常簡單！ 期待吧……

相關文章