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

直至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 基本概念

當大家學習了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, 請先學習: 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)

了解完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下層輸入:

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


上圖大家看到:

輸入 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(文字)的話,你則需要利用一個單引號'或雙引號"包著它,例如:

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



從以上的例子可見,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)

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

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

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

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

準備好了?我們開始吧!

函數 (Function)

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

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

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


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

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



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

function alertx(){}

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


{}是叫做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)

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。

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

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

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


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

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

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

Return

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

按以下例子,我們先輸入以下格式:

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


再用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把網站打開,就會顯示出上圖的結果了。

再來輸入一次,內容是這樣的:

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


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


比如var x下層再輸入:

x = '***' + x;

結果就會得出:

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

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

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

第4章Logic: If...else

正常的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')

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



接著下層輸入:

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

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


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

意思是:

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')}

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條件。

else if

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

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

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


我們一起輸入:

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

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


你會發現,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的基礎教學了,大家努力練習吧。

第5章Logic: while

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

在javascript,常見的loop有兩種的:。

第一種叫做while loop,第二種就叫for loop。

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

準備好了?我們開始吧!

Logic: while

接下來,我們會學習另外一個概念 - 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會不斷重複去運行。

第6章Logic: For loop

有時候,一些Program需要的不是無限量地loop,比如是有限量的loop。

這時候,你就需要學習使用For loop的功能。

準備好了?我們開始吧!

Logic: For loop

如果有時候,

你的program需要的不是無限量地loop,比如是有限量的loop。

來看看以下短片:

我們一起輸入:

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



在以上的例子,這個loop會運行9次。

讓我們在了解一下(i=0;i<10;i++)的意思。

i=0,是variable i的初始狀態。
i< 10,運行不會大於10。
i++,代表每過一個loop,i的數值都會加1。

一開始i的數值是0運行了一遍後,i的數值加了1,變成1。

但由於它還是少於10,因此它由會運行多一遍。

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

如此類推,直到i變成10的時候,i不再少於10,這個loop便會中斷了,所以最多只會運行至9。

學到這裡,大家大概都明白到for loop的功能了吧。

第7章Array

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

這時候,你就需要學習使用Array的功能,來整合你的數據。

準備好了?我們開始吧!

Array

來到下一章,我們要學習 - 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[0]代表這個array中的第1個數值,就是jack。
people[1]代表這個array中的第2個數值,就是peter。
people[2]代表這個array中的第3個數值,就是jenny。

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

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

關於array的操作有很多,比方說:

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

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

延伸閱讀:

Array Functions:
https://www.w3schools.com/js/js_array_methods.asp
Array Sorting:
https://www.w3schools.com/js/js_array_sort.asp


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

people.push('jan');

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

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

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


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

i=0:由於i等於0,代表people[]就是jack。
i<3:i變了1,就是people[1],所以是peter。
I++:接著i等於2,所以是jenny。


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

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

people.length

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


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

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

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

第8章Object

Object是我們要學習最後的一個data type,

功能上Object比Array更為強大,

因為它可以儲存一大組不同data type的數據,甚至是functions。

這時候,你就需要學習使用Object的功能。

準備好了?我們開始吧!

Object

Object是我們要學習最後的一個data type,

我們通常會用{}去表達。

Object比Array更強大,

因為它可以儲存一大組不同data type的數據,甚至是functions。

我們來看看Object的寫法:

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



在上面的例子,我們建立了一個名為person的object。

裡面有多個variable,包括:

name、age、job等等,
每個variable會有自己的數值。

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

person.name

輸入後,就會得出jack這個結果。

溫馨提示:

object裡面的variable,學名稱為property;
object裡面的function,學名稱為method。


我們一起嘗試輸入:

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


Object內的Variable也可以是Array,如上面的例子般。

當然,我們可以使用for loop去輸出這個object入面Array的數值:

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



這個object裡面,我們還可以增加一些function叫personalStatement:

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


輸入後,你會發出這個結果:

My name is jack and my job is IT


這裡我會慢慢解釋,到底發生什麼事情。

