目錄：

JSADV1-復(fù)習(xí)和細(xì)節(jié)補(bǔ)充.ppt

JSADV2-函數(shù).ppt

JSADV3-閉包.ppt?

JSADV4-原型機(jī)制.ppt?

JSADV7-JSONP.ppt

一、單選多選框和下拉框

二、document的querySelector和querySelectorAll方法

三、表單驗(yàn)證以及表單自動(dòng)提交和手動(dòng)提交

四、事件對(duì)象和冒泡，動(dòng)態(tài)綁定元素的事件

五、JSON.parse和eval

JSADV1-復(fù)習(xí)和細(xì)節(jié)補(bǔ)充.ppt START

JSADV

JS復(fù)習(xí)及細(xì)節(jié)補(bǔ)充

回顧

JS基本核心語法（ECMAScript）

文檔對(duì)象模型（DOM）

瀏覽器對(duì)象模型（BOM）

本章目標(biāo)

復(fù)習(xí)JS基礎(chǔ)知識(shí)

補(bǔ)充一些JS的細(xì)節(jié)問題

輸出語句

注釋

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

number

string

boolean

undefined

null

object

遍歷的兩種方式

for

foreach遍歷

Dom操作獲取元素

document.getElementById

getElementsByTagName

getElementsByClassName

getElementsByName

設(shè)置屬性

元素對(duì)象.屬性名 = ‘屬性值’

DOM對(duì)象的屬性和HTML的標(biāo)簽屬性幾乎是一致的，常用的有src、title、className、href和style，其中className對(duì)應(yīng)就是標(biāo)簽的class屬性，但是由于class在JS中是關(guān)鍵字，所以變成了className

設(shè)置樣式：

? ? 元素對(duì)象.style.樣式屬性 = ‘屬性值’

事件綁定（一）

嵌入dom

注意：這樣做很是不好，有下列兩大缺點(diǎn)，這也是如今在開發(fā)中很難見到這樣綁定事件的原因。（1）存在一個(gè)時(shí)差問題，因?yàn)橛脩艨赡軙?huì)在HTML元素一出現(xiàn)在頁面上就觸發(fā)相應(yīng)的事件，但當(dāng)時(shí)的事件處理程序有可能尚不具備執(zhí)行條件（比如js代碼還沒有下載下來），由此會(huì)引發(fā)錯(cuò)誤。（2）HTML與js代碼緊密耦合。如果要更換事件處理程序，就要改動(dòng)兩個(gè)地方:HTML代碼和JS代碼，這非常不利于后期代碼的維護(hù)。所以這種方法在開發(fā)中基本不用。

事件綁定（二）

直接綁定

注意：這種方式只能給該元素綁定一個(gè)事件。不支持多播事件委托。

事件綁定（三）

事件監(jiān)聽

注意：addEventListener()添加事件，removeEventListener()刪除事件。可添加多個(gè)，執(zhí)行順序與添加順序相同。

事件對(duì)象

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event。這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息。包括導(dǎo)致事件的元素，事件的類型以及其他與特定事件相關(guān)的信息。

值類型和引用類型

JavaScript 中的值類型與引用類型的使用是有區(qū)別的。這和大部分的高級(jí)語言一樣。

邏輯或和邏輯與運(yùn)算符

JS中還包括另外一種邏輯運(yùn)算，它的表達(dá)式結(jié)果類型是不確定的，他們是邏輯或(||)和邏輯與(&&)，這兩個(gè)運(yùn)算符支持短位運(yùn)算，但是不會(huì)強(qiáng)制轉(zhuǎn)換結(jié)果為布爾型的值。

兩個(gè)引用類型的比較

引用類型的等值比較，將直接“比較引用（的地址） ”。也就是說：如果不是同一個(gè)變量或其引用，則兩個(gè)變量不相等， 也不相同。

在對(duì)兩個(gè)引用類型 的比較運(yùn)算過程中，“==”與“===”并沒有任何的不同。

