JavaScript介紹

JavaScript 是屬於 HTML 和 Web 的編程語言。HTML 定義網頁的內容，CSS 規定網頁的佈局，JavaScript 對網頁行爲進行編程。
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

JavaScript的作用

能夠改變 HTML 內容
能夠改變 HTML 屬性
能夠改變 HTML 樣式 (CSS)
能夠隱藏 HTML 元素
能夠顯示 HTML 元素

JavaScript的使用

在 HTML 中，JavaScript 代碼必須位於 <script> 與 </script> 標籤之間。
例：

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

腳本可被放置與 HTML 頁面的 <body> 或 <head> 部分中，可以在 HTML 文檔中放置任意數量的腳本。
例：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一張網頁</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button>

</body>
</html>

把腳本置於 <body> 元素的底部，可改善顯示速度，因爲腳本編譯會拖慢顯示。
腳本可放置與外部文件中：

外部腳本很實用，如果相同的腳本被用於許多不同的網頁。
JavaScript 文件的文件擴展名是 .js。
如需使用外部腳本，請在 <script> 標籤的 src (source) 屬性中設置腳本的名稱：
例：

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

可通過完整的 URL 或相對於當前網頁的路徑引用外部腳本：
本例使用完整的 URL 來鏈接至腳本：

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

JavaScript 顯示方案

JavaScript 能夠以不同方式“顯示”數據：

使用 window.alert() 寫入警告框
使用 document.write() 寫入 HTML 輸出
使用 innerHTML 寫入 HTML 元素
使用 console.log() 寫入瀏覽器控制檯

使用 innerHTML

如需訪問 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 屬性定義 HTML 元素。innerHTML 屬性定義 HTML 內容：

實例：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一張網頁</h1>

<p>我的第一個段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

使用 document.write()

出於測試目的，使用 document.write() 比較方便：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一張網頁</h1>

<p>我的第一個段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

在 HTML 文檔完全加載後使用 document.write() 將刪除所有已有的 HTML

使用 window.alert()

使用警告框來顯示數據：


<!DOCTYPE html>
<html>
<body>

<h1>我的第一張網頁</h1>

<p>我的第一個段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

使用 console.log()

在瀏覽器中，可使用 console.log() 方法來顯示數據。
通過 F12 來激活瀏覽器控制檯，並在菜單中選擇“控制檯”
實例：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一張網頁</h1>

<p>我的第一個段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript 語法

JavaScript 的語法跟C語言，java，python等都有相似處，這裏我只簡單的介紹一下相關語法的使用。

JavaScript 變量

JavaScript 是弱類型的語言，定義變量時跟python有些相似，不用聲明變量類型。
JavaScript 使用 var 關鍵詞來聲明變量。

在本例中，x 被定義爲變量。然後，x 被賦的值是 7：

var x;

x = 7;

在JavaScript中，聲明變量時若沒有對變量進行初始化，它的值將是 undefined。
在 JavaScript 中，沒有值的變量，其值是 undefined。

var carName;

變量 carName 在這條語句執行後的值是 undefined。
任何變量均可通過設置值爲 undefined 進行清空。其類型也將是 undefined。

person = undefined;          // 值是 undefined，類型是 undefined

空值與 undefined 不是一回事。
空的字符串變量既有值也有類型。

數據類型

JavaScript 變量能夠保存多種數據類型：數值、字符串值、數組、對象等等：

var length = 7;                             // 數字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 數組
var x = {firstName:"Bill", lastName:"Gates"};    // 對象

JavaScript 擁有動態類型。這意味着相同變量可用作不同類型：

var x;               // 現在 x 是 undefined
var x = 7;           // 現在 x 是數值
var x = "Bill";      // 現在 x 是字符串值

如果對一個數和一個字符串相加，結果是字符串級聯：

var x = 10;
var y = "20";
var z = x + y;           // z 將是 1020（一個字符串）

JavaScript 比較運算符

在JavaScript中 == 和 === 兩個比較運算符是不一樣的。

函數

函數的定義

JavaScript 函數通過 function 關鍵詞進行定義，其後是函數名和括號 ()。

function name(參數 1, 參數 2, 參數 3) {
    要執行的代碼
}

