Day02 JavaScript Function(函數)

閱讀時間約 8 分鐘


從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//,可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/**/前後包夾要註解的內容。

raw-image

轉換環境

從上個單元的經驗,有些人可能會發現:把JS程式碼寫在Console內是很不實際、不方便的。因為瀏覽器Console在你按下Enter時就會執行,可是我們不一定需要程式馬上執行。而且重新整理後,一切都消失殆盡了。所以在開始之前,我們必須先設置一個更好寫JavaScript的環境。

Codepen

CodePen是一個基於瀏覽器的寫程式工具,可以撰寫HTML、CSS、JavaScript並且即時預覽。非常適合小型專案或簡單的實驗。更棒的是,即使不登入也可以進行撰寫(最好還是登入把結果存起來)。

點進CodePen頁面後,按下Start Coding或Create New Pen。

按下Start Coding。

按下Start Coding。

按下創建後,出現這樣的畫面,一側是寫程式區域,空白處則是預覽區域。

按下創建後,出現這樣的畫面,一側是寫程式區域,空白處則是預覽區域。

調整後可以看見左側畫面有HTML、CSS、JS三種類型,網站基本上就是由這三種語法結合而成。可以測試一下,在HTML框內隨便輸入文字,右方即時的出現了內容。

Codepen即時編譯了左方面板輸入的內容。

Codepen即時編譯了左方面板輸入的內容。

我們可以專注在JS的部分。用滑鼠拖曳的方式,拉大JS的面板,並隨便輸入一些字。

raw-image

你會發現,我們的程式碼可以一次寫很多行,Codepen會幫我們一行一行的執行,就像其他真實世界JS的編譯器一樣。不像Console按下Enter一次執行一行,多了許多方便性。

其他

在實際的作業中,VSCodeSublime Text以及最近很流行的Cursor等工具也是相當有名的,在使用這些工具時步驟稍微複雜一點,必須先在電腦內下載NodeJS,建立執行JavaScript的環境,才能讓JS程式碼在瀏覽器之外(你的電腦上)運行。我們的目標是了解JavaScript基礎的運作,CodePen已經是足夠好的解決方案。

接著討論今天的主題。

Function(函數)

Function是什麼

Function就像一個語言(英文、中文)中的動詞。我們可以透過function來告訴JavaScript應該執行什麼動作。

舉例來說,如果我們人是以JS來溝通的話,我們可以透過function來下指令。

用JavaScript來告訴人,執行eat、sleep指令。

用JavaScript來告訴人,執行eat、sleep指令。

顯然這幾行程式不會有用,因為JavaScript沒有預設的eat、sleep動作。

但JavaScript有其他的指令,試試看在CodePen上輸入alert()

raw-image
raw-image

畫面中出現一個彈跳視窗,裡面有一行字「JavaScript執行跳出警告」。

raw-image

你會發現,彈出視窗的訊息,就是我們放在alert()括號內的字。換句話說,我們可以在括號內傳入某些資料,讓function動作執行時,有個資料參考。這種傳給function的資料,稱為函數的「arguments(參數)」,也常看到文件簡稱成args

創造自己的Function

除了預設的函數外,我們也可以創建自己的function。只需要告訴JavaScript這個function需要執行什麼動作即可。

創建一個基本的function,我們需要關鍵字function

raw-image


觀察function可以看見它的架構是:

function 名稱() {}


關鍵字(function)、名稱、小括弧、大括弧都是必須的。函數要執行的指令會接著寫在大括弧內。把大括弧換行只是習慣,也可以全部寫在同一行。

再接著把function的動作完成,我讓這個function做一個預設的alert。

raw-image

定義好的function只會待在原地。如果要讓它真的執行,記得要呼叫它。

在function名稱後面加上()就可以實際使用它。

在function名稱後面加上()就可以實際使用它。

raw-image


接下來可以在小括號內加上arguments(參數),不像其他程式語言,參數不用指定類別。同時,我們可以為參數任意的取名字,這邊寫的是name,但你也可以寫xtheName...

