第五章

JavaScript對象和函數(shù)JavaScript中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù)等，此外，JavaScript允許自定義對象。JavaScript提供多個內(nèi)建對象，比如String、Date、Array等等。對象只是帶有屬性和方法的特殊數(shù)據(jù)類型。5.1JavaScript對象概述

訪問對象的屬性屬性是與對象相關(guān)的值。訪問對象屬性的語法是：objectNpertyName這個例子使用了String對象的length屬性來獲得字符串的長度：varmessage="HelloWorld!";varx=message.length;在以上代碼執(zhí)行后，x的值將是：12

訪問對象的方法您可以通過以下語法來調(diào)用方法：objectName.methodName()這個例子使用了String對象的toUpperCase()方法來將文本轉(zhuǎn)換為大寫：varmessage="Helloworld!";varx=message.toUpperCase();在以上代碼執(zhí)行后，x的值將是：HELLOWORLD!創(chuàng)建JavaScript對象通過JavaScript，您能夠定義并創(chuàng)建自己的對象。創(chuàng)建新對象有兩種不同的方法：

定義并創(chuàng)建對象的實例

使用函數(shù)來定義對象，然后創(chuàng)建新的對象實例【例5.1】創(chuàng)建對象的實例1person=newObject();person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor="blue";這個例子創(chuàng)建了對象的一個新實例，并向其添加了四個屬性：可以用如下腳本替代（使用對象列舉的方法）：<script>person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}document.write(person.firstname+"is"+person.age+"yearsold.");</script>【程序運(yùn)行效果】【例5.2】創(chuàng)建對象實例21．使用對象構(gòu)造器functionperson(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}使用函數(shù)來構(gòu)造對象：在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身，或者是指向該函數(shù)所屬的對象（運(yùn)行時）。2．創(chuàng)建JavaScript對象實例一旦您有了對象構(gòu)造器，就可以創(chuàng)建新的對象實例，就像這樣：varmyFather=newperson("John","Doe",50,"blue");varmyMother=newperson("Sally","Rally",48,"green");3．把屬性添加到JavaScript對象您可以通過為對象賦值，向已有對象添加新屬性：假設(shè)person的object已存在-您可以為其添加這些新屬性：firstname、lastname、age以及eyecolor：person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor="blue";x=person.firstname;在以上代碼執(zhí)行后，x的值將是：John【程序運(yùn)行效果】使用對象構(gòu)造器生成person對象，輸出后的結(jié)果如下（具體代碼查看源代碼）：【例5.3】把方法添加到JavaScript對象functionperson(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;

this.changeName=changeName;functionchangeName(name){this.lastname=name;}}【程序運(yùn)行效果】方法只不過是附加在對象上的函數(shù)。在構(gòu)造器函數(shù)內(nèi)部定義對象的方法changeName()函數(shù)，其name的值賦給person的lastname屬性：myMother.changeName("Doe");Doe【例5.4】循環(huán)遍歷對象的屬性：varperson={fname:"John",lname:"Doe",age:25};for(xinperson){txt=txt+person[x];}JavaScript是面向?qū)ο蟮恼Z言，但JavaScript不使用類。在JavaScript中，不會創(chuàng)建類，也不會通過類來創(chuàng)建對象（就像在其他面向?qū)ο蟮恼Z言中那樣）。JavaScript基于prototype，而不是基于類的。JavaScriptfor...in語句循環(huán)遍歷對象的屬性。for...in循環(huán)中的代碼塊將針對每個屬性執(zhí)行一次?！境绦蜻\(yùn)行效果】

functionfunctionname()

{

執(zhí)行代碼

}當(dāng)調(diào)用該函數(shù)時，會執(zhí)行函數(shù)內(nèi)的代碼?？梢栽谀呈录l(fā)生時直接調(diào)用函數(shù)（比如當(dāng)用戶點擊按鈕時），并且可由JavaScript在任何位置進(jìn)行調(diào)用。JavaScript對大小寫敏感。關(guān)鍵詞function必須是小寫的，并且必須以與函數(shù)名稱相同的大小寫來調(diào)用函數(shù)，JavaScript函數(shù)有屬性和方法。5.2JavaScript函數(shù)

