文章目錄

• • js的使用方法
  • 變量與運(yùn)算符
  • • let 與 const
    • 變量類型
    • 運(yùn)算符
  • 輸入與輸出
  • • 輸入
    • 輸出
    • 格式化字符串
  • 判斷語句
  • 循環(huán)語句
  • • for循環(huán)
    • while循環(huán)
    • do...while循環(huán)
  • 對象
  • 數(shù)組
  • • 訪問數(shù)組中的元素
    • 數(shù)組常用屬性和函數(shù)
  • 函數(shù)
  • 類
  • • 定義
    • 繼承
    • 靜態(tài)方法
    • 靜態(tài)變量
  • 事件
  • • 鼠標(biāo)
    • 鍵盤
    • 表單
    • 窗口

網(wǎng)站制作、網(wǎng)站設(shè)計服務(wù)團(tuán)隊是一支充滿著熱情的團(tuán)隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個網(wǎng)站當(dāng)做一個產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！
js的使用方法

**使用方式：**在html標(biāo)簽內(nèi)任意位置加上標(biāo)簽即可

幾種使用方法：

• 直接在標(biāo)簽內(nèi)寫js代碼
• 直接引入文件
• 將所需的代碼通過import關(guān)鍵字引入到當(dāng)前作用域（將js中的某些內(nèi)容引入）

例如：

let name = "sun";
let age = 20;

function print() {console.log("My name is " + name);
}

export {name,
    print
}

我們可以使用name變量，但無法使用age變量
我們上面在 script 里面加上了 type=module 的好處會使得在script里面的變量只會在內(nèi)部生效，避免了變量使用的沖突

**執(zhí)行順序：**類似于html與css，按從上到下的順序執(zhí)行；事件驅(qū)動執(zhí)行

html、css、js之間的關(guān)系：

1. css控制html
2. JavaScript控制html與css
3. 為了方便開發(fā)與維護(hù)，盡量按照上述順序?qū)懘a。例如：不要在html中調(diào)用js中的函數(shù)

變量與運(yùn)算符 let 與 const

用來聲明變量，作用范圍為當(dāng)前作用域；let用于定義變量，const用于定義常量

例如：

let s = "sun", x = 5;

let d = {name: "sun",
    age: 20,
}

const n = 100;

js中的注釋與 C++完全一樣

變量類型

• number：數(shù)值變量，例如1, 2.5
• string：字符串，例如"sun", ‘yang’，單引號與雙引號均可。字符串中的每個字符為只讀類型（即不可修改，只可查詢看）；有 substr，substr（0,1）表示從下標(biāo)0開始，共有一個元素；substr（2）表示從下標(biāo)第二個元素開始
• boolean：布爾值，例如true, false
• object：對象，類似于C++中的指針，例如[1, 2, 3]，{name: “sun”, age: 20}，null（空）
• undefined：未定義的變量

運(yùn)算符

js中的運(yùn)算符與C++相似；不同點(diǎn)：① ** 表示乘方 ② === 表示相等，!==表示不相等；其他相似

輸入與輸出 輸入

從html與用戶的交互中輸入信息；例如通過input、textarea等標(biāo)簽獲取用戶的鍵盤輸入，通過click、hover等事件獲取用戶的鼠標(biāo)輸入。

例如，我們現(xiàn)在頁面里面搞個框架

輸入:

Run

js代碼：

let input = document.querySelector("textarea");//獲取textarea中的內(nèi)容
let run = document.querySelector("button");//獲取button的內(nèi)容
let output = document.querySelector("pre");//獲取pre中的內(nèi)容



function main() {run.addEventListener("click", function() {//給run綁定一個函數(shù)
        let s = input.value;//獲取input的值
        output.innerHTML = s;//將s的內(nèi)容賦值給output
    })
}

export {main,
}

結(jié)果：

下面的pre每次都會獲取輸入中的內(nèi)容

輸出

調(diào)試用console.log，會將信息輸出到瀏覽器控制臺

格式化字符串

字符串中填入數(shù)值：

let name = "sun", age = 20;
let s = `My name is ${name}. I'm ${age} years old`;//字符串使用 ``
console.log(s);

