JavaScript 教學筆記 (1) - 基本語法概念

一般我們在撰寫 JavaScript 的時候會有兩種的方式，一是直接寫在 HTML 檔案內使用 script 標籤包起來，另一種則是另外寫在 js 檔案中然後在 HTML 按中引用 js 檔案。第一種寫法 <script type="text/ja...

一般我們在撰寫 JavaScript 的時候會有兩種的方式，一是直接寫在 HTML 檔案內使用 script 標籤包起來，另一種則是另外寫在 js 檔案中然後在 HTML 按中引用 js 檔案。

第一種寫法

    <script type="text/javascript">
        JavaScript 程式碼內容
    </script>

第二種寫法

<script type="text/javascript" src="js檔案的相對路徑或絕對路徑"></script>

以上兩種的寫法都可以正確的載入 JavaScript 並執行，只是使用的時機不相同而已，第一種的使用時機是在撰寫簡短的程式碼並沒有太多的邏輯運算，且該段程式碼並不會被其他頁面所使用到，第二種寫法則是適合較為複雜的程式碼，並且於其他頁面同樣會使用到的程式碼，這樣可以減少程式碼重複撰寫的問題。
※備註：script 標籤中的 type 屬性是早期有其他語言的 script 也同時經常使用因此需要指定 type，而目前瀏覽器都以將期預設使用 text/javascript ，且 HTML 5 中 script 的 type 屬性也是預設為 text/javascript ，因此現在都可以直接使用 script 標籤即可不需要再添加 type 屬性

註解

在 JavaScript 中的註解有兩種

第一種：單行註解使用 // 雙斜線表是單行註解

    <script>
        //單行註解
    </script>

第二種：多行註解使用 /* 以及 */ 包住文字來進行文字較多的多行註解

    <script>
        /*
        多行註解
        */
    </script>

請計得好的程式設計師一定要養成寫註解的習慣，寫註解不僅可以幫助之後追蹤程式碼時可以快速方便的知道該段程式碼的用途，也方便之後接手的維護人員能夠快速的了解該段程式碼的功能。

程式碼大小寫視為不同單字

在程式碼中定義的變數大小寫視為不同變數，而引用內建函數也同樣要注意大小寫的問題，若大小寫符合將會造成程式碼錯誤的問題。

舉例：

    <script>
        var a =10;
        var A =20;
        
        document.write("變數 a：",a,"<br>");
        document.write("變數 A：",A,"<br>");
    </script>

執行結果：

變數 a：10
變數 A：20

分段

JavaScript 中是使用 ; 來作為該行敘述的結束，因此在敘述結束時記得一定要加上 ; 否則將有可能造成程式的錯誤。

舉例：正確使用分號

    <script>
        var a =10;        
        var func = function abc(){
            a = 20;
        }; //正確用分號結束 function 的敘述
        (function cde(){           
        }); 
        
        func();
        document.write("變數 a：",a,"<br>");
    </script>

執行結果：

變數 a：20

舉例：未正確使用分號

    <script>
        var a =10;        
        var func = function abc(){
            a = 20;
        } //省略用分號結束 function 的敘述
        (function cde(){           
        });
        
        func();
        document.write("變數 a：",a,"<br>");
    </script>

執行結果：不會顯示任何東西

這兩種寫法只有第一種正確使用分號的寫法可以被正確執行，而第二種寫法瀏覽器則會出現 JavaScript 執行錯誤訊息 func is not a function ，並標示錯誤地方是在 func() 呼叫函示這行。因此當敘述結束時請記得加上分號。

JavaScript 基本語法的概念就是如此的簡易