JavaScript程序設(shè)計(jì)（微課版）課件全套 第1-7章 JavaScript概述 - Ajax應(yīng)用

JavaScript程序設(shè)計(jì)與應(yīng)用JavaScript基礎(chǔ)目

錄JavaScript的歷史與現(xiàn)狀JavaScript的運(yùn)行JavaScript的開發(fā)環(huán)境目

錄JavaScript的歷史與現(xiàn)狀JavaScript的運(yùn)行JavaScript的開發(fā)環(huán)境JavaScript歷史與現(xiàn)狀一、歷史發(fā)展1994年12月，Navigator發(fā)布了1.0版，Navigator瀏覽器需要一種可以嵌入網(wǎng)頁(yè)的腳本語言，用來控制瀏覽器行為（表單驗(yàn)證）。1995年，程序員BrendanEich開發(fā)了Javascript。由于設(shè)計(jì)時(shí)間太短，語言的一些細(xì)節(jié)考慮得不夠嚴(yán)謹(jǐn)，導(dǎo)致后來很長(zhǎng)一段時(shí)間，Javascript寫出來的程序混亂不堪。1996年8月互聯(lián)網(wǎng)巨頭微軟公司進(jìn)入瀏覽器領(lǐng)域，推出JScript，和NetScript公司開始爭(zhēng)奪博主地位。同年11月，Netscape公司決定將JavaScript提交給國(guó)際標(biāo)準(zhǔn)化組織ECMA（EuropeanComputerManufacturersAssociation）。1997年7月，ECMA組織發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語言的標(biāo)準(zhǔn)，并將這種語言稱為ECMAScript。這個(gè)版本就是ECMAScript1.0版。2015年6月，第六版發(fā)布（ES6），新瀏覽器都支持這一版本，之后每年發(fā)布一版，版本號(hào)以年份命名。ECMAScript和JavaScript的關(guān)系：前者是后者的規(guī)格（規(guī)范），后者是前者的一種實(shí)現(xiàn)。在日常場(chǎng)合，這兩個(gè)詞是可以互換的。JavaScript歷史與現(xiàn)狀二、現(xiàn)狀JavaScript是web前端三大技術(shù)之一。JavaScript嵌入html頁(yè)面中被瀏覽器解釋執(zhí)行，可以實(shí)現(xiàn)用戶和客戶端瀏覽器之間的交互。結(jié)構(gòu)：超文本標(biāo)記語言，描述網(wǎng)頁(yè)結(jié)構(gòu)表現(xiàn)：層疊樣式表，定義網(wǎng)頁(yè)布局和樣式行為：腳本語言，實(shí)現(xiàn)用戶和客戶端瀏覽器之間的交互目

錄JavaScript的歷史與現(xiàn)狀JavaScript的運(yùn)行JavaScript的開發(fā)環(huán)境JavaScript的運(yùn)行二、JavaScript代碼的裝載與解析JavaScript是一種解釋型語言當(dāng)一個(gè)HTML頁(yè)面被裝載時(shí)，它會(huì)裝載并解析過程中遇到的任何JavaScript。代碼解析是瀏覽器取得代碼并將之轉(zhuǎn)化成可執(zhí)行代碼的過程。

一、引入JavaScript腳本代碼到HTML文檔中

使用script標(biāo)簽告訴瀏覽器JavaScript從何處開始，到何處結(jié)束<scripttype="text/javascript></script>

1、嵌入腳本代碼<scripttype="text/javascript">...</script>

腳本代碼可以方法html的任意地方，一般放在body最下方，也可以由實(shí)際功能需求決定其位置。

2、引入腳本文件<scripttype="text/javascript"src="文件路徑"></script>目

錄JavaScript的歷史與現(xiàn)狀JavaScript的運(yùn)行JavaScript的開發(fā)環(huán)境JavaScript的開發(fā)環(huán)境一、JavaScript腳本編寫步驟①選擇JavaScript語言編輯器編輯腳本代碼；②嵌入該JavaScript腳本代碼到HTML文檔中；③選擇支持JavaScript的瀏覽器瀏覽該HTML文檔；④如果錯(cuò)誤則檢查并修正源代碼，重新瀏覽，此過程重復(fù)直至代碼正確為止；⑤處理不支持JavaScript腳本的情況。二、編輯器由于JavaScript純粹由文本構(gòu)成，因此編寫JavaScript代碼可以用任何文本編輯器，例如Hbuilder、SublimeText、vscode等。三、運(yùn)行與調(diào)試JavaScript代碼運(yùn)行和調(diào)試JavaScript的主要工具還是Web瀏覽器，主流的Web瀏覽器還會(huì)包含一些JavaScript調(diào)試程序。例如MozillaFirefox、GoogleChrome等。JavaScript程序設(shè)計(jì)與應(yīng)用語

法目

錄JavaScript語法基礎(chǔ)JavaScript數(shù)據(jù)類型JavaScript運(yùn)算符JavaScript語句JavaScript函數(shù)JavaScript語法基礎(chǔ)一、變量與常量1、什么是變量和常量

變量和常量都是指程序中命名的一個(gè)存儲(chǔ)單元。變量是相當(dāng)于常量而言的，常量通常是一個(gè)不會(huì)改變的固定值，而變量是對(duì)應(yīng)到某個(gè)值的一個(gè)符號(hào)，這個(gè)符號(hào)中的值可能會(huì)隨著程序的執(zhí)行而改變，因此稱為“變量”。2、變量和常量的命名規(guī)則JavaScript中的命名同其他語言非常相似，這里要注意以下幾點(diǎn)：①第一個(gè)字符必須是字母（大小寫均可），下劃線（_）或者美元符號(hào)（$）；②后續(xù)的字符可以是字母、數(shù)字、下劃線或者美元符號(hào)；③變量名稱不能是關(guān)鍵字或保留字；④不允許出現(xiàn)中文變量名，且大小寫敏感。$ab1B1studentnameschool_whlong

this

年齡

5bookJavaScript語法基礎(chǔ)Javacript語法基礎(chǔ)3、變量和常量的命名慣例命名有意義:盡量使用英文單詞（1）變量小駝峰格式：stuName前綴應(yīng)當(dāng)是名詞，盡量在變量名字中體現(xiàn)所屬類型，如:length、count等表示數(shù)字類型；而name、title表示為字符串類型。//好的命名方式varmaxCount=10;vartableTitle='LoginTable';//不好的命名方式varsetCount=10;vargetTitle='LoginTable';（2）常量名稱全部大寫,使用大寫字母和下劃線來組合命名,下劃線用以分割單詞constMAX_COUNT=10;constURL='';JavaScript語法基礎(chǔ)二、關(guān)鍵字和保留字1、關(guān)鍵字ECMA-262定義了JavaScript支持的一套關(guān)鍵字（keyword）。根據(jù)規(guī)定，關(guān)鍵字不能用作變量名或函數(shù)名。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript語法基礎(chǔ)2、保留字JavaScript還定義了一套保留字（reservedword）。保留字在某種意義上是為將來的關(guān)鍵字而保留的單詞。因此，保留字也不能被用作變量名或函數(shù)名。abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatileJavaScript語法基礎(chǔ)JavaScript語法基礎(chǔ)三、變量與常量的聲明JavaScript是一種弱類型語言(無類型、松散、動(dòng)態(tài)類型)，聲明變量時(shí)不需要指定數(shù)據(jù)類型。1、var可以聲明一個(gè)或多個(gè)變量，可以在聲明的同時(shí)或者聲明后賦值，值可以修改var聲明的是全局變量2、let可以聲明一個(gè)或多個(gè)變量，可以在聲明的同時(shí)或者聲明后賦值，值可以修改let聲明的變量是塊級(jí)作用域3、constconst聲明常量，必須在聲明時(shí)初始化，值不能修改const聲明的是塊級(jí)作用域在js中，垃圾回收器每隔一段時(shí)間就會(huì)找出那些不再使用的數(shù)據(jù)，并釋放其所占用的內(nèi)存空間。盡量少使用var聲明變量，而使用let，否則可能引起內(nèi)存泄漏（不再用到的內(nèi)存，沒有及時(shí)釋放）。目

錄JavaScript語法基礎(chǔ)JavaScript數(shù)據(jù)類型JavaScript運(yùn)算符JavaScript語句JavaScript函數(shù)JavaScript數(shù)據(jù)類型一、基礎(chǔ)數(shù)據(jù)類型類型

