前一節(jié)課是體會(huì)一下JavaScript的各種用途，并寫出了HelloWorld程序。
這節(jié)課來講解JavaScript的各種語法規(guī)范和格式涎显。
將onclick事件的JavaScript代碼移到head中
前一節(jié)課，點(diǎn)擊按鈕事件之后蕊爵，可以編輯修改網(wǎng)頁的內(nèi)容著蛙。用途雖好删铃，但是將代碼都擁擠在HTML內(nèi)容當(dāng)中，并不是一種好的格式和規(guī)范踏堡。那么該如何修改呢猎唁？
可以將JavaScript代碼從input的onclick事件轉(zhuǎn)移到head里面去。
修改testjs.html如下：
刷新頁面顷蟆，然后點(diǎn)擊Click按鈕：
可以看到結(jié)果與之前的效果是一樣的诫隅。
這里面可以看到代碼修改了，在onclick事件里面調(diào)用的是一個(gè)函數(shù)changeContent帐偎，而在head當(dāng)中的<script>標(biāo)簽當(dāng)中遇險(xiǎn)定義好了changeContent函數(shù)逐纬。這就是函數(shù)的用法。
JavaScript函數(shù)定義
函數(shù)的概念削樊，如果大家之前學(xué)習(xí)過第1章豁生，則并不陌生。
通過將一段代碼組織在一起并用函數(shù)定義起來漫贞，就可以很方便的被使用甸箱。
通常，都是將函數(shù)定義在head里面迅脐，然后在網(wǎng)頁控件的事件發(fā)生時(shí)進(jìn)行調(diào)用芍殖。
這樣的好處很明顯，可以將所有的JavaScript代碼組織在一起谴蔑，更利于組織和調(diào)用豌骏。
JavaScript函數(shù)定義方法如下：
function 函數(shù)名(參數(shù)1,參數(shù)2...){
函數(shù)內(nèi)執(zhí)行代碼;
}
函數(shù)必須以function進(jìn)行定義，類似于python的def隐锭。
參數(shù)可以為0個(gè)窃躲，1個(gè)或者多個(gè)，用括號(hào)括起來成榜，用逗號(hào)分隔框舔。
函數(shù)體用左右花括號(hào)進(jìn)行限定，花括號(hào)內(nèi)部時(shí)JavaScript執(zhí)行代碼赎婚。
JavaScript代碼和網(wǎng)頁內(nèi)容分離
和之前的CSS代碼一樣刘绣，除了可以直接寫在head的script標(biāo)簽之內(nèi)，JavaScript代碼用可以通過引用外部文件的方式來完成挣输。
這樣的好處也是很明顯的纬凤，就是將網(wǎng)頁顯示內(nèi)容和對(duì)網(wǎng)頁的操作代碼進(jìn)行分離，更容易進(jìn)行維護(hù)撩嚼，也更有利于組織代碼停士，方便不同的網(wǎng)頁去引用相同的JavaScript代碼功能挖帘。
可以稱之為外部JavaScript文件，它的文件名一般都是以.js結(jié)尾恋技。
如果需要使用外部JavaScript文件拇舀，可以通過script標(biāo)簽的src屬性來引用。
唯一要注意的一點(diǎn)是外部JavaScript文件里面不可以包含script標(biāo)簽蜻底。
下面來修改代碼骄崩，改為調(diào)用外部JavaScript文件。
新創(chuàng)建一個(gè)文件薄辅，文件名為testjs.js要拂。將函數(shù)changeContent整體內(nèi)容移動(dòng)到testjs.js文件中。并將文本修改顏色改為綠色站楚。
testjs.js代碼內(nèi)容如下：
修改testjs.html文件內(nèi)容：
刷新頁面脱惰，點(diǎn)擊Click按鈕，可以看到外部JavaScript文件起作用了窿春。
document.getElementById函數(shù)
可以看到函數(shù)changeContent里面的2行代碼的：
document.getElementById('testid').innerHTML='學(xué)哥是西門吹雪';
document.getElementById('testid').style.color='green';
這里重點(diǎn)的關(guān)鍵語句是document.getElementById拉一，它的作用就是用戶訪問網(wǎng)頁的某個(gè)元素。
它是通過網(wǎng)頁元素的id屬性來進(jìn)行定位和訪問的旧乞。
document是一個(gè)JavaScript內(nèi)部對(duì)象實(shí)例舅踪，意思就是JavaScript代碼當(dāng)前所在的這個(gè)網(wǎng)頁的對(duì)象的實(shí)例引用。
至于什么是“對(duì)象”和“實(shí)例”的概念良蛮，如果有其他編程語言經(jīng)驗(yàn)的可能比較好理解，但是初學(xué)者可能不太理解悍赢。
大致解釋一下决瞳，“對(duì)象”就是一種抽象概念的集合，而“實(shí)例”就是對(duì)象抽象概念的具體化左权。
一個(gè)對(duì)象用于定義某一類概念的抽象意義皮胡，而實(shí)例就是滿足對(duì)象抽象概念的具體化引用。
用一個(gè)比喻來形容赏迟，“轎車”就是一個(gè)對(duì)象屡贺，它是定義某一類事物的概念，但它不能拿來直接使用锌杀。
而“一輛奔馳C180”就是“轎車”的一個(gè)實(shí)例甩栈，它是一個(gè)具體的事物，可以拿來直接使用糕再，而且它滿足對(duì)對(duì)象的定義量没。
每個(gè)對(duì)象都具有一些方法可以操作，例如“轎車”可以啟動(dòng)突想、停止殴蹄、前進(jìn)究抓、后退或轉(zhuǎn)彎等方法。
那么對(duì)象的實(shí)例就可以使用這些方法進(jìn)行操作袭灯。
同樣的刺下，“一輛桑塔納2000”同樣是“轎車”的一個(gè)實(shí)例，同樣可以使用這些方法進(jìn)行操作稽荧。
可以看到橘茉，針對(duì)的某個(gè)事物的概念，對(duì)象只有一個(gè)蛤克，而實(shí)例可以有無數(shù)個(gè)捺癞。
更詳細(xì)的講解這里就不深入了，大家掌握一個(gè)基本的了解就夠了构挤。隨著今后更多的編程語言學(xué)習(xí)髓介，會(huì)逐步掌握的。
document是Document對(duì)象的一個(gè)實(shí)例筋现，它有一個(gè)方法是getElementById唐础，返回值是網(wǎng)頁中的一個(gè)元素對(duì)象的實(shí)例。
通過對(duì)這個(gè)返回值的繼續(xù)操作矾飞，就可以改變網(wǎng)頁元素的內(nèi)容或者樣式一膨。
innerHTML就是指網(wǎng)頁元素的內(nèi)容，而style就是網(wǎng)頁元素的style樣式屬性洒沦，而style.color就是網(wǎng)友元素的顏色樣式屬性豹绪。
通過賦值語句=就可以設(shè)置對(duì)應(yīng)的元素內(nèi)容和樣式。
JavaScript代碼執(zhí)行規(guī)則
JavaScript代碼是向?yàn)g覽器發(fā)出指示申眼，告訴瀏覽器應(yīng)該如何執(zhí)行處理瞒津。
它是單步執(zhí)行的，通常都在每句結(jié)尾用分號(hào)結(jié)束括尸。
執(zhí)行代碼可以是定義變量巷蚪、賦值語句、判斷語句濒翻、循環(huán)語句或者調(diào)用其他函數(shù)的語句屁柏。
執(zhí)行代碼是按照順序進(jìn)行執(zhí)行的，但是也可以通過分支語句和循環(huán)語句實(shí)現(xiàn)更多更復(fù)雜的邏輯有送。
例如上節(jié)課的下列語句：
if (document.getElementById('password').value.length<6) {
alert('密碼長(zhǎng)度不能少于6位淌喻！');
} else {
alert('Check OK');
}
可以看到，if語句和以前學(xué)習(xí)過的python語法格式不一樣雀摘。
if后面是一個(gè)用()左右括號(hào)包起來的一個(gè)邏輯判斷式似嗤，根據(jù)邏輯判斷式的結(jié)果是True還是False來執(zhí)行不同的代碼。
這一點(diǎn)和python也是一樣的邏輯届宠，只是代碼規(guī)范不同而已烁落。
JavaScript代碼是大小寫敏感的
JavaScript代碼是大小寫敏感的乘粒，這一點(diǎn)和第2章的html代碼是不一樣的。
來試驗(yàn)一下伤塌，將getElementById修改為全部小寫的getelementbyid看看：
修改testjs.js代碼：
刷新頁面灯萍，點(diǎn)擊Click按鈕，可以看到網(wǎng)頁內(nèi)容和樣式?jīng)]有變化每聪，說明代碼不起作用旦棉。
那么這里有點(diǎn)不好判斷了，是代碼出錯(cuò)了药薯，還是什么其它原因呢绑洛。
其實(shí)可以通過之前使用過的瀏覽器調(diào)試工具來進(jìn)行調(diào)試。
通過鼠標(biāo)右鍵“檢查”菜單童本，打開瀏覽器調(diào)試工具真屯。
在最下方的Console窗口里面可以看到提示JavaScript代碼出錯(cuò)了，而且很明白的知道是哪一行出錯(cuò)了穷娱，出的什么錯(cuò)誤绑蔫。
空格和折行
JavaScript會(huì)忽略多余的空格，可以通過添加空格來讓代碼更有可讀性泵额。
將剛才的小寫錯(cuò)誤修改正確配深，并添加空格。
testjs.js代碼修改如下：
然后刷新頁面重新執(zhí)行嫁盲，可以看到網(wǎng)頁執(zhí)行沒有錯(cuò)誤了篓叶，空格不影響代碼。
同樣的羞秤，如果一行代碼中的文本字符串過長(zhǎng)澜共，也可以使用折行提高可讀性。
通過在文本字符串中使用反斜杠來對(duì)代碼進(jìn)行折行锥腻。
testjs.js代碼修改如下：
刷新網(wǎng)頁，可以看到網(wǎng)頁正常執(zhí)行：
但是母谎，如果不是文本字符串瘦黑，使用反斜杠，則會(huì)出錯(cuò)：
testjs.js代碼修改如下：
刷新網(wǎng)頁奇唤，可以看到控制臺(tái)顯示的錯(cuò)誤幸斥。
JavaScript注釋
和CSS代碼一樣，可以對(duì)JavaScript代碼進(jìn)行注釋咬扇，達(dá)到暫時(shí)不執(zhí)行被注釋的代碼的目的甲葬，或者是對(duì)代碼進(jìn)行說明的目的。
單行注釋以//開頭懈贺，多行注釋使用/開頭经窖，/結(jié)尾坡垫。
給代碼添加2段注釋，將錯(cuò)誤代碼注釋掉画侣，添加正確的代碼冰悠。
testjs.js代碼修改如下：
刷新網(wǎng)頁重新執(zhí)行，可以看到注釋內(nèi)容不影響代碼實(shí)際執(zhí)行配乱，網(wǎng)頁正常執(zhí)行了溉卓。
