【JS基礎】JavaScript簡介及在HTML中使用JavaScript（一）
JavaScript/">JavaScript簡介
1.JavaScript
的實現
JavaScript
是一種專為與網頁互動而設計的指令碼語言，由下列三個不同的部分組成：
(1)
核心（ECMAScript
）
，由ECMA-262
定義，提供核心語言功能，描述了該語言的語法和基本物件；
規定了該語言的以下組成部分：
- 語法
- 型別
- 語句
- 關鍵字
- 保留字
- 操作符
- 物件
(2)
文件物件模型（DOM
）
，提供訪問和操作網頁內容的方法和介面；
DOM
將把整個頁面規劃成由節點層級構成的文件。HTML
或XML
頁面的每個部分都是一個節點的衍生物。DOM
通過建立樹來表示文件，從而使開發者對文件的內容和結構具有空前的控制力。用DOM API
可以輕鬆地刪除、新增和替換節點。
(3)
瀏覽器物件模型（BOM
）
，提供與瀏覽器互動的方法和介面。
BOM
主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的JavaScript
擴充套件都被看做BOM
的一部分。這些擴充套件包括：
- 彈出新瀏覽器視窗的功能；
- 移動、縮放和關閉瀏覽器視窗的功能；
-
提供瀏覽器詳細資訊的
navigator物件； -
提供瀏覽器所載入頁面的詳細資訊的
location物件； -
提供使用者顯示器解析度詳細資訊的
screen物件； -
對
cookies的支援； -
像
XMLHttpRequest和IE的ActiveXObject這樣的自定義物件。
2.ECMAScript
與JavaScript
的關係
ECMAScript
是JavaScript
語言的國際標準，為JavaScript
提供核心語言功能；JavaScript
是ECMAScript
的實現。
在HTML中使用JavaScript
1. 使用<script>
元素
(1) <script>的屬性
async src charset defer language type
(2) 使用<script>元素的方式
-
直接在頁面中頁面中嵌入
JavaScript程式碼
在使用<script>
元素嵌入JavaScript
時，只須為<script>
指定type
屬性。然後把JavaScript程式碼直接放在元素內部即可。
<script type="text/javascript">//此為type屬性的一個預設值
functionsayHi(){
alert("Hi!");
// alert("</script>");
// 程式碼中不能出現"</script>"字串，否則為錯誤；
alert("<\/script>");
// 若遇到可通過轉義字元"\"解決這個問題。
}
</script>
-
包含外部
JavaScript檔案
如果要通過<script>
元素來包含外部JavaScript
檔案，那麼src
屬性是必需的。其屬性值是一個指向外部JavaScript
檔案的URL
，這個檔案既可 以是與包含它的頁面位於同一個伺服器上的檔案，也可以是其他任何域中的檔案。。
<script type="text/javascript"src="example.js"></script>
帶有src
屬性的<script>
元素不應該在其<script>
和</script>
標籤之間再包含額外的JavaScript
程式碼。如果包含，則只會下載並執行外部指令碼檔案，嵌入的程式碼會被忽略
。
(3) 延遲指令碼(defer屬性)
在<script>
元素中設定defer
屬性，指令碼會被延遲到整個頁面都解析完畢後再執行，相當於告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <!--雖然放在了<head>中，但將延遲到瀏覽器遇到</html>後再執行--> <!--第一個延遲指令碼會先於第二個延遲指令碼執行--> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/jaavascript" defer="defer" src="example2.js"></script> </head> <body> <!--這裡放頁面內容--> </body> </html>
把延遲指令碼放在頁面底部是最佳選擇
(4) 非同步指令碼(async屬性)
async
屬性告訴瀏覽器立即下載檔案，且標記為async
的指令碼並不保證按照指定它們的先後順序執行。
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <!--第二個指令碼檔案可能會在第一個指令碼檔案之前執行--> <script type="text/javascript" async src="example1.js"></script> <script type="text/jaavascript" async src="example2.js"></script> </head> <body> <!--這裡放頁面內容--> </body> </html>
指定async
屬性的目的是不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內容。
-
JavaScript解析順序
-
所有
<script>元素都會按照它們在頁面中出現的先後順序依次被解析。在不使用defer和async屬性的情況下，只有在解析完前面<script>元素中的程式碼之後，才會開始解析後面<script>元素中的程式碼。 -
由於瀏覽器會先解析完不使用
defer屬性的<script>元素中的程式碼，然後再解析後面的內容， 所以 一般應該把<script>元素放在頁面最後，即主要內容後面，</body>標籤前面 。
- 嵌入程式碼和外部檔案
推薦使用外部檔案來包含JavaScript
程式碼，有以下優點：
-
可維護性
：把所有
JavaScript檔案都放在一個資料夾中，更易於維護。 -
可快取
：瀏覽器能夠根據具體的設定快取連結的所有外部
JavaScript檔案。也就是說，如果有兩個頁面都使用同一個檔案，那麼這個檔案只需下載一次。因此，最終結果就是能夠加快頁面載入的速度。 - 適應未來