舉例簡(jiǎn)要說明Number45,-34,32.13,3.7E-2數(shù)值型數(shù)據(jù)String"name",'Tom'字符型數(shù)據(jù)，需加雙引號(hào)或單引號(hào)Booleantrue,flase布爾型數(shù)據(jù)，不加引號(hào)，表示邏輯真或假Undefinedundefined表示未定義，指聲明了但是沒有賦值的值Nullnull表示空值typeof檢測(cè)運(yùn)算符:typeofnum三個(gè)特殊的Number值:Infinity無窮大，-Infinity負(fù)無窮，NaN(notanumber)不是一個(gè)數(shù)字JavaScript數(shù)據(jù)類型二、原始值與引用值1、原始值：基礎(chǔ)（簡(jiǎn)單）數(shù)據(jù)類型：Number、String、Boolean、Undefined、Null2、引用值：復(fù)雜（復(fù)合）數(shù)據(jù)類型（1）對(duì)象JavaScript中的對(duì)象是一個(gè)屬性（鍵值對(duì)）的集合，其中的每一個(gè)屬性都對(duì)應(yīng)一個(gè)屬性值。通過這些屬性可以訪問值，屬性值通常作為對(duì)象的屬性來引用。對(duì)象的基本語法格式如下:{屬性名1：屬性值1，

......屬性名n：屬性值}（2）數(shù)組

一些數(shù)據(jù)的集合。這些數(shù)據(jù)也可以是任意基礎(chǔ)數(shù)據(jù)類型或者引用型?；菊Z法格式如下： [數(shù)據(jù)1，數(shù)據(jù)2，......數(shù)據(jù)n]JavaScript數(shù)據(jù)類型三、解構(gòu)賦值從數(shù)組和對(duì)象提取值，對(duì)變量進(jìn)行賦值1、利用數(shù)組解構(gòu)賦值：將數(shù)組中的數(shù)據(jù)依次提取給變量（1）變量先聲明再賦值（2）變量聲明的同時(shí)賦值（3）變量和數(shù)組的數(shù)目不匹配時(shí)忽略某些值（4）預(yù)設(shè)默認(rèn)值2、利用對(duì)象解構(gòu)賦值：將對(duì)象中的屬性的值依次提取給對(duì)應(yīng)的變量（1）變量的次序可以和屬性名不一致（2）變量的名字必須和屬性名相同JavaScript數(shù)據(jù)類型四、數(shù)據(jù)類型轉(zhuǎn)換1、顯示數(shù)據(jù)類型轉(zhuǎn)換根據(jù)需要，使用某種方法將數(shù)據(jù)類型轉(zhuǎn)換成另外一種類型2、隱式數(shù)據(jù)類型轉(zhuǎn)換當(dāng)運(yùn)算符在運(yùn)算時(shí)，如果兩邊數(shù)據(jù)類型不統(tǒng)一CPU就無法計(jì)算，這時(shí)編譯器會(huì)自動(dòng)將運(yùn)算符兩邊的數(shù)據(jù)做一個(gè)數(shù)據(jù)類型轉(zhuǎn)換，轉(zhuǎn)成一樣的再進(jìn)行計(jì)算。這種無需程序員手動(dòng)轉(zhuǎn)換，而由編譯器自動(dòng)轉(zhuǎn)換的方式就稱為隱式轉(zhuǎn)換JavaScript數(shù)據(jù)類型1、顯示數(shù)據(jù)類型轉(zhuǎn)換(1)轉(zhuǎn)換成字符串toString()方法toString()方法不會(huì)影響到原變量，它會(huì)將轉(zhuǎn)換的結(jié)果返回轉(zhuǎn)換規(guī)則：基本按照各值的字符串形式轉(zhuǎn)換為字符串①undefined和null值：不能轉(zhuǎn)換并報(bào)錯(cuò)；②布爾值：值為true轉(zhuǎn)換成“true”，值為false轉(zhuǎn)換成“false”；③數(shù)字型值：轉(zhuǎn)換成NaN或數(shù)字型變量的完整字符串；此外,toString()方法添加參數(shù)可以將數(shù)值以該參數(shù)的進(jìn)制轉(zhuǎn)換為對(duì)應(yīng)十進(jìn)制數(shù)的字符串④其他對(duì)象：如果該對(duì)象的toString()方法存在，則返回toString方法的返回值，否則返回undefinedString()函數(shù)轉(zhuǎn)換規(guī)則基本同toString()和toString()的區(qū)別：String()可以將null和undefined這兩個(gè)值轉(zhuǎn)換成字符串JavaScript數(shù)據(jù)類型（2）轉(zhuǎn)換成布爾值Boolean()函數(shù)轉(zhuǎn)換規(guī)則:相對(duì)簡(jiǎn)單

①只有空字符串("")、null、undefined、+0、-0和NaN轉(zhuǎn)為false，其他的都是true

②數(shù)組、對(duì)象（包括空數(shù)組、空對(duì)象）轉(zhuǎn)換為布爾類型都是trueJavaScript數(shù)據(jù)類型parseInt():轉(zhuǎn)換為整數(shù)parseFloat():轉(zhuǎn)換為浮點(diǎn)數(shù)轉(zhuǎn)換規(guī)則:這兩個(gè)方法都可以將一個(gè)字符串中的有效的數(shù)字內(nèi)容取出來，若轉(zhuǎn)換對(duì)象沒有有效數(shù)字則轉(zhuǎn)換為NaNNumber()函數(shù)轉(zhuǎn)換規(guī)則①純數(shù)字的字符串轉(zhuǎn)換為數(shù)字，含有非數(shù)字則轉(zhuǎn)換為NaN，空串或者是一個(gè)全是空格的字符串，轉(zhuǎn)換為0

②true轉(zhuǎn)成1,false轉(zhuǎn)成0③undefined轉(zhuǎn)成NaN④null轉(zhuǎn)成0

Number()接受不同進(jìn)制數(shù)值作為參數(shù)，返回值永遠(yuǎn)是十進(jìn)制值（3）轉(zhuǎn)換成數(shù)字JavaScript數(shù)據(jù)類型2、隱式數(shù)據(jù)類型轉(zhuǎn)換后臺(tái)調(diào)用Number()、Boolean()、String進(jìn)行自動(dòng)轉(zhuǎn)換常用轉(zhuǎn)換規(guī)則轉(zhuǎn)成string類型：+（有一個(gè)操作數(shù)是字符時(shí)，+是字符串連接符）轉(zhuǎn)成number類型：++/--+-*/%><>=<===!====!===轉(zhuǎn)成boolean類型JS遇到預(yù)期為布爾值的地方(比如if語句的條件部分),就會(huì)將非布爾值的參數(shù)自動(dòng)轉(zhuǎn)換為布爾值。系統(tǒng)內(nèi)部會(huì)自動(dòng)調(diào)用Boolean函數(shù)。如果對(duì)非布爾值進(jìn)行運(yùn)算，則會(huì)將其轉(zhuǎn)換為布爾值，然后再取反。JavaScript數(shù)據(jù)類型2、隱式數(shù)據(jù)類型轉(zhuǎn)換后臺(tái)調(diào)用Number()、Boolean()、String進(jìn)行自動(dòng)轉(zhuǎn)換常用轉(zhuǎn)換規(guī)則轉(zhuǎn)成string類型：+（有一個(gè)操作數(shù)是字符時(shí)，+是字符串連接符）轉(zhuǎn)成number類型：++/--+-*/%><>=<===!====!===轉(zhuǎn)成boolean類型JS遇到預(yù)期為布爾值的地方(比如if語句的條件部分),就會(huì)將非布爾值的參數(shù)自動(dòng)轉(zhuǎn)換為布爾值。系統(tǒng)內(nèi)部會(huì)自動(dòng)調(diào)用Boolean函數(shù)。如果對(duì)非布爾值進(jìn)行運(yùn)算，則會(huì)將其轉(zhuǎn)換為布爾值，然后再取反。目

