JAVASCRIPT教學課程 (入門篇) 12個章節 - 由淺入深學習Javascript

LindaChan984

直至2021年的今天，Javascript其實已經是無所不能。

除了可以製作網站的前端開發，它還可以拿來做後台，例如：nodejs、app、react、vue、ionic。

在這篇「Javascript教學課程 (入門篇)」，我分開了12個章節，讓你由淺入深學習Javascript，包括：

• Javascript 基本概念
• 變數 (Variable)
• 函數 (Function)
• Logic: If...else
• Logic: while
• Logic: For loop
• Array
• Object
• Callback Function
• Redirection
• 處理String
• Debug
  

準備好了嗎？我們開始吧！

第1章Javascript 基本概念[color=var(--color-white, white)]

當大家學習了HTML及CSS的語言後，現在終於來到Frontend最後一個要學習的語言，就是Javascript。

直至2021年的今天，Javascript其實已經是無所不能。

除了可以製作網站的前端開發，它還可以年來做後台，
例如：node js、app、react、angular、ionic。

如果大家想學習好Javascript，練習好基本功，是非常重要！

今天，我會與大家由淺入深，一起學習Javascript的Programming。

準備好了？我們開始吧！

Javascript 基本概念

第一課要了解的，就是什麼是Javascript，其實Javascript是一種很厲害的語言。

因為無論你需要製作的是frontend、backend、app還是website，基本上是甚麼都能做得到。

其實之前大家學習的html及css，都不是真的programing language，而Javascript才是真正的編程語言。

