Java Web程序開(kāi)發(fā)與分析課件：JavaScript編程_第1頁(yè)
Java Web程序開(kāi)發(fā)與分析課件：JavaScript編程_第2頁(yè)
Java Web程序開(kāi)發(fā)與分析課件：JavaScript編程_第3頁(yè)
Java Web程序開(kāi)發(fā)與分析課件：JavaScript編程_第4頁(yè)
Java Web程序開(kāi)發(fā)與分析課件：JavaScript編程_第5頁(yè)
已閱讀5頁(yè)，還剩123頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1Web程序設(shè)計(jì)

JavaScript編程2課程內(nèi)容概述基本語(yǔ)句與數(shù)據(jù)類型函數(shù)面向?qū)ο缶幊涛臋n對(duì)象模型DOM31、概述

Web系統(tǒng)屬于B/S體系結(jié)構(gòu)，包括：瀏覽器客戶端和服務(wù)器端。瀏覽器服務(wù)器客戶端代碼服務(wù)器端代碼41、概述

對(duì)于客戶端編程，需要實(shí)現(xiàn)一定的用戶與瀏覽器的動(dòng)態(tài)交互功能。對(duì)于一個(gè)Web系統(tǒng)而言，表示層也稱為前端。（1）前端技術(shù)純粹的HTML頁(yè)面作為Web用戶界面，相比于直接和操作系統(tǒng)打交道的GUI界面，不僅頁(yè)面的顯示單一，功能也是非常弱的。為了增強(qiáng)界面的顯示效果，使用層疊樣式表（CSS）分離HTML元素和頁(yè)面的表現(xiàn)形式，可以精確設(shè)計(jì)網(wǎng)頁(yè)的視覺(jué)效果與風(fēng)格。為了方便用戶對(duì)頁(yè)面元素的操縱，增強(qiáng)交互功能，可以使用客戶端腳本編程語(yǔ)言，如：JavaScript腳本。目前，前端所涵蓋的技術(shù)在不斷發(fā)展更新，如：HTML5、CSS3、Ajax等。1、概述（2）JavaScript與瀏覽器

JavaScript是目前最通用的瀏覽器腳本語(yǔ)言，可以嵌入到HTML代碼中，其解釋器內(nèi)置于幾乎所有的主流瀏覽器中。

通過(guò)JavaScript腳本語(yǔ)言可以動(dòng)態(tài)創(chuàng)建和修改HTML文檔，增強(qiáng)用戶和瀏覽器的交互能力。

1、概述在1995年互聯(lián)網(wǎng)興起時(shí)，JavaScript據(jù)說(shuō)是僅花費(fèi)10天就開(kāi)發(fā)出來(lái)的一門語(yǔ)言，諸多設(shè)計(jì)漏洞被人詬病。2005年，隨著Google地圖大量使用基于JavaScript的Ajax技術(shù)，不僅標(biāo)志web2.0時(shí)代的到來(lái)，也將提供瀏覽器與用戶交互功能的JavaScript推上新的高度。

JavaScript簡(jiǎn)介在1994年，網(wǎng)景公司（現(xiàn)在的Mozilla基金會(huì)）開(kāi)發(fā)出了第一個(gè)瀏覽器NetscapeNavigator。為了能在Web客戶端對(duì)用戶提交的數(shù)據(jù)做一些簡(jiǎn)單的處理，網(wǎng)景公司的BrendanEich設(shè)計(jì)了網(wǎng)頁(yè)腳本語(yǔ)言，最初命名為L(zhǎng)iveScript。

1995年首次在NetscapeNavigator2.0中引入，作為Navigator瀏覽器內(nèi)置的腳本語(yǔ)言。JavaScript簡(jiǎn)介

網(wǎng)景公司希望借助Java語(yǔ)言的影響力，遂與Sun公司建立了市場(chǎng)合作關(guān)系，該腳本語(yǔ)言被重新命名為JavaScript。在1996年，Microsoft和Netscape同意為Java腳本語(yǔ)言指定統(tǒng)一的規(guī)范，該規(guī)范由歐洲計(jì)算機(jī)廠商聯(lián)合會(huì)（ECMA）制定和管理，瀏覽器內(nèi)置腳本語(yǔ)言的國(guó)際標(biāo)準(zhǔn)稱為ECMAScript。JavaScript簡(jiǎn)介JavaScript簡(jiǎn)介

2001年，DouglasCrockford提出了JSON格式，它是一種輕量級(jí)的，用于在服務(wù)器和客戶端之間交換數(shù)據(jù)的格式。它以JavaScript來(lái)編碼并格式化數(shù)據(jù)，可直接被JavaScript操作。

2009年，Node.js平臺(tái)誕生，服務(wù)端JavaScript語(yǔ)言編程應(yīng)用開(kāi)始受到關(guān)注。

JavaScript與JavaJavaScript和Java是兩種不同的編程語(yǔ)言，二者之間并沒(méi)有太多內(nèi)在的關(guān)聯(lián)。

JavaScript從Java語(yǔ)言中借鑒了一些語(yǔ)法，但從語(yǔ)言特性方面，二者的差別仍然是巨大的，主要包括：12

（1）動(dòng)態(tài)類型語(yǔ)言

JavaScript是一種動(dòng)態(tài)類型語(yǔ)言，在聲明變量時(shí)，不需要聲明變量的類型，解釋器會(huì)在運(yùn)行時(shí)自動(dòng)判定，而且同一個(gè)變量可以賦給它不同類型的變量值，這是Java這種靜態(tài)類型語(yǔ)言不可以做到的。因此，相比而言JavaScript更具靈活性。JavaScript與Java13

