《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第22課 JavaScript基礎(chǔ)（五）

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第22課JavaScript基礎(chǔ)（五）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）理解正則表達(dá)式，掌握常見的正則表達(dá)式和相關(guān)方法（2）掌握DOM的常用方法素質(zhì)目標(biāo)：掌握J(rèn)avaScript的相關(guān)知識(shí)，增加學(xué)生的知識(shí)儲(chǔ)備教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：正則表達(dá)式、文檔對(duì)象模型DOM教學(xué)難點(diǎn)：文檔對(duì)象模型DOM教學(xué)方法問答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（33min）→頭腦風(fēng)暴（5min）第2節(jié)課：→傳授新知（30min）→上機(jī)操作（7min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請(qǐng)大家了解正則表達(dá)式與文檔對(duì)象模型DOM的相關(guān)內(nèi)容?！緦W(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題什么是正則表達(dá)式？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識(shí)通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（33min）4.11正則表達(dá)式【教師】講解正則表達(dá)式的組成與相關(guān)方法正則表達(dá)式又稱規(guī)則表達(dá)式，它描述了字符串匹配的模式，可以用來檢查字符串是否含有某種子串、將匹配的子串替換或從某個(gè)字符串中取出符合某條件的子串等。4.11.1正則表達(dá)式的組成【課堂互動(dòng)】?【教師】提問正則表達(dá)式由哪些內(nèi)容組成？?【學(xué)生】聆聽、思考、回答正則表達(dá)式是由普通字符（如字符a～z）和特殊字符（稱為元字符）組成的文本模式，其語法格式如下：/匹配對(duì)象的文本模式（正則表達(dá)式）/正則表達(dá)式中主要包含匹配符、限定符、定位符、轉(zhuǎn)義符等。1.匹配符匹配符用于匹配某個(gè)或某些字符。在正則表達(dá)式中，使用一對(duì)方括號(hào)括起來的內(nèi)容，稱為“字符簇”，表示一個(gè)范圍。實(shí)際匹配時(shí)，匹配這個(gè)范圍內(nèi)的某個(gè)字符。[a-z]：匹配小寫字母a～z中的任意一個(gè)字符。[A-Z]：匹配大寫字母A～Z中的任意一個(gè)字符。[0-9]：匹配數(shù)字0～9中的任意一個(gè)字符，相當(dāng)于\d（匹配一個(gè)數(shù)字字符）。……（詳見教材）【提示】在字符簇中，存在一個(gè)特殊符號(hào)^，稱為脫字符，表示取反的意思?！臼纠?-11-1】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varstr="133s3123456";varreg=/[^0-9]/;document.write(str.search(reg));效果：頁面中彈出第一個(gè)非數(shù)字字符的索引位置“3”?！咎崾尽砍绦蛑?，“str.search(reg)”表示在字符串str中找一個(gè)非數(shù)字字符，若找到，則返回該字符在字符串中的索引；若沒有找到，則返回?1。2.限定符限定符用于指定正則表達(dá)式的一個(gè)匹配字符串必須要匹配多少次。*：匹配零次或者多次，可以使用{0,}代替。+：匹配1次或者多次，可以使用{1,}代替。?：匹配0次或者1次，可以使用{0,1}代替。{n}：匹配n次。{n,}：至少匹配n次。{n,m}：至少匹配n次且最多匹配m次?！臼纠?-11-2】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：vartel="電話號(hào)碼;varreg=/[\d]{11}/document.write(tel.search(reg));【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示【學(xué)生】聆聽、上機(jī)操作、演示效果：頁面中彈出11個(gè)連續(xù)數(shù)字字符的起始索引位置“5”。【提示】在匹配字符串時(shí)，一個(gè)中文字符和一個(gè)英文字符均算一個(gè)字符。正則表達(dá)式“/[\d]{11}/”表示匹配11個(gè)連續(xù)的0～9中的數(shù)字?！皌el.search(reg)”表示返回字符tel中11個(gè)連續(xù)數(shù)字字符的起始索引位置，索引位置從0算起。若程序確定tel中存在連續(xù)11個(gè)數(shù)字字符，則返回?cái)?shù)字的起始索引；否則返回?1。3.定位符【課堂互動(dòng)】?【教師】提問定位符可用于正則表達(dá)式中的哪些位置？?【學(xué)生】聆聽、思考、回答定位符用于將一個(gè)正則表達(dá)式定位在字符串的開始或結(jié)束位置進(jìn)行匹配，也用于在單詞內(nèi)或在單詞的開始或結(jié)尾處進(jìn)行匹配。^：定位在字符串的開始位置進(jìn)行匹配。$：定位在字符串的結(jié)束位置進(jìn)行匹配。\b：匹配一個(gè)單詞的分界線（如字符串開頭、結(jié)尾、空格、逗號(hào)、點(diǎn)號(hào)等）。\B：匹配一個(gè)單詞的非分界線?！臼纠?-11-3】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varstr="2021-4-10";varreg=/^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/;document.write(reg.test(str));效果：頁面中彈出“true”?！咎崾尽砍绦蛑?，正則表達(dá)式“/^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/”表示在字符串開頭匹配4個(gè)連續(xù)的0～9中的數(shù)字，后接一個(gè)符號(hào)“-”，再接1個(gè)或2個(gè)數(shù)字，再接一個(gè)符號(hào)“-”，再接1個(gè)或2個(gè)數(shù)字。其實(shí)，該正則表達(dá)式用于判斷一個(gè)字符串表示的是否是日期格式?！ㄔ斠娊滩模?.轉(zhuǎn)義符正則表達(dá)式中有許多特殊字符，如*、+、?、/、\、^、$等，若想要匹配這些特殊字符，則必須使用轉(zhuǎn)義符“\”進(jìn)行轉(zhuǎn)義，即將轉(zhuǎn)義符“\”放在特殊字符前面。這樣就可以取消特殊字符的功能，從而對(duì)這些特殊字符進(jìn)行匹配。【示例4-11-4】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：varstr="^脫字符功能介紹";varreg=/[\^]/;document.write(reg.test(str));效果：頁面中彈出“true”?！咎崾尽俊?[\^]/”表示匹配字符串中的一個(gè)脫字符。4.11.2正則表達(dá)式相關(guān)方法在JavaScript中，正則表達(dá)式對(duì)象有兩種方法，即字符串方法和正則對(duì)象方法。1.字符串方法search()：檢索與正則表達(dá)式相匹配字符串的索引。match()：找到一個(gè)或者多個(gè)正則表達(dá)式的匹配結(jié)果。replace()：替換與正則表達(dá)式匹配的字符串。2.正則對(duì)象方法test()：檢測(cè)一個(gè)字符串是否匹配某個(gè)正則表達(dá)式。如果字符串中含有匹配的文本，則返回true；否則返回false。exec()：檢索字符串中的正則表達(dá)式匹配，返回一個(gè)數(shù)組，存放匹配的結(jié)果。如果字符串中含有檢索的文本，則返回檢索結(jié)果；否則結(jié)果為null?！緦W(xué)生】聆聽、記錄、理解4.12文檔對(duì)象模型DOM【教師】講解DOM獲取元素、獲取和修改HTML內(nèi)容、查看和修改DOM元素CSS屬性的具體方法文檔對(duì)象模型（documentobjectmodel，DOM）是由W3C（萬維網(wǎng)聯(lián)盟）組織定義的一個(gè)標(biāo)準(zhǔn)。【課堂互動(dòng)】?【教師】提問DOM有什么作用？?【學(xué)生】聆聽、思考、回答創(chuàng)建一個(gè)網(wǎng)頁并將該網(wǎng)頁添加到網(wǎng)站中時(shí)，DOM就會(huì)根據(jù)這個(gè)網(wǎng)頁創(chuàng)建一個(gè)文檔，該文檔是元素與內(nèi)容的數(shù)據(jù)集合。此外，DOM會(huì)將文檔解析為樹狀結(jié)構(gòu)，并以樹節(jié)點(diǎn)的方式表示文檔中的各種內(nèi)容。例如，現(xiàn)有一個(gè)HTML文檔，內(nèi)容如下：<html> <head> <title>標(biāo)題內(nèi)容</title> </head> <body> <h2>二號(hào)標(biāo)題</h2> <p>段落內(nèi)容</p> </body></html>【教師】ppt展示圖片“文檔的DOM樹”（詳見教材），并講解通過DOM，JavaScript能夠獲取、修改、添加、刪除HTML文檔的元素、屬性、CSS樣式，還能夠創(chuàng)建新的HTML事件并對(duì)頁面中所有已有的HTML事件作出反應(yīng)，從而創(chuàng)建動(dòng)態(tài)網(wǎng)頁，實(shí)現(xiàn)互動(dòng)操作。4.12.1獲取對(duì)象【課堂互動(dòng)】?【教師】提問在JavaScript中，可以如何引用獲取元素？?【學(xué)生】聆聽、思考、回答在JavaScript中，引用獲取元素方法的語法格式如下：document.方法名稱(元素名稱)在JavaScript中，可以通過不同方法獲取指定元素，詳細(xì)介紹如下。getElementById()，根據(jù)元素id獲取元素，其語法格式如下：document.getElementById("id名稱")getElementsByTagName()，根據(jù)標(biāo)簽名獲取元素組，其語法格式如下：document.getElementsByTagName("標(biāo)簽名稱")。getElementsByClassName()，根據(jù)類名獲取元素組，其語法格式如下：document.getElementsByClassName("類名稱")。querySelectorAll()，根據(jù)CSS選擇器名獲取元素組，其語法格式如下：document.querySelectorAll("選擇器名稱")。根據(jù)表單名獲取表單，其語法格式如下：document.表單名稱根據(jù)表單控件名獲取控件，其語法格式如下：表單對(duì)象.控件名稱【提示】獲取元素的方法只能在網(wǎng)頁加載到窗口之后使用，即只能在window.onload事件中使用。4.12.2獲取和修改HTML內(nèi)容【課堂互動(dòng)】?【教師】提問通過innerHTML屬性，如何獲取HTML元素內(nèi)容？?【學(xué)生】聆聽、思考、回答通過innerHTML屬性獲取HTML元素內(nèi)容的語法格式如下：元素名稱.innerHTML通過innerHTML屬性修改HTML元素內(nèi)容的語法格式如下：元素名稱.innerHTML=字符串;【示例4-12-1】在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：<divid="a-box">id元素</div><ahref="">百度一下</a><ahref="">新浪</a><ahref="">微博</a>……（詳見教材）在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{ var

box

=

document.getElementById("a-box");//“box”是根據(jù)id值“a-box”獲取的元素，它的內(nèi)容是“id元素” var

a

=

document.getElementsByTagName("a");//“a”是根據(jù)標(biāo)簽名“a”獲取的數(shù)組，共有三個(gè)元素，內(nèi)容依次是“百度一下”“新浪”“微博” var

title

=

document.getElementsByClassName("title");//“title”是根據(jù)類名“title”獲取的數(shù)組，共有兩個(gè)元素，內(nèi)容依次是“標(biāo)題1”和“標(biāo)題2”……（詳見教材）【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示結(jié)果：?jiǎn)螕鬎12，打開開發(fā)人員工具視圖，選擇“Console”（控制臺(tái)）選項(xiàng)卡，便可以看到控制臺(tái)中逐行輸出的內(nèi)容：“id元素”“微博”“標(biāo)題2”“標(biāo)題二”?！咎崾尽克蝎@取元素的語句都要書寫在window加載事件中，這是因?yàn)橹挥许撁婕虞d到窗口，才能夠獲取相關(guān)元素。4.12.查看和修改DOM元素CSS屬性在JavaScript中，常通過屬性名稱查看和修改DOM元素的CSS屬性。查看DOM元素CSS屬性的語法格式如下：DOM元素.style.屬性名稱修改DOM元素CSS屬性的語法格式如下：DOM元素.style.屬性名稱=新的屬性值【示例4-12-2】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<divclass="title"style="color:#000;">標(biāo)題1</div><divclass="title">標(biāo)題2</div>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{ var

title

=

document.getElementsByClassName("title"); console.log(title[0].style.color); title[1].style.color

=

"red";}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示結(jié)果：?jiǎn)螕鬎12，打開開發(fā)人員工具視圖，選擇“Console”（控制臺(tái)）選項(xiàng)卡，便可以看到控制臺(tái)中輸出“標(biāo)題1”的顏色：“rgb(0,0,0)”。頁面中“標(biāo)題2”的顏色變?yōu)榧t色?！緦W(xué)生】聆聽、記錄、理解通過教師講解、課堂互動(dòng)、演示操作等方式，使學(xué)生了解常見的正則表達(dá)式和相關(guān)方法，以及部分DOM常用的方法頭腦風(fēng)暴（5min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何使用本節(jié)課中介紹的search()檢索與正則表達(dá)式相匹配字符串的索引，并在網(wǎng)頁中查看和修改DOM元素CSS屬性?！緦W(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問題導(dǎo)入（3min）【教師】提出以下問題思考如何查看和修改DOM元素的屬性？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（30min）4.12文檔對(duì)象模型DOM【教師】講解查看和修改DOM元素的屬性，創(chuàng)建、添加、刪除、替換DOM元素，DOM事件的相關(guān)內(nèi)容4.12.4查看和修改DOM元素的屬性在JavaScript中，常使用方法getAttribute()和setAttribute()查看和修改DOM元素的屬性。查看DOM元素屬性的語法格式如下：DOM元素.getAttribute("屬性名稱")修改DOM元素屬性的語法格式如下：DOM元素.setAttribute("屬性名稱","屬性值",)【示例4-12-3】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<formaction=""name="form1"> <inputtype="text"value="請(qǐng)輸入用戶名"name="userName"> <inputtype="text"value="請(qǐng)輸入密碼"name="userPass"> <inputtype="button"value="登錄"></form>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{ var

form1

=

document.form1;//通過表單的特殊獲取方式“document.表單名稱”獲取表單form1 var

userName

=

form1.userName;//通過表單控件的獲取方式“表單變量.控件名稱”獲取文本域userName……（詳見教材）【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】講解代碼效果效果：?jiǎn)螕鬎12，打開開發(fā)人員工具視圖，選擇“Console”（控制臺(tái)）選項(xiàng)卡，便可以看到控制臺(tái)中輸出userName的value值“請(qǐng)輸入用戶名”。頁面中userPass的文本類型變?yōu)槊艽a類型。4.12.5創(chuàng)建、添加、刪除、替換DOM元素在JavaScript中，存在一些方法可以創(chuàng)建、添加、刪除、替換DOM元素。創(chuàng)建DOM元素的語法格式如下：document.createElement("標(biāo)簽名稱")添加DOM子元素的語法格式如下：父元素對(duì)象名稱.appendChild(要添加的子元素對(duì)象名稱)刪除DOM子元素的語法格式如下：父元素對(duì)象名稱.removeChild(要?jiǎng)h除的子元素對(duì)象名稱)替換DOM子元素的語法格式如下：父元素對(duì)象名稱.replaceChild(要替換的新元素對(duì)象名稱,被替換的舊元素對(duì)象名稱)【示例4-12-4】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<divid="box"> <divclass="title">標(biāo)題1</div> <divclass="title">標(biāo)題2</div></div>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{var

box

=

document.getElementById("box");//box是獲取的外層盒子 var

title3

=

document.createElement("div");//創(chuàng)建的div標(biāo)簽，內(nèi)容為“標(biāo)題3” title3.innerHTML

=

"標(biāo)題3"; var

title4

=

document.createElement("div");//創(chuàng)建的div標(biāo)簽，內(nèi)容為“標(biāo)題4” title4.innerHTML

=

"標(biāo)題4";……（詳見教材）【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示結(jié)果：頁面中逐行顯示“標(biāo)題4”和“標(biāo)題3”?！咎崾尽吭陧撁婕虞d事件中，如果事件體為空，則頁面中只顯示“標(biāo)題1”和“標(biāo)題2”。4.12.6DOM事件【課堂互動(dòng)】?【教師】提問JavaScript允許對(duì)DOM事件做出反應(yīng)，這樣做可以起到什么作用？?【學(xué)生】聆聽、思考、回答JavaScript允許對(duì)DOM事件做出反應(yīng)，從而大大增強(qiáng)網(wǎng)頁的互動(dòng)功能。DOM事件需要觸發(fā)之后才能發(fā)生，事件發(fā)生之后會(huì)產(chǎn)生事件流，事件流的順序有事件冒泡與捕獲。1.觸發(fā)DOM事件觸發(fā)DOM事件的形式有兩種。（1）在元素頭標(biāo)簽內(nèi)觸發(fā)DOM事件，其語法格式如下：事件名稱="調(diào)用函數(shù)名及實(shí)參"【提示】被調(diào)用函數(shù)的定義在<script>標(biāo)簽內(nèi)或被引用的函數(shù)庫里。（2）直接在JavaScript文件的頁面加載事件中定義觸發(fā)DOM事件，其語法格式如下：DOM元素變量.事件名稱=function(){事件觸發(fā)時(shí)的響應(yīng)}常見的DOM事件有框架/對(duì)象事件、鼠標(biāo)事件、表單事件等。框架/對(duì)象事件有頁面加載事件onload、離開頁面onunload?！咎崾尽縃TML頁面中元素都是在頁面加載后才能夠捕獲到的，onload用于觸發(fā)頁面加載事件，因此，對(duì)DOM的操作基本都放在onload事件中。鼠標(biāo)事件有單擊事件onclick、移動(dòng)事件onmouseover、移開事件onmouseout?！臼纠?-12-5】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<h1id="h1"onclick="changText(h1)">單擊此文本！??！</h1><script> functionchangText(id){ id.innerHTML="修改后的文本！??！"; }</script>效果：頁面中顯示“單擊此文本?。?！”，鼠標(biāo)單擊該內(nèi)容，變?yōu)椤靶薷暮蟮奈谋荆。?！”?！臼纠?-12-6】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<div>原始狀態(tài)</div>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload=function(){ var

div=document.getElementsByTagName("div")[0]; div.onmouseover=function(){ div.innerHTML="鼠標(biāo)移至"; } div.onmouseout=function(){ div.innerHTML="鼠標(biāo)移出"; }}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】講解代碼效果效果：頁面剛加載后，頁面中顯示內(nèi)容“原始狀態(tài)”；當(dāng)鼠標(biāo)移至該內(nèi)容上，內(nèi)容變?yōu)椤笆髽?biāo)移至”；當(dāng)鼠標(biāo)移出該內(nèi)容的位置，頁面內(nèi)容變?yōu)椤笆髽?biāo)移出”。表單事件有改變事件onchange、獲取焦點(diǎn)事件onfocus、輸入事件oninput?！咎崾尽縪nchange一般用于改變文本框輸入的內(nèi)容。oninput常常配合正則驗(yàn)證使用?！臼纠?-12-7】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：輸入文本：<inputtype="text"onchange="toUpper()"id="change"><script> function

