JavaScript項目式實例教程（第2版）課件 項目3、4 統(tǒng)計成績單 循環(huán)結(jié)構(gòu)-注冊頁面設(shè)計 事件_第1頁
JavaScript項目式實例教程（第2版）課件 項目3、4 統(tǒng)計成績單 循環(huán)結(jié)構(gòu)-注冊頁面設(shè)計 事件_第2頁
JavaScript項目式實例教程（第2版）課件 項目3、4 統(tǒng)計成績單 循環(huán)結(jié)構(gòu)-注冊頁面設(shè)計 事件_第3頁
JavaScript項目式實例教程（第2版）課件 項目3、4 統(tǒng)計成績單 循環(huán)結(jié)構(gòu)-注冊頁面設(shè)計 事件_第4頁
JavaScript項目式實例教程（第2版）課件 項目3、4 統(tǒng)計成績單 循環(huán)結(jié)構(gòu)-注冊頁面設(shè)計 事件_第5頁
已閱讀5頁，還剩69頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目三統(tǒng)計成績單——循環(huán)結(jié)構(gòu)設(shè)計一個程序，要求能不斷彈出輸入成績對話框。在輸入成績時，檢測輸入數(shù)據(jù)的合法性，如果輸入的不是數(shù)字或輸入內(nèi)容為空，給出錯誤信息，繼續(xù)彈出成績對話框輸入成績，只到用戶輸入一個截止符號"!"為止。最后在頁面上打印所有輸入的有效成績，打印的格式為每行4個。統(tǒng)計所有成績的平均分、最高分、最低分并打印輸出。最后輸出一個鏈接“是否有不及格”。用戶點擊該鏈接，如果成績中有不及格的，則彈出對話框提示沒有不及格成績。若有不及格成績，則彈出對話框提示有不及格成績。項目情境初步了解數(shù)組的概念和使用方法。初步了解對象的概念。熟悉Math數(shù)學(xué)對象的應(yīng)用。熟悉循環(huán)結(jié)構(gòu)的使用方法。熟悉變量的作用域?qū)W習(xí)目標(biāo)分別計算并打印輸出1+2+3+...+100和1×2

