文章目錄

• JavaScript 簡介
• JavaScript 發展史
• ECMAScript
• • 基本語法
  • • 與 HTML 結合方式
    • 數據類型
  • 類型轉換
  • • 非 number 轉成 number
    • 非 boolean 轉成 boolean
  • 特殊語法
  • 變量
  • 運算符
  • • 雙等號（==）
    • 全等號（===）
  • 流程控制語句
  • • switch...case
    • while
    • for 循環
  • 對象
  • • Function
    • • 創建函數
      • JS 函數奇葩的特點
    • Array
    • • 創建數組
      • 特點
    • RegExp
    • • 創建正則對象
    • Global
• DOM
• • 核心 DOM
  • • Document 文檔對象
    • Element 元素對象
    • Text 文本對象
    • Node 節點對象
    • • Node 節點共有的方法
    • 事件
    • • 事件的概念
      • 關于事件對象的概念
      • 常用的事件
      • 綁定事件（注冊事件處理程序）
  • HTML DOM
• BOM
• • Navigator
  • Window 窗口對象
  • Screen
  • History
  • Location

JavaScript 簡介

JavaScript 是一門客戶端腳本語言，運行在客戶端瀏覽器中的。每一個瀏覽器都有 JavaScript 的解析引擎
注：腳本語言不需要編譯，直接就可以被瀏覽器解析執行了。

JavaScript 可以用來增強用戶和 html 頁面的交互過程，可以來控制 html 元素，讓頁面有一些動態的效果，增強用戶的體驗。

JavaScript 發展史

1.1992年， Nombase公司，開發出第一門客戶端腳本語言，專門用于表單的校驗。命名為：C-- ， 后來更名為：ScriptEase
2.1995年，Netscape(網景)公司，也開發了一門客戶端腳本語言： LiveScript。后來，請來SUN公司的專家，修改LiveScript，命名為JavaScript
3.1996年， 微軟抄襲JavaScript開發出JScript語言
4.1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準： ECMAScript，就是統一了所有客戶端腳本語言的編碼方式。

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

ECMAScript

基本語法

與 HTML 結合方式

1.內部 JS
定義 <script> 標簽，標簽體內容就是 JS 代碼

2.外部 JS
定義 <script> 標簽，通過 src 屬性引入外部的 JS 文件

注意：
1.<script> 標簽可以定義在 HTML 頁面的任意地方，但是定義的位置會影響執行的順序。
2.<script> 標簽可以定義多個

數據類型

1.基本數據類型
也叫原始數據類型。

1.1.number 數字
整數、小數、NaN

NaN，not a number，一個不是數字的數字類型。
NaN 和任何數運算得到的還是 NaN。

1.2.string 字符串
單引號和雙引號都可以，“abc”，“a”，‘a’

1.3.boolean
true or false

1.4.null
一個對象為空的占位符

1.5.undefined 未定義
如果一個變量沒有給初始化值，則被默認賦值為 undefined

2.引用數據類型
對象

類型轉換

非 number 轉成 number

正號與負號會自動類型轉換，即將非 number 的字面值自動轉換成 number 類型的數值。

1.string ? number
按字面值轉換，如果字面值不是數字，則轉成 NaN。
例如：

var a = +"123"; // 正號（+）會讓后面的字符串“123”自動轉換成number類型，因為“123”的字面量是數字，所以會得到數字類型的值123var b = +"abc"; // 字符串“abc”不是數字，所以會轉成 NaN

2.boolean ? number
true 轉成 1，false 轉成 0。

var f1 = +true; // 1 var f2 = +false; // 0

非 boolean 轉成 boolean

1.number ? boolean
number：0或NaN轉成false，其它轉成true。

例如：

var num = 2; document.write(!num); // 數字2轉成true，那么!true就是false

2.string ? boolean
空字符串轉成 false，其它非空字符串轉成 true。

3.null 和 undefined
轉成 false

4.對象 ? boolean
所有對象都是 true。

特殊語法

1.語句以 ; 結尾，如果一行只有一條語句則 ; 可以省略(不建議)

2.變量的定義使用 var 關鍵字，也可以不使用
用：定義的變量是 局部變量
不用：定義的變量是全局變量(不建議)

變量

