[TOC] ## 1.變量 ``` // 聲明變量 var mood = "happy"; var age = 33; // 變量名是區分大小寫的，以下是兩個不同的變量。 var mood = "happy"; var Mood= "happy"; // 變量名的格式， // 變量名允許包含字母、數字、美元符號和下劃線 var my_mood = "happy"; var myMood = "happy"; ``` ## 2.數據類型 （1） 字符串 ``` // 字符串有零個或多個字符 // 單引號、雙引號都可以，且成對出現。 var mood = "happy"; var mood = 'happy'; // 引號嵌套，如果字符串包含單引號，就使用雙引號，反之亦然；否則進行轉義。 var mood = "don't ask"; var mood = 'don\'t ask'; ``` 詳見[字符串操作](%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C.md) （2） 數值 ``` var age = 23; // 浮點數，允許帶小數點的數值， var age = 23.5; ``` （3） 布爾值 ``` var sleeping = true; var hungry = false; ``` （4） 數組 ``` // 數組表示一個值的集合，集合中的每個值都是這個數組的元素。 // 聲明數組時，給定長度 var beatles = Array(4); // 也可以不給定長度； var city = Arrary(); // 向數組中填充元素，下標從0開始。 var city = Arrary(3); city[0] = "Beijing"; city[1] = "Shanghai"; city[2] = "Nanjing"; ``` 詳見[數組操作](%E6%95%B0%E7%BB%84%E6%93%8D%E4%BD%9C.md) （5） 對象 ``` // 創建對象 var student = Object(); student.name = "Alice"; student.age = 21; student.city = "Shanghai"; // 還可以這樣創建 var student = { name: "alice", age: 21, city: "Shanghai" }; ``` （6） 算術操作符 | 運算符 | 描述 | 賦值運算符 | 描述 | | --- | --- |--- | --- | | + | 加法 | = | 賦值，將等號右邊的值賦給左邊的變量 | | - | 減法 | +=| 計算后再賦值| | * | 乘法 | -=| 計算后再賦值| | / | 除法 | *=| 計算后再賦值| | % | 取模 | /=| 計算后再賦值| | ++ | 自增 | %/| 計算后再賦值| | -- | 自減 | | ** | 冪 | ``` // + 連接字符串 str1 = "Hello"; str2 = "World"; str3 = str1 + str2; alert(str3); // 輸出： str3 = "HelloWorld"; ``` ## 3.條件語句 ``` // 語法， 當“條件”滿足時，即為True時，才會執行“語句” if (條件) { 語句; }; // 舉例：不滿足條件時執行else下的語句。 if (1 > 2) { alter("The world has gone mad!"); } else { alter("All is well with the world"); }; ``` 比較運算符 | 運算符 | 描述 | | --- | --- | | == | 等于 | | === | 絕對等于(值和類型都相等) | | != | 不等于 | | !== | 不絕對等于(值和類型有一個不相等，或者都不相等) | | > | 大于 | | < | 小于 | | >= | 大于或等于 | | <= | 小于或等于 | 邏輯運算符 | 運算符 | 描述 | | --- | --- | | && | 與 | | \|\| | 或 | | ! | 非 | ## 4.循環語句 while循環 ``` // 條件必須為True while(條件) { 語句 }; ``` do-while 循環 ``` // 執行循環語句之后，進行條件判斷 var count = 1; do { alert(count); count++; } while(count < 11); ``` for 循環 ``` // 示例1： for (var count = 1; count < 11; count++) { alert(count); } // 示例2： const userNames = ["Alice", "Bob", "Cindy"]; for (const userName of userNames) { console.log(userName); } // 輸出 Alice Bob Cindy // 遍歷數組 var beatles = Array("John", "Paul", "George", "Ringo"); for(var count = 0; count < beatles.length; count++) { alert(beatles[count]) } ``` ## 5.函數 ``` // 語法 function 函數名(參數) { 語句; } // 示例： function shout() { var beatles = Array("John", "Paul", "George", "Ringo"); for(var count = 0; count < beatles.length; count++) { alert(beatles[count]); } }; shout(); // 傳遞參數 function total(num1, num2) { var count = num1+num2; alert(count); } total(1, 2); ``` ## 補充：變量的作用域 全局變量：可以在腳本的任何位置被引用 局部變量：只存在于聲明它的函數的內部，作用于特定的函數。 ## 6.對象 **對象**是一種非常重要的數據類型，包含`屬性`和`方法`。 `屬性`是隸屬于某個特定對象的變量； `方式`是只有某個特定對象才能調用的函數。 ``` // 使用new關鍵字來創建對象實例 var alice = new Student; ``` **內建對象** 數組其實就是內建對象 ``` var beatles = new Array(); beatles.length; var num = 7.561; var num = Math.round(num); alert(num); var current_date = new Date(); var today = current_date.getDay(); ``` **宿主對象** 由瀏覽器提供的預定義的對象被稱為**宿主對象**。 宿主對象包括Form、Image和Element等。 ## DOM操作 ### getElementById ``` // 參數為獲取元素的id屬性的值 document.getElementById(id) // typeof 返回操作對象的類型 <div id="container"></div> <script> alert(typeof document.getElementById("container")); // 獲取元素對象的屬性和方法。 console.dir(object); </script> ``` ### getElementsByTagName ``` // 返回一個對象數組，參數為標簽名 document.getElementsByTagName(tag) <ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> alert(document.getElementsByTagName("li").length); alert(typeof document.getElementsByTagName("li")); </script> ``` ### getElementsByClassName ``` // 參數為獲取元素的class屬性的值 document.getElementByClassName(class) // typeof 返回操作對象的類型 <div class="container"></div> <script> alert(typeof document.getElementsByClassName("container")); </script> ``` ### getAttribute ``` // 查詢屬性，只能通過元素節點對象來調用。 object.getAttribute(attribute) ``` ### setAttribute ``` // 設置屬性，只能通過元素節點對象來調用。 object.setAttribute(attribute, value) ``` ### querySelector ``` // 參數為選擇器，返回第一個元素對象 document.querySelector("選擇器"); ``` ### querySelectorAll ``` // 參數為選擇器，返回元素對象集合 document.querySelectorAll("選擇器"); ``` ### 獲取body和html標簽 ``` // 獲取body標簽 document.body; // 獲取html標簽 document.documentElement; ``` ## 7.類和構造函數 ~~~ class Person { name; constructor(name) { this.name = name; } introduceSelf() { console.log(`Hi! I'm ${this.name}`); } } const alice = new Person("Alice"); alice.introduceSelf(); // 一個name屬性 // 一個需要name參數的構造函數 // 一個introduceSelf方法 // 省略構造函數 class Animal { sleep() { console.log("zzzzzz"); } } const dog = new Animal(); dog.sleep(); ~~~