快速入門

在HTML中，可以使用行內式、外鏈式、行內式 三種方式 引入JavaScript，

行內式

行內式是將JavaScript代碼作為ＨＴＭＬ標簽的屬性值來使用，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
	</head>
	<body>
		<!-- 行內式引入JS代碼　 -->
		<input type="button" value="https://www.cnblogs.com/yxchao/archive/2022/05/09/點我" onclick="alert('頂')">
	</body>
</html>

行內式

行內式是將JavaScript代碼包裹在<script>標簽中直接撰寫在HTML檔案中，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
		
		<script type="text/javascript">
			alert("頂");
		</script>
	</head>
	<body>
		網頁內容
	</body>
</html>

其中 type="text/javascript",是告知瀏覽器里面是js代碼的型別，在HTML5中其屬于默認值，可以省略不些，

外鏈式

外鏈式是指將JavaScript代碼保存到一個單獨的擴展名為.js的檔案中，然后使用script 標簽的src屬性引入這個js檔案，示例如下：

創建一個test.js的檔案（一般放在目錄下面），完成代碼撰寫

alert("頂");

在HTML代碼中引入test.js檔案

<script type="text/javascript" src="https://www.cnblogs.com/yxchao/archive/2022/05/09/js/test.js">
	
</script>

相比嵌入式和行內式，推薦使用鏈入式來撰寫和引入JavaScript代碼，

程式提倡模塊化、結構化，在網頁開發中，提倡結構、樣式、代碼分離，即HTML、CSS、JavaScript三部分代碼，盡量避免都直接在HTML中撰寫，盡量分離為XX.html、XX.css、XX.js檔案撰寫，以便于后期維護，

擴展:常見錯誤

如下代碼運行后是有報錯資訊的，頁面上的文本內容并不會改為"大家好"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
		
		<script type="text/javascript">
			// 獲取id為text1的標簽物件
			var spanTag = document.getElementById('text1');
			// 將此標簽內部文本 修改為：大家好
			spanTag.innerText = "大家好!";
		</script>
	</head>
	<body>
		<span id="text1">你我他</span>
	</body>
</html>

在瀏覽器中 按F12 可進入開發者模式，可用來檢查、除錯代碼

錯誤分析

默認情況下，HTML的加載是從上而下的，如上代碼中，它將先加載head標簽，后加載body標簽，也就是說當第3－13行代碼在執行時，第14－16行的代碼還沒加載到，在這種情況下，第9行拿到的spanTag是不存在的、是NULL，所以錯誤資訊也提示第１１行出錯了，錯誤資訊是: TypeError: Cannot set properties of null (setting ‘innerHTML‘),大致意思為無法設定為null的屬性，

兩種解決方案

更改script標簽位置，讓頁面內容先加載，之后再加載執行script代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
	</head>
	
	<body>
		<span id="text1">你我他</span>
	</body>
	
	<script type="text/javascript">
		// 獲取id為text1的標簽物件
		var spanTag = document.getElementById('text1');
		// 將此標簽內部文本 修改為：大家好
		spanTag.innerText = "大家好!";
	</script>
</html>

以上代碼中，將script標簽放到了head和body的后面，頁面元素都加載完了，最后再加載執行代碼，同時，將12-17行script標簽內容放在第9-10行之間也是可以的，再次運行后，將不同有錯誤，內容也將顯示為大家好!

使用外鏈式引入js檔案，異步加載

擴展:異步加載

為了降低JavaScript阻塞問題對頁面造成的影響，可以使用HTML5為script標簽新增的兩個可選屬性 async 和 defer，

async
async用于異步加載，即先下載檔案，不阻塞其他代碼執行，下載完成后再執行，

<script  type="text/javascript" src="https://www.cnblogs.com/yxchao/archive/2022/05/09/js/test.js" async></script>

defer
defer用于延后執行，即先下載檔案，直到網頁加載完成后，再執行，

<script  type="text/javascript" src="https://www.cnblogs.com/yxchao/archive/2022/05/09/js/test.js" defer></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471818.html

標籤：其他

上一篇：前端周刊：2022-6 期

下一篇：高級前端進階（五）