前端基礎

-2024 / 02 / 19

JavaScript 基本使用 - 變數、型別、運算、流程控制、迴圈

this.web

上篇文章介紹了 JS 是什麼，以及它可以幹嘛，接下來就正式進入教學吧！

基本準備

在開始學習 JavaScript 之前，要先有可以寫 JavaScript 的工具，這邊推薦由微軟開發的免費軟體 vs code，點進網站直接下載安裝即可。

接著，我們在桌面新增一個資料夾，叫做 JS 教學，並在裡面新增一個 HTML 檔案，叫做 js教學.html，並用 vs code 打開這個資料夾。

然後我們可以在 html 檔案中，打上 ! 並按下 tab，vs code 就會快速幫你寫出 html 架構了！

在哪裡寫 JS

我們可以在兩個地方寫 JS，第一個地方是直接在 HTML 裡的 <body> 最下面，打上 <script> ... </script> 標籤，並在 <script> 中寫 JS，如下:

<body>
  
  <!- 其它 HTML ->

  <scipt>
      // 在這裡寫你的 JS
  </scipt>
</body>

第二個地方是在 HTML 外部寫 JS，並從 HTML 引入 JS 檔案，我們在資料夾新增一個額外的 JS 檔案，叫做 js教學.js，就可以在 HTML 引入，引入方法也是在 <body> 的最下面打上 <script> 標籤，並在標籤內寫上 src (來源) 即可:

<body>
  <!- 其它 HTML ->

  <script src="./js教學.js" />
</body>

第二種方法較常使用，因為如果 JS 程式碼很多的話，會讓整個 HTML 檔案變得不易閱讀，所以等等我們都用第二種方式教學。

如何打印出值

接著我們來試著寫出你的第一個程式碼，我們在 js教學.js 裡打上這段程式碼並儲存，然後打開 HTML 看一下 (要記得引入 JS 檔案喔):

alert('hello world');

打開 HTML 檔案後會發現瀏覽器跳出一個 hello world 的提示框了！ (放上圖片)

alert 正是跳出提示框的意思，只要裡面放上值，就可以查看了！

不過 alert 有個小缺點，就是在按下確認鍵之前，下面的程式碼都不會執行，也就是會阻塞程式碼，這在某些時候不是好事，所以我們更常用第二種方法來打印出值，如下所示:

console.log('hello world');

儲存後，在瀏覽器中按下 F12 可以打開控制台，並點到 console 頁面，就可以看到我們輸入的值了！

JS 變數 variable

OK！我們已經會輸入 JS 了，不過剛剛我們是直接輸入值，如果我們要輸入 10 次的 'hello world'，難道要手動打十遍嗎？不! 所以我們會把值儲存給一個變數，這個變數就像是一個儲存空間的地方，比如說，我把 'hello world' 儲存給 x:

let x = 'hello world';

此時我們就可以直接打印 x，就會輸出 hello world 了：

console.log(x)

JS 中的資料型別 data type

資料型別就像是資料的類別、分類，在 JS 中常見的型別有:

number: 數字
string: 字串、文字
boolean 布林: true / false (對 / 錯)
array: 陣列，對岸習慣叫做數組
object: 物件，對岸習慣叫做對象

例如我們剛剛輸入的 hello world 就是字串 string，如果要輸入字串，就必須像我一樣用單引號 '' 或是雙引號 "" 包住值，這兩種作法在 JS 中沒有差別，看你習慣用哪一個都可以。

我們也可以輸入數字並打印出來看看:

let y = 10;
console.log(y);

儲存後就會發現控制台多了 10。

接著我們也來打印 boolean 看看。

let z = false;
console.log(z);

一樣儲存後打開控制台就會看到 false。

宣告變數的方法

宣告變數的意思就是製作變數，像是剛剛我們都用 let 關鍵字來製作變數對吧，其實在 JS 中有三種宣告變數的方法，分別為 var、let、const，我來簡單介紹一下它們的差別:

var: 舊版 JS 的宣告方式，很多沒更新的教學文章都還是用這個，建議不要使用這種方式，因為它會造成變數提升和重複宣告的問題，這個還不懂沒有關係，之後再看就好。
let: ES6 新增的方式，建議用這個，因為他不會變數提升，也不能重複宣告。
const: ES6 新增的方式，使用它宣告的變數就不能在改變了。

懶人包，不要用 var，只用 let 或 const。

更詳細的比較可以參考 JavaScript 重要觀念 - var、let、const 差別

修改變數的值

修改變數的值非常簡單，只要直接覆蓋就可以了，例如：

let x = 1;
x = 2;
console.log(x);

儲存後打印出來就是 2 了。

要注意的是，如果用 const 宣告變數就不能修改了喔，而且一定要在宣告變數的時候就給它值:

// 錯誤
const x;

// 錯誤
const y = 1;
y = 2;

// 正確
const z = 3;

所以 const 是用來宣告確定不會改變的值。

JS 註解

有時候我們想在程式碼上面寫一些筆記，方便之後回來看得懂自己在寫什麼，而這些筆記不能被程式碼執行，此時就可以使用註解，其實剛剛也偷用到了，就是兩條斜線 //:

// 這是註解，程式碼不會執行被註解的地方

// 是註解一行，如果要一次註解很多行，可以使用 /* */，例如:

