Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
張互賓 Carlos Chang
接案自由工作者 Freelancer
成立 卡斯有限公司,承接網站建置、主機代管服務。
維護 存股管家 Chatbot 。
於台北、中壢教學網站設計開發相關領域課程。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案
2018 年 ~ 至今:網站相關教學
2019 年:維護存股管家 Chatbot
張互賓/Carlos
個人 email: chang.abin@gmail.com
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
同學有空可網路搜尋「瀏覽器大戰」、「JavaScript 歷史」,當故事看,大概瞭解其相關複雜背景。
ES 是 ECMAScript 程式語言的簡稱,ECMAScript 是 JavaScript 的官方正式名稱。
ES5:即 ECMAScript 5,JavaScript 在這個版本(ES5)開始,廣泛地被各家瀏覽器所支援。
ES6:即下一代版本的 JavaScript,也被稱做是 ECMAScript 2015。這個 2015 就是西元 2015 年,從此時開始,每年都會有新的語法、功能,以年度做區分。故有 ES7、ES8…依此類推。
TypeScript 是由微軟出的全新程式語言。除了支援 ES 各版本之外,有更多的語法、功能。
在 javascript/practice
資料夾底下,建立 strict.html
檔案,以便練習及觀察:
ES5 為該語言引進一種「嚴格模式(strict mode)」,它會以更嚴格的方式來規範某些行為,此外,使用 strict 模式通常也能讓你的程式碼更容易被瀏覽器引擎最佳化。所以應該在你所有的程式中使用它。
在 第一行 加上 "use strict";
。
建議變數一定要透過關鍵字來宣告。建立以下兩個檔案來測試:
在 practice
資料夾下,建立以下檔案( strict.html
):
執行以上程式,發現 console 中,不會出現任何錯誤,但其實這是不好的,因為上述程式的變數 a,並沒有用關鍵字 var 或 let 或 const 來宣告。
再來 js 的部份,改成以下(只新增第一行):
再執行看看,然後在 console 中,就會出現以下錯誤,明確地告訴我們 a is not defined
:
修正:
再執行看看,就不會有錯誤訊息了。
故 strict 模式會讓你的程式碼變得更安全,也會讓你的程式碼更容易最佳化。建議開始使用。
然而 script 標籤儘量寫在 </body>
之前,當然也可以寫在 <head>...</head>
區段裡面。但我們希望先讓使用者看到內容,然後再執行 JS 程式碼。
範例:
例 1:onclick
指的是滑鼠左鍵點擊一下:
例 2:ondblclick
指的是滑鼠左鍵快速點擊二下:
在 javascript/practice
資料夾下建立 js
資料夾,然後在 js 資料夾中,建立 index.js
檔案,然後將 1.4 第一個 JavaScript
所寫的 js 部份,全部移到 index.js 中。(註:不要連 script 標籤也移進去。)
在 practice/index.html
檔,如果要載入 practice/js/index.js
檔案的話,使用以下語法:
最後 index.html
會變成如下:
使用開發者工具的 Network 頁籤觀察看看。
JavaScript 註解有二種:
單行註解:以 //
雙斜線開頭,該行雙斜線後面的文字都會被視為註解。
多行註解:以 /*
開頭,以 */
結束,在這 2 個符號之間的文字,都會被視為註解。
註解的用意:給「人」看的,瀏覽器遇到註解符號,會直接跳過,並不會顯示於網頁上,但會顯示於「頁面原始碼」中。
在 javascript/practice
資料夾下,建立 array.html
來練習。
陣列(Array)主要用來在一個變數中,儲存多個資料。
請在 console 中查看以下的輸出結果:
上面有兩種寫法, 都是可以的,第一種較常用,請常使用第一種的寫法。
如果要建立空的陣列:
在 console 中觀察,如下圖:
上圖的 length 就是該陣列的個數,我們可以透過 my_arr.length 來取得:
陣列索引:從 0 開始,代表陣列裡的第 1 項。再來是 1,代表陣列裡的第 2 項。
陣列索引對應的值,參考下例:
如果透過 length 來取得陣列裡的最後一項是什麼,該怎麼寫?
透過指定某個索引值,然後指定值:
新增資料到陣列的最後一項。例:
其它參考寫法(不建議,但可以瞭解一下):
如果寫以下這樣,發生什麼事,請觀察看看(應該要避免這種情況的發生):
移除陣列的最後一項。例:
如果是空的陣列,執行 pop() 呢?
新增資料到陣列索引值為 0 的那項,其它往後移。例:
移除陣列裡索引值為 0 的那項,其它往前移。例:
此函式參數說明:
第一個參數:新增資料到陣列的哪個索引值。
第二個參數:有幾個元素要被移除。
後面的參數:表示要新增的資料。
新增資料(元素),到陣列的某處。例:
移除資料(元素):
不好的做法(因為會遺留 undefined):
將陣列裡的各個資料,全部合併,變成一個字串,以半形逗號分隔。要注意的是,原陣列並不會有任何影響,而是回傳結果。例:
與上例的 toString 方法相同,差別在於透過 join() 方法,我們可以指定其它符號來當做分隔。例:
以下的這行 my_arr.slice(1);
,表示從索引值 1 開始,然後一直到陣列的最後一個,全部取出來,回傳新陣列。例:
以下的這行 my_arr.slice(1, 3);
,指的意思是從索引值 1 開始,一直取到索引值 3(但不包含),回傳新陣列。例:
若想完全複製一個新的陣列,slice() 函式可不帶任何參數:
陣列合併。會回傳新陣列,不會影響到原來的陣列。例:
合併多個陣列(只要在 concat()
函式後面繼續往後加即可):
在陣列當中,找某個項目的索引值。如果找不到,就回傳數值 -1
。例:
用來判斷陣列裡是否有某個項目,如果有,就回傳 true,反之,就回傳 false。
例:
藉由這個例子,執行以下程式觀察看看:
將以下的陣列裡的數值,算出平均數,並四捨五入到小數點第二位:
參考作法:
累積自己的函式庫 my_funcs.js
。
提供以下原始碼:
撰寫 JS 語法,執行迴圈,將重覆的 line_id 移除。
line_ids_unique
的印出結果如下:
參考作法:
累積自己的函式庫 my_funcs.js
。
在 javascript/practice
資料夾下,建立 string.html
來練習。
字串:只要是被雙引號或單引號括起來的,都是字串格式。例:"abc"
、"1"
、'中文'
。
除了宣告之外,也可以用 length 取得字串長度。
字串裡,還要用到雙引號或單引號,以下這是允許的。例:
但這個呢?
在 console 中會看到語法錯誤:Uncaught SyntaxError: Unexpected identifier
。
但如果真的希望那些符號能夠跳脫原來的功用形式,視為一般文字來看待,那我們就可以使用跳脫字元的符號( \
),來將後面緊接著的字元視為一般文字。
例 1:
例 2:將 \
視為一般文字:
回傳第一個遇到指定字串的位置,位置是從 0 開始,然後如果找不到,就回傳 -1
:
回傳最後一個遇到指定字串的位置,位置是從 0 開始,然後如果找不到,就回傳 -1
:
將一個字串,取得部份字串然後回傳,然後並不會影響原字串。另可帶的參數有以下兩個:
第 1 個參數:取的部份字串,位置從何處開始。
第 2 個參數:取得部份字串,取到何處結束。(但不包含最後一個)
也可以只帶第 1 個參數就好,那就會直接取到最後:
可以帶負值,規則是從字串的最後面從 -1 開始算:
與 slice()
相同,差別在於 substring()
不能帶負值。例:
同樣地,只帶第一個參數:
與 slice()
相同,差別在於 substr()
的第 2 個參數,指的是要取幾個字元,例:
只帶第 1 個參數,同樣就是直接取到最後一個字元:
可帶入負值,從最後一個是 -1
開始數:
在某個字串中,找到「部份字串」,然後用「另一個字串」來「取代」。 不會影響原來的字串,而是會回傳新的字串。 只會取代第一個找到的,而且大小寫是視為不同的。例:
如果是以下(將第1個參數的 "Banana" 改成 "banana"),不會有任何取代發生,因為找不到 "banana":
如何忽略大小寫:
改成用一種正式表達式的寫法,將 "banana"
改成 /banana/i
,i 是 ignore (忽略)的意思。例:
如何指定全部都要取代:
一樣用正式表達式的寫法,將 "banana"
改成 /banana/g
,g 是 global (全域)的意思。例(以下同時使用 i
和 g
):
小寫英文字變成大寫,不會影響到原字串,會回傳新字串。例:
大寫英文字變成小寫,不會影響到原字串,會回傳新字串。例:
將多個字串做串接。同樣地,原字串並不會被影響,而是回傳新字串。
concat()
其實可以用 +
號會更方便。例:
如果字串的左右兩側有空格的話,就移除。例:
回傳指定位置的文字,位置是從 0 開始。也不會影響原字串。例:
後面我們會再認識到什麼是陣列。例:
在 javascript/practice
資料夾底下,建立 operator.html
檔案,以便練習及觀察:
+=
與 -=
*=
與 /=
%=
與 **=
加:+
減:-
乘:*
除:/
範例 1:
範例 2:
範例 1:
範例 2:
請瞭解以下「相加」的結果:
==
與 ===
這兩個最主要的差別,在於 ===
會多比較型態的部份。
!=
與 !==
這兩個最主要的差別,在於 !==
會多比較型態的部份。
>
與 >=
<
與 <=
語法:
條件式 ? true : false
例:
&&
與 &
這兩個符號都是「且(and)」的意思。
註一(使用 &&
):第二個判斷(a > c
)的部份,並不會執行,因為 b > a
已經是 false,所以第二個判斷是真是假已經不重要。最後的結果一定是 false。
註二(使用 &
):第二個判斷(a > c
)的部份,會照常執行。
結論:都直接使用 && 即可,因為效能較佳。
||
與 |
這兩個符號都是「或(or)」的意思。
註一(使用 ||
):第二個判斷(a > c
)的部份,並不會執行,因為 a > b
已經是 true,所以第二個判斷是真是假已經不重要。最後的結果一定是 true。
註二(使用 |
):第二個判斷(a > c
)的部份,會照常執行。
結論:都直接使用 || 即可,因為效能較佳。
!
布靈值反轉若遇到 !
,則 true 變成 false。
若遇到 !
,則 false 變成 true。
且 | 判斷一:true | 判斷一:false |
判斷二:true | 結果:true | 結果:false |
判斷二:false | 結果:false | 結果:false |
或 | 判斷一:true | 判斷一:false |
判斷二:true | 結果:true | 結果:true |
判斷二:false | 結果:true | 結果:false |
在 javascript/practice
資料夾下,建立 object.html
來練習。
一台車子,有「價錢」、「車門數」、「品牌」、「顏色」; 有功能性的包含「開車」、「剎車」、「停車」。
車子可視為物件,然後包含一些基本資訊及功能。用程式碼來表達的話,如下範例,大括號就是物件的意思,物件裡的資訊,有屬性(property)及屬性值(value),一般我們會稱做 key/value 鍵值對,例:
物件內函式的另一個語法,以上述的 stop() 函式為例:
以上述車子為例,當然我們也可以先設定一個變數是空的物件:
其它屬性的部份,就是後面的程式碼來加上去。參考以下的物件相關操作。
或 使用中括號的寫法:
欲表達書本資料,而資料有「書名」、「價格」、「作者」,寫一個物件,包含這三個資料,然後在 console 中印出來。
在 javascript/practice
資料夾下,建立 condition.html
檔案,以便練習。
如果大括號裡的程式只有一行,那大括號可以省略:
或
養成習慣,都還是有大括號。 只是網路上會看到很多省略大括號的,那也要能看得懂,就表示 if 大括號裡就只有一行程式。
如果 score 大於等於 60 的話,執行大括號裡的程式:
如果 score 大於等於 60 的話,執行大括號裡的程式;反之,則執行 else 大括號裡的程式:
如果 score 大於等於 80 的話,執行大括號裡的程式;如果 score 小於 80、大於等於 60,就執行 else if 對應的大括號裡的程式:
以下這個程式,會執行哪一個 alert?
擇一執行,只要先遇到 true,就執行對應大括號裡的程式,其它就不會再執行。
可以使用多個 else if:
且(&&
):
或(||
):
布靈反轉(!
):
執行以下程式:
將第一行 var my_number = 1;
改成 var my_number = "1";
,再執行看看。
再執行以下程式:
將第一行 var my_string = "def";
改成 var my_string = "other";
,再執行看看。
結論:
case
:依指 switch 裡的變數,給定不同的情況所要執行的程式。
break
:用來跳出 switch。
default:case
的情況都不符合的時候,就執行 default 裡的程式。
執行以下程式:
case 1
的部份,少了 break;
,那就表示不會跳出 switch 條件式。所以 case 1
執行完程式之後,繼續執行 case 2
裡的程式,然後 case 2
執行完遇到 break;
,就跳出 switch 條件式。
可再改寫成以下,執行看看:
意思是 my_number
的值如果是 1 或 2,都執行相同的程式。
執行以下程式:
此例會執行 default 裡的程式,因為沒有任何 case 情況符合。
如果將 default 區域的程式都移除,如下:
此例,因為沒有任何 case 情況符合,也沒有 default 相關的程式,所以就直接結束 switch 條件式了。另外,此例的最後一個 break;
也可以省略不寫了。
直接寫在 condition.html
檔案即可。
一個店家,有兩個資訊:店家名稱(store_name)、店家星等(store_star),宣告如下:
關於星等,如果:
星等是 -1(含) 以下,就在 console 中顯示「A 店家星等是負的」。
是 0 顆星,就在 console 中顯示「A 店家無獲得星等」。
是 1 顆星,就在 console 中顯示「A 店家星等 1 顆星」。
是 2 顆星,就在 console 中顯示「A 店家星等 2 顆星」。
超過 2 顆星,就在 console 中顯示「A 店家星等超過 2 顆星」。
請使用 if 條件式或 switch 條件式相關語法,印出相關文字。
參考作法:
在 javascript/practice
資料夾下,建立 function.html
來練習。
第 1 行:以 function 開頭,再空一格,輸入自訂的函式名稱,緊接著小括號、大括號。
第 2 行:該函式的被呼叫時,所要執行的程式,包在大括號裡。
第 3 行:函式的結束大括號。
第 4 行:函式的呼叫執行,函式名稱+小括號。
小括號裡,可以放參數。也就是函式在執行時,可以不帶參數(上例),或帶1個以上的參數,以逗號做區隔。
看以下例子,瞭解參數有預設值的寫法:
使用關鍵字 return 將結果回傳,同時也結束函式的執行:
函式沒有名稱,就是匿名函式,通常這種情況,可以將匿名函式存在某個變數中:
概念:某件事情執行完之後,執行另外一件事。
執行這段程式,試著解讀:
換個寫法,以下的 匿名函式 就是 Callback Function:
IIFE = Immediately Invoked Function Expression
是一個定義完馬上就執行的函式。
如果希望這個函式宣告完之後,馬上執行,且也只希望執行一次,也就是 IIFE,按照以下兩個步驟:
用小括號包起來,表示避免函式的宣告。
緊接著再加上小括號,表示要執行該函式。
接續上例,也可以將函式的名稱移除,變成如下:
在函式的內部呼叫自己本身。例:
請做以下的練習一瞭解遞迴。
寫一個函式叫 count 函式,執行它的時候,帶一個秒數參數(假設是 10),在 console 中顯示如下畫面:
提示,先介紹 setTimeout 寫法:
從這裡開始寫:
參考作法:
寫一個函式叫 strpad(),帶兩個參數。
第一個參數:任何正整數。
第二個參數:指定位數,若不足的話,左邊補 0。
部份原始碼如下:
參考作法:
累積自己的函式庫 my_funcs.js
。
「費氏數列」:0、1、1、2、3、5、8、13、21、34……依此類推。
規則是:
第 0 項 是 0。
第 1 項是 1。
第 2 項開始,是前兩項的相加。
請寫一個 fibonacci() 函式,代入一個參數,代表第幾項(從 0 開始算),就可以得知該項的數值。然後也在 console 中顯示 fibonacci 函式被執行了幾次。
部份原始碼:
上述原始碼執行到第 6 行時,在 console 中,應輸出如下訊息:
執行 fibonacci(0) → 得到 「0;fibonacci 函式執行了 1 次。」 執行 fibonacci(1) → 得到 「1;fibonacci 函式執行了 1 次。」 執行 fibonacci(2) → 得到 「1,fibonacci 函式執行了 3 次。」 執行 fibonacci(3) → 得到 「2,fibonacci 函式執行了 5 次。」 執行 fibonacci(4) → 得到 「3,fibonacci 函式執行了 9 次。」 執行 fibonacci(5) → 得到 「5,fibonacci 函式執行了 15 次。」 執行 fibonacci(6) → 得到 「8,fibonacci 函式執行了 25 次。」 依此類推。
提示:
fibonacci(0)
及 fibonacci(1)
:
fibonacci(2)
:
fibonacci(3)
:
fibonacci(4)
:
參考作法:
累積自己的函式庫 my_funcs.js
。
在 javascript/practice
資料夾下,建立 call_by_type.html
來練習。
將資料傳進參數時,要留意類型的部份,有分傳遞「值」、「址」兩種:
傳值:傳遞變數的值。
傳址:傳遞變數在記憶體中的「位址」。物件和陣列屬這類型。
在傳遞參數時,會複製其值至參數之中。
第 8 行:將變數 a 的「值」傳給 add_number 函式,該函式用 x 來做承接。(下一節會提到變數的可視範圍)
物件、陣列皆為傳址呼叫的類型,即在傳遞參數時,傳的是該變數在記憶體中的位址。
示意:
以陣列為例:
概念示意圖:
以物件為例:
延續範例 2,如果我們希望傳進去的陣列、物件,不要影響原來的,做法:
將陣列或物件進行複製,然後再傳遞即可。
以陣列為例:
以物件為例:
先執行以下原始碼,以下第4行,也影響到了 arr1:
請改成 arr1 陣列不影響。(也就是要先進行複製)
參考作法:
先執行以下原始碼,以下第4行,發現也影響到了 obj1:
請改成 obj1 物件不影響。(也就是要先進行複製)
參考作法:
在 javascript/practice
資料夾下,建立 try_catch.html
來練習。
try:檢查某一段程式,是否有錯誤。
catch:如果有錯誤,就執行這裡的程式。
throw:可自訂錯誤。
finally:執行完 try 和 catch 的程式之後,最後執行 finally 的程式。
下例的第 2 行並不會執行,因為第 1 行跟本沒有 my_func
這個函式:
那改成以下呢?(請觀察 console 印出的訊息。)透過 try...catch 這樣包起來,如果 try 區塊裡的程式有錯,就會中斷 try 裡的程式,然後透過 catch 區塊補捉錯誤,就執行 catch 裡的程式:
先測試以下程式:
改成以下,透過 throw 可以自訂丟出的錯誤訊息,如果 y 等於 0,那就執行 catch 裡的程式(主要在 try 區塊裡,加上 if 的那段程式):
透過 finally ,可以在 try 和 catch 都執行完程式的時候,會接續執行 finally 區塊裡的程式:
在 return 之前,會先將 finally 裡的程式,先執行完。
在 javascript/practice
資料夾下,建立 scope.html
來練習。
變數主要分為全域變數、區域變數兩種。
而變數的可視範圍,指的是哪些程式可以存取該變數。所以當宣告了一個變數之後,要能夠區別該變數的 scope。主要分三種:
全域範疇(global):在任何地方皆可存取到。
函式範疇(function):可在函式內存取。
區塊範疇(block):可在區塊內存取,例: if 的大括號、for 迴圈的大括號、while 迴圈的大括號等。
要先宣告之後,才能使用,否則視為 undefined:
變數使用 var 宣告在函式外的,就是全域變數,然後瀏覽器內建有個全域物件 window,也可印出來觀察,例:
變數宣告在函式內的,就是區域變數,然後在函式內皆可取用(即函式範疇),例:
建議名稱不要相同,以免混洧,例:
儘量避免變數名稱一樣,以免混洧。
執行以下兩段程式並比較看看:
情況 1:
情況 2:
結論:
var 宣告的變數,其實是屬於函式範疇,所以上述情況 1,b 在 if 外的程式也可以取用得到。(這也跟拉升(Hoisting)關念有關。)
let 宣告的變數,是屬於區塊範疇,也就是情況 2 用大括號包住的那個區域,即 b 變數只存在於大括號中。
再執行以下程式看看:
經由以下的例子,可以得知常數(const) ABC 跟 let 一樣是屬區塊範疇:
下例的 i 是全域變數:
下例的 i 是區域變數,只存在於 for 迴圈中:
註:若是函式就例外,例如下例還是可以正常執行(因為 ):
在 javascript/practice
資料夾下,建立 math.html
來練習。
JavaScript 提供了一個 Math
物件,讓我們可以針對數學的領域中,進行一些基本的操作,如下:
將數值轉成正數,例:
四捨五入的近似值,例:
指數,某數的幾次方:
開根號:
無條件進位到較大整數:
無條件進位到較小整數:
在所有的數值參數當中,找出最小值:
在所有的數值參數當中,找出最大值:
在數值 0 ~ 1 之間,隨機產生小數點。(有包含 0,但不包含 1)。
以下程式同學執行看看:
在 console 中,隨機印出 0 ~ 9 的整數。
在 console 中,隨機印出 0 ~ 10 的整數。
在 console 中,隨機印出 1 ~ 10 的整數。
在 console 中,隨機印出 1 ~ 100 的整數。
參考作法:
無論是同個系統或是多個系統之間,互相傳遞資料時,最常用的兩種格式,即 XML 與 JSON。都是純文字格式。
XML = eXtensible Markup Language。HTML 就是 XML 的其中一種。
JSON = JavaScript Object Notation。
有一個產品,品牌名稱為 the_brand
,型號為 t-123
,價格為 100000
。圖片路徑有 http://ex.com/a.png
、http://ex.com/b.png
。
分別用 XML及 JSON 格式來表達:
就像寫 HTML 一樣,只是現在可自行定義標籤名稱:
若想確認 XML 格式是否符合規範的話,可到 XML Viewer 網站測試。如圖:
物件及陣列兩種格式都屬於 JSON 格式:
若想確認 JSON 格式是否符合規範的話,可到 JSON Parser 或 這個網站測試。如圖:
寫一個 JSON 格式,敘述如下:
1、一個物件資料,有兩個 key,分別是 msg 與 data;
2、msg 的 value 部份,是一個字串,就叫「success」;
3、data 是一個陣列資料,裡面存著兩筆書本物件資料,該物件資料 key 的部份 有 book_name
與 book_price
;值的部份,可任意填入。
試著用 JSON Parser 工具驗證。
在 javascript/practice
資料夾下,建立 array_sort.html
檔案,以便練習。
預設上,sort() 排序的是字串。然後會影響原來的字串。
如果陣列裡是數值,會發現排序出來的結果跟我們想的不一樣:
Compare Function 的用途是用來取代 sort() 函式預設的字串排序方式,也就是我們可以自訂排序方式,每次比較兩個數值,然後必需回傳負數、0、正數。
常見寫法:
回傳如果是負數: 就先排 a 再排 b。
回傳如果是正數:就先排 b 再排 a。
回傳如果是 0:就不做任何更動。
解讀:
40、100 會被代入,a 是 40,b 是 100,兩者相減是負數,所以先排 40 再排 100。依此類推。
只要將回傳的結果加上負號即可:
解讀:
40、100 會被代入,a 是 40,b 是 100,兩者相減是負數,但因為加上了負號,所以回傳結果是正數,所以先排 100 再排 40。
陣列整個反轉:
請將以下的物件陣列,依照 year 來排序,由小到大:
參考作法:
在 javascript/practice
資料夾下,建立 date.html
來練習。
預設上會抓取瀏覽器上所設定的時區。建立當下的日期物件:
共有7個參數,分別是年、月、日、時、分、秒、毫秒。
留意「月」的部份,0 是一月份;到 11 是十二月份。
例 1:(指定到 7 個參數(
例 2:(只指定 2 ~ 6 個參數)
例 3:(指定 1 個參數,指的是毫秒)
Unix Timestamp:指的是從 1970 年 1 月 1 日開始,一直到現在的「秒數」。
T
:大寫的 T,用來做為日期與時間的區隔。
Z
:表示的是 UTC 時區。
如果想要表達相對於 UTC 時區,就將 Z
移除,改成 +HH:MM
或 -HH:MM
。
例 1:(留意輸出會是 +8
的時區)
例 2:(改成 +8
時區)
GMT 與 UTC 查詢參考:
一旦日期物件建立了,那就可以使用以下相關操作:
將日期物件的輸出轉成字串:
例:
1 天 = 24 小時 = 60 * 60 * 24 = 86400 秒 = 86400000 毫秒。
完成以下函式,然後在 console 中輸出的結果是差「幾」天:
參考作法:
累積自己的函式庫 my_funcs.js
。
在 javascript/practice
資料夾下,建立 array_iteration.html
檔案,以便練習。
以下各迭代範例,同學都需要實際執行過並且會解讀。
陣列的每個項目,都依序地跑過執行指定的程式:
value:陣列的值。
index:陣列索引,從 0 開始。
陣列裡的每個項目,都執行特定程式,要有回傳值(return),然後會產生新的陣列,原陣列並不會被影響。例:
如果不靠內建的 map() 函式,自己寫邏輯的話,例:
按照指定的過濾條件,回傳新的陣列,不會影響原來的陣列。例:
依序跑過每個陣列項目,如果陣列裡的每一項,都符合指定的條件,那就回傳 true;反之,只要有一個不符合,就回傳 false。例:
依序跑過每個陣列項目,如果陣列裡的每一項,只要有一項符合指定的條件,那就回傳 true;反之,如果都不符合,就回傳 false。例:
在陣列中找一個元素,找到第一個出現的位置:
在陣列中找一個元素,從後面開始找,找到第一個出現的位置:
回傳第一個找到符合條件的那項:
回傳第一個找到符合條件的那項的索引值:
方法 | 說明 |
getFullYear() | 取得四位數的西元年。 |
getMonth() | 0 ~ 11。取得月份。0 代表一月,11 代表十二月。 |
getDate() | 1 ~ 31。取得日期。 |
getHours() | 0 ~ 23。取得小時的部份。 |
getMinutes() | 0 ~ 59。取得分鐘。 |
getSeconds() | 0 ~ 59。取得秒數。 |
getMilliseconds() | 0 ~ 999。取得毫秒數。 |
getTime() | 取得 Unix Timestamp,回傳毫秒數。 |
getDay() | 0 ~ 6。取得星期幾。0 代表星期日,6 代表星期六。 |
Date.now() | 與 getTime() 同。 |
字元 | 比對規則 | 範例 |
^ | 字串起始 | /^This/ 與 "This is" 比對結果:true。 |
$ | 字串結尾 | /end$/ 與 "the end" 比對結果:true。 |
* | 出現零次或多次 | /se*/ 與 "seeee"、"se" 比對結果:true。 |
? | 出現零次或 1 次 | /ap?/ 與 "apple"、"and" 比對結果:true。 |
+ | 出現 1 次以上 | /ap+/ 與 "apple" 比對結果:true。與 "and" 比對結果:false。 |
{n} | 剛好出現 n 次 | /ap{2}/ 與 "apple" 比對結果:true。與 "and" 比對結果:false。 |
{n,} | 至少出現 n 次 | /ap{2,}/ 與 "apple"、"appple" 比對結果:true。與 "aple" 比對結果:false。 |
{n,m} | 最少出現 n 次,最多出現 m 次 | /ap{2,4}/ 與 "apple" 比對結果:true。與 "aple" 比對結果:false。 |
. | 任意字元(換行字元除外:\r(enter)、\n(換行)、\r\n(換行))。\t 為 tab | /a.e/ 與 "ape"、"axe"、"a\te" 比對結果:true。與 "a\ne" 比對結果:false。 |
[...] | 中括號裡的任意字元 | /a[px]e/ 與 "ape"、"axe" 比對結果為 true。與 "apxe" 比對結果:false。 |
[^...] | 除了中括號裡的任意字元 | /a[^px]/ 與 "ale" 比對結果:true。 |
\d | 數字 0 ~ 9 | /\d{3}/ 與 "abc 123" 比對結果:true。 |
\D | 任何非數字字元 | /\D{2,4}/ 與 "abc 123" 比對結果:true。 |
\w | 字母、數字、底線符號 | /\w/ 與 "javascript" 比對結果:true。與 "%" 比對結果:false。 |
\W | 非「字母、數字、底線符號」的其它字元 | /\W/ 與 "100%" 比對結果:true。 |
\n | 換行字元 |
\s | 一個空白字元 |
\S | 一個非空白字元 |
\t | 一個 tab 字元 |
請先在自己的電腦桌面或其它您自己習慣的位置,建立一個 javascript
資料夾,然後使用編輯器(老師是使用 Atom 編輯器)開啟該資料夾,如下圖:
然後在 javascript
資料夾裡,建立一個 practice
資料夾。
然後在 practice
資料夾裡,建立一個 index.html
檔案。
編輯 index.html,原始碼如下,可直接複製貼上,原始碼需整齊:
將 index.html 用瀏覽器開啟,並開啟開發者工具中的 console(Mac: cmd + option + i
或 Windows: F12
),畫面如下:
原始碼與畫面結果的部份,試著解讀看看。
可以直接在 console 中來測試觀察。
請直接在 console 中,輸入以下各範例來觀察變數的資料型態。
可以用 typeof 來檢測變數的資料類型,包含以下:
用雙引號或單引號括起來的,會被視為字串:
數值的部份,例如 1、1.5 等:
true 、 false 就是布靈值:
以 左右大括號 括起:
以 左右中括號 括起:
JavaScript 總會遇到一些奇怪的行為,像這裡是回傳 "object",而不是 "array",也是為人所詬病之處,但這樣的錯誤已經很多年,如果把它修正的話,會造成很多網站會出錯,所以就乾脆不修正。
特殊關鍵字:
特殊關鍵字:
同陣列,這也是為人所詬病之處。
以上算起來,利用 typeof 回傳的資料類型,總共六個:
"string"
"number"
"boolean"
"object"
"undefined"
"function"
在 javascript/practice
資料夾下,建立 variable.html
檔案,以便練習。
將變數想成是一個箱子,裡面一次只能裝一種東西(資料)。
可以將箱子裡的東西(資料)換成其它的。
東西(資料)可以是文字、數值等等不同的資料類型。
圖片出自於:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables
變數宣告:先使用 var
,以後會再學到 let
與 const
。
變數名稱:可自訂,名稱勿使用數字開頭。儘量用英文字當開頭。
=
:原文是 assign (指派)的意思,指的是將右邊的資料,指派給左邊的變數名稱,這樣的過程,就是賦值。所以並不是數學中的「等於」的意思。
變數資料:可儲存任何的資料給變數名稱,會有不同的資料類型,此處以雙引號括起,代表的是字串
的意思。
最後的分號,表示該行程式碼的結束。
可包含大小寫字母、數字、底線(_
)、錢字符號($
)。
起始必須是字母或底線或錢字符號。
字母大小寫是不同的。變數 x
和變數 X
是視為不同的變數。
不能使用到保留字。
這邊認識到第一個運算子(operator):等號(=
),在這裡是「指派(assignment)」運算子的意思。
這裡的等號並不是數學中 "比較" 的意思,如果是想要表達比較的意思,要用 ==
或 ===
。
方式一:宣告之後,直接賦值:
方式二:先宣告,之後再賦值:
方式三:(禁用),少寫了 var 關鍵字
所以很多人會說 JavaScript 不是一個很嚴謹的程式語言。
var 宣告的變數可視範圍(scope)是函式(Function)。
宣告方式與 var
相同。差別在於可視範圍(scope)。
let 宣告的變數可視範圍(scope)是區塊(Block)。
常數(Constant),一個變數若宣告成常數,就不能再被改變,而且在宣告的時候,就要直接賦予其值。例:
如果寫成以下這樣,會看到錯誤訊息:
錯誤訊息如下:
如果寫成這樣,會看到錯誤訊息:
錯誤訊息如下:
const 宣告的變數可視範圍(scope)是區塊(Block),與 let 相同。
測試看看以下例子將 var
改成 let
和 const 看看:
在 javascript/practice
資料夾下,建立 number.html
來練習。
要留意的是:數值不需要加雙引號或單引號,如果加上去的話,就會被視為字串。
e = exponential (指數):
數值與數值相加,產生結果是數值;
數值與字串相加,會產生字串。
隱含轉型:上述的 x + z
,其實真的執行的會是先將「數值 x 」轉成「字串 x」,這個過程就是 隱含轉型,是瀏覽器預設會幫我們執行的事。所以最後會變成字串與字串相加,就變成 "1020"。
NaN 是一個特殊的保留字,表示是「Not a Number」。
將字串數字轉成數值。例:
如果是浮點數(小數),就會直接捨去小數部份:
將字串數字轉成浮點數。如:
將數值轉成字串,例:
指定四捨五入到小數點的第幾位,然後會回傳字串。例:
但其實有問題:(其實是四捨六入五成雙)
示意圖:
判斷某數數是不是「Not a Number」,即 NaN:
在 javascript/practice
資料夾下,建立 loop.html
檔案,以便練習。
示意圖:
錯誤訊息如下圖:
因為 i 的可視範圍(scope)是區塊(Block),也就是用大括號包含來的區域,所以此例來說,i 只存在於 for 迴圈之中。
JS 因為在第 4 行的地方出錯,造成了後面的程式碼被中斷了。
遇到 break,直接結束整個 for 迴圈:
遇到 continue,結束當次的 for 迴圈,繼續執行下一次的迴圈。
瀏覽器是會當掉的……所以在寫任何的迴圈時,都要留意何時離開迴圈。
陣例格式:
字串格式:
物件格式:
示意圖:
此程式碼在進入 while 迴圈之後,變數 a 的值一直都是 0,則 a < 10 的判斷永遠都是 true,會造成無窮迴圈一直在跑 while 迴圈裡的程式,以致於瀏覽器當機。
示意圖:
與 while 迴圈主要差在哪裡? do 大括號裡的程式,至少一定會執行一次。
分別用 for 迴圈及 while 迴圈,撰寫九九乘法表。在 console 中,如下輸出(顯示部份):
參考作法:
for 迴圈寫法:
while 迴圈寫法: