教學(xué)1課程第二階段javaweb第十四章javascript

JavascriptLearnmore.

本章概要

javascript概述類(lèi)型和變量數(shù)組面向?qū)ο蠛瘮?shù)（方法）的運(yùn)用閉包的使用類(lèi)和原型dom操作（網(wǎng)頁(yè)元素）dom事件

Javascript概述名字的來(lái)歷網(wǎng)景（NetScape）ECMAScript（標(biāo)準(zhǔn)）特點(diǎn)面向web的編程語(yǔ)言瀏覽器的支持動(dòng)態(tài)的，弱類(lèi)型編程語(yǔ)言和java沒(méi)關(guān)系類(lèi)型和變量數(shù)據(jù)類(lèi)型原始類(lèi)型（primitivetype）包括數(shù)字，字符串和布爾值null和undefined對(duì)象類(lèi)型（objecttype）普通對(duì)象類(lèi)型即Object數(shù)組類(lèi)型：即Array函數(shù)類(lèi)型：即function

類(lèi)型和變量聲明變量

//聲明普通數(shù)據(jù)varage=20;

//簡(jiǎn)單對(duì)象,鍵值對(duì)結(jié)構(gòu)varangel={"name":"ang","sex":"男"};一般來(lái)說(shuō)會(huì)使用網(wǎng)頁(yè)文檔來(lái)做測(cè)試

javascript數(shù)組數(shù)組的聲明和初始化最簡(jiǎn)單方式（初值方式）//創(chuàng)建一個(gè)空數(shù)組,arr.length=0vararr=[];//創(chuàng)建一個(gè)長(zhǎng)度為5的數(shù)組

//不限定類(lèi)型vararrFive=[1,2,3,’a’,’b’];

javascript數(shù)組對(duì)象創(chuàng)建方式

vararr=newArray()

vararrVal=newArray(2,3,9)數(shù)組的循環(huán)

for(vari=0;i<arr.length;i++)for(varpinarr)

javascript數(shù)組數(shù)組的APIpush(x,y,z):可以添加一個(gè)或多個(gè)元素pop()：會(huì)刪除最后一個(gè)元素并返回這個(gè)元素，

注意:length會(huì)減一arr.join(""):把數(shù)組所有元素都轉(zhuǎn)化為字符串拼

接在一起，并返回這個(gè)最終的字符串a(chǎn)rr.join(","):會(huì)把字符串拼接起來(lái)并用逗號(hào)隔開(kāi)reverse();會(huì)把數(shù)組倒序排列

面對(duì)對(duì)象對(duì)象結(jié)構(gòu)js對(duì)象是一種屬性/屬性值的復(fù)合結(jié)構(gòu)（即鍵值對(duì)），其中屬性值即可以是普通類(lèi)型數(shù)據(jù)，也可以是其他對(duì)象類(lèi)數(shù)據(jù)（普通對(duì)象，函數(shù)，數(shù)組等）對(duì)象的常用操作對(duì)象的創(chuàng)建屬性的新增,刪除和檢測(cè)等面對(duì)對(duì)象對(duì)象創(chuàng)建的兩種方式方式一：對(duì)象直接量（json格式）對(duì)象直接量由若干鍵值對(duì)組成，并且使用逗號(hào)分隔，其中每個(gè)“值”都可以是另外一個(gè)直接量對(duì)象示例如下：varangel={"name":"ang","sex":"男"};

面對(duì)對(duì)象綜合示例varclassone={teacher:"張珊",students:{stuname1:"李四",stuname2:"王武"}};面對(duì)對(duì)象（對(duì)象創(chuàng)建）方式二：通過(guò)new創(chuàng)建對(duì)象//創(chuàng)建了一個(gè)空對(duì)象varobj=newObject();

//創(chuàng)建了一個(gè)Date（內(nèi)置）對(duì)象varnow=newDate();面對(duì)對(duì)象屬性的維護(hù)屬性的新增：="helloworld";屬性的刪除：delete;屬性的檢測(cè)：nameinobj//trueorfalse

函數(shù)（方法）的運(yùn)用函數(shù)是一系列可執(zhí)行代碼的最小集合單元，定義函數(shù)后可以

通過(guò)代碼調(diào)用和事件（dom）調(diào)用來(lái)執(zhí)行函數(shù)的結(jié)構(gòu)（關(guān)鍵字：function）functionfunname(形式參數(shù)){}或者varfuncall=function(形式參數(shù)){}此時(shí)函數(shù)被賦值給了一個(gè)變量

函數(shù)（方法）的運(yùn)用

不定實(shí)參函數(shù)有時(shí)候js函數(shù)在定義的時(shí)候可以不指定參數(shù)列表，但是在調(diào)用的時(shí)候可以傳入?yún)?shù)，并且函數(shù)內(nèi)部可以通過(guò)某個(gè)內(nèi)置屬性得到這些參數(shù)，這個(gè)內(nèi)置屬性就是：arguments比如定義函數(shù)：functiongetArguments_length(){returnarguments.length;}varargumentsLength=getArguments_length(1,2,3)alert(argumentsLength);//打印3

函數(shù)（方法）的運(yùn)用匿名函數(shù)調(diào)用vartens=(function(x){ returnx*x;})(10);alert(tens);//打印出100

注：jquery使用這種方式構(gòu)建

函數(shù)（方法）的運(yùn)用

