JavaScript 入門 · 地表最強JS文檔

[toc] # 每日英語 1. `function` 函數(js 創建函數) 1. `alert` 警報(瀏覽器彈窗) 1. `script` 腳本(書寫 js 代碼, <script></script>) 1. `extension` 擴展(vscode 安裝擴展) 1. `language` 語言(vscode 安裝中文語言包) 1. `click` 點擊(js 點擊事件 onclick) 1. `default` 默認(vscode 擴展, 在默認瀏覽器中打開 html 文件) 1. `browser` 瀏覽器(vscode 擴展, 在默認瀏覽器中打開 html 文件) # JavaScript 簡介 ## JavaScript 是什么 1. JavaScript 一種`解釋型`、`弱類型`語言。 1. 解釋性語言, 編譯型語言 1. 解釋性語言, 在線翻譯, 英文文檔 2. 編譯型語言, 英文書, 翻譯成 30 國語言 2. 弱類型語言, 強類型語言 2. 它的解釋器被稱為`JavaScript引擎`，為瀏覽器功能的一部分，廣泛用于客戶端的腳本語言。 3. 最早是在 HTML 網頁上使用，用來給 HTML 網頁`增加動態功能`的 4. 現在它被廣泛用于開發網站特效、前后端交互、甚至后臺開發（`Node.js`）。 ## JavaScript 發展史 - JavaScript 最初誕生的原因，是網景公司（Netscape）為解決撥號上網時代（低帶寬），服務端驗證表單數據低效的問題，而著手開發一種客戶端語言。 - 但在其發展過程中，早已不再局限于簡單的表單數據驗證，而是具備了與瀏覽器窗口及其內容等幾乎所有方面的交互能力，并成為了一門全面的編程語言。 - 最初網景公司把這種客戶端語言命名為 LiveScript，但為了搭上當時媒體熱炒 Java 的順風車，在發布前夕臨時更名為 javascript。 - 隨著微軟等競爭對手推出 JScript 等 JavaScript 的不同實現，導致 JavaScript 的語法和特性日益混亂，其標準化問題被提上日程。 - 最終由歐洲計算機制造商協會（ECMA）以 JavaScript1.1 為藍本，制定了【ECMA-262】標準，并由此標準定義了一種新腳本語言 ECMAScript。 - 隨后，ISO 也采用 ECMAScript 作為標準，各瀏覽器廠商便紛紛開始將 ECMAScript 作為各自 JavaScript 實現的基礎。 # JavaScript 的主要組成部分 ## ECMAScript > [danger] 作為核心，它規定了語言的組成部分：語法、類型、語句、關鍵字、保留字、操作符、對象 ![](https://box.kancloud.cn/8d18010147a7a37b846abc122719e3f1_1092x461.png) ## DOM > [danger] DOM 把整個頁面映射為一個多層節點結果，開發人員可借助 DOM 提供的 API，輕松地刪除、添加、替換或修改任何節點。 ![](https://box.kancloud.cn/75027625ca58c85dfd28b77536388532_1085x530.png) ## BOM > [danger] 支持可以訪問和操作瀏覽器窗口的瀏覽器對象模型，開發人員可以控制瀏覽器顯示的頁面以外的部分。(兼容性很差) # JavaScript 的特性 ## 簡單 JavaScript 語言中采用的是弱類型的變量類型,對使用的數據類型未做出嚴格的要求,是基于 Java 基本語句和控制的腳本語言,其設計簡單緊湊。 ## 動態 JavaScript 是一種采用事件驅動的腳本語言,它不需要經過 Web 服務器就可以對用戶的輸入做出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作 JavaScript 都可直接對這些事件給出相應的響應。 ## 跨平臺 JavaScript 腳本語言不依賴于操作系統,僅需要瀏覽器的支持。因此一個 JavaScript 腳本在編寫后可以帶到任意機器上使用,前提上機器上的瀏覽器支持 JavaScript 腳本語言目前 JavaScript 已被大多數的瀏覽器所支持。 > *不同于服務器端腳本語言，例如 PHP 與 ASP，JavaScript 主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務器的支持。* > _所以在早期程序員比較青睞于 JavaScript 以減少對服務器的負擔。_ # JavaScript 的日常用途 - 嵌入動態文本于 HTML 頁面。 - 對瀏覽器事件做出響應。 - 讀寫 HTML 元素。 - 在數據被提交到服務器之前驗證數據。 - 檢測訪客的瀏覽器信息。 - 控制 cookies，包括創建和修改等。 - 基于 Node.js 技術進行服務器端編程。 # JavaScript 的優點和局限性 ## 優點 1. 使用 JavaScript 可以在客戶端進行數據驗證，節省服務器端的資源。 2. 可以方便地操縱各種頁面中的對象，使網頁更加友好。 3. 使多種任務僅在客戶端就可以完成而不需要網絡和服務器的參與，從而支持分布式的運算和處理。 ## 局限 1. 兼容性。互聯網上有很多瀏覽器，如 FireFox，Internet Explorer、Opera 等，但各種瀏覽器支持 JavaScript 的程度是不一樣的 2. JavaScript 不能打開、讀寫和保存用戶計算機上的文件 # JavaScript 的引入方式 ## 行內式 > 直接將腳本嵌入到 HTML 標記的事件中 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>js使用方式1：行內js</title> </head> <body> <input type="button" value="點擊有驚喜" onclick="javascript:alert('哈哈哈哈')" />  </body> </html> ``` ## 嵌入式 > 使用`<script>`標記將腳本嵌入到網頁中 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>js使用方式2：內部js</title> <script type="text/javascript"> //聲明一個函數(整個文檔都可以使用) function surprise() { alert("恭喜你中了一百萬"); /*彈出框*/ } </script> </head> <body> <input type="button" value="點擊有驚喜" onclick="surprise()" /> <input type="button" value="點擊" onclick="surprise()" /> </body> </html> ``` ## 鏈接式 > 通過`<script>`標記的`src`屬性鏈接外部腳本文件 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>js使用方式3：外部js</title>  <script src="./helloworld.js" type="text/javascript" charset="utf-8" ></script> </head> <body> <input type="button" value="點擊" onclick="hello()" /> </body> </html> ``` ```javascript function hello() { alert("hello world!!!"); } ``` # JS 在頁面中的位置 > 我們可以將`JavaScript`代碼放在`html`文件中任何位置 > 但是我們一般放在網頁的`head`或者`body`部分。 ## 放在`<head>`部分最常用的方式是在頁面中 head 部分放置`<script>`元素，瀏覽器解析 head 部分就會執行這個代碼，然后才解析頁面的其余部分。 ## 放在`<body>`部分 JavaScript 代碼在網頁讀取到該語句的時候就會執行。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>js使用方式3：外部js</title> </head> <body> <input type="button" value="點擊" onclick="hello()" />  <script src="./helloworld.js" type="text/javascript" charset="utf-8" ></script> </body> </html> ``` > [danger] **_注意：位置的不同會影響到實現效果。_**