Tips：在JavaScript中，函數(shù)是第一等公民。

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為都蘭企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)，都蘭網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

匯總版目錄

• 前言
• 一、Javascript基礎(chǔ)語(yǔ)法
• • 1.JS的調(diào)用方式與執(zhí)行順序
  • 2.變量與運(yùn)算符
  • 3.輸入與輸出
  • 4.判斷語(yǔ)句
  • 5.循環(huán)語(yǔ)句
  • 6.對(duì)象
  • 7.函數(shù)
  • 9.類(lèi)
  • 事件
  • 待更新...

---

前言

無(wú)序言，本文開(kāi)門(mén)見(jiàn)山，直接講解

Javascript是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型的區(qū)分大小寫(xiě)的客戶(hù)端腳本語(yǔ)言，主要目的是為了解決服務(wù)器端語(yǔ)言，比如Perl，遺留的速度問(wèn)題，為客戶(hù)提供更流暢的瀏覽效果。

---

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、Javascript基礎(chǔ)語(yǔ)法
1.JS的調(diào)用方式與執(zhí)行順序

使用方式:
HTML頁(yè)面中的任意位置加上標(biāo)簽即可。

常見(jiàn)使用方式有以下幾種：

• 直接在標(biāo)簽內(nèi)寫(xiě)JS代碼。
• 直接引入文件：。
• 將所需的代碼通過(guò)import關(guān)鍵字引入到當(dāng)前作用域。

例如：
/static/js/index.js文件中的內(nèi)容為：

let name = "xiaozhuangzzz";

function print() {console.log("Hello World!");
}

export {name,
    print
}

中的內(nèi)容為：

---

執(zhí)行順序
1.類(lèi)似于HTML與CSS，按從上到下的順序執(zhí)行；
2.事件驅(qū)動(dòng)執(zhí)行；

---

HTML,CSS,JavaScript三者之間的關(guān)系
1CSS控制HTML
2.JavaScript控制HTML與CSS
3.為了方便開(kāi)發(fā)與維護(hù)，盡量按照上述順序?qū)懘a。例如：不要在HTML中調(diào)用JavaScript中的函數(shù)。

2.變量與運(yùn)算符

let與const
用來(lái)聲明變量，作用范圍為當(dāng)前作用域。

• let用來(lái)定義變量；
• const用來(lái)定義常量；

例如：

let s = "zzz, x = 5;

let d = {name: "xiaozhuang",
    age: 19,
}
const n = 100;

---

變量類(lèi)型

• number：數(shù)值變量，例如1,2.5
• string：字符串，例如"zzz",'xiaozhuang'，單引號(hào)與雙引號(hào)均可。字符串中的每個(gè)字符為只讀類(lèi)型。
• boolean：布爾值，例如true,false
• object：對(duì)象，類(lèi)似于C++中的指針，例如[1, 2, 3]，{name: "yxc", age: 18}，null
• undefined：未定義的變量

類(lèi)似于Python，JavaScript中的變量類(lèi)型可以動(dòng)態(tài)變化。

---

運(yùn)算符
與C++、Python、Java類(lèi)似，不同點(diǎn)：

• **表示乘方

等于與不等于用===和!==

3.輸入與輸出

輸入

• 從HTML與用戶(hù)的交互中輸入信息，例如通過(guò)input、textarea等標(biāo)簽獲取用戶(hù)的鍵盤(pán)輸入，通過(guò)click、hover等事件獲取用戶(hù)的鼠標(biāo)輸入。
• 通過(guò)Ajax與WebSocket從服務(wù)器端獲取輸入
• 標(biāo)準(zhǔn)輸入(以A+B為例)：

let fs = require('fs');
let buf = '';

process.stdin.on('readable', function() {let chunk = process.stdin.read();
    if (chunk) buf += chunk.toString();
});

process.stdin.on('end', function() {buf.split('\n').forEach(function(line) {let tokens = line.split(' ').map(function(x) {return parseInt(x); });
        if (tokens.length != 2) return;
        console.log(tokens.reduce(function(a, b) {return a + b; }));
    });
});

---

輸出

• 調(diào)試用console.log，會(huì)將信息輸出到瀏覽器控制臺(tái)
• 改變當(dāng)前頁(yè)面的HTML與CSS
• 通過(guò)Ajax與WebSocket將結(jié)果返回到服務(wù)器

---

格式化字符串

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

let name = 'xiaozhuang', age = 19;
let s = `My name is ${name}, I'm ${age} years old.`;

• 定義多行字符串：

let s = 
`
    標(biāo)題
段落
/div>`

1. 保留兩位小數(shù)如何輸出

let x = 1.234567;
let s = `${x.toFixed(2)}`;

---

練習(xí)

