第三部分 邏輯操作者 JavaScript

📅 發布時間: 2024-06-23 🏷️ 標籤: JavaScript, 變數, 資料型別, 運算符, 條件語句, 邏輯運算, 迴圈, 函數

JavaScript 是一種程式語言，主要用於網頁開發，讓網頁變得互動和動態。本文介紹變數、資料型別、運算符、條件判斷、邏輯運算、迴圈與函數等基礎邏輯操作。

JavaScript 基本介紹

什麼是 JavaScript？

JavaScript 是一種程式語言，主要用於網頁開發
它可以讓網頁動態更新內容，處理使用者輸入並執行複雜的邏輯操作。
在網頁中，JavaScript 與 HTML、CSS 一起工作，使網頁變得更加互動和動態。

JavaScript 的特點包括：

• 跨平台：JavaScript 可以在多種操作系統和瀏覽器上執行。
• 動態類型：變數在執行時可以改變類型。
• 事件驅動：JavaScript 可以處理各種使用者事件，如點擊、移動滑鼠、鍵盤輸入等。

JavaScript 與 Java 是壓根不同的兩個程式語言

毫無相關

💻 開啟簡單的 JavaScript 執行環境

🎯 學習目標:準備執行環境來測試程式碼

步驟 1: 開啟簡單的 JavaScript 執行環境

💻 console.log 顯示數值

🎯 學習目標:使用 console.log 輸出結果

步驟 1: console.log(數值)

可以列印、顯示數值

console.log("Hello, World!"); 

什麼是變數？

變數就像一個標籤盒子，裡面可以放東西。

我們可以把各種不同的東西放進這些盒子裡，然後給每個盒子取個名字。

這樣我們就可以很方便地找到和使用這些東西。

💻 變數宣告與使用

🎯 學習目標:宣告變數並賦值了解變數可重新賦值與動態類型使用 console.log 查看變數內容多變數範例

步驟 1: 宣告一個盒子：

就像我們先準備一個盒子一樣

在程式裡，我們要先透過 let 關鍵字 告訴電腦我們要一個盒子。這就叫做“宣告變數”。

let myBox;

步驟 2: 給盒子取名字：

我們給這個盒子取名叫 myBox。這樣我們以後就可以用 myBox 這個名字來找這個盒子。

let myBox;

步驟 3: 往盒子裡放東西：

我們可以把一些東西放進這個盒子裡，比如一個數字或一個字串。

// ... (前面的程式碼保持不變)

myBox = 10;  // 把數字 10 放進盒子 /* @cat-caption */ → // [新增] 賦值數字：這是將值放入變數的第一步，讓變數儲存資料以供後續使用
myBox = "Hello";  // 把字串 "Hello" 放進盒子，原本盒子內的 10 會直接消失掉喔！ /* @cat-caption */ → // [新增] 重新賦值字串：JavaScript 是動態類型語言，變數可儲存不同類型的值，原值會被覆蓋

步驟 4: 使用盒子裡的東西：

當我們需要用到這些東西時，只需要拿出這個盒子來用就行了。

// ... (前面的程式碼保持不變)

console.log(myBox);  // 顯示盒子裡的東西，這裡會顯示 "Hello" /* @cat-caption */ → // [新增] 輸出變數：透過 console.log 查看目前變數內容，確認賦值成功

步驟 5: 再舉一個例子

假設我們要記住一個人的名字和年齡，我們可以用兩個變數來做到這件事：

let name = "Ray";  // 這是裝名字的盒子
let age = 20;  // 這是裝年齡的盒子

console.log(name);  // 顯示名字，"Ray"
console.log(age);  // 顯示年齡，20

什麼是資料型別？

資料型別就是告訴電腦我們放在變數（盒子）裡的東西是什麼種類。不同種類的資料可以做不同的事情。

💻 資料型別介紹

🎯 學習目標:字串（String）：處理文字數字（Number）：數學運算布林值（Boolean）：真假判斷陣列（Array）：多筆資料儲存與存取物件（Object）：鍵值對結構

步驟 1: 字串（String）

字串是一串文字，可以是字母、數字、符號等，通常用引號括起來。就像一本書中的文字內容。

let myString = "Hello, world!";
console.log(myString);  // 顯示 "Hello, world!"

步驟 2: 數字（Number）

數字可以是整數或小數。數字可以用來做數學運算，就像我們在算數學題目一樣。

let myNumber = 42;
console.log(myNumber);  // 顯示 42

