從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//
,可以透過快捷鍵cmd
(ctrl
) + /
完成。多行註解則是用/*
及 */
前後包夾要註解的內容。
從上個單元的經驗,有些人可能會發現:把JS程式碼寫在Console內是很不實際、不方便的。因為瀏覽器Console在你按下Enter時就會執行,可是我們不一定需要程式馬上執行。而且重新整理後,一切都消失殆盡了。所以在開始之前,我們必須先設置一個更好寫JavaScript的環境。
CodePen是一個基於瀏覽器的寫程式工具,可以撰寫HTML、CSS、JavaScript並且即時預覽。非常適合小型專案或簡單的實驗。更棒的是,即使不登入也可以進行撰寫(最好還是登入把結果存起來)。
點進CodePen頁面後,按下Start Coding或Create New Pen。
調整後可以看見左側畫面有HTML、CSS、JS三種類型,網站基本上就是由這三種語法結合而成。可以測試一下,在HTML框內隨便輸入文字,右方即時的出現了內容。
我們可以專注在JS的部分。用滑鼠拖曳的方式,拉大JS的面板,並隨便輸入一些字。
你會發現,我們的程式碼可以一次寫很多行,Codepen會幫我們一行一行的執行,就像其他真實世界JS的編譯器一樣。不像Console按下Enter一次執行一行,多了許多方便性。
在實際的作業中,VSCode、Sublime Text以及最近很流行的Cursor等工具也是相當有名的,在使用這些工具時步驟稍微複雜一點,必須先在電腦內下載NodeJS,建立執行JavaScript的環境,才能讓JS程式碼在瀏覽器之外(你的電腦上)運行。我們的目標是了解JavaScript基礎的運作,CodePen已經是足夠好的解決方案。
接著討論今天的主題。
Function就像一個語言(英文、中文)中的動詞。我們可以透過function來告訴JavaScript應該執行什麼動作。
舉例來說,如果我們人是以JS來溝通的話,我們可以透過function來下指令。
顯然這幾行程式不會有用,因為JavaScript沒有預設的eat、sleep動作。
但JavaScript有其他的指令,試試看在CodePen上輸入alert()
。
畫面中出現一個彈跳視窗,裡面有一行字「JavaScript執行跳出警告」。
你會發現,彈出視窗的訊息,就是我們放在alert()
括號內的字。換句話說,我們可以在括號內傳入某些資料,讓function動作執行時,有個資料參考。這種傳給function的資料,稱為函數的「arguments(參數)」,也常看到文件簡稱成args。
除了預設的函數外,我們也可以創建自己的function。只需要告訴JavaScript這個function需要執行什麼動作即可。
創建一個基本的function,我們需要關鍵字function
。
觀察function可以看見它的架構是:
function 名稱() {}
關鍵字(function
)、名稱、小括弧、大括弧都是必須的。函數要執行的指令會接著寫在大括弧內。把大括弧換行只是習慣,也可以全部寫在同一行。
再接著把function的動作完成,我讓這個function做一個預設的alert。
定義好的function只會待在原地。如果要讓它真的執行,記得要呼叫它。
接下來可以在小括號內加上arguments(參數),不像其他程式語言,參數不用指定類別。同時,我們可以為參數任意的取名字,這邊寫的是name
,但你也可以寫x
、theName
...
這邊再提一次,在JS裡面字串用’’
或””
都是可以的,同時結尾有沒有加分號(;
)都沒關係。(通常編譯器會配合formatter(格式工具)幫忙處理)
讓JS跟我們說兩次hi:
可以放很多的變數,例如我把教學科目改成變數x
,再加上單元編號y
。
就會出現這樣的內容:
從這個例子可以看到在JS裡,要怎麼定義function、變數要設幾個、用什麼型別,自由度是非常高的。你幾乎可以打造任何符合你所需的function。
有時候我們會看到function的名稱單獨出現,沒有小括號。有什麼差別呢?
找到function的名稱之後,在某些情況下不一定會直接用它,我們之後會看到實際的例子。把function比擬成現實生活的工具會更好理解一點。第一行就比如說你把螺絲起子拿來然後不做任何事情,第二行是你找到螺絲起子,而且用它來鎖螺絲。括號表示啟動那個function。之後如果你發現你明明寫了function,但它卻沒有任何作用。有可能是忘了加()
。
為了方便識別,我在前面的單元談到console.log()
以及之後的內容講到function或method都加了()
以方便辨識。但在這種「我只是討論到這些function,並不是真的要實際執行它」的情況,其實不該有用來啟動function的()
。
不只在JS,function在任何程式語言中都是相當重要的部分,因為它能夠將程式中的重複邏輯進行包裝,讓程式透過比較簡單的方式重複使用。從上面的例子可以看到「說兩次hi」需要用到的程式碼幾乎差不多,我們當然也可以透過複製貼上達成一樣效果,但如果需要用100次、1000次呢?重複的部分就會顯得很不必要撰寫,而且假如這個功能要變更(你別想了,一定會要改的),你會痛恨你之前用的是複製貼上而不是function。使用複製貼上的方法重複撰寫的可讀性、維護性都會很差,你可能會看不懂一堆重複的內容,或者改了其中99項忘了改某1項,這時候很難找到哪裡出了問題。所以可重複利用、很容易大量變更的function才會那麼重要。幾天之後我們還會談到更進階的function應用。記得,這裡的重點是了解function的骨架。
明天我們會講object
,什麼是object
?它可以用來做什麼?我們一步一步回答這些問題。
我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。