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

第1章Javascript 基本概念. 當大家學習了HTML及CSS的語言後，現在終於來到Frontend最後一個要學習的語言，就是Javascript ... Javascript教學課程(入門篇)12個章節-由淺入深學習Javascript 直至2021年的今天，Javascript其實已經是無所不能。

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

在這篇「Javascript教學課程(入門篇)」，我分開了12個章節，讓你由淺入深學習Javascript，包括： Javascript基本概念 變數(Variable) 函數(Function) Logic:If...else Logic:while Logic:Forloop Array Object CallbackFunction Redirection 處理String Debug 準備好了嗎？我們開始吧！ 目錄 第1章 Javascript基本概念 第2章 變數(Variable) 第3章 函數(Function) 第4章 Logic:If...else 第5章 Logic:while 第6章 Logic:Forloop 第7章 Array 第8章 Object 第9章 CallbackFunction 第10章 Redirection 第11章 處理String 第12章 Debug 第1章Javascript基本概念 當大家學習了HTML及CSS的語言後，現在終於來到Frontend最後一個要學習的語言，就是Javascript。

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

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

如果大家想學習好Javascript，練習好基本功，是非常重要！ 今天，我會與大家由淺入深，一起學習Javascript的Programming。

準備好了？我們開始吧！ Javascript基本概念 第一課要了解的，就是什麼是Javascript，其實Javascript是一種很厲害的語言。

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

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

*如果你還不會HTML,請先學習:HTML教學課程(入門篇) 首先，我們一起在桌面開一個「javascript」的文件夾，然後打開visualstudiocode軟件。

在visualstudiocode按File，選擇Open。

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

在左手方位置，按右鍵開一個NewFile， 文件名稱可以輸入「index」，記得文件的名稱為index.html。

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

對於每一個第一次學習javascript的朋友們，第一句輸入的句子是： alert('HelloWorld!'); 儲蓄後，用Chrome打開它，來運行這句源碼。

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

記得每寫完一個javascript句子，都要加上一個「;」 如果你輸入了上圖般的3句alertbox， 你就發現，視窗會一句一句地運行顯示。

如果有時候，你只想運作第一及第二行，第三行不想運作的話， 我們只需要在不想運行的句子前面，加上「//」便可以了。

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

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

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

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

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

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

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

準備好了？我們開始吧！ 變數(Variable) 了解完Javascript基本概念後，正式進入寫編程第一個要學的概念便是-變數(Variable)。

我們先去看看這個有關Variable介紹的Youtube錄像，大概一分鐘左右： 看完錄像後，我們學到的第一個概念就是變數，變數意思就如小學代數般。

例如：X+1=5 那麼：X是什麼？X就是4 小學代數就代表一個數字，可是在編程的世界裡，變數可以代表著很多類別，這些類別，我們稱之為datatype。

以下是一些常用的datatype： Integer(數字) Float(有小數點的數字) String(文字) Boolean(TRUE/FALSE) Array(數組) Object(物件) 我會先從這3個簡單功能與大家分享，好讓大家簡單明瞭，包括：Integer(數字)、Float(有小數點的數字)及String(文字)。

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

要定義一個變數，你可以使用var，或直接為一個變數指派一個數值： 我們一起輸入：varx=1; 在javascript語法中，你是不需要定義這個變數是什麼datatype的， 例如，它是string還是integer， 你只需要直接給它輸入一個value就可以。

我們一起在var下層輸入：alert(x); 儲存後打開Chrome看看，是不是山現了「1」這個數字呢。

可能有朋友會問，為何不是出x？ 因為x是一個變數，而你現在是alert這個變數，所以就會顯示出1。

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

我們一起在var下層輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 上圖大家看到： 輸入x=1，y=x+3，所以alertx是出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（文字）的話，你則需要利用一個單引號'或雙引號"包著它，例如： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 從以上的例子可見，alert這個temp，我們做了一個變數為z， 上圖加了一個vartemp，用了z+‘內文’，這就是Combinestring，意思是將兩條字串串連起來。

如上圖的'IamJack'+'heisCOOL'，就會顯示出「IamJackandheisCOOL」。

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

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

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

所以它會顯示出： IamJackandheisCOOLandheisfine 所以大家現在知道字串的用法了吧，以上這些功能，便是string的用法了。

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

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

第3章函數(Function) 當我們在編程時，許多時都要重複去寫一些同樣的東西。

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

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

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

準備好了？我們開始吧！ 函數(Function) 函數(Function)是另一個非常重要的編程概念。

你可以先看看以下影片： 當我們在編程時，許多時都要重複去寫一些同樣的東西。

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

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

現在我們一起看看這個例子，例如我有一段code是這樣的： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 如果以上兩段code會經常用到的，我們便可以使用Function來包著： functionalertx(){} SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. {}是叫做scope的bracket，意思記是在{}裡面的內容，define這一個function。

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

所以，如果要用這個function，你就需要call這個function，所以你需要輸入： alertx(); 同樣地，如果輸入三次「alertx();」，就會運行三次這個function。