（2）一等函數(shù)（first-classfunction）

JavaScript具有一等函數(shù)（first-classfunction）特性?！耙坏群瘮?shù)”指的是，其函數(shù)也是一種數(shù)據(jù)類型，和數(shù)值、字符串等變量類型一樣。可以將函數(shù)賦值給變量，作為參數(shù)傳遞，或者作為另一個(gè)函數(shù)的返回值，而不僅僅是操作變量的方式。JavaScript與Java14

（3）面向?qū)ο筇匦?/p>

JavaScript有面向?qū)ο蟮奶匦?，但不是完全的面向?qū)ο缶幊陶Z(yǔ)言，它的對(duì)象繼承機(jī)制不是同Java或C++語(yǔ)言使用類作為模板，而是采用了一種“原型鏈”的機(jī)制實(shí)現(xiàn)的。JavaScript與Java15JavaScript與Java在誕生之初，JavaScript語(yǔ)言的設(shè)計(jì)并不完善，但這沒(méi)有影響到該語(yǔ)言的流行，由于JavaScript解釋器直接內(nèi)嵌在瀏覽器中的，這使得在非常短的時(shí)間里，JavaScript幾乎完全取代了JavaApplet。目前，它已成為設(shè)計(jì)Web系統(tǒng)客戶端的主流編程語(yǔ)言。16JavaScript與Java因?yàn)椴煌瑸g覽器對(duì)JavaScript標(biāo)準(zhǔn)實(shí)現(xiàn)有一定的差異，導(dǎo)致不同瀏覽器之間的JavaScript代碼不兼容。這是目前使用JavaScript語(yǔ)言過(guò)程中需要注意的問(wèn)題。2、基本語(yǔ)句與數(shù)據(jù)類型

JavaScript代碼為客戶端瀏覽器腳本代碼，JavaScript的使用可以采用以下兩種方式：（1）直接加入方式：采用<script></script>標(biāo)簽，將JavaScript代碼直接加到HTML頁(yè)面中。

2、基本語(yǔ)句與數(shù)據(jù)類型<html><head><title>Test</title></head><body>

<imgsrc=images/pic34.jpgalign=rightwidth=200height=150>

<scriptlanguage="javascript"><!--document.write("這是JavaScript腳本!");--></script></body></html>（2）引用方式如果已經(jīng)存在一個(gè)JavaScript源文件（.js為擴(kuò)展名），則可以采用引用的方式，其引用格式如下：<scriptsrc=“文件地址”type=“text/javascript”></script>2、基本語(yǔ)句與數(shù)據(jù)類型202、基本語(yǔ)句與數(shù)據(jù)類型<html><head><title>換行與段落</title></head><body><imgsrc=images/pic34.jpgalign=rightwidth=200height=150>

<scriptsrc="script.js"type="text/javascript"></script></body></html>JavaScript語(yǔ)言中的運(yùn)算符主要有以下幾類：基本運(yùn)算符運(yùn)算符描述.[]()數(shù)據(jù)存儲(chǔ)、函數(shù)調(diào)用newdeletetypeof+-!一元運(yùn)算*/%乘、除、取模+-加/連接、減>=<=><不等式運(yùn)算===!====!=等式運(yùn)算&&||邏輯與、邏輯或、非?:條件運(yùn)算

typeof

typeof的優(yōu)先級(jí)是最高的，因此typeof對(duì)一個(gè)變量進(jìn)行運(yùn)算時(shí)不需要括號(hào)，而判斷一個(gè)表達(dá)式的結(jié)果類型需要用括號(hào)，如下所示：基本運(yùn)算符typeofa===typeofbtypeof(a+b)算術(shù)運(yùn)算符：+，-，*，/，++，%

