Javascript教學全攻略2019 - 13個課程

如果你要我只選擇一種編程語言來學習, 我一定會推介: Javascript。

學習javascript前,先需要學習HTML/CSS。如果你不懂HTML,請先參考:HTML教學全攻略2019 - 9個課程

直到2019年, Javascript已經是無所不能。除了配合jQuery用作基本網頁的前端開發, 它還可以用作後台 (node.js), 什致寫APP (React/Angular/ionic)。

要學好Javascript, 練習好基本功是非常重要。

我叫Jack,是一位Awwwards認可得獎,有多年的編程教學經驗的編程員。

這篇「Javascript教學全攻略2019 - 13個課程」,旨在從零開始,教授你基本的Javascript編程知識。

準備好了?我們開始吧!

1. Javascript 基本概念

要運行javascript,其實是非常簡單的 - 只要你有browser便可以了!

你可以在HTML檔內,新增一個script tag。這個script tag內,運行的便是javascript語法!試試運行以下源碼:

如果你運行成功,應該會像上圖般,彈了一個alert box視窗來!

記得每寫完一個javascript句子,都要加上一個;

接下來的其他例子,我都會使用codepen去展示源碼。由於codepen會即時運行我寫的javascript,因此,我會comment掉所有alert的句子。你跟著做時不用comment。

所謂comment,就是在每一句的前面加上//,或使用/* */包著不用運行的東西。然後這一句就會變成灰色,不會運行,只供你自己作參考。

在以上的例子,我comment掉了alert('123');。而且我不用使用script tag,因為codepen上JS的部份,已經是script tag內運行的code。

在接下來的例子,我也會comment掉所有的alert,以確保這一頁能夠正常地運行。

2. 變數 (Variable)

變數是寫Programe第一個要掌握的概念。可以看看以下youtube片:

變數就如小學數學的代數一樣,例如:
x + 1 = 5
那麼x是什麼?

x就是4

如以上的例子,x就是一個變數。它裝著數值4。

然而,電腦世界中的變數,則可以裝著很多不同的類別的東西,包括數字,文字等等。

這些類別,我們稱之為data type。以下是一些常用的data type:

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

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

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

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

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

Float (有小數點的數字)和Integer (數字)是一模一樣。只不過Float的數字是點數,而Integer的數字是整數。

若變數儲存的是String(文字)的話,你則需要利用一個單引號'或雙引號"包著它,例如:

String(文字)的話,使用單引號'或雙引號"去包著它都可以。

在兩個String中間使用+號,代表combine string。例如,
"This" + " is"會變成"This is"

下一個data type為boolean:

從以上看見,只要該變數的數值有單引號,或雙引號,便是String。否則的話,它就是Integer或是boolean。

在現階後,你先學習這3種Data Type。其他的data type如array,object等會在接下來的章節深入討論。

3. 函數 (Function)

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

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

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

在以上的例子,我們先建立了一個Function叫alertsth()。

接下來,我們運行了alertsth()這個function 共3次。

每一個function名稱,都會有一個()。基本上你一見到(),它就是一個function。比方說,我們之前使用的alert()都是一個function。

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

在scope內定義的variable,叫local variable。意思是這些variable只能在這個scope內使用。在scope外並不可以取存這些variables。

在建立一個function後,它是不會直接運行的。你必須call這個function,這個function才會運行。在以上的例子,我們call了alertsth()這個function 3次。

Functions更可以接受parameter,例如:

在以上的例子,我們建立了一個名為combinesth的function。這個function會接受兩個parameter;x和y。(在括號內)

接著,我們在call function時,使用combinesth()時會放入兩個parameter(e.g. 'jack'和'chan')。

如是者,'jack'會在function裡變成x'chan'在則會變成y。最後結果會變成'jack combine with chan'

最後一個概念,就是function可以return一個數值。例如:

在以上的例子, 於combinesth這個function內, 有一個叫z的值, 而function最後會return z。因此, 我們在使用這個function時, 需要再設立一個新的變數(在以上例子就是temp), 去儲存這個function return回來的數值。

4. Logic: If...else

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

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

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

先看看這段影片:

在javascript,控制condition的方法是使用if...else。

if (a>0)代表當a大過0時,便會運行接下來的Program。

else代表否則的話,便會運行另外的Program。

()代表condition。當condition符合成立時,便會運行接下來的Program。

在condition中,我們會用到一些Compare Expression。以下是一些常用的Compare Expression:

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

我們也可以建立更複雜的condition,例如:

&&代表and。表示兩個condition必須皆符合,整個condition才算符合

||代表or。表示兩個condition,只要有一個符合,整個condition便算符合