保留幾位小數(shù)問題：

let x = 1.234567;
let s = `${x.toFixed(2)}`;//保留兩位小數(shù)

判斷語句

js中的 if…else 與C++完全一致

例如：

let score = 90;
if (score >= 90) {console.log("S");
} else if (score >= 80) {console.log("A");
} else if (score >= 70) {console.log("B");
} else {console.log("C");
}

邏輯運(yùn)算符：與C++一致；&&表示與，|| 表示或，！表示非

循環(huán)語句

js中的循環(huán)一樣，都有 for、while、do…while循環(huán)

for循環(huán)

for(let i = 0; i< 10; i++) {console.log(i);
    }

枚舉對象或數(shù)組可以這樣使用：

• for-in循環(huán)：可以枚舉數(shù)組的下標(biāo)，以及對象中的key
• for-of循環(huán)：可以枚舉數(shù)組中的值，以及對象中的value

let array = [1, 3, 5, 7];

    for(let i in array) {console.log(i);
    }
    
    console.log("hello world");

    for(let i of array) {console.log(i);
    }

while循環(huán)

let i = 0;
    while(i< 10) {console.log(i);
        i++;
    }

do…while循環(huán)

let i = 0;
    do {console.log(i);
        i++;
    }while(i< 10);

對象

英文名字是Object，類似于C++中的map，由 key、value 對構(gòu)成
value 可以是變量、數(shù)組、對象、函數(shù)等等
函數(shù)定義中的this用來引用該函數(shù)的擁有者

let Person = {name: "suntong",
        age: 20,
        money: 0,
        add_money: function (x) {this.money += x;
        }

    }

對象中的每個key都是字符串類型，例如上面的 name，我們可以寫成 “name”，但是不寫引號也可以，但是如果我們在外面要使用時，記得帶上引號哦；

對象屬性與函數(shù)的調(diào)用方式有兩種：

1. Person.name、Person.add_money()
2. Person[“name”]、Person [“add_money”] ()

數(shù)組

數(shù)組類似于C++中的數(shù)組，但是數(shù)組中的元素類型可以不同；可以是變量、數(shù)組、對象、函數(shù)等等

例如：

let a = [1, 2, "sun", 'abc'];
    let b = [
        1,  //變量
        "sun",  //變量
        [1, 2, "sun"],  //數(shù)組
        {name: "sun", age: 20}, //對象
        function() {//函數(shù)
            console.log("hello world");
        }
    ]

訪問數(shù)組中的元素

通過下標(biāo)來訪問數(shù)組中的元素；

例如：

console.log(a[0]);

數(shù)組常用屬性和函數(shù)

• 屬性length：返回數(shù)組長度；這里的length是屬性，而不是函數(shù)，不需要加（）
• 函數(shù)push()：向數(shù)組末尾添加元素
• 函數(shù)pop()：刪除數(shù)組末尾的元素
• 函數(shù)splice(a, b)：刪除從a開始的b個元素
• 函數(shù)sort()：將整個數(shù)組從小到大排序
• 自定義比較函數(shù)：array.sort(cmp)，函數(shù)cmp輸入兩個需要比較的元素，返回一個實數(shù)，負(fù)數(shù)表示第一個參數(shù)小于第二個參數(shù)，0表示相等，正數(shù)表示大于。

let a = [1, 2, 5, 3, 9];
    a.sort(function(a, b) {return b - a;//逆序
    });
    console.log(a);

函數(shù)

函數(shù)定義方式：有三種

function add(a, b) {return a + b;
}

let add = (a, b) =>{return a + b;
}

let main = function() {console.log(typeof add);
    console.log(add(3, 4));
}

函數(shù)有返回值，則會返回返回值；若函數(shù)沒有返回值，則會返回 undefined；

類 定義

class Point {constructor(x, y) {//構(gòu)造函數(shù)
        this.x = x;
        this.y = y;
    }

    init() {//成員函數(shù)
        this.sum = this.x + this.y;
    }

    toString() {//成員函數(shù)
        return `(${this.x}, ${this.y})`;
    }
}