其中，除法（/）運(yùn)算符兩邊操作數(shù)均為整數(shù)，則結(jié)果為整數(shù)(舍去小數(shù)部分）；求余運(yùn)算（%）返回第一個(gè)操作數(shù)除以第二個(gè)操作數(shù)后的余數(shù)，且運(yùn)算結(jié)果的符號(hào)與被除數(shù)相同，操作數(shù)可以為浮點(diǎn)數(shù)?；具\(yùn)算符關(guān)系運(yùn)算符：<,>,<=,>=,!=

為二元運(yùn)算符，用來(lái)比較兩個(gè)操作數(shù)，由兩個(gè)操作數(shù)和關(guān)系運(yùn)算符構(gòu)成一個(gè)關(guān)系表達(dá)式，其操作結(jié)果為true或false?；具\(yùn)算符邏輯運(yùn)算符：||，&&，!

邏輯運(yùn)算符比關(guān)系運(yùn)算符的優(yōu)先級(jí)低。大多數(shù)情況邏輯運(yùn)算符仍然是對(duì)布爾值進(jìn)行運(yùn)算，但它不僅僅能對(duì)布爾值做運(yùn)算，也可以返回的也不是布爾值，例如：

基本運(yùn)算符varb;b=""||"default";//=>"default"字符串運(yùn)算符：+

字符串連接操作符(+)用于把一個(gè)字符串連接在另一個(gè)字符串的后面，也能將一個(gè)數(shù)字與一個(gè)字符串連接。

基本運(yùn)算符

"Peanutbutter"+"andjelly"運(yùn)算符和操作數(shù)的組合稱為表達(dá)式，通常包括：算術(shù)表達(dá)式、賦值表達(dá)式、布爾表達(dá)式、字符串表達(dá)式、函數(shù)表達(dá)式等。表達(dá)式表達(dá)式//直接量表達(dá)式3.1416“string”//變量X//算術(shù)表達(dá)式1+1//賦值表達(dá)式x=3.1416//條件選擇表達(dá)式x>=0?1:-1

//函數(shù)調(diào)用表達(dá)式add(1,1)//屬性訪問(wèn)表達(dá)式array[i]//匿名函數(shù)表達(dá)式function(x){console.log(x);}表達(dá)式變量、參數(shù)和標(biāo)記等的名字稱為標(biāo)識(shí)符，它需要遵循有一定規(guī)則，如：第一個(gè)字符不能是數(shù)字，可以是字母。JavaScript的標(biāo)識(shí)符是大小寫敏感的，大寫的標(biāo)識(shí)符和小寫的是不同的。標(biāo)識(shí)符標(biāo)識(shí)符類別關(guān)鍵字與保留字關(guān)鍵字default,debugger,instanceof,null,this,typeof,var,void,with保留字class,const,enum,export,extends,import,super保留字（嚴(yán)格模式）Implements,let,private,public,yield,interface,package,protected,static全局對(duì)象argument,Infinity,NaN,undefined,JSON變量與數(shù)據(jù)類型JavaScript是一種動(dòng)態(tài)類型語(yǔ)言，因此該語(yǔ)言的變量可以存儲(chǔ)不同類型的數(shù)據(jù)。JavaScript中的變量沒(méi)有確定的類型，為弱變量類型。varname=“wangxiao”變量與數(shù)據(jù)類型JavaScript中的數(shù)據(jù)類型有五類：數(shù)值（number），字符串（string），對(duì)象，array（數(shù)組）,布爾值（boolean），null和undefined。對(duì)象可以細(xì)分為對(duì)象（object），數(shù)組（array）和函數(shù)（function）。(1)undefined,null

基本類型中undefined和null表示值不存在,這兩個(gè)類型區(qū)別不是太大。undefined表示基本類型的值不存在，null表示對(duì)象不存在，其區(qū)別如下：變量與數(shù)據(jù)類型Number(null);//=>0Number(undefined);//=>NaN變量與數(shù)據(jù)類型(2)數(shù)值

在JavaScript中所有數(shù)字都是以64位浮點(diǎn)數(shù)（即double類型）存儲(chǔ)的，沒(méi)有整型和浮點(diǎn)型之分，即數(shù)值類型。其中，全局函數(shù)parseInt()和parseFloat()可以將變量轉(zhuǎn)化為整數(shù)和浮點(diǎn)數(shù)。parseInt("&110");//=>NaNparseFloat("3.14*");//=>3.1436變量與數(shù)據(jù)類型(3)字符串

在JavaScript中，不區(qū)分字符串和單個(gè)字符，一個(gè)字符也是字符串。以下均為合法的字符串："astringindoublequotes"'astringinsinglequotes'"astringin'twokindsof'quotes"'anotherstringin"twokindsof"quotes'"astring\"needescapecharaters\""'anotherstring\'needescapecharaters\'too'"apathetic\brokenstring""astringwaiting"+'forbeingcatenated'37變量與數(shù)據(jù)類型(3)字符串

JavaScript的字符串性質(zhì)和Java的String對(duì)象有諸多相似：每個(gè)字符都占兩個(gè)Byte，也有許多相同的屬性和方法，如：

varstr="Thequickbrownfoxjumpsoverthelazydog."str.length//=>44str.charAt(0);//=>"T"str.substring(12,15);//=>"own"str.indexOf("jump")//=>2038變量與數(shù)據(jù)類型(4)布爾值

布爾值表示真假，只有true和false兩個(gè)值，經(jīng)常應(yīng)用于條件語(yǔ)句和循環(huán)語(yǔ)句中。

在JavaScript中所有的數(shù)據(jù)類型都可以被轉(zhuǎn)化為布爾值，除了以下五種表達(dá)式轉(zhuǎn)換為false，所有的值都被轉(zhuǎn)化為真值true，包括：

39變量與數(shù)據(jù)類型0（含正負(fù)）

NaN空字符串

Undefinednull

if("0"){ console.log('"0"!=false');}//=>"0"!=falseif(0==false&&!NaN){ console.log('0=>falseandNaN=>false');};//=>0=>falseandNaN=>false40類型轉(zhuǎn)換在JavaScript語(yǔ)言中，求布爾值的表達(dá)式中會(huì)對(duì)數(shù)據(jù)做轉(zhuǎn)換，字符串的連接，以及非數(shù)值數(shù)據(jù)的數(shù)值計(jì)算都會(huì)導(dǎo)致數(shù)據(jù)轉(zhuǎn)換，這些轉(zhuǎn)換在運(yùn)算時(shí)自動(dòng)產(chǎn)生，稱自動(dòng)數(shù)據(jù)類型轉(zhuǎn)換。 41通過(guò)主動(dòng)調(diào)用函數(shù)可以進(jìn)行強(qiáng)制類型轉(zhuǎn)換，如：使用Number()構(gòu)造函數(shù)將表達(dá)式轉(zhuǎn)化為數(shù)值，用String()轉(zhuǎn)化為字符串和用Boolean()轉(zhuǎn)化為布爾值。但JavaScript作為弱類型語(yǔ)言，類型轉(zhuǎn)換沒(méi)有強(qiáng)制的必要。類型轉(zhuǎn)換42對(duì)象類型若轉(zhuǎn)化為字符串，則函數(shù)對(duì)象轉(zhuǎn)化為函數(shù)代碼，數(shù)組對(duì)象先將各元素轉(zhuǎn)化為字符串形式，最后以逗號(hào)連接。除了基本數(shù)據(jù)類型和函數(shù)，其他類型均為object，這使得對(duì)對(duì)象的判別很籠統(tǒng)。為了判斷特定的對(duì)象，可以使用instanceof運(yùn)算符來(lái)詳細(xì)區(qū)分。類型轉(zhuǎn)換433、函數(shù)在JavaScript中，函數(shù)是一種對(duì)象類型，它是一段以function關(guān)鍵字聲明的代碼塊，這個(gè)語(yǔ)句段可以被當(dāng)作一個(gè)整體來(lái)引用和執(zhí)行。函數(shù)可以賦值給變量，作為參數(shù)傳遞，以及作為返回值。443、函數(shù)一個(gè)函數(shù)在聲明時(shí)，其格式如下：

functionfname(arg…){}

函數(shù)在聲明后，函數(shù)名可作為函數(shù)表達(dá)式。沒(méi)有函數(shù)名的函數(shù)即是匿名函數(shù)，一個(gè)匿名的函數(shù)也是一個(gè)函數(shù)表達(dá)式。如下例所示：453、函數(shù)functionfoo(){ }varf=function(){}foo();f();(function(){})();463、函數(shù)（1）函數(shù)中的參數(shù)函數(shù)參數(shù)以參數(shù)表的形式給出，形式參數(shù)作為局部變量?jī)H在函數(shù)作用域存在。在調(diào)用函數(shù)時(shí)，傳遞參數(shù)時(shí)，相比與參數(shù)表給定的參數(shù)，實(shí)參中多余的參數(shù)將被忽略；如若缺少，缺少的參數(shù)部分其參數(shù)值是undefined類型；473、函數(shù)varfab=functionf(x){ if(typeofx!=="number"||typeofx==="string"&&Number(x)) thrownewError("argumenttypeexception"); if(x<1) return1; else returnx*f(x-1);};fab(4);//=>24f(4);//=>24483、函數(shù)（2）函數(shù)中的this在調(diào)用函數(shù)的時(shí)候，函數(shù)將被隱含地傳入另一個(gè)被稱為上下文(context)的對(duì)象，關(guān)鍵字this即表示上下文，this是內(nèi)置的。varo={ initial:0, increment:1, add:function(){ if(this.result==undefined) this.result=this.initial; else this.result=this.result+this.increment; }};o.add();o.result;//=>0o.add();o.result;//=>1函數(shù)定義在對(duì)象內(nèi)，即是對(duì)象的屬性：若函數(shù)定義在全局范圍或者函數(shù)被嵌套在另一個(gè)函數(shù)內(nèi)，則它被調(diào)用時(shí)，該函數(shù)內(nèi)的this指向的是全局頂層對(duì)象，在瀏覽器中即是window對(duì)象。(functionglobal_this(){console.log(this);})();//=>window{top:Window,window:Window,location:Location,external:Object若希望將一個(gè)函數(shù)和this綁定，可以使用Function對(duì)象中的apply()或call()方法。通過(guò)apply()方法，可以使一個(gè)對(duì)象調(diào)用某個(gè)函數(shù)（該函數(shù)不作為對(duì)象的方法）。該函數(shù)為：

