1.使用<script>標簽
1.使用<script>的兩種方式
1.直接在頁面中嵌入
<script type="text/javascript">
function sayHi(params) { console.log('hi') }
</script>
批注:包含在javascript中的代碼會從上到小依次解釋;當瀏覽器解析<script>中的代碼完畢之前,頁面中的其他代碼不會被瀏覽器加載和顯示
2.包含外部文件
<script type="text/javascript" src="index.js"></script>
批注:與解析嵌入式JavaScript代碼一樣,在解析外部JavaScript的代碼時(包含下載該文件),頁面的處理會被停止
2.標簽的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
//注釋
</body>
</html>
批注:這樣做的目的是為了在加載頁面時,先把外部文件先下載,所有就必須把所有的JavaScript的文件下載完;但是會有一個缺點,就是如果外部引入的文件過于大的話,會導致瀏覽器在呈現頁面時會有延遲,而延遲期間頁面一直空白;體驗不好,所以之后我們會把引用的文件放在放在<body>的內容的后面
3.延遲腳本
defer屬性:屬性的用途是表明腳本在執行時不會頁面的構造,也就是說,腳本會被延遲到整個頁面都解析完畢后再運行;
設置defer屬性,等于告訴瀏覽器立即下載但延遲執行
<script type="text/javascript" src="index.js" defer=“defer”></script>
<script type="text/javascript" src="index.js" defer=“defer”></script>
批注:第一個延遲腳本會先于第二個延遲腳本執行,defer只適用于外部腳本文件
4.異步腳本
html5為<script>元素定義了async屬性
這個屬性與defer屬性類似,只適用于外部腳本文件,但是與defer不同的是,async的腳本并不會按照指定他們的先后順序執行
<script type="text/javascript" src="index.js" async></script>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<script type="text/javascript" src="index.js" async></script>
2.<noscript>標簽
瀏覽器不支持JavaScript讓頁面平穩的退化,瀏覽器不支持腳本,瀏覽器支持腳本,但是腳本被禁用,滿足任意一個,都會顯示<noscript>的內容
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><noscript>12132131231231</noscript></head><body>//注釋</body></html>