/*

裡面的東西都被註解起來了

*/

在 vs code 中，可以按下 ctrl + / 來快速的註解喔！

變數的命名規則

變數的名字式不能亂取的，有以下這些規則

變數名稱必須以字母、下劃線（_）或美元符號（$）開頭，不能以數字開頭。
變數名稱只能包含字母、數字、下劃線或美元符號。
變數名稱區分大小寫，例如 myVariable 和 MyVariable 是兩個不同的變數。

通常命名會有描述性，也就是大概描述這個變數是甚麼，比如:

let userName = 'Jack'; // 正確做法
let x = 'Jack' // 非常不好的做法

JS 運算

程式語言最厲害的地方就是運算超快，在 JS 也有很多運算的方法，叫做運算符，例如 1 + 2，+ 就是加法運算符。

一般做運算的運算符叫做算術運算符有，加、減、乘、除、餘數、次方：

let x = 1 + 2; // 3
let y = 2 - 1; // 1
let z = 3 * 2; // 6 此為乘法運算符
let k = 6 / 3; // 2 此為除法運算符
let p = 8 % 3; // 2 此為餘數運算符，就是 8 / 3，剩下的數字
let q = 2 ** 3; // 8，此為次方運算符，就是 2 的 3 次方

還有另外兩個特別的運算符，++ 和 --，也很簡單，就是自身的數值加 1 或減 1

let x = 1;
console.log(++x) // 2

let y = 3;
console.log(--y) // 2

要注意的是，++、-- 放在變數前後會不太一樣，放在變數前代表先加完再執行程式碼，放在變數後代表先持行程式碼在加 1，例如下面的程式碼

let x = 1;
console.log(x++) // 打印出 1，因為放在後面，所以先執行程式碼才會加 1
console.log(x) // 2, 此時已經加完了，在打印一次就變 2 了

除了讓自身 + 1 以外，也可以使用 += 運算符來決定要自身加多少，比如:

let x = 1;
x += 10; // 等於 x = x + 10
console.log(x) // 11

也可以搭配其他算術運算符:

let x = 2;
x *= 10 // 20
x -= 10 // - 8
x /= 2 // 1

要注意的是，程式語言裡面的等號，其實是指派的意思，將右邊的值只配給左邊，並不是像數學一樣要解方程式喔:

let x = 1;
x = x + 1; // 將右邊的值 2, 指派給左邊的變數

JS 判斷

在 JS 中如果要比較大小，就可以使用比較運算符，其實就是國中學的大於小於符號:

2 > 1 // 大於, true
2 < 1 // 小於, false
1 >= 1 // 大於等於, true
1 <= 1 // 小於等於, true

2 == 2 // 等於, true
2 != 2 // 不等於, false

等於比較特別一點，要打兩個等號才是比較的意思; 而不等於是的寫法是 ! + =。

但在 JS 中，我更建議使用三個等號，三個等號是嚴格等於的意思; 嚴格不等於是 ! + 兩個 =

1 == '1' // true
1 === '1' // false

1 != '1' // false
1 !== '1' // true

可以發現兩個等號會誤判它們的型別，這樣可能會讓程式發生預料之外的錯誤。

if-else 流程控制

如果我們希望在條件成立時執行某些程式，就可以使用 if-else 判斷式，比如:

let x = 1;
let y = 2;

if (y > x) {
	console.log('y 比 x 大')
} else {
	console.log('y 比 x 小')
}

如果我們要判斷多種情況就可以使用 else if (...) 例如:

let x = 1;
let y = 2;

if (y > x) {
	console.log('y 比 x 大');
} else if (y === x) {
	console.log('y 和 x 一樣大');
} else {
	console.log('y 比 x 小');
}

JS 迴圈 loop

在某些時候，我們可能希望程式碼重複執行多次，比如說:

let x = 1;
x++;
x++;
x++;
console.log(x) // 4

此時就可以使用迴圈來解決:

let x = 1;
for (let i = 0; i < 4; i++) {
	x++;
}
console.log(x) // 4

而 JS 有兩種迴圈，分別是 for 迴圈和 whilt 迴圈，我們先來看看 for 迴圈:

for 迴圈

for 迴圈的語法為:

for (語句1; 語句2; 語句3) {
	// 你要執行的程式碼
}

語句1: 迴圈執行前的設定
語句2: 迴圈是否執行的條件
語句3: 迴圈執行完一次後要做的是

舉剛剛的例子來說

for (let i = 0; i < 4; i++) {
	x++;
}

迴圈執行前: 讓變數 i 為 0
迴圈執行的條件: i < 4
每執行完一次: i + 1

while 迴圈

while 迴圈的語法較簡單:

while (條件判斷) {
	// 你要執行的程式碼
}

例如:

let x = 1;
while (x < 10) {
	x++;
	console.log(x);
}

當 x < 10 時，就會不斷重複執行迴圈，所以再用 while 時，一定要注意條件判斷，如果條件永遠成立，那迴圈就永遠不會停止，就可能會讓瀏覽器當掉喔。

小結

今天我們介紹了 JS 的一些基本用法，包括變數、型別、運算符、if-else、迴圈，也有提到一些新手要注意的地方，例如變數的名稱、兩個等於和三個等於的差別、while 迴圈的條件等等，要自己動手做一次印象才會深喔！