Web 前端開發(fā)技術(shù) 教案 項(xiàng)目九 JavaScript 對象

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