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

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

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

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

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

以下是一些常用的data type：

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

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

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

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

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

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

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

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

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

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

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

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

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

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

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

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

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

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

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

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

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

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

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

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

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

我們先看看這段影片：

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

我們一起輸入：

然後增加一個變數：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

接著下層輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

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

意思是：

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

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

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

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

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

以下是6種常用的Compare Expression：

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

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

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

&&代表and。

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

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

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

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

||代表or。

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

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

接下來，我們會學習另外一個概念 - Loop。

有時候，一些指令需要不斷重複去執行，我們便會使用Loop。

可以看看以下短片：

在javascript，常見的loop有兩種的，
第一種叫做while loop，
第二種就叫for loop。

我們先一起看看while loop。

首先輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

與if...else一樣，while()內的是condition。

當這個condition成立時，電腦會不斷去重複運行當中的program。

在以上的例子，由於1永遠是等於1，因此，以上的program的123會不斷重複去運行。

來到下一章，我們要學習 - Array。

Array的中文是「數組」，意思是一組相似的數據，通常會使用[]去表達。

比方說，我有一班學生，一共有30人。

要在電腦記下他們的名字，與其建立30個變數，倒不如只建立一個變數，其data type是array。

這樣，我們只用一個變數，便可以儲存這30人的名字了。

我們一起輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

在以上的例子，我們定義了一個array 叫people。

內裡有3個數值（jack，peter及jenny），每一個數值用去分隔。

由於這個叫people的array共有3個數值，因此，它的長度是3。

要注意array的第一個數值，是[0]，不是[1]。

關於array的操作有很多，比方說：

為array新增一個數值，刪除數值，排序...你不用全部背進腦裡。

其實關於array其實有好多不同的function可以用，大家可以按以下延伸閱讀來了解更多不同的array設定。

延伸閱讀：

比如，我想為array新增一個數值，原來可以使用push()來新增：

這時候，你會發現alert[3]就可以成功顯示新的值。

另外一個比較常用的用法，是array會配合for去使用：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

我們一起看看for loop中的意義是什麼：

其實這裡也有一個較好的輸入法，就是有時候你不會知道這個array的大小是甚麼，

所以我們在這裡可以直接用：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這個輸入法，會把array裡的所有東西都loop出來了。

.length會返回array的長度。與for loop配合一流！

這是一個array的常用輸入法來的，大家記得努力練習吧。

Callback Function是一個比較深層次的概念。

代表當一個Function運行完後，接下來會運行另一個Function。

這個Function，我們稱之為Callback Function。

首先我們一起在Chrome Google：settimeout

原來javascript裡有一個function稱為setTimeout。

在這頁面中，拉下一點，你會發現這個function，是會take一些parameter。

毫秒是什麼來的？我們一起輸入看看：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

在以上的例子，3000就代表3秒(javascript的時間是以毫秒計算的)。

因此，3秒後，它便會運行function(){}。

Callback Function 由於只運行一次，我們通常都不用為這個Function改名，直接用function(){}便可以。

這些不用改名的Function，我們 稱之為Anonymous Function。

因此，你會看到，等待3秒後，會出現alert「123」及「456」。

所以，現在你明白到，setTimeout的使用方法了吧。

以上便是Callback Function的基本概念教學了。

接著，我們將會學習更多String的其他功能。

我們在先前章節所學習的+，是一種基本的處理String方法，表示combine String。

除了+外，關於處理String的function有很多。

我們來學學其中兩個，比較常用處理String的方法 ：substring和indexof。

下一個常用的，就是indexof。

indexOf()則可以返回字元或字串的位置(以數字表示)。

我們一起輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

所以，要顯示出text的位置，而text前面總共有13個字元(s)。

以上，就是indexof的使用方法了。

學習javascript並不容易！

以上的12個課程，只是javascript的基礎編程概念。

你還需要好好去做練習，鞏固每一章的概念，才能充份理解和運用javascript。

大家好好去學習，加油！