變量：一小塊存儲數據的內存空間

Java語言是強類型語言，而JavaScript是弱類型語言。

強類型：在開辟變量存儲空間時，定義了空間將來存儲的數據的數據類型。只能存儲固定類型的數據。

弱類型：在開辟變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。

語法：

var 變量名 = 初始化值;

運算符

雙等號（==）

字符串的比較，是按字符的 askii 碼，按位逐一比較，直到得出大小為止。

全等號（===）

全等號（===）在比較之前會先判斷類型，如果類型不同直接返回 false。

document.write("123" == 123); // 字符串“123”先轉換成number類型的123，結果返回true document.write("123" === 123); // 全等號要求類型和數值都相同才會返回true，而這里類型不同則返回false

流程控制語句

switch…case

switch(被檢測量){ case 常量1: 語句1; break; case 常量2: 語句2; break; ... deault: 語句N; break; }

1.在 Java 中，被檢測量允許的數據類型：byte、short、int、char、枚舉(1.5)、String(1.7)

2.在 JS 中，被檢測量允許任何的原始數據類型。

while

var sum = 0; var num = 1; while (num <= 100) {sum += num;num++; }

for 循環

var sum = 0; for (var i = 1; i <= 100; i++) {sum += i; } alert(sum);

對象

Function

JS 中的函數，其實就是一個對象，稱為函數對象，用來描述函數的對象。

創建函數

創建方式一（構造器）：

var 變量名稱（即函數名稱） = new Function(參數列表,方法體);

例如：

// 創建函數對象 var fun1 = new Function("a","b","alert(a);"); // 調用函數 fun1(3,4);

創建方式二（聲明定義）：

function 函數名稱(參數列表) {方法體 }

例如：

// 定義函數 function fun2(a,b) {alert(a + b); } // 調用函數 fun2(3,4);

創建方式三（匿名函數）：

var 變量名稱（即函數名稱） = function(形式參數列表) {方法體 }

例如：

// 定義函數 var fun1 = function (a, b) {alert(a + b); }; // 調用函數 fun1(3, 4);

JS 函數奇葩的特點

1.JS 函數的聲明定義，不需要聲明參數的數據類型，也不需要聲明返回值類型

2.無論哪種方式創建的函數，其實都是在創建函數對象

3.聲明定義函數時，允許函數名和參數列表完全相同，JS會覆蓋前面的函數，使用最新定義的函數

4.JS函數的調用其實和函數的參數無關，只和函數名稱有關。函數聲明了參數，在實際調用時，你可以不傳任何參數，傳參時實參的個數可以少于形參的個數，也可以多于形參的個數

例如：

// 聲明定義函數 fun1 var fun1 = function (a, b) {alert(a + b); }// 聲明定義相同名稱的函數 var fun1 = function (a, b) {alert(a - b); } // 調用函數 fun1 fun1(3, 4); // 結果是 -1

5.JS 函數中有一個內置的隱藏對象，是一個名稱為 arguments 的數組，封裝了所有的實參，作用類似 Java 中的可變參數

例如：