toUpper()

{ var

change

=

document.getElementById("change"); change.value

=

change.value.toUpperCase(); }</script>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示結(jié)果：輸入英文字母，并單擊文本域之外的區(qū)域或回車鍵時(shí)，文本框中的所有小寫字母轉(zhuǎn)換為大寫字母?！臼纠?-12-8】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<formaction=""name="form1"> <inputtype="text"value="請(qǐng)輸入用戶名"name="userName"> <inputtype="text"value="請(qǐng)輸入密碼"name="userPass"> <inputtype="submit"value="登錄"></form>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{ userName

=

form1.userName; userPass

=

form1.userPass; userName.onfocus

=

function()

{ userName.value

=

""; } userPass.onfocus

=

function()

{ userPass.value

=

""; userPass.type

=

"password"; }}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】講解代碼效果效果：頁面加載后，第一個(gè)文本域顯示明文“請(qǐng)輸入用戶名”，獲取焦點(diǎn)時(shí)文本域置空；第二個(gè)文本域顯示明文“請(qǐng)輸入密碼”，獲取焦點(diǎn)時(shí)文本域也置空，且輸入的字符顯示為暗碼?！臼纠?-12-9】在【示例4-12-8】的基礎(chǔ)上，編輯HTML文檔<body>標(biāo)簽的內(nèi)容，添加如下代碼作為用戶名正則表達(dá)式錯(cuò)誤提示：<divid="ts"style="display:none;">用戶名必須是6-16位的數(shù)字、字母、下劃線，且第一位不能是數(shù)字</div>在<script>標(biāo)簽onload事件中添加對(duì)userName輸入規(guī)則測(cè)試的相關(guān)語句：var

