1. 概念

?一門客戶端腳本語言

運行在客戶端瀏覽器中的，每一個瀏覽器都有JavaScript的解析引擎

腳本語言：不需要編譯盯拱，直接就可以被瀏覽器解析執(zhí)行了

2 功能

可以來增強用戶和html頁面的交互過程，可以控制html元素队寇，讓頁面有一些動態(tài)的效果究抓，增強用戶的體驗。

3. JavaScript發(fā)展史

1跪妥、1992年，Nombase公司声滥，開發(fā)出第一門客戶端腳本語言眉撵，專門用于表單的校驗。命名為 ： C-- 落塑，后來更名為：ScriptEase

2纽疟、1995年，Netscape(網(wǎng)景)公司憾赁，開發(fā)了一門客戶端腳本語言：LiveScript污朽。后來，請來SUN公司的專家龙考，修改LiveScript蟆肆，命名為JavaScript

3矾睦、1996年，微軟抄襲JavaScript開發(fā)出JScript語言

4炎功、1997年枚冗，ECMA(歐洲計算機制造商協(xié)會)，制定出客戶端腳本語言的標準：ECMAScript蛇损，就是統(tǒng)一了所有客戶端腳本語言的編碼方式赁温。

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

4. ECMAScript：客戶端腳本語言的標準

基本語法

1. 與html結(jié)合方式

????1）內(nèi)部JS：定義<script>，標簽體內(nèi)容就是js代碼

????2）外部JS：定義<script>淤齐，通過src屬性引入外部的js文件

注意：

????1）<script>可以定義在html頁面的任何地方股囊。但是定義的位置會影響執(zhí)行順序。

????2）<script>可以定義多個更啄。

2. 注釋

????1）單行注釋：//注釋內(nèi)容

????2）多行注釋：/*注釋內(nèi)容*/

3. 數(shù)據(jù)類型

????1）原始數(shù)據(jù)類型(基本數(shù)據(jù)類型)：

????????number：數(shù)字稚疹。 整數(shù)/小數(shù)/NaN(not a number 一個不是數(shù)字的數(shù)字類型)? ??

????????string：字符串。 字符串

????????boolean：true和false

????????null：一個對象為空的占位符

????????undefined：未定義祭务，如果一個變量沒有給初始化值贫堰，則會被默認賦值為undefined

????2）引用數(shù)據(jù)類型：對象

4. 變量

一小塊存儲數(shù)據(jù)的內(nèi)存空間

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

????強類型：在開辟變量存儲空間時，定義了空間將來存儲的數(shù)據(jù)的數(shù)據(jù)類型喇勋，只能存儲固定類型的數(shù)據(jù)

????弱類型：在開辟變量存儲空間時缨该，不定義空間將來的存儲數(shù)據(jù)類型，可以存放任意類型的數(shù)據(jù)川背。

語法：

????var 變量名 = 初始化值;

????typeof運算符：獲取變量的類型（null運算后得到的是object）

5. 運算符

????1）一元運算符：只有一個運算數(shù)的運算符

????????++贰拿，-- ， +(正號)熄云，-(負號)?

? ? ????注意：在JS中膨更，如果運算數(shù)不是運算符所要求的類型，那么js引擎會自動的將運算數(shù)進行類型轉(zhuǎn)換

????????其他類型轉(zhuǎn)number：

? ? ? ? a）string轉(zhuǎn)number：按照字面值轉(zhuǎn)換缴允。如果字面值不是數(shù)字荚守，則轉(zhuǎn)為NaN（不是數(shù)字的數(shù)字）

? ? ? ? b）boolean轉(zhuǎn)number：true轉(zhuǎn)為1，false轉(zhuǎn)為0

????2）算數(shù)運算符

????????+练般，-矗漾，*，/薄料，% ...

????3）賦值運算符

????????=敞贡，+=，-+....

????4）比較運算符

????????>摄职，<誊役，>=获列，<=，==蛔垢，===(全等于)

????????比較方式

? ? ? ? a）類型相同：直接比較击孩，字符串：按照字典順序比較。按位逐一比較啦桌，直到得出大小為止溯壶。