×3×...×100的值。任務(wù)1累加和累乘1、循環(huán)結(jié)構(gòu)1.1、while語句while(<邏輯表達(dá)式>)<語句塊>1.2、do...while語句do<語句塊>while(<邏輯表達(dá)式>);2、死循環(huán)【相關(guān)知識】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varsum=0; //總和sumvarf=1; //總乘積fvari=1; //計數(shù)iwhile(i<=100) { sum=sum+i; f=f*i; i++; } document.write("1+2+3+...+100="+sum+"<br/>1×2×3×...×100="+f);</script>【任務(wù)實現(xiàn)】隨機的給出10個0到100之間（包含0和100）的整數(shù)，統(tǒng)計這10個數(shù)中的最大值和最小值。任務(wù)2最大和最小值1、數(shù)組1.1、數(shù)組的概念數(shù)組是一些數(shù)據(jù)元素（element）的集合，每個數(shù)據(jù)元素在數(shù)組中都有一個編號，通過編號可以引用這些數(shù)據(jù)元素。這些數(shù)據(jù)元素可以是不同的數(shù)據(jù)類型，例如數(shù)字型、字符串型、布爾型等，設(shè)置還可以是一個數(shù)組。每個數(shù)組都有一個名稱，其命名規(guī)則和變量的命名規(guī)則相同?！鞠嚓P(guān)知識】1.2、數(shù)組的定義1.2.1、使用構(gòu)造函數(shù)方式有三種，分別是：newArray()newArray(<數(shù)組元素的個數(shù)>)newArray(<數(shù)組元素1的值>[,數(shù)組元素2的值]...)1.2.2、直接定義方式有兩種，一種是用一對空的中括號定義一個空數(shù)組，然后再為數(shù)組元素賦值。另一種方式是在一對中括號中，放入數(shù)組元素值，并用逗號隔開?！鞠嚓P(guān)知識】2、for語句for(初始化變量;邏輯表達(dá)式;改變變量表達(dá)式)<語句塊>3、for...in語句for(變量in對象或者數(shù)組)<語句塊>4、循環(huán)的嵌套無論哪種循環(huán)結(jié)構(gòu)，都可以相互之間使用嵌套，這與判斷結(jié)構(gòu)的嵌套類似?！鞠嚓P(guān)知識】5、對象5.1、對象的概念對象有三要素：屬性、方法和事件。5.2、使用屬性和方法引用或修改對象的屬性：對象.對象的屬性對象[對象的屬性]//其中，“對象的屬性”要使用雙引號或單引號括起來調(diào)用對象的方法：對象.對象的方法名([參數(shù)列表])【相關(guān)知識】5.3、Math對象【相關(guān)知識】屬性描述E返回算術(shù)常量e，即自然對數(shù)的底數(shù)（約等于2.718）。LN2返回2的自然對數(shù)（約等于0.693）。LN10返回10的自然對數(shù)（約等于2.302）。LOG2E返回以2為底的e的對數(shù)（約等于1.414）。LOG10E返回以10為底的e的對數(shù)（約等于0.434）。PI返回圓周率（約等于3.14159）。SQRT1_2返回返回2的平方根的倒數(shù)（約等于0.707）。SQRT2返回2的平方根（約等于1.414）?！鞠嚓P(guān)知識】方法描述abs(x)返回數(shù)的絕對值。acos(x)返回數(shù)的反余弦值。asin(x)返回數(shù)的反正弦值。atan(x)以介于-PI/2與PI/2弧度之間的數(shù)值來返回x的反正切值。atan2(y,x)返回從x軸到點(x,y)的角度（介于-PI/2與PI/2弧度之間）。ceil(x)對數(shù)進行上舍入。cos(x)返回數(shù)的余弦。exp(x)返回e的指數(shù)。floor(x)對數(shù)進行下舍入。log(x)返回數(shù)的自然對數(shù)（底為e）。max(x,y)返回x和y中的最高值。min(x,y)返回x和y中的最低值。pow(x,y)返回x的y次冪。random()返回0～1之間的隨機數(shù)。round(x)把數(shù)四舍五入為最接近的整數(shù)。sin(x)返回數(shù)的正弦。sqrt(x)返回數(shù)的平方根。tan(x)返回角的正切。toSource()返回該對象的源代碼。valueOf()返回Math對象的原始值。在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">varele=[];for(vari=0;i<10;i++){ ele[i]=Math.round(Math.random()*100); document.write(ele[i]+"");}vare_max=ele[1];vare_min=ele[1];for(vari=0;i<10;i++){ if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}document.write("<br/>最大值："+e_max+"<br/>最小值："+e_min);</script>【任務(wù)實現(xiàn)】有一個字符串"Iamastudent",用循環(huán)語句查找第一個字母"t"在字符串中的位置。任務(wù)3循環(huán)的跳轉(zhuǎn)1、字符串對象1.1、創(chuàng)建字符串對象使用構(gòu)造函數(shù)String()創(chuàng)建字符串對象，方式是：newString(str)或者String(str)其中str參數(shù)是字符串變量或者具體的字符串的值?！鞠嚓P(guān)知識】1.2、屬性和方法【相關(guān)知識】屬性描述constructor對創(chuàng)建該對象的函數(shù)的引用length字符串的長度prototype允許您向?qū)ο筇砑訉傩院头椒ā鞠嚓P(guān)知識】方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的Unicode編碼。concat()連接字符串。indexOf()檢索字符串。lastIndexOf()從后向前搜索字符串。localeCompare()用本地特定的順序來比較兩個字符串。match()找到一個或多個正則表達(dá)式的匹配。replace()替換與正則表達(dá)式匹配的子串。search()檢索與正則表達(dá)式相匹配的值。slice()提取字符串的片斷，并在新的字符串中返回被提取的部分。split()把字符串分割為字符串?dāng)?shù)組。strike()使用刪除線來顯示字符串。substr()從起始索引號提取字符串中指定數(shù)目的字符。substring()提取字符串中兩個指定的索引號之間的字符。toLocaleLowerCase()把字符串轉(zhuǎn)換為小寫。toLocaleUpperCase()把字符串轉(zhuǎn)換為大寫。toLowerCase()把字符串轉(zhuǎn)換為小寫。toUpperCase()把字符串轉(zhuǎn)換為大寫。toSource()代表對象的源代碼。toString()返回字符串。valueOf()返回某個字符串對象的原始值。2、循環(huán)的跳轉(zhuǎn)2.1、break語句在循環(huán)中，它的作用是結(jié)束循環(huán)的執(zhí)行。即使循環(huán)的次數(shù)還沒有執(zhí)行完，也不再執(zhí)行。2.2、continue語句continue語句只能用于循環(huán)中，是結(jié)束當(dāng)前正在執(zhí)行的這次循環(huán)，跳入下一次循環(huán)?！鞠嚓P(guān)知識】在<head>標(biāo)簽內(nèi)部輸入以下代碼：<scripttype="text/javascript">varstr="Iamastudent";varstr_len=str.length;variPos=0;for(vari=0;i<str_len;i++){if(str.charAt(i)=="t"){iPos=i+1;break;}}document.write("字符串"+str+"中的第一個字母t的位置為"+iPos);【任務(wù)實現(xiàn)】任務(wù)4“項目三”的實現(xiàn)1、函數(shù)1.1、自定義函數(shù)function函數(shù)名稱([參數(shù)列表]){ [語句塊][return<返回值>]}【相關(guān)知識】1.2、函數(shù)參數(shù)函數(shù)名稱([參數(shù)值列表]);對于形參和實參還需要注意以下幾點：①形參與實參要一一對應(yīng)，也就是傳遞的順序要一致。②形參的個數(shù)與實參的個數(shù)原則上要求一致。如果形參的個數(shù)大于實參的個數(shù)，則多余的形參的值將被賦予undefined(表示未定義)，如果形參的個數(shù)小于實參的個數(shù)，則多余的實參將被舍棄。③用于定義形參的變量不能添加關(guān)鍵字var,直接寫變量名即可。④形參只能是變量，不能是一個表達(dá)式?！鞠嚓P(guān)知識】1.3、系統(tǒng)函數(shù)也叫內(nèi)置函數(shù)，是JavaScript內(nèi)部定義好的函數(shù)，能完成一些特定的功能，用戶不必知道它是如何實現(xiàn)的，只要直接調(diào)用就可以了。前面我們已經(jīng)學(xué)習(xí)的例如數(shù)學(xué)函數(shù)、parseInt()、parseFloat()、isNaN()等都是系統(tǒng)函數(shù)?！鞠嚓P(guān)知識】2、變量的作用域變量的作用域就是變量的有效作用范圍。這個范圍有兩種：全局和局部。在函數(shù)定義之外聲明的變量是全局變量，該變量在整個持續(xù)范圍內(nèi)都可以訪問和修改。在函數(shù)定義內(nèi)聲明的變量是局部變量，它不能被該函數(shù)外的任何事物訪問。但是，必須注意的是，在函數(shù)內(nèi)部聲明一個局部變量時一定要使用關(guān)鍵字var，否則還是一個全局變量。一個局部變量的名稱可以與某個全局變量的名稱相同，但這是完全不同和獨立的兩個變量。【相關(guān)知識】1、要不斷彈出成績輸入對話框，沒有規(guī)定輸入次數(shù)，所以要使用while循環(huán)。2、當(dāng)輸入“!”就結(jié)束輸入，所以while循環(huán)的開始條件是輸入字符串不等于“!”。3、要對成績進行打印和統(tǒng)計，每輸入一個成績就先存儲到數(shù)組中?！救蝿?wù)分析】1、在<body>標(biāo)簽對中編寫超級鏈接“是否有不及格”的代碼，并為其添加onclick事件，在事件中調(diào)用一個自定義函數(shù)check()。此函數(shù)的功能是查找是否有不及格的成績：<ahref="#"onclick="check()">是否有不及格</a>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">varscore=0;//存放當(dāng)前輸入的成績vari=1;//輸入次數(shù)計數(shù)varele=[];//存放最終的成績while(score!="!"){ score=prompt("請輸入第"+i+"個成績：",0); if(!isNaN(score)&&score!=""&&score!="!") { ele[i]=Number(score); i++; } elseif(score!="!") { alert("輸入的成績無效！"); }}document.write("輸入的成績列表：<br/>");【任務(wù)實現(xiàn)】for(vari=1;i<ele.length;i++){ document.write(ele[i]+""); if(i%4==0) { document.write("<br/>"); }}vare_max=ele[1];//存儲最高分vare_min=ele[1];//存儲最低分varsum=0;//存儲分?jǐn)?shù)總和，以便統(tǒng)計平均分for(vari=1;i<ele.length;i++){ sum+=ele[i]; if(ele[i]>e_max) { e_max=ele[i]; } if(ele[i]<e_min) { e_min=ele[i]; }}【任務(wù)實現(xiàn)】vareverage=Math.round(sum/(ele.length-1)*10)/10;document.write("<br/>平均分?jǐn)?shù)："+everage+"<br/>最高分："+e_max+"<br/>最低分："+e_min);functioncheck(){ varflag=0;//標(biāo)志，flag=0時無不及格，flag=1時有不及格