錄JavaScript語法基礎(chǔ)JavaScript數(shù)據(jù)類型JavaScript運(yùn)算符JavaScript語句JavaScript函數(shù)JavaScript運(yùn)算符一、賦值運(yùn)算符賦值運(yùn)算有以下兩種形式：簡(jiǎn)單的賦值運(yùn)算=：把等號(hào)右側(cè)操作數(shù)的值直接復(fù)制給左側(cè)的操作數(shù)，因此左側(cè)操作數(shù)的值會(huì)發(fā)生變化。附加操作的賦值運(yùn)算：賦值之前先對(duì)右側(cè)操作數(shù)執(zhí)行某種操作，然后把運(yùn)算結(jié)果復(fù)制給左側(cè)操作數(shù)。具體說明如表所示。JavaScript運(yùn)算符二、算數(shù)運(yùn)算符算術(shù)運(yùn)算符是最簡(jiǎn)單、最常用的運(yùn)算符，可以使用它們進(jìn)行通用的數(shù)學(xué)計(jì)算運(yùn)算符表達(dá)式說明示例+x+y返回x加y的值x=4+2，結(jié)果為6-x-y返回x減y的值x=8-6，結(jié)果為2*x*y返回x乘以y的值x=3*5，結(jié)果為15/x/y返回x除以y的值x=6/3，結(jié)果為2%x%y返回x與y的模（x除以y的余數(shù)）x=8%3，結(jié)果為2++x++、++x返回?cái)?shù)值遞增、遞增并返回?cái)?shù)值--x--、--x返回?cái)?shù)值遞減、遞減并返回?cái)?shù)值JavaScript運(yùn)算符三、邏輯運(yùn)算符邏輯運(yùn)算符通常用于執(zhí)行布爾運(yùn)算，JavaScript腳本語言的邏輯運(yùn)算符包括“&&”、“||”和“!”等，用于兩個(gè)邏輯型數(shù)據(jù)之間的操作，返回值的數(shù)據(jù)類型為布爾型。運(yùn)算符表達(dá)式說明示例&&表達(dá)式1&&表達(dá)式2若兩邊表達(dá)式的值都為ture，則返回ture；任意一個(gè)值為false，則返回false5>3&&5<6返回true5>3&&5>6返回false||表達(dá)式1||表達(dá)式2只有表達(dá)式的值都為false時(shí)，才返回false，否則返回true5>3||5>6返回true5>7||5>6返回false!!表達(dá)式求反。若表達(dá)式的值為true，則返回false，否則返回true!(5>3)返回false!(5>6)返回tureJavaScript運(yùn)算符四、關(guān)系運(yùn)算符關(guān)系運(yùn)算符用于比較兩個(gè)操作數(shù)的大小，其比較的結(jié)果是一個(gè)布爾型的值。運(yùn)算符說明示例==相等，若兩數(shù)據(jù)相等，則返回布爾值true，否則返回falsenum==8!=不相等，若兩數(shù)據(jù)不相等，則返回布爾值true，否則返回falsenum!=8>大于，若左邊數(shù)據(jù)大于右邊數(shù)據(jù)，則返回布爾值true，否則返回falsenum>8<小于，若左邊數(shù)據(jù)小于右邊數(shù)據(jù)，則返回布爾值true，否則返回falsenum<8>=大于或等于，若左邊數(shù)據(jù)大于或等于右邊數(shù)據(jù)，則返回布爾值true，否則返回falsenum>=8<=小于或等于，若左邊數(shù)據(jù)小于或等于右邊數(shù)據(jù)，則返回布爾值true，否則返回falsenum<=8JavaScript運(yùn)算符五、位運(yùn)算符位運(yùn)算符是對(duì)操作數(shù)按其在計(jì)算機(jī)內(nèi)表示的二進(jìn)制數(shù)逐位地進(jìn)行邏輯運(yùn)算或移位運(yùn)算。運(yùn)算符說明示例&按位與，若兩數(shù)據(jù)對(duì)應(yīng)位都是1，則該位為1，否則為09&4^按位異或，若兩數(shù)據(jù)對(duì)應(yīng)位相反，則該位為1，否則為09^4|按位或，若兩數(shù)據(jù)對(duì)應(yīng)位都是0，則該位為0，否則為19|4~按位非，若數(shù)據(jù)對(duì)應(yīng)位為0，則該位為1，否則為0~4>>算術(shù)右移，將左側(cè)數(shù)據(jù)的二進(jìn)制值向左移動(dòng)由右側(cè)數(shù)值表示的位數(shù)，右邊空位補(bǔ)09>>2<<算術(shù)左移，將左側(cè)數(shù)據(jù)的二進(jìn)制值向右移動(dòng)由右側(cè)數(shù)值表示的位數(shù)，忽略被移出的位9<<2>>>邏輯右移，將左邊數(shù)據(jù)表示的二進(jìn)制值向右移動(dòng)由右邊數(shù)值表示的位數(shù)，忽略被移出的位，左側(cè)空位補(bǔ)09>>>2JavaScript運(yùn)算符六、運(yùn)算符的關(guān)聯(lián)性和優(yōu)先級(jí)1、優(yōu)先級(jí)決定了表達(dá)式中運(yùn)算執(zhí)行的先后順序，優(yōu)先級(jí)高的運(yùn)算符最先被執(zhí)行vara=1+2*32、關(guān)聯(lián)性決定了擁有相同優(yōu)先級(jí)的運(yùn)算符的執(zhí)行順序aOPbOPc左關(guān)聯(lián)（左到右）:相當(dāng)于把左邊的子表達(dá)式加上小括號(hào)(aOPb)OPc右關(guān)聯(lián)（右到左）:相當(dāng)于

aOP(bOPc)。varm=8*4/16;JavaScript運(yùn)算符常用運(yùn)算符基本優(yōu)先級(jí)規(guī)則最高（）自增、自減、邏輯非

>

算術(shù)

>

關(guān)系

>

邏輯與、或

最低

？

:=，目

錄JavaScript語法基礎(chǔ)JavaScript數(shù)據(jù)類型JavaScript運(yùn)算符JavaScript語句JavaScript函數(shù)JavaScript語句JavaScript語句是發(fā)給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。通常要在每行語句的結(jié)尾加上一個(gè)分號(hào)，這是一個(gè)好的編程習(xí)慣。分號(hào)是可選的，瀏覽器把行末作為語句的結(jié)尾。正因如此，常常會(huì)看到一些結(jié)尾沒有分號(hào)的例子。通過使用分號(hào)，可以在一行中寫多條語句。語句流程控制：程序的三種基本結(jié)構(gòu)順序結(jié)構(gòu)：從上到下執(zhí)行的代碼就是順序結(jié)構(gòu)，程序默認(rèn)就是由上到下順序執(zhí)行的分支結(jié)構(gòu)：根據(jù)不同的情況，執(zhí)行對(duì)應(yīng)代碼循環(huán)結(jié)構(gòu)：重復(fù)做一件事情選擇語句循環(huán)語句跳轉(zhuǎn)語句異常處理語句JavaScript幾種語句JavaScript語句一、選擇語句根據(jù)條件選擇執(zhí)行哪些語句或不執(zhí)行哪些語句1、if語句if(表達(dá)式){

語句塊}

?

?

if(表達(dá)式){

語句塊1}else{語句塊2}if(表達(dá)式){

語句塊1}elseif(表達(dá)式){語句塊2}…..}else{語句塊n}if條件假設(shè)語句是比較簡(jiǎn)單的一種選擇結(jié)構(gòu)語句，若給定的邏輯條件表達(dá)式為真，則執(zhí)行一組給定的語句注意：if語句會(huì)把后面的值隱式轉(zhuǎn)換成布爾類型JavaScript語句2、switch...case語句提供了if…else語句的一個(gè)變通形式，可以從多個(gè)語句塊中選擇其中一個(gè)執(zhí)行。

switch(表達(dá)式){case常量1:

代碼塊break;case常量2:代碼塊break;…case常量n:代碼塊break;

default:代碼塊}執(zhí)行規(guī)則：計(jì)算一次switch表達(dá)式，把表達(dá)式的值與每個(gè)case的值進(jìn)行對(duì)比，如果存在匹配，則執(zhí)行關(guān)聯(lián)代碼break：遇到break關(guān)鍵詞，它會(huì)跳出switch代碼塊。break可以省略，如果省略，代碼會(huì)繼續(xù)執(zhí)行下一個(gè)casedefault：規(guī)定不存在case匹配時(shí)所運(yùn)行的代碼。default不必是switch代碼塊中最后一個(gè)case。switch語句在比較值時(shí)使用的是全等操作符。表達(dá)式的值必須與要匹配的類型相同。不同的case可以使用相同的代碼。JavaScript語句3、條件運(yùn)算符?：

