阿嬤都看得懂的 JavaScript 怎麼寫

昨天我們提及程式語言的 4 個重要特徵：

1. 變數
2. 型別
3. 條件判斷
4. 迴圈

那麼，今天就讓我們開始學習 JavaScript 怎麼表達這 4 個特徵吧！

1. 變數
   昨天我們提到變數宣告是這樣的：

有個變數  十月五號的錢錢 = 1000
有個變數  十月五號的待購商品 = {品項："珍珠奶茶"，價錢：40}
有個變數 十月五號的待購商品清單 = [ {品項："珍珠奶茶"，價錢：40},  {品項："椰果奶茶"，價錢：35},  {品項："珍珠紅茶"，價錢：35}, ...,  {品項："椰果紅茶"，價錢：25}]

在 JavaScript 這個神燈精靈語的方言中，我們是這樣說的

let budgetOct5 = 1000
let itemOct5 = {category: "bubble tea", price: 40}
let itemListOct5 = [{category: "bubble tea", price: 40}, {category: "coconut jelly milktea", price: 35}, {category: "bubble black tea", price: 35}, ..., {category: "coconut jelly black tea", price: 25}]

可以發現，我們在給予變數這個名字的時候，會盡量使用清楚明晰的單字組合；畢竟，我們之後可能還會回來改寫這些指令。當我們把這些單字組合在一起的時候，我們通常會將單字的第一個字母大寫，或者在單字間用底線連結。

有些時候，在比較老派的說法中，你也會看到

var budgetOct5 = 1000

這兩種說法在多數情境下都通用，但是現在更推薦使用 let 為主。

另外，你也可能看見

const budgetOct5 = 1000

這表示 budgetOct5 這個變數指到的內容是固定不動的。一旦我們跟神燈精靈這麼說了以後，budgetOct5 的內容就無法再被更動。阿嬤們可能會很狐疑，這樣不是很不方便嗎？不，有些時候，我們就是希望那個變數儲存的資料，是不會被不小心改動到的。例如，圓周率 pi 就是 3.1415926，我們不會希望 pi 這個變數，竟然會在執行某些功能以後，被覆寫或變更掉。

另外，我們昨天也需要告訴神燈精靈，我們需要讓它執行些功能：

有個功能 買東西(錢錢, 待購商品){
    有個變數  阿嬤主人要的計算結果 = 錢錢 - 待購商品.價錢
    回覆  阿嬤主人要的計算結果
}

使用 JavaScript 這個方言的時候，我們會這樣說：

function buyAnItem(budget, item){
	let result = budget - item.price
	return result
}

2. 型別
   令人慶幸的是，JavaScript 是個弱型別的方言，也會在執行功能的時候，盡可能腦補型別轉換。因此，除非在比較特殊的情況下，否則我們不是那麼需要擔心型別的問題。另外，JavaScript 的型別區分相對簡單。例如，於 JavaScript 中，所有數字都屬於 number 這個型別；不像在 C 語言中，還必須以數字大小或是否帶小數點，區分為 int, double, float ...... 等等不同型別。

對於數字這個型別而言，JavaScript 使用

• +, -, *, / 表示加減乘除；
• % 表示餘數；
• 許多時候，我們會看見 num++ 這樣的寫法；這是 num = num+1 的縮寫。同理，num-- 就表示 num=num-1，以此類推。

對於文字串這個型別而言，方便解釋起見，讓我們先

let str1 = "Log"
let str2 = "os"

JavaScript 使用

• • 來表示字串合併；例如，str1 + str2 的結果會是 "Logos"。
• 文字串.slice(數字, 數字) 來表示字串切分，前個數字表示從哪邊開始切，後個數字表示切出幾個字；例如，str1.slice(1, 2) 的結果會是 "og"，因為是從 "Log" 這個字串的第 1 個字 (也就是 "o") 開始切，切出 2 個字得到 "og"。另外，也可以使用
• 文字串[數字] 作為 文字串.slice(數字, 1) 的簡寫，也就是只拿出字串中某個位置的字；例如 str2[1] 的結果就是 "s"，因為 "s" 出現在 "os" 這個文字串的第 1 個位置。
• 文字串.indexOf(文字串) 來表示字串搜尋，用來找到圓括弧中的文字串在前面那個文字串中的位置，都找不到的時候則回覆 -1；例如，str1.("o") 的結果會是 1。

對於布林值而言，JavaScript 使用

• && 表示 and；例如， True && False 會得到 False，而 True && True 會得到 True。
• || 表示 or；例如，True || False 會得到 True，而 False || False 會得到 False。

3. 條件判斷
   昨天我們提到的條件判斷是這樣的：

	如果(待購商品清單[跳號]>30){
		錢錢 = 錢錢 - 30
	} 否則 {
		錢錢 = 買東西(錢錢, 待購商品清單[跳號])
	}

在 JavaScript 中，我們則會寫成這樣：

	if(itemList[num]>30){
		budget = budget - 30
	} else {
		budget = buyItem(budget, itemList[num])
	}