調(diào)用帶參數(shù)的函數(shù)在調(diào)用函數(shù)時，您可以向其傳遞值，這些值被稱為參數(shù)。這些參數(shù)可以在函數(shù)中使用。您可以發(fā)送任意多的參數(shù)，由逗號(,)分隔：myFunction(argument1,argument2)當(dāng)您聲明函數(shù)時，請把參數(shù)作為變量來聲明：functionmyFunction(var1,var2){代碼}變量和參數(shù)必須以一致的順序出現(xiàn)。第一個變量就是第一個被傳遞的參數(shù)的給定的值，以此類推?！纠?.5】函數(shù)簡單案例<p>點擊這個按鈕，來調(diào)用帶參數(shù)的函數(shù)。</p><buttononclick="myFunction('HarryPotter','Wizard')">點擊這里</button><script>functionmyFunction(name,job){alert("Welcome"+name+",the"+job);}</script>【程序運(yùn)行效果】上面的函數(shù)在按鈕被點擊時會提示"WelcomeHarryPotter,theWizard"。函數(shù)很靈活，您可以使用不同的參數(shù)來調(diào)用該函數(shù)，這樣就會給出不同的消息：<buttononclick="myFunction('HarryPotter','Wizard')">點擊這里</button><buttononclick="myFunction('Bob','Builder')">點擊這里</button>根據(jù)您點擊的不同的按鈕，上面的例子會提示"WelcomeHarryPotter,theWizard"或"WelcomeBob,theBuilder"?！纠?.6】帶有返回值的函數(shù)：計算兩個數(shù)字的乘積，并返回結(jié)果：functionmyFunction(a,b){returna*b;}document.getElementById("demo").innerHTML=myFunction(4,3);有時，我們會希望函數(shù)將值返回調(diào)用它的地方。通過使用return語句就可以實現(xiàn)。在使用return語句時，函數(shù)會停止執(zhí)行，并返回指定的值。

語法functionmyFunction(){

varx=5;

returnx;}【程序運(yùn)行效果】上面的函數(shù)會返回值5。JavaScript提供了內(nèi)置的對象以實現(xiàn)特定的功能，其常用對象有數(shù)組對象、DOM對象和BOM對象等，本節(jié)介紹部分JavaScript常用內(nèi)置對象的使用，更多的對象可查看參考手冊。5.3JavaScript常用對象5.3.1.數(shù)組對象數(shù)組對象的作用是：使用單獨(dú)的變量名來存儲一系列的值。步驟為創(chuàng)建數(shù)組，為其賦值，例如如果你有一組數(shù)據(jù)（例如：車名字），存在單獨(dú)變量如下所示：varcar1="Saab";varcar2="Volvo";varcar3="BMW";1．常規(guī)方式：varmyCars=newArray();

myCars[0]="Saab";

myCars[1]="Volvo";myCars[2]="BMW";2．簡潔方式：varmyCars=newArray("Saab","Volvo","BMW");3．字面：varmyCars=["Saab","Volvo","BMW"];通過指定數(shù)組名以及索引號碼，你可以訪問某個特定的元素。以下實例可以訪問myCars數(shù)組的第一個值，[0]是數(shù)組的第一個元素。[1]是數(shù)組的第二個元素。：varname=myCars[0];以下實例修改了數(shù)組myCars的第一個元素：myCars[0]="Opel";所有的JavaScript變量都是對象。數(shù)組元素是對象。函數(shù)是對象。因此，你可以在數(shù)組中有不同的變量類型。你可以在一個數(shù)組中包含對象元素、函數(shù)、數(shù)組：myArray[0]=Date.now;myArray[1]=myFunction;myArray[2]=myCars;

