《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH05 JavaScript BOM和DOM_第1頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH05 JavaScript BOM和DOM_第2頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH05 JavaScript BOM和DOM_第3頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH05 JavaScript BOM和DOM_第4頁
《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》課件 CH05 JavaScript BOM和DOM_第5頁
已閱讀5頁，還剩60頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

JavaScript與jQuery

網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版學(xué)校名稱：XXXX主講教師：XXXX第5章JavaScript

DOM和BOM本章學(xué)習(xí)目標(biāo) 掌握J(rèn)avaScriptDOM的用法； 掌握J(rèn)avaScriptBOM的用法。目錄5.1文檔對象模型DOM5.2瀏覽器對象模型BOM5.3階段案例：Nim博弈小游戲5.1

文檔對象模型DOM5.1.1查找HTML元素5.1.2DOMHTML5.1.3DOMCSS5.1.4DOM事件5.1.5DOM節(jié)點(diǎn)5.1文檔對象模型DOM瀏覽器在加載網(wǎng)頁時(shí)會創(chuàng)建文檔對象模型（DocumentObjectModel，DOM）來確定網(wǎng)頁中的元素層次結(jié)構(gòu)，JavaScript可以通過DOM來動態(tài)改變HTML元素、屬性、CSS樣式以及對事件做出響應(yīng)。5.1.1查找HTML元素在JavaScript中有三種方式可以查找HTML元素：通過HTML元素的id名稱查找；通過HTML元素的標(biāo)簽名稱查找；通過HTML元素的類名稱查找。5.1.1查找HTML元素1.通過id查找HTML元素一般默認(rèn)不同的HTML元素使用不一樣的id名稱以示區(qū)別，因此通過id名稱找到指定的單個(gè)元素。在JavaScript中語法如下：document.getElementById("id名稱");其中g(shù)etElementById()方法是遵照駝峰命名法，即第一個(gè)單詞全小寫，后面的每一個(gè)單詞首字母大寫的方式。這種命名方法在JavaScript中比較普遍。如果未找到該元素，則返回值為null；如果找到該元素，則會以對象的形式返回。5.1.1查找HTML元素1.通過id查找HTML元素例如，查找id="test"的元素，并獲取該元素內(nèi)部的文本內(nèi)容：//根據(jù)id名稱獲取元素對象vartest=document.getElementById("test");//獲取元素內(nèi)容varresult=test.innerHTML;為簡便代碼閱讀效果，使用了與id名稱同名的變量test來獲取指定元素，該變量名稱也可以是其他自定義變量名，不影響運(yùn)行效果。innerHTML可以用于獲取元素內(nèi)部的HTML代碼，關(guān)于innerHTML更多用法請參考下一節(jié)5.1.2。5.1.1查找HTML元素2.通過標(biāo)簽名查找HTML元素HTML元素均有固定的標(biāo)簽名稱，因此通過標(biāo)簽名稱可以找到指定的單個(gè)或一系列元素。在JavaScript中語法如下：document.getElementsByTagName("標(biāo)簽名稱");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。5.1.1查找HTML元素2.通過標(biāo)簽名查找HTML元素例如，查找所有的段落元素<p>，并獲取第一個(gè)段落標(biāo)簽內(nèi)部的文本內(nèi)容：vartest=document.getElementByTagName("p");

varresult=p[0].innerHTML;因?yàn)橛卸鄠€(gè)段落標(biāo)簽，因此變量返回值是數(shù)組的形式。其中第一個(gè)段落標(biāo)簽對應(yīng)的是p[0]，以此類推，最后一個(gè)元素對應(yīng)的索引號為數(shù)組長度減1。5.1.1查找HTML元素3.通過類名查找HTML元素document.getElementsByClassName()方法可用于根據(jù)類名稱獲取HTML元素。在JavaScript中語法如下：document.getElementsByClassName("類名稱");此時(shí)方法中的Elements是復(fù)數(shù)形式，因?yàn)橐紤]到有可能存在多個(gè)元素符合要求。同樣如果未找到符合的元素，則返回值為null；如果有多個(gè)符合條件的元素，則返回值是數(shù)組的形式。注：該方法在IE5、6、7、8版本中使用均無效，為考慮各個(gè)版本瀏覽器的兼容性，如果不能保證用戶使用IE5、6、7、8版本以外的瀏覽器則不建議使用此方法來獲取HTML元素。5.1.1查找HTML元素【例5-1】JavaScriptDOM查找元素的應(yīng)用5.1.2DOMHTML1.創(chuàng)建動態(tài)的HTML內(nèi)容2.改變HTML元素內(nèi)容3.改變HTML元素屬性5.1.2DOMHTML1.創(chuàng)建動態(tài)的HTML內(nèi)容在JavaScript中，使用document.write()方法可以往HTML頁面動態(tài)輸出內(nèi)容。例如：<body><script>document.write("Hello2016");</script></body>上述代碼片段表示將在空白頁面上動態(tài)輸出字符串"Hello2016"。需要注意的是，alert()方法中的換行符\n在這里是無效的，如果需要輸出換行直接使用HTML換行標(biāo)簽<br>即可。5.1.2DOMHTML1.創(chuàng)建動態(tài)的HTML內(nèi)容【例5-2】JavaScriptDOM動態(tài)生成HTML內(nèi)容