? ? ? ? b）類型不同：先進行類型轉(zhuǎn)換，再比較

????????===：全等于甫男，在比較之前且改，先判斷類型，如果類型不一樣板驳，則直接返回false

????5）邏輯運算符

????????&&又跛，||，!

????????其他類型轉(zhuǎn)boolean：

????????a）number：0或NaN為假若治，其他為真

? ? ? ? b）string：除了空字符串("")慨蓝，其他都是true

? ? ? ? c）null&undefined:都是false

? ? ? ? d）對象：所有對象都為true

????6）三元運算符

? ? ? ? 表達式? 值1: 值2

6. 流程控制語句

1. if...else...

2. switch：switch語句可以接受任意的原始數(shù)據(jù)類型

3. while

4. do...while

5. for

7. JS特殊語法

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

2）變量的定義使用var關(guān)鍵字端幼，也可以不使用礼烈，用的時候定義的變量是局部變量，不用的時候定義的變量是全局變量(不建議)

2. 基本對象

1. Function：函數(shù)(方法)對象

創(chuàng)建：

????1）var fun = new Function(形式參數(shù)列表,方法體); //不推薦

????2）function 方法名稱(形式參數(shù)列表){ 方法體 }

????3）var 方法名 = function(形式參數(shù)列表) { 方法體 }

方法：

屬性：length:代表形參的個數(shù)

特點：

????1）方法定義是婆跑，形參的類型不用寫此熬，返回值類型也不寫

????2）方法是一個對象，如果定義名稱相同的方法滑进，會覆蓋

????3）在JS中犀忱，方法的調(diào)用只與方法的名稱有關(guān)，和參數(shù)列表無關(guān)

????4）在方法聲明中有一個隱藏的內(nèi)置對象（數(shù)組）扶关，arguments,封裝所有的實際參數(shù)

調(diào)用：方法名稱(實際參數(shù)列表);

2. Array:數(shù)組對象

創(chuàng)建：

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

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

? ? 3）var arr = [元素列表];

方法：

????1）join(參數(shù))：將數(shù)組中的元素按照指定的分隔符拼接為字符串

? ? 2）push()：向數(shù)組的末尾添加一個或更多元素阴汇，并返回新的長度。

屬性：

????1）length:數(shù)組的長度

特點：

????1）JS中节槐，數(shù)組元素的類型可變的

? ? 2）JS中搀庶，數(shù)組長度可變的

3. Boolean：基本類型包裝類

4. Date：日期對象

創(chuàng)建：var date = new Date();

方法：

????1）toLocaleString()：返回當前date對象對應(yīng)的時間本地字符串格式

? ? 2）getTime()：獲取毫秒值，返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差

5. Math：數(shù)學(xué)對象

創(chuàng)建：Math對象不用創(chuàng)建铜异，直接使用地来，Math.方法名();

方法：

????1）random()：返回 0 ~ 1 之間的隨機數(shù)， 含0不含1

? ? 2）ceil(x)：對數(shù)進行上舍入

? ? 3）floor(x)：對數(shù)進行下舍入

? ? 4）round(x)：把數(shù)四舍五入為最接近的整數(shù)

屬性：PI

6. Number：基本類型包裝類

7. String：基本類型包裝類

8. RegExp：正則表達式對象

1. 正則表達式：定義字符串的組成規(guī)則熙掺。

? ? 1）單個字符：[]未斑，如[a] [ab] [a-zA-Z0-9_]

????特殊符號代表特殊含義的單個字符:

????????\d：單個數(shù)字字符 [0-9]

????????\w：單個單詞字符[a-zA-Z0-9_]

????2）量詞符號：

?????????：表示出現(xiàn)0次或1次

????????*：表示出現(xiàn)0次或多次

????????+：出現(xiàn)1次或多次

????????{m,n}：表示 m<= 數(shù)量 <= n，m如果缺时壹ā： {,n}:最多n次蜡秽，n如果缺矢А：{m,} 最少m次

????3）開始結(jié)束符號：開始（^）、結(jié)束（$）

2. 正則對象：

????1）創(chuàng)建

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

? ? ? ? b）var reg = /正則表達式/;

