官术网_书友最值得收藏!

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)試后注意注釋掉它。

主站蜘蛛池模板: 余庆县| 锡林浩特市| 井冈山市| 麻江县| 华容县| 漳浦县| 呼和浩特市| 志丹县| 溧阳市| 江川县| 阜宁县| 盐源县| 石屏县| 兴宁市| 鞍山市| 红原县| 松原市| 余江县| 孟连| 凤凰县| 泽普县| 藁城市| 静安区| 信阳市| 镇安县| 康马县| 隆尧县| 谢通门县| 长宁区| 郸城县| 伊川县| 德保县| 漯河市| 获嘉县| 江都市| 扶余县| 浮山县| 商都县| 延川县| 儋州市| 高邮市|