運(yùn)算符用于創(chuàng)建條件分支。在動(dòng)作較為簡(jiǎn)單的情況下，較之if…else語句更加簡(jiǎn)便，其語法結(jié)構(gòu)如下：(條件表達(dá)式)?語句A:語句B;執(zhí)行規(guī)則：載入上述語句后，首先判斷條件表達(dá)式，若結(jié)果為真則執(zhí)行語句A，否則執(zhí)行語句B。JavaScript語句二、循環(huán)語句JavaScript中的基本循環(huán)語句包括while語句、do…while語句、for語句等幾種語句1、while語句while語句屬于前測(cè)試循環(huán)語句，用于在指定條件為真時(shí)重復(fù)執(zhí)行一組語句，循環(huán)次數(shù)為0次或多次。while(循環(huán)條件){

//循環(huán)體

}2、do...while語句do{

//循環(huán)體;

}while(循環(huán)條件);do…while是后測(cè)試循環(huán)語句，先執(zhí)行一次循環(huán)體，再判斷邏輯條件表達(dá)式是否為true，如果為true則重復(fù)執(zhí)行循環(huán)體中的語句，循環(huán)次數(shù)為1次或多次。JavaScript語句3、for語句for循環(huán)語句結(jié)構(gòu)簡(jiǎn)潔，它是前測(cè)試循環(huán)。它提供的是一種常用的循環(huán)模式，即初始化變量、判斷邏輯條件表達(dá)式和改變變量值。for(初始化表達(dá)式1;條件判斷表達(dá)式2;循環(huán)變量更新表達(dá)式3){

//循環(huán)體4

}執(zhí)行順序：1243----243-----243

(直到循環(huán)條件變成false)JavaScript語句4、for…in語句使用for…in循環(huán)語句可以遍歷數(shù)組的索引或者對(duì)象的屬性for(變量名in

對(duì)象名）{

語句塊}for(變量名of

對(duì)象名）{

語句塊}5、for…of語句使用for…of循環(huán)語句可以遍歷數(shù)組的數(shù)據(jù)JavaScript語句三、跳轉(zhuǎn)語句JavaScript跳轉(zhuǎn)語句指的是在循環(huán)控制語句的循環(huán)體中的指定位置或者滿足一定條件的情況下直接退出循環(huán)。分為break語句和continue語句。1．break語句特點(diǎn)：結(jié)束所有循環(huán)由于它是用來退出循環(huán)或者switch語句，所以只有當(dāng)它出現(xiàn)在這些語句時(shí)，這種形式的break語句才是合法的。2．continue語句特點(diǎn)：結(jié)束當(dāng)前這一次循環(huán)，繼續(xù)下一次循環(huán)JavaScript語句四、異常處理語句try{

//可能會(huì)導(dǎo)致錯(cuò)誤的代碼}catch(error){

//在錯(cuò)誤發(fā)生時(shí)怎么處理}finally{//始終會(huì)執(zhí)行的代碼塊}1、try-catch-finally語句try-catch-finally語句是JavaScript中的用于處理異常的語句，該語句與throw語句不同。throw語句只是拋出一個(gè)異常，但對(duì)該異常并不進(jìn)行處理，而try-catch-finally語句可以處理所拋出的異常。其語法形式如下所示：（1）自動(dòng)生成異常error對(duì)象（2）自定義error對(duì)象并拋出異常目

錄JavaScript語法基礎(chǔ)JavaScript數(shù)據(jù)類型JavaScript運(yùn)算符JavaScript語句JavaScript函數(shù)JavaScript函數(shù)一、函數(shù)是什么函數(shù)是將一些需要重復(fù)使用的腳本代碼組合在一起，實(shí)現(xiàn)某些特定功能，可以重復(fù)調(diào)用。二、函數(shù)使用步驟1、定義函數(shù)2、調(diào)用函數(shù)function

函數(shù)名([形參])

{

函數(shù)體

[return表達(dá)式值;]}三、函數(shù)說明（1）函數(shù)是一種用“{}”括起來的，可重復(fù)使用、具有特定功能的語句塊。每個(gè)函數(shù)都是獨(dú)立的語句塊。（2）函數(shù)名不要隨便取，盡量取有意義的英文名。（3）參數(shù)的個(gè)數(shù)，由函數(shù)功能來決定。參數(shù)可以沒有。多個(gè)參數(shù)之間用英文逗號(hào)隔開。參數(shù)的名字取有意義的。（4）如果函數(shù)只有定義沒有調(diào)用，JS會(huì)自動(dòng)忽略這個(gè)函數(shù)，不會(huì)去執(zhí)行它,這是毫無意義的。（5）通過函數(shù)可以提高代碼效率，也可以增加腳本的結(jié)構(gòu)化和模塊化。JavaScript函數(shù)四、函數(shù)的返回值1、沒有返回值的函數(shù)2、有返回值的函數(shù)說明：（1）有返回值的函數(shù)與沒有返回值的函數(shù)，兩者之間的區(qū)別，僅僅是多了一個(gè)return語句。return語句就是用來返回一個(gè)結(jié)果。（2）return后面的所有語句都不執(zhí)行（3）一個(gè)函數(shù)體中只能有一個(gè)returnJavaScript函數(shù)五、函數(shù)的參數(shù)1、普通參數(shù)傳遞：注意參數(shù)的數(shù)據(jù)類型和個(gè)數(shù)2、使用參數(shù)的默認(rèn)值3、通過解構(gòu)賦值傳遞多個(gè)參數(shù)4、使用...傳遞參數(shù)(spread擴(kuò)展)5、使用...收集參數(shù)（rest剩余）JavaScript函數(shù)六、內(nèi)置函數(shù)內(nèi)置函數(shù)，就是JavaScript內(nèi)部已經(jīng)定義好的一些函數(shù)。我們不需要寫什么函數(shù)體，不用關(guān)心它是如何實(shí)現(xiàn)的，只需要知道存在這樣功能的一個(gè)內(nèi)置函數(shù)，在需要用的時(shí)候，直接拿來使用就可以了。JavaScript程序設(shè)計(jì)與應(yīng)用JavaScript面向?qū)ο缶幊棠?/p>

錄JavaScript內(nèi)置對(duì)象JSON自定義對(duì)象對(duì)象概述目

錄JavaScript內(nèi)置對(duì)象JSON自定義對(duì)象對(duì)象概述一、對(duì)象和對(duì)象實(shí)例對(duì)象概述JavaScript是一門基于對(duì)象的腳本語言（基于原型的面向?qū)ο螅?、對(duì)象

在現(xiàn)實(shí)生活中，對(duì)象是一個(gè)具體的事物，是一種看得見、摸得著的東西。例如，一本書、一輛汽車、一個(gè)人。

在JavaScript中，對(duì)象是一種數(shù)據(jù)類型，它是由屬性和方法組成的一個(gè)集合。屬性是指事物的特征，方法是指事物的行為。例如，在JavaScript中描述手機(jī)對(duì)象，手機(jī)的屬性：尺寸、顏色；手機(jī)的方法：打電話、發(fā)短信。是一種復(fù)合值，它將很多值（原始值或者其他對(duì)象）聚合在一起，可通過名字訪問這些值。對(duì)象也可看做是屬性的無序集合，每個(gè)屬性都是一個(gè)名/值對(duì)。屬性名是字符串，因此我們可以把對(duì)象看成是從字符串到值的映射。對(duì)象只是一種特殊的數(shù)據(jù)。對(duì)象擁有屬性和方法。在代碼中，屬性可以看成是對(duì)象中保存的一個(gè)變量，使用“對(duì)象.屬性名”，方法可以看成是對(duì)象中保存的一個(gè)函數(shù)，使用“對(duì)象.方法名()”進(jìn)行訪問。對(duì)象不僅僅可以保持自有屬性，還可以從一個(gè)稱為原型的對(duì)象繼承屬性。對(duì)象的方法通常是繼承的屬性。這種“原型式繼承”（prototypalinheritance）是JavaScript的核心特征。2、對(duì)象的實(shí)例實(shí)例：是對(duì)象的具象化產(chǎn)品。比如一個(gè)具體的手機(jī)是手機(jī)對(duì)象的實(shí)例。對(duì)象可以有實(shí)例、實(shí)例一定是對(duì)象手機(jī)對(duì)象和實(shí)例對(duì)象概述對(duì)象概述二、對(duì)象的特點(diǎn)引用值變量名存儲(chǔ)在棧中，實(shí)際對(duì)象儲(chǔ)存在堆中，且存在一個(gè)指針由變量名指向儲(chǔ)存在堆中的實(shí)際對(duì)象引用值有屬性法引用值有自己的屬性和方法當(dāng)把一個(gè)原始變量傳遞給另一個(gè)原始變量時(shí)，是把一個(gè)棧房間的東西復(fù)制到另一個(gè)棧房間，且這兩個(gè)原始變量互不影響。當(dāng)把引用對(duì)象傳遞給另一個(gè)變量時(shí)，復(fù)制的其實(shí)是指向?qū)嶋H對(duì)象的指針，此時(shí)兩者指向的是同一個(gè)數(shù)據(jù)。若通過方法改變其中一個(gè)變量的值，則訪問另一個(gè)變量時(shí)，其值也會(huì)隨之加以改變。但若不是通過方法而是通過重新賦值，該值的原指針改變，則另外一個(gè)值不會(huì)隨他的改變而改變。目

