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

下載本文檔

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

文檔簡介

1Web程序設計

JavaScript編程2課程內容概述基本語句與數據類型函數面向對象編程文檔對象模型DOM31、概述

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

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

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

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

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

JavaScript簡介在1994年，網景公司（現在的Mozilla基金會）開發(fā)出了第一個瀏覽器NetscapeNavigator。為了能在Web客戶端對用戶提交的數據做一些簡單的處理，網景公司的BrendanEich設計了網頁腳本語言，最初命名為LiveScript。

1995年首次在NetscapeNavigator2.0中引入，作為Navigator瀏覽器內置的腳本語言。JavaScript簡介

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

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

2009年，Node.js平臺誕生，服務端JavaScript語言編程應用開始受到關注。

JavaScript與JavaJavaScript和Java是兩種不同的編程語言，二者之間并沒有太多內在的關聯。

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

（1）動態(tài)類型語言

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

（2）一等函數（first-classfunction）

JavaScript具有一等函數（first-classfunction）特性?！耙坏群瘮怠敝傅氖牵浜瘮狄彩且环N數據類型，和數值、字符串等變量類型一樣?？梢詫⒑瘮蒂x值給變量，作為參數傳遞，或者作為另一個函數的返回值，而不僅僅是操作變量的方式。JavaScript與Java14

（3）面向對象特性

JavaScript有面向對象的特性，但不是完全的面向對象編程語言，它的對象繼承機制不是同Java或C++語言使用類作為模板，而是采用了一種“原型鏈”的機制實現的。JavaScript與Java15JavaScript與Java在誕生之初，JavaScript語言的設計并不完善，但這沒有影響到該語言的流行，由于JavaScript解釋器直接內嵌在瀏覽器中的，這使得在非常短的時間里，JavaScript幾乎完全取代了JavaApplet。目前，它已成為設計Web系統(tǒng)客戶端的主流編程語言。16JavaScript與Java因為不同瀏覽器對JavaScript標準實現有一定的差異，導致不同瀏覽器之間的JavaScript代碼不兼容。這是目前使用JavaScript語言過程中需要注意的問題。2、基本語句與數據類型

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

2、基本語句與數據類型<html><head><title>Test</title></head><body>

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

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

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

typeof

typeof的優(yōu)先級是最高的，因此typeof對一個變量進行運算時不需要括號，而判斷一個表達式的結果類型需要用括號，如下所示：基本運算符typeofa===typeofbtypeof(a+b)算術運算符：+，-，*，/，++，%

