文章目錄
- JavaScript 介紹
- 1) JavaScript 實作
- 1.1) ECMAScript
- 1.2) DOM
- 1.3) BOM
- 2) JavaScript 作用
- JavaScript 的引入
- <script> 元素
- JavaScript 書寫格式
- 1) 行內式：寫在標簽內部
- 2) 內嵌式：寫在一對 head 標簽中的 script 標簽中
- 3) 外鏈式：寫在一個單獨的.js檔案中，再匯入進來
- JavaScript 注釋
JavaScript 介紹
1) JavaScript 實作
JavaScript 是一門用來與網頁互動的腳本語言，包含以下三個組成部分
- 核心（ECMAScript）：由 ECMA-262 定義并提供核心功能，
- 檔案物件模型（DOM）：提供與網頁內容互動的方法和介面，
- 瀏覽器物件模型（BOM）：提供與瀏覽器互動的方法和介面，
1.1) ECMAScript
ECMAScript，即 ECMA-262 定義的語言，并不局限于 Web 瀏覽器， 事實上，這門語言沒有輸入和輸出之類的方法，
ECMA-262 將這門語言作為一個基準來定義，以便在它之上再構建更穩健的腳本語言，
Web 瀏覽器只是 ECMAScript 實作可能存在的一種宿主環境 (host environment) ，
宿主環境提供 ECMAScript 的基準實作和與環境自身互動必需的擴展，
擴展（比如 DOM）使用 ECMAScript 核心型別和語法，提供特定于環境的額外功能，
它描述了這門語言的部分：
- 語法
- 型別
- 陳述句
- 關鍵字
- 保留字
- 運算子
- 全域物件
ECMAScript 只是對實作這個規范描述的所有方面的一門語言的稱呼，JavaScript 實作了 ECMAScript，
1.2) DOM
檔案物件模型（DOM，Document Object Model）是一個應用編程介面（API），用于在 HTML 中使用擴展的 XML，
DOM 將整個頁面抽象為一組分層節點，
HTML 或 XML 頁面的每個組成部分都是一種節點，包含不同的資料，
比如下面的 HTML 代碼：
<html>
<head>
<title> Sample Page </title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>
這些代碼通過 DOM 可以表示一組分層節點，
它的作用：
DOM 通過創建表示檔案的樹，讓開發者可以隨心所欲地控制網頁的內容和結構，
使用 DOM API， 可以輕松地洗掉、添加、替換、修改節點，
保持 Web 跨平臺的本性
1.3) BOM
IE3 和 Netscape Navigator 3 提供了瀏覽器物件模型（BOM） API，用于支持訪問和操作瀏覽器的視窗，
使用 BOM，開發者可以操控瀏覽器顯示頁面之外的部分，
BOM 主要針對瀏覽器視窗和子視窗（frame），不過人們通常會把任何特定于瀏覽器的擴展都歸在 BOM 的范疇內，
2) JavaScript 作用
- 資料驗證
- 網頁特效
- 實作復雜的計算與互動等等
JavaScript 的引入
將 JavaScript 引入網頁，首先要解決它與網頁的主導語言 HTML 的關系問題，
那么我們可以使用什么方法實作？
<script> 元素
將 JavaScript 插入 HTML 的主要方法是使用 <script> 元素，它有著下列八個屬性：
-
async：可選，
表示應該立即開始下載腳本，但不能阻止其他頁面動作，比如下載資源或等待其他腳本加載，只對外部腳本檔案有效， -
charset：可選，
使用 src 屬性指定的代碼字符集，這個屬性很少使用，因為大多數瀏覽器不在乎它的值， -
crossorigin：可選，
配置相關請求的CORS（跨源資源共享）設定，默認不使用CORS，crossorigin="anonymous"組態檔請求不必設定憑據標志crossorigin="use-credentials"設定憑據標志，意味著出站請求會包含憑據， -
defer：可選，
表示腳本可以延遲到檔案完全被決議和顯示之后再執行，只對外部腳本檔案有效，在 IE7 及更早的版本中，對行內腳本也可以指定這個屬性， -
integrity：可選，
允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource Integrity），
如果接收到的資源的簽名與這個屬性指定的簽名不匹配，則頁面會報錯，腳本不會執行，
這個屬性可以用于確保內容分發網路（CDN，Content Delivery Network）不會提供惡意內容， -
language：廢棄，
最初用于表示代碼塊中的腳本語言（如"JavaScript"、“JavaScript 1.2"或"VBScript”），大多數瀏覽器都會忽略這個屬性，不應該再使用它， -
src：可選，
表示包含要執行的代碼的外部檔案， -
type：可選，
代替 language，表示代碼塊中腳本語言的內容型別（也稱 MIME 型別），按照慣例，這個值始終都是 text/javascript，盡管 text/javascript 和 text/ecmascript 都已經廢棄了，JavaScript 檔案的 MIME 型別通常是 application/x-javascript ，不過給type 屬性這個值有可能導致腳本被忽略，
在非 IE 的瀏覽器中有效的其他值還有 application/javascript 和application/ecmascript，
如果這個值是 module，則代碼會被當成 ES6 模塊，而且只有這時候代碼中才能出現 import 和 export 關鍵字，
在沒有使用 defer 和 async 屬性的情況下，不管包含的是什么代碼，瀏覽器都會按照 <script> 在頁面中出現的順序依次解釋它們，
JavaScript 書寫格式
1) 行內式：寫在標簽內部
例如：
<div onclick="alert('Hello JavaScript!');"> 這是一行有JavaScript的文字， </div>
效果如下：
點擊文字前
點擊之后
2) 內嵌式：寫在一對 head 標簽中的 script 標簽中
例如：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script>
alert('Hello JavaScript!');
</script>
</head>
<body>
這是一個包含了JavaScript的頁面，
</body>
</html>
效果如下：
3) 外鏈式：寫在一個單獨的.js檔案中，再匯入進來
例如：
.js檔案這里取名為main.js
alert('Hello');
在HTML檔案中匯入進去
<script src="main.js"></script>
效果如下：
Tips：
??如果使用了 src 屬性的 <script> 元素（即外鏈式）不應該再在 <script> 和 </script> 標簽中再包含其他 JavaScript 代碼，如果兩者都提供的話，那么瀏覽器只會下載并執行腳本檔案，從而忽略行內代碼，
JavaScript 注釋
單行注釋使用 //
多行注釋由 / * 開頭 ，由 * / 結尾
// 單行注釋
/*
多行
注釋
*/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296965.html
標籤：其他
上一篇：js判斷資料型別
下一篇：手寫map和filter