當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

详解JavaScript（ECMAScript与DOM）

發布時間：2024/1/18 javascript 34 豆豆

生活随笔收集整理的這篇文章主要介紹了详解JavaScript（ECMAScript与DOM）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

編譯軟件：IntelliJ IDEA 2019.2.4 x64
運行環境：Google瀏覽器

前言
一. 簡介
二. js的特性
三. js的Helloworld
四. js的引入方式
- 4.1 內部js的方式
- 4.2 外部js的方式
五. js的數據類型
- 5.1 基本數據類型
- 5.2 引用數據類型
- 5.2.1 對象
- 5.2.1 數組
六. 變量的聲明
- 6.1 聲明方式一
- 6.2 聲明方式二
七. 函數
- 7.1 內置函數
- 7.2 自定義函數
- - 7.2.1 有名函數
  - 7.2.2 匿名函數
- 7.3函數的調用
八. 對象
- 8.1通過new關鍵字創建對象
- 8.2 通過{}創建對象
九.數組
- 9.1數組的創建方式
- 9.2 數組的基本操作
十. JSON
- 10.1 創建JSON對象
- 10.2 創建JSON數組
十一. DOM操作
- 11.1 DOM的概念
- 11.2 DOM樹
- 11.3 各個組成部分的類型
- 11.4 查詢
- 11.5 操作標簽體的內容(雙標簽)
- 11.6 操作屬性（單標簽和雙標簽都可以）
- 11.7 dom操作之新建和刪除
十二.事件綁定
- 12.1 事件的概念
- 12.2 事件的綁定方式
- 12.3 事件的類型
- 12.4 綜合案例：動態表格

前言

前端大佬都在用的js，號稱前端三大件的“JS" , 你真的了解嗎?本文帶你一覽js之魅力,十分鐘就可以讓你快速上手JS。

一. 簡介

JavaScript（簡稱 JS）是一種廣泛用于客戶端和服務器端 Web 開發的編程語言。它是一種動態類型、解釋型語言，最初由網景公司（Netscape）開發，后來由 Ecma 國際組織標準化。JavaScript 的語法靈活，易于學習和使用，可以用于開發各種類型的 Web 應用程序，包括動態網頁、單頁應用程序、桌面應用程序、游戲、移動應用程序等。

JavaScript總共分成三部分: ECMAScript(基本語法)、BOM(瀏覽器對象模型)、DOM(文檔對象模型)

二. js的特性

腳本語言，它運行在客戶端

JavaScript是一種解釋型的腳本語言。不同于C、C++、Java等語言先編譯后執行, JavaScript不會產生編譯出來的字節碼文件，而是在程序的運行過程中對源文件逐行進行解釋。

基于對象

JavaScript是一種基于對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。但是它并沒有面向對象的三大特性。

弱類型

JavaScript中雖然也有明確的數據類型，但是聲明一個變量后它可以接收任何類型的數據，并且會在程序執行過程中根據上下文自動轉換類型。

事件驅動

JavaScript是一種采用事件驅動的腳本語言，它不需要經過Web服務器就可以對用戶的輸入做出響應。

跨平臺

JavaScript腳本語言依賴于瀏覽器的支持，只要有瀏覽器，JavaScript腳本語言可以在任意平臺運行

三. js的Helloworld

需求: 在網頁上創建一個按鈕，當用戶單擊這個按鈕的時候，給出一個警示框

代碼演示如下：

HTML代碼

js代碼

位置: head標簽內

四. js的引入方式

4.1 內部js的方式

注意：

script標簽可以在html代碼的任意位置
JavaScript代碼要寫在script標簽內
為了方便查詢或操作HTML標簽（元素），script標簽可以寫在body標簽后面

代碼解釋：

4.2 外部js的方式

步驟：

新建一個js文件（后綴名為.js的文件），將js代碼寫在js文件內，在html文件內引入js即可

注意：

引用外部JavaScript文件的script標簽里面不能寫JavaScript代碼

先引入，再使用

script標簽不能寫成單標簽

代碼演示如下：

window.onload=function () {var btn02=document.getElementById("btn02");btn02.onclick=function () {alert("你點到我了...");} } <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/js1.js"></script></head> <body><input type="button" value="點我" id="btn02"/> </body> </html>