實例

function myFunction(p1, p2) {
    return p1 * p2;              // 該函數返回 p1 和 p2 的乘積
}

JavaScript中函數的定義不需要指明返回值類型。

函數中的代碼將在其他代碼調用該函數時執行：

當事件發生時（當用戶點擊按鈕時）
當 JavaScript 代碼調用時
自動的（自調用）

JavaScript 函數也可以使用表達式來定義。
函數表達式可以在變量中存儲：

var x = function (a, b) {return a * b};

在變量中保存函數表達式之後，此變量可用作函數：

var x = function (a, b) {return a * b};
var z = x(4, 3);

自調用函數

函數表達式可以作爲“自調用”。
自調用表達式是自動被調用（開始）的，在不進行調用的情況下。
函數表達式會自動執行，假如表達式後面跟着 ()。
需要在函數週圍添加括號，以指示它是一個函數表達式：

(function () {
    var x = "Hello!!";      //我會調用我自己
})();

上面的例子可以在不調用的情況下自動調用函數。

函數是對象

JavaScript 中的 typeof 運算符會爲函數返回 “function”。
但是最好是把 JavaScript 函數描述爲對象。
JavaScript 函數都有屬性和方法。
arguments.length 會返回函數被調用時收到的參數數目：

function myFunction(a, b) {
    return arguments.length;
}

toString() 方法以字符串返回函數：

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

JavaScript 對象

JavaScript 對象中的名稱:值對被稱爲屬性。
對象也可以有方法。
方法是在對象上執行的動作。
方法以函數定義被存儲在屬性中。

實例：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

訪問對象屬性

能夠以兩種方式訪問屬性：
objectName.propertyName 或 objectName[“propertyName”]
實例：

person.lastName;

person["lastName"];

訪問對象方法

通過如下語法訪問對象方法：objectName.methodName()
實例：name = person.fullName();

JavaScript 事件

HTML 事件是發生在 HTML 元素上的“事情”。
當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件。

HTML 事件可以是瀏覽器或用戶做的某些事情。
下面是 HTML 事件的一些例子：

HTML 網頁完成加載
HTML 輸入字段被修改
HTML 按鈕被點擊
通常，當事件發生時，用戶會希望做某件事。
JavaScript 允許在事件被偵測到時執行代碼。
通過 JavaScript 代碼，HTML 允許向 HTML 元素添加事件處理程序。

下面是一些常見的 HTML 事件：

事件	描述
onchange	HTML 元素已被改變
onclick	用戶點擊了 HTML 元素
onmouseover	用戶把鼠標移動到 HTML 元素上
onmouseout	用戶把鼠標移開 HTML 元素
onkeydown	用戶按下鍵盤按鍵
onload	瀏覽器已經完成頁面加載

事件處理程序可用於處理、驗證用戶輸入、用戶動作和瀏覽器動作：

每當頁面加載時應該做的事情
當頁面被關閉時應該做的事情
當用戶點擊按鈕時應該被執行的動作
當用戶輸入數據時應該被驗證的內容
等等

在下面的例子中，onclick 屬性（以及代碼）被添加到 <button> 元素：

<button onclick='document.getElementById("demo").innerHTML=Date()'>現在的時間是？</button>

字符串

JavaScript 字符串是引號中的零個或多個字符。

var x = "Bill Gates"

字符串方法和屬性

原始值，比如“Bill Gates”，無法擁有屬性和方法（因爲它們不是對象）。

但是通過 JavaScript，方法和屬性也可用於原始值，因爲在執行方法和屬性時 JavaScript 將原始值視爲對象。

字符串長度

length 屬性返回字符串的長度：
實例：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出現的索引（位置）：
實例：

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

檢索字符串中的字符串

search() 方法搜索特定值的字符串，並返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

indexOf() 與 search()區別在於：

search() 方法無法設置第二個開始位置參數。
indexOf() 方法無法設置更強大的搜索值（正則表達式）。

數組

在 JavaScript中，數組是一種特殊類型的對象。在 JavaScript 中對數組使用 typeof 運算符會返回 “object”。
所有數組也有屬性和方法。