funciton.apply(thisArg,argArray)

varx={a:1,b:2};vary={

a:"A", b:"B", c:"C", fx:function(){ this.c=this.a+this.b; }}y.fx.apply(x);x//=>Object{a:1,b:2,c:3}

533、函數(shù)（3）函數(shù)表達(dá)式與聲明語(yǔ)句函數(shù)表達(dá)式可以是一個(gè)函數(shù)名，也可以是在賦值號(hào)右側(cè)的匿名函數(shù)，它們可以作為一個(gè)值。函數(shù)聲明語(yǔ)句是一個(gè)語(yǔ)句，但是使用圓括號(hào)運(yùn)算符將函數(shù)聲明包含在內(nèi)，函數(shù)聲明會(huì)轉(zhuǎn)化成表達(dá)式。functionf(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken)(functionf(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefinedfunction(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken((function(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefined一個(gè)函數(shù)聲明的作用域是全局的，圓括號(hào)可以將包含在其中的聲明與外界作用域隔離開(kāi)，模擬一個(gè)塊作用域。這種函數(shù)調(diào)用機(jī)制叫做立即執(zhí)行函數(shù)表達(dá)式IIFE（ImmediatelyInvokedFunctionExpression）。3、函數(shù)563、函數(shù)（4）函數(shù)式編程JavaScript的函數(shù)是“一等函數(shù)”，它可以賦值、被傳遞和返回。其中，閉包是這種函數(shù)式編程的重要概念。

57函數(shù)式編程-閉包討論一個(gè)問(wèn)題：在一個(gè)函數(shù)（對(duì)象）中定義另一個(gè)函數(shù)（對(duì)象），這時(shí)內(nèi)部函數(shù)是可以共享外部函數(shù)的變量的。如果外部函數(shù)對(duì)象因?yàn)闆](méi)有被變量指向而被回收，那么當(dāng)內(nèi)部函數(shù)對(duì)象仍然存在的時(shí)候，外部函數(shù)對(duì)象中的變量數(shù)據(jù)會(huì)消失嗎？58函數(shù)式編程-閉包functionfoo(n){ returnfunction(i){ returnn+=i; }}varc=foo(5);//這時(shí)n==5c(3);//=>8這時(shí):i==3n==5+3c(1);//=>9這時(shí):i==1n==8+159這種將函數(shù)局部變量保存在函數(shù)作用域內(nèi)的特性，被稱為閉包(closure)。在編程語(yǔ)言中的閉包概念和數(shù)學(xué)中的閉包概念并不相同，后者指的是對(duì)某一個(gè)集合封閉的運(yùn)算，而在編程語(yǔ)言的閉包指的是作用域包含在另一個(gè)函數(shù)中的函數(shù)。函數(shù)式編程-閉包60下面的例子希望一個(gè)數(shù)組能存儲(chǔ)3個(gè)函數(shù)，調(diào)用每個(gè)函數(shù)時(shí)都能取得0-2，這不同的三個(gè)數(shù)值。函數(shù)式編程-閉包varresult=[];for(vari=0;i<3;i++){ result.push(function(){returni;});}result[1]();//=>361函數(shù)式編程-閉包varresult=[];for(vari=0;i<3;i++){ result[i]=(function(i){ returnfunction(){ returni; } })(i); }result[1]();采用閉包方式：62閉包中變量的作用域是內(nèi)部的，不會(huì)成為一個(gè)全局的變量，編程中為了避免創(chuàng)建全局對(duì)象，應(yīng)盡量使用閉包。閉包機(jī)制可以用來(lái)實(shí)現(xiàn)一個(gè)對(duì)象的數(shù)據(jù)模塊，通過(guò)一個(gè)函數(shù)對(duì)象的內(nèi)部作用域封裝數(shù)據(jù)，類似于成員被封裝在一個(gè)類中。函數(shù)式編程-閉包634、面向?qū)ο缶幊蘆avaScript語(yǔ)言中可以聲明和定義對(duì)象，通過(guò)基于對(duì)象的程序設(shè)計(jì)，用更抽象、模塊化和可重復(fù)使用的方式進(jìn)行程序設(shè)計(jì)。JavaScript的面向?qū)ο髾C(jī)制和C++或Java語(yǔ)言不同，最直觀的區(qū)別是，JavaScript對(duì)象的實(shí)現(xiàn)不需要類作為模板。644、面向?qū)ο缶幊桃唤M包含數(shù)據(jù)的屬性和對(duì)屬性中包含數(shù)據(jù)操作的方法，稱為對(duì)象。通過(guò)自定義“對(duì)象類”聲明對(duì)象，這體現(xiàn)了JavaScript語(yǔ)言的面向?qū)ο筇匦浴?54、面向?qū)ο缶幊蹋?）使用函數(shù)自定義對(duì)象

JavaScript中通過(guò)構(gòu)造函數(shù)定義一個(gè)對(duì)象，而構(gòu)造函數(shù)首先是一個(gè)函數(shù)，和普通函數(shù)一樣使用function關(guān)鍵字聲明。為了區(qū)別，通常約定將構(gòu)造函數(shù)的首字母大寫。構(gòu)造函數(shù)在內(nèi)部使用this關(guān)鍵字指向?qū)⒈粍?chuàng)建的對(duì)象。664、面向?qū)ο缶幊蘤unctionWarrior(name,race){ =name; this.race=race;}varw=newWarrior('Po','Panda');w//=>Warrior{name:"Po",race:"Panda"}

自定義對(duì)象：Warrior674、面向?qū)ο缶幊?/p>

