IT課程 JavaScript基礎 036_語法結構

語句

JavaScript語句（Statements）是一組指令，用於執行特定的任務。

示例：

1
// 變量聲明
2
let userName = '趙健';
3
let age = 18;
4

5
// 條件語句
6
if (age >= 18) {
7
  console.log(userName + ' 是一個成年人');
8
} else {
9
  console.log(userName + ' 是一個未成年人');
10
}
11

12
// 循環
13
for (let i = 0; i < 5; i++) {
14
  console.log('循環輸出 ' + (i + 1));
15
}
16

17
// 函數定義
18
function Hello(name) {
19
  return '你好, ' + name + '!';
20
}
21

22
// 函數調用
23
let sayHello = Hello(userName);
24
console.log(sayHello);

分號

在JavaScript中，分號（;）是語句結束符號，用於標識語句的結束。分號在大多數情況下是可選的，因為JavaScript解釋器會嘗試自動插入分號（Automatic Semicolon Insertion，ASI），以使代碼解析為語法正確。然而，存在一些情況下，ASI 可能會導致不符合預期的行為，因此建議在編寫 JavaScript 代碼時顯式添加分號。

當出現分號時，不管是單行還是多行，此語句結束。

示例：

1
alert('Hello');alert('JavaScript!');

當存在換行符（line break）時，在大多數情況下可以省略分號。

示例：

1
alert('Hello')
2
alert('JavaScript!')

1
alert('Hello');
2
alert('JavaScript!')

1
alert('Hello')
2
alert('JavaScript!');

1
alert('Hello');alert('JavaScript!')

當遇到語句塊、代碼塊時，換行不會自動添加分號。且 空格 和 換行 會被忽略。

示例：

1
alert
2
(
3
1+
4
   2
5
   +1);

註釋

在JavaScript中，註釋是用於在代碼中添加說明和備註的文本，這些文本對於程序的執行沒有實際影響。註釋對於提高代碼可讀性、協作和調試非常有用。

單行註釋

使用 // 符號可以創建單行註釋。從 // 開始到行末的所有文本都將被視為註釋。

示例：

1
alert('Hello JavaScript!'); // 跟隨在語句後面的單行註釋
2
// 獨占一行的單行註釋

多行註釋

使用 /* 開始，*/ 結束可以創建多行註釋。在這兩個符號之間的所有文本都將被視為註釋。

1
/*
2
  這是一個多行註釋
3
  可以跨越多行
4
*/
5
alert('Hello');
6
/*
7
多行註釋也可以用於註釋掉一塊代碼，下面的代碼不會執行
8
alert('JavaScript!');
9
*/

對話框

JavaScript提供了幾種用於與用戶進行簡單交互的對話框，包括alert、confirm和prompt。這些對話框允許你向用戶顯示信息、詢問問題或接受輸入。當對話框顯示時，代碼會暫停執行，直到用戶關閉對話框為止。

alert 對話框

alert 對話框用於向用戶顯示一條消息，並等待用戶點擊”確定”按鈕。

示例：

1
alert('Hello 內部JavaScript!');

效果：

confirm 對話框

confirm 對話框用於向用戶顯示一個帶有確認和取消按鈕的對話框，通常用於詢問用戶是否要執行某個操作。

示例：

1
    let yesNo = confirm("你在學習JavaScript嗎?");
2
    alert(yesNo);

效果：

prompt 對話框

prompt 對話框用於向用戶顯示一個帶有輸入字段的對話框，通常用於接受用戶的輸入。

示例：

1
    let name = prompt("請輸入你的名字：", '');
2
    alert(name);

效果：

開發者工具

JavaScript開發者工具是瀏覽器內置的一組工具，用於幫助開發者調試、分析和優化JavaScript代碼。不同的瀏覽器提供不同的開發者工具，以下是常見瀏覽器的JavaScript開發者工具：

Chrome 開發者工具

打開 Chrome 瀏覽器，按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）可以打開 Chrome 開發者工具。

鼠標在瀏覽器中，右鍵，彈出菜單選擇”檢查”，可以打開 Chrome 開發者工具。

如圖：

點擊瀏覽器”設置及其他”圖標，選擇”更多工具”—“開發人員工具”，可以打開 Chrome 開發者工具。

如圖：

主要功能和面板：

• Console（控制台）： 用於執行和調試JavaScript代碼，查看輸出、錯誤以及警告信息。
• Sources（源代碼）： 提供代碼編輯器、斷點設置、監視表達式等功能，用於調試JavaScript源代碼。
• Network（網絡）： 查看頁面發起的網絡請求，檢查請求和響應的詳細信息。
• Performance（性能）： 分析頁面性能，查看加載時間、CPU使用情況等。
• Application（應用程序）： 查看和調試本地存儲、Session Storage、Cookies等。
• Elements（元素）： 查看和編輯DOM樹，修改CSS樣式。

關鍵字

JavaScript關鍵字是在JavaScript編程語言中具有特殊用途的保留字，它們用於標識變量、函數、語句等。這些關鍵字不能被用作標識符（例如變量名、函數名等）。

以下是一些JavaScript關鍵詞：

1. 基本關鍵字：

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. 保留關鍵字（在嚴格模式下有特殊用途）：

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. ECMAScript 6（ES6）引入的關鍵字：

• class
• const
• export
• extends
• import
• super