版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
網(wǎng)頁設(shè)計與制作實踐(微視頻)
第4章JavaScript基礎(chǔ)
本章學(xué)習(xí)目標(biāo)
掌握J(rèn)avaScript腳本的語言基礎(chǔ)理解DOM（DocumentObjectModel，文檔對象模型）及常用系統(tǒng)對象學(xué)會使用JavaScript操作DOM元素、屬性和CSS樣式掌握J(rèn)avaScript基于事件驅(qū)動的編程模型及常用事件掌握jQuery框架的基本使用
4.1JavaScript語言基礎(chǔ)
4.1.1JavaScript簡介JavaScript（簡稱“JS”）是一種具有函數(shù)優(yōu)先、輕量級、解釋型或即時編譯型的編程語言。在過去的十年間，Node.js的發(fā)展讓瀏覽器環(huán)境外的JavaScript編程也變得開始流行起來。
4.1JavaScript語言基礎(chǔ)
4.1.1JavaScript簡介
JavaScript作為Web頁面腳本語言的JavaScript是由以下三個部分組成。ES規(guī)范描述了該語言的語法和基本對象DOM模型描述處理網(wǎng)頁內(nèi)容的方法和接口BOM模型描述與瀏覽器進(jìn)行交互的方法和接口
4.1JavaScript語言基礎(chǔ)
4.1.2JavaScript初步探索
如何引入JS
使用<script></script>標(biāo)簽將JavaScript語言編寫的程序代碼嵌入到HTML頁面
使用<script></script>標(biāo)簽將外部獨立的“.js”程序文件導(dǎo)入到HTML頁面中
JavaScript腳本可被放置在頁面的<head>區(qū)域，也可以放置在<body>區(qū)域
4.1JavaScript語言基礎(chǔ)
4.1.2JavaScript初步探索
控制臺打印和彈窗
使用console.log()在控制臺打印輸出
使用alert()函數(shù)進(jìn)行彈窗
瀏覽器打開Web開發(fā)者工具的方法是按下【F12】鍵
4.1JavaScript語言基礎(chǔ)
4.1.2JavaScript初步探索JS執(zhí)行順序
默認(rèn)按照代碼出現(xiàn)的順序依次加載執(zhí)行
如果腳本中需要操作文檔內(nèi)容，則要等待HTML文檔加載完成后再執(zhí)行腳本，可以將腳本代碼放在文檔的最后，或者將JavaScript腳本代碼放在window.onload事件的回調(diào)函數(shù)中
4.1JavaScript語言基礎(chǔ)
4.1.2JavaScript初步探索JavaScript基礎(chǔ)示例
參見教學(xué)視頻4.01-4.05
4.1JavaScript語言基礎(chǔ)
4.1.3JavaScript的詞法結(jié)構(gòu)
詞法結(jié)構(gòu)是最基本的程序編寫規(guī)則1.程序文本：區(qū)分大小寫字母2.注釋
（1）單行，//...
（2）多行，/*...*/
4.1JavaScript語言基礎(chǔ)
4.1.3JavaScript的詞法結(jié)構(gòu)
詞法結(jié)構(gòu)是最基本的程序編寫規(guī)則3.標(biāo)識符：用于命名常量、變量、屬性、函數(shù)和類等
（1）以字母、下劃線（_）或美元符（$）開頭
（2）后續(xù)則可以是字母、數(shù)字、下劃線（_）或者美元符號（$）
4.1JavaScript語言基礎(chǔ)
4.1.3JavaScript的詞法結(jié)構(gòu)
詞法結(jié)構(gòu)是最基本的程序編寫規(guī)則3.標(biāo)識符：語言關(guān)鍵字
as、break、case、catch、class、const、continue、default、do、else、export、extends、false、finally、for、from、function、get、if、import、in、instanceof、let、new、null、of、return、set、static、super、switch、target、this、throw、true、try、typeof、var、void、while、with、yield等
4.1JavaScript語言基礎(chǔ)
4.1.3JavaScript的詞法結(jié)構(gòu)
詞法結(jié)構(gòu)是最基本的程序編寫規(guī)則4.字面量：直接出現(xiàn)的用于賦值或參與某種運算的數(shù)據(jù)
32//數(shù)值3264.35//數(shù)值64.35"helloeveryone！"http://一個字符串"flowers"http://另一個字符串true//布爾值truenull//空{(diào)"a":1,"b":"car"}//一個對象
4.1JavaScript語言基礎(chǔ)
4.1.3JavaScript的詞法結(jié)構(gòu)
詞法結(jié)構(gòu)是最基本的程序編寫規(guī)則5.語句分隔（1）使用分號“;”作為語句結(jié)束（2）如果兩條語句分別寫在兩行，則分號是可以省略
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型
程序都是通過操作值來工作具有相同特征的值被設(shè)計為一種類型兩大類：對象類型和原始類型
一元操作符typeof求得類型字符串
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型1.數(shù)值類型（Number）能夠表示整數(shù)和實數(shù)支持二、八、十六進(jìn)制表示5//數(shù)值50b1011//二進(jìn)制數(shù)值10110xFF//十六進(jìn)制數(shù)值FF45.3//實數(shù)45.31.635e-21//實數(shù)1.635×10-21
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型1.數(shù)值類型（Number）特殊數(shù)值Infinity：無窮值-Infinity：負(fù)無窮值NaN：非數(shù)值，NotaNumber
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型1.數(shù)值類型（Number）數(shù)值運算
算術(shù)運算：+（加法）、-（減法）、*（乘法）、/（除法）、%（取模）、**（取冪）等
Math對象提供的方法，例如：Math.E為自然對數(shù)的底數(shù)，Math.sqrt()為求平方根的函數(shù)
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型2.BigInt類型ES2020中新增的數(shù)值類型對任意長度整數(shù)的支持不可以把BigInt和常規(guī)數(shù)值類型混合使用
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型3.字符串類型（String）被放在一對匹配的單引號、雙引號或者反引號中的字符序列，就是字符串，也稱為字符串字面量
三類引號成為定界符，可互嵌套使用
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型3.字符串類型（String）反引號是ES6中才出現(xiàn)的新特性，內(nèi)部可以包含JavaScript表達(dá)式letname="kitty";//聲明變量name，值為kittyconsole.log("Hello${name}");//雙引號定界符，輸出：Hello
${name}console.log(`Hello${name}`); //反引號定界符，輸出：Hellokitty
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型3.字符串類型（String）特殊字符使用反斜杠進(jìn)行轉(zhuǎn)義
（1）\\表示反斜杠本身
（2）\n表示換行符
（3）\t表示水平制表符
（4）\‘表示單引號等
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型3.字符串類型（String）字符串常用操作方法被封裝在其原型對象中，示例如下lets="IloveJavaScript!";//聲明變量s，值為一個字符串console.log(s.length);//獲取字符串長度，輸出：18console.log(s.indexOf("a"));//字符串中第1個字母a的位置，輸出：8console.log(s.startsWith("Ilo"));//是否以“ILo”開頭，輸出：true
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型4.符號類型（Symbol）ES6新增，Symbol值表示唯一的標(biāo)識符，能夠保證值的唯一性letid1=Symbol("id");//創(chuàng)建Symbol類型值id1console.log(typeofid1);//輸出：symbolletid2=Symbol("id");//創(chuàng)建Symbol類型值id2console.log(id1==id2);//結(jié)果：false
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型5.null通常用于表示某個值是不存在的console.log(typeofnull)的輸出結(jié)果是object可以把null看成一個特殊的對象，表示“沒有對象”或者“沒有值”
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型6.undefinedundefined也表示值不存在
作為一個預(yù)定義的全局常量而存在（1）某個已聲明未初始化的變量的值就是undefined（2）沒有明確返回值的函數(shù)的返回值也是undefined
4.1JavaScript語言基礎(chǔ)
4.1.4JavaScript的原始類型7.布爾類型（Boolean）只有兩個取值：true和false
會自動進(jìn)行類型轉(zhuǎn)換（1）undefined、null、0、-0、NaN和空字符串會轉(zhuǎn)換為false（2）其他的所有的值（也包括對象、數(shù)組等）都轉(zhuǎn)換為true
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象1.對象類型簡介JavaScript中除了原始類型外，其他都是對象類型，對象特征：（1）屬性的無序集合（2）屬性是字符串到值的映射組成，屬性名→屬性值（3）屬性值可以是任意的JavaScript值（4）屬性可隨時添加，屬性可以繼承自其原型對象
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過對象字面量創(chuàng)建（1）屬性定義在一對花括號{}中（2）屬性定義時采用冒號分隔屬性名和屬性值（3）多個屬性之間使用逗號（,）分割（4）書寫在最后一個的屬性后邊的逗號可以省略
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過對象字面量創(chuàng)建：示例leta={};//空對象，沒有屬性的對象letb={x:2,y:3};//包含兩個數(shù)值屬性值的對象letc={name:"JavaScript",version:"ES6"};//包含兩個字符串屬性對象letd={"p1":b,"p2":c};//包含兩個對象屬性值的對象letbook={//其中一個屬性值就是一個使用字面量定義的對象 title:"網(wǎng)頁設(shè)計實踐",press: {name:"",address:"北京"}};
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過new操作符創(chuàng)建（1）new操作符后邊需要跟一個函數(shù)調(diào)用（2）函數(shù)用于初始化新創(chuàng)建的對象（3）具備此功能函數(shù)被稱為構(gòu)造函數(shù)（constructor）（4）內(nèi)置的一些類型都有對應(yīng)的構(gòu)造函數(shù)（5）構(gòu)造函數(shù)的首字母一般為大寫形式
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過new操作符創(chuàng)建：示例leto=newObject();//創(chuàng)建一個空對象，與{}相同letd=newDate();//創(chuàng)建一個表示當(dāng)前時間的日期對象leta=newArray("C","Java","JavaScript");//創(chuàng)建一個數(shù)組對象，并初始化了該對象
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過Object.create()方法（1）原型（prototype）對象（2）幾乎所有的對象都有一個原型對象（3）通過對象隱含屬性`__proto__`訪問其原型對象（4）原型對象實現(xiàn)了類的繼承（5）Object.create()方法可顯示指定新對象的原型
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象2.創(chuàng)建對象通過Object.create()方法：示例leto1={x:1,y:2};//使用字面量方式定義一個對象o1leto2=Object.create(o1);//使用o1作為原型創(chuàng)建新對象o2console.log(o2.x+o2.y);//輸出結(jié)果：3
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象3.對象屬性的訪問、設(shè)置與刪除用點.或者方括號[]操作符獲取屬性創(chuàng)建新的屬性或者修改已有的屬性值時也是使用點.或者方括號[]操作符刪除屬性則是使用delete操作符
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象3.對象屬性的訪問、設(shè)置與刪除letpress={};//使用字面量方式創(chuàng)建一個空對象press="";//創(chuàng)建press對象一個新屬性并賦值press["address"]="北京";//創(chuàng)建press對象的另一個新屬性并賦值press.address="天津";//修改了一個屬性值deletepress["name"];//刪除了press對象的name屬性console.log();//name屬性已刪除，輸出：undefined
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象4.對象屬性特性可寫特性（writable），指是否可以設(shè)置屬性的值可枚舉特性（enumerable），指是否可以在一些循環(huán)語句（如for/in）中返回屬性的名稱可配置特性（configurable），指是否可以刪除屬性，以及是否可以修改其特性
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象5.屬性的測試與枚舉：示例leto={x:1,y:2};//使用字面量方式定義一個對象oconsole.log(o.x!==undefined);//輸出：true，說明o有屬性xconsole.log(o.z!==undefined);//輸出：false，說明o沒有屬性zconsole.log("y"ino);//輸出：true，說明o有屬性yconsole.log("toString"ino);//輸出true，說明o有屬性toString，繼承屬性console.log(o.hasOwnProperty("y"));//o有自有屬性y，輸出：trueconsole.log(o.hasOwnProperty("toString"));//toString不是o的自有屬性，輸出：false
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象6.序列化對象
對象轉(zhuǎn)換為某種格式字符串，之后可以再把字符串解析為對象，稱為對象序列化轉(zhuǎn)換后的字符串稱為JSON（JavaScriptObjectNotation）字符串JSON語法是JavaScript語法的子集支持字符串、有限數(shù)值、true、false、null以及在這些原始值的基礎(chǔ)上構(gòu)建起來的對象和數(shù)組
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象6.序列化對象
JSON高效通用的優(yōu)點，是語言無關(guān)的純數(shù)據(jù)規(guī)范
實踐中很多語言都支持JSONleto={x:1,y:2};//使用字面量方式定義一個對象olets=JSON.stringify(o);//獲取對象o序列化后的結(jié)果console.log(typeofs);//對象o序列化后的類型是字符串，輸出：stringconsole.log(s);//輸出：{"x":1,"y":2}leto1=JSON.parse(s);//恢復(fù)重建為一個新對象o1
4.1JavaScript語言基礎(chǔ)
4.1.5JavaScript對象7.全局對象
全局對象提供了可在任何地方使用的變量和函數(shù)
內(nèi)置語言或環(huán)境中，瀏覽器中的名字是window全局對象的所有屬性都可以被直接訪問alert("JavaScript");window.alert("JavaScript");varstr="JavaScript";console.log(window.str);//輸出JavaScript
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法1.類型轉(zhuǎn)換
類型轉(zhuǎn)換非常靈活，例如當(dāng)程序需要一個布爾類型的值的時候，JavaScript會嘗試將其他類型自動轉(zhuǎn)換為布爾類型console.log("6"*"7");//字符串轉(zhuǎn)換為數(shù)字，輸出：42leta="5";//a為字符串5console.log(32-a);//字符串a(chǎn)轉(zhuǎn)換為了數(shù)值5，結(jié)果是27console.log(20+"JavaScript");//20轉(zhuǎn)換為了字符串
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式
表達(dá)式是能夠被求得一個值得JavaScript短語直接嵌入在程序中的一些字面量是最簡單的表達(dá)式一個變量名也是一個表達(dá)式通過操作符來組合簡單的表達(dá)式，從而構(gòu)建更復(fù)雜的表達(dá)式
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→主表達(dá)式
獨立存在不包含更簡單表達(dá)式的表達(dá)式為主表達(dá)式包括常量、字面量、變量引用以及某些語言關(guān)鍵字"JavaScript";//字符串字面量92.5//數(shù)值字面量/^\w+$///正則表達(dá)式true//布爾值this//求值為當(dāng)前對象 null//空值undefined//全局常量
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→對象與數(shù)組創(chuàng)建表達(dá)式
對象和數(shù)組的創(chuàng)建初始化也是表達(dá)式[]//空數(shù)組{}//空對象[1,2]//兩個元素的數(shù)組{x:1,y:2}//兩個屬性的對象newObject()//空對象newArray()//空數(shù)組
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→屬性訪問表達(dá)式
對對象的屬性或者數(shù)組元素進(jìn)行求值的表達(dá)式leto={x:1,y:{i:3,j:4}};//定義對象oleta=[5,6,[7,8]];//定義數(shù)組aconsole.log(o.x);//輸出：1console.log(o.y.j);//輸出：4console.log(o["y"].i);//輸出：3console.log(a[1]);//輸出：6console.log(a[2][1]);//輸出：8
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→屬性訪問表達(dá)式
ES2020增加了新的屬性訪問表達(dá)式可選鏈接操作符“?.”leto={x:1,y:null};//定義對象oconsole.log(o.y?.k);//輸出undefinedconsole.log(o.y?.["k"]);//輸出undefinedconsole.log(o.y.k);//程序報錯，錯誤類型TypeError
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→函數(shù)定義與調(diào)用表達(dá)式
JavaScript語言使用關(guān)鍵字function定義函數(shù)，對函數(shù)的定義和調(diào)用也是一種表達(dá)式letsum=function(a,b){returna+b;};//定義用于求和的函數(shù)sumletc=sum(5,6);//調(diào)用求和函數(shù)sum
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→操作符
操作符用于組合多個表達(dá)式實現(xiàn)算術(shù)運算、比較、求邏輯值、賦值等功能一元操作符（一個操作數(shù)）、二元操作符（兩個操作數(shù)）和三元操作符（三個操作數(shù)）操作符具有優(yōu)先級控制，優(yōu)先級高的操作符先運算優(yōu)先級相同時，還要考慮操作符的結(jié)合性
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→算術(shù)操作表達(dá)式
一元算術(shù)操作符包含一元加（+）、一元減（-）、遞增（++）和遞減（--）二元算術(shù)操作符是冪（**）、乘（*）、除（/）、模（%）、加（+）和減（-）位操作符是對數(shù)值的二進(jìn)制表示執(zhí)行低級位操作，其操作數(shù)是數(shù)值且返回值也是數(shù)值，可以把它歸類為算術(shù)操作
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→關(guān)系表達(dá)式
關(guān)系操作符用于測定兩個操作數(shù)之間的關(guān)系用于判斷相等的操作符有兩個，一個是相等（==），一個是嚴(yán)格相等（===）小于（<）、大于（>）、小于等于（<=）、大于等于（>=）操作符用于比較兩個操作數(shù)in操作符，左側(cè)為字符串，右側(cè)為對象，如果左側(cè)的值是右側(cè)的對象的屬性名，則返回trueinstanceof操作符，左側(cè)操作數(shù)是對象，右側(cè)是對象類的標(biāo)識
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→邏輯表達(dá)式與（&&）操作時當(dāng)且僅當(dāng)兩個操作數(shù)都求值為true時，結(jié)果才為true或（||）操作時當(dāng)且僅當(dāng)兩個操作數(shù)都求值為false時，結(jié)果才為false非（!）操作符出現(xiàn)在操作數(shù)前面，可以反轉(zhuǎn)操作數(shù)的布爾值
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法2.表達(dá)式→賦值表達(dá)式當(dāng)為變量或者對象屬性賦值時使用等號（=）操作符，如下示例letx=3;//給變量x賦值為3leto={};//聲明一個對象oo.y=0;//設(shè)置對象o的屬性y為0leti,j,k;//聲明3個變量i=j=k=0;//同時將3個變量初始化為0
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法3.變量與常量→聲明變量是數(shù)據(jù)值的“命名存儲”，即使用名字（或標(biāo)識符）表示一個值使用變量或者常量之前需要先聲明它ES6開始，我們使用let關(guān)鍵字來聲明變量，聲明變量的同時可以給變量賦初始值使用const關(guān)鍵字來聲明常量，const必須在聲明時初始化常量
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法3.變量與常量→聲明：示例letx;//聲明變量x，未賦初始值console.log(x);//結(jié)果：undefinedlet_total,sum;//使用一條let語句聲明多個變量leti=0;//聲明變量的同時初始化i=5;//修改變量的值constPI=3.1415926;//聲明一個常量PI
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法3.變量與常量→作用域變量的作用域（scope）是指程序源碼中的一個區(qū)域，在這個區(qū)域內(nèi)變量有效通過let和const聲明的變量和常量具有塊級作用域多條語句組合能夠以語句塊的形式出現(xiàn)，通常將它們放在一個{}中，也稱為一個代碼塊聲明在一個代碼塊中的變量或常量，在代碼塊外是無法進(jìn)行訪問和使用
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法3.變量與常量→作用域：示例letx=5;//聲明全局變量x{//代碼塊，形成一個塊級作用域leti=0;//聲明局部變量iconsole.log(x);//此處可以訪問全局變量xconsole.log(i);//作用域內(nèi)可以訪問局部變量i}console.log(i);//報錯，作用域外不能訪問局部變量i
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法3.變量與常量→舊時的var在ES6之前，聲明一個變量的唯一方式是使用var關(guān)鍵字，其語法和let相同，無法聲明常量使用var聲明的變量不具有塊作用域擁有作用域提升的特性現(xiàn)代JavaScript腳本中一般不再使用var聲明變量
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句語句可以在執(zhí)行后往往會導(dǎo)致某個事件發(fā)生，也就是能夠完成既定任務(wù)語句的默認(rèn)執(zhí)行順序是從上而下，順序執(zhí)行使用控制語句可以改變程序執(zhí)行順序
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→if語句if語句的基本形式如下所示只有當(dāng)條件表達(dá)式expression求值為true時，花括號中的語句才會執(zhí)行if(expression){ 當(dāng)條件表達(dá)式expression求值為true時執(zhí)行的代碼}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→if語句if語句和else語句組合在一起，基本形式如下if(expression){ 當(dāng)條件表達(dá)式expression求值為true時執(zhí)行的代碼}else{ 當(dāng)條件表達(dá)式expression求值為false時執(zhí)行的代碼}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→if語句
多個條件堆疊的判定可以使用多層ifelseif的形式if(expression1){ 當(dāng)expression1為true時執(zhí)行的代碼}elseif(expression2){ 當(dāng)expression2為true時執(zhí)行的代碼}else{ 當(dāng)expression1和expression2都不為true時執(zhí)行的代碼}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→switch語句
屬于多分支語句，switch語句的基本形式如下switch(expression){casevalue1:
執(zhí)行代碼塊1
break;casevalue2:
執(zhí)行代碼塊2
break;default:
expression的求值與value1和value2不同時執(zhí)行的代碼}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→while語句
while語句是基本循環(huán)語句，基本形式如下執(zhí)行while語句時，解釋器首先會求值表達(dá)式，求值為true的情況下，循環(huán)體部分會一直執(zhí)行。如果條件不成立，則循環(huán)體不執(zhí)行while(expression){ 需要執(zhí)行的代碼（循環(huán)體）}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→do-while語句
while循環(huán)的變體，基本形式如下循環(huán)會先執(zhí)行一次代碼塊，然后再檢查表達(dá)式是否為真，如果表達(dá)式為真的話，就會重復(fù)這個循環(huán)do{ 需要執(zhí)行的代碼}while(expression);
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→for語句
循環(huán)for用于重復(fù)執(zhí)行代碼塊，直到條件不再成立第一，initialize會在循環(huán)開始前執(zhí)行；第二，test定義運行循環(huán)的條件，如果條件成立，則執(zhí)行循環(huán)體，如果不成立則跳出循環(huán)；
第三，increment在循環(huán)已被執(zhí)行之后執(zhí)行，一般用于遞增變量for(initialize;test;increment){ 被執(zhí)行的代碼塊（循環(huán)體）}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→for-of語句
ES6定義了一個專門用于可迭代對象的循環(huán)語句for-of
用于遍歷可迭代對象的元素目前，我們只需要知道字符串、數(shù)組、集合和映射都是可迭代的就行了for(propertyofexpression){ 被執(zhí)行的代碼塊（循環(huán)體）}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→for-in語句
for-in循環(huán)的in后面可以是任意的對象，它是用于枚舉對象中的可枚舉的（enumerable）非符號屬性執(zhí)行for-in語句時，會首先求值object，對求值對象的每一個可枚舉的對象屬性執(zhí)行一次循環(huán)體for(variableinobject){ 被執(zhí)行的代碼塊（循環(huán)體）}
4.1JavaScript語言基礎(chǔ)
4.1.6JavaScript基礎(chǔ)語法4.語句→break和continue輔助語句，break用于跳出循環(huán)或用在case之后，防止case擊穿
continue用于跳過一次循環(huán)，開始下一次循環(huán)
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型
引用類型是把數(shù)據(jù)和功能組織到一起的數(shù)據(jù)結(jié)構(gòu)，可以理解為一類對象的定義
一般是通過使用new操作符后跟一個構(gòu)造函數(shù)（constructor）來創(chuàng)建
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）
日期（Date）對象存儲日期和時間，并提供了日期/時間的管理方法
Date類型將日期保存為自協(xié)調(diào)世界時（UTC，UniversalTimeCoordinated），保存的是從1970年1月1日午夜（零時）至今所經(jīng)過的毫秒數(shù)可精確表示1970年1月1日之前及之后285616年的日期
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）→創(chuàng)建
調(diào)用newDate()創(chuàng)建一個新的Date對象
newDate(milliseconds)，傳入毫秒值newDate(datestring)，傳入表示日期的字符串newDate(year,month,date,hours,minutes,seconds,ms)，只有前兩個參數(shù)是必須的
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）→訪問日期
可以從一個Date對象中訪問年、月等信息getFullYear()，獲取年份，4位數(shù)getMonth()，獲取月份，從0到11getDate()，獲取當(dāng)月具體日期，從1到31getHours()，獲取小時
getMinutes()，獲取分鐘
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）→訪問日期
可以從一個Date對象中訪問年、月等信息getSeconds()，獲取秒getMilliseconds()，獲取毫秒getDays()，獲取一周中的第幾天getTime()，獲取日期對應(yīng)的時間戳
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）→設(shè)置日期
以下方法用于設(shè)置日期/時間對象setFullYear(year,[month],[date])，設(shè)置年月日setMonth(month,[date])，設(shè)置月日setDate(date)，設(shè)置日setHours(hour,[min],[sec],[ms])，設(shè)置時、分、秒、毫秒
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型1.日期和時間（Date）→設(shè)置日期
以下方法用于設(shè)置日期/時間對象setMinutes(min,[sec],[ms])，設(shè)置分、秒、毫秒setSeconds(sec,[ms])，設(shè)置秒、毫秒setMilliseconds(ms)，設(shè)置毫秒setTime(timestamp)，使用給定的時間戳設(shè)置日期
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型2.正則表達(dá)式（RegExp）
用于描述和匹配文本中字符串的類型，被稱為正則表達(dá)式RegExp通過一種特殊的字面量語法來創(chuàng)建，一對正斜杠（/）之間的文本就構(gòu)成了正則表達(dá)式字面量第二個正斜杠（/）后還可以跟一個或多個字母，指定不同的匹配模式
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型2.正則表達(dá)式（RegExp）：示例/JavaScript///匹配字符串“JavaScript”/^\d+\.\d+$///匹配帶小數(shù)點的數(shù)字/^[0-9]{8}$///匹配字符串是否為8位數(shù)字/^\w+$/ //匹配字符串是否由數(shù)字、字母、下劃線組成/^(0\d{2,3}-\d{7,8}///匹配座機(jī)號碼
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型2.正則表達(dá)式（RegExp）：使用示例"JavaScript".search(/cri/);//返回第一個匹配項起始位置，結(jié)果：5"html".search(/cri/);//未找到匹配項返回-1，結(jié)果：-1"Q5B54".replace(/\d/g,"0");//所有單個數(shù)字替換為0，結(jié)果：Q0B00"12+8=".match(/\d+/g); //未找到匹配項則返回null，否則返回數(shù)組，結(jié)果：["12","8"]"how,are,you".split(/,/);//字符串分割，返回分割后數(shù)組，結(jié)果：["how","are","you"]/\d{2}/.test("int64")//找到匹配項，返回true，否則返回false，結(jié)果：true
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）
表示一組有序的數(shù)據(jù)一個數(shù)組中不同的元素可以存儲不同類型的數(shù)據(jù)數(shù)組也是動態(tài)大小的，會隨著數(shù)據(jù)添加而自動的增長
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→創(chuàng)建
可以使用Array構(gòu)造函數(shù)創(chuàng)建數(shù)組letbooks=newArray();//創(chuàng)建一個數(shù)組，未指定長度letcolors=newArray(10);//創(chuàng)建一個數(shù)組，長度為10letvalues=newArray("red","blue","green");//創(chuàng)建時初始化letmovies=Array();//new操作符號可以省略
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→創(chuàng)建
直接使用數(shù)組字面量也可以創(chuàng)建數(shù)組，它使用中括號包含以逗號分隔的元素列表表示letcolors=["red","blue","green"];letbooks=[];//創(chuàng)建一個空數(shù)組
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→創(chuàng)建
ES6對Array構(gòu)造函數(shù)增加了兩個用于創(chuàng)建數(shù)組的靜態(tài)方法，分別是from()和of()from()用于將類數(shù)組結(jié)構(gòu)轉(zhuǎn)換為數(shù)組的實例of()則用于將一組參數(shù)轉(zhuǎn)換為數(shù)組實例letchars=Array.from("hello");//結(jié)果：["h","e","l","l","o"]letvalues=Array.of(1,2,3);//結(jié)果：["1","2","3"]
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→數(shù)組索引
索引表示數(shù)據(jù)在數(shù)組中的順序，可以用來設(shè)置或者獲取元素的值索引從0開始，在數(shù)組的屬性length中保存了數(shù)組的元素個數(shù)letvalues=[1,2,3,4];console.log(values.length);//輸出：4letx=values[2];//結(jié)果：x=3values[3]=5;//將數(shù)組第4個元素的值修改為5
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→數(shù)組遍歷
Array的原型有3個用于遍歷數(shù)組內(nèi)容的迭代器方法
keys()，返回數(shù)組索引的迭代器values()，返回數(shù)組元素的迭代器
entries()，返回[索引，值]對的迭代器letcolors=["r","g","b"];console.log(Array.from(colors.values()));//輸出：["r","g","b"]for(let[i,e]ofcolors.entries()){ //遍歷數(shù)組console.log("第"+i+"個元素是："+e);}
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→常用操作方法push()，末尾添加，可傳入多個元素pop()，刪除數(shù)組的最后一個元素shift()，刪除數(shù)組的第一個元素并返回unshift()，開頭添加，可傳入多個元素sort()，默認(rèn)按照升序重新排列數(shù)組元素，可傳比較函數(shù)reverse()，按照降序重新排列數(shù)組元素
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→常用操作方法concat()，創(chuàng)建新的數(shù)組，將參數(shù)附加到新數(shù)組末尾slice()，取子數(shù)組,傳參start(開始索引)和end(結(jié)束索引)splice()，刪除、插入或者替換元素，可傳三個參數(shù)，start(開始操作索引)、num(要刪除的元素數(shù)量)、后續(xù)參數(shù)為要插入的元素indexOf()，從前往后搜，返回第一個匹配元素索引lastIndexOf()，從后往前搜索，用法同indexOf()
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型3.數(shù)組類型（Array）→常用操作方法filter()，傳入一個函數(shù)，每個元素為參數(shù)運行函數(shù)，結(jié)果為true的項組成一個新的數(shù)組forEach()，傳入函數(shù)，每個元素執(zhí)行函數(shù)，無返回值map()，傳入函數(shù)，每個元素執(zhí)行函數(shù)，返回調(diào)用結(jié)果組成的新數(shù)組reduce()，歸并執(zhí)行，傳入一個歸并函數(shù)
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型4.映射（Map）
ES6之前，在JavaScript中實現(xiàn)“鍵/值”對存儲可以使用Object對象來實現(xiàn)
使用new操作符和Map構(gòu)造函數(shù)創(chuàng)建映射使用屬性size獲取Map的大小set()方法再添加新的鍵/值對，使用get()方法獲取，使用has()方法查詢，還可以使用delete()方法和clear()方法刪除值
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型4.映射（Map）→示例letperson=newMap([//創(chuàng)建并初始化一個Map
["name","Julie"],
["age","18"],
["sex","girl"]]);person.set("nation","china");//添加一個新的鍵/值對console.log(person.size);//4console.log(person.get("age"));//18console.log(person.has("nation"));//trueperson.delete("name");//刪除一個鍵值對console.log(person.has("name"));//falseperson.clear();//清空所有映射console.log(person.size);//0
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型5.集合（Set）
集合Set也是ES6新增的類型
與Map類似，所不同的是Set僅僅是值的集合Set會維護(hù)值插入時的順序，因此支持按順序迭代集合的實例有一個迭代器，可以通過values()方法或者keys()方法獲得，進(jìn)而使用for-of語句遍歷集合
4.1JavaScript語言基礎(chǔ)
4.1.7JavaScript引用類型5.集合（Set）→示例letcolors=newSet(["red","green","blue"]);//創(chuàng)建并初始化一個Setcolors.add("orange");//添加一個新的集合值console.log(colors.size);//4console.log(colors.has("green"));//truecolors.delete("blue");//刪除一個值console.log(colors.has("blue"));//falsecolors.clear();//清空所有值console.log(colors.size);//0
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)
函數(shù)是參數(shù)化的，定義函數(shù)時可以包含一組形參，調(diào)用發(fā)生時會提供實參
每個調(diào)用還有另外一個值，稱為調(diào)用上下文，是this關(guān)鍵字的值，函數(shù)有自己的作用域函數(shù)是對象，可以有自己的屬性把函數(shù)賦值給另外一個對象的屬性，稱方法
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)1.函數(shù)聲明
函數(shù)是由function關(guān)鍵字聲明，格式如下將函數(shù)的名字理解為是一個變量函數(shù)的聲明語句會被提升到所在作用域頂部functionfunc_name(param1,param2,...){//函數(shù)體語句塊}
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)2.命名函數(shù)表達(dá)式
函數(shù)表達(dá)式中定義的函數(shù)是可以沒有名字將定義的函數(shù)賦給一個變量或者常量命名函數(shù)表達(dá)式定義的函數(shù)不能在定義之前調(diào)用
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)2.命名函數(shù)表達(dá)式→示例console.log(f1(3));//錯誤：f1未被初始化console.log(f2(1,2));//錯誤：f2未被初始化console.log(plus(1,2));//錯誤：plus未被定義//函數(shù)表達(dá)式定義函數(shù)f1constf1=function(x){returnx*x;
}//函數(shù)表達(dá)式定義函數(shù)f2constf2=functionplus(a,b){returna+b;
}console.log(f1(3));//正常執(zhí)行，輸出結(jié)果：9console.log(f2(1,2));//正常執(zhí)行，輸出結(jié)果：3console.log(plus(1,2));////錯誤：plus未被定義
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)3.箭頭函數(shù)ES6之后出現(xiàn)的更加簡潔的定義函數(shù)的語法
使用符號“=>”分隔參數(shù)部分和函數(shù)體部分函數(shù)參數(shù)和箭頭之間不能存在換行符
箭頭函數(shù)無this值
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)3.箭頭函數(shù)→示例constf1=(a,b)=>{returna+b};//一般寫法constf2=(a,b)=>a+b;//僅有return語句的簡寫constf3=x=>x*x;//僅有一個參數(shù)的簡寫constf4=()=>23;//沒有參數(shù)時constf5=x=>({name:x});//返回對象字面量時letfiltered=[1,2,3,4].filter(x=>x>2);//箭頭函數(shù)作為參數(shù)傳遞console.log(filtered);//輸出數(shù)組：[3,4]
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)4.嵌套函數(shù)與閉包→嵌套函數(shù)
函數(shù)是可以嵌套在其他函數(shù)中的
需要理解的是他們的變量作用域規(guī)則
內(nèi)部函數(shù)可以訪問包含自己的函數(shù)（或者更外層函數(shù)）的參數(shù)和變量
外部函數(shù)是不能夠訪問函數(shù)內(nèi)部的變量
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)4.嵌套函數(shù)與閉包→嵌套函數(shù)→示例leti=1;//全局變量functionouter(x){//外層函數(shù)定義letj=3;//外部變量//console.log(k);functioninner(){//內(nèi)部嵌套函數(shù)定義letk=4;//內(nèi)部變量returni+j+k+x;}returninner();}console.log(outer(2));//10
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)4.嵌套函數(shù)與閉包→閉包
詞法環(huán)境使函數(shù)聲明會立即變?yōu)榧从眯秃瘮?shù)
當(dāng)代碼要訪問一個變量時首先會搜索內(nèi)部詞法環(huán)境，然后搜索外部環(huán)境，然后搜索更外部的環(huán)境，以此類推，直到全局詞法環(huán)境內(nèi)部函數(shù)和創(chuàng)建它時的詞法環(huán)境（例如外部函數(shù)定義的變量等）永遠(yuǎn)的綁定在一起了，閉包就是指內(nèi)部函數(shù)總是可以訪問其所在的外部函數(shù)中聲明的變量和參數(shù)在JavaScript中，所有函數(shù)都是天生閉包的
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)4.嵌套函數(shù)與閉包→閉包→示例functioncounter(){//外部函數(shù)letcount=0;returnfunction(){//匿名內(nèi)部嵌套函數(shù)returncount=count+1;}}letinner=counter();//調(diào)用外部函數(shù)將內(nèi)部的嵌套函數(shù)返回并賦給變量innerconsole.log(inner());//輸出：1console.log(inner());//輸出：2console.log(inner());//輸出：3
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)5.rest參數(shù)與spread語法→rest參數(shù)
定義函數(shù)時不知將來調(diào)用者會提供多少參數(shù)可以使用rest參數(shù)來接收任意數(shù)量的參數(shù)rest參數(shù)使用三個點...并在后面跟著包含剩余參數(shù)的數(shù)組名稱，將它們包含在函數(shù)定義中將剩余參數(shù)收集到數(shù)組中，必須放在末尾
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)5.rest參數(shù)與spread語法→rest參數(shù)functionsumAll(...args){//參數(shù)將被收集到一個叫args的數(shù)組中l(wèi)etsum=0;for(letargofargs){sum+=arg;}returnsum;}console.log(sumAll(1,2));//輸出：3console.log(sumAll(1,2,3,4,5));//輸出：15
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)5.rest參數(shù)與spread語法→spread語法
看起來和Rest參數(shù)一樣，也是使用`...`，但是作用相反在函數(shù)調(diào)用時使用把可迭代對象的元素逐一“展開”到參數(shù)列表中
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)5.rest參數(shù)與spread語法→spread語法letarr=[1,2,3,4,5];console.log(sumAll(...arr));//15letarr2=[6,7,8];console.log(sumAll(...arr,...arr2));//33console.log(sumAll(...arr,10,...arr2));//43letmerged=[0,...arr,...arr2,9,10];//合并數(shù)組letstr="JavaScript";console.log([...str]);//字符串轉(zhuǎn)換為字符數(shù)組
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)6.函數(shù)對象
函數(shù)就是對象，可把它們當(dāng)作對象來處理把函數(shù)想象成可被調(diào)用的“行為對象”增/刪屬性，按引用傳遞等函數(shù)對象具有內(nèi)部屬性name和length，name就是函數(shù)的名字，length則返回函數(shù)入?yún)⒌膫€數(shù)可以在函數(shù)對象上添加自定義的屬性
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)6.函數(shù)對象→示例functionsum(a,b){returna+b};//函數(shù)聲明sum.count=5;//給函數(shù)對象定義屬性console.log();//sumconsole.log(sum.length);//2console.log(sum.count);//5letsumAll=function(a,b,...more){//命名函數(shù)表達(dá)式letsum=a+b;for(letargofmore){sum+=arg;}}console.log(sumA);//sumAllconsole.log(sumAll.length);//2
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)7.方法
方法其實就是JavaScript的函數(shù)，只不過它被保存為了某個對象的屬性而已方法調(diào)用與函數(shù)調(diào)用的有一個重要的區(qū)別是它們的調(diào)用上下文this指向不同箭頭函數(shù)沒有this
4.1JavaScript語言基礎(chǔ)
4.1.8JavaScript函數(shù)7.方法→示例letstr="outer";letf=function(){varstr="inner";console.log("this="+this);console.log("this.str="+this.str);}leto={str:"inObject",order:1}o.m=f;f();//輸出結(jié)果：this=Window,this.str=undefinedo.m();//輸出結(jié)果this=o,this.str=inObject
4.2JavaScript常用系統(tǒng)對象
4.2.1DOM與BOM概述
ES（ECMAScript）語言規(guī)范部分
DOM（DocumentObjectModel，文檔對象模型）BOM（BrowserObjectModal，瀏覽器對象模型）
4.2JavaScript常用系統(tǒng)對象
4.2.2window對象
window對象處于對象層次的頂端
window對象表示瀏覽器中打開的窗口如果文檔包含框架（frame或iframe標(biāo)簽），瀏覽器會為HTML文檔創(chuàng)建一個window對象，并為每個框架創(chuàng)建一個額外的window對象window對象的屬性和方法是全局的
4.2JavaScript常用系統(tǒng)對象
4.2.2window對象→屬性示例closed，窗口是否已被關(guān)閉document，對Document對象的只讀引用outerheight，窗口的外部高度outerwidth，窗口的外部寬度self，對當(dāng)前窗口的引用top，最頂層的先輩窗口screenLeft，窗口的左上角在屏幕上的坐標(biāo)值
4.2JavaScript常用系統(tǒng)對象
4.2.2window對象→方法示例alert()，彈出警告框setInterval()，按指定的周期來調(diào)用函數(shù)或計算表達(dá)式close()，關(guān)閉瀏覽器窗口confirm()，彈出確認(rèn)框open()，打開一個新的瀏覽器窗口resizeTo()，把窗口的大小調(diào)整到指定的寬度和高度scrollTo()，把內(nèi)容滾動到指定的坐標(biāo)
4.2JavaScript常用系統(tǒng)對象
4.2.3document對象
可通過window.document屬性對其訪問每個載入瀏覽器的HTML文檔都會成為一個document對象使用document對象可以實現(xiàn)從腳本中對HTML頁面中的所有元素進(jìn)行訪問
4.2JavaScript常用系統(tǒng)對象
4.2.3document對象→屬性示例body，提供對<body>元素的直接訪問cookie，設(shè)置或返回與當(dāng)前文檔有關(guān)的所有cookiedomain，返回當(dāng)前文檔的域名lastModified，返回文檔被最后修改的日期和時間referrer，返回載入當(dāng)前文檔的URLtitle，返回當(dāng)前文檔的標(biāo)題URL，返回當(dāng)前文檔的URL
4.2JavaScript常用系統(tǒng)對象
4.2.3document對象→方法示例close()，關(guān)閉用document.open()方法打開的輸出流getElementById()，返回?fù)碛兄付╥d的第一個對象的引用getElementsByName()，返回帶有指定名稱的對象集合getElementsByTagName()，返回指定標(biāo)簽名的對象集合
open()，打開一個流write()，向文檔寫HTML表達(dá)式或JavaScript代碼writeln()，同write()方法，再輸出換行
4.2JavaScript常用系統(tǒng)對象
4.2.4navigator對象
navigator對象封裝有關(guān)瀏覽器的詳細(xì)信息appCodeName，瀏覽器的代碼名appName，瀏覽器的名稱appVersion，瀏覽器的平臺和版本信息browserLanguage，當(dāng)前瀏覽器的語言cookieEnabled，瀏覽器中是否啟用cookie的布爾值userAgent，客戶機(jī)發(fā)送服務(wù)器的user-agent頭部的值
4.2JavaScript常用系統(tǒng)對象
4.2.5location對象
表示瀏覽器窗口中當(dāng)前顯示文檔的Web地址host，設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號hostname，設(shè)置或返回當(dāng)前URL的主機(jī)名href，設(shè)置或返回完整的URLpathname，設(shè)置或返回當(dāng)前URL的路徑部分port，設(shè)置或返回當(dāng)前URL的端口號protocol，設(shè)置或返回當(dāng)前URL的協(xié)議
4.2JavaScript常用系統(tǒng)對象
4.2.5location對象
還有三個方法assign()，加載新的文檔reload()，重新加載當(dāng)前文檔replace()，用新的文檔替換當(dāng)前文檔
4.2JavaScript常用系統(tǒng)對象
4.2.6history對象
設(shè)計來表示窗口的瀏覽歷史，history對象的屬性只有l(wèi)ength，方法如下back()，加載history列表中的前一個URL
forward()，加載history列表中的下一個URLgo()，加載history列表中的某個具體頁面
4.3DOM操作
DOM模型顯示它是一個樹型結(jié)構(gòu)所有操作都是以這棵樹的根節(jié)點document對象作為一個主“入口點”通過JavaScript腳本程序，可以任意動態(tài)的添加元素（節(jié)點）、刪除元素（節(jié)點）、訪問并操縱元素（節(jié)點）等
4.3DOM操作
4.3.1定位并獲取元素1.通過方法獲取
getElementById()，通過id獲取getElementsByTagName()，通過標(biāo)簽名獲取getElementsByClassName()，通過類名獲取getElementsByName()，通過name屬性獲取querySelector()，通過選擇器獲取一個元素querySelectorAll()，通過選擇器獲取多個元素
4.3DOM操作
4.3.1定位并獲取元素1.通過方法獲取→示例
<!--HTML代碼略-->
letlist1=document.getElementById("list1");list1.style.color="red";letlist=document.getElementsByTagName("li");console.log(list.length);letlist3=document.getElementsByName("list3");letu1=document.querySelector("#u1");letu1_list2=u1.querySelectorAll(".list2");
4.3DOM操作
4.3.1定位并獲取元素2.通過節(jié)點關(guān)系獲取
DOM樹是一個由節(jié)點構(gòu)成的層級關(guān)系每段標(biāo)記都可以表示為這個樹型結(jié)構(gòu)中的一個節(jié)點DOM中共有12種節(jié)點類型每個節(jié)點都具有nodeType、nodeName和nodeValue這樣三個屬性每個節(jié)點都與其他節(jié)點存在聯(lián)系
4.3DOM操作
4.3.1定位并獲取元素2.通過節(jié)點關(guān)系獲取→節(jié)點關(guān)系圖
4.3DOM操作
4.3.1定位并獲取元素2.通過節(jié)點關(guān)系獲取→【例4-3】<ulid="u1"><liid="list1">列表項1</li><liid="list2">列表項2</li></ul><scripttype="text/javascript">letu1=document.getElementById("u1");letu1_childNodes=u1.childNodes;console.log(u1_childNodes.length);//5letu1_firstNode=u1_childNodes[0];//取出第1個子節(jié)點console.log(u1_firstNode.nodeType);//3console.log(u1_firstNode.nodeName);//#textconsole.log(u1_firstNode.nodeValue);//換行</script>
4.3DOM操作
4.3.1定位并獲取元素2.通過節(jié)點關(guān)系獲取→【例4-4】<div><ulid="u1"><liid="list1">列表項1</li><liid="list2">列表項2</li></ul></div><scripttype="text/javascript">letu1=documen
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 工程概算考試題及答案大全
- 2025年合肥創(chuàng)和資產(chǎn)管理有限責(zé)任公司第一批人員招聘2人模擬試卷及答案詳解（奪冠系列）
- 產(chǎn)品具體信息與功能達(dá)標(biāo)保證承諾書5篇
- 產(chǎn)品品質(zhì)檢測與優(yōu)化分析工具集
- 高考試題分解圖解及答案
- 高級職業(yè)農(nóng)民考試題及答案
- 2025年政府采購考試試題及答案
- 2025年丙肝防治培訓(xùn)考核試題(+答案解析)
- 人行法律筆試題目及答案
- 銷售客服筆試題目及答案
- 2025年全國統(tǒng)一高考英語Ⅰ卷（含解析）
- 小兒過敏性紫癜護(hù)理常規(guī)
- 紀(jì)檢干事考試題及答案
- 2025至2030年中國聚氨酯行業(yè)市場全景調(diào)查及投資前景展望報告
- 腦卒中中西醫(yī)綜合治療
- 敬老院財務(wù)管理培訓(xùn)
- 小兒腸炎的癥狀及治療
- 2025年發(fā)展對象培訓(xùn)班考試試題及參考答案
- 河北承德市隆化縣“4·8”養(yǎng)老院火災(zāi)事故案例學(xué)習(xí)警示教育
- 胰源性糖尿病的護(hù)理
- 北京花園鄉(xiāng)村建設(shè)導(dǎo)則
評論
0/150
提交評論