Array對象屬性方法描述concat()連接兩個或更多的數(shù)組，并返回結(jié)果。copyWithin()從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中。every()檢測數(shù)值元素的每個元素是否都符合條件。fill()使用一個固定值來填充數(shù)組。filter()檢測數(shù)值元素，并返回符合條件所有元素的數(shù)組。find()返回符合傳入測試（函數(shù)）條件的數(shù)組元素。findIndex()返回符合傳入測試（函數(shù)）條件的數(shù)組元素索引。forEach()數(shù)組每個元素都執(zhí)行一次回調(diào)函數(shù)。includes()判斷一個數(shù)組是否包含一個指定的值。indexOf()搜索數(shù)組中的元素，并返回它所在的位置。join()把數(shù)組的所有元素放入一個字符串。lastIndexOf()返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。map()通過指定函數(shù)處理數(shù)組的每個元素，并返回處理后的數(shù)組。pop()刪除數(shù)組的最后一個元素并返回刪除的元素。push()向數(shù)組的末尾添加一個或更多元素，并返回新的長度。reduce()將數(shù)組元素計算為一個值（從左到右）。reduceRight()將數(shù)組元素計算為一個值（從右到左）。reverse()反轉(zhuǎn)數(shù)組的元素順序。shift()刪除并返回數(shù)組的第一個元素。slice()選取數(shù)組的的一部分，并返回一個新數(shù)組。some()檢測數(shù)組元素中是否有元素符合指定條件。sort()對數(shù)組的元素進(jìn)行排序。splice()從數(shù)組中添加或刪除元素。toString()把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。unshift()向數(shù)組的開頭添加一個或更多元素，并返回新的長度。valueOf()返回數(shù)組對象的原始值。使用數(shù)組對象預(yù)定義屬性和方法：varx=myCars.length

//myCars中元素的數(shù)量vary=myCars.indexOf("Volvo")

//"Volvo"值的索引值原型是JavaScript全局構(gòu)造函數(shù)。它可以構(gòu)建新Javascript對象的屬性和方法?！纠?.7】創(chuàng)建一個新的方法。Atotype.myUcase=function(){

for(i=0;i<this.length;i++){

this[i]=this[i].toUpperCase();

}}【程序執(zhí)行效果】本例創(chuàng)建了新的數(shù)組方法用于將數(shù)組小寫字符轉(zhuǎn)為大寫字符。5.3.2文檔對象模型（DOM）Document對象使設(shè)計人員可以從腳本中對HTML頁面的元素進(jìn)行訪問，Document對象是Window對象的一部分，通過window.document屬性對其進(jìn)行訪問。HTMLDOM接口對Document對象接口進(jìn)行了擴(kuò)展，定義HTML專用的屬性和，可訪問JavaScriptHTML文檔的所有元素。HTMLDOM（文檔對象模型）當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（DocumentObjectModel）。HTMLDOM模型被構(gòu)造為對象的樹：

HTMLDOM樹通過可編程的對象模型，JavaScript獲得了足夠的能力來創(chuàng)建動態(tài)的HTML：

JavaScript能夠改變頁面中的所有HTML元素

JavaScript能夠改變頁面中的所有HTML屬性

JavaScript能夠改變頁面中的所有CSS樣式

JavaScript能夠?qū)撁嬷械乃惺录龀龇磻?yīng)通常，通過JavaScript，您需要操作HTML元素。為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過id找到HTML元素

通過標(biāo)簽名找到HTML元素

通過類名找到HTML元素【例5.8】通過id查找HTML元素varx=document.getElementById("intro");在DOM中查找HTML元素的最簡單的方法，是通過使用元素的id。如果找到該元素，則該方法將以對象（在x中）的形式返回該元素。如果未找到該元素，則x將包含null?！境绦蜻\(yùn)行效果】本例查找id="intro"元素：【例5.9】通過標(biāo)簽名查找HTML元素varx=document.getElementById("main");vary=x.getElementsByTagName("p");【程序運(yùn)行效果】本例查找id="main"的元素，然后查找id="main"元素中的所有<p>元素：【例5.10】通過類名找到HTML元素varx=document.getElementsByClassName("intro");【程序運(yùn)行效果】本例通過getElementsByClassName函數(shù)來查找class="intro"的元素：5.3.3窗口（window）對象瀏覽器對象模型（BOM）使JavaScript有能力與瀏覽器“對話”。所有瀏覽器都支持window對象，它表示瀏覽器窗口，所有JavaScript全局對象、函數(shù)以及變量均自動成為window對象的成員。全局變量是window對象的屬性；全局函數(shù)是window對象的方法；甚至HTMLDOM的document也是window對象的屬性之一：window.document.getElementById("header");與此相同：document.getElementById("header");

