iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

追憶JS年華系列 第 6

Day-06 始於足下:基本語法、陳述句與宣告

至此,常見的JavaScript資料型別已具列完畢,行將踏出實作的步伐。在此之前,再就三個部份進行一些補充。

基本語法

從若干前文前例中,已能領略JavaScript基本語法的撰寫、存取及通常邏輯。但這些範例都是以獨立js檔為存在前提的。若要在網頁中實際使用它,既可以「寫在網頁中」,也可以「寫成js檔再import入網頁中」。本例示範第一種作法。

想在HTML網頁中撰寫有效的JavaScript功能,只須將JavaScript程式碼放在以一組標籤包住的區域中即可。比方說,若想在網頁開啟時就跳出「Hello World」訊息的話,只需要:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        window.alert('Hello World');
    </script>
    <noscript>OOPS! 你的瀏覽器不認得JS,該升級囉。</noscript>
</body>
</html>

若成功,以瀏覽器打開網頁就會顯示:
https://ithelp.ithome.com.tw/upload/images/20210921/201410413de5gSKsmZ.jpg

其中的noscript會在瀏覽器不支援JavaScript時顯示。

為顧及維護方便與載入效率,建議將的JavaScript元素放在以下兩種地方:

一、body標籤中的/body閉標籤前
由於瀏覽器習慣將網頁讀完後才渲染,因此可以將JavaScript元素放在網頁尾端,讓網頁最後讀取,再開始執行動作腳本(script)。

二、head標籤中
然而,若body標籤中內容要呼叫JavaScript中的函數時,就必須將JavaScript元素先放在head標籤中才能有效。

陳述句

JavaScript程式通常由一個以上的陳述句(statement)所組成,如前例的 window.alert('Hello World'); 就是一條陳述句。撰寫時,通常遵循以下規則。

一、句尾分號

習慣上,每一行陳述句句尾應加分號(;),代表一句陳述句的結束。雖然不加也不會出錯,但可能會造成段落部明確問題。端看個人、各單位習慣而定。

二、語句中可分行、包空白

承前例,只要不破壞單字、方法或運算子本身,換行、縮排是允許的。如以下寫法依舊有效:

window.
    alert
        ('Hello World');

惟有關作為,仍請以程式易讀性、有意義唯依歸。此例就是一個不好的範例。

三、大小寫有別

在陳述句的世界裡,大小寫被視為不同。如下例將「alert」誤為「Alert」即為錯誤:

window.Alert('Hello World');

四、多行可濃縮為一

多條以上陳述句接成一行,是可行的。但對於程式碼追蹤、程式可讀性可能是反效果,應酌情使用。如下例所示

window.alert('Hello World'); window.alert('迎向世界'); 

宣告

一、基本作法

如前文所述,原則上使用變數就必須先宣告變數(即使不宣告,直接給變數賦值也有效,但強烈不建議)。以var宣告為例,基本的宣告命令結構為:var 變數名 [=初始值], …

若要宣各多個變數,可以寫為:

var x;
var y; 

或是以一個var宣告之:

var x, y;

宣告變數加上等號(=),就是指定一個初始值(= 的後面)給變數(= 的前面)。如:

var hello = ‘歡迎來到新世紀’;
var x = 21;

若無賦值,則變數的預設值就是undefined。

二、不同的宣告法

自2015年的ES6規格開始,增加了新宣告命令「let」。其用法與var基本相同,變數賦值也能重新指定,差別在於:

  1. let不允許同名變數重複宣告
  2. let宣告有效範圍限於各區塊(block)內,而可避免如var宣告影響其他block(被宣告為全域變數)
  3. 承上,所以常常用在函式(function)中的區塊、迴圈或數學演算的括號中。

基於let宣告規則更明確、更易於控制與細部操作,通常在JavaScript變數時會優先使用let宣告。

此外,若須宣告更嚴謹、不會變動的變數值(比如圓周率、微中子質量…etc),即可使用const宣告。經其宣告,變數即完成初始化,賦值無法被重新指定,永遠固定。如:

const PI = 3.14159

綜上,如今的JavaScript宣告多以嚴謹的let(宣告變數)、const(宣告常數)為主,除非標的明確,否則使用var宣告則易有更多覆蓋/被覆蓋的風險孳生。


上一篇
Day-05 JavaScript陣列
下一篇
Day 07 借箸代籌(1):運算式、運算子
系列文
追憶JS年華30

尚未有邦友留言

立即登入留言