*如果你還不會HTML, 請先學習: [color=var(--color-primary, #2a6df4)]HTML教學課程 (入門篇)

首先，我們一起在桌面開一個「javascript」的文件夾，然後打開visual studio code軟件。

在visual studio code按 File，選擇Open。

然後選擇桌面「javascript」的文件夾，按打開 / Open。

在左手方位置，按右鍵開一個New File，

文件名稱可以輸入「index」，記得文件的名稱為index.html。

我們首先輸入一個script Tag，在這個tag裡面所運行的語法，
不再是html語法，而是javascript語法。

對於每一個第一次學習javascript的朋友們，第一句輸入的句子是：

alert('Hello World!');

儲蓄後，用Chrome打開它，來運行這句源碼。

如果你運行成功，應該會像上圖般，
彈了一個alert box視窗，寫著「Hello World!」。

記得每寫完一個javascript句子，都要加上一個「;」

如果你輸入了上圖般的3句alert box，

你就發現，視窗會一句一句地運行顯示。

如果有時候，你只想運作第一及第二行，第三行不想運作的話，

我們只需要在不想運行的句子前面，加上「//」便可以了。

「//」是代表Comment，
意思是程式不會運作，只是讓我們編程員去看而已。

這裡要注意的是，「//」只限用了一行的，
如果要用於幾行，便要輸入「/* 內文 */」。

這種輸入法，只要是/*與*/中間的內文，都不會運行的，無論是多少行都是一樣的。

如果有什麼code不想運行的，便可以用上以兩種輸入法來實行。

第2章變數 (Variable)[color=var(--color-white, white)]

了解完Javascript基本概念後，正式進入寫編程第一個要學的概念便是 - 變數 (Variable)。

變數的意思，就如小學代數般。

變數可以代表著很多類別，這些類別，我們稱之為data type。

準備好了？我們開始吧！

變數 (Variable)

了解完Javascript基本概念後，正式進入寫編程第一個要學的概念便是 - 變數 (Variable)。

我們先去看看這個有關Variable介紹的Youtube錄像，大概一分鐘左右：

看完錄像後，我們學到的第一個概念就是變數，變數意思就如小學代數般。

例如：
X + 1 = 5

那麼：
X是什麼？X就是4

小學代數就代表一個數字，可是在編程的世界裡，變數可以代表著很多類別，
這些類別，我們稱之為data type。

以下是一些常用的data type：

• Integer (數字)
• Float (有小數點的數字)
• String (文字)
• Boolean(TRUE/FALSE)
• Array (數組)
• Object (物件)
  

我會先從這3個簡單功能與大家分享，好讓大家簡單明瞭，
包括：Integer (數字)、Float (有小數點的數字)及String (文字)。

Integer (數字)

讓我們先學習Integer (數字)。

要定義一個變數，你可以使用var，或直接為一個變數指派一個數值：

我們一起輸入：
var x =1;

在javascript語法中，你是不需要定義這個變數是什麼data type的，

例如，它是string還是integer，

你只需要直接給它輸入一個value就可以。

我們一起在var下層輸入：
alert(x);

儲存後打開Chrome看看，是不是山現了「1」這個數字呢。

可能有朋友會問，為何不是出x？

因為x是一個變數，而你現在是alert這個變數，所以就會顯示出1。

關於變數的設定上，其實我們也可以去做一些算術。

我們一起在var下層輸入：

上圖大家看到：

輸入 x = 1，y = x + 3，
所以alert x 是出4。

從以上的例子可見，變數若是Integer （數字）的話，你是可以為它們進行運算的。

• y = x + 10 (加)
• y = x - 10 (減)
• y = x * 10 (乘)
• y = x / 10 (除)
• y = x % 2 (餘數)
  

Float (有小數點的數字)

Integer （數字）是齊數的數字，如果有時候需要顯示小數點，我們就會利是用到Float。

Float （有小數點的數字）和Integer （數字）是一模一樣。只不過Float的數字是點數，而Integer的數字是整數。

String (文字)

數字以外，還有另一種變數是string (文字)。

若變數儲存的是String（文字）的話，你則需要利用一個單引號'或雙引號"包著它，例如：

從以上的例子可見，alert這個temp，我們做了一個變數為z，

上圖加了一個var temp，用了z + ‘內文’，這就是Combine string，意思是將兩條字串串連起來。

如上圖的' I am Jack' + ' he is COOL' ，
就會顯示出「I am Jack and he is COOL」。

如果我把alert的temp加入引號，無論是單引號或是雙引號，它就是一個字串。

所以它會顯示「temp」這個文字，而不是var temp的內容。

其實這裡還可以繼續輸入的，
例如在alert括號入面輸入「temp + and he is fine」。

所以它會顯示出：

I am Jack and he is COOL and he is fine

所以大家現在知道字串的用法了吧，以上這些功能，便是string的用法了。

在現階段，你先學習這3種Data Type。

其他的data type，如Array (數組)及Object (物件)等，
會在接下來的章節深入討論。

第3章函數 (Function)[color=var(--color-white, white)]

當我們在編程時，許多時都要重複去寫一些同樣的東西。

為了避免浪費時間，去寫同樣的東西，我們便可以使用函數 (Function)。

函數 (Function)用作把一段program包著，讓你日後可以重複使用。

今天，我會與大家由淺入深，一起學習函數 (Function)。

準備好了？我們開始吧！

函數 (Function)

函數 (Function)是另一個非常重要的編程概念。你可以先看看以下影片：

當我們在編程時，許多時都要重複去寫一些同樣的東西。為了避免浪費時間，去寫同樣的東西，我們便可以使用函數 (Function)。

函數 (Function)用作把一段program包著，讓你日後可以重複使用。

現在我們一起看看這個例子，例如我有一段code是這樣的：

如果以上兩段code會經常用到的，我們便可以使用Function來包著：

function alertx(){}

{}是叫做scope的bracket，意思記是在{}裡面的內容，define這一個function。

上文只是定義了這個function，如果用Chrome把網站打開，其實是什麼都沒有。

所以，如果要用這個function，你就需要call這個function，所以你需要輸入：

alertx();

同樣地，如果輸入三次「alertx();」，就會運行三次這個function。

這裡可以注意的是，當你看到define一個function，alertx括號。大家可以記住，只要一見到括號，就知道它就是function了。

你看上圖的alertx有括號，正正是代表著運行上層那行function。

如果大家有留意，alert()本身就是function這個功能，直接輸入便能使用。

除javascript本身設定的function外，我們也可以自行定義一些function。

另外在alert()後面，你會見到這個{}括號，這是非常常見的scope bracket來的。

{}是一個scope bracket，我們會用它去包著function的內容。

在scope內定義的variable，叫local variable。

意思是這些variable只能在這個scope內使用，在scope外並不可以取存這些variables。

比如{}內的alert(x)，是不能顯得x出來的，因為圖中的alert(x)只能在local variable使用。

所以必須要外面定義，比如上圖的：

var y = 1;
這樣，才能alert到1出來。

Functions更可以接受parameter，例如輸入在：

alertx(x)

這時候，我們每次call這個functions，都可以定義這個x是什麼。

例如第一次alert是1，
第二次alert是3。

這是一個很重要的概念來，就是可以自行take parameter。

雖然大定都是同一個function，
但是當parameter不同，output出來的東西就會有所不同。

這些paramete是可以多過一個的，例如輸入一個逗號y，逗號z。

然後內層增加一個新的變數：

var temp = x * y + z -1;
內層alert(temp);
然後alertx(2,3,5);

再用Chrome把網站打開，就會顯示出10這個數字了。

這個就是function的厲害之處了，當你輸入了一些program後，就可以造一些parameter出來，

只要每一個call這個function，輸入不同的parameter，計算出來的東西就會不同。

Return

我們接著了解更多的function，而其中還有一樣很重要功能，就是叫return。

按以下例子，我們先輸入以下格式：

再用Chrome把網站打開，就會顯示出這樣的效果：

我們如果不在這裡alert，又能怎樣改動呢？

我們可以把alert del，然後需要輸入一條string，比如是輸入：

var temp =

然後在下層輸入：

return temp;

可能你會問，這個return到底是什麼輸入法來的？

return輸入法，原來是我pass了內裡一些東西入去，它最尾會return回一個variable。

比如我一call calAge這個function後，它就會return回一個variable出來的。

意思即是我們在外面，其實可以收回這個variable。

所以這裡我們要更改輸入：

var x = calAge(2019,1990);

因為現在calAge，是會return一個東西，

Return了temp這個東西，而temp就會被pass到x那裡。

接著輸入：

alert(x);

再用Chrome把網站打開，就會顯示出上圖的結果了。

再來輸入一次，內容是這樣的：

有時候，我們都可以在這個算式中再加入一些東西，

比如var x下層再輸入：

x = '***' + x;

結果就會得出：

***I was born at year1990. I am 29 years old.

以上就是return的輸入方法了！

要記得我們在使用這個function時，需要再設立一個新的變數(在以上例子就是temp)，去儲存這個function return回來的數值。

第4章Logic: If...else[color=var(--color-white, white)]

正常的Program，是會一句一句的跟著去運行。

然而，在某些情況下，我們只想運行某一部份的Program。

在另一些情況下，又只運行另一部份的Program。

這時候，我們便要利用編程中的一個非常重要的概念，就是Condition。

最常用控制condition的方法，就是通過if...else來控制。

準備好了？我們開始吧！

Logic: If...else

來到下一個概念，就是condition，意思是正常的Program，會一句一句的跟著去運行。

然而，在某些情況下，我們只想運行某一部份的Program。

在另一些情況下，又只運行另一部份的Program。

這時候，我們便要利用編程中的一個非常重要的概念，就是Condition。

我們先看看這段影片：

我們最常用控制condition的方法，就是通過if...else來控制的。

我們一起輸入：

if (){ }

然後增加一個變數：

var x = 1;
If括號中輸入，x > 1
然後alert(' x is bigger than 1')

接著下層輸入：

else{alert(' x is smaller than 1')}

我們一起細看，整個內容到底是代表著什麼呢？

意思是：

x等於1，如果x大於1，就會行x是大於1的那段code。
如果不是，就會會行x是小於1的那段code。

所以當x=1時，結果就會是運行「else」那一段。

同樣地，我將x更改為等於5，結果就會是運行「if」那一段。

這裡，有一個重要要點要注意的，就是圖中x>1那個括號位置。

括號()中間代表condition，當condition符合成立時，便會運行接下來的Program。

在condition中，我們會用到一些Compare Expression。

以下是6種常用的Compare Expression：

• == 等於
• != 不等於
• > 大過
• < 細過
• >= 大過或等於
• <= 細過或等於
  

我們也可以建立更複雜的condition，例如輸入：

var y = 0;
if (x == 1 && y == 0){alert('condition1')}
else{alert('elsecondition')}

&&代表and。

表示兩個condition必須皆符合，整個condition才算符合。

所以當x=1與y=0都符合要求，就會得出「condition1」。

現在我更改y=10，y不再是等於0時，結果就會得出「elsecondition」。

接著我再把&&更改成||，結果又會變回「condition1」。

||代表or。

表示兩個condition，只要有一個符合，整個condition便會符合。

這裡溫馨提供一下，if括號內是不只是兩種，還可以不斷增加各類condition條件。

else if

除了if 和else外，我們也可以使用else if。

當if的condition不成立時，便會運行接下來的else if。

如果這次的condition也不成立，便會再運行接下來的else if，直到condition成立，或是運行else。

我們一起輸入：

Var x = 9;
else if (x > 8){alert('condition2')}

你會發現，if增加了一個新的condition是else if，
只要條件對if不成立，便會運行接下來的else if，
所有的else if不成立，便會運行接下來的else。

所以你會看到得出了「condition2」的結論。

現在我再輸入多一個else if，今次條件是x > 5，

而var x = 6，得出的結論就是「condition3」。

不過大家要注意的是，
else if在同一個比較語句中，可以使用很多次，但else就只能使用一次。

以上便是if、else if、else的基礎教學了，大家努力練習吧。

更多內容請細看：

JAVASCRIPT教學課程 (入門篇) 12個章節 - 由淺入深學習Javascript