前一節課是體會一下JavaScript的各種用途，並寫出了HelloWorld程序。

這節課來講解JavaScript的各種語法規範和格式。

將onclick事件的JavaScript代碼移到head中

前一節課，點擊按鈕事件之後，可以編輯修改網頁的內容。用途雖好，但是將代碼都擁擠在HTML內容當中，並不是一種好的格式和規範。那麼該如何修改呢？

可以將JavaScript代碼從input的onclick事件轉移到head裏面去。

修改testjs.html如下：

刷新頁面，然後點擊Click按鈕：

可以看到結果與之前的效果是一樣的。

這裏面可以看到代碼修改了，在onclick事件裏面調用的是一個函數changeContent，而在head當中的<script>標籤當中遇險定義好了changeContent函數。這就是函數的用法。

JavaScript函數定義

函數的概念，如果大家之前學習過第1章，則並不陌生。

通過將一段代碼組織在一起並用函數定義起來，就可以很方便的被使用。

通常，都是將函數定義在head裏面，然後在網頁控件的事件發生時進行調用。

這樣的好處很明顯，可以將所有的JavaScript代碼組織在一起，更利於組織和調用。

JavaScript函數定義方法如下：

function 函數名(參數1,參數2…){

函數內執行代碼;

}

函數必須以function進行定義，類似於python的def。

參數可以為0個，1個或者多個，用括號括起來，用逗號分隔。

函數體用左右花括號進行限定，花括號內部時JavaScript執行代碼。

JavaScript代碼和網頁內容分離

和之前的CSS代碼一樣，除了可以直接寫在head的script標籤之內，JavaScript代碼用可以通過引用外部文件的方式來完成。

這樣的好處也是很明顯的，就是將網頁顯示內容和對網頁的操作代碼進行分離，更容易進行維護，也更有利於組織代碼，方便不同的網頁去引用相同的JavaScript代碼功能。

可以稱之為外部JavaScript文件，它的文件名一般都是以.js結尾。

如果需要使用外部JavaScript文件，可以通過script標籤的src屬性來引用。

唯一要注意的一點是外部JavaScript文件裏面不可以包含script標籤。

下面來修改代碼，改為調用外部JavaScript文件。

新創建一個文件，文件名為testjs.js。將函數changeContent整體內容移動到testjs.js文件中。並將文本修改顏色改為綠色。

testjs.js代碼內容如下：

修改testjs.html文件內容：

刷新頁面，點擊Click按鈕，可以看到外部JavaScript文件起作用了。

document.getElementById函數

可以看到函數changeContent裏面的2行代碼的：

document.getElementById(‘testid’).innerHTML=’學哥是西門吹雪’;

document.getElementById(‘testid’).style.color=’green’;

這裡重點的關鍵語句是document.getElementById，它的作用就是用戶訪問網頁的某個元素。

它是通過網頁元素的id屬性來進行定位和訪問的。

document是一個JavaScript內部對象實例，意思就是JavaScript代碼當前所在的這個網頁的對象的實例引用。

至於什麼是「對象」和「實例」的概念，如果有其他編程語言經驗的可能比較好理解，但是初學者可能不太理解。

大致解釋一下，「對象」就是一種抽象概念的集合，而「實例」就是對象抽象概念的具體化。

一個對象用於定義某一類概念的抽象意義，而實例就是滿足對象抽象概念的具體化引用。

用一個比喻來形容，「轎車」就是一個對象，它是定義某一類事物的概念，但它不能拿來直接使用。

而「一輛奔馳C180」就是「轎車」的一個實例，它是一個具體的事物，可以拿來直接使用，而且它滿足對對象的定義。

每個對象都具有一些方法可以操作，例如「轎車」可以啟動、停止、前進、後退或轉彎等方法。

那麼對象的實例就可以使用這些方法進行操作。

同樣的，「一輛桑塔納2000」同樣是「轎車」的一個實例，同樣可以使用這些方法進行操作。

可以看到，針對的某個事物的概念，對象只有一個，而實例可以有無數個。

更詳細的講解這裡就不深入了，大家掌握一個基本的了解就夠了。隨着今後更多的編程語言學習，會逐步掌握的。

document是Document對象的一個實例，它有一個方法是getElementById，返回值是網頁中的一個元素對象的實例。

通過對這個返回值的繼續操作，就可以改變網頁元素的內容或者樣式。

innerHTML就是指網頁元素的內容，而style就是網頁元素的style樣式屬性，而style.color就是網友元素的顏色樣式屬性。

通過賦值語句=就可以設置對應的元素內容和樣式。

JavaScript代碼執行規則

JavaScript代碼是向瀏覽器發出指示，告訴瀏覽器應該如何執行處理。

它是單步執行的，通常都在每句結尾用分號結束。

執行代碼可以是定義變量、賦值語句、判斷語句、循環語句或者調用其他函數的語句。

執行代碼是按照順序進行執行的，但是也可以通過分支語句和循環語句實現更多更複雜的邏輯。

例如上節課的下列語句：

if (document.getElementById(‘password’).value.length<6) {

alert(‘密碼長度不能少於6位！’);

} else {

alert(‘Check OK’);

}

可以看到，if語句和以前學習過的python語法格式不一樣。

if後面是一個用()左右括號包起來的一個邏輯判斷式，根據邏輯判斷式的結果是True還是False來執行不同的代碼。

這一點和python也是一樣的邏輯，只是代碼規範不同而已。

JavaScript代碼是大小寫敏感的

JavaScript代碼是大小寫敏感的，這一點和第2章的html代碼是不一樣的。

來試驗一下，將getElementById修改為全部小寫的getelementbyid看看：

修改testjs.js代碼：

刷新頁面，點擊Click按鈕，可以看到網頁內容和樣式沒有變化，說明代碼不起作用。

那麼這裡有點不好判斷了，是代碼出錯了，還是什麼其它原因呢。

其實可以通過之前使用過的瀏覽器調試工具來進行調試。

通過鼠標右鍵「檢查」菜單，打開瀏覽器調試工具。

在最下方的Console窗口裏面可以看到提示JavaScript代碼出錯了，而且很明白的知道是哪一行出錯了，出的什麼錯誤。

空格和折行

JavaScript會忽略多餘的空格，可以通過添加空格來讓代碼更有可讀性。

將剛才的小寫錯誤修改正確，並添加空格。

testjs.js代碼修改如下：

然後刷新頁面重新執行，可以看到網頁執行沒有錯誤了，空格不影響代碼。

同樣的，如果一行代碼中的文本字符串過長，也可以使用折行提高可讀性。

通過在文本字符串中使用反斜杠來對代碼進行折行。

testjs.js代碼修改如下：

刷新網頁，可以看到網頁正常執行：

但是，如果不是文本字符串，使用反斜杠，則會出錯：

testjs.js代碼修改如下：

刷新網頁，可以看到控制台顯示的錯誤。

JavaScript注釋

和CSS代碼一樣，可以對JavaScript代碼進行注釋，達到暫時不執行被注釋的代碼的目的，或者是對代碼進行說明的目的。

單行注釋以//開頭，多行注釋使用/*開頭，*/結尾。

給代碼添加2段注釋，將錯誤代碼注釋掉，添加正確的代碼。

testjs.js代碼修改如下：

刷新網頁重新執行，可以看到注釋內容不影響代碼實際執行，網頁正常執行了。