????2）方法：test(參數(shù)):驗證指定的字符串是否符合正則定義的規(guī)范

9. Global

特點：全局對象芽突，這個Global中封裝的方法不需要對象就可以直接調(diào)用试浙，方法名();

方法：

????1）encodeURI()：url編碼

?????????decodeURI()：url解碼

? ? 2）encodeURIComponent()：url編碼，編碼的字符更多

? ? ? ? ?decodeURIComponent():url解碼

????3）parseInt():將字符串轉(zhuǎn)為數(shù)字寞蚌，逐一判斷每一個字符是否是數(shù)字田巴，直到不是數(shù)字為止，將前邊數(shù)字部分轉(zhuǎn)為number

????4）isNaN():判斷一個值是否是NaN挟秤，NaN六親不認壹哺，連自己都不認。NaN參與的==比較全部返回false

????5）eval()：計算JavaScript 字符串艘刚，并把它作為腳本代碼來執(zhí)行管宵。

URL編碼：

? ? 1）將字符串轉(zhuǎn)換為字節(jié)

? ? 2）對每個字節(jié)的前4位和后四位分別轉(zhuǎn)換為十六進制數(shù)字

? ? 3）在每個字節(jié)前面增加%，組成新的編碼

BOM

1. 概念

Browser Object Model 瀏覽器對象模型

將瀏覽器的各個組成部分封裝成對象攀甚。

2. 組成

Window：窗口對象

Navigator：瀏覽器對象

Screen：顯示器屏幕對象

History：歷史記錄對象

Location：地址欄對象

3. Window：窗口對象

? ? 1）創(chuàng)建

? ? 2）方法

? ? ? ? a）與彈出框有關(guān)的方法：

? ? ? ? ? ? alert()：顯示帶有一段消息和一個確認按鈕的警告框

? ? ? ? ? ? confirm()：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框（如果用戶點擊確定按鈕箩朴，則方法返回true；如果用戶點擊取消按鈕秋度，則方法返回false）

? ? ? ? ? ? prompt()：顯示可提示用戶輸入的對話框（返回值為用戶輸入的值）

? ? ? ? b）與打開關(guān)閉有關(guān)的方法：

? ? ? ? ? ? close()：關(guān)閉瀏覽器窗口

? ? ? ? ? ? open()：打開一個新的瀏覽器窗口（返回新的Window對象）

? ? ? ? c）與定時器有關(guān)的方法

? ? ? ? ? ? setTimeout()：在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式

????????????????參數(shù)：1. js代碼或者方法對象? 2. 毫秒值

????????????????返回值：唯一標識炸庞，用于取消定時器

? ? ? ? ? ? clearTimeout()：取消由 setTimeout() 方法設(shè)置的 timeout（使用唯一標識）

? ? ? ? ? ? setInterval()：按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式（參數(shù)和setTimeout一樣）

? ? ? ? ? ? clearInterval()：取消由 setInterval() 設(shè)置的 timeout（使用唯一標識）

? ? 3）屬性

? ? ? ? a）獲取其他BOM對象：

? ? ? ? ? ? history

? ? ? ? ? ? location

? ? ? ? ? ? Navigator

? ? ? ? ? ? Screen:

? ? ? ? b）獲取DOM對象

? ? ? ? ? ? document

? ? 4）特點

? ? ? ? Window對象不需要創(chuàng)建可以直接使用 window使用，window.方法名();

? ? ? ? window引用可以省略荚斯，方法名();

4. Location：地址欄對象

? ? 1）創(chuàng)建(獲取)：window.location（或location）

????2）方法：reload() 重新加載當前文檔（刷新）

????3）屬性：href 設(shè)置或返回完整的 URL

5. History：歷史記錄對象

????1）創(chuàng)建(獲取)：window.history（或history）

????2）方法：

? ? ? ? back()：加載 history 列表中的前一個 URL

? ? ? ? forward()：加載 history 列表中的下一個 URL

? ? ? ? go(參數(shù))：加載 history 列表中的某個具體頁面

? ? ? ? ? ? 參數(shù)：1.正數(shù)：前進幾個歷史記錄 2.負數(shù)：后退幾個歷史記錄

