拆分1:(在HTML中使用Javascript)

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>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容