/*** 聲明定義一個可以計算任意個整數的總和的函數*/ function fun2() {var sum = 0;for (let i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum; }// 調用函數 var sum = fun2(1, 3, 4); alert(sum);

Array

數組對象

創建數組

創建方式一：

var arr = new Array(元素列表);

創建方式二：

var arr = new Array(默認長度);

創建方式三：

var arr = [元素列表];

示例代碼：

var array = new Array(1,2,3); var array1 = new Array(5); var array2 = [1,2,3];

特點

1.數組元素可以任意數據類型，且數組元素的數據類型可以不一致

var array3 = [1, "abc", true, undefined];

2.數組長度可變

RegExp

創建正則對象

創建方式一：

var reg = new RegExp("正則表達式");

創建方式二：

var reg = /正則表達式/;

示例代碼：

// 匹配6個到12個的單詞字符，并且匹配整個字符串 // 創建正則表達式對象方式一 var reg1 = new RegExp("^\\w{6,12}$"); // 創建正則表達式對象方式二 var reg2 = /^\w{6,12}$/; var userName = "liaowenng"; var flag = reg2.test(userName); document.write(flag); // true

正則表達式可以添加修飾符，例如：

var reg = /[0-9]+/g;

g 表示全字符串掃描；i 表示不區分大小寫。

Global

全局函數：
1.decodeURI()
解碼 URI。

2.decodeURIComponent()
解碼 URI 組件。

3.encodeURI()
對 URI 進行編碼。

4.encodeURIComponent()
對 URI 組件進行編碼。

5.escape()
在 1.5 版中已棄用。請使用 encodeURI() 或 encodeURIComponent() 代替。

6.eval()
評估字符串并像腳本代碼一樣執行它。

7.isFinite()
確定值是否是有限的合法數。

8.isNaN()
確定值是否是非法數字。

9.Number()
將對象的值轉換為數字。

10.parseFloat()
解析字符串并返回浮點數。

11.parseInt()
解析字符串并返回整數。

12.String()
將對象的值轉換為字符串。

點擊查看詳情。

DOM

DOM 是 Document Object Model 的首字母縮寫，譯為文檔對象模型。將標記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對標記語言文檔進行 CRUD 的動態操作，即控制 HTML 文檔的內容。

如下代碼所示，獲取一個元素對象，然后設置元素的內容：

// 獲取元素對象 var element = document.getElementById("ID值"); // 設置元素對象的屬性值 element.innerHTML = "Hello World!";

W3C DOM 標準被分為3個不同的部分：

1.核心 DOM，針對任何結構化文檔的標準模型

Document：文檔對象
Element：元素對象
Attribute：屬性對象
Text：文本對象
Comment：注釋對象
Node：節點對象，其他5個的父對象

2.XML DOM，針對XML文檔的標準模型

3.HTML DOM，針對HTML 文檔的標準模型

核心 DOM

Document 文檔對象

Document 對象是 DOM 對象，也是節點對象，叫文檔節點對象。不是元素對象。

獲取文檔對象：

window.document document

獲取元素對象：
document.getElementById()：根據 id 屬性值獲取元素對象
document.getElementByTagName()：根據元素名稱獲取元素對象，返回值是一個數組
document.getElementByClassName()：根據 Class 屬性值獲取元素對象，返回值是一個數組
document.getElementByName()：根據 name 屬性值獲取元素對象，返回值是一個數組

創建其它 DOM 對象：
createAttribute(name)
createComment()
createElement()
createTextNode()

Element 元素對象

在 HTML DOM 中，Element 對象表示 HTML 元素。

Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。

元素也可以擁有屬性。屬性是屬性節點。

Text 文本對象

創建文本節點對象：

document.createTextNode();

Node 節點對象

所有 DOM 對象都可以認為是一個節點。Node 相當于是 Element 的父類。所以 Node 定義的方法 Element 對象都可以使用。

在 HTML DOM （文檔對象模型）中，每個部分都是節點：

1.文檔本身是文檔節點
2.所有 HTML 元素是元素節點
3.所有 HTML 屬性是屬性節點
4.HTML 元素內的文本是文本節點
5.注釋是注釋節點

Node 節點共有的方法

增刪改查 DOM 樹：
appendChild()：向節點的子節點列表的結尾添加新的子節點
removeChild()：刪除并返回當前節點的指定子節點
replaceChild()：用新節點替換一個子節點

事件

某些組件被執行了某些操作后，觸發某些代碼的執行。

事件：某些操作，例如，單擊、雙擊、鍵盤按下、鼠標移動等

事件源：發生事件的組件，例如，按鈕、文本輸入框等

監聽器：事件處理程序，例如，一個函數、一段代碼等

注冊監聽器：將事件源、事件、監聽器綁定在一起。當某個事件源發生了某個事件，則會觸發執行對應的監聽器。

點擊查看更多關于事件的內容。
點擊查看更多關于事件的內容。

事件的概念

HTML 事件是發生在 HTML 元素上的“事情”。HTML 事件可以是瀏覽器或用戶做的某些事情。

HTML DOM 事件允許 JavaScript 在 HTML 文檔中的元素上注冊不同的事件處理程序。

通過 JavaScript 代碼，HTML 允許您向 HTML 元素添加事件處理程序。

JavaScript 允許在事件被偵測到時執行代碼。

當在 HTML 頁面中的元素發生事件時，JavaScript 能夠“應對”這些事件。

關于事件對象的概念

當 HTML 中發生事件時，該事件屬于某個事件對象，例如，鼠標單擊事件屬于 MouseEvent 對象。

所有事件對象均基于 Event 對象，并繼承其所有屬性和方法。也就是說 Event 所有事件對象的父對象。

特別強調下，這里說的 Event 對象，有點類似于 Java 中類的概念。鼠標單擊事件相當于一個具體的事件實例，屬于 MouseEvent 這個類，其實 MouseEvent 類有很多事件實例，例如：onmousedown、onmouseenter、onmouseleave 等，在 w3school 中稱之為事件類型。

區別在于，發生了某個事件，會產生事件所屬的事件對象，例如，發生了 click 事件，會產生 MouseEvent 對象，發生 mousedown 事件，也會產生 MouseEvent 對象，但是這兩種事件所產生的 MouseEvent 對象不是同一個，因為讀取事件對象的屬性 type 獲得的值不同。說明發生了 click 事件，會產生一個屬于 MouseEvent 類型的對象，這個對象就是 MouseEvent 的實例，按理應該叫 click 事件對象，只是屬于 MouseEvent 類型而已。

常用的事件

1.點擊事件
1.1.onclick 單擊事件
1.2.ondblclick 雙擊事件

2.焦點事件
2.1.onblur 失去焦點事件。一般用于表單校驗
2.2.onfocus 獲得焦點事件

3.加載事件
3.1.onload 在對象已加載時，發生此事件

頁面加載完后，再執行 JS 代碼。

例如，頁面全部加載完后，再給元素注冊事件監聽器：

// 頁面加載完之后，再給元素注冊事件監聽器 window.onload = function () {var div1 = document.getElementById("div1");// 注冊事件監聽器div1.onclick = function () {// 設置元素的class屬性值div1.className = "d1";}; };

4.鼠標事件
4.1.mousedown 當用戶在元素上按下鼠標按鈕時，發生此事件。
4.2.mouseenter 當指針移動到元素上時，發生此事件。
4.3.mouseleave 當指針從元素上移出時，發生此事件。
4.4.mousemove 當指針在元素上方移動時，發生此事件。
4.5.mouseout 當用戶將鼠標指針移出元素時，發生此事件。
4.6.mouseover 當指針移動到元素時，發生此事件。
4.7.mouseup 當用戶在元素上釋放鼠標按鈕時，發生此事件。
4.8.mousewheel 不推薦使用。請改用 wheel 事件。

5.鍵盤事件
5.1.keydown 當用戶正在按下鍵時，發生此事件。
5.2.keypress 某個鍵盤按鍵被按下并松開，發生此事件
5.3.keyup 當用戶松開鍵時，發生此事件。

6.選中和改變
6.1.change 當form元素的內容、選擇的內容或選中的狀態發生改變時，發生此事件
6.2.select 用戶選擇文本后（對于<input>和<textarea>）發生此事件

7.表單事件
7.1.submit 提交按鈕被點擊時，發生此事件。在提交表單時發生此事件。

特別注意，事件源不是提交按鈕，而是表單元素 <from>。也就是說提交按鈕被點擊時，表單元素 <form> 發生了 submit 事件，所以應該是在表單元素上注冊提交事件監聽器。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script !src="">function checkForm() {// 返回true才會真正提交表單項的數據；返回false則不會提交return true;}</script> </head> <body> <!-- JS 引擎會將屬性 onsubmit的裝入到一個內部的函數體中： function () {return checkForm(); } 所以必須加上return，那么內部函數才能返回true或false。否則沒有返回值，則會提交表單。注意：onsubmit屬性沒有值或者值為true，會提交表單數據 --> <form action="https://www.baidu.com" onsubmit="return checkForm();">姓名：<input name="username" type="text">年齡：<input name="age" type="text"><input type="submit" value="提交"></form> </body> </html>

7.2.reset 重置按鈕被點擊，發生此事件。重置表單時發生此事件。

綁定事件（注冊事件處理程序）

方式一：
直接在 HTML 標簽上指定事件屬性，屬性值就是 JS 代碼。
缺點：HTML 標簽與事件屬性、JS 代碼耦合，不利于維護。

方式二：
通過 JS 獲取元素對象，再對元素對象中事件屬性賦值。
注意：JS 代碼的執行必須在 HTML 標簽加載后執行。所以 JS 代碼需要寫在 HTML 文檔的最后面比較穩妥。

演示代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>DOM的演示代碼</title> </head> <body> <img id="tx1" src="image/tx01.jpeg" alt="頭像"> <!-- 綁定事件方式一--> <img id="tx2" src="image/tx01.jpeg" alt="頭像" onclick="this.src = 'image/tx02.jpeg';"> <script>// 綁定事件方式二// 1.先定義函數function fun() {tx1.src = "image/tx02.jpeg";}// 2.獲取圖像元素對象var tx1 = document.getElementById("tx1");// 3.注冊點擊事件處理程序tx1.onclick = fun;// 只能指定函數對象</script> </body> </html>

HTML DOM

1.innerHTML 屬性。

例如，給 id 值為 div1 的 div 元素內部添加一個輸入框：

var div1 = document.getElementById("div1"); div1.onclick = function () {div1.innerHTML = "<input type='text'>"; };

2.樣式控制

2.1.使用元素對象的 style 屬性來控制樣式。

例如，將 id 值為 div1 的 div 元素的邊框設置為 2px solid red：

var div1 = document.getElementById("div1"); div1.onclick = function () {div1.style.border = "2px solid blue"; };

2.2.先通過類選擇器設置好樣式，然后通過元素對象的 className 屬性設置 class 屬性的值，從而達到元素樣式的控制。

例如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*先通過類選擇器設置好樣式*/.d1 {border: 1px solid red;width: 200px;height: 200px;}</style> </head> <body> <div id="div1">div </div> <script !src="">var div1 = document.getElementById("div1");div1.onclick = function () {// 設置元素的class屬性值div1.className = "d1";};</script> </body> </html>

BOM

BOM 是 Browse Object Model 的首字母縮寫，譯為瀏覽器對象模型。
將瀏覽器各個組件封裝成對象。

Navigator

瀏覽器對象。

Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。

雖然這個對象的名稱顯而易見的是 Netscape 的 Navigator 瀏覽器，但其他實現了 JavaScript 的瀏覽器也支持這個對象。

Navigator 對象的實例是唯一的，可以用 Window 對象的 navigator 屬性來引用它。

Window 窗口對象

特點：
1.Window 對象不需要創建可以直接使用 window 引用：window.方法名();。

2.對象名稱 window 可以省略，即 window 引用可以省略。

方法：
1.與彈出框有關的方法:
1.1.alert() 顯示帶有一段消息和一個確認按鈕的警告框。
1.2.confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
1.2.1.如果用戶點擊確定按鈕，則方法返回 true
1.2.2.如果用戶點擊取消按鈕，則方法返回 false
1.3.prompt() 顯示可提示用 戶輸入的對話框。
1.3.3.返回值：獲取用戶輸入的值

2.與打開關閉有關的方法：
2.1.close() 關閉瀏覽器窗口。
誰調用我，我關誰

2.2.open() 打開一個新的瀏覽器窗口
返回新的Window對象

3.與定時器有關的方法
3.1.setTimeout() 定時任務
在指定的毫秒數后調用函數或計算表達式。
返回值是一個唯一的 ID 值。

示例代碼：

// var t1 = setTimeout("fun();", 2000); var t2 = setTimeout(fun, 2000); function fun() {alert("boom~~"); }

3.2.clearTimeout() 取消任務
取消由 setTimeout() 方法設置的timeout。

示例代碼：

var t2 = setTimeout(fun, 2000); function fun() {alert("boom~~"); } // 取消定時任務 clearTimeout(t2);

4.4.setInterval() 周期任務
按照指定的周期(以毫秒計)來調用函數或計算表達式。
返回值是一個唯一的 ID 值。

4.5.clearInterval() 取消周期任務
取消由 setInterval() 設置的 timeout。

Screen

顯示器屏幕對象

History

歷史記錄對象

Location

地址欄對象。

1.獲取 Location 對象

1.1.window.location
1.2.location

2.方法
2.1.reload() 重新加載當前文檔

點擊查看詳情

總結

以上是生活随笔為你收集整理的JavaScript/JS的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。