這裡可以注意的是，當你看到define一個function，alertx括號。

大家可以記住，只要一見到括號，就知道它就是function了。

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

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

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

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

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

在scope內定義的variable，叫localvariable。

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

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

所以必須要外面定義，比如上圖的： vary=1;這樣，才能alert到1出來。

Functions更可以接受parameter，例如輸入在： alertx(x) SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 這時候，我們每次call這個functions，都可以定義這個x是什麼。

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

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

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

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

然後內層增加一個新的變數： vartemp=x*y+z-1;內層alert(temp);然後alertx(2,3,5); SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 再用Chrome把網站打開，就會顯示出10這個數字了。

這個就是function的厲害之處了，當你輸入了一些program後，就可以造一些parameter出來， 只要每一個call這個function，輸入不同的parameter，計算出來的東西就會不同。

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

按以下例子，我們先輸入以下格式： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 再用Chrome把網站打開，就會顯示出這樣的效果： 我們如果不在這裡alert，又能怎樣改動呢？ 我們可以把alertdel，然後需要輸入一條string，比如是輸入： vartemp= 然後在下層輸入： returntemp; 可能你會問，這個return到底是什麼輸入法來的？ return輸入法，原來是我pass了內裡一些東西入去，它最尾會return回一個variable。

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

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

所以這裡我們要更改輸入： varx=calAge(2019,1990); 因為現在calAge，是會return一個東西， Return了temp這個東西，而temp就會被pass到x那裡。

接著輸入： alert(x); 再用Chrome把網站打開，就會顯示出上圖的結果了。

再來輸入一次，內容是這樣的： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 有時候，我們都可以在這個算式中再加入一些東西， 比如varx下層再輸入： x='***'+x; 結果就會得出： ***Iwasbornatyear1990.Iam29yearsold. 以上就是return的輸入方法了！ 要記得我們在使用這個function時，需要再設立一個新的變數(在以上例子就是temp)，去儲存這個functionreturn回來的數值。

第4章Logic:If...else 正常的Program，是會一句一句的跟著去運行。

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

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

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

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

準備好了？我們開始吧！ Logic:If...else 來到下一個概念，就是condition，意思是正常的Program，會一句一句的跟著去運行。

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

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

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

我們先看看這段影片： 我們最常用控制condition的方法，就是通過if...else來控制的。

我們一起輸入： if(){} 然後增加一個變數： varx=1;If括號中輸入，x>1然後alert('xisbiggerthan1') SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 接著下層輸入： else{alert('xissmallerthan1')} SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 我們一起細看，整個內容到底是代表著什麼呢？ 意思是： x等於1，如果x大於1，就會行x是大於1的那段code。

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

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

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

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

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

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

以下是6種常用的CompareExpression： ==等於 !=不等於 >大過 =大過或等於 <=細過或等於 我們也可以建立更複雜的condition，例如輸入： vary=0;if(x==1&&y==0){alert('condition1')}else{alert('elsecondition')} SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. &&代表and。

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

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

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

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

||代表or。

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

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

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

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

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

我們一起輸入： Varx=9;elseif(x>8){alert('condition2')} SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 你會發現，if增加了一個新的condition是elseif， 只要條件對if不成立，便會運行接下來的elseif， 所有的elseif不成立，便會運行接下來的else。

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

現在我再輸入多一個elseif，今次條件是x>5， 而varx=6，得出的結論就是「condition3」。

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

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

第5章Logic:while 接下來，我們會學習另外一個概念-Loop。

在javascript，常見的loop有兩種的：。

第一種叫做whileloop，第二種就叫forloop。

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

準備好了？我們開始吧！ Logic:while 接下來，我們會學習另外一個概念-Loop。

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

可以看看以下短片： 在javascript，常見的loop有兩種的，第一種叫做whileloop，第二種就叫forloop。

我們先一起看看whileloop。

首先輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 與if...else一樣，while()內的是condition。

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

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

第6章Logic:Forloop 有時候，一些Program需要的不是無限量地loop，比如是有限量的loop。

這時候，你就需要學習使用Forloop的功能。

準備好了？我們開始吧！ Logic:Forloop 如果有時候， 你的program需要的不是無限量地loop，比如是有限量的loop。

來看看以下短片： 我們一起輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 在以上的例子，這個loop會運行9次。

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

i=0，是variablei的初始狀態。

i<10，運行不會大於10。

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

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

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

運行多一遍後，i的數值再加1，變成2。

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

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

學到這裡，大家大概都明白到forloop的功能了吧。

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

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

準備好了？我們開始吧！ Array 來到下一章，我們要學習-Array。

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

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

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

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

我們一起輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 在以上的例子，我們定義了一個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設定。

延伸閱讀： ArrayFunctions： https://www.w3schools.com/js/js_array_methods.asp ArraySorting： https://www.w3schools.com/js/js_array_sort.asp 比如，我想為array新增一個數值，原來可以使用push()來新增： people.push('jan'); 這時候，你會發現alert[3]就可以成功顯示新的值。