錄JavaScript內(nèi)置對(duì)象JSON自定義對(duì)象對(duì)象概述一、Number對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象Number是對(duì)應(yīng)于原始數(shù)值類型和提供數(shù)值常數(shù)的對(duì)象。（實(shí)例）二、Boolean對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象Boolean是對(duì)應(yīng)于原始邏輯數(shù)據(jù)類型的對(duì)象，它表示原始的Boolean值，只有true和false兩個(gè)狀態(tài)。（實(shí)例）三、String對(duì)象

String是對(duì)應(yīng)于原始字符串?dāng)?shù)據(jù)類型的對(duì)象。在JavaScript腳本程序編寫過程中，String對(duì)象是最為常見的處理目標(biāo)，用于存儲(chǔ)較短的數(shù)據(jù)。JavaScript語言提供了豐富的屬性和方法支持，方便Web應(yīng)用程序開發(fā)者靈活地操縱String對(duì)象的實(shí)例。四、Math對(duì)象Math對(duì)象在JS中屬于抽象對(duì)象，不是構(gòu)造函數(shù)，不能創(chuàng)建實(shí)例。五、Array對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象數(shù)組是包含基本和組合數(shù)據(jù)類型的有序序列。數(shù)組的實(shí)例[1,2,3]['a','b','c'][1,'a',true][{name:'jack',age:20},{name:'mary',age:18}]ECMAScript中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當(dāng)大的區(qū)別（實(shí)例）六、Set對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象類似于數(shù)組，但是成員的值都是唯一的數(shù)組的實(shí)例（實(shí)例）七、Map對(duì)象Map對(duì)象就是一個(gè)鍵值對(duì)的集合，但是鍵的范圍不限于字符串，各種類型的值都可以當(dāng)作鍵八、Date對(duì)象Date對(duì)象可以表示從毫秒到年的所有時(shí)間和日期，并提供了一系列操作時(shí)間和日期的方法。Date對(duì)象的構(gòu)造函數(shù)通過可選的參數(shù)，可生成表示過去、現(xiàn)在和將來的Date對(duì)象。其構(gòu)造方式有四種，分別如下：varmyDate=newDate();varmyDate=newDate(milliseconds);varmyDate=newDate(string);varmyDate=newDate(year,month,day,hours,minutes,seconds,milliseconds);九、RegExp對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象RegularExpression正則表達(dá)式的縮寫。是事先定義好的一些特定字符及這些特定字符的組合，組成一個(gè)“規(guī)則字符串”，可以用來檢索、替換文本。簡(jiǎn)單的模式可以是一個(gè)單獨(dú)的字符，更復(fù)雜的模式可以用于格式檢查、替換、解析等。（實(shí)例）十、Error對(duì)象Error對(duì)象用來保存有關(guān)錯(cuò)誤的信息。十一、Object對(duì)象Object對(duì)象是屬性和屬性值的集合。內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象（實(shí)例）十二、Function對(duì)象內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象（實(shí)例）ECMAScript的函數(shù)實(shí)際上是功能完整的對(duì)象。構(gòu)造函數(shù):都是Function對(duì)象的實(shí)例1、創(chuàng)建函數(shù)實(shí)例的方法：構(gòu)造函數(shù)（很少用）、函數(shù)聲明、匿名函數(shù)2、箭頭函數(shù)

在JavaScript中，函數(shù)可以用箭頭語法（”=>”）來定義，我們稱之為箭頭函數(shù)，有時(shí)候也叫“l(fā)ambda表達(dá)式”。Lambda表達(dá)式（lambdaexpression）基于數(shù)學(xué)中的λ演算得名，直接對(duì)應(yīng)于其中的lambda抽象（lambdaabstraction）。Lambda表達(dá)式是一個(gè)匿名函數(shù)，即沒有函數(shù)名的函數(shù)。箭頭函數(shù)表達(dá)式的語法比函數(shù)表達(dá)式更簡(jiǎn)潔，相比函數(shù)表達(dá)式它沒有自己的this、arguments、super或new.target。箭頭函數(shù)表達(dá)式更適用于那些本來需要匿名函數(shù)的地方，并且它不能用作構(gòu)造函數(shù)。3、函數(shù)的屬性和方法內(nèi)置函數(shù)JavaScript內(nèi)置對(duì)象（實(shí)例）4、即時(shí)執(zhí)行函數(shù)IIFE（ImmediatelyInvokedFunctionExpression）在定義時(shí)就會(huì)立即執(zhí)行的函數(shù)，即函數(shù)定義變成了一個(gè)函數(shù)調(diào)用語句5、回調(diào)函數(shù)一個(gè)函數(shù)A作為參數(shù)傳遞給另一個(gè)函數(shù)B，然后在B的函數(shù)體內(nèi)調(diào)用函數(shù)A，A稱為回調(diào)函數(shù)。

其中，匿名函數(shù)常用作函數(shù)的參數(shù)傳遞以實(shí)現(xiàn)回調(diào)函數(shù)。6、閉包JS的函數(shù)擁有相對(duì)獨(dú)立的作用域。函數(shù)內(nèi)部聲明的是局部變量（函數(shù)參數(shù)也是局部變量），函數(shù)外部無法訪問內(nèi)部的局部變量。函數(shù)可以訪問外部的全部變量。當(dāng)內(nèi)部函數(shù)作為返回值時(shí)，因?yàn)楹瘮?shù)結(jié)束后內(nèi)部變量的引用并未結(jié)束，函數(shù)的執(zhí)行環(huán)境被保留下來，可以通過該引用訪問本該被回收的內(nèi)部變量，從而形成了閉包效果。閉包：函數(shù)以及可訪問的外部的自由變量。當(dāng)函數(shù)作為返回值時(shí)，外部可以訪問內(nèi)部的變量由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問題，可能導(dǎo)致內(nèi)存泄露。目

錄JavaScript內(nèi)置對(duì)象JSON自定義對(duì)象對(duì)象概述內(nèi)置函數(shù)JSON（實(shí)例）一、什么是JSONJSON(JavaScript

ObjectNotation)是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于

ECMAScript

(歐洲計(jì)算機(jī)協(xié)會(huì)制定的js規(guī)范)的一個(gè)子集，采用完全獨(dú)立于編程語言的文本格式來存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語言。易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。JSON是DouglasCrockford在2001年開始推廣使用的數(shù)據(jù)格式，在2005年-2006年正式成為主流的數(shù)據(jù)格式，雅虎和谷歌就在那時(shí)候開始廣泛地使用JSON格式。JSON是JS對(duì)象的字符串表示法，它使用文本表示一個(gè)JS對(duì)象的信息，本質(zhì)是一個(gè)字符串。內(nèi)置函數(shù)JSON（實(shí)例）JSON格式可以用來表示一系列的值

