基于.NET的Web應(yīng)用開發(fā)）資源單元2（6）網(wǎng)頁設(shè)計與制作基礎(chǔ)（html+css+js）

1、WEB 應(yīng) 用 開 發(fā)單元2：網(wǎng)站的規(guī)劃與設(shè)計任務(wù)2：網(wǎng)頁設(shè)計與制作根底html+css+js(5)主 要 內(nèi) 容事件1訪問表單2提交、重置表單3表單常用方法與事件4學習目標知識目標：掌握使用JavaScript進行表單驗證的方法能力目標：能夠使用JavaScript訪問表單與表單域能夠使用JavaScript對注冊表單的內(nèi)容進行驗證技術(shù)應(yīng)用的背景表單是網(wǎng)頁的重要組成局部，通過表單可以使用戶向效勞器發(fā)送數(shù)據(jù)。表單由form、input、textarea和select等HTML元素構(gòu)成，form元素指定發(fā)送數(shù)據(jù)時使用的HTTP請求方法以及用于處理表單的效勞器端程序或動態(tài)網(wǎng)頁的URL地址等，用戶利

2、用表單輸入信息并提交給效勞器進行處理，在提交之前可以通過JavaScript腳本對表單信息進行檢查和處理。一、事件概述1. 事件事件是指可以被瀏覽器識別的、發(fā)生在頁面上的用戶動作或狀態(tài)變化。許多HTML元素可以激發(fā)事件，通過響應(yīng)特定元素的特定事件，可以大大地提升網(wǎng)頁的交互性。其中：用戶動作：用戶對頁面的鼠標或鍵盤操作。例如，click、keypress 等狀態(tài)變化：頁面的狀態(tài)發(fā)生變化。例如，load、resize、change 等一、事件概述2.編寫事件響應(yīng)代碼在元素的屬性聲明中直接寫JavaScript代碼。例如：響應(yīng)函數(shù)：function Button1_onclick() /. 事件名稱

3、響應(yīng)函數(shù)名一、事件概述3.事件驅(qū)動編程事件驅(qū)動編程：是指為需要處理的事件編寫相應(yīng)的事件處理程序事件驅(qū)動編程的一般步驟：第1步，確定響應(yīng)事件的元素第2步，為指定元素確定需要響應(yīng)的事件類型第3步，為指定元素的指定事件編寫相應(yīng)的事件處理程序第4步，將事件處理程序綁定到指定元素的指定事件一、事件概述4.事件綁定將一個函數(shù)與某個 HTML 元素的事件屬性關(guān)聯(lián)起來，使得當相應(yīng)事件發(fā)生時就會觸發(fā)該函數(shù)的執(zhí)行，事件處理程序為被綁定的函數(shù)。事件綁定的兩種方法靜態(tài)綁定：是指將處理事件的程序代碼直接指定為 HTML 元素的事件屬性值。動態(tài)綁定：是指通過語句建立事件綁定。對象.事件屬性 = 函數(shù)引用;一、事件概述5.

4、事件屬性使用事件屬性可以為元素的指定事件綁定事件處理程序事件屬性名：在事件名的根底上，加上前綴“on，如 onclick在HTML標記中設(shè)置事件屬性時，還可以把事件處理函數(shù)屬性值設(shè)置為一個返回布爾值的return語句。如果這個return語句返回ture，那么執(zhí)行該事件的默認行為；如果返回false，那么取消該事件的默認行為。對于HTML元素的不同事件，當相應(yīng)的事件處理函數(shù)返回false值時效果是有所不同的。一、事件概述6.事件分類頁面事件：是指因頁面狀態(tài)發(fā)生變化而產(chǎn)生的事件，包括 onload、onunload、onresize、onabort、 onerror等鼠標事件：是指用戶操作鼠標點

5、擊或移動而觸發(fā)的事件，包括 onclick、ondblclick、onmousedown等鍵盤事件：是指用戶在鍵盤上敲擊、輸入時觸發(fā)的事件，包括 onkeypress、onkeydown、onkeyup等表單事件：是指與表單或表單控件相關(guān)的事件，包括 onsubmit、onreset、onchange、onselect、onblur和 onfocus 等一、事件概述7.事件流事件流是指事件的冒泡傳遞過程源元素父元素根對象即 Document 對象由于存在事件流，因此當一個事件發(fā)生時，不僅可以由產(chǎn)生事件的元素響應(yīng)，也可以由其他元素響應(yīng)。有些事件如 load、unload、blur、focus 等

6、事件不會傳遞二、訪問表單1. 訪問表單方式：假設(shè)某表單的ID為form1，那么可以使用DOM方法來獲取該表單對象：假設(shè)某表單是網(wǎng)頁中的第一個表單，且其名稱name屬性為form1，那么可以通過document的forms集合來獲取該表單：oForm = document.getElementById(form1);oForm = document.forms0;oForm = document.formsform1;oForm = document.form1;二、訪問表單2. 表單對象的常用屬性acceptCharset：設(shè)置或獲取一個逗號分隔的列表，內(nèi)容是效勞器可接受的字符集。action

7、：設(shè)置或獲取表單內(nèi)容要發(fā)送到并進行處理的URL。enctype：設(shè)置或檢索表單的MIME編碼方式。默認設(shè)置為application/x-www-form- urlencoded，假設(shè)要上傳文件，那么應(yīng)設(shè)置為multipart/form-data。id：設(shè)置或檢索表單的id。二、訪問表單2. 表單對象的常用屬性續(xù)length：檢索表單中的表單域的數(shù)目。method：設(shè)置或檢索如何將表單數(shù)據(jù)發(fā)送到效勞器。假設(shè)設(shè)置為GET，那么把表單數(shù)據(jù)附加到action屬性指定的URL上發(fā)送；假設(shè)設(shè)置為POST，那么通過HTTP發(fā)布事務(wù)發(fā)送數(shù)據(jù)。name：設(shè)置或檢索表單的名稱。target：設(shè)置或檢索表單提交結(jié)果