運(yùn)算優(yōu)先級(jí)

void是一個(gè)運(yùn)算符，所以我們可以計(jì)算void 1 + 2的值，void運(yùn)算符的優(yōu)先級(jí)比+高

,也是一種運(yùn)算符。

變量的作用域

由于JS的變量作用域只能達(dá)到函數(shù)一級(jí)(而非語句塊一級(jí))，因此這里聲明變量，與在for語句之外聲明變量沒有什么區(qū)別。

缺省對(duì)象的指定

JS提供with語句，以使得開發(fā)人員可以在一個(gè)代碼塊中顯式地指定缺省對(duì)象。如果不指定缺省對(duì)象，則默認(rèn)使用宿主程序在全局指定的缺省對(duì) 象（在瀏覽器環(huán)境中的缺省對(duì)象是 window）。

逗號(hào)的二義性

[]的二義性

總結(jié)

JS基本語法的復(fù)習(xí)

一些JS的細(xì)節(jié)問題

JSADV1-復(fù)習(xí)和細(xì)節(jié)補(bǔ)充.ppt END

JSADV2-函數(shù).ppt START

JSADV

函數(shù)

回顧

JS的基礎(chǔ)知識(shí)

JS的細(xì)節(jié)問題

本章目標(biāo)

函數(shù)

函數(shù)概述

在JS中，函數(shù)包含一組語句，是JS的基礎(chǔ)模塊單元，用于代碼復(fù)用、信息隱藏和組合調(diào)用。函數(shù)用于指定對(duì)象的行為。一般來說，所謂的編程，就是將一組需求分解成一組函數(shù)和數(shù)據(jù)結(jié)構(gòu)的技能。注意：在JS中，函數(shù)就是對(duì)象，因此函數(shù)可以保存在變量、對(duì)象和數(shù)組中，也可以當(dāng)作參數(shù)傳遞給其他的函數(shù)，函數(shù)的返回值也可以是函數(shù)。

創(chuàng)建函數(shù)的三種方法

在JS中，可以通過三種方式創(chuàng)建函數(shù)：

1、函數(shù)聲明

2、函數(shù)字面量

3、構(gòu)造函數(shù)

函數(shù)聲明

這種方式定義的函數(shù)不屬于任何對(duì)象，始終是默認(rèn)的全局對(duì)象。

注意：這樣聲明的函數(shù)可以在函數(shù)定義前調(diào)用。因?yàn)樵贘S的最頂層，都有一個(gè)預(yù)編譯處理機(jī)制

函數(shù)表達(dá)式

這樣定義的函數(shù)會(huì)存儲(chǔ)在一個(gè)變量中。不能在定義之前調(diào)用。

構(gòu)造函數(shù)

通過new Function構(gòu)造函數(shù)。

調(diào)用函數(shù)的方法

JS中的函數(shù)有四種調(diào)用方式：

1、方法調(diào)用模式2、函數(shù)調(diào)用模式3、構(gòu)造器調(diào)用模式4、apply調(diào)用模式

方法調(diào)用

當(dāng)一個(gè)函數(shù)保存為對(duì)象的一個(gè)屬性時(shí)，我們稱它為一個(gè)方法。當(dāng)一個(gè)方法被調(diào)用時(shí)，this被綁定到該對(duì)象。

函數(shù)調(diào)用模式

當(dāng)一個(gè)函數(shù)并非一個(gè)對(duì)象的屬性時(shí)，它就被當(dāng)作一個(gè)函數(shù)來調(diào)用，以這種方式調(diào)用函數(shù)時(shí)，this被綁定到了全局對(duì)象。

構(gòu)造器調(diào)用模式

因?yàn)镴S是一門基于原型繼承的語言，因此可以在創(chuàng)建對(duì)象時(shí)直接從其他對(duì)象繼承屬性。如果在一個(gè)函數(shù)前面帶上了new關(guān)鍵字來調(diào)用，那么將會(huì)創(chuàng)建一個(gè)連接到該函數(shù)的prototype成員的新對(duì)象，同時(shí)this會(huì)被綁定到這個(gè)新對(duì)象上。