函數(shù)的傳遞函數(shù)是一種特殊的對(duì)象類(lèi)型，可以作為參數(shù)或者值進(jìn)行傳遞示例程序varo=newObject();o.f=myprint;o.f(arr);//已經(jīng)作為o對(duì)象的方法

函數(shù)（方法）的運(yùn)用

為對(duì)象定義函數(shù)有時(shí)候?yàn)榱朔奖?，我們?huì)在創(chuàng)建對(duì)象時(shí)，動(dòng)態(tài)的賦函數(shù)varcalculator={ope1:1,ope2:2,result:0,

add:function(){this.result=this.ope1+this.ope2}}calculator.add();alert(calculator.result);//這里會(huì)打印3注意：js的this關(guān)鍵字指代調(diào)用此函數(shù)的對(duì)象，也就是calculator對(duì)象閉包的使用

閉包的作用方便在調(diào)用時(shí)控制局部變量模擬面對(duì)對(duì)象的代碼風(fēng)格（封裝）結(jié)構(gòu)良好聲明在函數(shù)內(nèi)的局部變量是不能在外部訪問(wèn)的，同時(shí)，函數(shù)內(nèi)是可以嵌套函數(shù)的，內(nèi)層函數(shù)可以訪問(wèn)外層函數(shù)的變量，假如某個(gè)函數(shù)返回內(nèi)層函數(shù)的引用，那么就可以間接地在外層使用局部變量。

閉包的使用示例functionclosure(){vari=5;i++;alert(i);}//在closure方法外面是不能操作變量i的。下面兩次

//都會(huì)彈出6closure();closure();

假如我們要在方法外面給i遞增怎么辦？閉包的使用使用閉包閉包可以簡(jiǎn)單理解為：函數(shù)體內(nèi)聲明的函數(shù)，下面是示例程序functionclosure(){vari=5;functioniIncrement(){i++;alert(i);}returniIncrement;}

varv=closure();v();//打印6v();//打印7//在closure函數(shù)里面定義iIncrement函數(shù),并且返回這個(gè)函數(shù)對(duì)象//每次調(diào)用都會(huì)給i做累加，說(shuō)明外部操作了變量i，并且i會(huì)一直在內(nèi)存里。//這也是閉包的常用功能

閉包的使用

閉包的綜合示例（計(jì)數(shù)器）//閉包綜合例子functioncounter(){varn=0;return{count:function(){n++},reset:function(){n=0},get:function(){alert(n)}}}

總結(jié)：每次創(chuàng)建閉包，都會(huì)創(chuàng)建一個(gè)新的作用域和新的私有變量，互不干擾。

怎樣模擬java中的pojo（getter，setter）？

類(lèi)和原型原型簡(jiǎn)介

每一個(gè)js對(duì)象都跟另外一個(gè)對(duì)象關(guān)聯(lián)，這個(gè)js對(duì)象會(huì)從這“另一個(gè)”對(duì)象繼承屬性，這里的“另一個(gè)”就是指原型。每一個(gè)對(duì)象都從自己的原型里繼承屬性

類(lèi)和原型原型和對(duì)象

通過(guò)new構(gòu)造函數(shù)()這種方式可以創(chuàng)建一個(gè)對(duì)象，這個(gè)對(duì)象擁有這個(gè)“類(lèi)”所定義過(guò)的屬性和方法，表面上和java一樣，但其實(shí)創(chuàng)建過(guò)程是這樣的：new出來(lái)的對(duì)象繼承了自己的原型對(duì)象，也就是構(gòu)造函數(shù)的prototype屬性。所以說(shuō)：javascript其實(shí)沒(méi)有“類(lèi)”的概念，一切都是原型對(duì)象賦予的，并且javascript先天具有繼承的能力。

類(lèi)和原型通過(guò)原型實(shí)現(xiàn)繼承功能functionParent(){="afei";this.sex="男";}//創(chuàng)建一個(gè)Parent對(duì)象varp=newParent();functionStudent(){this.gradeId=5;}//把構(gòu)造函數(shù)的原型對(duì)象屬性設(shè)置為上面的Parent對(duì)象Stotype=p;//通過(guò)這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象會(huì)繼承p對(duì)象的屬性varstu=newStudent();alert(+":"+stu.sex+":"+stu.gradeId);

javascriptDom操作（網(wǎng)頁(yè)元素）8.1宿主對(duì)象是由js解釋器所嵌入的宿主環(huán)境定義的，目前js最大的一個(gè)宿主就是瀏覽器8.2瀏覽器的js宿主對(duì)象的入口是window對(duì)象其中window常用的api有：alert()setTimeout(func,time)：定時(shí)觸發(fā)setInterval(func,time)：定時(shí)循環(huán)觸發(fā)document：文檔對(duì)象

javascriptDom操作（網(wǎng)頁(yè)元素）document操作dom對(duì)象getElementById()：根據(jù)id屬性得到某個(gè)dom對(duì)象

getElementsByName():根據(jù)name屬性得到dom對(duì)象的集合getElementByTagName():根據(jù)tag的名稱(chēng)得到dom對(duì)象的集合createElement()：創(chuàng)建某類(lèi)tag的dom對(duì)象javascriptDom操作（網(wǎng)頁(yè)元素）

8.4網(wǎng)頁(yè)dom的常用apiappendChild():附加子dom元素到指定的dom