教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

JavaScript代碼書寫有幾種位置？書寫代碼操作步驟

更新時間:2021年05月31日14時43分 來源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育，不一樣的品質(zhì)

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

1. 行內(nèi)式

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

（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ù)代碼編輯器新建的文件編碼默認(rèn)都是UTF-8。另外，Windows記事本默認(rèn)的編碼是ANSI，在記事本中編寫的網(wǎng)頁容易出現(xiàn)亂碼，因此讀者應(yīng)杜絕使用記事本編寫代碼文件。

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

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

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

（4）通過瀏覽器訪問demo01.html，運(yùn)行結(jié)果如圖1所示。

javascript代碼書寫位置

圖1 行內(nèi)式

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

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

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

③ 在遇到多層引號嵌套的情況時，非常容易混淆，導(dǎo)致代碼出錯。

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

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

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

下面我們通過具體操作步驟進(jìn)行演示。

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

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

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

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

3. 外部式（外鏈?zhǔn)剑?/p>

外部式是指將JavaScript代碼寫在一個單獨(dú)的文件中，一般使用“js”作為文件的擴(kuò)展名，在HTML頁面中使用<script>標(biāo)簽進(jìn)行引入，適合JavaScript代碼量比較多的情況。

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

下面我們通過具體操作步驟進(jìn)行演示。

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

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

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

alert('外部式');

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




猜你喜歡：

Javascript創(chuàng)建對象的方式有哪些？

JavaScript如何遍歷數(shù)組？

HTML、CSS和JavaScript分別是什么？有什么作用？

JavaScript中Math常用屬性和方法有哪些？

傳智教育前端與移動開發(fā)培訓(xùn)

0 分享到：
和我們在線交談！