1. 輸出Hello World。
2. 輸入兩個(gè)數(shù)，計(jì)算兩個(gè)數(shù)的和。
3. 輸入一個(gè)小數(shù)，返回向零取整之后的結(jié)果。
4. 輸入a, b, c，輸出 (a + b) * c 的值。
5. 求反三位數(shù)。
6. 輸出如下的菱形。

*
 ***
*****
 ***
  *

4.判斷語(yǔ)句

JavaScript中的if-else語(yǔ)句與C++、Python、Java中類(lèi)似。

例如：

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

JavaScript中的邏輯運(yùn)算符也與C++、Java中類(lèi)似：

• &&表示與
• ||表示或
• !表示非

---

練習(xí)
1.輸入一個(gè)年份，如果是閏年輸出yes，否則輸出no。
2.輸入三個(gè)數(shù)，輸出三個(gè)數(shù)中的大值。
<習(xí)題解析下節(jié)更新>

5.循環(huán)語(yǔ)句

第四節(jié)習(xí)題1：

function main() {run.addEventListener("click", function () {let year = input.value;

        if(year % 400 === 0 || year % 100 !== 0 && year % 4 === 0){output.innerHTML = "yes";
        } else {output.innerHTML = "no";
        }    
    });
}

第四節(jié)習(xí)題2：

function main() {run.addEventListener("click", function () {let [a, b, c] = input.value.split(' ');
        a = parseInt(a), b = parseInt(b), c = parseInt(c);
        output.innerHTML = Math.max(a, b, c);
    });
}

---

JavaScript中的循環(huán)語(yǔ)句與C++中類(lèi)似，也包含for、while、do while循環(huán)。

for循環(huán)

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

枚舉對(duì)象或數(shù)組時(shí)可以使用：

1. for-in循環(huán)，可以枚舉數(shù)組中的下標(biāo)，以及對(duì)象中的key
2. for-of循環(huán)，可以枚舉數(shù)組中的值，以及對(duì)象中的value
3. –
   while循環(huán)

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

---

do while循環(huán)
do while語(yǔ)句與while語(yǔ)句非常相似。唯一的區(qū)別是，do while語(yǔ)句限制性循環(huán)體后檢查條件。不管條件的值如何，我們都要至少執(zhí)行一次循環(huán)。

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

練習(xí)

1. 求1~100中所有數(shù)的立方和。
2. 求斐波那契數(shù)列的第n項(xiàng)。f(1) = 1, f(2) = 1, f(3) = 2, f(n) = f(n-1) + f(n-2)。
3. 打印1~100中的所有質(zhì)數(shù)。

6.對(duì)象

英文名稱(chēng)：Object。
類(lèi)似于C++中的map，由key:value對(duì)構(gòu)成。

• value可以是變量、數(shù)組、對(duì)象、函數(shù)等。
• 函數(shù)定義中的this用來(lái)引用該函數(shù)的“擁有者”。

例如：

let person = {name: "xiaozhuang",
    age: 19,
    money: 0,
    add_money: function (x) {this.money += x;
    }
}

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

• person.name、person.add_money()
• person["name"]、person["add_money"]()

7.函數(shù)

函數(shù)是用對(duì)象來(lái)實(shí)現(xiàn)的。
函數(shù)也跟C++中的函數(shù)類(lèi)似。

定義方式

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

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

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

---

返回值
如果未定義返回值，則返回undefined。

9.類(lèi)

與C++中的Class類(lèi)似。但是不存在私有成員。

this指向類(lèi)的實(shí)例。
定義

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

        this.init();
    }

    init() {this.sum = this.x + this.y;  // 成員變量可以在任意的成員函數(shù)中定義
    }

    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表示父類(lèi)的構(gòu)造函數(shù)
        this.color = color;
    }

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

注意：

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

---

靜態(tài)方法
在成員函數(shù)前添加static關(guān)鍵字即可。靜態(tài)方法不會(huì)被類(lèi)的實(shí)例繼承，只能通過(guò)類(lèi)來(lái)調(diào)用。例如：

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

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

    static print_class_name() {console.log("Point");
    }
}

let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name();  // 會(huì)報(bào)錯(cuò)

---

靜態(tài)變量
在ES6中，只能通過(guò)class.propname定義和訪問(wèn)。例如

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

        Point.cnt++;
    }

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

Point.cnt = 0;

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

console.log(Point.cnt);

事件

JavaScript的代碼一般通過(guò)事件觸發(fā)。

可以通過(guò)addEventListener函數(shù)為元素綁定事件的觸發(fā)函數(shù)。

常見(jiàn)的觸發(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表示右鍵

---

鍵盤(pán):

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

---

表單:

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

---

窗口:
需要作用到window元素上。

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

待更新…

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

網(wǎng)站標(biāo)題：JavaScript入門(mén)從零到實(shí)戰(zhàn)進(jìn)階教程（持續(xù)更新匯總）-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dcoddd.html