注意：

如果此時script標簽已經引入一個js 文件，那么該標簽內的js代碼將會失效，但是這個html文件可以引入多個script標簽

代碼演示如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/js1.js">alert(100);</script><script>alert(200);</script></head> <body><input type="button" value="點我" id="btn02"/> </body> </html>

五. js的數據類型

5.1 基本數據類型

數值型: number

JavaScript不區分整數、小數，例如10 29 1.5 1.34 …

字符串: String

JavaScript不區分字符、字符串，單引號與雙引號意思一樣。 例如 “10” “abc” ‘你好’ …

布爾型: boolean

在JavaScript中，其他類型和布爾類型都可以進行自動轉換

true：非零的數值，非空字符串，非空對象

false：零，空字符串，null，undefined

注意：

在js中的if() 里，其他數據類型都可以和布爾型自動轉化
空串/o/undefined/null/NaN都是false，其他都是true

特殊的值：undefined/null/NaN

5.2 引用數據類型

5.2.1 對象

所有new出來的對象
用{}聲明的對象

5.2.1 數組

用[]聲明的數組

六. 變量的聲明

關鍵字：var,其實ECMAScript6之后建議使用let
數據類型：JavaScript變量是弱類型的，可以接收任意類型的數據
標識符：嚴格區分大小寫
變量使用規則
- 如果使用了一個沒有聲明的變量，那么會在運行時報錯
  
  Uncaught ReferenceError: b is not defined
- 如果聲明一個變量沒有初始化，那么這個變量的值就是undefined

6.1 聲明方式一

語法：

var 變量名；
變量名=值；

代碼演示如下：

var value;value="123";//console.log() 用于控制臺輸出console.log(value) ;//typeof 用于確定給定變量的數據類型并返回console.log(typeof value) ;

6.2 聲明方式二

語法：

var 變量名=值；

代碼演示如下：

var value="123";//console.log() 用于控制臺輸出console.log(value) ;//typeof 用于確定給定變量的數據類型并返回console.log(typeof value) ;

七. 函數

7.1 內置函數

警示框

alert("警示內容");

確認框，有返回值；確認是true，取消是false

confirm("提示內容")；

控制臺打印日志

console.log("輸出內容");

tips：

如何打開控制臺并查看輸出的內容？
打開任意瀏覽器，將光標置于你要查看的頁面上，按“F12"打開開發者工具，在console那一欄就是

7.2 自定義函數

7.2.1 有名函數

位置：

script標簽下

語法：

function方法名（形參列表）{代碼塊}

①無參無返回值

function fun01(){console.log("這是fun01函數"); }

②有參無返回值

function fun02(a,b,c,d){console.1og("這是fun02函數"+a+b+c+d) }

③有參有返回值

function fun03(a,b,c,d){console.log("這是fun02函數"+a+b+c+d);return值；}

7.2.2 匿名函數

語法：

function(形參列表) {代碼塊}

應用場景：

a.在事件綁定位置

btn01.οnclick=function (){}

b.可以將函數看作是一個對象

var fun03=function(console.1og("這是fun03函數") }

7.3函數的調用

語法：

var 變量名=函數名（實參列表）

代碼演示如下：

//聲明并創建函數f1，返回結果function f1() {return 23*12;}//定義變量result接收函數f1的返回值var result=f1();

注意：

實參少于形參，多出來的形參是未定義
實參多于形參，多出來的實參接收不到

八. 對象

JavaScript中沒有『類』的概念，對于系統內置的對象可以直接創建使用

8.1通過new關鍵字創建對象

①聲明創建對象

var obj01=new object();

②屬性與屬性值的設置

注意：

屬性和屬性值可以自由設置，你想設什么屬性就設，想填什么屬性值就填

代碼演示如下：

obj01.id=101; obj01.name="張三"； obj01.abc="北京"；

或者這樣設置屬性值

代碼演示如下

//設置屬性值 obj01.stuName = "tom"; obj01.stuAge = 20; obj01.stuSubject = "java";

③ 屬性值的獲取

代碼演示如下：

