Web Development 網站開發 (7) - Javascript 基本程式語法

Javascript 是一種程式語言,其核心觀念跟其他程式語言是大同小異。語言的核心元素包含了變數 variable、函式 function、判斷式 if else 以及迴圈 for loop。利用以上的觀念做排列組合可以達成一連串的邏輯處理。

變數 variable

變數的目的是用來儲存資料,這些資料可以在程式執行的過程中被使用、被修改。

變數使用前建議先宣告,雖然 Javascript 允許直接使用變數,但使用未經宣告的變數是非常不推薦。變數宣告有 const 、 let 、var,其中 var 是屬於舊的方法,建議使用 const 跟 let 就好。使用 const 宣告的變數在宣告過後就不能再改變,let 可以允許變數資料的修改。

 // 變數宣告

const a = 1;
let b = 2;
const c = a + b;
console.log(a, b, c) // 印出 1, 2, 3

a = 2; // 出錯 - Uncaught TypeError: Assignment to constant variable.
b = 1 // ok
變數宣告

變數宣告的時候不需要指定型態,一些基本型態包含 Boolean, Null, Undefined, Number, String, Object 等。

const a = 3;       
typeof a;         // number 

const b = 3.13; 
typeof b;         // number

const c = true;  
typeof c          // boolean

const d = "Hello World";     
typeof d          // string

const e = ""      
typeof e          // string

typeof undefined  // undefined
typeof null       // object

// array (array is an object)
const f = [1, 2]
typeof f          // object

// object 
const g = { a: 1, b: 2 }
資料型態

函式 function

如果有一些邏輯是需要重複使用的話,函式可以針對這些邏輯做封裝,每一次呼叫函數的時候就會做一樣的事情。定義函數時可以賦予函數名稱,我們可以把一段有意義的邏輯放在函數裡,這也增加了程式的可讀性。

// 定義一個函數 add,其意義就是把兩個數加起來
// 定義函數的時候,裡面的邏輯還不會被執行,需要等此函數被呼叫
// add 後面的 a, b 為此函數的參數,會在函示被呼叫的時候傳進來
// return 則是函式執行完要回傳給呼叫方的資料
function add(a, b) {
    const _sum = a + b;
	return _sum;
}

// 第一次執行函數
// 1, 2 會被傳進 function add 當作變數 a, b
// line 7 把加總的結果 (3) 再傳回這裡
add(1, 2);   // 3

// 幣二次執行函數
// 10, 100 會被傳進 function add 當作變數 a, b
// line 7 把加總的結果 (110) 再傳回這裡
add(10, 100); // 110
函式 function

判斷式 if else

判斷式的語意就是 if else 這樣的直接,if 後面的條件要求的是 Boolean 的一個條件式。Boolean 這個資料型態就只有兩種 true and false

const a = 1;

// 先判斷 if 後面的判斷是是不是成立 (true),如果成立 (true) 就會執行 if 裡的東西
// 也就是 line 6
if (a == 1) {
    alert("a is 1");
}

// a 不等於 2, 所以 a == 2 的結果會是 false,也就是程式不會執行 if 裡的東西 (line 11)
if (a == 2) {
    alert("a is 2");
}

function checkIfValueIsOne(x) {
    // 如果 x = 1 的時候會執行 line 17, 否則執行 line 19
    if (x == 1) {
        alert("value is 1");
    } else {
        alert("value is not 1");
    }
}

checkIfValueIsOne(1); // alert value is 1

checkIfValueIsOne(2); // alert value is not 1
if else

更多的判斷可以用 if + else if + else ,也可以自行查看 switch 的用法!

迴圈 for loop

在程式語言裡,如果要重複性的做某件事時,你就需要使用迴圈。

// for (初始時執行; 重複執行條件; 每回合結束完要做的是)  
// 以下 for 的執行順序為:
// step 1: 初始時會先做 let i = 0; 
// step 2: 因為 i < 10,滿足執行條件,所以進入line 9執行 console.log('hi')
// step 3: for loop 裡的邏輯執行完畢,執行 i++,也就是把i加上1的動作。
// 重複 step 2 直到條件不滿足後停止

for (let i = 0; i < 10; i++) {
	console.log('hi');
}

// 最後的結果會是hi被印了10次,每一回合的i是 0,1,2,3,4,5,6,7,8,9
first for loop

還記得上面的資料型態介紹裡有一種型態是 array ? array 就是一個序列的空間讓你存放多筆資料。 在使用 array 的時候很常會搭配 for loop 。

const a = [1, 2, 3, 4, 5]; // 宣告 a 是一個內容為1-5的 array

// 程式的世界裡幾乎都是以 0 為起始,
// 如果要對 array 取值的話就是用 arr[index] 的方式
a[0] // 得到 a 這個 array 的第 0 個元素,也就是 1
a[1] // 2
a[2] // 3

// 更新 array 的某個元素值
a[2] = 10 // 打 a 的第二個元素更新為 10,此時 a = [1, 2, 10, 4, 5]

a.length // 獲取 a 的長度, = 5

// 走訪 array 的所有值然後把它印出來
// 以下會印出 1, 2, 10, 4, 5
for (let i = 0; i < a.length; i++) {
    console.log(a[i]);
}

// 把 a 裡的所有元素都 +1
// 以下會印出 2, 3, 11, 5, 6
for (let i = 0; i < a.length; i++) {
    a[i] = a[i] + 1;
}
for loop

以上的 for loop 語法可能可讀性不是這麼高,不過卻是目前大部分程式語言都在用的方法。在 Javascript 的世界裡大家更愛用的其實是 我們稱之為 functional programming 的一些走訪語法譬如 forEach, map, filter, find 等等。

const a = [1, 2, 3, 4, 5]; 

// 走訪方法 1
for (let i = 0; i < a.length; i++) {
    console.log(a[i]);
}

// 方法 2 forEach,與方法 1 是一樣的邏輯
a.forEach((item) => {
    console.log(item)
})
forEach

Javascript 是一種程式語言,知識內容肯定遠不止這些,有興趣的人可以更深入的研究。推薦 w3schools 的教學  https://www.w3schools.com/js/

Huaying Tsai

Huaying Tsai

擅長 Python, Javascript, React, GraphQL。 想寫寫一些適合新手的程式語言教學文。 想推廣現代社會學習多元技能的風氣,建立了技能交換的平台 - https://thoth.tw
台灣