Apply調(diào)用模式

在JS中，函數(shù)也是對(duì)象，因此函數(shù)也可以擁有方法。調(diào)用函數(shù)的apply方法，需要傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)是綁定到函數(shù)中this變量的對(duì)象，第二個(gè)參數(shù)是原函數(shù)的參數(shù)值列表。

JS函數(shù)中的內(nèi)置對(duì)象arguments

? 每個(gè)JS函數(shù)都有一個(gè)內(nèi)置對(duì)象，它的作用是：

調(diào)用該函數(shù)時(shí)可以傳遞任意參數(shù)！

arguments對(duì)象是一個(gè)類似于數(shù)組的對(duì)象。

arguments對(duì)象的length屬性：獲取函數(shù)的實(shí)參個(gè)數(shù)！

利用arguments對(duì)象特性,實(shí)現(xiàn)模擬函數(shù)的重載的效果.

JS函數(shù)中的內(nèi)置對(duì)象arguments

arguments.callee

arguments.callee 在哪一個(gè)函數(shù)中運(yùn)行，它就代表哪個(gè)函數(shù)。 一般用在匿名函數(shù)中。

在匿名函數(shù)中有時(shí)會(huì)需要自己調(diào)用自己，但是由于是匿名函數(shù)，沒有名字，無名可調(diào)，這時(shí)就可以使用arguments.callee來調(diào)用。

總結(jié)

函數(shù)

? ? ??

JSADV2-函數(shù).ppt END

JSADV3-閉包.ppt START

JSADV

閉包

回顧

函數(shù)的三種創(chuàng)建方式

函數(shù)的四種調(diào)用方法

本章目標(biāo)

閉包

什么是閉包

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域變量的函數(shù)，創(chuàng)建閉包的通常方式，是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)

一個(gè)閉包的例子

當(dāng)在一個(gè)函數(shù)中定義內(nèi)部函數(shù)時(shí)，內(nèi)部的函數(shù)可以訪問外部函數(shù)的上下文環(huán)境，這就被稱為閉包。

閉包的難點(diǎn)

判斷作用域指向的變量對(duì)象是否相同

閉包的難點(diǎn)

判斷變量對(duì)象中變量的值

執(zhí)行環(huán)境和變量對(duì)象在運(yùn)行函數(shù)時(shí)生成

一個(gè)糟糕的例子

假設(shè)在以后的項(xiàng)目中，我們需要對(duì)所有的input表單元素綁定一個(gè)點(diǎn)擊事件。如下所示：

解決這個(gè)問題

構(gòu)造一個(gè)幫助函數(shù)，對(duì)事件處理中的動(dòng)態(tài)的i值進(jìn)行處理。

閉包的用途

匿名自執(zhí)行函數(shù)

閉包的用途

實(shí)現(xiàn)封裝

閉包的用途

實(shí)現(xiàn)面向?qū)ο笾械膶?duì)象，傳統(tǒng)的對(duì)象語言都提供類的模板機(jī)制

總結(jié)

閉包的使用

JSADV3-閉包.ppt END

JSADV4-原型機(jī)制.ppt START

JSADV

原型機(jī)制

回顧

閉包的概念

閉包的作用

本章目標(biāo)

JS中的原型機(jī)制

普通對(duì)象和函數(shù)對(duì)象

凡是通過 new Function() 創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他的都是普通對(duì)象。

JS中的構(gòu)造函數(shù)

實(shí)例的構(gòu)造函數(shù)屬性（constructor）指向構(gòu)造函數(shù)

原型對(duì)象（一）

在JS中，每當(dāng)定義一個(gè)對(duì)象（函數(shù)也是對(duì)象）時(shí)候，對(duì)象中都會(huì)包含一些預(yù)定義的屬性。其中每個(gè)函數(shù)對(duì)象都有一個(gè)prototype 屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。

