版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
項(xiàng)目4科技資訊網(wǎng)HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)掌握J(rèn)avaScript的3種引入方式掌握標(biāo)識(shí)符的命名規(guī)則、常用的關(guān)鍵字與保留字掌握常量、變量和數(shù)據(jù)類型的定義掌握J(rèn)avaScript函數(shù)的語法格式掌握獲取HTML元素的常用方法的使用掌握創(chuàng)建JavaScript對(duì)象的4種方式掌握DOM的基礎(chǔ)操作掌握流程控制語句與數(shù)組的使用理解BOM對(duì)象中提供的5個(gè)瀏覽器內(nèi)置對(duì)象掌握連續(xù)定時(shí)器與延遲定時(shí)器的使用掌握事件的對(duì)象、調(diào)用和處理掌握ECMAScript6.0的6個(gè)新特性HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)學(xué)習(xí)目標(biāo)技能目標(biāo)熟練使用JavaScript的基礎(chǔ)知識(shí)實(shí)現(xiàn)科技資訊網(wǎng)首頁的導(dǎo)航欄與下拉菜單熟練使用流程控制、數(shù)組、BOM對(duì)象和定時(shí)器實(shí)現(xiàn)科技資訊網(wǎng)首頁的廣告欄與城市商業(yè)信息熟練使用常用的JavaScript事件實(shí)現(xiàn)科技資訊網(wǎng)首頁的熱門推薦與資訊素質(zhì)目標(biāo)鼓勵(lì)學(xué)生在JavaScript技術(shù)學(xué)習(xí)中不斷追求卓越、提升自我培養(yǎng)學(xué)生持續(xù)學(xué)習(xí)和探索新技術(shù)的習(xí)慣，關(guān)注JavaScript及其相關(guān)技術(shù)的最新發(fā)展HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)學(xué)習(xí)內(nèi)容任務(wù)1實(shí)現(xiàn)科技資訊網(wǎng)首頁的導(dǎo)航欄與下拉菜單任務(wù)2實(shí)現(xiàn)科技資訊網(wǎng)首頁的廣告欄與城市商業(yè)信息任務(wù)3實(shí)現(xiàn)科技資訊網(wǎng)首頁的熱門推薦與資訊HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)項(xiàng)目描述科技資訊網(wǎng)主要以首頁為例，使用不同的JavaScript知識(shí)實(shí)現(xiàn)首頁的不同部分，首頁展示的內(nèi)容主要包括導(dǎo)航欄、廣告欄、公告信息、城市商業(yè)信息、熱門推薦、熱門資訊和頁面版權(quán)信息。通過對(duì)科技資訊網(wǎng)首頁實(shí)現(xiàn)過程的學(xué)習(xí)，讀者將掌握J(rèn)avaScript的基礎(chǔ)、DOM對(duì)象、BOM對(duì)象、定時(shí)器、事件對(duì)象、事件的調(diào)用與處理、常用的JavaScript事件，以及ECMAScript6.0新特性等知識(shí)的運(yùn)用。任務(wù)1實(shí)現(xiàn)科技資訊網(wǎng)首頁的導(dǎo)航欄與下拉菜單1HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)需求分析科技資訊網(wǎng)首頁的導(dǎo)航欄包含指向網(wǎng)站主要頁面的鏈接，如首頁、資訊、商業(yè)、數(shù)碼、家電、汽車、娛樂、體育等。科技資訊網(wǎng)首頁的導(dǎo)航欄與下拉菜單的效果如下圖所示。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)知識(shí)儲(chǔ)備一、JavaScript簡介
七、DOM對(duì)象二、JavaScript的引入方式
八、DOM節(jié)點(diǎn)三、標(biāo)識(shí)符、關(guān)鍵字與保留字
九、DOM的基本操作四、常量、變量與數(shù)據(jù)類型
五、JavaScript函數(shù)六、創(chuàng)建JavaScript對(duì)象HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、JavaScript簡介JavaScript是一種輕量級(jí)、解釋型的Web開發(fā)語言，是可與HTML文件相融合的一種腳本語言。JavaScript語言的特性和結(jié)構(gòu)如下所示。1.JavaScript語言的特性（1）解釋型?？梢浦残暂^好，只要有解釋環(huán)境，可在不同的操作系統(tǒng)上運(yùn)行。（2）弱類型。易于學(xué)習(xí)、語言表達(dá)簡單易懂、代碼更優(yōu)雅、開發(fā)周期更短、更加偏向邏輯設(shè)計(jì)。（3）動(dòng)態(tài)性。指在變量定義時(shí)不一定進(jìn)行賦值操作，只需在使用時(shí)作賦值操作即可。（4）事件驅(qū)動(dòng)。JavaScript對(duì)用戶的響應(yīng)以事件驅(qū)動(dòng)的方式進(jìn)行。如單擊、拖動(dòng)窗口、選擇菜單等。（5）跨平臺(tái)。JavaScript依賴于瀏覽器本身，與操作環(huán)境無關(guān)。“編好一次，走遍天下”。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、JavaScript簡介2.JavaScript的構(gòu)成JavaScript的構(gòu)成如下圖所示。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)二、JavaScript的引入方式
與CSS在HTML中的引入方式類似，JavaScript在HTML中的引入方式也有3種。
1.行間引入方式
行間引入方式是通過HTML標(biāo)簽的屬性進(jìn)行操作，一般不推薦使用。
下面使用alert()函數(shù)演示JavaScript的行間引入方式。
<body><divonclick="alert('科技跨界融合，創(chuàng)新引領(lǐng)未來。')">新聞</div></body>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)二、JavaScript的引入方式
2.內(nèi)部引入方式
內(nèi)部引入方式是在HTML文件中通過<script>標(biāo)簽的方式設(shè)置JavaScript代碼。
下面使用alert()函數(shù)演示JavaScript的內(nèi)部引入方式。<script>
//彈出窗口
alert('智慧融合創(chuàng)新，科技點(diǎn)亮生活。');</script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)二、JavaScript的引入方式
3.外部引入方式
外部引入方式也是通過<script>標(biāo)簽來設(shè)置JavaScript代碼的。
在HTML文件中引入外部JavaScript文件的示例代碼如下。<scriptsrc="js/hello.js"></script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)三、標(biāo)識(shí)符、關(guān)鍵字與保留字1.標(biāo)識(shí)符
標(biāo)識(shí)符是JavaScript編程中用于給變量、函數(shù)、數(shù)組、對(duì)象等命名的符號(hào)。標(biāo)識(shí)符命名的規(guī)則有以下幾點(diǎn)：（1）可以包含字母、數(shù)字、下劃線（_）和美元符號(hào)（$）。（2）不能以數(shù)字開頭。（3）區(qū)分大小寫。（4）不能是JavaScript的關(guān)鍵字、保留字或true、false、null。breakdoinstanceofvarcaseelsenewvoidcatchfinallyreturnwhilecontinueforswitchwithdebuggerfunctionthisdeletedefaultifthrowintrytypeof2.關(guān)鍵字JavaScript中的常見關(guān)鍵字如下表所示。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)三、標(biāo)識(shí)符、關(guān)鍵字與保留字abstractenumintshortbooleanexportinterfacestaticbyteextendslongsupercharfinalnativesynchronizedclassfloatpackagethrowsconstgotoprivatetransientdoubleimportpublic3.保留字JavaScript的常見保留字如下表所示。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)四、常量、變量與數(shù)據(jù)類型1.常量
在JavaScript中，const關(guān)鍵字用于聲明常量，一旦常量被賦值后，它的值就不能被再次修改。聲明常量的示例代碼如下。2.變量在JavaScript中，可以使用var、let關(guān)鍵字來聲明變量。當(dāng)使用var聲明一個(gè)變量時(shí)，其作用域是函數(shù)作用域或全局作用域；當(dāng)使用let聲明一個(gè)變量時(shí)，這個(gè)變量是一個(gè)塊級(jí)作用域的局部變量。聲明變量的示例代碼如下。constPI=3.14;//這行代碼會(huì)拋出錯(cuò)誤，因?yàn)镻I是一個(gè)常量，不能修改其值//PI=3.14159;varname="Alice";letage=30;HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)四、常量、變量與數(shù)據(jù)類型3.數(shù)據(jù)類型
JavaScript有6種數(shù)據(jù)類型。（1）number類型表示數(shù)字類型，用于存儲(chǔ)數(shù)字。（2）string類型表示字符串類型。字符串是由Unicode字符集子集構(gòu)成的序列，在JavaScript中用來表示文本的數(shù)據(jù)類型，示例代碼如下。varfoo=123;
//數(shù)字類型的整型varbar=3.14;
//數(shù)字類型的浮點(diǎn)型varfoo='hello';//字符串類型varbar='123';//字符串類型HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)四、常量、變量與數(shù)據(jù)類型（3）boolean類型表示布爾值類型，布爾值表示真假值，示例代碼如下。（5）undefined類型表示未定義類型，如果var關(guān)鍵字聲明一個(gè)變量，但并沒有對(duì)其進(jìn)行賦值，則無法判斷變量的數(shù)據(jù)類型，此時(shí)變量數(shù)據(jù)類型是undefined，示例代碼如下。varfoo=true;//布爾值類型varbar=false;//布爾值類型varfoo;//未定義類型（4）object類型表示對(duì)象類型，對(duì)象是各種值的集合。在后續(xù)內(nèi)容中涉及的數(shù)組、函數(shù)、各種內(nèi)置對(duì)象都屬于對(duì)象類型。在后續(xù)內(nèi)容中將會(huì)對(duì)對(duì)象進(jìn)行講解，此處了解即可。（6）null類型表示空類型，表示當(dāng)前為空值，示例代碼如下。varfoo=null;
//空類型HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)五、JavaScript函數(shù)JavaScript函數(shù)是一段可以重復(fù)使用的代碼塊，它實(shí)現(xiàn)了特定的功能。JavaScript函數(shù)的基本語法格式如下所示。function函數(shù)名(參數(shù)1,參數(shù)2,...){
函數(shù)體}//定義函數(shù)函數(shù)名(參數(shù)1,參數(shù)2,...)//調(diào)用函數(shù)需要注意的是，除了使用JavaScript函數(shù)的基本語法格式來定義函數(shù)之外，JavaScript還提供了許多內(nèi)置函數(shù)，例如，可以在頁面中彈出警告框的alert()函數(shù)、彈出確認(rèn)框的confirm()函數(shù)和彈出對(duì)話框的prompt()函數(shù)。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用五、JavaScript函數(shù)
下面通過一個(gè)例子演示JavaScript中內(nèi)置函數(shù)alert()、confirm()和prompt()的使用，核心代碼與運(yùn)行效果如下。
<body><buttononclick="showAlert()">顯示警告框</button><buttononclick="showConfirm()">顯示確認(rèn)框</button><buttononclick="showPrompt()">顯示提示框</button><script>//顯示警告框functionshowAlert(){alert("這是一個(gè)警告框！");}//顯示確認(rèn)框functionshowConfirm(){varuserChoice=confirm("您確定要繼續(xù)嗎？");if(userChoice){alert("您單擊了'確定'！");}else{alert("您單擊了'取消'！");}}......HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用五、JavaScript函數(shù)警告框、確認(rèn)框和提示框的運(yùn)行效果如下圖所示。
單擊“顯示警告框”按鈕，會(huì)彈出一個(gè)警告框如下圖所示。
HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用五、JavaScript函數(shù)單擊“顯示確認(rèn)框”按鈕，會(huì)彈出一個(gè)確認(rèn)框，如下圖所示。
單擊“顯示提示框”按鈕，會(huì)彈出一個(gè)提示框如下圖所示。
HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用五、JavaScript函數(shù)單擊“確定”按鈕會(huì)提示“您好，訪客！很高興見到您?！本婵颍缦聢D所示。
HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)六、創(chuàng)建JavaScript對(duì)象1.字面量方式
字面量創(chuàng)建JavaScript對(duì)象是一種簡便的方式，具體用法如下所示。2.newObject()創(chuàng)建對(duì)象首先使用object構(gòu)造器new一個(gè)對(duì)象，然后在對(duì)象中設(shè)置豐富的成員信息，具體用法如下所示。varstudent={name:'張小明',age:18,play:function(){console.log('羽毛球，乒乓球，籃球');}}varstudent=newObject();='張小明';student.age=18;student.play=function(){console.log('羽毛球，乒乓球，籃球');}HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)六、創(chuàng)建JavaScript對(duì)象
3.工廠函數(shù)創(chuàng)建對(duì)象
使用工廠函數(shù)方式創(chuàng)建對(duì)象是使用函數(shù)來創(chuàng)建對(duì)象，類似于一個(gè)“工廠模式”，可以大批量地創(chuàng)建同種類型的對(duì)象。functioncreateStudent(name,age){varstudent=newObject();=nane;student.age=age;student.play=function(){console.log('羽毛球，乒乓球，籃球');}returnstudent;}varstu1=createStudent('張小明',18);varstu2=createStudent('李明',16);stu1.play();HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)六、創(chuàng)建JavaScript對(duì)象
4.自定義構(gòu)造函數(shù)
使用自定義構(gòu)造函數(shù)方式是通過給構(gòu)造函數(shù)傳遞不同的參數(shù)，然后調(diào)用構(gòu)造函數(shù)來創(chuàng)建不同對(duì)象，具體用法如下所示。functionStudent(name,age){=name;this.age=age;this.play=function(){console.log('籃球，排球，足球');}}varstu1=createStudent('張三',15);HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)六、創(chuàng)建JavaScript對(duì)象
new操作符的4個(gè)作用說明如下。（1）開辟內(nèi)存空間，存儲(chǔ)新創(chuàng)建的對(duì)象。（2）new操作符會(huì)讓this指向這個(gè)新的對(duì)象。（3）執(zhí)行構(gòu)造函數(shù)為新對(duì)象添加屬性和方法。（4）new操作符會(huì)返回新創(chuàng)建的對(duì)象。
構(gòu)造函數(shù)中this的4個(gè)特點(diǎn)說明如下。（1）在定義函數(shù)的時(shí)候this是不確定的，只有在調(diào)用的時(shí)候才能明確其指向。（2）一般函數(shù)直接執(zhí)行，內(nèi)部this會(huì)指向全局window對(duì)象。（3）函數(shù)作為一個(gè)對(duì)象的方法，被該對(duì)象所調(diào)用，那么this指向的是該對(duì)象。（4）構(gòu)造函數(shù)中的this其實(shí)是一個(gè)隱式對(duì)象，類似一個(gè)初始化的模型，所有方法和屬性都掛載到了這個(gè)隱式對(duì)象身上，后續(xù)通過new操作符來調(diào)用，從而實(shí)現(xiàn)實(shí)例化對(duì)象的使用。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)七、DOM對(duì)象DOM（DocumentObjectModel）對(duì)象即文檔對(duì)象模型，該對(duì)象是由W3C制定的用于操作HTML和XML的標(biāo)準(zhǔn)。DOM提供了一系列方法對(duì)HTML文檔節(jié)點(diǎn)進(jìn)行操作，并對(duì)文檔中的每個(gè)元素節(jié)點(diǎn)又做了細(xì)分：document對(duì)象，是HTML文檔的根節(jié)點(diǎn)，使用該對(duì)象可以對(duì)HTML頁面中的所有元素進(jìn)行訪問。element對(duì)象，HTML中的元素對(duì)象，是document對(duì)象所有子節(jié)點(diǎn)的集合，包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)等。attributes對(duì)象，是HTML元素的屬性對(duì)象。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)七、DOM對(duì)象HTML頁面的DOM樹結(jié)構(gòu)如下圖所示。Document對(duì)象提供了獲取HTML元素的方法，常用的方法有：document.getElementById()、document.getElementsByName()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector()、document.querySelectorAll()、document.images()、document.links()HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)七、DOM對(duì)象使用Document對(duì)象的方法獲取HTML元素的示例代碼如下。DOM獲取HTML根元素的示例代碼如下。<script>
varaEle=document.getElementById('link');
aEle.innerText='前往百度首頁';</script>varh1=document.documentElementDOM獲取body元素的示例代碼如下。varb1=document.bodyHTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)八、DOM節(jié)點(diǎn)在DOM節(jié)點(diǎn)中，不同的節(jié)點(diǎn)對(duì)應(yīng)的節(jié)點(diǎn)類型可能不一樣，主要有元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)、文檔節(jié)點(diǎn)等節(jié)點(diǎn)類型。節(jié)點(diǎn)類型的對(duì)應(yīng)值如下表所示。節(jié)點(diǎn)類型nodeTypenodeNamenodeValue元素節(jié)點(diǎn)1大寫的HTML元素名Undefined或null屬性節(jié)點(diǎn)2元素屬性名屬性值文本節(jié)點(diǎn)3#text#text的文本值注釋節(jié)點(diǎn)8#comment#comment的文本值文檔節(jié)點(diǎn)9#documentnullHTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用八、DOM節(jié)點(diǎn)
下面通過一個(gè)例子演示nodeType屬性、nodeName屬性和nodeValue屬性的使用，核心代碼與運(yùn)行效果如下。
<script>varbox1=document.getElementById("box");console.log("元素節(jié)點(diǎn)的nodeType:"+box1.nodeType)
......varatt=box1.getAttributeNode("title");console.log("屬性節(jié)點(diǎn)的nodeType:"+att.nodeType)......vartxt=box1.firstChild;console.log("文本節(jié)點(diǎn)的nodeType:"+txt.nodeType)......HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)八、DOM節(jié)點(diǎn)父節(jié)點(diǎn)、子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的具體說明，以及獲取節(jié)點(diǎn)的方法如下表所示。節(jié)點(diǎn)分類說明獲取節(jié)點(diǎn)方法父節(jié)點(diǎn)parentNode父節(jié)點(diǎn)元素的父節(jié)點(diǎn)var父節(jié)點(diǎn)=節(jié)點(diǎn)象.parentNode子節(jié)點(diǎn)firstChild第一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的第一個(gè)節(jié)點(diǎn)var第一個(gè)子節(jié)點(diǎn)=父節(jié)點(diǎn).firstChildlastChild最后一個(gè)子節(jié)點(diǎn)指向在子節(jié)點(diǎn)列表中的最后一個(gè)節(jié)點(diǎn)var最后一個(gè)子節(jié)點(diǎn)=父點(diǎn).lastChildchildNodes所有子節(jié)點(diǎn)所有子節(jié)點(diǎn)的列表var偽數(shù)組=父節(jié)點(diǎn).childNodes兄弟節(jié)點(diǎn)previousSibling上一個(gè)兄弟節(jié)點(diǎn)指向前一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是第一個(gè),那么該值為nullvar上一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)象.previousSiblingnextSibling下一個(gè)兄弟節(jié)點(diǎn)指向后一個(gè)兄弟節(jié)點(diǎn),如果這個(gè)節(jié)點(diǎn)就是最后一個(gè),那么該值為nullvar下一個(gè)兄弟節(jié)點(diǎn)=節(jié)點(diǎn)對(duì)象.nextSiblingHTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作1.DOM節(jié)點(diǎn)的操作
（1）創(chuàng)建節(jié)點(diǎn)。在DOM中，createElement()方法通過傳入指定的一個(gè)標(biāo)簽名可創(chuàng)建一個(gè)元素節(jié)點(diǎn)。創(chuàng)建節(jié)點(diǎn)的語法格式如下所示。1）appendChild()方法。使用appendChild()方法向當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)，其語法格式如下所示。document.createElement("標(biāo)簽名")當(dāng)前節(jié)點(diǎn).appendChild(插入的節(jié)點(diǎn));DOM的基礎(chǔ)操作包括DOM節(jié)點(diǎn)的操作、DOM操作屬性和樣式，具體介紹如下。
（2）添加節(jié)點(diǎn)。在DOM中，添加節(jié)點(diǎn)有appendChild()和insertBefore()2種方法。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)下面通過一個(gè)例子演示標(biāo)題標(biāo)簽的使用九、DOM的基礎(chǔ)操作
下面通過一個(gè)例子演示使用appendChild()方法添加新節(jié)點(diǎn)的方式，核心代碼與運(yùn)行效果如下。
<ulid="list"><li>已有的列表項(xiàng)1</li><li>已有的列表項(xiàng)2</li><li>已有的列表項(xiàng)3</li></ul><script>varlist=document.getElementById("list");
varli=document.createElement("li");li.innerHTML="新添加的列表項(xiàng)1";//為新節(jié)點(diǎn)添加內(nèi)容list.appendChild(li);//使用appendChild()方法添加新節(jié)點(diǎn)</script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作2）insertBefore()方法。使用insertBefore()方法用于實(shí)現(xiàn)在當(dāng)前節(jié)點(diǎn)前添加一個(gè)新的子節(jié)點(diǎn)，其語法格式如下所示。當(dāng)前節(jié)點(diǎn).insertBefore(新添加的子節(jié)點(diǎn),子節(jié)點(diǎn));下面通過一個(gè)例子演示使用insertBefore()方法添加新節(jié)點(diǎn)的方式。核心代碼與運(yùn)行結(jié)果如下所示。<ulid="list"><li>已有的列表項(xiàng)1</li><li>已有的列表項(xiàng)2</li><li>已有的列表項(xiàng)3</li><li>已有的列表項(xiàng)4</li></ul><script>varlist=document.getElementById("list");varli=list.getElementsByTagName("li")varli2=document.createElement("li");//創(chuàng)建新的節(jié)點(diǎn)li2.innerHTML="新添加的列表項(xiàng)2";//為新節(jié)點(diǎn)添加內(nèi)容list.insertBefore(li2,li[1]);//使用insertBefore()方法添加新節(jié)點(diǎn)</script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作（3）刪除節(jié)點(diǎn)。removeChild()方法用于刪除指定的節(jié)點(diǎn)，其語法格式如下所示。
replaceChild()方法替換節(jié)點(diǎn)的示例代碼如下所示。當(dāng)前節(jié)點(diǎn).removeChild(刪除的子節(jié)點(diǎn));//創(chuàng)建要替換的新節(jié)點(diǎn)varp1=document.createElement("p");//為要替換的新節(jié)點(diǎn)添加內(nèi)容p1.innerHTML="新創(chuàng)建的文字";//使用replaceChild()方法在網(wǎng)頁上替換節(jié)點(diǎn)list.replaceChild(p1,li[2]);（4）替換節(jié)點(diǎn)。replaceChild()方法用于將某個(gè)子節(jié)點(diǎn)替換為另一個(gè)新的子節(jié)點(diǎn)，replaceChild()方法的語法格式如下所示。當(dāng)前節(jié)點(diǎn).replaceChild(要替換的新節(jié)點(diǎn),被替換的舊節(jié)點(diǎn));HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作（5）刪除節(jié)點(diǎn)。cloneNode()方法用于克隆指定的節(jié)點(diǎn)，cloneNode()方法的語法格式如下所示。要克隆的節(jié)點(diǎn).cloneNode(布爾值);通過cloneNode()方法可對(duì)節(jié)點(diǎn)進(jìn)行“復(fù)制”操作，cloneNode()方法克隆節(jié)點(diǎn)的示例代碼如下所示。varclone1=p1.cloneNode(true);//克隆一個(gè)節(jié)點(diǎn)//使用appendChild()方法在網(wǎng)頁上顯示新拼接的節(jié)點(diǎn)list.appendChild(clone1);HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作2.DOM操作屬性和樣式
（1）DOM操作屬性。
DOM操作屬性如下表所示。方法說明getAttributeNode("屬性名")獲取元素節(jié)點(diǎn)中指定的屬性。getAttribute("屬性名")獲取元素節(jié)點(diǎn)中指定屬性的屬性值，如果屬性節(jié)點(diǎn)不存在，則返回null。setAttribute("屬性名","屬性值")創(chuàng)建或修改元素節(jié)點(diǎn)的屬性，如果屬性節(jié)點(diǎn)不存在，則創(chuàng)建該屬性；如果屬性節(jié)點(diǎn)存在，則修改該屬性的值。removeAttribute("屬性名")刪除元素中指定屬性。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)九、DOM的基礎(chǔ)操作（2）DOM操作樣式。在JavaScript中，可通過DOM操作行內(nèi)樣式，即控制HTML元素的style屬性，從而設(shè)置或修改元素樣式，其語法格式如下所示。元素.style.css屬性名="屬性值";例p1style.backgroundColor="blue";DOM提供了cssText屬性，可用來一次性設(shè)置多組CSS樣式。cssText屬性的語法格式如下所示。元素.style.cssText="CSS屬性名1:屬性值1;......";例p1style.cssText="color:red;font-size:16px";HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)任務(wù)實(shí)現(xiàn)
在chapter04文件夾中創(chuàng)建一個(gè)名為cnet.html的文件，該文件用于實(shí)現(xiàn)科技資訊網(wǎng)首頁。
<head>
......<!--導(dǎo)航欄--><divid="nav"><ulclass="nav"><li><ahref="#"class="color_in">首頁</a></li><liclass="dropdown"><ahref="#"class="dropbtn">資訊</a><ulclass="dropdown-content"><li><ahref="#">國內(nèi)新聞</a></li><li><ahref="#">國際新聞</a></li>....../*下拉菜單樣式*/.dropdown-content{display:none;position:absolute;background-color:#0b0b0b;min-width:105px;z-index:1;}.dropdown-contenta{color:rgb(255,255,255);padding:3px26px;......HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)任務(wù)實(shí)現(xiàn)
在chapter04文件夾中創(chuàng)建js文件夾，在該文件夾中創(chuàng)建cnet.js文件，該文件用于設(shè)置彈出的下拉菜單。
document.addEventListener('DOMContentLoaded',function(){//獲取所有可能的下拉菜單觸發(fā)器vardropdownTriggers=document.querySelectorAll('.dropdown');//為每個(gè)觸發(fā)器添加鼠標(biāo)進(jìn)入和離開事件dropdownTriggers.forEach(function(trigger){trigger.addEventListener('mouseover',function(){//鼠標(biāo)進(jìn)入時(shí)顯示下拉菜單vardropdownContent=this.querySelector('.dropdown-content');dropdownContent.style.display='block';});trigger.addEventListener('mouseout',function(){//鼠標(biāo)離開時(shí)隱藏下拉菜單vardropdownContent=this.querySelector('.dropdown-content');dropdownContent.style.display='none';});});});任務(wù)2實(shí)現(xiàn)科技資訊網(wǎng)首頁的廣告欄與城市商業(yè)信息2HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)需求分析科技資訊網(wǎng)首頁的導(dǎo)航欄下方需要顯示廣告欄和城市商業(yè)信息，科技資訊網(wǎng)首頁的廣告欄與城市商業(yè)信息的效果如右圖所示。HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)知識(shí)儲(chǔ)備一、流程控制二、數(shù)組三、BOM對(duì)象四、定時(shí)器HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、流程控制JavaScript中的流程控制語句與其他語言相似，一般可分為順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種。接下來介紹一下常用的if語句和for循環(huán)。1.if語句（1）單向選擇。
（2）雙向選擇。if（邏輯條件）{
語句1;}語句2;if（邏輯條件）{
語句1;}else{
語句2;}HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、流程控制（3）多向選擇。
if（邏輯條件1）{
語句1;}elseif（邏輯條件2）{
語句2;}......else{
語句n;}for（初始化語句;循環(huán)條件;控制條件）{
循環(huán)體語句;}2.for循環(huán)for循環(huán)是循環(huán)結(jié)構(gòu)中常見的語句，同時(shí)也是使用最為廣泛的循環(huán)語句，能夠反復(fù)執(zhí)行一段代碼，提高代碼的復(fù)用率，其語法格式如下所示。
HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、流程控制（1）break語句。break語句用于跳出整體循環(huán)，停止后續(xù)循環(huán)操作。下面通過一個(gè)例子演示使用break語句計(jì)算出1~10之間，截止到能被8整除的整數(shù)，之前所有整數(shù)的和。<script>vars=0;for(vari=1;i<10;i++){if(i%8==0){//判斷條件為能被8整除break;//終止當(dāng)前循環(huán)，順序執(zhí)行循環(huán)后面的語句}s+=i;//循環(huán)累加console.log("本次循環(huán)數(shù)值為"+i);//依次列出執(zhí)行哪一個(gè)循環(huán)}console.log(s);//計(jì)算整數(shù)的和
</script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)一、流程控制（2）continue語句。continue語句只跳出本次循環(huán)，不影響后續(xù)循環(huán)。下面使用continue語句計(jì)算出1~10之間所有不能被8整除的整數(shù)和。<script>vars=0;for(vari=1;i<10;i++){if(i%8==0){//判斷條件為能被8整除continue;//跳出本次循環(huán)，進(jìn)入下一次循環(huán)}s+=i;//循環(huán)累加console.log("本次循環(huán)數(shù)值為"+i);//依次列出執(zhí)行哪一個(gè)循環(huán)}console.log(s);//計(jì)算整數(shù)的和</script>二、數(shù)組1.創(chuàng)建數(shù)組（1）使用數(shù)組文本創(chuàng)建數(shù)組。vararray-name=[item1,item2,...];//語法格式vararr=[];
//創(chuàng)建一個(gè)空數(shù)組vararr1=[36,18,3,34,19];//創(chuàng)建一個(gè)帶初始元素的數(shù)組（2）使用new操作符創(chuàng)建數(shù)組。vararray-name=newArray(item1,item2,...);//語法格式vararr=newArray();
//創(chuàng)建一個(gè)空數(shù)組vararr2=newArray(25,3,15,49,6);//創(chuàng)建一個(gè)帶初始元素的數(shù)組二、數(shù)組2.數(shù)組的操作（1）添加、刪除數(shù)組。添加、刪除數(shù)組方法的具體說明如下表所示。方法說明push()在數(shù)組末端向數(shù)組添加一個(gè)或多個(gè)新的元素unshift()在數(shù)組開頭向數(shù)組添加一個(gè)或多個(gè)新元素shift()從數(shù)組中刪除起始元素，并返回該元素pop()從數(shù)組中刪除最后一個(gè)元素，并返回該元素slice()可截取數(shù)組splice()可刪除數(shù)組（2）轉(zhuǎn)換數(shù)組。轉(zhuǎn)換數(shù)組方法的具體說明如下表所示。方法說明toString()可將數(shù)組轉(zhuǎn)換為字符串join()以參數(shù)作為分隔符，將所有數(shù)組成員組成一個(gè)字符串返回。如果不提供參數(shù)，則默認(rèn)用逗號(hào)分隔二、數(shù)組數(shù)組轉(zhuǎn)換為字符串的具體示例代碼如下。<script>vararr1=['黃瓜','西紅柿','辣椒','生姜'];console.log(arr1.toString());//黃瓜,西紅柿,辣椒,生姜console.log(arr1.join('/'));//黃瓜/西紅柿/辣椒/生姜console.log(arr1.join(''));//黃瓜西紅柿辣椒生姜（參數(shù)為空格）console.log(arr1.join());//黃瓜,西紅柿,辣椒,生姜console.log(arr1.join(''));//黃瓜西紅柿辣椒生姜（參數(shù)無內(nèi)容）</script>二、數(shù)組（3）遍歷數(shù)組。遍歷數(shù)組的方法的具體說明如下表所示。方法說明for循環(huán)for循環(huán)是使用頻率最高，并且最簡單的一種循環(huán)遍歷方法for...in循環(huán)既可以用于遍歷數(shù)組，也可以用于遍歷對(duì)象for...of循環(huán)不僅可以遍歷數(shù)組，還可以遍歷可迭代對(duì)象forEach()循環(huán)沒有返回值，對(duì)原數(shù)組沒有影響，不支持IE方法說明map()遍歷為數(shù)組的每個(gè)元素依次調(diào)用指定的回調(diào)函數(shù)，根據(jù)函數(shù)結(jié)果返回一個(gè)新數(shù)組every()遍歷確定數(shù)組的所有元素是否都滿足指定測(cè)試some()遍歷確定數(shù)組的元素是否有滿足指定的測(cè)試filter()遍歷返回?cái)?shù)組中滿足指定條件的元素二、數(shù)組下面通過一個(gè)學(xué)生成績管理系統(tǒng)的例子演示數(shù)組的使用，核心代碼如下所示。
<style>table,th,td{border:1pxsolidblack;border-collapse:collapse;}th,td{padding:10px;text-align:left;}</style>
<h1>學(xué)生成績管理系統(tǒng)</h1><!--添加學(xué)生表單--><formid="addStudentForm"><labelfor="name">姓名:</label><inputtype="text"id="name"name="name"><br><br><labelfor="score">分?jǐn)?shù):</label><inputtype="number"id="score"name="score"><br><br><buttontype="button"onclick="addStudent()">添加學(xué)生</button></form><!--顯示學(xué)生信息的表格--><tableid="studentsTable">......二、數(shù)組學(xué)生成績管理系統(tǒng)的運(yùn)行效果如下圖所示。輸入要添加的學(xué)生姓名和分?jǐn)?shù)，單擊“添加學(xué)生”按鈕，頁面的表格下方會(huì)顯示添加的學(xué)生姓名和成績信息，如下圖所示。三、BOM對(duì)象BOM（BrowserObjectModel）對(duì)象是瀏覽器對(duì)象模型，開發(fā)者可以使用BOM對(duì)象提供的接口實(shí)現(xiàn)與瀏覽器窗口的交互。BOM對(duì)象提供了與瀏覽器窗口交互的能力，其包含了一些處理窗口的方法，例如打開新窗口、監(jiān)聽窗口改變、彈出警告框等，這些方法可以使用window對(duì)象來調(diào)用，window對(duì)象也是瀏覽器下的全局對(duì)象，使用window對(duì)象調(diào)用瀏覽器方法的示例代碼如下。window.location.href='';//打開新網(wǎng)址window.onload=function(){};
//監(jiān)聽窗口加載完畢window.open('');
//打開新窗口window.alert('HelloWorld');
//彈出警告框三、BOM對(duì)象雖然目前BOM對(duì)象沒有公開的統(tǒng)一標(biāo)準(zhǔn)，但是有5個(gè)瀏覽器內(nèi)置對(duì)象是所有瀏覽器都支持的，下面介紹這5個(gè)對(duì)象。window對(duì)象，瀏覽器的全局對(duì)象，表示瀏覽器中打開的窗口，是BOM的操作入口。screen對(duì)象，包含有關(guān)客戶端顯示屏幕的信息，例如屏幕的高度、寬度、顏色分辨率等。history對(duì)象，包含用戶在瀏覽器中訪問過的URL記錄。location對(duì)象，包含當(dāng)前瀏覽器窗口中的URL信息。navigator對(duì)象，包含所有瀏覽器的信息，例如瀏覽器的名稱、版本、代碼名等。三、BOM對(duì)象history對(duì)象、location對(duì)象和navigator對(duì)象主要實(shí)現(xiàn)了對(duì)瀏覽器的操作，下面對(duì)這3個(gè)對(duì)象進(jìn)行介紹。1.history對(duì)象history對(duì)象代表瀏覽器歷史訪問列表，保存用戶訪問頁面的歷史記錄。history對(duì)象提供了用于前進(jìn)和后退的方法，分別為forward()方法和back()方法，具體用法的示例代碼如下：history.forward();//在歷史訪問列表中前進(jìn)1頁history.back();//在歷史訪問列表中后退1頁三、BOM對(duì)象history.go()方法接收表示前進(jìn)或后退頁面數(shù)量的參數(shù)，正數(shù)則表示前進(jìn)指定數(shù)量的頁面，負(fù)數(shù)為后退指定數(shù)量的頁面，具體示例代碼如下：history.go(2);//前進(jìn)2頁history.go(-3);//后退3頁history.go(-1);//后退1頁，等價(jià)于history.back();history.go(1);//前進(jìn)1頁，等價(jià)于history.forward();三、BOM對(duì)象2.location對(duì)象location對(duì)象表示當(dāng)前瀏覽器窗口所打開頁面的URL信息。通常URL的格式如下所示：scheme://hostname:port/path?querystring#fragment上述URL格式中的各部分說明如下：scheme是通信協(xié)議方案。hostname是主機(jī)名。port表示端口，是一個(gè)整數(shù)數(shù)字，可以省略。path是訪問資源的具體路徑。querystring是查詢字符串（可選內(nèi)容）。fragment用于指定資源中的信息片段，可選內(nèi)容。三、BOM對(duì)象獲取URL各部分內(nèi)容的屬性如下表所示。屬性說明hash獲取URL中#及之后的字符串內(nèi)容host獲取URL中主機(jī)名和端口信息hostname獲取主機(jī)名href獲取完整的URL字符串或設(shè)置URL屬性說明pathname獲取資源port獲取端口protocol獲取URL使用協(xié)議search獲取“?”及之后的查詢字符串內(nèi)容三、BOM對(duì)象下面通過示例演示location對(duì)象中的一系列屬性，具體示例代碼如下：
<script> console.log("href:"+location.href); console.log("protocol:"+tocol); console.log("host:"+location.host); console.log("hostname:"+location.hostname); console.log("port:"+location.port); console.log("pathname:"+location.pathname); console.log("search:"+location.search); console.log("hash:"+location.hash);
</script>三、BOM對(duì)象URL如果為http://localhost:8080/location.html?key=value&name=val#hello，則前面示例執(zhí)行結(jié)果如下：
href:http://localhost:8080/location.html?key=value&name=val#helloprotocol:http:host:localhost:8080hostname:localhostport:8080pathname:/location.htmlsearch:?key=value&name=valhash:#hello如果要改變?cè)跒g覽器中顯示的URL信息，最常用的是location.href屬性重新設(shè)置URL，具體示例代碼如下：
location.href="http://";三、BOM對(duì)象當(dāng)location對(duì)象被轉(zhuǎn)換為字符串時(shí)，href的屬性值會(huì)被返回，因此可以使用location代替location.href使用，上述代碼可以簡寫，具體如下：
location="http://";當(dāng)重新設(shè)置URL時(shí)，location對(duì)象調(diào)用assign()的方法設(shè)置該URL，并會(huì)向?yàn)g覽器的歷史訪問列表中添加一條訪問記錄，因此下面兩行代碼執(zhí)行后效果是完全一樣的。
location.href="http://";location.assign("http://");在location對(duì)象中，還有兩個(gè)常用方法reload()和replace()方法。
location.reload();//重新加載當(dāng)前頁面，相當(dāng)于刷新當(dāng)前頁面location.replace("http:///");
//重新以新的URL來代替當(dāng)前URL三、BOM對(duì)象navigator對(duì)象中包含了常用于檢測(cè)瀏覽器信息的屬性如下表所示。屬性說明appCodeName返回瀏覽器的代碼名，通常是MozillaappName完整的瀏覽器名稱appVersion瀏覽器平臺(tái)和版本信息cookieEnabled瀏覽器中是否啟用cookieplatform運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)userAgent返回由客戶機(jī)發(fā)送服務(wù)器的user-agent頭部的值userLanguage操作系統(tǒng)的默認(rèn)自然語言信息HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)三、BOM對(duì)象下面通過一個(gè)例子演示檢測(cè)瀏覽器信息的屬性的使用，核心代碼與運(yùn)行結(jié)果如下所示。<script>//函數(shù)來更新頁面上的信息functionupdateBrowserInfo(infoDiv){constplatform=navigator.platform;constappName=navigator.appName;constcookieEnabled=navigator.cookieEnabled;constappVersion=navigator.appVersion;infoDiv.innerHTML='';
//清除舊的信息
......四、定時(shí)器在JavaScript中，BOM的window對(duì)象有2種設(shè)置定時(shí)器的方法，即設(shè)置連續(xù)定時(shí)器和延遲定時(shí)器，主要由window.setInterval()和window.setTimeout()2個(gè)函數(shù)實(shí)現(xiàn)，它們負(fù)責(zé)向任務(wù)隊(duì)列添加定時(shí)任務(wù)。1.連續(xù)定時(shí)器setInterval()函數(shù)可設(shè)置連續(xù)的定時(shí)器，在指定的毫秒數(shù)后執(zhí)行指定的代碼，即通過設(shè)定一個(gè)時(shí)間間隔，每隔一段時(shí)間去執(zhí)行JavaScript的操作。setInterval()函數(shù)的語法格式如下所示。setInterval(code,millisec);clearInterval()函數(shù)清除定時(shí)器的語法格式如下所示。clearInterval(定時(shí)器對(duì)象);HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)四、定時(shí)器下面通過一個(gè)例子演示如何制作一個(gè)連續(xù)定時(shí)器。<script>vari=0;vartimer1=setInterval(show,1000);//每隔1秒調(diào)用1次定時(shí)器中的函數(shù)functionshow(){i++;console.log("教育領(lǐng)域在不斷探索科技與教學(xué)的融合"+i);if(i==4){//當(dāng)i=4時(shí)，清除定時(shí)器clearInterval(timer1);}}</script>四、定時(shí)器2.延遲定時(shí)器setTimeout()函數(shù)可設(shè)置延遲的定時(shí)器，按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)。setTimeout()函數(shù)的語法格式如下所示。setTimeout(code,millisec);clearInterval()函數(shù)清除定時(shí)器的語法格式如下所示。clearTimeout(定時(shí)器對(duì)象);HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)四、定時(shí)器下面通過一個(gè)例子演示如何制作一個(gè)延時(shí)定時(shí)器。<script>vartimer2=setTimeout(show,1000);//1秒之后調(diào)用1次定時(shí)器中的函數(shù)functionshow(){console.log("教育領(lǐng)域在不斷探索科技與教學(xué)的融合");clearTimeout(timer2);//清除定時(shí)器}</script>HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)任務(wù)實(shí)現(xiàn)
在cnet.html文件中添加一些標(biāo)簽顯示廣告欄信息、公告信息和商業(yè)城市信息。
......<!--廣告欄--><divclass="banner"><ulclass="banner_pic"id="banner_pic"><liclass="current"><imgclass="one"src="images/banner01.png"/></li><liclass="pic"><imgclass="one"src="images/banner02.png"/>
</li><liclass="pic"><imgclass="one"src="images/banner03.png"/>
</li></ul>............/*廣告欄*/.banner{
width:1000px;
height:285px;
margin:13pxauto15pxauto;
position:relative;
overflow:hidden;}.banner.banner_pic.pic{
display:none;}......HTML5的優(yōu)勢(shì)
解決了跨瀏覽器的問題
新增多個(gè)新特性
（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）
用戶優(yōu)先原則
化繁為簡的優(yōu)勢(shì)任務(wù)實(shí)現(xiàn)
在cnet.js文件中設(shè)置廣告欄的輪播效果與城市圖片的無縫滾動(dòng)效果。
......//焦點(diǎn)圖輪播window.onload=function(){
//頂部的焦點(diǎn)圖切換
functionhotChange(){
varcurrent_index=0;
window.setInterval(autoChange,3000);
varbutton_li=document.getElementById("button").
getElementsByTagName("li");
varpic_li=document.getElementById("banner_pic").
getElementsByTagName("li");
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 休養(yǎng)所老年公寓設(shè)計(jì)與運(yùn)營創(chuàng)新策略考核試卷
- 意外傷害保險(xiǎn)與保險(xiǎn)行業(yè)的風(fēng)險(xiǎn)管理與案例分析研究分析考核試卷
- 家用紡織品的供應(yīng)鏈管理與物流優(yōu)化考核試卷
- 車險(xiǎn)理賠合規(guī)培訓(xùn)課件
- 花生銷售合同范本
- 裝修押金轉(zhuǎn)讓合同范本
- 抵押的車位合同范本
- 寄養(yǎng)羊合同范本
- 小學(xué)生態(tài)平衡課件
- 超市促銷培訓(xùn)課件
- 醫(yī)學(xué)遺傳學(xué)教案-山東大學(xué)醫(yī)學(xué)遺傳學(xué)
- 海南省澄邁縣2024-2025學(xué)年七年級(jí)上學(xué)期期末考試地理試題（含答案）
- 2025年蘇州衛(wèi)生職業(yè)技術(shù)學(xué)院高職單招職業(yè)技能測(cè)試近5年?？及鎱⒖碱}庫含答案解析
- 部編人教版五年級(jí)下冊(cè)小學(xué)數(shù)學(xué)全冊(cè)教案
- 2024年世界職業(yè)院校技能大賽高職組“聲樂、器樂表演組”賽項(xiàng)參考試題庫（含答案）
- 2024年共青團(tuán)入團(tuán)考試題庫及答案
- 2023年國家公務(wù)員錄用考試《申論》真題（副省卷）及答案解析
- 2024-2030年中國醫(yī)療器械維修設(shè)備行業(yè)供需狀況及發(fā)展策略分析報(bào)告
- 中國心力衰竭診斷和治療指南2024解讀（完整版）
- 女性健康知識(shí)講座課件
- DB11T 1787-2020 二氧化碳排放核算和報(bào)告要求 其他行業(yè)
評(píng)論
0/150
提交評(píng)論