8、的框架或窗口名稱。二、訪問表單3. 表單的集合elements：包含表單中除外的所有表單域。elements集合的length屬性與表單的length屬性值相等。4. 表單的方法reset()：把表單中的表單域重置為它們的默認值，但不會觸發(fā)表單的onreset事件。submit()：用于提交表單，但不會觸發(fā)表單的onsubmit事件。表單對象的常用事件onreset：當重置表單時觸發(fā)。onsubmit：當提交表單時觸發(fā)。三、訪問表單域在一個表單內(nèi)可以添加一些表單域，例如按鈕、文本框以及列表框等，這些表單域都包含表單的elements集合中。在JavaScript腳本中，既可以用document

9、.getElementById方法和表單域的ID來獲取該表單域，也可以通過表單域的name屬性或表單域在elements集合中的索引來訪問不同的表單域。用elements集合的length屬性可獲取表單中包含的表單域數(shù)目。三、訪問表單域通過ID訪問表單域通過索引訪問表單域通過name訪問表單域直接通過name屬性來訪問表單域：假設(shè)表單域的名稱中包含空格，那么需要使用方括號標記：var oTextBox = document.getElementById(txtUsername);var oTextBox = document.form1.elements0;var oTextBox = doc

10、ument.form1.elementstxtUsername;var oTextBox = document.form1.txtUsername;var oTextBox = document.form1.elementsUser name;三、訪問表單域表單域的屬性、方法和事件disabled屬性：獲取或設(shè)置表單域是否被禁用。form屬性：獲取包含表單域所在的表單。blur()方法：使表單域失去焦點，并將焦點移到別處。focus()方法：使表單域獲得焦點。onblur事件：當表單域失去焦點時發(fā)生，將執(zhí)行onblur事件處理程序。onfocus事件：當表單域獲得焦點時發(fā)生，將執(zhí)行onfocu

11、s事件處理程序。四、提交表單1. 表單提交方式通過單擊提交按鈕提交表單：通過單擊圖像按鈕提交表單：通過調(diào)用表單的submit()方法提交表單：四、提交表單2. 表單提交目的地提交給效勞器端處理程序：提交給JavaScript函數(shù)：通過電子郵件形式提交表單數(shù)據(jù)：五、重置表單使用重置按鈕重置表單：通過調(diào)用表單的reset()方法重置表單：六、表單域常用方法與事件1.文本框文本框?qū)ο蟮某Ｓ梅椒╞lur()：使文本框失去焦點并觸發(fā)onblur事件。focus()：使文本框得到焦點并執(zhí)行由onfocus事件指定的代碼。select()：選取文本框中的所有文本。文本框的事件onblur和onfocuson

12、change：當用戶更改文本框的內(nèi)容并使其失去焦點時觸發(fā)。如果通過在腳本中設(shè)置value屬性來更改文本框的內(nèi)容，那么不會觸發(fā)onchange事件。onselect：中選取文本框中的一個或多個字符時觸發(fā)。六、表單域常用方法與事件2.文本區(qū)域與文本框一樣，文本區(qū)域具有blur()、focus()和select()方法，而且支持onchange和onselect事件。六、表單域常用方法與事件3.單項選擇按鈕單項選擇按鈕的常用方法blur()：使單項選擇按鈕失去焦點并觸發(fā)onblur事件。click()：模擬鼠標單擊操作并觸發(fā)onclick事件。focus()：使單項選擇按鈕獲得焦點并執(zhí)行由onfoc

13、us事件指定的代碼。單項選擇按鈕的常用事件onblur：當單項選擇按鈕失去輸入焦點時觸發(fā)。onclick：當用戶用鼠標左鍵單擊單項選擇按鈕時觸發(fā)。onfocus：當單項選擇按鈕獲得焦點時觸發(fā)。六、表單域常用方法與事件4.復選框復選框?qū)ο蟮某Ｓ梅椒╞lur()：使復選框失去焦點并觸發(fā)onblur事件。click()：模擬鼠標單擊操作并觸發(fā)onclick事件。focus()：使復選框獲得焦點并執(zhí)行由onfocus事件指定的代碼。復選框?qū)ο蟮某Ｓ檬录nblur：當復選框失去輸入焦點時觸發(fā)。onclick：當用戶用鼠標左鍵單擊復選框時觸發(fā)。onfocus：當復選框獲得焦點時觸發(fā)。六、表單域常用方法與

14、事件5.列表框select對象的常用方法add：向select對象的options集合中添加一個option元素。remove：從select對象的options集合中移除一個option元素。select對象的常用事件是onchange，該事件在用戶從列表框中選擇不同選項時發(fā)生。訪問列表項select對象有一個options集合，該集合由列表框中的所有option對象組成。通過options集合可以對列表框中的選項進行訪問。如果某個選項在options集合中的索引為i，那么可以通過optionsi形式來獲取該選項，并對其以下屬性進行訪問。六、表單域常用方法與事件5.列表框續(xù)optionsi.defaultSelected：返回一個Boolean值，說明該選項初始化時是否被選中。optionsi.length：返回一個整數(shù)，表示options集合包含的選項個數(shù)。該屬性值等于select對象的length屬性值。optionsi.selected：返回一個Boolean值，說明該選項是否被選中。optionsi.text：該選項顯示在列表框中的文本。optionsi.value：該選項的值。當用戶提交表單時，select對象的name屬性值和選中項的value屬性值將一起被發(fā)送到效勞器端。六、