在構(gòu)造函數(shù)中有一個(gè)隱含的屬性prototype，稱為原型。原型指向一個(gè)對(duì)象，通過(guò)這個(gè)原型對(duì)象，JavaScript中的對(duì)象可以實(shí)現(xiàn)繼承。問(wèn)題：JavaScript中的對(duì)象是否可以實(shí)現(xiàn)繼承？684、面向?qū)ο缶幊蘶arbase={ b:"base"};functionDerived(){ this.d="derived"}Dtotype=base;varo=newDerived();o.b//=>"base"694、面向?qū)ο缶幊淘蛯?duì)象的改變會(huì)影響到繼承對(duì)象。另一方面，若繼承對(duì)象進(jìn)行了修改，原型對(duì)象并不會(huì)變化。base.new_b="newbase";o.new_d="newderived";o.new_b//=>"newbase"base.new_d//=>undefined704、面向?qū)ο缶幊蹋?）對(duì)象實(shí)例對(duì)象可以通過(guò)取值運(yùn)算符‘.’和‘[]’取得屬性值。通過(guò)點(diǎn)‘.’取值，后面接的必須是合法的標(biāo)識(shí)符，且不能加引號(hào)，更不能是變量或者表達(dá)式。若對(duì)象內(nèi)沒(méi)有該屬性則返回undefined。714、面向?qū)ο缶幊桃驗(yàn)閷?duì)象的屬性可能也是一個(gè)對(duì)象，僅當(dāng)使用’.’運(yùn)算符時(shí)，才可以鏈?zhǔn)秸{(diào)用對(duì)象的屬性。通過(guò)方括號(hào)’[]’取屬性值，可以是變量和表達(dá)式，它們會(huì)被轉(zhuǎn)換為字符串形式。通過(guò)in運(yùn)算符可以判斷一個(gè)屬性是否在對(duì)象中。724、面向?qū)ο缶幊?/=>"Po"warrior['master']//=>undefined'master'inwarrior//=>falsevaro={o1:{a2:"inner"}};o.o1.a2//=>"inner“o["o1"].a2//=>"inner"http://以下兩種調(diào)用是不可行的o[o1].a2o[o1.a2]//=>ReferenceError:o1isnotdefined734、面向?qū)ο缶幊蘆avaScript的對(duì)象也可以動(dòng)態(tài)修改，直接對(duì)一個(gè)不在對(duì)象中的屬性賦值，將會(huì)導(dǎo)致該屬性被添加到對(duì)象中。warrior.master="Shifu";'master'inwarrior//=>truedelete‘name'inwarrior//=>false744、面向?qū)ο缶幊蹋?）原型鏈機(jī)制從編程語(yǔ)言原型機(jī)制的角度看，可將JavaScript對(duì)象分為三種：用戶構(gòu)建的對(duì)象（包括字面量對(duì)象，即JSON數(shù)據(jù)格式聲明的對(duì)象；new運(yùn)算符生成的對(duì)象）構(gòu)造函數(shù)對(duì)象原型對(duì)象：為被繼承的對(duì)象對(duì)于一個(gè)對(duì)象，有：一個(gè)對(duì)象的constructor屬性指向它的構(gòu)造函數(shù)；__proto__屬性指向原型對(duì)象，注意，__proto__是一個(gè)非標(biāo)準(zhǔn)的屬性，不一定所有瀏覽器支持；4、面向?qū)ο缶幊?、面向?qū)ο缶幊蘤unctionFoo(){}varo=newFoo();o.__proto__.constructor===o.constructor//=>true4、面向?qū)ο缶幊?/p>

