首頁(yè)技術(shù)文章正文

JavaScript代碼寫在哪里？

更新時(shí)間:2021-08-31 來(lái)源:傳智教育 瀏覽量:

IT培訓(xùn)班

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


1.行內(nèi)式

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

(1)創(chuàng)建一個(gè)簡(jiǎn)單的HTML頁(yè)面，將文件命名為demo01.html。

(2)編寫demo01.html，具體代碼如下。 

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
	<body>
	</body>
</html>

在上述代碼中，第4行聲明了網(wǎng)頁(yè)的編碼為UTF-8，幫助瀏覽器正確識(shí)別網(wǎng)頁(yè)的編碼。

在聲明編碼后，還需要確保文件本身的編碼也是UTF-8。目前大多數(shù)代碼編輯器新建的文件編碼默認(rèn)都是UTF-8。另外，Windows 記事本默認(rèn)的編碼是ANSI,在記事本中編寫的網(wǎng)頁(yè)容易出現(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)通過(guò)瀏覽器訪問(wèn)demo01.html，運(yùn)行結(jié)果如下圖所示。

javascript書(shū)寫

以上步驟演示了行內(nèi)式的使用。在實(shí)際開(kāi)發(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)式。


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

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

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

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

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

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

(2)通過(guò)瀏覽器訪問(wèn)demo02.html，頁(yè)面一打開(kāi)后，就會(huì)自動(dòng)彈出一個(gè)警告框，提示信息為“內(nèi)嵌式”。

3.外部式(外鏈?zhǔn)?

外部式是指將JavaScript代碼寫在一個(gè)單獨(dú)的文件中，一 般使用"js"作為文件的擴(kuò)展名，在HTML頁(yè)面中使用

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

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

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

alert('外部式');

(3)通過(guò)瀏覽器訪問(wèn)demo03.html，頁(yè)面一打開(kāi)后，就會(huì)自動(dòng)彈出一個(gè)警告框，提示信息為“外部式”。



猜你喜歡：

Javascript創(chuàng)建數(shù)組的方式

JavaScript執(zhí)行機(jī)制詳細(xì)介紹

JavaScript數(shù)據(jù)類型：javascript數(shù)據(jù)類型有哪些？

Javascript多維數(shù)組介紹

黑馬程序員HTML&JS+前端培訓(xùn)課程

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！