JavaScript編寫方式

JavaScript是一種指令碼語言，用於為網頁新增互動性和動態功能。它可以直接嵌入到HTML中，並通過瀏覽器解釋執行。下面是一些常見的JavaScript編寫方式和相應的程式碼範例：

內聯方式

在HTML檔案中直接嵌入JavaScript程式碼，使用`<script>`標籤將程式碼包裹起來。這種方式適用於簡單的指令碼。

<!DOCTYPE html>
<html>
<head>
    <title>內聯方式</title>
</head>
<body>
    <h1>JavaScript內聯方式</h1>
    <script>
        // JavaScript程式碼
        alert("Hello, World!");
    </script>
</body>
</html>

內部檔案方式

將JavaScript程式碼儲存在一個獨立的.js檔案中，然後在HTML檔案中使用`<script>`標籤引入該檔案。這種方式適用於較複雜的指令碼，可以提高程式碼的可維護性和重用性。

<!DOCTYPE html>
<html>
<head>
    <title>內部檔案方式</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>JavaScript內部檔案方式</h1>
</body>
</html>

script.js檔案中的程式碼：

// JavaScript程式碼
alert("Hello, World!");

外部檔案方式

將JavaScript程式碼儲存在一個獨立的.js檔案中，並通過`<script>`標籤的src屬性引入該檔案。這種方式適用於大型專案，可以提高程式碼的可維護性和載入速度。

<!DOCTYPE html>
<html>
<head>
    <title>外部檔案方式</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>JavaScript外部檔案方式</h1>
</body>
</html>

script.js檔案中的程式碼：

// JavaScript程式碼
alert("Hello, World!");

事件處理方式

通過給HTML元素新增事件處理常式，實現對使用者操作的響應。可以使用`<script>`標籤內聯編寫事件處理常式，也可以在外部檔案中定義函數並通過`<script>`標籤引入。

<!DOCTYPE html>
<html>
<head>
    <title>事件處理方式</title>
    <script>
        function showMessage() {
            alert("Button clicked!");
        }
    </script>
</head>
<body>
    <h1>JavaScript事件處理方式</h1>
    <button onclick="showMessage()">Click me</button>
</body>
</html>

以上是一些常見的JavaScript編寫方式和相應的程式碼範例。根據具體的需求和專案規模，選擇適合的方式來編寫JavaScript程式碼。

JavaScript的變數

變數定義

在JavaScript中，變數是用來儲存資料的容器。在使用變數之前，需要先定義它。

JavaScript中的變數定義有三種方式：使用var關鍵字、使用let關鍵字和使用const關鍵字。

使用var關鍵字

var關鍵字是JavaScript中最早引入的定義變數的方式。使用var關鍵字定義的變數是函數作用域的，即只在當前函數內部有效。如果在函數內部使用var關鍵字定義的變數沒有使用var關鍵字宣告，則該變數會成為全域性變數。

範例：

   function example() {
     var x = 10; // 在函數內部定義變數x
     console.log(x); // 輸出10
   }
   example();
   console.log(x); // 報錯，x未定義

使用let關鍵字

let關鍵字是ES6引入的定義變數的方式。使用let關鍵字定義的變數是塊級作用域的，即只在當前程式碼塊內部有效。使用let關鍵字定義的變數不能被重複定義。

範例：

   function example() {
     let x = 10; // 在函數內部定義變數x
     console.log(x); // 輸出10
   }
   example();
   console.log(x); // 報錯，x未定義

使用const關鍵字

const關鍵字也是ES6引入的定義變數的方式。使用const關鍵字定義的變數也是塊級作用域的，且必須在定義時進行初始化，並且不能被重新賦值。

範例：

   function example() {
     const x = 10; // 在函數內部定義常數x
     console.log(x); // 輸出10
   }
   example();
   x = 20; // 報錯，常數x不能被重新賦值

總結：

JavaScript中的變數定義可以使用var、let和const關鍵字。var關鍵字定義的變數是函數作用域的，let和const關鍵字定義的變數是塊級作用域的。const關鍵字定義的變數是常數，不能被重新賦值。

定義規範

JavaScript變數定義規範主要包括變數命名規則和變數宣告方式。下面是詳細介紹以及正確和錯誤的例子：

變數命名規則：

- 變數名只能包含字母、數位、下劃線(_)和美元符號($)，不能以數位開頭。

- 變數名區分大小寫。

- 變數名不能使用JavaScript的保留字（如if、for、while等）。

- 變數名應該具有描述性，能夠清晰表達變數的用途。