var x = cars.length;   // length 屬性返回元素的數量
var y = cars.sort();   // sort() 方法對數組進行排序

添加數組元素

向數組添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一個新元素 (Lemon)

也可以使用 length 屬性向數組添加新元素，即通過下標直接訪問添加：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一個新元素 (Lemon)

如何識別數組

常見的問題是：我如何知曉某個變量是否是數組？
問題在於 JavaScript 運算符 typeof 返回 “object”。
爲了解決這個問題，ECMAScript 5 定義了新方法 Array.isArray()：

Array.isArray(fruits);     // 返回 true

刪除元素和添加新元素

pop() 方法從數組中刪除最後一個元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 從 fruits 刪除最後一個元素（"Mango"）

pop() 方法返回“被彈出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

push() 方法（在數組結尾處）向數組添加一個新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一個新元素

push() 方法返回新數組的長度。

既然 JavaScript 數組屬於對象，其中的元素就可以使用 JavaScript delete 運算符來刪除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首個元素改爲 undefined

數組排序

sort() 方法以字母順序對數組進行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 對 fruits 中的元素進行排序

reverse() 方法可以反轉數組中的元素。
默認地，sort() 函數按照字符串順序對值進行排序。
該函數很適合字符串（“Apple” 會排在 “Banana” 之前）。
不過，如果數字按照字符串來排序，則 “25” 大於 “100”，因爲 “2” 大於 “1”。
正因如此，sort() 方法在對數值排序時會產生不正確的結果。
我們通過一個比值函數來修正此問題：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

使用相同的技巧對數組進行降序排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

this

JavaScript this 關鍵詞指的是它所屬的對象。
它擁有不同的值，具體取決於它的使用位置：

在方法中，this 指的是所有者對象。
單獨的情況下，this 指的是全局對象。
在函數中，this 指的是全局對象。
在函數中，嚴格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

JavaScript 對象

有不同的方法來創建對象：

定義和創建單個對象，使用對象文字。
定義和創建單個對象，通過關鍵詞 new。
定義對象構造器，然後創建構造類型的對象。

在 ECMAScript 5 中，也可以通過函數 Object.create() 來創建對象。

創建對象最簡單的方法：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

使用 JavaScript 關鍵詞 new創建對象：
下面的例子也創建了帶有四個屬性的新的 JavaScript 對象：

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";

通過對象構造器創建：
例如：
首先定義構造器

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

通過 new 關鍵詞調用構造器函數可以創建對象：

var myFather = new Person("Bill", "Gates", 62, "blue");

JavaScript 提供用於原始對象的構造器：

var x1 = new Object();    // 一個新的 Object 對象
var x2 = new String();    // 一個新的 String 對象
var x3 = new Number();    // 一個新的 Number 對象
var x4 = new Boolean();   // 一個新的 Boolean 對象
var x5 = new Array();     // 一個新的 Array 對象
var x6 = new RegExp();    // 一個新的 RegExp 對象
var x7 = new Function();  // 一個新的 Function 對象
var x8 = new Date();      // 一個新的 Date 對象

JavaScript 屬性

訪問對象屬性的語法是：

objectName.property           // person.age

或者：

objectName["property"]       // person["age"]

或者：

objectName[expression]       // x = "age"; person[x]

添加新屬性：
假設 person 對象已存在，那麼可以直接爲其添加新屬性：

person.nationality = "English";

刪除屬性
delete 關鍵詞從對象中刪除屬性：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age;   // 或 delete person["age"];

JavaScript基礎學習總結

文章目錄

JavaScript介紹

JavaScript的作用

JavaScript的使用

JavaScript 顯示方案

使用 innerHTML

使用 document.write()

使用 window.alert()

使用 console.log()

JavaScript 語法

JavaScript 變量

數據類型

JavaScript 比較運算符

函數

函數的定義

自調用函數

函數是對象

JavaScript 對象

訪問對象屬性

訪問對象方法

JavaScript 事件

字符串

字符串方法和屬性

字符串長度

查找字符串中的字符串

檢索字符串中的字符串

數組

添加數組元素

如何識別數組

刪除元素和添加新元素

數組排序

this

JavaScript 對象

JavaScript 屬性