Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
然而 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/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
資料夾下,建立 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
資料夾下,建立 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 迴圈寫法:
在 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 裡的程式,先執行完。