JavaScript 對(duì)象.ppt

1 JavaScript對(duì)象 2 JavaScript的對(duì)象 Array 屬性 length 它指明了數(shù)組的長(zhǎng)度 方法 join 將數(shù)組值連接變?yōu)橐粋€(gè)字符串 reverse 將數(shù)組值倒序 sort 將對(duì)數(shù)組值進(jìn)行排序 AAA newArray 3 AAA 0 B AAA 1 A AAA 2 C document write AAA length document write AAA join document write AAA reverse join document write AAA sort join 3 JavaScript的對(duì)象 String 屬性 length屬性表明字符串長(zhǎng)度 方法字符串的轉(zhuǎn)換 toUpperCase 將字符串所有字符轉(zhuǎn)為大寫 toLowerCase 將字符串所有字符轉(zhuǎn)為小寫 toString 將非字符串對(duì)象顯示轉(zhuǎn)化為字符串 4 JavaScript的對(duì)象 String 屬性 length屬性表明字符串長(zhǎng)度 方法字符串的處理 substring 將括號(hào)中參數(shù)所指的字符串片段返回 charAt 返回括號(hào)中指定位置字符串的內(nèi)容 split 根據(jù)指定的分隔符把一個(gè)字符串劃分為一個(gè)字符串?dāng)?shù)組 如 newstring astring substring index1 index2 5 JavaScript的對(duì)象 Date 屬性 無(wú)方法 a 設(shè)定日期setDate setMonth setYear setTime 設(shè)定時(shí)間1970 1 1開(kāi)始用毫秒數(shù)來(lái)計(jì)時(shí) b 日期格式轉(zhuǎn)換 Date UTC 返回一個(gè)通用時(shí)間 距1970年1月1日午夜的毫秒 c 獲取日期 Date getDate Date getMonth Date getYear Date parse Date getDay d 處理時(shí)區(qū) toGMTString 將日期時(shí)間值轉(zhuǎn)換為的字符串 GMT時(shí)間 tolocaleString 將日期時(shí)間值轉(zhuǎn)換為的字符串 當(dāng)?shù)貢r(shí)間 6 JavaScript的對(duì)象 Math 屬性 E 為自然對(duì)數(shù)的底 約為2 718 PI 為圓周率 約為3 14159 方法 abs 絕對(duì)值計(jì)算 pow 數(shù)的冪 sqrt 計(jì)算平方根 cos sin tan acos asin atan 7 JavaScript的屏幕對(duì)象 顯示器 screen 各種相關(guān)特征涵義參數(shù)舉例說(shuō)明screen height屏幕高度screen width屏幕寬度screen availHeight屏幕可見(jiàn)高度screen availWidth屏幕可見(jiàn)寬度screen colorDepth色深8 16 32位顏色 8 JavaScript事件模型 事件 用戶對(duì)網(wǎng)頁(yè)的一些特定 操作 這些操作通常直接對(duì)應(yīng)鼠標(biāo)的動(dòng)作 和系統(tǒng)行為 例如加載一張網(wǎng)頁(yè) 點(diǎn)擊一個(gè)超鏈等 事件處理程序的引入 如何使一段JavaScript程序和事件的發(fā)生聯(lián)系起來(lái) on事件名 是JavaScript規(guī)定的對(duì)應(yīng)事件處理程序柄 eventhandler 的名字 例如onClick onfocus onSubmit等等 9 JavaScript事件模型 續(xù) 第一種引入方式 事件處理程序柄名以屬性名的形式在HTML文本中某些適當(dāng)?shù)臉?biāo)記中出現(xiàn) 而對(duì)應(yīng)的屬性值是由網(wǎng)頁(yè)編寫者提供的JavaScript程序段 或事件處理函數(shù)名 第二種引入方式 將事件處理函數(shù)名賦給瀏覽器為網(wǎng)頁(yè)創(chuàng)建的相應(yīng)對(duì)象的對(duì)應(yīng)屬性 property document forms 0 age onchange isNumber 10 JavaScript事件模型 續(xù) 例 讓事件處理程序作為 屬性值 這里 事件處理程序柄的名字是大小寫不敏感的 這與HTML文本中對(duì)標(biāo)記的屬性名的松散要求是一致的 OnLoad在網(wǎng)頁(yè)完全加載完后執(zhí)行 即包括圖像 applet等 OnUnLoad在網(wǎng)頁(yè)退出之前執(zhí)行 11 在瀏覽器中使用 12 1 代表瀏覽器器所打開(kāi)的窗口 2 通常代表目前正在使用 focus 的窗口 3 如果打開(kāi)多個(gè)瀏覽器窗口時(shí) 可以利用別名 alias 來(lái)區(qū)別它們 如 ex opener parent self window top 窗口對(duì)象 Windowobject 13 窗口對(duì)象 窗口對(duì)象是JavaScript對(duì)象的主要對(duì)象之一 而窗口對(duì)象中最常用的以下幾種 opener對(duì)象 self對(duì)象 parent對(duì)象 top對(duì)象 history歷史對(duì)象 14 opener對(duì)象和self對(duì)象 opener對(duì)象可以用于確定open方法打開(kāi)窗口的源窗口 self對(duì)象實(shí)際上代表的是窗口自身 是用于對(duì)窗口對(duì)象自身的一些屬性進(jìn)行控制 下面看一個(gè)opener和self對(duì)象的使用示例 下例將用一個(gè)父窗口打開(kāi)一個(gè)子窗口 然后在子窗口中設(shè)置兩個(gè)鏈接 用以改變父窗口的背景色 將主窗口的代碼保存為main html 而將子窗口的代碼保存為sub html 主窗口main htmlqueryWin open sub html height 100width 150 在主窗口用open方法打開(kāi)文件sub html作為子窗口 其中高度為100 寬度用默認(rèn)值 15 子窗口sub htmlfunctionpassToOpener color opener document bgColor color self close 請(qǐng)選擇你喜歡的顏色 藍(lán)色紅色 改變父窗口的顏色 關(guān)閉子窗口 調(diào)用改變父窗口顏色的函數(shù) 16 parent對(duì)象 parent對(duì)象僅僅是對(duì)子窗口有意義 也就是說(shuō) 窗口不是頂層窗口 parent的屬性請(qǐng)大家參考框架的框架集窗口 這一點(diǎn)我們以后還會(huì)講到 一個(gè)框架集內(nèi)的子窗口可以使用parent frameName來(lái)查訪它的兄弟窗口 比如 一個(gè)框架集中的第四個(gè)窗口有一個(gè)屬性name homeFrame 那么它的兄弟窗口可以通過(guò)使用parent homeFrame或者parent frames 3 去訪問(wèn)它 17 top對(duì)象 top對(duì)象是頂層窗口的同義詞 可以通過(guò)使用top close 將頂層窗口關(guān)閉 可以通過(guò)使用top length來(lái)得到頂層窗口中含有的框架個(gè)數(shù) 18 窗口對(duì)象使用語(yǔ)法 window 特性window 方法 參數(shù)群 self 特性 self代表目前window或frame名稱self 方法 參數(shù)群 top 特性 top代表最頂層的窗口top 方法 參數(shù)群 parent 特性 parent代表目前框架的父框架parent 方法 參數(shù)群 窗口名稱 特性窗口名稱 方法 參數(shù) 特性方法 參數(shù) 19 closed 說(shuō)明窗口是否已經(jīng)關(guān)閉defaultStatus 瀏覽器底部預(yù)設(shè)的狀態(tài)列訊息length 窗口重的框架個(gè)數(shù)Frame 窗口中的frameframes 窗口中的frame數(shù)組name 窗口的名稱opener 打開(kāi)該窗口的窗口名稱status 瀏覽器底部自行設(shè)定的狀態(tài)信document 窗口中的document對(duì)象history 窗口history對(duì)象location 窗口對(duì)象的對(duì)象中的location對(duì)象 窗口對(duì)象的屬性 20 alert 顯示警告訊息confirm 顯示確認(rèn)訊息prompt 顯示提示訊息focus 成為焦點(diǎn)blur 移開(kāi)焦點(diǎn) 成為背景處理 open 打開(kāi)新瀏覽窗口close 開(kāi)關(guān)已打開(kāi)的瀏覽窗口eval 執(zhí)行引數(shù)運(yùn)算式計(jì)算 窗口對(duì)象的方法 21 resizeBy x y 將窗口尺寸向X軸及Y軸調(diào)整moveBy x y 將窗口向X軸及Y軸移動(dòng)scroll x y 卷動(dòng)至指定的座標(biāo)print 列印指定之窗口內(nèi)容setTimeout 設(shè)定一定時(shí)程序 計(jì)時(shí)器 clearTimeout 撤銷一定時(shí)程序 計(jì)時(shí)器 toString 傳回字串表示值valueOf 傳回?cái)?shù)值表示值 窗口對(duì)象的方法 22 functiongrow window resizeBy 50 50 functionshrink window resizeBy 50 50 將窗口放大與縮小 范例 自動(dòng)放大窗口 23 打開(kāi)新窗口對(duì)象的語(yǔ)法 窗口對(duì)象名稱 Window open URL 新窗口名稱 窗口的規(guī)格 窗口對(duì)象名稱 用以使用窗口對(duì)象的特性與方法 ex 窗口對(duì)象名稱 close窗口名稱 用以識(shí)別該窗口 ex 24 窗口對(duì)象范例 打開(kāi)與開(kāi)關(guān)窗口 25 functiongrow window resizeBy 0 150 functionshrink window resizeBy 0 150 廣告頁(yè)here 窗口對(duì)象范例 動(dòng)態(tài)調(diào)整廣告頁(yè)大小 26 使用Timer的語(yǔ)法 1 Timer又稱為計(jì)時(shí)器或延遲器 常用來(lái)指定于特定時(shí)間后執(zhí)行某程式 2 時(shí)間單位為毫秒 千分之一秒 ex 3000milliseconds 3seconds window setTimeout 欲執(zhí)行的程序或函數(shù) 設(shè)定的時(shí)間 27 使用Timer的語(yǔ)法 二 如果利用循環(huán)將計(jì)時(shí)器設(shè)計(jì)成重復(fù)執(zhí)行 欲終止計(jì)時(shí)器執(zhí)行 請(qǐng)使用此一格式 因?yàn)橐K止計(jì)時(shí)器的執(zhí)行 必須指定欲終止的計(jì)時(shí)器名稱 計(jì)時(shí)器對(duì)象名稱 window setTimeout 欲執(zhí)行的代碼或函數(shù) 設(shè)定的時(shí)間 28 終止循環(huán)內(nèi)Timer的語(yǔ)法 終止計(jì)時(shí)器的執(zhí)行 必須指定欲終止的計(jì)時(shí)器名稱 window clearTimeout 計(jì)時(shí)器對(duì)象名稱 29 functiontimer setTimeout alert 3秒到了 3000 窗口對(duì)象范例 timer 1 30 varcounter 0setTimeout upDate 3000 三秒鐘后呼叫upDate functionupDate counter status 第 counter 次載入 timer1 setTimeout upDate 3000 窗口對(duì)象范例 timer 2 31 歷史對(duì)象 historyobject history對(duì)象是用來(lái)存儲(chǔ)客戶端訪問(wèn)過(guò)的URL資料 這些歷史記錄是以串列 list 的方式存儲(chǔ) 各大瀏覽器均提供檢視history工具ex IE 檢視 移至NC 前往 go 32 歷史對(duì)象的使用語(yǔ)法如下 history 特性history 方法 參數(shù)群 length history對(duì)象中URL個(gè)數(shù)back 載入歷史對(duì)象中上一個(gè)URLforward 載入歷史對(duì)象中下一個(gè)URLgo 載入指定的URL 歷史對(duì)象的使用語(yǔ)法 33 窗口對(duì)象范例 history 34 location位置對(duì)象 location位置對(duì)象 用來(lái)代表特定窗口的URL信息 URL的格式 protocol host port path hash searchURL的種類主要有 http file ftp mailto news location位置對(duì)象的屬性說(shuō)明 35 location位置對(duì)象的方法 比如 要實(shí)現(xiàn)當(dāng)按下一個(gè)按鈕后前往網(wǎng)易網(wǎng)站 那么使用下面的代碼 36 with document write 重新載入此頁(yè) write 前往SeedNet方法一 write 前往SeedNet方法二 link tw write 前往SeedNet方法三 前往SeedNet方法四 窗口對(duì)象范例 location 1 37 前往SeedNet方法五前往SeedNet方法六前往SeedNet方法七 窗口對(duì)象范例 location 2 38 框架對(duì)象 框架對(duì)象 是在同一屏幕上顯示多個(gè)互不干涉的可滾動(dòng)框架的窗口 frames屬性 是由源文件中含有Frameset的Frame標(biāo)簽創(chuàng)建的子框架的對(duì)象構(gòu)成的數(shù)組 可以通過(guò)框架數(shù)組來(lái)查詢窗口中的子框架 如果一個(gè)窗口含有三個(gè)名字分別為fr1 fr2和fr3的子框架 那么可以用下面的方法查詢它們 parent frames fr1 parent frames fr2 parent frames fr3 或者用 parent frames 0 parent frames 1 parent frames 2 length屬性 可以使用窗口的length屬性來(lái)查詢框架中的子框架的數(shù)量 39 Document對(duì)象 40 1 代表目前的文件信息 2 直接對(duì)應(yīng)至HTML的Body標(biāo)簽 文檔對(duì)象 Documentobject 41 document 特性document 方法 參數(shù)群 bgColor 相當(dāng)于HTML的BGCOLORalinkColor 相當(dāng)于HTML的ALINKlinkColor 相當(dāng)于HTML的LINKvlinkColor 相當(dāng)于HTML的VLINKfgColor 相當(dāng)于HTML的TEXTtitle 相當(dāng)于HTML的lastModified 最近更新日期URL 文件的URL 文檔對(duì)象的使用語(yǔ)法 42 DocumentAnchorAppletAreaImageFormLink 文檔對(duì)象的對(duì)象階層圖 43 document write 本頁(yè)最后更新日期 document write document lastModified 文檔對(duì)象范例 最近更新時(shí)間 44 Form對(duì)象 45 1 用于定義表單 提供使用者輸入資料 2 包含許多控制類型 3 直接對(duì)應(yīng)至HTML的表單元件 表單對(duì)象 Formobject 46 FormButtonCheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea 表單對(duì)象的對(duì)象階層圖 47 表單名稱 特性表單名稱 方法 參數(shù)群 forms 索引值 特性forms 索引值 方法 參數(shù)群 表單對(duì)象的使用語(yǔ)法 48 action ACTION屬性設(shè)定值elements 以陣列代表表單內(nèi)所有元件encoding 使用POST傳送時(shí)之編碼方式length 表單內(nèi)元件個(gè)數(shù)method 指定傳送方式 POST GET target 將執(zhí)行結(jié)果于特定窗口內(nèi)執(zhí)行 表單對(duì)象的特性 49 表單對(duì)象可使用的方法如下 reset 模擬按下reset按鈕的動(dòng)作submit 模擬按下submit按鈕的動(dòng)作toString 傳回字串表示值 表單對(duì)象的方法 50 顯示一個(gè)可供輸入的域 可使用的事件處理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 本文對(duì)象 Textobject 51 type text 類型為本文name tel Text名稱value 03 4257387 初始值size 20 Text大小title 提示值 提示值A(chǔ)ccessKey L 快捷鍵值maxlength 10 可輸入資料長(zhǎng)度readonly 指定成為只讀屬性 本文對(duì)象相關(guān)參數(shù) 52 文本對(duì)象的對(duì)象特性 defaultValue 該元件預(yù)設(shè)值type 該元件類型name 該元件識(shí)別名稱value 該元件目前輸入值 53 1 顯示一個(gè)可供選擇 單選 的按鈕 2 ON表示確認(rèn) OFF表示不確認(rèn) 可使用的事件處理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 單選按鈕對(duì)象 Radioobject 54 type radio 類型為圓鈕name sex 名稱為sexvalue boy 傳送值為boychecked 設(shè)定為預(yù)設(shè)選項(xiàng) 單選按鈕對(duì)象相關(guān)參數(shù) Inputtype radioname sexvalue boychecked 55 性別 男生女生functionSEX if document form1 elements 0 checked sex 男生 elsesex 女生 alert 性別是 sex 表單對(duì)象范例 radio 56 1 顯示一個(gè)可供選擇的復(fù)選框 2 ON表示確認(rèn) OFF表示不確認(rèn) 可使用的事件處理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 復(fù)選對(duì)象 Checkboxobject 57 type checkbox 類型為確認(rèn)方塊name hobby 名稱value music 傳送值checked 設(shè)定為預(yù)設(shè)選項(xiàng) 復(fù)選按鈕對(duì)象相關(guān)參數(shù) Inputtype checkedname hobbyvalue music 58 1 顯示一個(gè)可供輸入密碼的輸入框 2 利用 隱藏所輸入的資料 可使用的事件處理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 密碼對(duì)象 passwordobject 59 type password 類型為密碼name password 名稱value 1234 初始值size 20 大小maxlength 10 可輸入資料長(zhǎng)度 密碼對(duì)象相關(guān)參數(shù) Inputtype passwordname pw 60 輸入密碼 重新輸入 functioncheckPw if document form1 pw1 value document form1 pw2 value alert 兩組密碼不符 請(qǐng)重新輸入 elsealert OK 表單對(duì)象范例 password 1 61 密碼對(duì)象的對(duì)象特性 defaultValue 該元件預(yù)設(shè)值type 該元件類型name 該元件識(shí)別名稱value 該元件目前輸入值 62 functioncheckPwLgh index str if str length 9 alert 你只輸入 str length 位數(shù) n請(qǐng)輸入9位數(shù)密碼 document form1 elements index value document form1 elements index focus functioncheckRetype if document form1 pw value document form1 retypePw value alert 兩組密碼不符 請(qǐng)重新輸入 document form1 retypePw value document form1 retypePw focus elsealert 密碼檢查作業(yè)完成 表單對(duì)象范例 password 2 63 輸入密碼 重新輸入 表單對(duì)象范例 password 2 64 提供一個(gè)隱藏域 用以儲(chǔ)存特殊資料值 以供運(yùn)算或參考 隱藏對(duì)象 hiddenobject 65 type hidden 類型為隱藏name dummy 對(duì)象名稱value 1234 元件初始值 隱藏對(duì)象相關(guān)參數(shù) Inputtype hiddenname dummyvalue 1234 66 提供一組選單 供使用者選擇 可使用的事件處理程序 onBlur onChange onFocusonClick onDblClick 選擇對(duì)象 selectobject 67 name week 名稱size 3 下拉框大小multiple 設(shè)定為可多選option 定義選擇的內(nèi)容selected 預(yù)選項(xiàng)目value 定義傳送值 選擇對(duì)象相關(guān)參數(shù) 68 SundayMondayTuesdayWednesdayThursdayFridaySaturday 表單對(duì)象范例 select 1 69 選擇對(duì)象的對(duì)象特性 type 該元件類型name 該元件識(shí)別名稱value 該元件目前輸入值selectedIndex 選項(xiàng)的索引值length 選項(xiàng)個(gè)數(shù)options 選項(xiàng)數(shù)組 70 url newArray 2 url 0 tw url 1 functionjumpPage form i form menu selectedIndex if i 0 window location href url i 1 選擇ISP SeednetHinet 表單對(duì)象范例 select 2 71 functioncreateOptions varoption newOption document form1 select1 value document form1 select2 options 2 option 可選擇項(xiàng)目 香蕉芭樂(lè)蘋果梨子 下頁(yè)續(xù) 表單對(duì)象范例 動(dòng)態(tài)選單 72 接上頁(yè) onClick createOptions 選擇項(xiàng)目 表單對(duì)象范例 動(dòng)態(tài)選單 73 提供一個(gè)按鈕 供觸發(fā)事件之用 可使用的事件處理程序 onBlur onClick onFocus 按鈕對(duì)象 buttonobject 74 type button 類型為按鈕name button1 按鈕名稱value 請(qǐng)按我 按鈕面顯示值title 送至服務(wù)器 提示值tabindex 0 定位順序disabled 使失效 按鈕對(duì)象相關(guān)屬性 75 按鈕對(duì)象的對(duì)象特性 type 該元件類型name 該元件識(shí)別名稱value 該按鈕面顯示值disabled 該元件生效否 76 動(dòng)態(tài)設(shè)定按鈕的顯示字樣 請(qǐng)輸入 表單對(duì)象范例 button 77 表單對(duì)象范例 button 78 用以將表格內(nèi)資料送至服務(wù)器之用 可使用的事件處理程序 onBlur onClick onFocus另外可在Form標(biāo)簽內(nèi)搭配使用onSubmit 提交對(duì)象 submitobject 79 type submit 類型為呈送鈕name submit1 按鈕名稱value 提交 提交鈕表面顯示值 提交對(duì)象相關(guān)參數(shù) Inputtype submitname submit1value 送出 80 提交對(duì)象的對(duì)象特性 type 該元件類型Name 該元件識(shí)別名稱value 該按鈕面顯示值 81 functionis