原型對(duì)象（二）

實(shí)質(zhì)上，函數(shù)對(duì)象的prototype屬性就是一個(gè)對(duì)象，這個(gè)對(duì)象會(huì)自動(dòng)帶有一個(gè)constructor屬性，該屬性就是Stu函數(shù)本身。即Stu.prototype.constructor == Stu（有點(diǎn)繞了）

原型對(duì)象（三）

我們可以發(fā)現(xiàn)：

但是Function.prototype 除外，它是函數(shù)對(duì)象，但它很特殊，他沒有prototype屬性

__proto__屬性

JS 在創(chuàng)建對(duì)象（不論是普通對(duì)象還是函數(shù)對(duì)象）的時(shí)候，都有一個(gè)叫做__proto__ 的內(nèi)置屬性，用于指向創(chuàng)建它的構(gòu)造函數(shù)的原型對(duì)象。

new關(guān)鍵字的作用

在JS中new出一個(gè)對(duì)象的過程分為三步：

1、var s1={}; 初始化一個(gè)對(duì)象s1。

2、s1._proto_=Stu.prototype;將對(duì)象s1的 __proto__ 屬性設(shè)置為 Stu.prototype。

3、Stu.call(s1);調(diào)用構(gòu)造函數(shù)Stu來初始化s1。

總結(jié)

原型的理解和運(yùn)用

? ? ??

JSADV4-原型機(jī)制.ppt END

JSADV7-JSONP.ppt START

JSADV

JSONP

本章目標(biāo)

JSONP原理

為什么要使用JSONP（一）

ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題，甭管你是靜態(tài)頁面、動(dòng)態(tài)網(wǎng)頁、web服務(wù)、WCF，只要是跨域請(qǐng)求，請(qǐng)求執(zhí)行完后一律不準(zhǔn)再次運(yùn)行回調(diào)函數(shù)中的js代碼。但是我們發(fā)現(xiàn)，web頁面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有src這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>

為什么要使用JSONP（二）

如果想通過純web端（ActiveX控件、服務(wù)端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理。

解決跨域問題的方式

通過jsonp跨域

document.domain + iframe跨域

location.hash + iframe

window.name + iframe跨域

postMessage跨域

跨域資源共享（CORS）

nginx代理跨域

nodejs中間件代理跨域

WebSocket協(xié)議跨域

JSONP客戶端實(shí)現(xiàn)（一）

假設(shè)遠(yuǎn)程服務(wù)器eclipse上有一個(gè)名為demo的項(xiàng)目，項(xiàng)目的WebContent目錄下有一個(gè)js/remote.js的腳本文件。

JSONP客戶端實(shí)現(xiàn)（二）

在本地服務(wù)器HBuilder上有一個(gè)index.html頁面，運(yùn)行該頁面，可以發(fā)現(xiàn)腳本順利運(yùn)行。

JSONP客戶端實(shí)現(xiàn)（三）

在index.html頁面添加一個(gè)函數(shù)。

JSONP客戶端實(shí)現(xiàn)（四）

修改遠(yuǎn)程服務(wù)器eclipse中remote.js的代碼：

JSONP客戶端實(shí)現(xiàn)（五）

如果本地函數(shù)很多，那么怎么才能讓remote.js知道它應(yīng)該調(diào)用的本地函數(shù)名呢？

JSONP客戶端實(shí)現(xiàn)（五）

在遠(yuǎn)程服務(wù)器eclipse中創(chuàng)建一個(gè)servlet，代碼入下：

JSONP客戶端實(shí)現(xiàn)（六）

為了避免每次調(diào)用都要寫一個(gè)<script>標(biāo)簽，我們將本地的js代碼修改為動(dòng)態(tài)調(diào)用js。

jQuery中的JSONP調(diào)用

JSADV7-JSONP.ppt END