Foo構(gòu)造函數(shù)與各對(duì)象關(guān)系圖JavaScript中所有通過(guò)字面量直接定義的對(duì)象其構(gòu)造函數(shù)是Object，即下面聲明是等價(jià)的。4、面向?qū)ο缶幊蘶arobj1={};varobj2=newObject();804、面向?qū)ο缶幊蹋?）內(nèi)置對(duì)象在JavaScript語(yǔ)言中提供了一些內(nèi)置對(duì)象類，用戶可以直接使用這些類生成內(nèi)置對(duì)象，比較常用有以下幾個(gè)：

日期對(duì)象：Date

數(shù)組對(duì)象：Array（一維、二維）

字符串對(duì)象：String

數(shù)學(xué)對(duì)象：Math

數(shù)值對(duì)象：Number815、文檔對(duì)象模型DOM

文檔對(duì)象模型（DOM，DocumentObjectModel），用來(lái)描述Web文檔的一組標(biāo)準(zhǔn)化對(duì)象集，包含用于處理當(dāng)前文檔中各個(gè)方面的對(duì)象，如：可以讀取頁(yè)面表單中的值、當(dāng)前頁(yè)面的標(biāo)題等。825、文檔對(duì)象模型DOM

DOM標(biāo)準(zhǔn)是由萬(wàn)維網(wǎng)聯(lián)盟（W3C）定義：第一個(gè)DOM規(guī)范DOM1是于1998年10月發(fā)布的，它主要面對(duì)XHTML和XML文檔模型。DOM2是于2000年11月發(fā)布，它制定了樣式表對(duì)象模型，提供了完整的事件模型。DOM3于2004年發(fā)布，添加了XML內(nèi)容模型的處理、文檔驗(yàn)證等方面的內(nèi)容。835、文檔對(duì)象模型DOM文檔對(duì)象模型DOM（DocumentObjectModel）獨(dú)立于平臺(tái)和語(yǔ)言。DOM不是JavaScript語(yǔ)言的一部分，而是內(nèi)置在瀏覽器中的一個(gè)應(yīng)用程序接口（API）。DOM接口可以訪問(wèn)和處理這些結(jié)構(gòu)化文檔，如：動(dòng)態(tài)訪問(wèn)和修改文檔的內(nèi)容、結(jié)構(gòu)并將結(jié)果呈現(xiàn)給頁(yè)面。應(yīng)用特點(diǎn)：841、DOM模型結(jié)構(gòu)DOM模型對(duì)象結(jié)構(gòu)采用類似樹(shù)型結(jié)構(gòu)，以表示整個(gè)Web文檔的內(nèi)容和組件，如下圖所示：851、DOM模型結(jié)構(gòu)（1）window對(duì)象

window對(duì)象是最頂層的對(duì)象，它表示一個(gè)瀏覽器窗口。對(duì)于用戶而言，可以打開(kāi)多個(gè)瀏覽器窗口，而每一個(gè)瀏覽器窗口都對(duì)應(yīng)一個(gè)window對(duì)象。861、DOM模型結(jié)構(gòu)（2）document對(duì)象

document對(duì)象代表一個(gè)Web文檔或一個(gè)頁(yè)面，它是window對(duì)象的子對(duì)象。在應(yīng)用程序中可以寫為：window.document，代表當(dāng)前窗口的當(dāng)前文檔。在document對(duì)象中也包含一些文檔對(duì)象的集合，如：forms指向文檔中的所有表單元素，links指向所有超鏈接，images指向所有圖片元素。1、DOM模型結(jié)構(gòu)如：一個(gè)頁(yè)面可能包含多個(gè)鏈接，可以用links數(shù)組來(lái)表示，如：link1=links[0].href，document.links.length表示頁(yè)面中鏈接的數(shù)量。881、DOM模型結(jié)構(gòu)（3）history對(duì)象

history對(duì)象是window對(duì)象的子對(duì)象，用于存儲(chǔ)當(dāng)前地址之前和之后訪問(wèn)過(guò)的頁(yè)面的地址信息。（4）location對(duì)象該對(duì)象是window對(duì)象的子對(duì)象，用于存儲(chǔ)當(dāng)前頁(yè)面的URL地址信息，包括的屬性主要有：891、DOM模型結(jié)構(gòu)href：URL地址信息；

protocol：網(wǎng)址的協(xié)議部分；

hostname：網(wǎng)址的主機(jī)名；

port：網(wǎng)址的端口號(hào)；