100“abc”truenull[1,2,3,“one”]{“name”:“Amy”}簡(jiǎn)單值或復(fù)合值字符串類型的值只能用雙引號(hào)，不能用單引號(hào)對(duì)象的屬性名必須加雙引號(hào)特殊值：對(duì)象中的undefined、函數(shù)會(huì)被忽略，數(shù)組中的則會(huì)轉(zhuǎn)成null內(nèi)置函數(shù)JSON（實(shí)例）二、、JSON和JavaScript對(duì)象之間的互相轉(zhuǎn)換 1、要實(shí)現(xiàn)從JSON字符串轉(zhuǎn)換為JS對(duì)象，使用JSON.parse()方法： letobj=JSON.parse('{"a":"Hello","b":"World"}’);//結(jié)果是{a:'Hello',b:'World’} 2、要實(shí)現(xiàn)從JS對(duì)象轉(zhuǎn)換為JSON字符串，使用JSON.stringify()方法： letjson=JSON.stringify({a:'Hello',b:'World'});//結(jié)果是'{"a":"Hello","b":"World"}'目

錄JavaScript內(nèi)置對(duì)象JSON自定義對(duì)象對(duì)象概述一、構(gòu)造函數(shù)和原型的混合方式這種方式是ECMAScript中使用最廣泛，認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。構(gòu)造函數(shù)模式用于定義實(shí)例屬性。創(chuàng)建實(shí)例時(shí)會(huì)將屬性復(fù)制一份，每個(gè)實(shí)例都有自己的一份實(shí)例屬性的副本，而且還支持向構(gòu)造函數(shù)傳遞參數(shù)。原型模式用于定義方法和共享的屬性。每個(gè)實(shí)例繼承它的構(gòu)造函數(shù)的原型的屬性和方法(不會(huì)多次創(chuàng)建方法)。這樣，最大限度的節(jié)省了內(nèi)存。自定義對(duì)象（實(shí)例）二、ES6新語法自定義對(duì)象

classCar{

//1）定義屬性

constructor(sColor,iDoors){

this._color=sColor

this._doors=iDoors

};

//2）定義方法

drive(driver){

console.log(driver+"isdrivingthecar!");

}

showInfo(){

console.log("Thecarwith"+this._doors+"doorsis"+this._color+".");

}

}

letcar1=newCar('blue',6)

car1.drive('Jack')

car1.showInfo()JavaScript程序設(shè)計(jì)與應(yīng)用DOM文檔對(duì)象模型目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作一、DOM是什么內(nèi)置函數(shù)DOM基礎(chǔ)1、WebAPIsAPI：應(yīng)用程序編程接口，是一些預(yù)定義的接口（如函數(shù)等），通過接口我們可以實(shí)現(xiàn)某種功能，但是使用時(shí)我們不需了解接口這個(gè)功能具體是如何實(shí)現(xiàn)的。WebAPIs：指瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的API（DOM和BOM）。2、DOM定義文檔對(duì)象模型DOM（DocumentObjectModel）：是W3C組織推薦的可擴(kuò)展標(biāo)記語言（html或者xml）的標(biāo)準(zhǔn)編程接口。是一個(gè)與語言無關(guān)、與平臺(tái)無關(guān)的標(biāo)準(zhǔn)接口規(guī)范。它定義了HTML文檔的邏輯結(jié)構(gòu)，給出了一種訪問和處理HTML文檔的方法。通過DOM接口，JavaScript可以在任何時(shí)候訪問并操作HTML文檔中的任何一部分?jǐn)?shù)據(jù)?？梢詣?dòng)態(tài)地創(chuàng)建文檔，遍歷文檔結(jié)構(gòu)，添加、修改、刪除文檔內(nèi)容，改變文檔的顯示方式等，從而實(shí)現(xiàn)頁(yè)面交互效果。一、DOM是什么內(nèi)置函數(shù)DOM基礎(chǔ)1、WebAPIsAPI：應(yīng)用程序編程接口，是一些預(yù)定義的接口（如函數(shù)等），通過接口我們可以實(shí)現(xiàn)某種功能，但是使用時(shí)我們不需了解接口這個(gè)功能具體是如何實(shí)現(xiàn)的。WebAPIs：指瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的API（DOM和BOM）。2、DOM定義文檔對(duì)象模型DOM（DocumentObjectModel）：是W3C組織推薦的可擴(kuò)展標(biāo)記語言（html或者xml）的標(biāo)準(zhǔn)編程接口。是一個(gè)與語言無關(guān)、與平臺(tái)無關(guān)的標(biāo)準(zhǔn)接口規(guī)范。它定義了HTML文檔的邏輯結(jié)構(gòu)，給出了一種訪問和處理HTML文檔的方法。通過DOM接口，JavaScript可以在任何時(shí)候訪問并操作HTML文檔中的任何一部分?jǐn)?shù)據(jù)?？梢詣?dòng)態(tài)地創(chuàng)建文檔，遍歷文檔結(jié)構(gòu)，添加、修改、刪除文檔內(nèi)容，改變文檔的顯示方式等，從而實(shí)現(xiàn)頁(yè)面交互效果。二、DOM樹DOM基礎(chǔ)1、定義DOM接口提供了一種依據(jù)HTML的文檔結(jié)構(gòu)的分層對(duì)象模型。在瀏覽器中，基于DOM的HTML分析器將一個(gè)頁(yè)面轉(zhuǎn)換成一個(gè)對(duì)象模型的集合（通常稱DOM樹）。DOM基礎(chǔ)2、節(jié)點(diǎn)DOM樹中的每一個(gè)對(duì)象我們稱之為節(jié)點(diǎn)，所以我們也稱這個(gè)根據(jù)文檔生成的層次結(jié)構(gòu)是一棵節(jié)點(diǎn)樹。不管一個(gè)文檔有多簡(jiǎn)單或者多復(fù)雜，其中的信息都會(huì)被轉(zhuǎn)化成一棵對(duì)象節(jié)點(diǎn)樹。在這棵節(jié)點(diǎn)樹中，有一個(gè)根節(jié)點(diǎn)即Document節(jié)點(diǎn)，所有其他的節(jié)點(diǎn)都是根節(jié)點(diǎn)的后代節(jié)點(diǎn)。DOM中的節(jié)點(diǎn)有元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等不同類型，最常用的節(jié)點(diǎn)類型有元素、文本和屬性節(jié)點(diǎn)這三種。DOM基礎(chǔ)3、節(jié)點(diǎn)類型Node.ELEMENT_NODE(1)

一個(gè)標(biāo)記（元素）Node.ATTRIBUTE_NODE(2)

表示一個(gè)標(biāo)記（元素）的屬性Node.TEXT_NODE(3)

表示一個(gè)元素的文本內(nèi)容Node.CDATA_SECTION_NODE(4)

在XML文檔中表示CharacterData（字符數(shù)據(jù)）部分Node.ENTITY_REFERENCE_NODE(5)

在文檔中表示一個(gè)實(shí)體引用Node.ENTITY_NODE(6)

在XML文檔中表示一個(gè)實(shí)體Node.PROCESSING_INSTRUCTION_NODE(7)

表示一個(gè)文檔處理程序使用的特有指令Node.COMMENT_NODE(8)

：表示一個(gè)注釋Node.DOCUMENT_NODE(9)

表示文檔的根節(jié)點(diǎn)Node.DOCUMENT_TYPE_NODE(10)

每個(gè)文檔節(jié)點(diǎn)都有一個(gè)DocumentType節(jié)點(diǎn)，它提供文檔類型的定義Node.DOCUMENT_FRAGMENT_NODE(11)

可以將文檔片段看作輕量級(jí)或者更小型的Document節(jié)點(diǎn)。定義這種數(shù)據(jù)類型是因?yàn)橥ǔＯＭ惶崛∥臋n的一部分來處理。Node.NOTATION_NODE(12)

在XML文檔中表示一個(gè)符號(hào)DOM基礎(chǔ)4、Document對(duì)象每個(gè)載入瀏覽器的HTML頁(yè)面都會(huì)成為document對(duì)象（即該HTML頁(yè)面對(duì)應(yīng)的DOM）。document對(duì)象使我們可以通過JavaScript對(duì)HTML頁(yè)面中的所有元素進(jìn)行訪問。（1）Document對(duì)象document對(duì)象是window對(duì)象的一部分，可通過window.document屬性對(duì)其進(jìn)行訪問。（2）Document對(duì)象集合DOM基礎(chǔ)（3）Document對(duì)象屬性（4）Document對(duì)象方法4、Document對(duì)象目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作獲取元素節(jié)點(diǎn)二、獲取html元素三、獲取其他元素getElementById（‘id名’）：返回的是指定id名的元素getElementsByTagName（’標(biāo)記名’）：返回的是指定標(biāo)記名的所有元素的集合，以偽數(shù)組的形式存儲(chǔ)的getElementsByName（’name名’）：返回的是指定name名的所有元素的集合getElementsByClassName（’類名’）：返回的是指定class名的所有元素的集合querySelector（’選擇器’）：返回的是指定選擇器的第一個(gè)元素querySelectorAll（’選擇器’）：返回的是指定選擇器的所有元素的集合一、獲取body元素document.bodydocument.documentElement目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作操作元素一、改變?cè)貎?nèi)容

