1. JS的輸出
innerHTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一個 Web 頁面</h1> <p id="demo">我的第一個段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
document.write()：
在頁面載入之后，使用 document.write 后，輸出的內容將覆蓋原內容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <script> document.write(Date()); </script> </body> </html>
寫到控制台的例子在前一篇已經用過了。
2. JS變量
用 內嵌JS的 html + Chrome F12 控制台的模式，調試JS語法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一個 Web 頁面</h1> <p>我的第一個段落。</p> <script> c = 20; var d = 25; var myArray = [1, 2, 3, 4, 5]; var myObject = {id:1, name:"Hello World"}; function myPlus(a, b) { return a + b; } console.log(myPlus(c,d)); //輸出 45 console.log(myArray[0]); //輸出 1 console.log(myArray[1]); //輸出 2 console.log(myObject.id); //輸出 1 console.log(myObject.name); //輸出 Hello World </script> </body> </html>
剛好最近在用 lua，上面這個例子可以看出：
- 弱類型；
- 變量聲明時即賦值，var 可省略；
- array 與 table 的構成方式與 lua 相同；
- JS的數組索引從0開始，而不是lua從1開始；
3. JS流程控制：
| break | 用於跳出循環。 |
| catch | 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。 |
| continue | 跳過循環中的一個迭代。 |
| do ... while | 執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。 |
| for | 在條件語句為 true 時，可以將代碼塊執行指定的次數。 |
| for ... in | 用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。 |
| function | 定義一個函數 |
| if ... else | 用於基於不同的條件來執行不同的動作。 |
| return | 退出函數 |
| switch | 用於基於不同的條件來執行不同的動作。 |
| throw | 拋出（生成）錯誤 。 |
| try | 實現錯誤處理，與 catch 一同使用。 |
| var | 聲明一個變量。 |
| while | 當條件語句為 true 時，執行語句塊。 |
測試下 switch:
function myCalculator(calc, a, b) { switch(calc) { case "plus": return a + b; case "minus": return a - b; default: return 0; } } console.log(myCalculator("minus", 100,19));
可以看出在流程控制上 JS 的語法與 C/C++ 的寫法幾乎相同。
再來測試一下 for、for in。
var myArray = [1, 2, 3, 4, 5]; var myObject = {id:1, name:"Hello World"}; function looplog(paramArray, paramObject) { for(k in paramArray) { console.log(k); //輸出 0-4，可見k是索引 } for(k in paramArray) { console.log(paramArray[k]); } for(k in paramObject) { console.log(k); //輸出 id、name，k仍是索引 } for(k in paramObject) { console.log(paramObject[k]); } for(var i = 0; i < paramArray.length; i++) { console.log(paramArray[i]); } } looplog(myArray, myObject);