pathname：網(wǎng)址中的文件名；901、DOM模型結(jié)構(gòu)（5）navigator對(duì)象

navigator對(duì)象對(duì)應(yīng)于整個(gè)瀏覽器，包含了瀏覽器的部分參數(shù)。如：userAgent指出的是瀏覽器的型號(hào)和版本號(hào)；cookieEnabled指出瀏覽器是否允許啟用cookies；language參數(shù)返回瀏覽器所處的操作系統(tǒng)語(yǔ)言。911、DOM模型結(jié)構(gòu)（6）screen對(duì)象對(duì)象screen對(duì)應(yīng)顯示設(shè)備，其中包含兩個(gè)屬性height和width，分別表示顯示設(shè)備的像素值。由DOM對(duì)象的組織結(jié)構(gòu)可知，document對(duì)象代表一個(gè)Web頁(yè)面，那么它是如何表示頁(yè)面中的組成元素，下面以HTML頁(yè)面為例。<html><head><title>WebPage</title></head><body><h1>Asimpledocument</h1><ahref=’#’>Helloworld!</a></body></html>DOM樹(shù)：942、window對(duì)象window的方法是全局方法，如何使用window對(duì)象控制窗口和框架是DOM模型中的主要內(nèi)容之一，window對(duì)象有以下的主要屬性：

(1)window.closed

表示窗口是否已被關(guān)閉，該屬性適應(yīng)于多個(gè)窗口的情況；

(2)window.defaultstatus,window.status

狀態(tài)欄的默認(rèn)消息和狀態(tài)欄臨時(shí)顯示的消息；952、window對(duì)象(3)window.frames[]

框架的對(duì)象數(shù)組（如果當(dāng)前窗口含有框架對(duì)象）；

(4)

為框架（或者腳本打開(kāi)的窗口）指定的名稱；

(5)window.parent

是指包含框架的父窗口；(6)window.top

使用框架時(shí)對(duì)頂層窗口的引用；962、window對(duì)象window對(duì)象的常用方法有：（1）創(chuàng)建窗口創(chuàng)建新窗口是window對(duì)象主要的應(yīng)用，它可以在不清除當(dāng)前窗口的情況下創(chuàng)建一個(gè)新窗口，如：彈出一個(gè)廣告窗口等。創(chuàng)建新窗口的語(yǔ)法為：

window.open(“URL”,”windowName”,”featureList”);972、window對(duì)象(2)關(guān)閉窗口關(guān)閉窗口的方法為：window.close()。瀏覽器一般不允許在未得到用戶許可的情況下關(guān)閉主瀏覽器窗口。

例：在頁(yè)面中允許用戶通過(guò)單擊一個(gè)按鈕打開(kāi)一個(gè)新窗口，然后可以關(guān)閉它，并嘗試關(guān)閉當(dāng)前窗口。98<html><head></head><body><h1>Creatanewwindow</h1><formname=“winform”><inputtype=“button”value=“opennewwindow”onClick=“NewWin=window.open(‘’,’NewWin’,’toolbar=0,width=200,height=100’);”><inputtype=“button”value=“Closewindow”onClick=“NewWin.close();”><inputtype=“button”value=“Closemainwindow”onClick=“window.close();”></form></body></html>992、window對(duì)象(3)移動(dòng)和調(diào)整窗口大小

DOM允許移動(dòng)和調(diào)整窗口大小，其方法為：window.moveTo(x,y);window.moveBy(x,y);window.resizeTo(width,height);window.resizeBy(width,height)1002、window對(duì)象(4)使用框架在一個(gè)窗口中含有多個(gè)框架時(shí)，每個(gè)框架都由一個(gè)frame對(duì)象表示。該對(duì)象等效于window對(duì)象，并且對(duì)象的名稱與<frame>標(biāo)簽中定義的名稱相同。101<framesetrows=“*,*”cols=“*,*”><framename=“topleft”src=“topleft.htm”><framename=“topright”src=“topright.htm”><framename=“bottomleft”src=“bottomleft.htm”><framename=“bottomright”src=“bottomright.htm”></frameset>在topleft.htm頁(yè)面的JavaScript代碼中，對(duì)其他3部分的引用則是：

parent.topright,parent.bottomleft,parent.bottomright

1023、獲取Web文檔在DOM模型中，載入瀏覽器的Web文檔由document對(duì)象表示，它代表整個(gè)文檔，也是文檔的根節(jié)點(diǎn)，document對(duì)象是訪問(wèn)Web頁(yè)面文檔的入口。

document對(duì)象的一些屬性和文檔信息相關(guān)，其主要屬性包括：1033、獲取Web文檔在DOM模型中，載入瀏覽器的Web文檔由document對(duì)象表示，它代表整個(gè)文檔，也是文檔的根節(jié)點(diǎn)，document對(duì)象是訪問(wèn)Web頁(yè)面文檔的入口。

document對(duì)象的一些屬性和文檔信息相關(guān)，其主要屬性包括：1043、獲取Web文檔document.URL：文檔的URL地址；document.title：頁(yè)面的標(biāo)題；document.referrer：指出文檔的來(lái)源，當(dāng)頁(yè)面是從其他頁(yè)面的超鏈接轉(zhuǎn)到這里的時(shí)候，該屬性指向上一個(gè)頁(yè)面的URL地址。

1053、獲取Web文檔document.lastModified：文檔最后修改的日期；document.linkColor：文檔中鏈接的顏色；document.cookie：允許讀取和設(shè)置文檔的cookie；document.bgColor：頁(yè)面的背景顏色；document.fgColor：頁(yè)面的前景顏色；1064、DOM節(jié)點(diǎn)

