一、JavaScript是一種專為與網頁交互而設計的腳本語言,它的的組成
ECMAScript(核心) DOM(文檔對象模型) BOM(浏覽器對象模型)
1.1ECMAScript
ECMA-262定義的ECMAScrip與Web浏覽器沒有依賴關系,ECMA-262定義的只是這門語言的基礎,提供核心語言功能
ECMAScript是通過ECMA-262標准化的腳本語言,ECMA-262規定語言的:語法、類型、語句、關鍵字、保留字、操作符、對象
1.2 DOM(Document Object Modle)
DOM是針對XML但是經過擴展用於HTML的應用程序編程接口(API,Application Programming Interface),提供訪問和操作網頁內容的方法和接口
DOM把整個頁面映射為一個多層節點結構,HTML或者XML等頁面中的每個組成部分都是某種類型的節點,這些節點又包含不同類型的數據。
1.3 BOM(Bower Object Modle)
控制浏覽器顯示的頁面以外的部分,BOM只處理浏覽器窗口和框架,提供與浏覽器交互的方法和接口
二、<script>元素
2.1引用javascript文件
外部引用javascript文件:
代碼如下:
<script type="text/javascript" src="../../XX.js"></script>
頁面嵌入javascript代碼
代碼如下:
<script type="text/javascript">
//javascript代碼
</script>
包含在<script>元素內部的JavaScript代碼將被從上至下依次解釋
2.2 <script>元素的屬性
defer延遲腳本:告訴浏覽器立即下載,腳本會被延遲到整個頁面都被解析完才執行, defer只適用於外部引入的腳本文件
代碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" defer="defer" src="example.js"></script>
</head>
</html>
雖然<script>標簽位於<head>標簽內,但是demo.js會延遲到浏覽器遇到</html>後才執行。
async異步腳本:必讓頁面等待腳本的下載和執行,從而異步加載頁面其他內容
同defer一樣只適用於外部引入的腳本文件,async告訴浏覽器立即下載文件,但與defer不同的是標記不async腳本並不保證按照指定它們的先後順序執行,建議異步腳本不要在加載期間修改DOM
代碼如下:
<!--異步腳本-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
2.3 <noscript>元素的屬性
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<!--延遲腳本-->
<scripttype="text/javascript" defer="defer" src="example.js"></script>
<!--導部腳本-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
<noscript>
<p>本頁顯示需要浏覽器支持(啟用)Javascript
</noscript>
</body>
</html>
浏覽器不支持腳本
浏覽器支持腳本,但腳本被禁用,浏覽器就會顯示<noscript>中的內容
這個頁面會在腳本無效的情況下,向用戶顯示一條信息,而在啟用了腳本的浏覽器中,用戶永遠也不會看到它
以上就是本文的全部內容了,希望大家能夠喜歡,本系列將持續更新。