JavaScript 對象.ppt

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