let p = new Point(3, 4);
console.log(p.toString());

繼承

class ColorPoint extends Point {constructor(x, y, color) {super(x, y);    //super表示繼承父類的構(gòu)造函數(shù)
        this.color = color;//this必須要在super之后使用
    }

    toString() {return this.color + ' ' + super.toString(); //super調(diào)用父類的toString
    }
}

super這個關(guān)鍵字，既可以當(dāng)作函數(shù)使用，也可以當(dāng)作對象使用。作為函數(shù)調(diào)用時，代表父類的構(gòu)造函數(shù)，且只能用在子類的構(gòu)造函數(shù)之中。super作為對象時，指向父類的原型對象
在子類的構(gòu)造函數(shù)中，只有調(diào)用super之后，才可以使用this關(guān)鍵字
成員重名時，子類的成員會覆蓋父類的成員

靜態(tài)方法

在成員函數(shù)前添加static關(guān)鍵字即可；靜態(tài)成員不可以被對象直接調(diào)用，只能通過類來調(diào)用

class Point {constructor(x, y) {//構(gòu)造函數(shù)
        this.x = x;
        this.y = y;
    }

    toString() {//成員函數(shù)
        return `(${this.x}, ${this.y})`;
    }

    static class_print_name() {//靜態(tài)方法
        console.log("point");
    }
}

let p = new Point(1, 2);
Point.print_class_name();  //正確
p.print_class_name();  // 會報錯

靜態(tài)變量

在ES6中，只能通過class.propname定義和訪問；我們不是在類內(nèi)加上static來定義靜態(tài)變量，而是直接使用全局變量

Point.cnt = 0;

class Point {constructor(x, y) {this.x = x;
        this.y = y;

        Point.cnt++;
    }

    toString() {return '(' + this.x + ', ' + this.y + ')';
    }
}

let p = new Point(1, 2);
let q = new Point(3, 4);

console.log(Point.cnt);//2

事件

js的代碼一般通過事件來觸發(fā)；可以通過 addEventListener 函數(shù)為元素綁定事件的觸發(fā)函數(shù)，常見的有：

鼠標(biāo)

• click：鼠標(biāo)左鍵點(diǎn)擊
• dblclick：鼠標(biāo)左鍵雙擊
• contextmenu：鼠標(biāo)右鍵點(diǎn)擊
• mousedown：鼠標(biāo)按下，包括左鍵、滾輪、右鍵（event.button：0表示左鍵，1表示中鍵，2表示右鍵）
• mouseup：鼠標(biāo)彈起，包括左鍵、滾輪、右鍵（event.button：0表示左鍵，1表示中鍵，2表示右鍵）

event.clientX、event.clientY分別獲取點(diǎn)擊的 x 和 y 的坐標(biāo)

例如：

let div = document.querySelector("div");

let main = function() {div.addEventListener('click', function(event) {console.log(event.type);
    })
}

export {main,
}

鍵盤

• keydown：某個鍵是否被按住，事件會連續(xù)觸發(fā)（event.code：返回按的是哪個鍵，event.altKey、event.ctrlKey、event.shiftKey分別表示是否同時按下了alt、ctrl、shift鍵）
• keyup：某個按鍵是否被釋放（event屬性如上）
• keypress：緊跟在keydown事件后觸發(fā)，只有按下字符鍵時觸發(fā)。適用于判定用戶輸入的字符（event屬性如上）
• keydown、keyup、keypress的關(guān)系類似于鼠標(biāo)的mousedown、mouseup、click

表單

• focus：聚焦某個元素
• blur：取消聚焦某個元素
• change：某個元素的內(nèi)容發(fā)生了改變

窗口

需要作用到window元素上

• resize：當(dāng)窗口大小放生變化
• scroll：滾動指定的元素
• load：當(dāng)元素被加載完成

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

當(dāng)前文章：《前端》JavaScript總結(jié)-創(chuàng)新互聯(lián)
鏈接地址：http://jinyejixie.com/article4/djcioe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、動態(tài)網(wǎng)站、建站公司、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)