正確的例子：

   var age;
   var firstName;
   var _count;
   var $price;
   var myVariable;

反例：

   var 1age; // 以數位開頭
   var first-name; // 包含連字元
   var if; // 使用了保留字

變數宣告方式：

- 使用var關鍵字宣告變數，可以在任何地方宣告變數，但最好在函數的頂部宣告。

- 變數宣告後可以選擇初始化變數的值，也可以在之後的程式碼中賦值。

- 變數宣告後，可以通過賦值操作改變變數的值。

- 變數應該儘可能地被賦予初始值，以避免未定義的行為。如果變數不需要初始值，可以將其賦值為null。

正確的例子：

   var age = 25;
   var firstName = "John";
   var lastName;
   lastName = "Doe";

反例：

   age = 25; // 沒有使用var關鍵字宣告變數
   var firstName; firstName = "John"; // 分開宣告和賦值

總結：遵循JavaScript變數定義規範可以提高程式碼的可讀性和可維護性。合理命名變數並正確宣告和賦值變數可以避免潛在的錯誤和混淆。

變數賦值

在JavaScript中，變數賦值是將一個值賦給一個變數的過程。JavaScript中的變數賦值可以使用等號（=）進行。

以下是幾個變數賦值的案例：

1. 基本的變數賦值：

let name = "John";

在這個例子中，將字串"John"賦值給變數name。

2. 數位變數賦值：

let age = 25;

在這個例子中，將數位25賦值給變數age。

3. 物件變數賦值：

let person = {
  name: "John",
  age: 25
};

在這個例子中，將一個包含name和age屬性的物件賦值給變數person。

4. 陣列變數賦值：

let numbers = [1, 2, 3, 4, 5];

在這個例子中，將一個包含數位的陣列賦值給變數numbers。

5. 函數變數賦值：

function sayHello() {
  console.log("Hello!");
}

let greeting = sayHello;

在這個例子中，將一個函數賦值給變數greeting。

6. 變數之間的賦值：

let x = 5;
let y = x;

在這個例子中，將變數x的值（5）賦值給變數y。

需要注意的是，JavaScript中的變數賦值是通過值傳遞的方式進行的。這意味著當將一個變數賦值給另一個變數時，實際上是將原始變數的值複製到新變數中，而不是將它們指向同一個記憶體地址。因此，對新變數的修改不會影響原始變數。

JavaScript的資料型別

JavaScript具有多種資料型別，包括原始型別和參照型別。以下是對每種型別的詳細介紹以及相應的程式碼範例：

原始型別

- 數位（Number）：表示數值，可以是整數或浮點數。

let num = 10;
     console.log(typeof num);  // 輸出 "number"

- 字串（String）：表示文字資料，由字元組成。

let str = "Hello, World!";
     console.log(typeof str);  // 輸出 "string"

- 布林值（Boolean）：表示真（true）或假（false）的值。

let isTrue = true;
     console.log(typeof isTrue);  // 輸出 "boolean"

- 空值（Null）：表示一個空值。

let nullValue = null;
     console.log(typeof nullValue);  // 輸出 "object"，這是 JavaScript 的一個歷史遺留問題

- 未定義（Undefined）：表示一個未賦值的變數。

let undefinedValue;
     console.log(typeof undefinedValue);  // 輸出 "undefined"

- 符號（Symbol）：表示唯一的識別符號。

let sym = Symbol("description");
     console.log(typeof sym);  // 輸出 "symbol"

參照型別

- 物件（Object）：表示一個複雜的資料結構，可以包含多個鍵值對。

let person = {
       name: "John",
       age: 30,
       city: "New York"
     };
     console.log(typeof person);  // 輸出 "object"

- 陣列（Array）：表示一個有序的集合，可以儲存多個值。

let numbers = [1, 2, 3, 4, 5];
     console.log(typeof numbers);  // 輸出 "object"

- 函數（Function）：表示可重複使用的程式碼塊。

function greet(name) {
       console.log("Hello, " + name + "!");
     }
     console.log(typeof greet);  // 輸出 "function"

這些是 JavaScript 中常見的資料型別及其相應的程式碼範例。

typeof操作符

JavaScript的typeof是一個用於判斷變數型別的操作符。它返回一個字串，表示給定變數的資料型別。

typeof的用法如下：

typeof variable

其中，variable是要檢查型別的變數。

typeof返回的結果有以下幾種可能：

"undefined"：如果變數未定義或未宣告。
"boolean"：如果變數是布林值。
"number"：如果變數是數位。
"string"：如果變數是字串。
"object"：如果變數是物件（包括陣列、函數、null等）。
"function"：如果變數是函數。
"symbol"：如果變數是符號。