regName

=

/^\D\w{5,15}$/;var

ts

=

document.getElementById("ts");

userName.oninput

=

function()

{ if

(!regName.test(userName.value))

{ ts.style.display

=

"block"; }

else

{ ts.style.display

=

"none"; }}效果：若輸入的用戶名不符合“6-16位的數(shù)字、字母、下劃線，且第一位不是數(shù)字”規(guī)則，則在文本框上方顯示錯(cuò)誤提示“用戶名必須是6-16位的數(shù)字、字母、下劃線，且第一位不能是數(shù)字”；如果符合，則錯(cuò)誤提示隱藏。2.事件冒泡與捕獲DOM結(jié)構(gòu)是一個(gè)樹形結(jié)構(gòu)，當(dāng)一個(gè)HTML元素產(chǎn)生一個(gè)事件時(shí)，該事件會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播，所經(jīng)過的節(jié)點(diǎn)都會(huì)收到該事件，這個(gè)傳播過程可以稱為DOM事件流。事件流的傳播順序有兩種，即事件冒泡和事件捕獲?！窘處煛縫pt展示圖片“事件冒泡和事件捕獲”（詳見教材），并講解事件冒泡是指事件從葉子節(jié)點(diǎn)沿祖先節(jié)點(diǎn)一直向上傳播至根節(jié)點(diǎn)。其中，子元素先觸發(fā)，父元素后觸發(fā)。事件捕獲的傳播順序與事件冒泡相反，它是指事件從DOM樹最頂層元素開始傳播，一直傳播至葉子元素。觸發(fā)事件的語法格式如下：addEventListener("click","doSomething",true)其中，第三個(gè)參數(shù)為true時(shí)，則采用事件捕獲；為false時(shí)，則采用事件冒泡?！臼纠?-12-10】在HTML文檔<body>標(biāo)簽內(nèi)輸入以下代碼：<divid="d1"style="background:#a7a7f1;width:400px;height:

200px;"> <divid="d2"style="background:#00ff00;width:300px;height:130px;"> <inputtype="button"id="btn1"value="冒泡測(cè)試"style="background:

rgb(207,195,195);font-size:26pt;padding:5px;"> </div></div>在HTML文檔<script>標(biāo)簽內(nèi)輸入以下代碼：window.onload

=

function()

{ d1

=

document.getElementById("d1"); d2

=

document.getElementById("d2"); btn1

=

document.getElementById("btn1"); d1.addEventListener("click",

function(event)

{alert("d1響應(yīng)")},true); d2.addEventListener("click",

function(event)

{alert("d2響應(yīng)")},true); btn1.addEventListener("click",

function(event)

{alert("按鈕響應(yīng)")},

true);}【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽、上機(jī)操作、演示【教師】ppt展示“頁面效果”“頁面警示框”圖片（詳見教材），并講解效果：頁面加載后，事件響應(yīng)順序?yàn)閐1、d2、btn1，頁面分別彈出帶有“d1響應(yīng)”“d2響應(yīng)”“按鈕響應(yīng)