raw-image
字串'Erkin'被傳進function,以+連接其他字串顯示了出來。

字串'Erkin'被傳進function,以+連接其他字串顯示了出來。

raw-image


這邊再提一次,在JS裡面字串用’’””都是可以的,同時結尾有沒有加分號(;)都沒關係。(通常編譯器會配合formatter(格式工具)幫忙處理)


讓JS跟我們說兩次hi:

除原有的彈出視窗外,還多了「我是瀏覽器」的一次。也可能因為CodePen重新整理的時間有點誤差多看到幾次。但總而言之我們讓程式執行了兩次sayHi()。

除原有的彈出視窗外,還多了「我是瀏覽器」的一次。也可能因為CodePen重新整理的時間有點誤差多看到幾次。但總而言之我們讓程式執行了兩次sayHi()。


可以放很多的變數,例如我把教學科目改成變數x,再加上單元編號y

raw-image


就會出現這樣的內容:

教學內容變成字串'JavaScript',單元的數字變成數字2了。

教學內容變成字串'JavaScript',單元的數字變成數字2了。

從這個例子可以看到在JS裡,要怎麼定義function、變數要設幾個、用什麼型別,自由度是非常高的。你幾乎可以打造任何符合你所需的function。

小括號的重要性

有時候我們會看到function的名稱單獨出現,沒有小括號。有什麼差別呢?

raw-image

找到function的名稱之後,在某些情況下不一定會直接用它,我們之後會看到實際的例子。把function比擬成現實生活的工具會更好理解一點。第一行就比如說你把螺絲起子拿來然後不做任何事情,第二行是你找到螺絲起子,而且用它來鎖螺絲。括號表示啟動那個function。之後如果你發現你明明寫了function,但它卻沒有任何作用。有可能是忘了加()

為了方便識別,我在前面的單元談到console.log() 以及之後的內容講到function或method都加了()以方便辨識。但在這種「我只是討論到這些function,並不是真的要實際執行它」的情況,其實不該有用來啟動function的()

小結

不只在JS,function在任何程式語言中都是相當重要的部分,因為它能夠將程式中的重複邏輯進行包裝,讓程式透過比較簡單的方式重複使用。從上面的例子可以看到「說兩次hi」需要用到的程式碼幾乎差不多,我們當然也可以透過複製貼上達成一樣效果,但如果需要用100次、1000次呢?重複的部分就會顯得很不必要撰寫,而且假如這個功能要變更(你別想了,一定會要改的),你會痛恨你之前用的是複製貼上而不是function。使用複製貼上的方法重複撰寫的可讀性、維護性都會很差,你可能會看不懂一堆重複的內容,或者改了其中99項忘了改某1項,這時候很難找到哪裡出了問題。所以可重複利用、很容易大量變更的function才會那麼重要。幾天之後我們還會談到更進階的function應用。記得,這裡的重點是了解function的骨架


明天我們會講object,什麼是object?它可以用來做什麼?我們一步一步回答這些問題。


Resource

今日Codepen

連結

Credits

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

0會員
11內容數
留言0
查看全部
發表第一個留言支持創作者!
HCY 71的沙龍 的其他內容
歡迎來到「10日 JavaScript」,有鑑於自己先前學習JavaScript的流程過於破碎且凌亂,特別整理了這份文章,包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人,讓大家不必再走太崎嶇的路。內容會分成10篇,一步步
歡迎來到「10日 JavaScript」,有鑑於自己先前學習JavaScript的流程過於破碎且凌亂,特別整理了這份文章,包含了基本語法、資料型態、常用函數及JavaScript實作等。希望能幫助到一些需要用到、想要了解JavaScript的人,讓大家不必再走太崎嶇的路。內容會分成10篇,一步步
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
主要來講宣告函式跟箭頭函式 : 宣告函式(Function Declaration) 語法: function functionName(parameters) { return result; } 特點: 使用 function 關鍵字 函式名稱是必需的 存在函式
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。