型別轉換

JavaScript中的型別轉換是指將一個資料型別轉換為另一個資料型別。JavaScript中有兩種型別轉換：隱式型別轉換和顯式型別轉換。

隱式型別轉換

隱式型別轉換是在執行時自動發生的，不需要顯式地呼叫轉換函數。以下是一些常見的隱式型別轉換案例：

- 字串和數位之間的轉換：

var num = 10;
var str = "20";
var result = num + str; // 結果為字串"1020"

在這個例子中，JavaScript將數位10隱式轉換為字串，然後將字串"20"與之拼接。

- 布林值和其他型別之間的轉換：

var bool = true;
var num = 1;
var result = bool + num; // 結果為數位2

在這個例子中，JavaScript將布林值true隱式轉換為數位1，然後將數位1與另一個數位相加。

- 物件和原始值之間的轉換：

var obj = {name: "John"};
var str = "My name is " + obj; // 結果為"My name is [object Object]"

在這個例子中，JavaScript將物件obj隱式轉換為字串，使用預設的toString()方法將物件轉換為字串。

顯式型別轉換

顯式型別轉換是通過呼叫轉換函數來實現的，可以將一個資料型別轉換為另一個資料型別。以下是一些常見的顯式型別轉換案例：

- 字串轉換為數位：

var str = "10";
var num = parseInt(str); // 結果為數位10

在這個例子中，使用parseInt()函數將字串轉換為數位。

- 數位轉換為字串：

var num = 10;
var str = num.toString(); // 結果為字串"10"

在這個例子中，使用toString()方法將數位轉換為字串。

- 布林值轉換為數位：

var bool = true;
var num = Number(bool); // 結果為數位1

在這個例子中，使用Number()函數將布林值轉換為數位。

總結：
JavaScript中的型別轉換是非常靈活的，可以根據需要進行隱式或顯式轉換。隱式型別轉換在某些情況下可以簡化程式碼，但也可能導致意外的結果。因此，在進行型別轉換時，應該注意資料型別的相容性和轉換的結果。

JavaScript跳脫字元

JavaScript跳脫字元是一種特殊的字元序列，用於表示一些特殊字元或者在字串中插入一些不可見的字元。以下是一些常見的JavaScript跳脫字元：

1. 反斜槓（\）：用於跳脫下一個字元，使其具有特殊的含義。例如，\n表示換行，\t表示製表符。

console.log("Hello\nWorld"); // 輸出：Hello
                             //        World

console.log("Hello\tWorld"); // 輸出：Hello    World

2. 單引號（'）和雙引號（"）：用於在字串中插入引號。

console.log('He said, "Hello!"'); // 輸出：He said, "Hello!"
console.log("She said, 'Hi!'");   // 輸出：She said, 'Hi!'

3. 反斜槓加引號（\'和\"）：用於在字串中插入相同型別的引號。

console.log('He said, \'Hello!\''); // 輸出：He said, 'Hello!'
console.log("She said, \"Hi!\"");   // 輸出：She said, "Hi!"

4. 反斜槓加u和四個十六進位制數位（\uXXXX）：用於表示Unicode字元。

console.log("\u0048\u0065\u006C\u006C\u006F"); // 輸出：Hello

5. 反斜槓加八進位制數位（\XXX）：用於表示八進位制字元。

console.log("\101\102\103"); // 輸出：ABC

6. 反斜槓加特殊字元（\b、\f、\r、\v）：用於表示退格、換頁、回車和垂直製表符。

console.log("Hello\bWorld"); // 輸出：HellWorld
console.log("Hello\fWorld"); // 輸出：Hello
                              //        World
console.log("Hello\rWorld"); // 輸出：World
console.log("Hello\vWorld"); // 輸出：Hello
                              //        World

這些是一些常見的JavaScript跳脫字元，可以根據需要在字串中使用它們來表示特殊字元或者插入不可見的字元。

JavaScript的運運算元

JavaScript中的運運算元用於執行各種操作，例如算術運算、比較運算、邏輯運算等。下面是一些常見的JavaScript運運算元及其用法：

算術運運算元

- 加法運運算元（+）：用於將兩個值相加。

   let a = 5;
   let b = 3;
   let result = a + b; // 8

- 減法運運算元（-）：用於將一個值減去另一個值。

   let a = 5;
   let b = 3;
   let result = a - b; // 2

- 乘法運運算元（*）：用於將兩個值相乘。

   let a = 5;
   let b = 3;
   let result = a * b; // 15