5.1.2DOMHTML2.改變HTML元素內(nèi)容innerHTML可以用于獲取元素內(nèi)容，也可以改變元素內(nèi)容。使用innerHTML屬性獲取或更改的元素內(nèi)容可以包括HTML標(biāo)簽本身。獲取元素內(nèi)容的語法結(jié)構(gòu)如下：更改元素內(nèi)容的語法結(jié)構(gòu)如下：var變量名=元素對象.innerHTML;元素對象.innerHTML=新的內(nèi)容;這里的元素對象可以使用document對象的getElementById("id名稱")方法獲取。5.1.2DOMHTML2.改變HTML元素內(nèi)容【例5-3】JavaScriptDOM修改元素內(nèi)容5.1.2DOMHTML3.改變HTML元素屬性在JavaScript還可以根據(jù)屬性名稱動態(tài)地修改元素屬性。其語法結(jié)構(gòu)如下：例如，更改id="image"的圖片地址src屬性：元素對象.attribute=新的屬性值;varimg=document.getElementById("image");img.src="image/newpic.jpg";5.1.2DOMHTML3.改變HTML元素屬性也可以使用setAttribute()方法達(dá)到同樣的效果。其語法格式如下：例如，更改id="image"的圖片地址src屬性的代碼修改后如下：元素對象.setAttribute("屬性名稱","新的屬性值");varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");5.1.2DOMHTML3.改變HTML元素屬性【例5-4】JavaScriptDOM修改元素屬性5.1.3DOMCSSJavaScript還可以改變HTML元素的CSS樣式。其語法結(jié)構(gòu)如下：元素對象.style.屬性=新的值;這里的元素對象可以使用document對象的getElementById("id名稱")方法獲取。屬性指的是在CSS樣式中的屬性名稱，等號右邊填寫該屬性更改后的樣式值。5.1.3DOMCSS例如，更改id="test"的元素背景顏色為藍(lán)色：上述代碼也可以連成一句，寫法如下：vartest=document.getElementById("test");test.style.backgroundColor="blue";需要注意的是，這里元素CSS屬性名稱需要修改成符合camel標(biāo)記法的規(guī)則的寫法，即首個(gè)單詞全小寫，后面的每個(gè)單詞均首字母大寫。而屬性值在定義時(shí)需要加上雙引號。vartest=document.getElementById("test").style.backgroundColor="blue";5.1.3DOMCSS【例5-5】JavaScriptDOM修改元素CSS樣式5.1.4DOM事件JavaScript還可以在HTML頁面狀態(tài)發(fā)生變化時(shí)執(zhí)行代碼，這種狀態(tài)的變化稱為DOM事件（Event）。5.1.4DOM事件例如用戶點(diǎn)擊元素會觸發(fā)點(diǎn)擊事件，使用事件屬性onclick就可以捕獲這一事件。為元素的onclick屬性添加需要的JavaScript代碼，即可做到用戶點(diǎn)擊元素時(shí)觸發(fā)動作。<buttononclick="alert('hi')">點(diǎn)我會彈出對話框</button>常見事件如表5-1所示。5.1.4DOM事件JavaScript代碼可以直接在onclick屬性的雙引號中添加，也可以寫到JavaScript函數(shù)中，在onclick屬性的雙引號中調(diào)用函數(shù)名稱。例如上述代碼可以改寫為：<buttononclick="test()">點(diǎn)我會彈出對話框</button><script>functiontest(){alert("hi");}</script>以上兩種方法效果完全相同，可根據(jù)代碼量決定采用其中哪種方式，假如點(diǎn)擊事件觸發(fā)后需要執(zhí)行的代碼較多，建議使用函數(shù)調(diào)用的方式。5.1.4DOM事件【例5-6】DOM事件的簡單應(yīng)用