console.log(obj01.id) console.logtobj01.name) console.log(obj01.abc) console.log(obj01.age)

④ 對象中函數的設置

代碼演示如下：

//對象obj01創建一個方法eat() obj01.eat=function (){alert(this.name+"eat"); }

小tips：

this關鍵字只有兩種情況：

在函數外面：this關鍵字指向window對象（代表當前瀏覽器窗口）
在函數里面：this關鍵字指向調用函數的對象

⑤函數的調用

代碼演示如下：

obj01.eat();

8.2 通過{}創建對象

代碼演示如下：

//聲明創建對象 var obj02={ 1d:102, name:"李四"， age:18, //創建函數eat eat:function () alert("eat"); }, //創建函數run run:function () alert("run"); }

ps：使用方式和8.1節一致，這里暫不贅述

九.數組

9.1數組的創建方式

①通過new關鍵字創建數組

代碼演示如下：

//創建數組arrs var arrs=new Array();

ps：

不必擔心數組的長度限制問題，以及數組的數據類型問題，你往數組里加多少元素，它的長度就有多少個且它可以存放任意類型的元素，不局限單一元素類型

②通過[]創建數組(常用）

代碼演示如下：

//創建數組arrs并同時添加元素 var arrs=[10,"java",12.5,true];

9.2 數組的基本操作

①添加數據

代碼演示如下：

arrs[0]=10; arrs[1]="java"; //壓入數據 arrs.push(12); arrs.push("mysq1");

②取值

//打印數組arrs[0]的值 console.log(arrs[0]);

③獲取數組長度

//獲取數組arrs的長度 arrs.length;

④遍歷數組

代碼演示如下：

for(var i=0;i<arrs.length;i++){console.log(arrs[i]); }

⑤數組的反轉

語法：

數組名.reverse();

其返回值是一個數組

代碼演示如下：

console.log("arrs反轉如下：")var reverse = arrs.reverse();console.log(reverse);

⑥數組元素的拼接

語法：

arrs.join(分割符);

代碼演示如下：

console.log(arrs)//以"-"作為拼接符拼接數組arrs的所有元素并返回string類型的結果var s = arrs.join("-");console.log(s);

⑦數組元素的刪除

語法：

//在數組arrs中從位序為start的位置開始刪，刪count個元素，并返回刪去元素后的數組 arrs.splice(start,count);

代碼演示如下：

//打印數組arrs的信息console.log(arrs)//在數組arrs中從位序為1開始，刪除2個元素（自1開始且包含1）并返回一個數組var splice = arrs.splice(1,2);//打印返回結果，返回結果是個數組console.log(splice);

十. JSON

用途：

跨平臺數據傳輸

JSON的格式：

JSON數據兩端要么是{}，要么是[]
{}定義JSON對象
[] 定義JSON數組

10.1 創建JSON對象

語法：

{key:value,key:value,...,key:value}

①創建簡單json對象

代碼演示如下：

//創建簡單的json對象 var jsone1={ id:103, name:"王五"， age:18, address:"北京" } console.log(json01.id) console.log(json01.name) console.log(json01.age) console.log(jsone1.address)

②創建稍微復雜的json對象

代碼演示如下：

//創建稍微復雜的json對象var json2 = {id: 103,name: "王五",age: 18,address: "北京",computer: {id: 501,brand: "聯想",price: 5000}};console.log(json2.name);console.log(json2.computer.id);console.log(json2.computer.brand);console.log(json2.computer.price);}

10.2 創建JSON數組

語法：

[value,value,...,value]

①創建json數組

代碼演示如下：

var json3=[1,"hsj",45.78,true]; for (var i = 0; i < json3.length ; i++) {console.log(json3[i]) }

②創建稍微復雜的json數組

代碼演示如下：

③創建復雜的json數組（對象數組）

代碼演示如下：

json對象如何轉成json字符串（符合json格式的字符串)?

代碼演示如下：

//定義json對象 var jsonObj = {"stuName":"tom","stuAge":20}; //將其轉換為json字符串jsonStr var jsonStr = JSON.stringify(jsonObj);console.log(typeof jsonObj); // object console.log(typeof jsonStr); // string

json字符串如何轉換成json對象？