- 除法運運算元（/）：用於將一個值除以另一個值。

   let a = 6;
   let b = 3;
   let result = a / b; // 2

- 取餘運運算元（%）：用於返回兩個數相除的餘數。

   let a = 7;
   let b = 3;
   let result = a % b; // 1

比較運運算元

- 相等運運算元（==）：用於比較兩個值是否相等。

   let a = 5;
   let b = 3;
   let result = a == b; // false

- 不相等運運算元（!=）：用於比較兩個值是否不相等。

   let a = 5;
   let b = 3;
   let result = a != b; // true

- 大於運運算元（>）：用於判斷一個值是否大於另一個值。

   let a = 5;
   let b = 3;
   let result = a > b; // true

- 小於運運算元（<）：用於判斷一個值是否小於另一個值。

   let a = 5;
   let b = 3;
   let result = a < b; // false

- 大於等於運運算元（>=）：用於判斷一個值是否大於或等於另一個值。

   let a = 5;
   let b = 3;
   let result = a >= b; // true

- 小於等於運運算元（<=）：用於判斷一個值是否小於或等於另一個值。

   let a = 5;
   let b = 3;
   let result = a <= b; // false

邏輯運運算元

- 邏輯與運運算元（&&）：用於判斷兩個條件是否同時為真。

   let a = 5;
   let b = 3;
   let result = (a > 0) && (b > 0); // true

- 邏輯或運運算元（||）：用於判斷兩個條件是否至少有一個為真。

   let a = 5;
   let b = 3;
   let result = (a > 0) || (b > 0); // true

- 邏輯非運運算元（!）：用於取反一個條件的值。

   let a = 5;
   let result = !(a > 0); // false

賦值運運算元

- 等號運運算元（=）：用於將一個值賦給一個變數。

   let a = 5;

- 加等於運運算元（+=）：用於將一個值加到變數上，並將結果賦給該變數。

   let a = 5;
   a += 3; // a的值變為8

- 減等於運運算元（-=）：用於將一個值從變數中減去，並將結果賦給該變數。

   let a = 5;
   a -= 3; // a的值變為2

- 乘等於運運算元（*=）：用於將一個值乘以變數，並將結果賦給該變數。

   let a = 5;
   a *= 3; // a的值變為15

- 除等於運運算元（/=）：用於將變數的值除以一個值，並將結果賦給該變數。

   let a = 6;
   a /= 3; // a的值變為2

- 取餘等於運運算元（%=）：用於將變數的值除以一個值的餘數，並將結果賦給該變數。

   let a = 7;
   a %= 3; // a的值變為1

位運運算元

當涉及到處理二進位制資料時，位運運算元是非常有用的。下面是一些常見的JavaScript位運運算元及其用法：

1. 按位元與運運算元（&）：對兩個運算元的每個位執行邏輯與操作。

let a = 5; // 二進位制表示為 0101
let b = 3; // 二進位制表示為 0011
let result = a & b; // 二進位制結果為 0001，即十進位制的 1

2. 按位元或運運算元（|）：對兩個運算元的每個位執行邏輯或操作。

let a = 5; // 二進位制表示為 0101
let b = 3; // 二進位制表示為 0011
let result = a | b; // 二進位制結果為 0111，即十進位制的 7

3. 按位元互斥或運運算元（^）：對兩個運算元的每個位執行邏輯互斥或操作。

let a = 5; // 二進位制表示為 0101
let b = 3; // 二進位制表示為 0011
let result = a ^ b; // 二進位制結果為 0110，即十進位制的 6

4. 按位元非運運算元（~）：對運算元的每個位執行邏輯非操作，即取反。

let a = 5; // 二進位制表示為 0101
let result = ~a; // 二進位制結果為 1010，即十進位制的 -6

5. 左移運運算元（<<）：將運算元的位向左移動指定的位數。

let a = 5; // 二進位制表示為 0101
let result = a << 2; // 二進位制結果為 010100，即十進位制的 20

6. 右移運運算元（>>）：將運算元的位向右移動指定的位數，符號位不變。

let a = 5; // 二進位制表示為 0101
let result = a >> 1; // 二進位制結果為 0010，即十進位制的 2

7. 無符號右移運運算元（>>>）：將運算元的位向右移動指定的位數，符號位也向右移動。

let a = -5; // 二進位制表示為 11111111111111111111111111111011
let result = a >>> 1; // 二進位制結果為 01111111111111111111111111111101，即十進位制的 2147483645

【技術積累】JavaScript中的基礎語法【二】