5.1.5DOM節(jié)點(diǎn)使用JavaScript也可以為HTML頁面動態(tài)地添加和刪除HTML元素。5.1.5DOM節(jié)點(diǎn)1.添加HTML元素添加HTML元素有兩個(gè)步驟，先要創(chuàng)建需要添加的HTML元素，然后將其追加在一個(gè)已存在的元素中去。使用document對象的createElement()方法可以創(chuàng)建新的元素，其語法結(jié)構(gòu)如下：例如，創(chuàng)建一個(gè)新的段落標(biāo)簽<p>：document.createElement("元素標(biāo)簽名");document.createElement("p");5.1.5DOM節(jié)點(diǎn)1.添加HTML元素使用appendChild()方法可以將創(chuàng)建好的元素追加到已存在的元素中，其語法結(jié)構(gòu)如下：例如，將上一個(gè)示例中創(chuàng)建的段落標(biāo)簽<p>追加到id="test"的<div>標(biāo)簽中去：已存在的元素對象.appendChild(需要添加的新元素對象);varp=document.createElement("p");vartest=document.getElementById("test");test.appendChild(p);5.1.5DOM節(jié)點(diǎn)1.添加HTML元素【例5-7】JavaScriptDOM添加HTML元素5.1.5DOM節(jié)點(diǎn)2.刪除HTML元素刪除已存在的HTML元素也需要兩個(gè)步驟：首先使用document對象的getElementById("id名稱")方法獲取該元素，然后使用removeChild()方法將其從父元素中刪除。其父元素如果有明確的id名稱，同樣可以使用getElementById()方法獲取。例如，在知道父元素id名稱的情況下刪除其中id="p01"的子元素：vartest=document.getElementById("test");//獲取父元素varp=document.getElementById("p01");//獲取子元素test.removeChild(p);//刪除子元素5.1.5DOM節(jié)點(diǎn)2.刪除HTML元素若父元素?zé)o對應(yīng)的id名稱獲取，可以使用子元素的parentNode屬性獲取其父元素對象，效果相同。例如，在不知道父元素id名稱的情況下刪除其中id="p01"的子元素：varp=document.getElementById("p01");//獲取子元素vartest=p.parentNode;//獲取父元素test.removeChild(p);//刪除子元素5.1.5DOM節(jié)點(diǎn)2.刪除HTML元素【例5-8】JavaScriptDOM刪除HTML元素5.2

瀏覽器對象模型BOM瀏覽器對象模型（BrowserObjectModel，BOM）使JavaScript可以與瀏覽器進(jìn)行交互。5.2

瀏覽器對象模型BOMBOM中的常用對象如下：window：瀏覽器窗口對象，其成員包括所有的全局變量、函數(shù)和對象。screen：屏幕對象，通常用于獲取用戶可用屏幕的寬和高。location：位置對象，用于獲得當(dāng)前頁面的URL地址，還可以把瀏覽器重定向到新的指定頁面。history：歷史記錄對象，其中包含了瀏覽器的瀏覽歷史記錄。navigator：瀏覽器對象，通常用于獲取用戶瀏覽器的相關(guān)信息。5.2.1Window對象在JavaScript中window對象表示瀏覽器窗口，目前所有瀏覽器都支持該對象。JavaScript中一切全局變量、函數(shù)和對象都自動成為window對象的內(nèi)容。例如，用于判斷變量是否為數(shù)字的全局方法isNaN()就是window對象的方法，完整寫法為window.isNaN()。通常情況下window前綴可以省略不寫。5.2.1Window對象【例5-9】JavaScriptBOMWindow對象的應(yīng)用5.2.2Screen對象

