更新時(shí)間:2021年08月31日18時(shí)06分 來源:傳智教育 瀏覽次數(shù):
在網(wǎng)頁中編寫JavaScript代碼時(shí),有3種書寫位置,分別是行內(nèi)式、內(nèi)嵌式(也稱為嵌人式)和外部式(也稱為外鏈?zhǔn)?,下面分別進(jìn)行講解。
行內(nèi)式是指將單行或少量的JavaScript代碼寫在HTML標(biāo)簽的事件屬性中(也就是以on開頭的屬性,如onclick)。下面通過具體操作步驟進(jìn)行演示。
(1)創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁面,將文件命名為demo01.html。
(2)編寫demo01.html,具體代碼如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
在上述代碼中,第4行聲明了網(wǎng)頁的編碼為UTF-8,幫助瀏覽器正確識(shí)別網(wǎng)頁的編碼。
在聲明編碼后,還需要確保文件本身的編碼也是UTF-8。目前大多數(shù)代碼編輯器新建的文件編碼默認(rèn)都是UTF-8。另外,Windows 記事本默認(rèn)的編碼是ANSI,在記事本中編寫的網(wǎng)頁容易出現(xiàn)亂碼,因此讀者應(yīng)杜絕使用記事本編寫代碼文件。
(3)使用行內(nèi)式編寫JavaScript代碼,實(shí)現(xiàn)單擊一個(gè)按鈕后, 彈出一一個(gè)警告框,顯示一些提示信息,具體代碼如下。
<body> <input type="button" value="點(diǎn)我" onclick="alert('行內(nèi)式')"> </body>
在上述代碼中,寫在onclick屬性里的代碼就是JavaScript代碼。
(4)通過瀏覽器訪問demo01.html,運(yùn)行結(jié)果如下圖所示。
以上步驟演示了行內(nèi)式的使用。在實(shí)際開發(fā)中,使用行內(nèi)式還需要注意以下4點(diǎn)。
①注意單引號(hào)和雙引號(hào)的使用。在HTML中推薦使用雙引號(hào),而JavaScript推薦使用單引號(hào)。
②行內(nèi)式可讀性較差,尤其是在HTML中編寫大量JavaScript代碼時(shí),不方便閱讀。
③在遇到多層引號(hào)嵌套的情況時(shí),非常容易混淆,導(dǎo)致代碼出錯(cuò)。
④只有臨時(shí)測(cè)試,或者特殊情況下再使用行內(nèi)式,一般情況下不推薦使用行內(nèi)式。
內(nèi)嵌式是指使用<script>標(biāo)簽包裹JavaScript代碼,<scrip>標(biāo)簽可以寫在<head>或<body>標(biāo)簽中。通過內(nèi)嵌式,可以將多行JavaScript代碼寫在<script>標(biāo)簽中。內(nèi)嵌式是學(xué)習(xí)JavaScript時(shí)最常使用的方式。
下面我們通過具體操作步驟進(jìn)行演示。
(1)創(chuàng)建demo02.html,用來編寫內(nèi)嵌式JavaScript代碼,示例代碼如下。
<head> ...... <script> alert('內(nèi)嵌式'); </script> </head>
在上述代碼中,第4行是一條JavaScript語句,其末尾的分號(hào)“;” 表示該語句結(jié)束,后面可以編寫下一條語句。<script>標(biāo)簽還有一個(gè)type屬性,在HTML5中該屬性的默認(rèn)值為“text/javascript”,因此在編寫時(shí)可以省略type屬性。
(2)通過瀏覽器訪問demo02.html,頁面一打開后,就會(huì)自動(dòng)彈出一個(gè)警告框,提示信息為“內(nèi)嵌式”。
外部式是指將JavaScript代碼寫在一個(gè)單獨(dú)的文件中,一 般使用"js"作為文件的擴(kuò)展名,在HTML頁面中使用
(1)創(chuàng)建demo03.html, 用來編寫外部式JavaScript代碼,示例代碼如下。
<head> <script src="test.js"></script> </head>
(2)創(chuàng)建test.js文件,在文件中編寫JavaScript代碼,如下所示。
alert('外部式');
(3)通過瀏覽器訪問demo03.html,頁面一打開后,就會(huì)自動(dòng)彈出一個(gè)警告框,提示信息為“外部式”。
猜你喜歡:
北京校區(qū)