其實this.name的this,是這一個function的擁有者,就是person。

所以這個person.name,就會拿到'jack'。


從以上object,你可以見到會有properties,包括有:name、age、job、schools這些普通的variables。


也會declare一些function,就是method。


其實這裡你可能會問,我們這裡define function,沒有給function起名字。

有些function是不需要有名的,因為你只會用一次而已。

這些沒有名的function,我們稱它為anonymous function。


另外. 有一種常見的結構化資料,叫JSON。

原來, 當你看到如上圖般,全部使用雙引號的javascript object,就是JSON。

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

JSON將來我會更詳細與大家分享,這裡先讓大家了解初步概念為止。

以上便是Object的基本概念教學,大家記得多加練習喔。

第9章Callback Function

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

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

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

準備好了?我們開始吧!

Callback Function

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

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

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


首先我們一起在Chrome Google:settimeout


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


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

第一個parameter,會take一個function;
第二個parameter,會take一個秒數(毫秒milliseconds);

毫秒是什麼來的?我們一起輸入看看:

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的基本概念教學了。

第10章Redirection

很多朋友都會問,Javascript有沒有redirect頁面的功能?

其實,Javascript也可以redirect頁面的。

如果在你的程式設計上,非常需要用到這類功能,

這時候,你就需要學習使用redirect了。

準備好了?我們開始吧!

Redirection

Javascript其實也可以redirect頁面。

我們會使用window.location來輸入:

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



比如輸入google頁面連結,你就能成功redirect到google頁面了。


Redirect功能,更可以配合setTimeout一起使用的,比如上圖般輸入3秒。

在等待3秒後,才會redirect到google頁面。

第11章處理String

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

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

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

這時候,你就需要學習處理String的功能了。

準備好了?我們開始吧!

處理String

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

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

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

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

substring

第一個是substring,我們一起輸入:

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


substring()可以讓你,把String的一部分抽出來。


比如說"something text".substring(1, 4),

會把第1個字元(s)以及第4個字元(t),中間的String抽出來,變成「ome」。

你可以看到,s是第0個,0是第一個,如此類推。

所以抽出第一個character和第二四個character前面的東西,

結果就會是ome。

這就是一個常用的substring,大家記得努力練習喔。

indexof

下一個常用的,就是indexof。

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

我們一起輸入:

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


T是第一個字元(s),
h是第二個字元(s),
i是第三個字元(s),
如此類推,空格也會計算作一個字元(s)。


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

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

第12章Debug

來到最後一堂要學習的,就是Debug。

寫Program時, 我們一定會遇到錯誤。要了解哪裡出錯, 就會使用Debug功能。

這功能是為了方便大家記錄某些變數,了解其數值多少,從而更容易去Debug的。

最後一堂,大家準備好了嗎?我們開始吧!

Debug

來到最後一堂要學習的,就是Debug。

在上面分享的各種例子,我們常常會使用alert()去查看變數的值。


比如是alert123,就會顯示出123。

然而,alert並不是最好的方法去debug/查看變數的值。

因為有些data type,例如array和object,

並不可以在alert中好好顯示出來。

因此, 我們會使用console log。


當你refresh頁面時,發現空白一片,什麼都沒有。

但其他它是Log住了,記錄了這個data。


我們只需要空白頁按右鍵,按「檢查」,


然後按console,你會發現多了「123」,

這一個就是console.log了。

將來大家用javascript輸入多點程式碼的時候,我們就會經常使用console.log,

檢記錄某些變數,了解數值是多少,從而更容易去Debug的。

以上,便是Debug的基本概念了。

總結

學習javascript並不容易!

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

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

大家好好去學習,加油!

你可能也會喜歡...

in 全部, 創業

無限公司註冊教學-4個步驟,你也可以自己開公司

香港的公司類型主要分為,有限與無限公司。那麼到底哪一種較適合自己?開設公司有甚麼步驟呢?閱讀「無限公司註冊教學 - 4個步驟,你也可以自己開公司」,你將學會:申請商業登記、開啟公司銀行、報稅戶口、領取牌照。

加入我們的Email List

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