利用DOM找到元素，我們可以獲取元素的內(nèi)容并且修改它們。1、innerText、innerHTML2、outerText、outerHTML3、textContent

innerHTML屬性可以設(shè)置或獲取標(biāo)簽所包含的HTML和文本信息(不包括自身標(biāo)簽)

innerText屬性可以設(shè)置或獲取標(biāo)簽所包含的文本信息(不包括內(nèi)部標(biāo)簽和自身標(biāo)簽)。outerHTML屬性可以設(shè)置或獲取標(biāo)簽自身及其所包含的HTML和文本信息（包括自身標(biāo)簽）

outerText屬性在獲取時(shí)和innerText是相同的效果，但是設(shè)置時(shí)包含標(biāo)簽自身在內(nèi)的文本。textContent會(huì)獲取style=“display:none”中的文本，而innerText不會(huì)；

textContent會(huì)按照html代碼里的格式輸出，innerText會(huì)根據(jù)標(biāo)簽里面的元素獨(dú)立一行；

innerText對(duì)IE的兼容性較好，textContent雖然作為標(biāo)準(zhǔn)方法但是只支持IE8+以上的瀏覽器，最新的瀏覽器兩個(gè)都可以使用操作元素二、操作元素屬性除了獲取元素內(nèi)容，獲取和設(shè)置元素的屬性值也是經(jīng)常進(jìn)行的操作。一般來說，瀏覽器在解析HTML頁(yè)面時(shí)元素具有的屬性列表是與收集自元素本身表示的信息一起預(yù)載入的，并存儲(chǔ)在一個(gè)關(guān)聯(lián)數(shù)組中供稍后訪問。1、通過attributes操作元素屬性（1）元素的attributes屬性保存了該元素的所有html屬性值。（2）getAttribute()方法可以獲取元素的某個(gè)屬性。（3）setAttribute()方法可以設(shè)置元素的某個(gè)屬性。（3）removeAttribute()方法可以刪除元素的某個(gè)屬性。2、通過其它方式操作元素屬性我們也可以直接通過‘.’或者[]的方式來獲取元素的屬性（1）常用元素屬性，如src、title、id等屬性。（2）表單元素屬性，如type、value、checked、selected、disabled等屬性。（3）使用[]操作屬性變量。

操作元素3、樣式屬性我們可以通過JavaScript修改元素的大小、顏色、位置等樣式（1）element.style行內(nèi)樣式操作，可以操作元素style屬性。

例如：this.style.color=‘red’（2）element.className類名樣式操作，可以操作元素的類

例如：this.className=‘stu’如果修改樣式較多，可以采取操作類名方式更改元素樣式因?yàn)閏lass是一個(gè)保留字，因此使用className來操作元素類名屬性className會(huì)直接更改元素的類名，并覆蓋原有的類名。目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)一、父子關(guān)系1、父節(jié)點(diǎn)

node.parentNode2、子節(jié)點(diǎn)（1）childNodes（標(biāo)準(zhǔn)）

獲取的子節(jié)點(diǎn)中包含換行文本節(jié)點(diǎn)，一般不提倡使用（2）children(非標(biāo)準(zhǔn))獲取的子節(jié)點(diǎn)中不包含換行文本節(jié)點(diǎn)（3）第一個(gè)子元素

firstChild、firstElementChild(IE9)、children[0]（4）最后一個(gè)元素

lastChild、lastElementChild(IE9)、children[length-1]二、兄弟關(guān)系1、下一個(gè)兄弟node.nextSiblingnextElementSilbling(IE9)2、上一個(gè)兄弟node.previousSiblingpreviousElementSilbling(IE9)目

錄DOM基礎(chǔ)獲取元素節(jié)點(diǎn)操作元素利用層級(jí)關(guān)系獲取元素節(jié)點(diǎn)節(jié)點(diǎn)操作節(jié)點(diǎn)操作一、創(chuàng)建節(jié)點(diǎn)1、創(chuàng)建元素節(jié)點(diǎn)：document.createElement(‘tagName’)2、創(chuàng)建文本節(jié)點(diǎn)：document.creatTextNode(‘’)二、添加節(jié)點(diǎn)1、添加到末尾：node.appendChild(child)2、指定位置插入：node.insertBefore(child,指定元素)三、刪除節(jié)點(diǎn)node.removeChild(child)四、復(fù)制節(jié)點(diǎn)（克隆節(jié)點(diǎn)）node.cloneNode（）返回調(diào)用該方法的節(jié)點(diǎn)的第一個(gè)副本參數(shù)為false只復(fù)制節(jié)點(diǎn)本身不復(fù)制里面的子節(jié)點(diǎn)參數(shù)為true會(huì)復(fù)制節(jié)點(diǎn)本身以及里面所有的子節(jié)點(diǎn)。節(jié)點(diǎn)操作五、文檔碎片1、定義

當(dāng)我們用DOM向頁(yè)面插入元素的時(shí)候，每插入一個(gè)元素，頁(yè)面就會(huì)渲染一次，但當(dāng)我們要插入過多元素的時(shí)候，頁(yè)面渲染的次數(shù)會(huì)使得DOM的操作性能降低。而在這個(gè)過程中，我們每次創(chuàng)建好一個(gè)元素的時(shí)候，不直接插入頁(yè)面中，而是插入文檔碎片里，最后再一次性地把所有元素插入頁(yè)面中，這樣頁(yè)面只需要渲染一次，極大地提高了性能。2、使用方法createDocumentFragment()方法創(chuàng)建了一虛擬的節(jié)點(diǎn)對(duì)象，節(jié)點(diǎn)對(duì)象包含所有屬性和方法。當(dāng)你想提取文檔的一部分，改變、增加或刪除某些內(nèi)容及插入到文檔末尾可以使用createDocumentFragment()方法。JavaScript程序設(shè)計(jì)與應(yīng)用事件處理目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、什么是事件事件概述