其中，除法（/）運算符兩邊操作數均為整數，則結果為整數(舍去小數部分）；求余運算（%）返回第一個操作數除以第二個操作數后的余數，且運算結果的符號與被除數相同，操作數可以為浮點數。基本運算符關系運算符：<,>,<=,>=,!=

為二元運算符，用來比較兩個操作數，由兩個操作數和關系運算符構成一個關系表達式，其操作結果為true或false?；具\算符邏輯運算符：||，&&，!

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

基本運算符varb;b=""||"default";//=>"default"字符串運算符：+

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

基本運算符

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

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

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

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

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

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

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

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

在JavaScript中所有的數據類型都可以被轉化為布爾值，除了以下五種表達式轉換為false，所有的值都被轉化為真值true，包括：

39變量與數據類型0（含正負）

NaN空字符串

Undefinednull

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

functionfname(arg…){}

函數在聲明后，函數名可作為函數表達式。沒有函數名的函數即是匿名函數，一個匿名的函數也是一個函數表達式。如下例所示：453、函數functionfoo(){ }varf=function(){}foo();f();(function(){})();463、函數（1）函數中的參數函數參數以參數表的形式給出，形式參數作為局部變量僅在函數作用域存在。在調用函數時，傳遞參數時，相比與參數表給定的參數，實參中多余的參數將被忽略；如若缺少，缺少的參數部分其參數值是undefined類型；473、函數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、函數（2）函數中的this在調用函數的時候，函數將被隱含地傳入另一個被稱為上下文(context)的對象，關鍵字this即表示上下文，this是內置的。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函數定義在對象內，即是對象的屬性：若函數定義在全局范圍或者函數被嵌套在另一個函數內，則它被調用時，該函數內的this指向的是全局頂層對象，在瀏覽器中即是window對象。(functionglobal_this(){console.log(this);})();//=>window{top:Window,window:Window,location:Location,external:Object若希望將一個函數和this綁定，可以使用Function對象中的apply()或call()方法。通過apply()方法，可以使一個對象調用某個函數（該函數不作為對象的方法）。該函數為：

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、函數（3）函數表達式與聲明語句函數表達式可以是一個函數名，也可以是在賦值號右側的匿名函數，它們可以作為一個值。函數聲明語句是一個語句，但是使用圓括號運算符將函數聲明包含在內，函數聲明會轉化成表達式。functionf(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken)(functionf(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefinedfunction(){ returnconsole.log("IIEF");}();//=>SyntaxError:Unexpectedtoken((function(){ returnconsole.log("blockscope");})();//=>blockscope//=>undefined一個函數聲明的作用域是全局的，圓括號可以將包含在其中的聲明與外界作用域隔離開，模擬一個塊作用域。這種函數調用機制叫做立即執(zhí)行函數表達式IIFE（ImmediatelyInvokedFunctionExpression）。3、函數563、函數（4）函數式編程JavaScript的函數是“一等函數”，它可以賦值、被傳遞和返回。其中，閉包是這種函數式編程的重要概念。

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

JavaScript中通過構造函數定義一個對象，而構造函數首先是一個函數，和普通函數一樣使用function關鍵字聲明。為了區(qū)別，通常約定將構造函數的首字母大寫。構造函數在內部使用this關鍵字指向將被創(chuàng)建的對象。664、面向對象編程functionWarrior(name,race){ =name; this.race=race;}varw=newWarrior('Po','Panda');w//=>Warrior{name:"Po",race:"Panda"}

自定義對象：Warrior674、面向對象編程

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

Foo構造函數與各對象關系圖JavaScript中所有通過字面量直接定義的對象其構造函數是Object，即下面聲明是等價的。4、面向對象編程varobj1={};varobj2=newObject();804、面向對象編程（4）內置對象在JavaScript語言中提供了一些內置對象類，用戶可以直接使用這些類生成內置對象，比較常用有以下幾個：

日期對象：Date

數組對象：Array（一維、二維）

字符串對象：String

數學對象：Math

數值對象：Number815、文檔對象模型DOM

文檔對象模型（DOM，DocumentObjectModel），用來描述Web文檔的一組標準化對象集，包含用于處理當前文檔中各個方面的對象，如：可以讀取頁面表單中的值、當前頁面的標題等。825、文檔對象模型DOM

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

window對象是最頂層的對象，它表示一個瀏覽器窗口。對于用戶而言，可以打開多個瀏覽器窗口，而每一個瀏覽器窗口都對應一個window對象。861、DOM模型結構（2）document對象

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

history對象是window對象的子對象，用于存儲當前地址之前和之后訪問過的頁面的地址信息。（4）location對象該對象是window對象的子對象，用于存儲當前頁面的URL地址信息，包括的屬性主要有：891、DOM模型結構href：URL地址信息；

protocol：網址的協議部分；

hostname：網址的主機名；

port：網址的端口號；

pathname：網址中的文件名；901、DOM模型結構（5）navigator對象

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

(1)window.closed

表示窗口是否已被關閉，該屬性適應于多個窗口的情況；

(2)window.defaultstatus,window.status

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

框架的對象數組（如果當前窗口含有框架對象）；

(4)

為框架（或者腳本打開的窗口）指定的名稱；

(5)window.parent

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

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

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

例：在頁面中允許用戶通過單擊一個按鈕打開一個新窗口，然后可以關閉它，并嘗試關閉當前窗口。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對象(3)移動和調整窗口大小

DOM允許移動和調整窗口大小，其方法為：window.moveTo(x,y);window.moveBy(x,y);window.resizeTo(width,height);window.resizeBy(width,height)1002、window對象(4)使用框架在一個窗口中含有多個框架時，每個框架都由一個frame對象表示。該對象等效于window對象，并且對象的名稱與<frame>標簽中定義的名稱相同。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頁面的JavaScript代碼中，對其他3部分的引用則是：

parent.topright,parent.bottomleft,parent.bottomright

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

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

document對象的一些屬性和文檔信息相關，其主要屬性包括：1043、獲取Web文檔document.URL：文檔的URL地址；document.title：頁面的標題；document.referrer：指出文檔的來源，當頁面是從其他頁面的超鏈接轉到這里的時候，該屬性指向上一個頁面的URL地址。

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

HTML文檔中的每個元素都被稱作DOM中的一個節(jié)點，可通過document對象訪問該結構中的每個節(jié)點（對象）。（1）DOM節(jié)點獲取方法getElementById(id)：返回具有指定id屬性的元素；getElementByTagName(tag)：返回具有指定標簽名稱的所有元素的一個數組；1074、DOM節(jié)點

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”);當document獲取的節(jié)點是一個DOM集合時，這個被獲取的集合是一個NodeList對象。

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

nodeValue:為文本節(jié)點包含的文本內容；innerHTML:為任意節(jié)點的HTML內容，可以指定一個HTML標簽的值；1114、DOM節(jié)點（3）節(jié)點的關系屬性firstChild:節(jié)點的第一個子對象；

lastChild:節(jié)點的最后一個子對象；

childNodes:節(jié)點的所有子對象的數組；

previousSibling:當前節(jié)點之前的兄弟節(jié)點；

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

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

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

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

hasChildNodes():判斷該對象是否有子對象；1144、DOM節(jié)點創(chuàng)建了一個超鏈接a對象，在新的元素節(jié)點和屬性節(jié)點創(chuàng)建完畢后，用appendChild將其添加到DOM樹中間去。varp=document.createElement(“a”);varx=document.createTextNode(“HomePages”);href=“/”;p.appendChild(x);1154、DOM節(jié)點（6）修改DOM節(jié)點元素節(jié)點的內容可以通過innerHTML屬性做修改，文本可以通過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é)點應用實例：該例子對表單數據做出處理，將表單中的前兩個輸入相加，計入第三個文本框。<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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論