首頁技術文章正文

3種JavaScript代碼書寫位置和注意事項

更新時間:2021-05-31 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

在網(wǎng)頁中編寫JavaScript代碼時,有3種書寫位置,分別是行內(nèi)式、內(nèi)嵌式(也稱為嵌入式)和外部式(也稱為外鏈式),下面分別進行講解。

1. 行內(nèi)式

行內(nèi)式是指將單行或少量的JavaScript代碼寫在HTML標簽的事件屬性中(也就是以on開頭的屬性,如onclick)。下面通過具體操作步驟進行演示。

(1)創(chuàng)建一個簡單的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,幫助瀏覽器正確識別網(wǎng)頁的編碼。在聲明編碼后,還需要確保文件本身的編碼也是UTF-8。目前大多數(shù)代碼編輯器新建的文件編碼默認都是UTF-8。另外,Windows記事本默認的編碼是ANSI,在記事本中編寫的網(wǎng)頁容易出現(xiàn)亂碼,因此讀者應杜絕使用記事本編寫代碼文件。

(3)使用行內(nèi)式編寫JavaScript代碼,實現(xiàn)單擊一個按鈕后,彈出一個警告框,顯示一些提示信息,具體代碼如下。

   <body>
    <input type="button" value="點我" onclick="alert('行內(nèi)式')">
   </body>

在上述代碼中,寫在onclick屬性里的代碼就是JavaScript代碼。

(4)通過瀏覽器訪問demo01.html,運行結果如圖1所示。

javascript代碼書寫位置

圖1 行內(nèi)式

以上步驟演示了行內(nèi)式的使用。在實際開發(fā)中,使用行內(nèi)式還需要注意以下4點。

① 注意單引號和雙引號的使用。在HTML中推薦使用雙引號,而JavaScript推薦使用單引號。

② 行內(nèi)式可讀性較差,尤其是在HTML中編寫大量JavaScript代碼時,不方便閱讀。

③ 在遇到多層引號嵌套的情況時,非常容易混淆,導致代碼出錯。

④ 只有臨時測試,或者特殊情況下再使用行內(nèi)式,一般情況下不推薦使用行內(nèi)式。

2. 內(nèi)嵌式(嵌入式)

內(nèi)嵌式是使用<script>標簽包裹JavaScript代碼,<script>標簽可以寫在<head>或<body>標簽中。通過內(nèi)嵌式,可以將多行JavaScript代碼寫在<script>標簽中。內(nèi)嵌式是學習JavaScript時最常使用的方式。

下面我們通過具體操作步驟進行演示。

(1)創(chuàng)建demo02.html,用來編寫內(nèi)嵌式JavaScript代碼,示例代碼如下。

   <head>
    ……
    <script>
     alert('內(nèi)嵌式');
    </script>
   </head>

在上述代碼中,第4行是一條JavaScript語句,其末尾的分號“;”表示該語句結束,后面可以編寫下一條語句。<script>標簽還有一個type屬性,在HTML 5中該屬性的默認值為“text/javascript”,因此在編寫時可以省略type屬性。

(2)通過瀏覽器訪問demo02.html,頁面一打開后,就會自動彈出一個警告框,提示信息為“內(nèi)嵌式”。

3. 外部式(外鏈式)

外部式是指將JavaScript代碼寫在一個單獨的文件中,一般使用“js”作為文件的擴展名,在HTML頁面中使用<script>標簽進行引入,適合JavaScript代碼量比較多的情況。

外部式有利于HTML頁面代碼結構化,把大段的JavaScript代碼獨立到HTML頁面之外,既美觀,也方便文件級別的代碼復用。需要注意的是,外部式的<script>標簽內(nèi)不可以編寫JavaScript代碼。

下面我們通過具體操作步驟進行演示。

(1)創(chuàng)建demo03.html,用來編寫外部式JavaScript代碼,示例代碼如下。

   <head>
    ……
    <script src="test.js"></script>
   </head>

(2)創(chuàng)建test.js文件,在文件中編寫JavaScript代碼,如下所示。

alert('外部式');

(3)通過瀏覽器訪問demo03.html,頁面一打開后,就會自動彈出一個警告框,提示信息為“外部式”。





猜你喜歡:

JavaScript數(shù)據(jù)類型:javascript數(shù)據(jù)類型有哪些?

變量是什么?JavaScript變量的命名聲明與賦值講解

JavaScript中怎么獲取當前日期?

黑馬程序員前端高級軟件工程師培訓

分享到:
在線咨詢 我要報名
和我們在線交談!