let myDecimal = 3.14;
console.log(myDecimal);  // 顯示 3.14

步驟 3: 布林值（Boolean）

布林值只有兩種：true（真）或 false（假）。這種資料型別通常用來做判斷，就像我們在問“是”或“不是”的問題。

let isStudent = true;
console.log(isStudent);  // 顯示 true

let hasGraduated = false;
console.log(hasGraduated);  // 顯示 false

步驟 4: 陣列（Array）

陣列就像排隊的隊伍，可以放入很多資料。

let colors = ["red", "green", "blue"]; // 裏頭一次放入三個字串 

步驟 5: 陣列（Array）

我們當然可以透過 變數名稱[位置] 來讀取或修改內容
值得一提的是， JavaScript 或者說大部分的程式語言
陣列都是從 0 開始計算

// ... (前面的程式碼保持不變)

console.log(colors[0]);  // 取得第 0 個元素的內容，顯示 "red"

colors[0] = "orange" // 修改第 0 個元素的內容
console.log(colors[0]);  // 重新取得第 0 個元素的內容，顯示 "orange"

步驟 6: 物件（Object）

物件是一種可以存放多個相關資料的結構。
可以想像成一個包含很多小盒子的盒子。
當然物件中的每個小盒子都需要有獨立的名字

let person = {
  name: "Ray",
  age: 20,
  isStudent: true
};

步驟 7: 透過 變數名稱.小盒子的名字 能單獨讀取小盒子的內容

// ... (前面的程式碼保持不變)

console.log(person.name);  // 顯示 "Ray" /* @cat-caption */ → // [新增] 點語法存取：使用 . 運算符快速讀取屬性值，讓物件資料易於存取
console.log(person.age);   // 顯示 20 /* @cat-caption */ → // [新增] 顯示年齡：確認物件內屬性值
console.log(person.isStudent);  // 顯示 true /* @cat-caption */ → // [新增] 顯示布林值：驗證物件多類型資料儲存

person.age = 21; // 更新 age 為 21 /* @cat-caption */ → // [修改] 更新屬性：物件屬性能直接修改，實現動態資料更新
console.log(person.age);   // 顯示 21 /* @cat-caption */ → // [新增] 確認更新：顯示修改後的值

步驟 8: 如果我們要塞入新的小盒子

可以透過變數名稱[新的小盒子名稱]來創造新的小盒子

// ... (前面的程式碼保持不變)

person['likeCat'] = true; // 新增 likeCat 為 true /* @cat-caption */ → // [新增] 方括號新增屬性：動態擴展物件，無需預先定義結構
console.log(person.likeCat);  // 顯示 true /* @cat-caption */ → // [新增] 驗證新增：確認新屬性可用

/*
此時 person 內長這樣，likeCat 被放進去
{
  name: "Ray",
  age: 20,
  isStudent: true,
  likeCat: true
};
 */

基本運算符

基本運算符就像我們在數學課上學到的符號。

可以用來對數字進行加減乘除等運算。

這些符號告訴電腦應該怎麼處理我們的數字。

💻 基本運算符

🎯 學習目標:加減乘除與餘數運算變數間運算

步驟 1: 加法運算符（+）

加法運算符用來把兩個數字相加。

let apples = 5 + 3;
console.log(apples);  // 顯示 8

步驟 2: 減法運算符（-）

減法運算符用來從一個數字中減去另一個數字。

let candies = 10 - 4;
console.log(candies);  // 顯示 6

步驟 3: 乘法運算符（*）

乘法運算符用來把兩個數字相乘。

let balls = 4 * 2;
console.log(balls);  // 顯示 8

步驟 4: 除法運算符（/）

乘法運算符用來把兩個數字相除。

let chocolates = 12 / 3;
console.log(chocolates);  // 顯示 4

步驟 5: 取餘運算符（%）

取餘運算符用來計算兩個數字相除後剩下的餘數。

let remainder = 10 % 3;
console.log(remainder);  // 顯示 1

步驟 6: 另外也可以進行變數和變數的加減乘除

let x = 25;
let y = 4;
let answer = x * y;
console.log(answer); // 100

條件語句

條件語句就像在做選擇題。

根據不同的條件來決定要做什麼事。

這些條件語句幫助我們在程式裡做出決定。

💻 條件語句

🎯 學習目標:if 單條件判斷if...else 二元選擇if...else if...else 多條件switch 多選一

步驟 1: if 語句