在JavaScript中window.screen對象可用于獲取屏幕的可用寬度和高度。該對象在使用時(shí)通?？梢允÷詗indow前綴，簡寫為screen。5.2.2Screen對象screen對象的常用屬性如下：availWidth：表示屏幕的可用寬度，默認(rèn)單位為像素（px）。availHeight：表示屏幕的可用高度，默認(rèn)單位為像素（px）。其中avail前綴來源于英文單詞available（可用的）?？捎脤挾然蚋叨戎傅氖侨コ缑嫔献詭У膬?nèi)容（例如任務(wù)欄）后的實(shí)際可使用的寬高。5.2.2Screen對象【例5-10】JavaScriptBOMScreen對象的應(yīng)用5.2.3Location對象在JavaScript中window.location對象可用于獲取當(dāng)前頁面的URL或者將瀏覽器重定向到新的頁面。該對象在使用時(shí)通?？梢允÷詗indows前綴，簡寫為location。location的href屬性可以用于重定向到其他URL地址。例如：location.href("a.html");5.2.3Location對象【例5-11】JavaScriptBOMLocation對象的應(yīng)用

5.2.4History對象在JavaScript中window.history對象包含了用戶通過瀏覽器窗口訪問過的URL歷史記錄。該對象在使用時(shí)通?？梢允÷詗indows前綴，簡寫為history。5.2.4History對象通常使用history對象實(shí)現(xiàn)瀏覽器上返回和前進(jìn)按鈕的相同功能。相關(guān)方法解釋如下：back()：返回上一個(gè)頁面，相當(dāng)于點(diǎn)擊了瀏覽器上的后退按鈕。forward()：前進(jìn)到下一個(gè)頁面，相當(dāng)于點(diǎn)擊了瀏覽器上的前進(jìn)按鈕。5.2.4History對象【例5-12】JavaScriptBOMHistory對象的應(yīng)用

5.2.5Navigator對象在JavaScript中window.navigator對象可用于獲取用戶瀏覽器的一系列信息，例如瀏覽器的名稱、版本號等。該對象在使用時(shí)通?？梢允÷詗indow前綴，簡寫為navigator。5.2.5Navigator對象navigator對象的常用屬性如表所示。注：由于數(shù)據(jù)有可能被瀏覽器的使用者更改，因此來自navigator的信息僅作為參考，不能作為權(quán)威的依據(jù)。而且不同瀏覽器中navigator對象包含的屬性也稍有差異。屬性名稱解釋appCodeName瀏覽器代碼名，通常會顯示為Mozilla。appName瀏覽器名稱，通常顯示為Netscape。appVersion瀏覽器版本。cookieEnabled瀏覽器是否允許使用cookies。如果允許使用cookies返回true，否則返回false。javaEnabled當(dāng)前瀏覽器中是否啟用了Java。language瀏覽器使用的首選語言。mimeTypes在瀏覽器中注冊的mime類型，返回值為數(shù)組。onLine瀏覽器是否處于聯(lián)網(wǎng)狀態(tài)。如果處于聯(lián)網(wǎng)狀態(tài)返回true，否則返回false。plugins瀏覽器中安裝插件的信息，返回值為數(shù)組。platform瀏覽器所在的操作系統(tǒng)。product產(chǎn)品名稱，通常顯示為Gecko。userAgent用戶代理信息。vendor瀏覽器的品牌供應(yīng)商。5.2.5Navigator對象【例5-13】JavaScriptBOMNavigator對象的應(yīng)用5.3

階段案例：Nim博弈小游戲5.3.1案例需求5.3.2案例分析 5.3.3案例制作 5.3.4案例思考 5.3.1案例需求制作一款Nim博弈小游戲，由真人玩家和電腦AI雙人對戰(zhàn)。一共有25個(gè)石子，玩家和AI輪流拿取，每次必須拿至少1個(gè)、最多3個(gè)，誰拿到最后一顆就算誰輸。5.3.2案例分析1. 生成隨機(jī)數(shù)這里可以直接使用第4章階段案例中的方法來生成一個(gè)a-b的隨機(jī)整數(shù)（包含a和b本身），參考js代碼如下：//隨機(jī)生成a-b之間的數(shù)字，包含a和b本身functiongetRandomNum(a,b){returnMath.floor(Math.random()*(b-a+1))+a;}本案例需要隨機(jī)產(chǎn)生1至3之間的整數(shù)，因此就使用getRandomNum(1,3)即可。5.3.2案例分析1. 生成隨機(jī)數(shù)cont.但是還需要考慮一種特殊情況，有可能剩余石子數(shù)不足3個(gè)，那么這時(shí)就不能直接隨機(jī)1至3之間的整數(shù)了，而是應(yīng)該隨機(jī)生成1至剩余石子總數(shù)之間的整數(shù)，參考js代碼如下：varmaxNum=3;//最大數(shù)值varminNum=1;//最小數(shù)值varstoneNum=2;//當(dāng)前石子總數(shù)