for(vari=1;i<ele.length;i++) { if(ele[i]<60) { flag=1; break; } } if(flag==0) { alert("沒有不及格成績。"); } else { alert("有不及格成績。"); }}</script>【任務(wù)實現(xiàn)】項目四注冊頁面設(shè)計——事件設(shè)計一個簡單的用戶注冊頁面。頁面需求如下：填寫的信息有姓名、年齡、和城市，且都是必填信息，“城市”文本框只讀。當(dāng)鼠標(biāo)移入“姓名”或者“年齡”文本框時，光標(biāo)自動落入文本框內(nèi)。當(dāng)鼠標(biāo)移入“城市”文本框時，文本框中顯示文字“請選擇城市”?！澳挲g”文本框中只能輸入數(shù)字，當(dāng)焦點落在此文本框中時，按非數(shù)字鍵無法鍵入。點擊“請選擇城市”下列列表框，可以選擇一個城市。當(dāng)選擇了一個城市后，在“城市”文本框中顯示該城市。如果沒有填寫姓名，點擊“提交”按鈕提交表單時，會彈出提示框“姓名未填寫，不能提交！”。如果沒有填寫“年齡”，點擊“提交”按鈕提交表單時，會彈出提示框“年齡未填寫，不能提交！”。如果沒有選擇城市，點擊“提交”按鈕提交表單時，則彈出提示框“城市未選擇，不能提交！”。項目情境理解事件的概念。掌握事件的觸發(fā)機制。掌握常用事件的應(yīng)用。學(xué)習(xí)目標(biāo)點擊頁面上的“問候”按鈕，彈出兩個對話框，分別顯示“你好!”和“早上好”。要求不得將事件以及觸發(fā)代碼寫在“問候”按鈕的標(biāo)簽中，做到代碼與標(biāo)簽分離。任務(wù)1在代碼中設(shè)置對象處理事件1、為對象事件賦值屬性的設(shè)置方式：對象.屬性=屬性的值;為事件設(shè)置要觸發(fā)的行為動作：對象.事件=函數(shù)名稱;或者對象.事件=function(){

[函數(shù)體];}【相關(guān)知識】2、瀏覽器與事件事件都是由瀏覽器產(chǎn)生的，而不是由javascript產(chǎn)生的。因此不同的瀏覽器產(chǎn)生的事件可能不同，就是相同的瀏覽器不同的版本所產(chǎn)生的事件也有可能不同。因此，對于某個事件在某個瀏覽器上能正常運行，但在另一個瀏覽器上就無效。3、加載和卸載事件加載事件為onload，是指加載（打開）頁面完畢時產(chǎn)生的事件，卸載事件為onunload，是指卸載（關(guān)閉、刷新或者跳轉(zhuǎn)到其他頁面）網(wǎng)頁時產(chǎn)生的事件。另外在卸載頁面前還會觸發(fā)onbeforeunload事件。【相關(guān)知識】4、預(yù)加載對象處理事件window.onload=function(){

對象.事件=函數(shù)名稱;}或者window.onload=function(){

對象.事件=function(){ [函數(shù)體];}}【相關(guān)知識】在<body>標(biāo)簽內(nèi)部輸入以下代碼：<inputtype="button"name="bt1"id="bt1"value="問候"/><scripttype="text/javascript">functionhello(){ alert('你好！'); alert('早上好！');}bt1.onclick=hello;</script>【任務(wù)實現(xiàn)】頁面上顯示一個“跳轉(zhuǎn)到百度”的超級鏈接，點擊該鏈接彈出一個詢問是否跳轉(zhuǎn)的對話框，如圖4.4所示。如果點擊“確定”按鈕，瀏覽器打開百度首頁，如果點擊“取消”按鈕，瀏覽器不跳轉(zhuǎn)，仍舊停止本頁。任務(wù)2事件處理中的返回值取消事件處理的默認(rèn)動作【相關(guān)知識】元素事件描述<a>onclick單擊跳轉(zhuǎn)到元素的href屬性指定的URL<form>onsubmit、onreset提交表單、重置表單documentoncontextmenu單擊鼠標(biāo)右鍵可以顯示一個快捷菜單1、在頁面中制作一個超級鏈接，標(biāo)簽id為link。代碼如下：<aid="link"href="">跳轉(zhuǎn)到百度</a>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入如下JavaScript代碼：<scripttype="text/javascript">window.onload=function(){ link.onclick=function() { varsel=confirm("真的要跳轉(zhuǎn)嗎？") if(!sel) { returnfalse; } }}</script>【任務(wù)實現(xiàn)】頁面上有一個表單，內(nèi)部有一個文本框，一個“提交”按鈕。用戶必須在文本框中輸入姓名，點擊“提交”按鈕，表單才能提交跳轉(zhuǎn)到ok.html,否則表單不提交。任務(wù)3表單提交事件對象層次模型【相關(guān)知識】1、在頁面上設(shè)計表單界面，HTML代碼如下：<formname="form1"method="post"action="ok.html">