另外，值得注意的是，清單 (list) 在 JavaScript，以及其他神燈精靈方言中，叫作「陣列」(array)。在某些神燈精靈方言，例如 C# 中，陣列和清單有著細微的不同，不過在大多數的方言中，清單和陣列是類似的。

4. 迴圈
   昨天我們還提到了迴圈：

	重複做(有個變數 跳號 = 0; 跳號<清單.長度; 跳號 = 跳號 +1){
		錢錢 = 買東西(錢錢, 待購商品清單[跳號])
	}

使用 JavaScript 會這麼說：

	for(let num = 0; number<list.length; number = number +1){
		budget = buyAnItem(budget, itemList[num])
	}

那麼，就讓我們來看看，該怎麼使用 JavaScript 叫神燈精靈幫阿嬤們做事吧！我們先來玩個遊戲，看看我們是否能夠順利驅動神燈精靈吧！

寫一個功能，讓我們可以把任何文字串中所有字的順序顛倒過來。例如 "Logos" 變成 "sogoL"。

既然是需要寫一個功能，我們就會先寫出這樣的結構：

function reverseString(告訴神燈精靈的文字串){
	神燈精靈要執行的事情：把這文字串顛倒過來，然後存進結果的變數中
	return 結果
}

那麼，就讓我們想想，神燈精靈要怎麼把文字串顛倒過來吧！讓我們想想，什麼叫作「顛倒過來」呢？其實就是把最後 1 個文字放到第 1 個位置，然後把倒數第 2 個文字放到第二個位置，以此類推。

聰明的阿嬤應該會有感覺：這個「以此類推」，其實就是按照某個模式重複做某件事情的意思。既然是要重複做，我們第一個想到的指令，應該就會是迴圈。說到迴圈，我們就會思考迴圈的起點、終點、以及跳號。既然我們是從最後 1 個文字開始處理，再處理倒數第 2 個文字，起點就是最後的文字，而跳號是每次減 1。那麼終點呢？我們會做到第 1 個文字為止，所以就是最開頭的文字囉。

接著，讓我們想想：我們要怎麼找到最後的文字呢？例如，"Logos" 這個文字串的最後一個字，是第幾個字呢？其實就是第 5 個字。為什麼我們知道呢？因為這個文字串有 5 個字，或說它的長度是 5 。因此，我們是從位置為文字串長度的字開始，每次跳號減 1，然後到第 1 個字結束。不過，細心的阿嬤應該會記得，神燈精靈的文化中，會從位置 0 開始算。因此，我們會是從位置為文字串長度減 1 的字開始，每次跳號減 1 ，做到位置為 0 的字結束。寫成神燈精靈語的結構會長這樣：

	for(let num=文字串.length-1; num>0; num=num-1){
		神燈精靈在每次跳號要做的事情
	}

那麼，神燈精靈在每次跳號的時候，需要做些什麼呢？既然我們的結果，是要完全顛倒過來的文字串，我們就只要每次跳號都把那個文字記錄下來，並且抄在前個文字後面就可以了。因為我們說過神燈精靈記性很差，所以它沒辦法直接紀錄，我們必須給個變數來做這個紀錄。這個變數最早會存放什麼東西呢？什麼都沒有，不過因為之後需要儲存的東西是文字串。所以我們會先給它一個空的文字串 ""。那麼，我們要怎麼把某個文字抄在另個文字之後，或說，怎麼把文字/ 文字串合併呢？在 JavaScript 當中非常簡單，只需要使用加法符號 "+" 就可以了。因此，整個迴圈我們會這樣寫：

	let result = ""
	for(let num=文字串.length-1; num>0; num=num-1){
		result = result + 文字串[num]
	}

因此，我們的整個函式會長這樣：

function reverseString(str){
	let result = ""
	for(let num=str.length-1; num>0; num=num-1){
		result = result + str[num]
	}
	return result
}

這時候，我們輸入

	reverseString("Logos")

就會得到 "sogoL" 這個結果囉。

等等，不對啊，我現在把上面這段程式碼寫在 CodePen 的 JavaScript 區，卻什麼都沒出現。是有什麼地方出問題嗎？

其實原因很簡單，我們只有告訴神燈精靈要做這個功能並且給出回覆，但是我們並沒有告訴它，要把這個回覆的結果顯示在螢幕上。因此，神燈精靈並沒有把這個結果顯示出來。想要神燈精靈在螢幕上顯示些資訊，在 JavaScript 這個方言中，是使用

	console.log(資訊)

這個指令。

因此，既然我們需要的資訊是

	reverseString("Logos")

我們就需要告訴神燈精靈

	console.log(reverseString("Logos"))

那麼，這個資訊會顯示在哪邊呢？讓我們點開發展者模式，就會在 Console 的標籤下，看見訊息囉：

或者，在使用 CodePen 的時候，也可以點開左下方的 Console 標籤，就會彈出 Console 面板囉～對於看 Console 訊息很方便喔！

這個顛倒文字串的程式碼，我放在這邊：
https://codepen.io/LogosChen/pen/RwZNyxL