//AI隨機(jī)產(chǎn)生一個(gè)要拿走的石子數(shù)varbotNum=getRandomNum(minNum,maxNum>stoneNum?stoneNum:maxNum);5.3.2案例分析1. 生成隨機(jī)數(shù)cont.上述代碼中的三目運(yùn)算maxNum>stoneNum?stoneNum:maxNum表示先判斷最大數(shù)值maxNum和石子總數(shù)stoneNum的大小，誰小就用誰作為隨機(jī)數(shù)的上限。實(shí)際最后隨機(jī)拿走的石子數(shù)是getRandomNum(minNum,maxNum)或getRandomNum(minNum,stoneNum)，根據(jù)比大小判斷的結(jié)果而定。5.3.2案例分析2. 判斷數(shù)字有效性可直接參考“第4章階段案例：猜數(shù)字小游戲”中的“案例分析-2判斷數(shù)字有效性”，同樣是判斷是否是數(shù)字、整數(shù)以及是否在有效范圍內(nèi)，這里不再贅述。5.3.2案例分析3. 循環(huán)游戲回合這里不妨試試使用while(true)來制作一個(gè)永久循環(huán)，直到判斷出勝負(fù)再使用break強(qiáng)勢停止循環(huán)，參考js代碼如下：1. varmyTurn=true;//標(biāo)記當(dāng)前是否輪到真人玩家2. while(true){3. //真人玩家的回合4. if(myTurn){…玩家游戲過程待補(bǔ)充…}5. //AI的回合6. else{…AI游戲過程待補(bǔ)充…}7. 8. //判斷游戲是否結(jié)束（如果剩余石子數(shù)為0則游戲結(jié)束）9. if(stoneNum==0){10. //判斷誰贏了（…判斷過程待補(bǔ)充…）11. break;//停止循環(huán)12. }13. else{14. myTurn=!myTurn;//切換當(dāng)前玩家15. }16. }5.3.3案例制作創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如NimGame.html。1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>Nim博弈小游戲</title>6. </head>7. <body>8. <!--標(biāo)題-->9. <h3>Nim博弈小游戲（人機(jī)對戰(zhàn)）</h3>10. <!--水平線-->11. <hr>12. <p>游戲規(guī)則：<br>13. 1.玩家和AI輪流拿石子，每次最少拿1個(gè)，最多拿3個(gè)。<br>14. 2.玩家先手拿，誰拿到最后1個(gè)就是誰輸了（末者敗）。</p>15. <buttononclick="startGame()">開始游戲</button>16. <script>17. //隨機(jī)生成a-b之間的數(shù)字，包含a和b本身18. functiongetRandomNum(a,b){19. returnMath.floor(Math.random()*(b-a+1))+a;20. }5.3.3案例制作21. 22. //開始游戲23. functionstartGame(){24. //==============================25. //游戲初始化26. //==============================27. varmyTurn=true;//標(biāo)記當(dāng)前是否輪到真人玩家28. varmaxNum=3;//最大數(shù)值29. varminNum=1;//最小數(shù)值30. varstoneNum=25;//當(dāng)前石子總數(shù)31. 32. //==============================33. //游戲開始//==============================35. while(true){36. //真人玩家的回合37. if(myTurn){38. //獲取輸入的玩家要拿去的石子數(shù)39. varmyNum=prompt("當(dāng)前剩余石子總數(shù)為"+stoneNum+"，請輸入您要拿去的石子數(shù)（1-3）","");5.3.3案例制作40. //有效性判斷41. if(isNaN(myNum)){42. alert("您輸入的不是數(shù)字，請重新輸入！");43. continue;44. }45. elseif(myNum%1!==0){46. alert("您輸入的不是整數(shù)，請重新輸入！");47. continue;48. }49. elseif(myNum<minNum||myNum>maxNum||myNum>stoneNum){50. alert("您輸入的數(shù)字不在有效范圍，請重

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論