????3）屬性：length 返回當前窗口歷史列表中的 URL 數(shù)量

DOM

1. 概念

Document Object Model 文檔對象模型

將標記語言文檔的各個組成部分埠居，封裝為對象，可以使用這些對象鲸拥，對標記語言文檔進行CRUD的動態(tài)操作

2. W3C DOM

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

1）核心 DOM - 針對任何結(jié)構(gòu)化文檔的標準模型

????Document：文檔對象

????Element：元素對象

????Attribute：屬性對象

????Text：文本對象

????Comment:注釋對象

????Node：節(jié)點對象，其他5個的父對象

2）XML DOM - 針對 XML 文檔的標準模型

3）HTML DOM - 針對 HTML 文檔的標準模型

3. 核心DOM模型

Document：文檔對象

1僧免、創(chuàng)建(獲取)：在dom模型中可以使用window對象來獲取

????1）window.document

? ? 2）document

2刑赶、方法：

????1）獲取Element對象：

????????getElementById()：根據(jù)id屬性值獲取元素對象，id屬性值一般唯一

????????getElementsByTagName()：根據(jù)元素名稱獲取元素對象們懂衩，返回值是一個數(shù)組

????????getElementsByClassName()：根據(jù)Class屬性值獲取元素對象們撞叨，返回值是一個數(shù)組

????????getElementsByName()：根據(jù)name屬性值獲取元素對象們，返回值是一個數(shù)組

????2）創(chuàng)建其他DOM對象：

????????createAttribute(name)

? ? ? ? createComment()

? ? ? ? createElement()

? ? ? ? createTextNode()

3浊洞、屬性

Element：元素對象

1牵敷、獲取/創(chuàng)建：通過document來獲取和創(chuàng)建

2、方法：

????1）removeAttribute()：刪除屬性

????2）setAttribute()：設(shè)置屬性

Node：節(jié)點對象法希，其他5個的父對象

1枷餐、特點：所有dom對象都可以被認為是一個節(jié)點

2、方法（CRUD dom樹）：

????appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點

????removeChild() ：刪除（并返回）當前節(jié)點的指定子節(jié)點

????replaceChild()：用新節(jié)點替換一個子節(jié)點

3苫亦、屬性：parentNode返回節(jié)點的父節(jié)點毛肋。

4. HTML DOM

1. 標簽體的設(shè)置和獲仍惯洹：innerHTML

2. 使用html元素對象的屬性：具體屬性參照api文檔

3. 控制元素樣式

????1）使用元素的style屬性來設(shè)置

????2）提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值

事件監(jiān)聽機制

1. 概念

某些組件被執(zhí)行了某些操作后润匙，觸發(fā)某些代碼的執(zhí)行诗眨。

????事件：某些操作拧篮。如： 單擊屉符，雙擊，鍵盤按下了摊沉，鼠標移動了

????事件源：組件厂财。如： 按鈕 文本輸入框...

????監(jiān)聽器：代碼

????注冊監(jiān)聽：將事件芋簿，事件源，監(jiān)聽器結(jié)合在一起蟀苛，當事件源上發(fā)生了某個事件益咬，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼

2. 常見的事件

1）點擊事件

????onclick：單擊事件

????ondblclick：雙擊事件

2）焦點事件

????onblur：失去焦點

????onfocus：元素獲得焦點

3）加載事件

????onload：一張頁面或一幅圖像完成加載（一般用于form表單加載完成）

4）鼠標事件

????onmousedown：鼠標按鈕被按下

????onmouseup：鼠標按鍵被松開

????onmousemove：鼠標被移動

????onmouseover：鼠標移到某元素之上

????onmouseout：鼠標從某元素移開

5）鍵盤事件

????onkeydown：某個鍵盤按鍵被按下

????onkeyup：某個鍵盤按鍵被松開

????onkeypress：某個鍵盤按鍵被按下并松開

6）選擇和改變

????onchange：域的內(nèi)容被改變（文本、下拉框）

????onselect：文本被選中

7）表單事件

????onsubmit：確認按鈕被點擊（表單的提交）

????onreset：重置按鈕被點擊