JAVA多媒體03JavaScript.pptVIP

JavaScript,本章目標(biāo),javascript的基本語(yǔ)法 自定義對(duì)象 Javascript內(nèi)建對(duì)象 文檔對(duì)象模型 Javascript的各類事件,什么是 JavaScript,1. JavaScript 是一種解釋型的、基于對(duì)象的腳本語(yǔ)言。 2. JavaScript 是一種寬松類型的語(yǔ)言。寬松 類型意味著您不必顯式定義變量的數(shù)據(jù) 類型。 3. JavaScript程序是語(yǔ)句的集合。,JavaScript作為客戶端程序嵌入網(wǎng)頁(yè),使用Script標(biāo)記 使用外部文件 在事件處理程序中使用JavaScript 在body即正文部分使用,Javascript使用方法示例, document.writeln(“hello world”); ,引用外部腳本,Head節(jié)定義,BODY內(nèi)使用,Javascript轉(zhuǎn)義符,轉(zhuǎn)義符是指將那些特殊的字符符號(hào)在javascript中表示。 b 退格 t 制表符 f 換頁(yè)符 n 換行符 r 回車符(Enter) 符號(hào) “ “符號(hào) 符號(hào),Javascript數(shù)據(jù)類型,數(shù)值型number 可為整數(shù)或浮點(diǎn)數(shù) 字符串型string 用于保存文本數(shù)據(jù) 布爾型boolean 只能是True或False 對(duì)象型object 例如document、window、date等對(duì)象 函數(shù)Function 為內(nèi)置函數(shù)或用戶自定義函數(shù)。,Javascript數(shù)據(jù)類型轉(zhuǎn)換,parseInt 將字符串轉(zhuǎn)為整數(shù) parseFloat 將字符串轉(zhuǎn)為浮點(diǎn)數(shù) eval 將表達(dá)式字符串轉(zhuǎn)為表達(dá) 式的結(jié)果 X=“12.3” y=parseInt(x) y=12 X=“12.3” y=parseFloat(x) y = 12.3 X=“3*4” y=eval(x) y=12,特殊運(yùn)算符,new 構(gòu)造一個(gè)對(duì)象實(shí)例 typeof 判斷var變量的類型，返回字符串; 類型有object string number等 var s1 = “java” alert(typeof(s1) 結(jié)果：String void 執(zhí)行一個(gè)程序語(yǔ)句; 例如： void執(zhí)行,Javascript基本語(yǔ)法-變量定義,變量的定義 定義變量不能以數(shù)字符號(hào)開(kāi)并沒(méi)有 變量名稱不能與保留字相同。例如for,new,if,else等。,Javascript基本語(yǔ)法-運(yùn)算符號(hào),賦值運(yùn)算 =，+=, 算術(shù)運(yùn)算 +,-，*，/，%(取余) 邏輯運(yùn)算 &,| 關(guān)系運(yùn)算 =,!=,=,Javascript基本語(yǔ)法語(yǔ)句語(yǔ)法,單向選擇結(jié)構(gòu) if(條件) 語(yǔ)句; 雙向選擇結(jié)構(gòu) if()else 多向選擇結(jié)構(gòu) switch(表達(dá)式) case 條件1： 語(yǔ)句1 break; default： 語(yǔ)句 ,Javascript基本語(yǔ)法語(yǔ)句語(yǔ)法,循環(huán)結(jié)構(gòu)： 記數(shù)循環(huán)for(I=1;I); ,Javascript語(yǔ)法函數(shù)定義和參數(shù)傳遞,函數(shù)的基本編寫(xiě)格式： Function subname() 不傳遞參數(shù)function subname() 傳遞參數(shù) function subname(p1) 傳遞多個(gè)參數(shù) function subname(p1,p2) 返回值 function subname(p1)return p; 如：function subname(x) if (x96 ,Javascript語(yǔ)法數(shù)組的定義和使用,定義數(shù)組 一維數(shù)組： var a = new Array(19) var a = new Array()可以改變數(shù)組的大小。 Var a = new Array(1,2,3,4,5) Var a = new Array(“a”,”b”,”c”) 通過(guò)ai來(lái)訪問(wèn)數(shù)組中的元素。,Javascript語(yǔ)法數(shù)組屬性或方法,例如： var aryA = new Array(1,8,4); alert(aryA.length); aryA.sort();,Javascrit語(yǔ)法-對(duì)象的類別,客戶端對(duì)象：navigator：代表瀏覽器本身對(duì)象 window：代表瀏覽器窗口的對(duì)象 核心對(duì)象： String：字符串對(duì)象 Array：數(shù)組對(duì)象 Date：日期對(duì)象 Math：數(shù)學(xué)函數(shù)對(duì)象 Number：數(shù)字對(duì)象 Function：函數(shù)對(duì)象 服務(wù)端對(duì)象：Request：要求對(duì)象用于接收客戶端的要求。 File：文件對(duì)象，用來(lái)讀取或?qū)懭胛募?服務(wù)器 SendMail：傳送郵件對(duì)象,Javascript語(yǔ)法對(duì)象-對(duì)象的定義和使用,String 字符串對(duì)象 Math數(shù)學(xué)對(duì)象 Number數(shù)字對(duì)象 Date日期對(duì)象 Array數(shù)組對(duì)象 內(nèi)建函數(shù)(內(nèi)建全局對(duì)象),String對(duì)象方法和屬性,例如：var str = examples; alert(str.length);,String對(duì)象方法和屬性,Str=“abcdeabc” X1=str.substr(2,5) 結(jié)果：cdeab X2=str.substring(2,5) 結(jié)果：cde X3=str.indexOf(“c”) 結(jié)果：2,Array數(shù)組對(duì)象,例如： var aryA = new Array(1,8,4); alert(aryA.length); aryA.sort();,Math數(shù)學(xué)對(duì)象,例如： alert(Math.pow(2,3); alert(Math.round(4.5);,Date日期對(duì)象,例如： var today = new Date; var second = new Date(05,1,1) /2005-01-01 alert(today.toLocaleString();,全局對(duì)象-全局函數(shù),內(nèi)部數(shù)組,Forms /屬于document 在程序中使用多表單時(shí),建立該數(shù)組。 Elements /屬于form 在一個(gè)窗口中使用幾個(gè)元素時(shí),建立該數(shù)組。 Frames /屬于window 建立框架時(shí),使用該數(shù)組 Document.forms0.elements0表示每一表單窗體中的第一個(gè)元素。,文檔對(duì)象模型,最低公用標(biāo)準(zhǔn)的文檔對(duì)象層次,window 對(duì)象,Window 對(duì)象表示瀏覽器的窗口，可用于檢索有關(guān)窗口狀態(tài)的信息。 屬性 document event history location screen name status 狀態(tài)欄信息 opener 返回打開(kāi)本窗口的窗口對(duì)象 top/self/parent/frames 多框架下的window對(duì)象屬性,多框架下window對(duì)象間關(guān)系,多框架下window對(duì)象間關(guān)系,框架之間的關(guān)系： Parent 表示上一層框架 Top 表示最上層框架 Self 表示目前所在的框架,Frame0 Frame1 Frame2 Top.frames2.frame1.location.href=“www.baidu.tw”;,window對(duì)象方法,方法 alert confirm prompt blur close focus navigate(url) moveBy(水平偏移，垂直偏移)/moveTo(橫坐標(biāo)x，縱坐標(biāo)y) scrollBy(水平偏移，垂直偏移)/scrollTo(x，y) resizeBy(水平,垂直)/resizeTo(長(zhǎng)度,寬度) setTimeout(執(zhí)行動(dòng)作，毫秒數(shù)) /clearTimeout() setInterval(執(zhí)行動(dòng)作，毫秒數(shù))/clearInterval() open(url,name,feture) showModalDialog(url,argumentParam,feture) showModelessDialog(url,argumentParam,feture),模式窗口和非模式窗口,showModalDialog(url, dialogArguments，features ) 參數(shù)1: 網(wǎng)頁(yè)地址；參數(shù)2:設(shè)定傳給新視窗網(wǎng)頁(yè)的參數(shù)； 參數(shù)3：對(duì)話框顯示參數(shù); showModallessDialog(url, dialogArguments，features ),說(shuō)明： 1、在dialog窗口內(nèi)，使用window.dialogArguments參數(shù)獲取由調(diào)用窗口傳入的數(shù)據(jù) 2、可以通過(guò)dialog窗口的window對(duì)象中returnValue將數(shù)據(jù)返回給調(diào)用dialog者,document 對(duì)象,Document 對(duì)象表示給定瀏覽器窗口中的 HTML 文檔，用于檢索有關(guān)該文檔的信息。 屬性 alinkColor bgColor body fgColor linkColor location title URL vlinkColor cookie 方法 clear close open write writeln,history對(duì)象,此對(duì)象提供客戶最近訪問(wèn)過(guò)的 URL 列表。 屬性 length 歷史項(xiàng)數(shù) 方法 back() 后退 forward() 前進(jìn) go() 到哪一頁(yè),location 對(duì)象,此對(duì)象包含有關(guān)當(dāng)前 URL 的信息，它提供了重新加載窗口的當(dāng)前 URL 的方法。 屬性 hash 指Book Mark”#”后面的字符串 pathname指主機(jī)后面的字符串，包含斜線，不包含問(wèn)號(hào)后面的參數(shù)字符串 hostname 指主機(jī)和端口字符串 href 目前網(wǎng)頁(yè)的URL字符串包含問(wèn)號(hào)后面的參數(shù) port 端口號(hào)字符串 search 指URL問(wèn)號(hào)后面的參數(shù)字符串，包含”？” 方法 assign(url) 如同設(shè)定window.location.href的值 reload() 重新裝載當(dāng)前頁(yè) replace(url) 代替原來(lái)的URL， 而且此URL不會(huì)存入history對(duì)象里,screen對(duì)象,navigator對(duì)象,event對(duì)象,文檔節(jié)點(diǎn)模型遍歷,-文檔節(jié)點(diǎn)的方法和屬性： all 返回對(duì)象所包含的元素集合的引用 children 獲取作為對(duì)象直接后代的HTML對(duì)象的集合 firstChild 獲取集合節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)對(duì)象 nextSibling 獲取該節(jié)點(diǎn)的下一個(gè)同級(jí)節(jié)點(diǎn)對(duì)象 previousSibling獲取該節(jié)點(diǎn)的上一個(gè)同級(jí)節(jié)點(diǎn)對(duì)象 attributes 獲取對(duì)象標(biāo)簽屬性的集合 nodeName 節(jié)點(diǎn)名稱即標(biāo)簽名 nodeType 節(jié)點(diǎn)類型(1-標(biāo)簽 2-屬性 3-文字節(jié)點(diǎn)) innerHTML 內(nèi)部HTML字符串 outerHTML 外部HTML字符串,文檔節(jié)點(diǎn)的增刪改,-在文檔的基礎(chǔ)上- createElement(String) createAttribute(String) createTextNode(String) -在任意結(jié)點(diǎn)- appendChild(Node) removeChild(Node) replaceChild(Node,Node) setAttributeNode(Attr) removeAttributeNode(String) setAttribute(String attribName,Value) getElementsByTagName(String) /通過(guò)標(biāo)簽名獲取節(jié)點(diǎn)集合 getElementsById(String) /通過(guò)id獲取節(jié)點(diǎn)集合 getElementsByName(String) ,JavaScript事件,onclick onchange onfocus 獲得焦點(diǎn) onblur 失去焦點(diǎn) onmouseover/onmouseout/onmousedown/onmouseup onload/onupload onsubmit oncontextmenu onkeydown/onkeypress/onkeyup,onClick事件示例, 請(qǐng)輸入表達(dá)式： 結(jié)果： ,onChange事件示例, function checkNum(num) if (num = “) alert(“請(qǐng)輸入一個(gè)數(shù)字值“); return false; if (isNaN (num) alert(“請(qǐng)輸入一個(gè)數(shù)字值“); return false; else alert (“謝謝！“); 請(qǐng)輸入一個(gè)數(shù)字： ,onFocus/onBlur事件示例,onMouseOver/onMouseOut事件示例, var num =0; function showLink(num) if (num=1) document.forms0.elements0.value= “您選擇了Aptech“; if (num=2) document.forms0.elements0.value = “您選擇了Asset“; if (num=3) document.forms0.elements0.value = “您選擇了Arena“; Aptech Asset Arena ,onLoad事件示例, 您好 function hello() alert(“您好“); ,事件綁定方法,綁定元素屬性 綁定對(duì)象屬性(ie3+,nn3+) btnOK.onclick = newopen; 綁定 標(biāo)識(shí)(ie4+) newopen(); ,捕獲用戶按鍵事件, function keydown() alert(window.event.keyCode); window.event.keyCode = 0; window.event.returnVal