姓名：<inputtype="text"name="txtName"id="txtname"><inputtype="submit"name="button"id="button"value="提交"></form>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { if(form1.txtName.value=="") { alert("請?zhí)顚懶彰?); returnfalse; } }}</script>【任務(wù)實現(xiàn)】頁面上有一張小狗的圖片，當(dāng)鼠標(biāo)放置到該圖片上時，變成另一張小狗的圖片；當(dāng)鼠標(biāo)移開時，圖片恢復(fù)成原來小狗圖片；當(dāng)在圖片上單擊鼠標(biāo)左鍵時，彈出對話框，提示信息“汪汪”。任務(wù)4鼠標(biāo)事件鼠標(biāo)事件【相關(guān)知識】事件類型事件描述鼠標(biāo)移動onmousemove當(dāng)鼠標(biāo)在對象上移動時觸發(fā)onmouseout當(dāng)鼠標(biāo)離開對象時觸發(fā)onmouseover當(dāng)鼠標(biāo)移入到對象上時觸發(fā)鼠標(biāo)點擊onclick當(dāng)單擊鼠標(biāo)左鍵時觸發(fā)ondblclick當(dāng)雙擊鼠標(biāo)左鍵時觸發(fā)onmousedown當(dāng)鼠標(biāo)鍵按下的瞬間觸發(fā)onmouseup當(dāng)鼠標(biāo)鍵按下然后又釋放的瞬間觸發(fā)1、在頁面上放置第一張小狗，HTML代碼如下：<body><imgid="dog1"src="images/dog1.jpg"></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ dog1.onmouseover=function() { dog1.src="images/dog2.jpg"; } dog1.onmouseout=function() { dog1.src="images/dog1.jpg"; } dog1.onmousedown=function() { alert("汪汪！"); }}</script>【任務(wù)實現(xiàn)】頁面上有兩個文本框，在第一個文本框中每輸入一個字符，第二個文本框中就顯示該字符對應(yīng)在鍵盤上的鍵碼值。第一個文本框中只能輸入5個字符。任務(wù)5鍵盤事件1、鍵盤事件【相關(guān)知識】事

件描

述onkeydown當(dāng)按下鍵盤上的鍵時觸發(fā)（能識別功能鍵，不區(qū)分大小寫按鍵）onkeyup當(dāng)松開鍵盤上的鍵時觸發(fā)（能識別功能鍵，不區(qū)分大小寫按鍵）onkeypress當(dāng)按下鍵盤上的鍵時觸發(fā)（不能識別功能鍵，區(qū)分大小寫按鍵）2、event事件對象event(事件)對象代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕的狀態(tài)。【相關(guān)知識】2.1event對象兼容性處理IE瀏覽器有event對象，但是FF火狐瀏覽器沒有event對象，在該瀏覽器中，可以通過給函數(shù)的參數(shù)傳遞event對象?？梢允褂靡韵路椒ǎ篺unction函數(shù)名(ev){varoEvent=ev||event;//使用oEvent代替window.event}或者對象=function(ev){varoEvent=ev||event;//使用oEvent代替window.event}【相關(guān)知識】2.2event對象屬性【相關(guān)知識】屬性描述

altKey設(shè)置或獲取Alt鍵的狀態(tài)。

altLeft設(shè)置或獲取左Alt鍵的狀態(tài)。

Button設(shè)置或獲取用戶所按的鼠標(biāo)按鈕。

clientX設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的x坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。

clientY設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的y坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。

ctrlKey設(shè)置或獲取Ctrl鍵的狀態(tài)。

ctrlLeft設(shè)置或獲取左Ctrl鍵的狀態(tài)。

fromElement設(shè)置或獲取事件發(fā)生時激活或鼠標(biāo)將要離開的對象。

keyCode設(shè)置或獲取與導(dǎo)致事件的按鍵關(guān)聯(lián)的Unicode按鍵代碼。

offsetX設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的x坐標(biāo)。

offsetY設(shè)置或獲取鼠標(biāo)指針位置相對于觸發(fā)事件的對象的y坐標(biāo)。

propertyName設(shè)置或獲取對象上發(fā)生更改的屬性名稱。

（接上表）【相關(guān)知識】repeat獲取onkeydown事件是否正在重復(fù)。

returnValue設(shè)置或獲取事件的返回值。

screenX設(shè)置或獲取獲取鼠標(biāo)指針位置相對于用戶屏幕的x坐標(biāo)。

screenY設(shè)置或獲取鼠標(biāo)指針位置相對于用戶屏幕的y坐標(biāo)。

shiftKey設(shè)置或獲取Shift鍵的狀態(tài)。

shiftLeft設(shè)置或獲取左Shift鍵的狀態(tài)。

srcElement設(shè)置或獲取觸發(fā)事件的對象。

toElement設(shè)置或獲取用戶要將鼠標(biāo)指針移動指向的對象的引用。

type從event對象中獲取事件名稱。

wheelDelta設(shè)置或獲取滾輪按鈕滾動的距離和方向。

x設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的x像素坐標(biāo)。

y設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的y像素坐標(biāo)。2.3event.button的值及其含義【相關(guān)知識】值描

述0按下鼠標(biāo)左鍵1按下鼠標(biāo)中間鍵（滾輪）2按下鼠標(biāo)右鍵1、在頁面上設(shè)置兩個文本框，HTML代碼如下：<body>字符：<inputtype="text"id="text1">鍵碼：<inputtype="text"id="text2"></body>【任務(wù)實現(xiàn)】2、在<head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ text1.onkeydown=function(ev) { varoEvent=ev||event; text2.value=oEvent.keyCode; if(this.value.length>=5) { returnfalse; } }}</script>【任務(wù)實現(xiàn)】頁面中有一個文本框，要求輸入正確格式的電子郵件地址，如果電子郵件地址格式不正確，則給出錯誤提示信息，表單不能提交。任務(wù)6用正則表達(dá)式驗證電子郵件地址格式1、正則表達(dá)式正則表達(dá)式又稱規(guī)則表達(dá)式（RegularExpression），是一種文本模式，包括普通字符（如a～z之間的字母）和特殊字符（也叫元字符或限定符）。正則表達(dá)式使用單個字符串來描述、匹配一系列匹配某個句法規(guī)則的字符串，通常被用來檢索、替換那些符合某個模式（規(guī)則）的文本。正則表達(dá)式不是JavaScript語言特有的，它是獨立于語言之外的一種文本模式。許多程序設(shè)計語言（如PHP、Python、C#、Java等語言）都支持利用正則表達(dá)式進行字符串操作。【相關(guān)知識】2、RegExp對象RegExp對象表示正則表達(dá)式，是由普通字符和特殊字符（也叫元字符或限定符）組成的文字模板，用于對字符串執(zhí)行模式匹配。創(chuàng)建RegExp對象的方式：（1）使用字面量創(chuàng)建RegExp對象的語法格式如下：var變量=/正則表達(dá)式/匹配模式;（2）使用構(gòu)造函數(shù)創(chuàng)建RegExp對象的語法格式如下：var變量=newRegExp("正則表達(dá)式","匹配模式");【相關(guān)知識】3、RegExp對象的常用方法【相關(guān)知識】方

法描

述exec()檢索字符串中指定的值，返回找到的值，并確定其位置test()檢索字符串中指定的值，返回true或false4、支持正則表達(dá)式的String對象的方法【相關(guān)知識】方

法描

述search()在字符串中檢索指定的子字符串，或者檢索與正則表達(dá)式匹配的子字符串，并返回第1個匹配的子字符串在字符串中的起始位置match()在字符串中檢索指定的值，或者找到一個或多個正則表達(dá)式的匹配replace()替換與正則表達(dá)式匹配的子字符串split()把字符串分割為字符串?dāng)?shù)組1、在頁面中設(shè)置一個文本框和一個“提交”按鈕，HTML代碼如下：<body>輸入郵箱</br><formname="form1"method="post"action="ok.html">

郵箱：<inputname="email"type="text">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任務(wù)實現(xiàn)】2、在<head></head>標(biāo)簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.onsubmit=function() { varreg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/; if(!reg.test(form1.email.value)) { alert("郵箱地址格式不正確！"); returnfalse; } }}</script>【任務(wù)實現(xiàn)】任務(wù)7“項目四”的實現(xiàn)this關(guān)鍵字JavaScript中，this關(guān)鍵字有很多用法，一般指的是當(dāng)前的對象。比如下列語句中的this指的就是文本框本身。<inputtype="text"id="txtname"onMouseDown="this.value='點擊鼠標(biāo)'">【相關(guān)知識】在本項目中，當(dāng)表單控件得到鼠標(biāo)焦點時，操作鼠標(biāo)或敲擊鍵盤都需要檢查其中的值，所以需要用到鼠標(biāo)事件和鍵盤事件。在“年齡”文本框中不允許輸入非數(shù)字的值和在條件不符合時不允許提交表單都需要用到事件的返回值。檢查輸入的年齡值是否為數(shù)字還要用到Event對象。【任務(wù)分析】1、在<body>標(biāo)簽對中編寫表單代碼：<body>注冊</br><formname="form1"method="post"action="ok.html">

姓名：<inputname="username"type="text">*

年齡：<inputname="age"type="text"id="age">* <selectname="sel_city"><optionvalue="0">請選擇城市</option><optionvalue="北京">北京</option><optionvalue="上海">上海</option><optionvalue="廣州">廣州</option> </sele

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論