JS 使用
- 使用 <script> 標簽包裹 JS 代碼
- JS 腳本可以放在 HTML 頁面的 <head> 標簽里面，也可以放在 <body>標簽里面，或者兼而有之
- JS 腳本放在 <body> 標簽的底部，可以改善顯示速度，因為腳本編譯會拖慢顯示
- JS 腳本也可以通過外部文件引入
- 外部文件引入 JS 腳本的優勢有：分離了 HTML 和代碼；使 HTML 和 JS 更易於閱讀和維護；已緩存的 JS 文件可加速頁面加載
- 需要向一張頁面添加多個腳本文件，需要使用多個 <script> 標簽
- 可以通過完整的 URL 或相對於當前網頁的路徑引用外部腳本
JS 輸出
- 使用 window.alert() 寫入警告框
- 使用 document.write() 寫入 HTML 輸出
- 使用 innerHTML 寫入 HTML 元素
- 使用 console.log() 寫入瀏覽器控制台
使用 window.alert()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用window.alert()寫入警告框</title>
</head>
<body>
<h1>使用window.alert()寫入警告框</h1>
<p>打開或刷新當前網頁的時候會彈出一個警告框！</p>
<script>
window.alert("點擊該警告框的確定按鈕之后才會顯示網頁內容！");
</script>
</body>
</html>
使用 document.write()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用document.write()</title>
</head>
<body>
<h1>使用document.write()</h1>
<p>下方內容是使用document.write()寫入的</p>
<script>
document.write("使用document.write()會直接在網頁上輸出內容");
</script>
</body>
</html>
使用 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用innerHTML往元素內寫入內容</title>
</head>
<body>
<h1>使用innerHTML</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "這段文字是通過innerHTML寫入的";
</script>
</body>
</html>
使用 console.log()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用console.log()在瀏覽器控制台輸出內容</title>
</head>
<body>
<h1>使用console.log()</h1>
<p>在瀏覽器控制台輸出內容</p>
<script>
console.log("使用console.log()在瀏覽器控制台輸出內容");
</script>
</body>
</html>
JS 語句
- 在 HTML 中，JavaScript 語句是由 web 瀏覽器“執行”的“指令”
- JS 語句由以下幾部分構成：值、運算符、表達式、關鍵詞和注釋
- JS 語句允許多條共占一行
- JS 會忽略多個空格，可向腳本添加空格以增強可讀性
- 建議把代碼行控制在 80 個字符以內，以增強可讀性
- JS 語句可用花括號 {...} 組合在代碼塊中
JS 關鍵詞
| 關鍵詞 |
描述 |
| break |
終止 switch 或循環 |
| continue |
跳出循環並在頂端開始 |
| debugger |
停止 JavaScript，並調用調試函數（如果可以） |
| do...while |
執行語句塊，並在條件為真時重復代碼塊 |
| for |
標記需要被執行的語句塊，只要條件為真 |
| function |
聲明函數 |
| if...else |
標記需要被執行的語句塊，根據某個條件 |
| return |
退出函數 |
| switch |
標記需要被執行的語句塊，根據不同的情況 |
| try...catch |
對語句塊實現錯誤處理 |
| var |
聲明變量 |
JS 語法
JS 值
- JS 語句定義兩種類型的值：混合值和變量值
- 混合值被稱為字面量（literal），變量值被稱為變量
JS 字面量
- 寫數值有無小數均可：1.501,1001
- 字符串是文本，由雙引號或單引號包圍："字符串"、'字符串'
JS 變量
- JS 使用 var 關鍵字來聲明變量
- 等號 = 用來為變量賦值
JS 運算符
JS 表達式
- 表達式是值、變量和運算符的組合，計算結果是值
- 值可以是多種類型，比如數值和字符串等
JS 注釋
- 使用雙斜杠進行單行注釋 //
- 使用 /*...*/ 進行多行注釋
JS 標識符
- 標識符用於命名變量、關鍵詞、函數和標簽
- JS 所有的變量必須以唯一的名稱來標識
- 標識符首字符必須是字母、下划線（_）或者美元符號（$）
- 連串的字符可以是字母、數字、下划線或美元符號
- 數值不能作為首字符，以便 JS 能輕易區分數值和標識符
- JS 對標識符的大小寫敏感（區分大小寫）
- JS 使用駝峰命名法：第一個單詞首字母小寫，后面的單詞首字母大寫
JS 字符集
- JS 使用 Unicode 字符集
- Unicode 覆蓋世界上幾乎所有的字符、標點和符號
