JavaScript筆記

一、基本語法

JavaScript（以下簡稱JS）是一種腳本語言，可用於創建動態網頁，為頁面增加交互性。JS可以嵌入到HTML代碼中，也可以保存成獨立的.js文件並在HTML中引用。以下我們來介紹一些JS的基本語法。

// 輸出
console.log("Hello World!");

// 變量
var x = 5;
var y = 6;
var z = x + y;

// 條件語句
if (z > 10) {
   document.write("z 大於 10");
} else {
   document.write("z 小於 10");
}

// 循環語句
for (var i = 0; i < 5; i++) {
   document.write(i);
}

1. 輸出：使用console.log()函數可以輸出內容到瀏覽器的控制台中。

2. 變量：使用var關鍵字聲明變量，=表示賦值操作，+表示加法操作。其中z的值為11。

3. 條件語句：使用if和else來進行條件判斷，文檔中使用document.write()函數將內容輸出到頁面中。當z>10時，輸出“z 大於 10”，否則輸出“z 小於 10”。

4. 循環語句：使用for循環，i代表循環次數，i從0開始，每次增加1，直到i<5。

二、函數和對象

函數和對象是JS中的兩個重要概念，函數可以重複調用進行代碼復用，而對象可以理解為一個容器，用來存儲和訪問數據。以下我們來介紹JS的函數和對象。

// 函數
function myFunction(p1, p2) {
   return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);

// 對象
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";

1. 函數：使用function關鍵字聲明函數，p1和p2為傳入參數，return用於返回計算結果。其中使用document.getElementById()方法獲取頁面中的元素，innerHTML用於改變元素的文本內容為函數執行的結果。

2. 對象：使用{}來聲明一個對象，對象中包含多個鍵值對，每個鍵值對用冒號分隔。獲取對象中的值可以使用person.firstName或person[“firstName”]兩種方式。

三、事件

事件是與網頁上的元素相關聯的動作，如用戶鼠標移動、按下鍵盤等，在JS中可以通過事件來實現頁面的互動和響應。以下我們來介紹JS的事件。

function changeText() {
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
}

使用onload屬性給網頁中的元素賦上事件，當元素加載完成後，對應的函數將會被自動調用。

現在的時間是？

使用onclick屬性給按鈕賦上事件，當按鈕被點擊後，對應的函數將會被自動調用。

四、數組和字符串

數組和字符串是JS中常用的數據類型，數組用於存儲一系列數據，而字符串用於存儲一段字符序列。以下我們來介紹JS的數組和字符串。

// 數組
var cars = ["Saab", "Volvo", "BMW"];
alert(cars[0]);  // Saab

// 字符串
var str = "Hello World!";
alert(str.length);  // 12
alert(str.indexOf("World"));  // 6

1. 數組：使用[]來聲明一個數組，多個元素之間用逗號分隔。使用數組名[index]的方式來訪問數組元素，注意，數組的第一個元素的下標為0。

2. 字符串：使用””或”來聲明一個字符串。使用.length屬性可以獲得字符串的長度，使用.indexOf()方法可以獲得指定字符或字符序列在字符串中的位置，如果沒有則返回-1。

五、AJAX

AJAX（Asynchronous JavaScript and XML）是一種基於JavaScript和XML的異步數據傳輸技術，可以通過後台與服務器進行數據傳輸，不需要刷新整個頁面即可更新部分內容。以下我們來介紹JS的AJAX。

// AJAX
function loadXMLDoc() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         document.getElementById("demo").innerHTML = this.responseText;
      }
   };
   xhttp.open("GET", "ajax_info.txt", true);
   xhttp.send();
}

使用XMLHttpRequest對象來創建AJAX請求，通過xhttp.onreadystatechange屬性綁定異步響應函數，當AJAX請求狀態發生改變時，將自動調用該函數。通過xhttp.open()和xhttp.send()分別設置AJAX請求的URL和請求方式。

六、jQuery

jQuery是一種快速、簡潔的JavaScript庫，適用於跨瀏覽器的HTML文檔遍歷和操作，事件處理，動畫和AJAX等方面。以下我們來介紹JS的jQuery庫。

// jQuery
$(document).ready(function(){
   $("button").click(function(){
      $("p").text("Hello world!");
   });
});

使用$(selector).action()語句選擇頁面中的元素並進行操作。例如，以上代碼中當按鈕被點擊時，將使用jQuery庫中的.text()方法來修改一或多個段落的文本內容為“Hello world!”。