Window對象屬性屬性描述closed返回窗口是否已被關(guān)閉。defaultStatus設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。document對Document對象的只讀引用。請參閱Document對象。history對History對象的只讀引用。請參數(shù)History對象。innerheight返回窗口的文檔顯示區(qū)的高度。innerwidth返回窗口的文檔顯示區(qū)的寬度。length設(shè)置或返回窗口中的框架數(shù)量。location用于窗口或框架的Location對象。請參閱Location對象。name設(shè)置或返回窗口的名稱。Navigator對Navigator對象的只讀引用。請參數(shù)Navigator對象。屬性描述opener返回對創(chuàng)建此窗口的窗口的引用。outerheight返回窗口的外部高度。outerwidth返回窗口的外部寬度。pageXOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的X位置。pageYOffset設(shè)置或返回當(dāng)前頁面相對于窗口顯示區(qū)左上角的Y位置。parent返回父窗口。Screen對Screen對象的只讀引用。請參數(shù)Screen對象。self返回對當(dāng)前窗口的引用。等價于Window屬性。status設(shè)置窗口狀態(tài)欄的文本。top返回最頂層的先輩窗口。Windowwindow屬性等價于self屬性，它包含了對窗口自身的引用。screenLeftscreenTopscreenXscreenY只讀整數(shù)。聲明了窗口的左上角在屏幕上的的x坐標(biāo)和y坐標(biāo)。IE、Safari和Opera支持screenLeft和screenTop，而Firefox和Safari支持screenX和screenY。

Window對象方法方法描述alert()顯示帶有一段消息和一個確認(rèn)按鈕的警告框。blur()把鍵盤焦點從頂層窗口移開。clearInterval()取消由setInterval()設(shè)置的timeout。clearTimeout()取消由setTimeout()方法設(shè)置的timeout。close()關(guān)閉瀏覽器窗口。confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。createPopup()創(chuàng)建一個pop-up窗口。focus()把鍵盤焦點給予一個窗口。moveBy()可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素。moveTo()把窗口的左上角移動到一個指定的坐標(biāo)。open()打開一個新的瀏覽器窗口或查找一個已命名的窗口。print()打印當(dāng)前窗口的內(nèi)容。prompt()顯示可提示用戶輸入的對話框。resizeBy()按照指定的像素調(diào)整窗口的大小。resizeTo()把窗口的大小調(diào)整到指定的寬度和高度。scrollBy()按照指定的像素值來滾動內(nèi)容。scrollTo()把內(nèi)容滾動到指定的坐標(biāo)。setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式?！纠?.11】實用的JavaScript方案（涵蓋所有瀏覽器）：varw=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;varh=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;有三種方法能夠確定瀏覽器窗口的尺寸：對于InternetExplorer、Chrome、Firefox、Opera以及Safari：window.innerHeight-瀏覽器窗口的內(nèi)部高度(包括滾動條)window.innerWidth-瀏覽器窗口的內(nèi)部寬度(包括滾動條)對于InternetExplorer8、7、6、5：document.documentElement.clientHeightdocument.documentElement.clientWidth或者document.body.clientHeightdocument.body.clientWidth【程序運(yùn)行效果】該例用兼容的方式顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動條）5.3

json對象JSON英文全稱

JavaScriptObjectNotation，是一種輕量級的數(shù)據(jù)交換格式，用于存儲和傳輸數(shù)據(jù)的格式，通常用于服務(wù)端向網(wǎng)頁傳遞數(shù)據(jù)。以下

JSON語法定義了

sites