代碼演示如下：

//將剛才的json字符串jsonStr轉換為json對象parse var parse = JSON.parse(jsonStr); console.log(parse);

十一. DOM操作

11.1 DOM的概念

DOM編程思想指的是通過操作文檔對象模型（DOM）來動態地改變HTML文檔的內容、結構和樣式的編程方法。DOM是一種和平臺和語言無關的API，用于訪問和操作HTML和XML文檔的內容和結構。

DOM編程思想的核心是將HTML文檔視為一個對象樹(DOM樹），通過JavaScript代碼來操作這個對象樹實現對文檔的動態改變。

11.2 DOM樹

簡述：

瀏覽器把HTML文檔從服務器上下載下來之后就開始按照從上到下的順序讀取HTML標簽。每一個標簽都會被封裝成一個對象。

而第一個讀取到的肯定是根標簽html，然后是它的子標簽head，再然后是head標簽里的子標簽……所以從html標簽開始，整個文檔中的所有標簽都會根據它們之間的父子關系被放到一個樹形結構的對象中。

以上的對象中包含了所有標簽對象的整個樹形結構，該對象就是JavaScript中的一個可以直接使用的內置對象document

例如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function f() {var arrs=new Array();arrs[0]=10;arrs[1]="java";//壓入數據arrs.push(12);arrs.push("mysq1");console.log(arrs)var splice = arrs.splice(1,2);console.log(splice);}</script> </head> <body><p>天空之花</p> <input type="button" value="點我" onclick="f()"></body> </html>

以上的HTML標簽會被解析如下所示：

11.3 各個組成部分的類型

整個文檔中的一切都可以看做Node。各個具體組成部分的具體類型可以看做Node類型的子類。

其實嚴格來說，JavaScript并不支持真正意義上的繼承，這里借用Java中的繼承概念，從邏輯上來幫助我們理解各個類型之間的關系。

組成部分節點類型具體類型

整個文檔	文檔節點	Document
HTML標簽	元素節點	Element
HTML標簽內的文本	文本節點	Text
HTML標簽內的屬性	屬性節點	Attr
注釋	注釋節點	Comment

11.4 查詢

①在整個文檔范圍內查詢元素節點

功能API返回值

根據id值查詢	document.getElementById(“id值”)	一個具體的元素節
根據標簽名查詢	document.getElementsByTagName(“標簽名”)	元素節點數組
根據name屬性值查詢	document.getElementsByName(“name值”)	元素節點數組
根據類名查詢	document.getElementsByClassName(“類名”)	元素節點數組

從文檔中找id屬性值為username的元素（標簽）

代碼演示如下：

document.getElementById("username");

從文檔中查找標簽名為input的元素節點數組

代碼演示如下：

document.getElementsByTagName("input");

從文檔中查找name屬性值為aaa的元素節點數組

document.getElementsByName("aaa");

從文檔中查詢相應類名的元素節點數組（一般前端人員主要使用）

代碼演示如下：

document.getElementsByclassName()；

②在具體元素節點范圍內查找子節點

功能API返回值

查找子標簽	element.children	返回子標簽數組
查找第一個子標簽	element.firstElementChild	標簽對象
查找最后一個子標簽	element.lastElementChild	節點對象

③查找指定元素節點的父節點

功能API返回值

查找指定元素節點的父標簽

element.parentElement

標簽對象

④查找指定元素節點的兄弟節點

功能API返回值

查找前一個兄弟標簽	node.previousElementSibling	標簽對象
查找后一個兄弟標簽	node.nextElementSibling	標簽對象

⑤查詢案例

部分代碼演示如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="div1"><input type="text" id="username" name="aa"><br><input type="text" id="password" name="aa"><br><input type="text" id="email" name="aa"><br><input type="text" id="address" name="d"><br></div><input type="button" value="提交" id="btn1"/><input type="button" value="重置" id="btn2"/><script>//btn2 已經加載了var e = document.getElementById("btn2");console.log(e);//使用 DOMContentLoaded 事件來等待 DOM 加載完成后再執行代碼。在事件處理程序中，你可以訪問 DOM 元素并執行任何必要的操作。document.addEventListener("DOMContentLoaded",function() {//通過 document.getElementById() 方法獲取頁面上具有指定 ID 的元素，并將它存儲在 btn2 變量中。let btn2 = document.getElementById("btn2");/*這段代碼首先檢查 ID 為 “btn2” 的按鈕是否存在，然后再設置它的 onclick 屬性。如果按鈕存在，它將設置 onclick 屬性為一個函數，該函數將在單擊按鈕時執行。*/if (btn2) {btn2.onclick = function () {var div1 = document.getElementById("div1");var children = div1.children;console.log(children.length);//如果要查找div標簽中前兩個元素for (var i = 0; i < 2; i++) {console.log(children[i]);}//獲取第一個子標簽console.log(div1.firstElementChild);//獲取最后一個子標簽console.log(div1.lastElementChild);}}});</script></body> </html>

11.5 操作標簽體的內容(雙標簽)

①獲取內容

element.innerText 獲得純文本 element.innerHTML 獲得純文本+html標簽

②賦值

element,innerText="純文本" element.innerHTML="文本中的標簽可以被識別"

11.6 操作屬性（單標簽和雙標簽都可以）

①取屬性值

element.屬性名

②賦屬性值

element.屬性名=值

11.7 dom操作之新建和刪除

API功能

document.createElement(“標簽名”)	創建元素節點并返回，但不會自動添加到文檔中
document.createTextNode(“文本值”)	創建文本節點并返回，但不會自動添加到文檔中
element.appendChild(ele)	將ele添加到element所有子節點后面
parentEle.insertBefore(newEle,targetEle)	將newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新節點替換原有的舊子節點
element.remove()	刪除某個標簽

增刪案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <ul id="ul1"><li>武漢</li><li id="sh">上海</li><li>深圳</li><li id="gz">廣州</li> </ul><input type="button" value="添加城市" id="citys"> <script>document.getElementById("citys").onclick=function () {//1.創建新城市紐約，把它放到ul標簽中的末尾var li = document.createElement("li");//創建元素li.innerText="紐約";/*var text=document.createTextNode("紐約")；//創建文本節點li.appendchild(text);*///追加至末尾var ul1 = document.getElementById("ul1");ul1.appendChild(li);//把紐約放到上海前面/*var sh = document.getElementById("sh");ul1.insertBefore(li,sh);*///用紐約將廣州替換var gz = document.getElementById("gz");ul1.replaceChild(li,gz);//刪除urlul1.remove();}</script></body> </html>

十二.事件綁定

12.1 事件的概念

HTML 事件是發生在 HTML 元素上的“事情”，是瀏覽器或用戶做的某些事情
事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行。

12.2 事件的綁定方式

①動態綁定

代碼演示如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="點我" id="btn01"/><script>document.getElementById("btn01").onclick=function (ev) {var flag=confirm("確認刪除嗎?");if (flag){alert("已成功刪除")}else {alert("未成功刪除")}console.log(flag)}</script></body> </html>

在js代碼內獲得需要綁定的元素對象

var btne1=document.getElementById("btne1");

為該元素綁定事件類型

btne1.οnclick=function 函數名() {代碼體 }

②靜態綁定

代碼演示如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function fun01(a,b) {alert("調用到fun01函數"+a+"\t"+b)}</script></head> <body><input type="button" value="按鈕" onclick="fun01(10,'java')" ></body> </html>

在需要添加事件的元素上，設置屬性

準備一個有名函數

function fun1(a,b){alert("調用到fun01函數"+a+b); }

12.3 事件的類型

onclick ：單擊事件

ondblclick： 雙擊事件

tips：

event：事件對象
event.target 事件作用在的那個元素對象上

附注：常見事件（了解）

屬性此事件發生在何時…

onclick	當用戶點擊某個對象時調用的事件句柄。
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onchange	域的內容被改變。
onblur	元素失去焦點。
onfocus	元素獲得焦點。
onload	一張頁面或一幅圖像完成加載。
onsubmit	確認按鈕被點擊；表單被提交。
onkeydown	某個鍵盤按鍵被按下。
onkeyup	某個鍵盤按鍵被松開。
onmousedown	鼠標按鈕被按下。
onmouseup	鼠標按鍵被松開。
onmouseout	鼠標從某元素移開。
omouseover	鼠標移到某元素之上。
onmousemove	鼠標被移動。

12.4 綜合案例：動態表格

案例需求：

① 創建一個table，初始化用戶的一些信息(編號、姓名、性別等)

② 創建一個表單，用戶輸入用戶的信息

③ 表單中創建添加按鈕，點擊添加按鈕，輸入的用戶信息追加到表格內

④ 每條用戶信息后都有一個刪除的超鏈接，點擊刪除，刪除當前用戶信息

案例圖解如下：

代碼演示如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>動態表格</title><script>//刪除用戶function f() {var elementById = document.getElementById(event.target.id);var parentElement = elementById.parentElement.parentElement;parentElement.remove();}//添加用戶function f1() {//1.新建一行外加四個單元格var tr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");//2.新建三個文本框var text01 = document.getElementById("text01");var text02 = document.getElementById("text02");var text03 = document.getElementById("text03");//3.用戶會寫內容到文本框中，我們將文本框中的內容寫到td中，然后tr追加tdtd1.innerText=text01.valuetr.appendChild(td1)td2.innerText=text02.valuetr.appendChild(td2)td3.innerText=text03.valuetr.appendChild(td3)td4.innerHTML="<input type='button' value='刪除' id='btn' οnclick='f()'/>"tr.appendChild(td4)//5.將tr添加至table1表中document.getElementById("table1").appendChild(tr);//每次輸入用戶信息，文本框就自動清空·text01.value=" ";text02.value=" ";text03.value=" ";}</script> </head> <body><table border="1" cellspacing="0px" width="250px" align="center" id="table1"><tr><th>序號</th><th>用戶</th><th>性別</th><th>操作</th></tr><tr id="table1_tr1"><td>1</td><td>張三</td><td>男</td><td><input type="button" value="刪除" id="btn01" onclick="f()"></td></tr><tr id="table1_tr2"><td>2</td><td>李四</td><td>女</td><td><input type="button" value="刪除" id="btn02" onclick="f()"></td></tr><tr id="table1_tr3"><td>3</td><td>王五</td><td>不詳</td><td><input type="button" value="刪除" id="btn03" onclick="f()"></td></tr> </table><table border="0" cellspacing="0px" width="250px" align="center" id="table2"><tr><td>序號</td><td colspan="3"><input type="text" id="text01"> </td></tr><tr><td>姓名</td><td colspan="3"><input type="text" id="text02"></td></tr><tr><td>性別</td><td colspan="3"><input type="text" id="text03"></td></tr><tr><td colspan="4" align="center"><input type="button" value="添加用戶" id="btn04" onclick="f1()"></td></tr> </table></body> </html>

總結

以上是生活随笔為你收集整理的详解JavaScript（ECMAScript与DOM）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： SCRUM项目中的产品分解图和Sprin
下一篇：＜Halcon＞分割粘连区域（分水岭算法

javascript

详解JavaScript（ECMAScript与DOM）

目錄

前言

一. 簡介

二. js的特性

三. js的Helloworld

四. js的引入方式

4.1 內部js的方式

4.2 外部js的方式

五. js的數據類型

5.1 基本數據類型

5.2 引用數據類型

5.2.1 對象

5.2.1 數組

六. 變量的聲明

6.1 聲明方式一

6.2 聲明方式二

七. 函數

7.1 內置函數

7.2 自定義函數

7.2.1 有名函數

7.2.2 匿名函數

7.3函數的調用

八. 對象

8.1通過new關鍵字創建對象

8.2 通過{}創建對象

九.數組

9.1數組的創建方式

9.2 數組的基本操作

十. JSON

10.1 創建JSON對象

10.2 創建JSON數組

十一. DOM操作

11.1 DOM的概念

11.2 DOM樹

11.3 各個組成部分的類型

11.4 查詢

11.5 操作標簽體的內容(雙標簽)

11.6 操作屬性（單標簽和雙標簽都可以）

11.7 dom操作之新建和刪除

十二.事件綁定

12.1 事件的概念

12.2 事件的綁定方式

12.3 事件的類型

12.4 綜合案例：動態表格

總結