JavaScript項目式實例教程（第2版） 課件 項目四 注冊頁面設計 - 事件_第1頁
JavaScript項目式實例教程（第2版） 課件 項目四 注冊頁面設計 - 事件_第2頁
JavaScript項目式實例教程（第2版） 課件 項目四 注冊頁面設計 - 事件_第3頁
JavaScript項目式實例教程（第2版） 課件 項目四 注冊頁面設計 - 事件_第4頁
JavaScript項目式實例教程（第2版） 課件 項目四 注冊頁面設計 - 事件_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

項目四注冊頁面設計——事件設計一個簡單的用戶注冊頁面。頁面需求如下：填寫的信息有姓名、年齡、和城市，且都是必填信息，“城市”文本框只讀。當鼠標移入“姓名”或者“年齡”文本框時，光標自動落入文本框內。當鼠標移入“城市”文本框時，文本框中顯示文字“請選擇城市”。“年齡”文本框中只能輸入數(shù)字，當焦點落在此文本框中時，按非數(shù)字鍵無法鍵入。點擊“請選擇城市”下列列表框，可以選擇一個城市。當選擇了一個城市后，在“城市”文本框中顯示該城市。如果沒有填寫姓名，點擊“提交”按鈕提交表單時，會彈出提示框“姓名未填寫，不能提交！”。如果沒有填寫“年齡”，點擊“提交”按鈕提交表單時，會彈出提示框“年齡未填寫，不能提交！”。如果沒有選擇城市，點擊“提交”按鈕提交表單時，則彈出提示框“城市未選擇，不能提交！”。項目情境理解事件的概念。掌握事件的觸發(fā)機制。掌握常用事件的應用。學習目標點擊頁面上的“問候”按鈕，彈出兩個對話框，分別顯示“你好!”和“早上好”。要求不得將事件以及觸發(fā)代碼寫在“問候”按鈕的標簽中，做到代碼與標簽分離。任務1在代碼中設置對象處理事件1、為對象事件賦值屬性的設置方式：對象.屬性=屬性的值;為事件設置要觸發(fā)的行為動作：對象.事件=函數(shù)名稱;或者對象.事件=function(){

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

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

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

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

件描

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

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

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

Button設置或獲取用戶所按的鼠標按鈕。

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

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

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

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

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

keyCode設置或獲取與導致事件的按鍵關聯(lián)的Unicode按鍵代碼。

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

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

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

（接上表）【相關知識】repeat獲取onkeydown事件是否正在重復。

returnValue設置或獲取事件的返回值。

screenX設置或獲取獲取鼠標指針位置相對于用戶屏幕的x坐標。

screenY設置或獲取鼠標指針位置相對于用戶屏幕的y坐標。

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

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

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

toElement設置或獲取用戶要將鼠標指針移動指向的對象的引用。

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

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

x設置或獲取鼠標指針位置相對于父文檔的x像素坐標。

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

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

法描

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

法描

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

郵箱：<inputname="email"type="text">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任務實現(xiàn)】2、在<head></head>標簽對中輸入以下代碼：<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>【任務實現(xiàn)】任務7“項目四”的實現(xiàn)this關鍵字JavaScript中，this關鍵字有很多用法，一般指的是當前的對象。比如下列語句中的this指的就是文本框本身。<inputtype="text"id="txtname"onMouseDown="this.value='點擊鼠標'">【相關知識】在本項目中，當表單控件得到鼠標焦點時，操作鼠標或敲擊鍵盤都需要檢查其中的值，所以需要用到鼠標事件和鍵盤事件。在“年齡”文本框中不允許輸入非數(shù)字的值和在條件不符合時不允許提交表單都需要用到事件的返回值。檢查輸入的年齡值是否為數(shù)字還要用到Event對象?！救蝿辗治觥?、在<body>標簽對中編寫表單代碼：<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> </select><inputname="city"type="text"size="12"readonly="readonly">*<inputtype="submit"name="btn"id="btn"value="提交"></form></body>【任務實現(xiàn)】2、在<head>標簽對中輸入以下代碼：<scripttype="text/javascript">window.onload=function(){ form1.username.onmouseover=function() { this.focus(); this.select(); } form1.age.onmouseover=function() { this.focus(); this.select(); }

【任務實現(xiàn)】

form1.age.onmouseover=function() { this.focus(); this.select(); } form1.age.onkeydown=function(ev) { oEvent=ev||event; if((oEvent.keyCode<48||oEvent.keyCode>57)&&oEvent.keyCode!=8) {

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論