iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 27

[Day 27] 阿嬤都看得懂的 JavaScript 怎麼寫

阿嬤都看得懂的 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
}
  1. 型別
    令人慶幸的是,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。
  1. 條件判斷
    昨天我們提到的條件判斷是這樣的:
	如果(待購商品清單[跳號]>30){
		錢錢 = 錢錢 - 30
	} 否則 {
		錢錢 = 買東西(錢錢, 待購商品清單[跳號])
	}

在 JavaScript 中,我們則會寫成這樣:

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

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

  1. 迴圈
    昨天我們還提到了迴圈:
	重複做(有個變數 跳號 = 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


上一篇
[Day 26] 阿嬤都看得懂的程式語言在幹嘛
下一篇
[Day 28] 阿嬤都看得懂的怎麼操縱 DOM
系列文
你阿嬤成為網頁前端工程師的第一步30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-12 18:27:06

第27天了! 恭喜即將完賽 (拍手!!!

謝謝你,你也是喔!一起努力!

我要留言

立即登入留言