if 語句就像在問問題：
“如果這個條件是對的，那麼我們就做這件事。”

比如說如果今天是下雨天，我們就要帶雨傘。

let isRaining = true;

if (isRaining) {
  console.log("記得帶傘");  // 顯示 "記得帶傘"
}

// 這裡我們問：“如果正在下雨？” 如果答案是“是”，那我們就提醒自己要帶雨傘。

步驟 2: if...else 語句

if...else 語句就像在問兩個問題：
如果這個條件是對的，我們就做這件事；
如果不是，我們就做另外一件事。

比如在學校，如果考試及格，我們就可以玩；
如果不及格，我們就要多學習。

let grade = 85;

if (grade >= 60) {
  console.log("你及格了");  // 顯示 "你及格了"
} else {
  console.log("你沒及格 QQ");  // 顯示 "你沒及格 QQ"
}


// 最後會輸出 "你及格了"

步驟 3: if...else if...else 語句

if...else if...else 語句可以處理更多的條件，就像在問一連串的問題。

比如，我們在家裡根據溫度來決定穿什麼衣服。

let temperature = 25;

if (temperature > 30) { // 如果溫度大於 30 度
  console.log("超級熱");  // 顯示 超級熱
} else if (temperature > 26) { // 如果上面的條件沒達成，就會繼續往下問，如果溫度大於 26 度
  console.log("好熱");  // 顯示 好熱
} else if (temperature > 20) {
  console.log("溫度剛剛好");  // 顯示 溫度剛剛好
} else {
  console.log("好冷");  // 顯示 好冷
}

// 最後顯示 溫度剛剛好

💻 邏輯運算符（&& 和 ||）

🎯 學習目標:&& (AND)：多條件皆真|| (OR)：任一條件真switch 結合邏輯條件

步驟 1: and（&&）：這個運算符用來判斷兩個條件是否都達成。如果兩個條件都達成，整個表達式才能算是達成。

let age = 20;
let isStudent = true;

if (age > 18 && isStudent) {
  console.log("你是一個年滿 18 歲的學生");  // 顯示 "你是一個年滿 18 歲的學生"
}



if (age > 25 && isStudent) {
  console.log("你是一個年滿 25 歲的學生");  // 有一個條件不滿足，不顯示
}

步驟 2: or（||）：這個運算符用來判斷兩個條件中是否有一個達成。如果有一個條件達成，整個表達式就為真。

let age = 16;
let hasPermission = true;

if (age >= 18 || hasPermission) {
  console.log("你可以參加活動");  // 顯示 "你可以參加活動"
}

步驟 3: 如果今天有一堆的問題跟情況

除了 if...else if...else 語句
我們有一個更簡單的語法

switch 語句
switch 語句就像是多選一的題目，根據不同的情況選擇要做什麼。比如在遊樂園，不同的票價對應不同的年齡段。

let age = 6;

switch (true) {
  case (age >= 0 && age <= 5):
    console.log("你可以免費入場！");  // 顯示 "你可以免費入場！"
    break;
  case (age >= 6 && age <= 12):
    console.log("你可以買兒童票。");  // 顯示 "你可以買兒童票。"
    break;
  case (age >= 13 && age <= 18):
    console.log("你可以買學生票。");  // 顯示 "你可以買學生票。"
    break;
  default:
    console.log("你可以買普通票。");  // 顯示 "你可以買普通票。"
}

// 你可以買兒童票。！

迴圈

迴圈就像是在做重複的事情，

我們可以用迴圈來讓電腦一次又一次地執行相同的代碼，

直到我們告訴它停止。

💻 迴圈

🎯 學習目標:for 迴圈：固定次數重複while 迴圈：條件為真重複do...while：先執行後判斷

步驟 1: for 迴圈

for 迴圈就像是在數數，我們可以告訴電腦從哪個數字開始，數到哪個數字結束，每次數多少。這樣我們就可以讓電腦做很多次相同的事情。

for (let i = 0; i < 5; i++) {
  console.log("這是第 " + i + " 次");
}

步驟 2: 這裡我們告訴電腦：

從 0 開始（let i = 0）。
停止條件，如果 i 比 5 小那就繼續執行下去（i < 5）。
每次執行完後做的事，次數 1（i++，每次把 i 加 1）。

// ... (前面的程式碼保持不變) /* @cat-caption */ → // for 迴圈結構：初始化(i=0)、條件(i<5)、遞增(i++)確保精準控制重複次數，避免無限迴圈