事件是指用戶載入目標(biāo)頁(yè)面直到該頁(yè)面被關(guān)閉期間瀏覽器的動(dòng)作及該頁(yè)面對(duì)用戶操作的響應(yīng)。二、事件三要素1、事件源（瀏覽器或頁(yè)面元素)：瀏覽器、body、p等。2、事件觸發(fā)類型（動(dòng)作）:瀏覽器事件如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus等。HTML元素事件如點(diǎn)擊按鈕、拖動(dòng)圖片等。3、事件處理程序（響應(yīng)）:事件處理器是與特定的文本和特定的事件相聯(lián)系的JavaScript腳本代碼，當(dāng)該文本發(fā)生改變或者事件被觸發(fā)時(shí)，瀏覽器執(zhí)行該代碼并進(jìn)行相應(yīng)的處理操作，而響應(yīng)某個(gè)事件而進(jìn)行的處理過程稱為事件處理。目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、注冊(cè)事件方式內(nèi)置函數(shù)事件處理方式給元素添加事件稱為注冊(cè)事件或綁定事件，注冊(cè)事件有兩種方式：傳統(tǒng)方式和綁定事件偵聽器1、傳統(tǒng)方式利用on開頭的事件onclick缺點(diǎn)：同一個(gè)元素同一個(gè)事件只能設(shè)置一個(gè)處理函數(shù)，最后注冊(cè)的處理函數(shù)將會(huì)覆蓋前面注冊(cè)的處理函數(shù)。2、綁定事件偵聽器利用addEventListener(type，listener[,useCapture)方法注冊(cè)事件。type:不帶on的事件類型字符串，例如click、mouseover等;listener：事件處理程序，事件發(fā)生時(shí)會(huì)調(diào)用該監(jiān)聽函數(shù);useCapture：可選參數(shù)，是一個(gè)布爾值，默認(rèn)為falseW3C標(biāo)準(zhǔn)推薦方式IE9之前不支持這個(gè)方法，可以使用attachEvent（）代替特點(diǎn)：同一個(gè)元素同一個(gè)事件可以注冊(cè)多個(gè)監(jiān)聽器，按注冊(cè)順序依次執(zhí)行。二、刪除事件方式內(nèi)置函數(shù)事件處理方式1、傳統(tǒng)注冊(cè)方式eventTarget.onclick=null;2、綁定事件偵聽器的方式eventTarget.removeEventListener(type，listener)；目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、什么是事件對(duì)象內(nèi)置函數(shù)事件對(duì)象

注冊(cè)事件時(shí)系統(tǒng)自動(dòng)生成的一個(gè)包含事件相關(guān)的一系列信息數(shù)據(jù)的集合，它會(huì)傳遞給事件處理程序。同時(shí)，這個(gè)對(duì)象有很多屬性和方法。鼠標(biāo)觸發(fā)事件的得到的是鼠標(biāo)的相關(guān)信息，鍵盤觸發(fā)事件得到的是鍵盤的相關(guān)信息。二、使用事件對(duì)象

eventTarget.onclick=function(event){}eventTarget.addEventListener(‘click’,function(event){}//event:事件對(duì)象，可以自己命名，通常命名為event、e、evt三、事件對(duì)象的常見屬性和方法內(nèi)置函數(shù)事件對(duì)象四、鼠標(biāo)事件對(duì)象內(nèi)置函數(shù)事件對(duì)象內(nèi)置函數(shù)事件對(duì)象五、鍵盤事件的常用方法目

錄事件處理方式事件對(duì)象事件處理高級(jí)應(yīng)用事件概述一、DOM事件流內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用1、事件流指的是頁(yè)面中事件接收的順序。2、事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播的過程即使DOM事件流捕獲階段(從根節(jié)點(diǎn)開始順著目標(biāo)節(jié)點(diǎn)構(gòu)建一條事件路徑，即事件由頁(yè)面元素接收，逐級(jí)向下，到具體的元素)目標(biāo)階段(到達(dá)目標(biāo)節(jié)點(diǎn)，即元素本身)冒泡階段(從目標(biāo)節(jié)點(diǎn)順著捕獲階段構(gòu)建的路徑回去，即跟捕獲相反具體元素本身，逐級(jí)向上，到頁(yè)面元素)內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用3、事件流中的注意事項(xiàng)JavaScript代碼中只能執(zhí)行捕獲或者冒泡的一個(gè)階段傳統(tǒng)綁定方式和IE早期瀏覽器只支持冒泡addEventListen()方法的第三個(gè)參數(shù)是布爾值，true表示事件在捕獲階段調(diào)用事件處理程序，false則在冒泡階段調(diào)用事件處理程序。實(shí)際開發(fā)中很少使用事件捕獲，后面會(huì)講到冒泡的應(yīng)用有些事件沒有冒泡，例如onblur、onfoucs等二、事件委托內(nèi)置函數(shù)事件處理高級(jí)應(yīng)用

有時(shí)候需要綁定的子節(jié)點(diǎn)很多，一個(gè)個(gè)地添加事件處理非常繁瑣，這時(shí)可以將事件綁定在這些節(jié)點(diǎn)的父節(jié)點(diǎn)上，利用事件冒泡的原理，觸發(fā)子節(jié)點(diǎn)時(shí)父節(jié)點(diǎn)也可以接收到事件，同時(shí)也會(huì)影響到每一個(gè)子節(jié)點(diǎn)。1、事件委托的原理2、事件委托的優(yōu)點(diǎn)利用事件委托，只操作了一次DOM,提高了程序的性能。JavaScript程序設(shè)計(jì)與應(yīng)用BOM瀏覽器對(duì)象模型目

錄BOM基礎(chǔ)window對(duì)象location對(duì)象navigator對(duì)象history對(duì)象screen對(duì)象目

錄BOM基礎(chǔ)window對(duì)象location對(duì)象navigator對(duì)象history對(duì)象screen對(duì)象一、BOM概述內(nèi)置函數(shù)BOM基礎(chǔ)BOM(BrowserObjectModel)瀏覽器對(duì)象模型，也是一個(gè)WebAPIs接口，它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，即把瀏覽器當(dāng)作一個(gè)對(duì)象來看，BOM的頂級(jí)對(duì)象是window。二、BOM的構(gòu)成BOM由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多屬性和方法。通過這些對(duì)象我們可以與瀏覽器窗口進(jìn)行交互。目

錄BOM基礎(chǔ)window對(duì)象location對(duì)象navigator對(duì)象history對(duì)象screen對(duì)象一、window對(duì)象window對(duì)象1、window對(duì)象是瀏覽器的頂級(jí)對(duì)象，它是JavaScript訪問瀏覽器的一個(gè)接口。2、window是JavaScript在瀏覽器中的全局對(duì)象。定義在全局作用域中的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。在調(diào)用的時(shí)候可以省略window。二、window對(duì)象的常用事件window對(duì)象1、onload事件加載當(dāng)文檔內(nèi)容完全加載完成會(huì)觸發(fā)該事件(包括圖像、腳本文件、CSS文件等)通過onload可以將JS代碼寫到頁(yè)面元素的上方而不會(huì)影響代碼的執(zhí)行2、onDOMContentLoaded加載DOMContentLoaded事件觸發(fā)時(shí)，僅當(dāng)DOM加載完成，不包括樣式表、圖片、flash等。IE9以上支持如果頁(yè)面的圖片很多，從用戶訪問到onload觸發(fā)可能需要較長(zhǎng)的事件導(dǎo)致頁(yè)面交互效果不能實(shí)現(xiàn)，此時(shí)用DOMContentLoaded更合適3、調(diào)整窗口大小window.onresize：當(dāng)調(diào)整窗口大小時(shí)會(huì)觸發(fā)事件，利用這個(gè)事件可以實(shí)現(xiàn)響應(yīng)式布局三、window對(duì)象的方法window對(duì)象1、窗口操作方法（1）open()：打開新的窗口（2）moveBy()、moveTo()：移動(dòng)窗口位置（3）resizeBy()、resizeTo()：改變窗口大?。?）print()：打印窗口（5）scrollBy()、scrollTo()：滾動(dòng)窗口（6）close()：關(guān)閉窗口window對(duì)象2、三種對(duì)話框“對(duì)話框”是指那些為用戶提供有用信息的彈出窗口。(1)alert()方法:只接受一個(gè)參數(shù)，即要顯示給用戶的文本。調(diào)用alert()方法后，瀏覽器將創(chuàng)建一個(gè)具有確定按鈕的系統(tǒng)消息框，顯示指定的文本。通常用于一些對(duì)用戶的提示信息，例如在表單中輸入了錯(cuò)誤的數(shù)據(jù)時(shí)，顯示警告對(duì)話框。(2)prompt()方法：提示用戶輸入某些信息，接受兩個(gè)參數(shù)，即要顯示給用戶的文本和文本框中的默認(rèn)文本。如果點(diǎn)擊“確定”按鈕，將文本框中的值作為函數(shù)值返回；如果點(diǎn)擊“取消”按鈕，返回空值。(3)confirm()方法：只接受一個(gè)參數(shù)，即要顯示的文本，瀏覽器創(chuàng)建一個(gè)具有“確定”按鈕和“取消”按鈕的系統(tǒng)消息框，顯示指定的文本。該方法返回一個(gè)布爾值，如果點(diǎn)擊“確定”按鈕，返回true；點(diǎn)擊“取消”按鈕，返回false。window對(duì)象3、setTimeout定時(shí)器（1）setTimeout()方法：用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。該方法接受兩個(gè)參數(shù)，要執(zhí)行的代碼和在執(zhí)行它之前要等待的毫秒數(shù)（1/1000秒）。（2）clearTimeout()方法:如果要取消還未執(zhí)行的暫停，可調(diào)用clearTimeout()方法，并將暫停ID傳遞給它

調(diào)用函數(shù)可以寫函數(shù)、函數(shù)名或者字符串形式的函數(shù)名毫秒數(shù)省略時(shí)默認(rèn)為0可以給定時(shí)器賦值一個(gè)標(biāo)識(shí)符，也叫暫停IDwindow對(duì)象4、setInterval定時(shí)器(1)setInterval()方法:與setTimeout()相似，只是它無限次地每隔指定的時(shí)間段就重復(fù)一次