javascript控制瀏覽器對象以及表單驗證_第1頁
javascript控制瀏覽器對象以及表單驗證_第2頁
javascript控制瀏覽器對象以及表單驗證_第3頁
javascript控制瀏覽器對象以及表單驗證_第4頁
javascript控制瀏覽器對象以及表單驗證_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

JavaScript瀏覽器對象以及表單驗證

回顧JavaScript相關(guān)概念及作用JavaScript基本語法函數(shù)面向?qū)ο蟮腏avaScriptJavaScript內(nèi)建對象String,Array,Date瀏覽器對象window本章目標(biāo)HTML文檔中的相關(guān)事件window對象屬性及方法document對象history對象location對象表單校驗JavaScript操作HTML元素通過id控制HTML元素生成樹狀目錄HTML文檔中的事件事件JavaScript使我們有能力創(chuàng)建動態(tài)頁面。事件是可以被JavaScript偵測到的行為。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。比方說，我們可以在用戶點擊某按鈕時產(chǎn)生一個onClick事件來觸發(fā)某個函數(shù)。事件在HTML頁面中定義。事件舉例：鼠標(biāo)點擊頁面或圖像載入鼠標(biāo)懸浮于頁面的某個熱點之上在表單中選取輸入框確認(rèn)表單鍵盤按鍵注意：事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時函數(shù)才會執(zhí)行HTML文檔中的事件點擊事件:onclick,ondbclick焦點:onfocus,onblur鼠標(biāo): onmouseout,onmouseover,onmouseup,onmousemove,onmousedown鍵盤:onkeydown,onkeypress,onkeyupbody中:onload,onunload,onerror,onresize選擇事件:onchangeform表單:onsubmit,onreset事件--示例<html><head><scriptlanguage="javascript"> </script></head><bodyonload="alert('加載完成');"onunload="alert('退出');"><marqueeonmouseover="this.stop();"onmouseout="this.start();">我會跑噢</marquee><br><inputtype="button"value="按鈕1"onclick="alert('單擊');"onkeydown="alert(event.keyCode);"/></body></html>瀏覽器對象

Window窗口對象location地址對象document文檔對象FORM表單對象瀏覽器對象的分層結(jié)構(gòu)window.document.myform.text1window對象簡介Window對象是JavaScript層級中的頂層對象。Window對象代表一個瀏覽器窗口或一個框架。Window對象會在<body>或<frameset>每次出現(xiàn)時被自動創(chuàng)建。在客戶端JavaScript中，Window對象是全局對象，所有的表達(dá)式都在當(dāng)前的環(huán)境中計算。也就是說，要引用當(dāng)前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如，可以只寫document，而不必寫window.document。同樣，可以把當(dāng)前窗口對象的方法當(dāng)作函數(shù)來使用，如只寫alert()，而不必寫Window.alert()。window對象的屬性1.navigator2.Windowdocument（文檔對象）frame（框架對象）location（位置對象）history（歷史對象）links鏈接對象archors錨對象forms表單對象images圖片對象window對象常用方法alert(‘信息’)：消息框prompt(‘提示信息’,默認(rèn)值)：標(biāo)準(zhǔn)輸入框confirm()：確認(rèn)框open()：打開一個新窗口close()：關(guān)閉窗口document對象Document對象表示給定瀏覽器窗口中的HTML文檔，可用來訪問頁面中的所有元素。(特殊顏色標(biāo)的要求掌握)

Document對象是Window對象的一個部分，可通過window.document屬性來訪問方法getElementByIdgetElementsByNamegetElementsByTagNamecloseopenwritewritelnhistory對象此對象提供客戶最近訪問過的URL列表。屬性Length返回瀏覽器歷史列表中的URL數(shù)量方法

back()加載history列表中的前一個URL

forward()加載history列表中的下一個URLgo()加載history列表中的某個具體頁面location對象Location對象存儲在Window對象的Location屬性中，表示那個窗口中當(dāng)前顯示的文檔的Web地址。它的href屬性存放的是文檔的完整URL，其他屬性則分別描述了URL的各個部分。(特殊顏色標(biāo)的要求掌握)屬性hash 指BookMark”#”后面的字符串pathname 指主機(jī)后面的字符串，包含斜線，不包含問號后面的參數(shù)字符串hostname 指主機(jī)和端口字符串

href 目前網(wǎng)頁的URL字符串包含問號后面的參數(shù)

port 端口號字符串search 指URL問號后面的參數(shù)字符串，包含”？”方法assign(url) 如同設(shè)定window.location.href的值

reload() 重新裝載當(dāng)前文檔replace(url) 代替原來的URL，而且此URL不會存入history對象里相關(guān)數(shù)組forms[] //屬于document 在程序中使用多表單時,建立該數(shù)組。elements[]//屬于form在一個窗口中使用幾個元素時,建立該數(shù)組。frames[]//屬于window建立框架時,使用該數(shù)組document.forms[0].elements[0]表示每一表單窗體中的第一個元素。多框架下window對象間關(guān)系父window對象，包括frames、self屬性frames[0]/子window對象1frames[1]/子window對象2框架之間的關(guān)系：parent 表示上一層框架top 表示最上層框架self 表示目前所在的框架表單驗證例子 1.校驗函數(shù) functioncheckusername(){ varusername=document.forms[0].username; varusernamespan=document.getElementById("usernamspan"); if(username.value==""){ usernamespan.innerHTML="<imgsrc='cc_error.gif'/>姓名不得為空！"; returnfalse; }else{ usernamespan.innerHTML=""; returntrue; } } functionvalidate(){ varusernameflag=checkusername(); varpassword=checkpassword(); if(usernameflag&&password){ returntrue; }else{ returnfalse; } } 2.提交前執(zhí)行校驗函數(shù)

<formonsubmit="returnvalidate()">腳本控制HTML元素<html><head><scriptlanguage="javascript">functionmyClick(){

sp.style.background="red";

sp.style.color="green";}</script></head><body><spanid="sp">大家好</span><br><br><inputtype="button"value="按鈕"onclick="myClick();"/></body></html>框架控制1-示例代碼<html><head><scriptlanguage="javascript">functionmyLoad(){window.frames[1].location.href="";}</script></head><framesetcols="180,*"frameborder="1"onload="myLoad();"><framesrc=""name="leftFrame"/><framesrc=""name="rightFrame"/></frameset></html>框架控制2-效果控制框架實現(xiàn)如下圖效果:document.getElementById(“”);框架控制2-效果<script>functionresize(){ varsp=document.getElementById("sp"); varlefttd=document.getElementById("lefttd"); alert(lefttd.style.display); if(lefttd.style.display=="none"){ lefttd.style.display="block"; }else{ lefttd.style.display="none"; } }</script>控制成生樹狀菜單-效果控制HTML標(biāo)記屬性,效果如下;將用到標(biāo)記屬性:XX.style.display=“none”;document.getElementById(“”);functionchange(tid,length){ for(vari=0;i<length;i++){ vare=document.getElementById(tid+"_"+i); if(e.style.display=="none"){ e.style.display="block"; }else{ e.style.display="none"; } } }

溫馨提示

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

最新文檔

評論

0/150

提交評論