// 這是第 0 次
// 這是第 1 次
// 這是第 2 次
// 這是第 3 次
// 這是第 4 次

步驟 3: while 迴圈

while 迴圈就像是在問問題，只要答案是“是”，電腦就會一直重複做這件事。當答案變成“不是”時，電腦就會停止。

let i = 0;

while (i < 5) {
  console.log("這是第 " + i + " 次");
  i++;
}

// 這是第 0 次
// 這是第 1 次
// 這是第 2 次
// 這是第 3 次
// 這是第 4 次

步驟 4: 這裡我們告訴電腦：

開始的時候 i 是 0（let i = 0）
停止條件，如果 i 比 5 小那就繼續執行下去（i < 5）。
每次執行完後做的事，次數 1（i++，每次把 i 加 1）。

// ... (前面的程式碼保持不變)

步驟 5: do...while 迴圈

do...while 迴圈有點像 while 迴圈，但是它會先做一次，然後再問問題。如果答案是“是”，就繼續做；
如果答案是“不是”，就停止。
可以理解成先斬後奏

let i = 0;

do {
  console.log("這是第 " + i + " 次");
  i++;
} while (i < 5);

// 這是第 0 次
// 這是第 1 次
// 這是第 2 次
// 這是第 3 次
// 這是第 4 次

函數的定義與調用

函數就像是一個功能盒子，

我們可以把一系列的指令放進這個盒子裡，

給它取一個名字，

然後以後只要叫這個名字，就可以讓這些指令執行。

💻 函數定義與調用

🎯 學習目標:定義基本函數調用函數執行帶參數函數：傳入資料返回值函數：取得結果

步驟 1: 定義函數

我們先來看看怎麼定義一個函數。定義函數就是告訴電腦這個功能盒子裡面有什麼指令。

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

步驟 2:

函數的定義與調用
函數就像是一個魔法盒子，我們可以把一系列的指令放進這個盒子裡，給它取一個名字，然後以後只要叫這個名字，就可以讓這些指令執行。

定義函數
我們先來看看怎麼定義一個函數。定義函數就是告訴電腦這個魔法盒子裡面有什麼指令。

例子：

javascript
複製程式碼
function sayHello() {
console.log("你好，世界！");
}
這裡我們做了什麼：

用 function 關鍵字開始：
這告訴電腦我們要定義一個函數。
給函數取名字：這裡我們叫它 sayHello。

在大括號 {} 內寫指令：
這些指令就是我們要放進魔法盒子裡的東西。

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

步驟 3: 調用函數

現在我們已經有了這個功能盒子（函數），我們可以用它來執行裡面的指令。這叫做“調用函數”。

只要在之後呼叫函數名稱() 就會視同調用函數
請注意要加上括號 () 才會執行裡面的內容

// ... (前面的程式碼保持不變)

sayHello(); 

步驟 4: 帶參數的函數

我們也可以讓函數更靈活，給它一些“參數”，這樣我們可以傳不同的東西給它，它會根據我們給的東西來做不同的事情。

function greet(name) { /* @cat-caption */ → // [新增] 參數 name：允許函數接收外部輸入，实现可重用性，避免重複程式碼
  console.log("你好，" + name + "！");
}

步驟 5: 這裡我們做了什麼：

1. 給函數一個參數 name：
   這個 name 就像是一個盒子，我們可以把名字放進去。
2. 在指令裡使用這個參數：
   我們把 name 和 “你好，” 拼在一起，這樣每次傳不同的名字，函數就會顯示不同的問候語。

調用這個函數時，我們可以傳一個名字給它。

// ... (前面的程式碼保持不變)



greet("小明"); // 你好，小明！
greet("小紅"); // 你好，小紅！

步驟 6: 帶返回值的函數

函數還可以把一些結果返回給我們，就像把魔法盒子打開，看看裡面變出了什麼東西。

function add(a, b) {
  return a + b;
}

步驟 7: 這裡我們做了什麼：

定義函數 add，可以傳入兩個參數 a 和 b。
使用 return 關鍵字：這告訴電腦我們要把 a + b 的結果返回出來。

調用這個函數時，我們可以得到計算的結果。

let sum = add(3, 4);
console.log(sum);  // 顯示 7

總結

函數就像是一個功能盒子。裡面裝著我們定義的指令。

我們可以給它取名字。傳不同的參數給它。

甚至可以讓它返回一些結果。

學會使用函數可以讓我們的程式更加簡潔、有組織，也更容易理解和維護。