Web 前端開發(fā)技術 教案 項目九 JavaScript 對象_第1頁
Web 前端開發(fā)技術 教案 項目九 JavaScript 對象_第2頁
Web 前端開發(fā)技術 教案 項目九 JavaScript 對象_第3頁
Web 前端開發(fā)技術 教案 項目九 JavaScript 對象_第4頁
Web 前端開發(fā)技術 教案 項目九 JavaScript 對象_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Web前端開發(fā)技術教案設計項目課題JavaScript對象授課時間授課對象大學生學習目標1.掌握對象創(chuàng)建和訪問的方法。2.掌握各內置對象的屬性和方法。3.掌握DOM和BOM中各對象的常用屬性和方法。學習重點掌握各內置對象的屬性和方法。學習難點掌握DOM和BOM中各對象的常用屬性和方法。教學方法講授法、課堂演示法教學用具多媒體課件教學流程教學環(huán)節(jié)教學內容教學過程任務一對象概念對象是一種復合的數(shù)據(jù)類型,包括屬性和方法兩個基本要素。屬性實現(xiàn)對象相關信息的存儲,一般與變量相關聯(lián);方法實現(xiàn)對象的特定操作,一般與函數(shù)代碼相關聯(lián)。JavaScript支持基于對象的編程。JavaScript中包括內置對象和宿主對象。內置對象是ECMAScript標準中定義的類型;宿主對象是機器環(huán)境提供的類型,包括DOM(DocumentObjectModel,文檔對象模型)和BOM(BrowserObjectModel,瀏覽器對象模型)。用戶也可以創(chuàng)建自定義對象。對象是一種抽象的數(shù)據(jù)類型。一般需要先創(chuàng)建對象實例,再訪問對象實例的屬性和方法。但JavaScript中有少數(shù)內置對象,不需要創(chuàng)建實例即可直接訪問對象的屬性。一、創(chuàng)建對象實例在JavaScript中,創(chuàng)建對象實例的方法有以下3種。1.創(chuàng)建Object對象的實例Object是系統(tǒng)內置對象,可以使用new運算符創(chuàng)建Object對象的實例,其基本語法格式如下。Var對象實例名=newObject();2.創(chuàng)建已有對象的實例JavaScript中有許多內置對象,用戶可以先創(chuàng)建自定義類型的對象,然后使用new運算符創(chuàng)建對象的實例,其基本語法格式如下。var對象實例名=new已有對象名();3.采用列表賦值創(chuàng)建對象的實例直接采用列表賦值的方式創(chuàng)建自定義對象的實例,并設置對象實例的屬性、屬性值、方法和方法函數(shù),其基本語法格式如下。var對象實例名={屬性:屬性值,……方法:方法函數(shù),……}二、對象實例的屬性創(chuàng)建對象實例后,可以訪問對象實例的屬性,包括設置和引用屬性值。對象實例的屬性具有屬性下標和屬性名。訪問對象實例的屬性有3種形式,其基本語法格式如下。對象實例名.屬性名對象實例名[屬性下標]對象實例名["屬性名"]三、對象實例的方法創(chuàng)建對象實例后,可以訪問對象實例的方法,包括設置方法的函數(shù)和運行方法。1.設置對象實例的方法設置對象實例的方法有兩種,一種是在創(chuàng)建對象實例時設置,另一種是在對象實例創(chuàng)建完成后通過賦值設置,其基本語法格式如下。var對象實例名={……方法:函數(shù),……}或者對象實例名.方法名=函數(shù);2.運行對象實例的方法運行對象實例的方法實質上是關聯(lián)了一個函數(shù)代碼,它同調用函數(shù)一樣,其基本語法格式如下。對象實例名.方法名(參數(shù));四、with語句圍當多次訪問對象實例的屬性和方法時,需要重復引用對象實例名,語句會比較煩瑣。因此,可以用with語句,修改語句的作用域,減少大量重復的輸入,其基本語法格式如下。with(對象實例名){語法塊;}五、this關鍵字在JavaScript中,由于對象實例的引用是多層次的,容易造成混亂,因此可以采用this關鍵字表示當前的對象實例。例如,下面的語句表示在定義對象實例student時,用this.age表示引用當前對象實例student的age屬性。varstudent={age:"12",show:function(){returnthis.age;}}任務二內置對象一、Global對象Global對象又稱為全局對象,其包含的屬性和方法可以應用于所有JavaScript內置對象。1.Global對象的常用屬性在Global對象的屬性中,Infinity表示正無窮大;-Infinity表示負無窮大;NaN表示非數(shù)值;undefined表示未聲明或未賦值的變量。2.Global對象的常用方法二、Web相關概念RegExp對象是正則表達式對象,用于生成描述字符串匹配規(guī)則的正則表達式。正則表達式的語法包括匹配模式和搜索模式兩部分,其基本語法格式如下。NewRegExp(匹配模式,搜索模式)或簡寫為:/匹配模式/搜索模式1.匹配模式2.搜索模式搜索模式有g和i兩個可選值。g表示全局搜索,搜索時將匹配所有符合條件的部分;i表示匹配時忽略大小寫,若未設置則默認大小寫敏感。3.RegExp對象的方法RegExp對象實例創(chuàng)建完成后,有兩種方法用于檢索文本。三、Array(數(shù)組)對象數(shù)組對象用來存儲一系列的值。數(shù)組中的每個值稱為數(shù)組的元素,在數(shù)組中的序號稱為元素下標。在JavaScript數(shù)組中,每個元素的類型可以不一樣。1.創(chuàng)建數(shù)組對象實例在JavaScript中,創(chuàng)建數(shù)組對象實例的方法有多種,其基本語法格式如下。var數(shù)組名=newArray();//創(chuàng)建空數(shù)組var數(shù)組名=newArray(逗號分隔的數(shù)據(jù)列表);//根據(jù)數(shù)據(jù)列表值創(chuàng)建數(shù)組var數(shù)組名=newArray(元素個數(shù));//創(chuàng)建空數(shù)組,數(shù)組長度等于元素個數(shù)var數(shù)組名=[數(shù)據(jù)列表];//直接根據(jù)數(shù)據(jù)列表創(chuàng)建數(shù)組2.訪問數(shù)組對象元素數(shù)組元素下標從0開始編號。訪問數(shù)組對象實例中的某個元素,可以采用數(shù)組對象實例名[下標]的形式。訪問數(shù)組對象實例名表示訪問數(shù)組對象實例中的所有元素。3.數(shù)組對象的常用屬性length是數(shù)組對象的常用屬性,表示數(shù)組元素的個數(shù)。4.數(shù)組對象的常用方法數(shù)組對象的方法實現(xiàn)對數(shù)組的操作。四、String對象String對象包括字符串處理的屬性和方法。這些屬性和方法是字符串對象實例的屬性和方法,所以要用字符串對象實例名訪問。1.String對象的常用屬性length屬性用于獲取String對象實例中字符的個數(shù)。例如,下面的語句表示定義字符串對象實例變量x,通過length屬性獲得變量x的長度,賦值給變量y。varx="abc";y=x.length;2.String對象的常用方法String對象中有大量操作字符串的方法。五、Math對象Math對象包括數(shù)學運算的屬性和方法。1.Math對象的常用屬性訪問Math對象的屬性不需要創(chuàng)建對象實例,可以直接用對象名Math訪問。Math對象的屬性是數(shù)學運算中的一些常量。2.Math對象的常用方法訪問Math對象的方法不需要創(chuàng)建對象實例,可以直接用對象名Math訪問。Math對象的方法是一些數(shù)學運算。六、Date對象Date對象處理與日期、時間有關的內容。1.創(chuàng)建Date對象實例有4種方法可以創(chuàng)建Date對象實例,其基本語法格式如下。對象實例名=newDate();對象實例名=newDate(毫秒數(shù));對象實例名=newDate(日期時間字符串);對象實例名=newDate(年,月,日,時,分,秒,毫秒);2.Date對象的常用方法任務三DOM和BOM一、文檔對象模型DOMdocument對象是JavaScript中最為常用的對象之一,在瀏覽器對象模型中,它位于Window對象的下一層級。document對象包含一些簡單的屬性,這些屬性提供了有關瀏覽器中顯示文檔的相關信息,如該文檔的URL、文本顏色、修改日期等。另外,document對象還包含一些引用數(shù)組的屬性,這些屬性可以代表文檔中的表單、圖像、鏈接、錨和小程序。同其他對象一樣,document對象還定義了一系列的方法,使用這些方法,可以使JavaScript在解析文檔時動態(tài)地將HTML文本添加到文檔中。HTMLDOM是HTML文檔對象模型的縮寫。根據(jù)W3CDOM規(guī)范,DOM是一種與瀏覽器、平臺、語言無關的接口,使用戶可以訪問頁面中其他的標準組件。DOM與JavaScript的結合實現(xiàn)了Web網頁的行為與結構分離。簡單來說,DOM解決了Netscape的JavaScript和Microsoft的JavaScript之間的沖突,為Web設計師和開發(fā)者提供了一個處理HTML文檔的標準方法,方便他們訪問站點中的數(shù)據(jù)、腳本和表現(xiàn)層對象。1.DOM節(jié)點樹HTMLDOM定義了訪問和操作HTML文檔的標準方法。HTML文檔結構像一棵倒置的樹,其中,<html>標記就是樹的根節(jié)點,<head>和<body>標記是樹的兩個子節(jié)點。這種描述頁面標記關系的樹形結構稱為DOM節(jié)點樹(文檔樹)。2.DOM節(jié)點根據(jù)W3CDOM規(guī)范,HTML文檔中的所有內容都是節(jié)點。具體的規(guī)定如下:(1)整個文檔是一個文檔節(jié)點。(2)每個HTML元素是一個元素節(jié)點。(3)HTML元素中的文本是文本節(jié)點。(4)每個HTML屬性是一個屬性節(jié)點。(5)注釋是注釋節(jié)點。通過document對象的documentElement屬性可以獲取整個DOM節(jié)點樹上的任何一個元素。通過節(jié)點的firstChild、lastChild屬性可以獲取它的第一個和最后一個子節(jié)點。DOM規(guī)定,一個頁面內只有一個根節(jié)點,根節(jié)點是沒有父節(jié)點的,除根節(jié)點之外,其他節(jié)點都可以通過parentNode屬性來獲取自己的父節(jié)點。同一父節(jié)點下位于同一層次的節(jié)點稱為兄弟節(jié)點,一個子節(jié)點的前一個節(jié)點可以通過previousSibling屬性來獲取,后一個節(jié)點可以通過nextSibling屬性來獲取。由于不同節(jié)點對應的HTML元素不同,因此節(jié)點有不同類型。節(jié)點樹中的每個節(jié)點對象都有nodeType屬性,該屬性返回節(jié)點的類型。常用的節(jié)點類型及說明如表9-9所示。從表9-9中可以看出,如果某個節(jié)點的nodeType值為9,則說明該節(jié)點的類型為document;如果某個節(jié)點的nodeType值為1,則說明該節(jié)點的類型為element。不同類型的節(jié)點還可以包含其他類型的節(jié)點,相互連接在一起就構成了一個完整的樹形結構。對于大多數(shù)HTML文檔來說,元素節(jié)點、文本節(jié)點及屬性節(jié)點是必不可少的。(1)元素節(jié)點。元素節(jié)點(ElementNode)構成了DOM基礎。在文檔結構中,<html><head><body><h1><p>和<ul>等標記都是元素節(jié)點。各種標記提供了元素的名稱,如文本段落元素的名稱是p,無序列表元素的名稱是ul等。元素可以包含其他元素,也可以被其他元素包含。(2)文本節(jié)點。元素節(jié)點只是節(jié)點樹中的一種類型,如果文檔完全由元素組成,那么這份文檔本身將不包含任何信息,因此文檔結構也就失去了存在的價值。在HTML文檔中,文本節(jié)點(TextNode)包含在元素節(jié)點內,如h1、p、li等元素就可以包含一些文本節(jié)點。(3)屬性節(jié)點。元素一般都會包含一些屬性,屬性的作用是對元素做出更具體的描述。在編寫HTML代碼時,在HTML標簽中添加的屬性就是屬性節(jié)點(AttributeNode)。一般元素都有title屬性,該屬性能夠詳細地描述或說明元素,以便用戶了解該元素的用途、作用或功能。3.DOM節(jié)點訪問訪問節(jié)點的方式有很多種,既可以通過document對象的方法來訪問節(jié)點,也可以通過元素節(jié)點的屬性來訪問節(jié)點。如果要對例9-9中的用戶名文本框、密碼框及郵箱地址文本框進行訪問,則可以通過以下4種方式進行。(1)通過getElementById()方法訪問節(jié)點。document對象的getElementById()方法可以訪問頁面中的節(jié)點,該方法在使用時,必須指定一個目標元素的id作為參數(shù)。①基本語法。vars=document.getElementById(id);//調用時參數(shù)需要加雙引號在使用該方法時需要注意以下兩點?！駃d為必選項,對應頁面元素屬性id的屬性值,為字符串型的數(shù)據(jù)。在頁面設計時最好給每一個需要交互的元素設定一個唯一的id,以便快速查找?！裨摲椒ǚ祷氐氖且粋€頁面元素的引用,如果頁面上出現(xiàn)了不同元素使用同一個id的情況,則返回第一個找到的頁面元素;如果給定的id沒有找到對應的元素,則返回null。(2)通過getElementsByName()方法訪問節(jié)點。除了可以通過元素的id獲取對象,還可以通過元素的名字來訪問。①基本語法。vars=document.getElementsByName(name);//調用時參數(shù)需要加雙引號在使用該方法時需要注意以下兩點?！駈ame為必選項,對應頁面元素屬性name的屬性值,為字符串型的數(shù)據(jù)。該方法調用時返回的是一個數(shù)組,即使對應該名字的元素只有一個?！袢绻付衷陧撁嬷袥]有相應的元素存在,則返回一個長度為0的數(shù)組,程序中可以通過判斷數(shù)組的length屬性值是否為0來判斷是否找到了相應的元素。(3)通過getElementsByTagName()方法訪問節(jié)點。除了可以通過元素的id和name獲取對應的元素,還可以通過標記名稱來獲取頁面上所有同類的元素,如表單中的所有input元素。①基本語法。vars=document.getElementsByTagName(tagname);//調用時參數(shù)需要加雙引號在使用該方法時需要注意以下兩點?！駎agname為必選項,對應頁面元素的類型,為字符串型的數(shù)據(jù)。該方法調用時返回的是一個數(shù)組,即使頁面中對應該類型的元素只有一個。●通過數(shù)組的length屬性值來獲取頁面上該類型元素的總數(shù)。(4)通過form元素訪問節(jié)點。如果要獲取頁面中的form對象,那么除了通過getElementById()、getElementsByName()方法,還可以通過document對象的forms屬性來獲取這個form對象。表單是用戶與網頁進行交互的重要手段，通過表單可以一次性獲取表單中大量元素的信息。獲取例9-9文檔中form對象的方法如下。varmyform=document.forms;//通過document對象的forms屬性來獲得數(shù)組對象varmyloginform=myform[0];//獲取數(shù)組中的第一個form對象當然,也可以通過form對象的name屬性來訪問頁面中的form對象,格式如下。varmyform=document.loginform;//loginform為form對象的名稱獲取form對象之后,如果要得到form對象包含的其他元素,則可以通過form對象的elements屬性或name屬性來獲取。4.DOM節(jié)點操作前面介紹如何訪問文檔中的不同節(jié)點,只是使用DOM所能實現(xiàn)的功能中的一小部分。DOM的應用非常廣泛,如可以通過document對象實現(xiàn)表格的動態(tài)添加和刪除,也可以通過document對象替換文本節(jié)點的內容等。(1)創(chuàng)建和修改節(jié)點。document對象有很多創(chuàng)建和修改不同類型節(jié)點的方法,其常用方法及說明如表9-10所示。假設要在一個HTML頁面中添加一個p節(jié)點,p節(jié)點內的文本內容是“HelloWorld!”那么可以利用createElement()、createTextNode()及appendChild()方法來實現(xiàn)。除了添加一個節(jié)點,也可以利用removeChild()、insertBefore()及replaceChild()方法刪除、插入和替換節(jié)點。(2)節(jié)點的innerText和innerHTML屬性。在DOM中,有兩個很重要的屬性,分別是innerText和innerHTML,利用這兩個屬性可以更方便地進行文檔操作。innerText屬性用來修改起始標記和結束標記之間的文本。例如,有一個空的div節(jié)點,如果希望在該div節(jié)點中設置文本內容為“中國你好!”則可以編寫如下代碼。oDiv.appendChild(document.createTextNode("中國你好!"));如果使用innerText屬性,則可以編寫如下代碼。oDiv.innerText="中國你好!";使用innerText屬性的代碼更加簡潔,且更容易理解。另外,由于innerText會自動將小于號、大于號、引號和連接符號進行編碼,因此不需要擔心這些特殊字符。innerHTML屬性可以直接給元素分配字符串,而不需要考慮使用DOM的方法來創(chuàng)建元素。例如,若要為空的div節(jié)點創(chuàng)建strong子節(jié)點,則使用DOM方法創(chuàng)建的代碼如下。varstrong1=document.createElement("strong");varotext=document.createTextNode("helloworld!");strongl.appendChild(otext);oDiv.appendchild(strongl);如果使用innerHTML屬性,則代碼變成:oDiv.innerHTML="<strong>helloworld!</strong>";還可以使用innerText屬性和innerHTML屬性獲取元素的內容。如果元素只包含文本,則innerText和innerHTML將返回相同的值;如果元素同時包含文本和其他元素,則innerText將只返回文本的內容,而innerHTML將返回所有元素和文本的HTML代碼。二、瀏覽器對象模型BOM瀏覽器對象模型是用于描述對象與對象之間層次關系的模型,瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成,其中代表瀏覽器窗口的Window對象是BOM的頂層對象,其他對象都是該對象的子對象。IE3.0和NetscapeNavigator3.0瀏覽器提供了瀏覽器對象模型特性,可以對瀏覽器窗口進行訪問和操作。開發(fā)者可以使用BOM移動窗口、改變狀態(tài)欄中的文本,以及執(zhí)行其他與頁面內容不直接相關的操作。由于沒有相關的BOM標準,因此每種瀏覽器都有各自的BOM實現(xiàn)方法。常見的BOM對象有Window對象、Screen對象、Location對象、History對象和Navigator對象。1.Window對象Window對象用來描述瀏覽器窗口的相關信息。Window對象是客戶端的全局對象,是客

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論