另外一個比較常用的用法，是array會配合for去使用： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 我們一起看看forloop中的意義是什麼： i=0：由於i等於0，代表people[]就是jack。

i<3：i變了1，就是people[1]，所以是peter。

I++：接著i等於2，所以是jenny。

其實這裡也有一個較好的輸入法，就是有時候你不會知道這個array的大小是甚麼， 所以我們在這裡可以直接用： people.length SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 這個輸入法，會把array裡的所有東西都loop出來了。

.length會返回array的長度。

與forloop配合一流！ 這是一個array的常用輸入法來的，大家記得努力練習吧。

第8章Object Object是我們要學習最後的一個datatype， 功能上Object比Array更為強大， 因為它可以儲存一大組不同datatype的數據，甚至是functions。

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

準備好了？我們開始吧！ Object Object是我們要學習最後的一個datatype， 我們通常會用{}去表達。

Object比Array更強大， 因為它可以儲存一大組不同datatype的數據，甚至是functions。

我們來看看Object的寫法： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 在上面的例子，我們建立了一個名為person的object。

裡面有多個variable，包括： name、age、job等等，每個variable會有自己的數值。

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

例如： person.name 輸入後，就會得出jack這個結果。

溫馨提示： object裡面的variable，學名稱為property；object裡面的function，學名稱為method。

我們一起嘗試輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. Object內的Variable也可以是Array，如上面的例子般。

當然，我們可以使用forloop去輸出這個object入面Array的數值： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 這個object裡面，我們還可以增加一些function叫personalStatement： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 輸入後，你會發出這個結果： MynameisjackandmyjobisIT 這裡我會慢慢解釋，到底發生什麼事情。

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

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

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

也會declare一些function，就是method。

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

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

這些沒有名的function，我們稱它為anonymousfunction。

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

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

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

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

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

第9章CallbackFunction CallbackFunction是一個比較深層次的概念。

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

這個Function，我們稱之為CallbackFunction。

準備好了？我們開始吧！ CallbackFunction CallbackFunction是一個比較深層次的概念。

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

這個Function，我們稱之為CallbackFunction。

首先我們一起在ChromeGoogle：settimeout 原來javascript裡有一個function稱為setTimeout。

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

第一個parameter，會take一個function；第二個parameter，會take一個秒數(毫秒milliseconds)； 毫秒是什麼來的？我們一起輸入看看： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 在以上的例子，3000就代表3秒(javascript的時間是以毫秒計算的)。

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

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

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

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

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

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

第10章Redirection 很多朋友都會問，Javascript有沒有redirect頁面的功能？ 其實，Javascript也可以redirect頁面的。

如果在你的程式設計上，非常需要用到這類功能， 這時候，你就需要學習使用redirect了。

準備好了？我們開始吧！ Redirection Javascript其實也可以redirect頁面。

我們會使用window.location來輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 比如輸入google頁面連結，你就能成功redirect到google頁面了。

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

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

第11章處理String 接著，我們將會學習更多String的其他功能。

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

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

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

準備好了？我們開始吧！ 處理String 接著，我們將會學習更多String的其他功能。

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

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

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

substring 第一個是substring，我們一起輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. substring()可以讓你，把String的一部分抽出來。

比如說"somethingtext".substring(1,4)， 會把第1個字元(s)以及第4個字元(t)，中間的String抽出來，變成「ome」。

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

所以抽出第一個character和第二四個character前面的東西， 結果就會是ome。

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

indexof 下一個常用的，就是indexof。

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

我們一起輸入： SeethePen byChanYingYeung(@chan-ying-yeung) onCodePen. 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/查看變數的值。

因為有些datatype，例如array和object， 並不可以在alert中好好顯示出來。

因此,我們會使用consolelog。

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

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

我們只需要空白頁按右鍵，按「檢查」， 然後按console，你會發現多了「123」， 這一個就是console.log了。

將來大家用javascript輸入多點程式碼的時候，我們就會經常使用console.log， 檢記錄某些變數，了解數值是多少，從而更容易去Debug的。

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

總結 學習javascript並不容易！ 以上的12個課程，只是javascript的基礎編程概念。

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

大家好好去學習，加油！ 你可能也會喜歡... in全部,網頁設計教學 Mar17,2022 CommandLine(CMD)指令教學-5個必懂的常用指令入門 這篇「CommandLine(CMD)指令教學-5個必懂的常用指令入門」，將與你分享5個常用的command，包括：ping、ls/dir、cd、(sudo)mkdir和nano。

in全部,網頁設計教學 Aug18,2021 公司網址Email申請教學-GoogleWorkspace申請Email 這篇「公司網址Email申請教學」，將詳細教你如何利用GoogleWorkspace申請公司Email，並避免郵件落入客戶的SpamBox裡。

加入我們的EmailList 免費參加【網頁開發入門CRASHCOURSE】線上課程！ 提交