除了if 和else外,我們也可以使用else if。當if的condition不成立時,便會運行接下來的else if。如果這次的condition也不成立,便會再運行接下來的else if,直到condition成立,或是運行else。

else if在同一個比較語句中,可以使用很多次。但else就只能使用一次。

5. Logic: while

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

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

可以看看以下短片:

在javascript,常見的loop是while及for。我們先看看while loop。

與if...else一樣,while()內的是condition。當這個condition成立時,電腦會不斷去重複運行當中的program。

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

6. Logic: For loop

另外一個常見的loop是For loop。

讓我們看看for loop的寫法:

在以上的例子,這個loop會運行5次。讓我們在了解一下(i=0;i的意思。

i=0是variable i的初始狀態。

i

i++代表每過一個loop,i的數值都會加1。

一開始i的數值是0。運行了一遍後,i的數值加了1,變成1。但由於它還是少於5,因此它由會運行多一遍。

運行多一遍後,i的數值再加1,變成2。但由於它還是少於5,因此它又會再運行多一遍。

如此類推,直到i變成5的時後,i不再少於5,這個loop便會中斷了。

7. Array

這一章,我們要學習Array。

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

比方說,我有一班學生,一共有30人。要在電腦記下他們的名字,與其建立30個變數,倒不如只建立一個變數,其data type是array。這樣,我們只用一個變數,便可以儲存這30人的名字了。

Array和Integer/String一樣,都是一種data type。我們來看看它的寫法:

在以上的例子,我們定義了一個array 叫people。內裡有3個數值(jack,sam及peter)。每一個數值用,去分隔。

people[0]代表這個array中的第1個數值,就是jack。

people[1]代表這個array中的第2個數值,就是sam。如此類推。

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

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

關於array的操作有很多,比方說:為array新增一個數值,刪除數值,排序...你不用全部背進腦裡。要用到哪些功能,google一下別人怎樣寫便可以了。

比方說,我想為array新增一個數值。我可以google「javascript array add item」,找到了原來可以使用push(),去為array新增數值:

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

這個寫法,會把array裡的所有東西都loop出來。

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

8. Object

Object是我們要學習最後的一個data type。我們通常會用{}去表達。

Object比Array更強大。它可以儲存一大組不同data type的數據,什至是functions。我們來看看Object的寫法:

在上面的例子,我們建立了一個名為person的object。裡面有多個variable,包括name,age,job等等。每個variable會有自己的數值。

我們可以利用.去輸出這個object的variable。例如,person.name。

Object內的Variable更可以是Array。如上面的例子,我們可以使用for loop去輸出這個object入面Array的數值。

javascript內的object可演變成JSON。JSON是一種常用數據格式,用於資料傳輸。

9. 處理String

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

除了+外,關於處理String的function有很多。我們來學學其中兩個,比較常用處理String的方法 - substring和indexof。

substring()可以讓你,把String的一部分抽出來。比方說,"something text".substring(1, 4),會把第1個字元(s)以及第4個字元(t),中間的String抽出來。變成"ome"

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

10. Callback Function - setTimeout()

Callback Function是一個比較深層次的概念。代表當一個Function運行完後,接下來會運行另一個Function。這個Function,我們稱次為Callback Function。

setTimeout() 這個Function需要兩個變數:1個Function和秒數。意思是等待n秒後,便會運行該Function。在以上的例子,3000就代表3秒(javascript的時間是以毫秒計算的)。因此,3秒後,它便會運行function(){}

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

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

我們通常會在{}中隔行,輸入我們真正要運行的東西。例如:

在以上的例子,你要等待3秒後,便會運行alert。

11. Redirect - Window.location

javascript也可以redirect頁面。我們會使用window.location。用法如下:

如上面的例子,頁面會redirect到yahoo.com。

12. Debug: Console log

在以上的例子,我們常常會使用alert()去查看變數的值。

然而,alert並不是最好的方法去debug/查看變數的值。因為有些data type,例如array和object,並不可以在alert中好好顯示出來。

這時候,我們會使用console.log()

如上圖,我們可以使用console.log()記上變數x。

接下來,你可以在檔案中任何一個位置按右鍵->Inspect Element。然後,你可以在console中找到變數的值。

13. 總結/下一步

學習javascript並不容易。以上的12個課程,只是javascript的基礎的編程概念。你還需要好好去做練習,鞏固每一章的概念,才能充份理解和運用javascript。

大家好好去學習吧!

你可能也會喜歡...

in 全部, 創業

市場調查: 如何了解目標用戶需要

比方說,你想做一個產品 A。 但是你不知道有沒有市場。可以怎樣做? 最簡單的方法,當然是做市場調查,簡單來說,就是「問人」! 我們有個學名:稱為「客戶驗證」。

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!