- jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版·第2版）
- 馬靜媛 黃栗 夏鵬主編
- 2285字
- 2025-06-06 15:34:46
1.3 編寫(xiě)和運(yùn)行第一個(gè)JavaScript程序
下面展示一個(gè)簡(jiǎn)單的JavaScript程序，通過(guò)該程序，讀者可對(duì)編寫(xiě)和運(yùn)行JavaScript程序的整個(gè)過(guò)程有一個(gè)初步的認(rèn)識(shí)。
1.3.1 編寫(xiě)JavaScript程序
【例1-3】下面使用VS Code編輯器編寫(xiě)第一個(gè)JavaScript程序。
（1）啟動(dòng)VS Code編輯器，在之前創(chuàng)建的sourceCode文件夾中新建一個(gè)文件夾1-3，如圖1-11所示。
圖1-11 新建文件夾
（2）在1-3文件夾中新建一個(gè)index.html文件，并且輸入代碼如下（實(shí)例位置：源碼\第1單元\1-2）。
JavaScript的程序代碼必須置于<script language="javascript">和</script>之間。
JavaScript腳本在HTML文件中的位置有以下3種。
①在HTML文件的<body>標(biāo)記中的任何位置：如果所編寫(xiě)的JavaScript程序用于輸出網(wǎng)頁(yè)的內(nèi)容，那么應(yīng)該將JavaScript程序置于HTML文件的<boby>標(biāo)記中需要顯示該內(nèi)容的位置。
②在HTML文件的<head>標(biāo)記中：如果所編寫(xiě)的JavaScript程序需要在某一個(gè)HTML文件中多次使用，那么就應(yīng)該編寫(xiě)JavaScript函數(shù)（Function），并將函數(shù)置于該HTML文件的<head>標(biāo)記中。
使用時(shí)直接調(diào)用該函數(shù)就可以了。
上述代碼的含義為單擊“提交”按鈕，調(diào)用check()函數(shù)。
③在單獨(dú)的.js文件中：如果所編寫(xiě)的JavaScript程序需要在多個(gè)HTML文件中使用，或者所編寫(xiě)的JavaScript程序內(nèi)容很多，這時(shí)就應(yīng)該將這段JavaScript程序置于單獨(dú)的.js文件中，然后在所需要的HTML文件a.html中，使用<script>標(biāo)記包含該.js文件。例如：
被包含的ch1-1.js文件代碼如下：
注意
在外部的JavaScript程序文件ch1-1.js中不必使用<script>標(biāo)記。
（3）雖然大多數(shù)瀏覽器都支持JavaScript，但也有少部分瀏覽器不支持JavaScript，還有一些支持JavaScript的瀏覽器由于安全問(wèn)題關(guān)閉了對(duì)JavaScript的支持。如果遇到不支持JavaScript的瀏覽器，網(wǎng)頁(yè)會(huì)達(dá)不到預(yù)期效果或出現(xiàn)錯(cuò)誤。解決這個(gè)問(wèn)題可以使用以下兩種方法。
①HTML注釋符號(hào)。HTML注釋符號(hào)是以<！--開(kāi)始、以-->結(jié)束的。但是JavaScript不能識(shí)別HTML注釋符號(hào)的結(jié)束部分-->。如果在此HTML注釋符號(hào)內(nèi)編寫(xiě)JavaScript腳本，那么不支持JavaScript的瀏覽器將會(huì)把編寫(xiě)的JavaScript腳本作為注釋處理。
②<noscript>標(biāo)記。如果當(dāng)前瀏覽器支持JavaScript，那么該瀏覽器將會(huì)忽略<noscript>和</noscript>標(biāo)記之間的任何內(nèi)容。如果當(dāng)前瀏覽器不支持JavaScript，那么該瀏覽器將會(huì)把這兩個(gè)標(biāo)記之間的內(nèi)容顯示出來(lái)。此標(biāo)記可以提醒瀏覽者當(dāng)前使用的瀏覽器是否支持JavaScript。
（4）JavaScript腳本語(yǔ)言區(qū)分字母大小寫(xiě)。
1.3.2 運(yùn)行JavaScript程序
運(yùn)行用JavaScript編寫(xiě)的程序需要使用支持JavaScript語(yǔ)言的瀏覽器。現(xiàn)在的瀏覽器基本上都支持JavaScript。雙擊1-3/index.html文件，在瀏覽器中輸出運(yùn)行結(jié)果，如圖1-12所示。
圖1-12 運(yùn)行第一個(gè)JavaScript程序
說(shuō)明
在部分瀏覽器中，選擇“查看網(wǎng)頁(yè)源代碼”命令，可以查看程序生成的HTML源碼。在客戶(hù)端中查看到的源碼是經(jīng)過(guò)瀏覽器解釋的HTML代碼，如果將JavaScript腳本存儲(chǔ)在單獨(dú)的文件中，那么在查看源碼時(shí)不會(huì)顯示JavaScript程序源碼。
1.3.3 JavaScript程序的出錯(cuò)類(lèi)型
JavaScript程序的出錯(cuò)類(lèi)型分為語(yǔ)法錯(cuò)誤和邏輯錯(cuò)誤兩種。
1.語(yǔ)法錯(cuò)誤
語(yǔ)法錯(cuò)誤是在程序開(kāi)發(fā)中使用不符合某種語(yǔ)言規(guī)則的語(yǔ)句而產(chǎn)生的錯(cuò)誤。例如，錯(cuò)誤地使用了JavaScript的關(guān)鍵字、錯(cuò)誤地定義了變量名稱(chēng)等，這樣當(dāng)瀏覽器運(yùn)行JavaScript程序時(shí)就會(huì)報(bào)錯(cuò)。
例如，將例1-3程序中的alert語(yǔ)句改寫(xiě)成下述語(yǔ)句，即將第1個(gè)字符由小寫(xiě)字母改寫(xiě)成大寫(xiě)字母。
保存該文件后，再次在瀏覽器中運(yùn)行，程序就會(huì)報(bào)錯(cuò)。
運(yùn)行本程序，瀏覽器將不會(huì)正常彈出提示信息，在瀏覽器調(diào)試窗口中可以看到報(bào)錯(cuò)信息，如圖1-13所示。
圖1-13 在瀏覽器中調(diào)試JavaScript程序
2.邏輯錯(cuò)誤
有些時(shí)候，程序中不存在語(yǔ)法錯(cuò)誤，也沒(méi)有執(zhí)行非法操作的語(yǔ)句，可是程序的運(yùn)行結(jié)果卻是不正確的，造成這種結(jié)果的錯(cuò)誤叫作邏輯錯(cuò)誤。邏輯錯(cuò)誤對(duì)于編譯器來(lái)說(shuō)并不算錯(cuò)誤，但是由于代碼中存在邏輯錯(cuò)誤，會(huì)導(dǎo)致運(yùn)行結(jié)果并非期望得到的結(jié)果。邏輯錯(cuò)誤從語(yǔ)法上看是不存在錯(cuò)誤的，但是從程序的功能上看是Bug（錯(cuò)誤、漏洞）。這是最難調(diào)試和發(fā)現(xiàn)的Bug之一，因?yàn)樗鼈儾粫?huì)導(dǎo)致彈出任何錯(cuò)誤信息，唯一能看到的就是程序的功能（或部分功能）沒(méi)有實(shí)現(xiàn)。
例如，某商城舉行商品優(yōu)惠活動(dòng)，如果用戶(hù)是商城的會(huì)員，那么商品打八五折，代碼如下所示。
運(yùn)行程序時(shí)，瀏覽器沒(méi)有彈出錯(cuò)誤信息。但是當(dāng)用戶(hù)是商城的會(huì)員時(shí)，商品價(jià)格乘8.5，相當(dāng)于商品不但沒(méi)有打折，其價(jià)格反而比原價(jià)貴了8.5倍，這一點(diǎn)就不符合要求，屬于邏輯錯(cuò)誤，應(yīng)該乘0.85才正確。
在實(shí)現(xiàn)動(dòng)態(tài)的Web編程時(shí)，通常情況下，數(shù)據(jù)表中均是以8.5進(jìn)行存儲(chǔ)的，這時(shí)在程序中就應(yīng)該在商品價(jià)格乘8.5后再除以10，這樣就相當(dāng)于商品價(jià)格乘0.85。正確的代碼為：
對(duì)于邏輯錯(cuò)誤而言，發(fā)現(xiàn)錯(cuò)誤是容易的，但要查找出邏輯錯(cuò)誤的原因卻很困難。因此，讀者在編寫(xiě)程序的過(guò)程中，一定要注意語(yǔ)句或者函數(shù)的完整性，否則將導(dǎo)致程序出錯(cuò)。
1.3.4 JavaScript的3種調(diào)試方式
通常情況下，如果JavaScript程序出現(xiàn)錯(cuò)誤，是不會(huì)有相關(guān)提示信息的。那么該錯(cuò)誤到底是語(yǔ)法錯(cuò)誤還是邏輯錯(cuò)誤以及出錯(cuò)的具體位置無(wú)法得知，這樣我們就迫切地需要掌握J(rèn)avaScript的調(diào)試方式。本小節(jié)我們一起學(xué)習(xí)3種常見(jiàn)的JavaScript調(diào)試方式。
（1）使用alert()彈出警告框，實(shí)例代碼如下所示（實(shí)例位置：源碼\第1單元\1-3）。
運(yùn)行以上代碼，瀏覽器顯示結(jié)果如圖1-14所示。
圖1-14 alert()彈出警告框
（2）使用document.write()將內(nèi)容寫(xiě)入HTML文檔，實(shí)例代碼如下所示（實(shí)例位置：源碼\第1單元\1-4）。
運(yùn)行以上代碼，瀏覽器顯示結(jié)果如圖1-15所示。
圖1-15 document.write()顯示結(jié)果
（3）使用console.log()將內(nèi)容寫(xiě)入瀏覽器控制臺(tái)，實(shí)例代碼如下所示（實(shí)例位置：源碼\第1單元\1-5）。
運(yùn)行以上代碼，瀏覽器顯示結(jié)果如圖1-16所示。
圖1-16 console.log()顯示結(jié)果
比較這3種調(diào)試方式可知，console.log()是一種更好的方式，在實(shí)際應(yīng)用中更受開(kāi)發(fā)人員的青睞。對(duì)這3種調(diào)試方式的對(duì)比分析如下。
（1）如果在文檔已完成加載后執(zhí)行document.write()，整個(gè)HTML頁(yè)面將被覆蓋，對(duì)程序的執(zhí)行造成不便。
（2）alert()方法會(huì)阻斷JavaScript程序的執(zhí)行，從而帶來(lái)副作用，而且使用alert()方法需要用戶(hù)單擊彈窗的“確定”按鈕，操作麻煩，最重要的是alert()只能輸出字符串。
（3）console.log()僅在控制臺(tái)輸出相關(guān)信息，不會(huì)對(duì)JavaScript程序執(zhí)行造成阻礙。此外，console.log()可以接收任何字符串、數(shù)字和JavaScript對(duì)象，使用它可以看到清楚的對(duì)象屬性結(jié)構(gòu)，在AJAX（Asynchronous JavaScript And XML，異步JavaScript和XML技術(shù)）中返回JSON數(shù)組對(duì)象時(shí)調(diào)試很方便。
注意
在程序中，調(diào)試是測(cè)試、查找及減少Bug的過(guò)程。console.log()在IE 8及以下版本中會(huì)報(bào)錯(cuò)，調(diào)試后注意注釋掉它。
- Pro/ENGINEER三維造型設(shè)計(jì)實(shí)例精解
- 動(dòng)漫秀場(chǎng)：超級(jí)漫畫(huà)Q版造型素描技法
- jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程（慕課版·第2版）
- Vue.js Web開(kāi)發(fā)案例教程（在線實(shí)訓(xùn)版）
- HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程
- JSP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)案例指導(dǎo)
- HTML+CSS+JavaScript網(wǎng)頁(yè)設(shè)計(jì)與布局：從新手到高手
- 速學(xué)速通：快學(xué)Flash網(wǎng)頁(yè)動(dòng)畫(huà)
- Photoshop電商網(wǎng)頁(yè)廣告設(shè)計(jì)實(shí)戰(zhàn)從入門(mén)到精通
- 秩序之美：網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)
- Dreamweaver CS3網(wǎng)頁(yè)制作
- 漫畫(huà)素描技法完全教程：角色繪制與設(shè)定篇
- 移動(dòng)應(yīng)用UI設(shè)計(jì)
- 網(wǎng)絡(luò)技術(shù)·商業(yè)網(wǎng)站全程開(kāi)發(fā)情景案例教學(xué)
- 網(wǎng)頁(yè)設(shè)計(jì)與制作