HTML文檔中的每個(gè)元素都被稱作DOM中的一個(gè)節(jié)點(diǎn)，可通過(guò)document對(duì)象訪問(wèn)該結(jié)構(gòu)中的每個(gè)節(jié)點(diǎn)（對(duì)象）。（1）DOM節(jié)點(diǎn)獲取方法getElementById(id)：返回具有指定id屬性的元素；getElementByTagName(tag)：返回具有指定標(biāo)簽名稱的所有元素的一個(gè)數(shù)組；1074、DOM節(jié)點(diǎn)

getElementsByClassName(class)：返回具有指定類名的元素；getElementsByName(name)：返回具有指定name屬性的元素；<ahref=’#’id=‘zzz’name=’xxx’class=’yyy’>Helloworld!</a>varm=document.getElementById(“zzz”);varn=document.getElementsByTagName(“a”)[0];varo=document.getElementsByClassName(“yyy”);varp=document.getElementsByName(“xxx”);當(dāng)document獲取的節(jié)點(diǎn)是一個(gè)DOM集合時(shí)，這個(gè)被獲取的集合是一個(gè)NodeList對(duì)象。

NodeList并不是一個(gè)數(shù)組，只是一個(gè)類似數(shù)組的對(duì)象，可以通過(guò)數(shù)字下標(biāo)訪問(wèn)其內(nèi)部的元素。如想要遍歷這個(gè)集合是不能使用for/in循環(huán)語(yǔ)句的，因?yàn)楸闅v時(shí)會(huì)訪問(wèn)到其他屬性，比如length屬性。4、DOM節(jié)點(diǎn)1094、DOM節(jié)點(diǎn)（2）基本的節(jié)點(diǎn)屬性nodeName:為節(jié)點(diǎn)的名稱，對(duì)于HTML標(biāo)簽而言，即是標(biāo)簽的名稱；對(duì)于文檔節(jié)點(diǎn)，名稱為#document，文本節(jié)點(diǎn)為：#text；nodeType:是描述節(jié)點(diǎn)類型的整數(shù)，1表示正常的HTML標(biāo)簽，3表示文本節(jié)點(diǎn)，9表示文檔節(jié)點(diǎn)；1104、DOM節(jié)點(diǎn)

nodeValue:為文本節(jié)點(diǎn)包含的文本內(nèi)容；innerHTML:為任意節(jié)點(diǎn)的HTML內(nèi)容，可以指定一個(gè)HTML標(biāo)簽的值；1114、DOM節(jié)點(diǎn)（3）節(jié)點(diǎn)的關(guān)系屬性firstChild:節(jié)點(diǎn)的第一個(gè)子對(duì)象；

lastChild:節(jié)點(diǎn)的最后一個(gè)子對(duì)象；

childNodes:節(jié)點(diǎn)的所有子對(duì)象的數(shù)組；

previousSibling:當(dāng)前節(jié)點(diǎn)之前的兄弟節(jié)點(diǎn)；

nextSibling:當(dāng)前節(jié)點(diǎn)之后的兄弟節(jié)點(diǎn)；1124、DOM節(jié)點(diǎn)（4）創(chuàng)建DOM節(jié)點(diǎn)creatTextNode(text):創(chuàng)建一個(gè)文本節(jié)點(diǎn)；creatElement(tag):為指定標(biāo)簽創(chuàng)建一個(gè)新的HTML元素；createAttribute(attribute)：創(chuàng)建元素屬性節(jié)點(diǎn)，該函數(shù)的參數(shù)為屬性名；1134、DOM節(jié)點(diǎn)appendChild(new):把指定的新節(jié)點(diǎn)附加在該對(duì)象所有子節(jié)點(diǎn)之后；

insertBefore(new,old):把指定的新節(jié)點(diǎn)添加在指定節(jié)點(diǎn)之前；

replaceChild(new,old):置換節(jié)點(diǎn)；

removeChild(node):刪除節(jié)點(diǎn)；

hasChildNodes():判斷該對(duì)象是否有子對(duì)象；1144、DOM節(jié)點(diǎn)創(chuàng)建了一個(gè)超鏈接a對(duì)象，在新的元素節(jié)點(diǎn)和屬性節(jié)點(diǎn)創(chuàng)建完畢后，用appendChild將其添加到DOM樹(shù)中間去。varp=document.createElement(“a”);varx=document.createTextNode(“HomePages”);href=“/”;p.appendChild(x);1154、DOM節(jié)點(diǎn)（6）修改DOM節(jié)點(diǎn)元素節(jié)點(diǎn)的內(nèi)容可以通過(guò)innerHTML屬性做修改，文本可以通過(guò)data屬性修改。例如：以超鏈接元素<a>為例<aid="hl"href="#">AHyperLink</a>varx=document.getElementById("hl1");x.childNodes.length//=>1x.firstChild.nodeValue="ChangeText";//=>"ChangeText"x.innerHTML="ChangeAgain";//=>"ChangeAgain"1164、DOM節(jié)點(diǎn)應(yīng)用實(shí)例：該例子對(duì)表單數(shù)據(jù)做出處理，將表單中的前兩個(gè)輸入相加，計(jì)入第三個(gè)文本框。<form> <inputtype="text"id="a"name='in'value=''/> <inputtype="text"id="b"name='in'value=''/> <br/> <textareaid="out"value="0"></textarea></form>117<script> document.getElementById("a").addEventListener("change",function(event){

var_b=document.getElementById("b");

varresult=isNaN(parseFloat(_b.

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論