《JavaScript程序設(shè)計(jì)案例教程》課件-案例3

案例三、捕魚鍵盤獵手學(xué)習(xí)目標(biāo)知識鏈接案例實(shí)現(xiàn)效果演示目錄學(xué)完本章節(jié)應(yīng)該能做到的事情學(xué)習(xí)目標(biāo)壹學(xué)習(xí)目標(biāo)理解對象的概念。掌握對象的字面量語法和JSON數(shù)據(jù)格式。能訪問對象的成員。PPT模板/moban/掌握for..in和for..of。理解和掌握構(gòu)造函數(shù)。理解和掌握畫布。能使用鼠標(biāo)事件。能使用鍵盤事件。精通onload事件。理解作用域的概念。掌握閉包函數(shù)。能靈活使用對話框。掌握ajax。會播放聲音。理解和區(qū)分值傳遞與引用傳遞。效果演示完成本案例應(yīng)該具備的知識知識鏈接貳知識鏈接列表PPT模板/moban/對象的概念。對象的字面量語法和JSON數(shù)據(jù)格式。對象成員的訪問。for..in和for..of。構(gòu)造函數(shù)。畫布。鼠標(biāo)事件。鍵盤事件。onload事件。變量的作用域和閉包函數(shù)。三種對話框。Ajax。聲音的播放。函數(shù)參數(shù)的值傳遞和引用傳遞。對象的概念1JavaScript中的對象其實(shí)就是生活中具體事物的一個(gè)抽象此處的對象和你的對象一樣嗎?JS對象是無序?qū)傩缘募?。其屬性可以包含基本值、對象或函?shù)。它們是沒有順序的值。我們可以把JavaScript中的對象想象成鍵值對，其中值可以是數(shù)據(jù)和函數(shù)。在JS中對象的行為對應(yīng)著方法和特征對應(yīng)著屬性。對象的字面量語法和JSON數(shù)據(jù)格式2對象字面量就是創(chuàng)建對象的一種簡單容易閱讀的方法

JS中對象字面量語法指包圍在花括號中的零個(gè)或多個(gè)鍵值對。字面量寫法需要在末尾需加分號；表示結(jié)束；每個(gè)健值對都表示該對象的一個(gè)屬性，定義屬性時(shí)，每兩個(gè)屬性之間需要用逗號分隔；屬性名加雙引號。vargameinfo={ name:"捕魚鍵盤獵手", x:360, y:150, fontsize:"60px宋體"};對象的字面量語法和JSON數(shù)據(jù)格式2以對象的形式描述一下自己喜愛的書籍？varmylove={ name:”西游記”, author:”吳承恩”

};console.log(mylove);對象的字面量語法和JSON數(shù)據(jù)格式2JSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換格式，采用完全獨(dú)立于語言的文本格式，是理想的數(shù)據(jù)交換格式。同時(shí)，JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數(shù)據(jù)不須要任何特殊的API或工具包。在JSON中，有兩種結(jié)構(gòu)：對象和數(shù)組。對象varperson={"name":"Liza","password":"123"};一個(gè)對象以“{”開始，“}”結(jié)束，“key/value”之間運(yùn)用“,”分隔。數(shù)組varpersons=[{"name":"Liza","password":"123"},{"name":"Mike","password":"456"}];數(shù)組是值的有序集合。一個(gè)數(shù)組以“[”開始，“]”結(jié)束。值之間運(yùn)用“,”分隔。對象的字面量語法和JSON數(shù)據(jù)格式2以JSON的形式描述一下自己喜愛的書籍？varmylove={ “name”:”西游記”, “author”:”吳承恩”};console.log(mylove);varmylove={ name:”西游記”, author:”吳承恩”

};console.log(mylove);對象與JSON的描述有什么區(qū)別？對象的字面量語法和JSON數(shù)據(jù)格式2JSON與對象的區(qū)別：對象中成員名不用引號進(jìn)行包裹。JSON推薦使用雙引號來包裹成員名和字符串型的值。對象成員的訪問3方括號里面是屬性名01傳統(tǒng)的‘.’02數(shù)組方式形如：對象成員的訪問3以傳統(tǒng)方式訪問對象成員（Object1.html）varstartgame={ name:"開始游戲", x:460,y:250, fontsize:"40px宋體", cursor:"pointer“};console.log();console.log(startgame.x);對象成員的訪問3以數(shù)組的方式輸出（Object2.html）varstartgame={ name:"開始游戲", x:460, y:250, fontsize:"40px宋體", cursor:"pointer“};

for(variteminstartgame){ console.log(startgame[item]);}for..in和for..of4For..in上節(jié)的用法是什么？vararr=[1,2,3];letindex;for(indexinarr){ console.log(index,arr[index]);}for..in遍歷數(shù)組（forin2.html）for..in和for..of4vararr=[1,2,3];letval;for(valofarr){ console.log(val);}for..of遍歷數(shù)組（forof.html）for..in和for..of4forin與forof的區(qū)別是什么？構(gòu)造函數(shù)5構(gòu)造函數(shù)，是一種特殊的函數(shù)。作用：在創(chuàng)建對象時(shí)初始化對象，即為對象成員變量賦初始值。構(gòu)造函數(shù)5functionFruit(color,size){ this.color=color; this.size=size;}varapple=newFruit(“red”,5);varbanana=newFruit(“yellow”,6);console.log(apple);console.log(banana);通過水果構(gòu)造函數(shù)創(chuàng)建蘋果、香蕉、橘子對象。其特點(diǎn)在于這些對象都基于同一個(gè)模板創(chuàng)建，同時(shí)每個(gè)對象又有自己的特征。在類的構(gòu)造函數(shù)中使用this代表創(chuàng)建的對象。（ObjectFruit.html）構(gòu)造函數(shù)5functionPerson(name,age){ =name; this.age=age; this.run=function(){ console.log(“hi,I’m“++”,Icanrun”); }}Personp=newPerson(“小皮”,18);p.run();總結(jié)人應(yīng)該具有的屬性或方法/行為（ObjectPerson.html）構(gòu)造函數(shù)5普通函數(shù)與構(gòu)造函數(shù)的區(qū)別：構(gòu)造函數(shù)也是一個(gè)普通函數(shù)，創(chuàng)建方式和普通函數(shù)一樣，但構(gòu)造函數(shù)習(xí)慣上首字母大寫；構(gòu)造函數(shù)和普通函數(shù)的區(qū)別在于：調(diào)用方式不一樣。作用也不一樣（構(gòu)造函數(shù)用來新建實(shí)例對象）；調(diào)用方式不一樣， 普通函數(shù)的調(diào)用方式：直接調(diào)用fruit();

構(gòu)造函數(shù)的調(diào)用方式：需要使用new關(guān)鍵字來調(diào)用newFruit();(4)構(gòu)造函數(shù)的函數(shù)名與類名相同：Fruit()這個(gè)構(gòu)造函數(shù)，F(xiàn)ruit既是函數(shù)名，也是這個(gè)對象的類名；(5)返回值： 構(gòu)造函數(shù)若用return返回一個(gè)數(shù)組或?qū)ο蟮葟?fù)合類型數(shù)據(jù)，則構(gòu)造函數(shù)直接返回該數(shù)據(jù)，而不會返回原來創(chuàng)建的對象； 若返回的是基本類型數(shù)據(jù)，則返回的數(shù)據(jù)無效，依然會返回原來創(chuàng)建的對象。構(gòu)造函數(shù)5ES6提供了更接近傳統(tǒng)語言（java）的寫法，引入了Class（類）這個(gè)概念，作為對象的模板。ClassGame{ constructor(){ //構(gòu)造函數(shù)

} Init(){ //初始化

} Play(){ //進(jìn)行游戲

}}letGamegame=newGame();game.init();game.play();游戲引擎的類（class）語法構(gòu)造函數(shù)5constructor方法是類的默認(rèn)方法，通過new命令生成對象實(shí)例時(shí)，自動調(diào)用該方法。一個(gè)類必須有constructor方法。如果沒有顯式定義，一個(gè)空的constructor方法會被默認(rèn)添加。constructor方法默認(rèn)返回實(shí)例對象（即this）。構(gòu)造函數(shù)5用新語法重寫上一個(gè)實(shí)例--總結(jié)人應(yīng)該具有的屬性或方法/行為（ObjectPerson2.html）functionPerson(name,age){ =name; this.age=age; this.run=function(){ console.log(“hi,I’m“++”,Icanrun”); }}Personp=newPerson(“小皮”,18);p.run();classPerson(){ constructor(){ =name; this.age=age; } run(){ console.log(“hi,I’m“++”,Icanrun”); }}Personp=newPerson(“小皮”,18);p.run();畫布6canvas是HTML5新增的元素，可用于通過使用JavaScript中的腳本來繪制圖形。第一步：準(zhǔn)備畫布第二步：準(zhǔn)備畫筆第三步：繪制2D圖形畫布6第一步：準(zhǔn)備畫布。創(chuàng)建canvas標(biāo)簽并指定畫布的尺寸，指定畫布尺寸的方法有兩種，一是在HTML標(biāo)簽中指定，二是在JS中指定。<canvasid="cavsElem"width="400"height="300">您的瀏覽器不支持canvas</canvas><canvasid="cavsElem">您的瀏覽器不支持canvas</canvas><script>varcanvas=document.getElementById('cavsElem’);//不要使用canvas.style.width進(jìn)行賦值canvas.width=400;canvas.height=300;</script>畫布6第二步：準(zhǔn)備畫筆。要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調(diào)用getContext()方法并傳入上下文的名字。傳入"2d"，就可以取得2D上下文對象。varcontext=canvas.getContext('2d');畫布6第三步：繪制2D圖形。使用2D繪圖上下文提供的方法，可以繪制簡單的2D圖形，比如矩形、弧線和路徑。2D上下文的坐標(biāo)開始于<canvas>元素的左上角，原點(diǎn)坐標(biāo)是(0,0)，所有坐標(biāo)值基于這個(gè)坐標(biāo)原點(diǎn)計(jì)算，越向右x越大，越向下y越大。2D上下文的基本的繪圖方式有兩種：填充和描邊。顧名思義，填充就是用指定的顏色來填充圖形，描邊，就是繪制邊緣。這兩種方法分別為：fillStyle和strokeStyle。與矩形有關(guān)的方法包括fillRect()、strokeRect()和clearRect()。這三個(gè)方法都能接收4個(gè)參數(shù)：矩形的x坐標(biāo)、矩形的y坐標(biāo)、矩形寬度和矩形高度。這些參數(shù)的單位都是像素。畫布6繪制填充矩形（CanvasRectFill.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400;//不要使用canvas.style.width進(jìn)行賦值

canvas.height=300; varcontext=canvas.getContext("2d"); //繪制紅色矩形

context.fillStyle="#ff0000"; context.fillRect(10,10,50,50); //繪制半透明的藍(lán)色矩形

context.fillStyle="rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50);

</script>畫布6繪制描邊矩形（CanvasRectStroke.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400;//不要使用canvas.style.width進(jìn)行賦值

canvas.height=300;

varcontext=canvas.getContext("2d"); context.strokeStyle="#ff0000"; context.strokeRect(10,10,50,50); //繪制半透明的藍(lán)色描邊矩形

context.strokeStyle="rgba(0,0,255,0.5)"; context.strokeRect(30,30,50,50);

</script>畫布6清除矩形（CanvasRectClear.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400;canvas.height=300;

varcontext=canvas.getContext("2d"); context.fillStyle="#ff0000";//繪制紅色矩形

context.fillRect(10,10,50,50); //繪制半透明的藍(lán)色矩形

context.fillStyle="rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); //在兩個(gè)矩形重疊的地方清除一個(gè)小矩形

context.clearRect(40,40,10,10);</script>畫布6繪制復(fù)雜圖形的過程第一步：調(diào)用beginPath()第二步：繪制路徑第三步：填充或描邊或裁剪畫布6復(fù)雜圖形繪制路徑的方法方法描述arcTo(x1,y1,x2,y2,radius)從上一點(diǎn)開始繪制一條弧線，到(x2,y2)為止，并且以給定的半徑radius穿過(x1,y1)。bezierCurveTo(c1x,c1y,c2x,c2y,x,y)從上一點(diǎn)開始繪制一條曲線，到(x,y)為止，并且以(c1x,c1y)和(c2x,c2y)為控制點(diǎn)。lineTo(x,y)從上一點(diǎn)開始繪制一條直線，到(x,y)為止。moveTo(x,y)將繪圖游標(biāo)移動到(x,y)，不畫線。quadraticCurveTo(cx,cy,x,y)從上一點(diǎn)開始繪制一條二次曲線，到(x,y)為止，并且以(cx,cy)作為控制點(diǎn)。rect(x,y,width,height)從點(diǎn)(x,y)開始繪制一個(gè)矩形，寬度和高度分別由width和height指定。這個(gè)方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨(dú)立的形狀畫布6繪制時(shí)鐘（CanvasClock.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400; canvas.height=300;

varcontext=canvas.getContext("2d"); //后續(xù)代碼向右看

//開始路徑

context.beginPath(); //繪制外圓

context.arc(100,100,99,0,2*Math.PI,false); //繪制內(nèi)圓

context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //繪制分針

context.moveTo(100,100); context.lineTo(100,15); //繪制時(shí)針

context.moveTo(100,100); context.lineTo(35,100); //描邊路徑

context.stroke();</script>畫布6繪制文本（CanvasText.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400; canvas.height=300;

varcontext=canvas.getContext("2d"); //后續(xù)代碼向右看 context.fillStyle="red"; context.font="bold26px";//字體祥式

context.textAlign="start";//對齊方式為左對齊

context.textBaseline="top";//基線

context.fillText("世界你好",100,100,200);</script>畫布6drawImage()方法在畫布上繪制圖像、畫布或視頻。它有3種用法：語法1：context.drawImage(img,x,y);語法2：context.drawImage(img,x,y,width,height);語法3：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);其參數(shù)：

img規(guī)定要使用的圖像、畫布或視頻；

sx可選，表示源圖像中開始剪切的x坐標(biāo)位置；

sy可選，表示源圖像中開始剪切的y坐標(biāo)位置；

swidth可選，表示源圖像中被剪切圖像的寬度；

sheight可選，表示源圖像中被剪切圖像的高度；

x在畫布上放置圖像的x坐標(biāo)位置；

y在畫布上放置圖像的y坐標(biāo)位置；

width可選，表示要在畫布中繪制的圖像的寬度。（伸展或縮小圖像）；

height可選，表示要在畫布中繪制的圖像的高度。（伸展或縮小圖像）。畫布6在畫布中顯示氣泡圖片（CanvasImage.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400; canvas.height=300;

varcontext=canvas.getContext("2d"); varqipaoImg=newImage(); qipaoImg.src='./images/qipao.png'; qipaoImg.onload=function(){ context.drawImage(qipaoImg,0,0); };</script>思考：為什么要把drawImage方法寫到圖片的onload事件里呢？畫布6當(dāng)圖片比畫布小的時(shí)候，讓圖片填充滿畫布（CanvasImage1.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=800; canvas.height=800; canvas.style="border:1pxsolid#000"; varcontext=canvas.getContext("2d"); varfu=newImage(); fu.src='./images/fu.png';//福字的尺寸是633X633 fu.onload=function(){ //下面這句的效果，如下面左圖所示

//context.drawImage(fu,0,0); //下面這句的效果，如下面右圖所示

context.drawImage(fu,0,0,fu.width,fu.height,0,0,canvas.width,canvas.width); };</script>畫布6當(dāng)圖片比畫布大的時(shí)候，讓圖片填充滿畫布（CanvasImage2.html）<canvasid="cavsElem">

您的瀏覽器不支持canvas</canvas><scripttype="text/javascript"> varcanvas=document.getElementById('cavsElem'); canvas.width=400; canvas.height=400; canvas.style="border:1pxsolid#000"; varcontext=canvas.getContext("2d"); varfu=newImage(); fu.src='./images/fu.png';//福字的尺寸是633X633 fu.onload=function(){ //下面這句的效果，如下面左圖所示

//context.drawImage(fu,0,0); //下面這句的效果，如下面右圖所示

context.drawImage(fu,0,0,fu.width,fu.height,0,0,canvas.width,canvas.width); };</script>鼠標(biāo)事件7鼠標(biāo)事件是Web開發(fā)中最常用的一類事件。例如，鼠標(biāo)滑過時(shí)，切換Tab欄顯示的內(nèi)容；利用鼠標(biāo)拖拽曳狀態(tài)框，調(diào)整它的顯示位置等，這些常見的網(wǎng)頁效果都會用到鼠標(biāo)事件。表3-1鼠標(biāo)事件類型事件名稱事件觸發(fā)時(shí)機(jī)click當(dāng)按下并釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)dblclick當(dāng)鼠標(biāo)雙擊時(shí)觸發(fā)mouseover當(dāng)鼠標(biāo)進(jìn)入時(shí)觸發(fā)mouseout當(dāng)鼠標(biāo)離開時(shí)觸發(fā)mousedown當(dāng)按下任意鼠標(biāo)按鍵時(shí)觸發(fā)mouseup當(dāng)釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)mousemove在元素內(nèi)當(dāng)鼠標(biāo)移動時(shí)持續(xù)觸發(fā)哪些事件已經(jīng)學(xué)習(xí)過？鼠標(biāo)事件7表3-2鼠標(biāo)事件中與位置有關(guān)的屬性位置屬性（只讀）描述clientX鼠標(biāo)指針位于瀏覽器頁面當(dāng)前窗口可視區(qū)的水平坐標(biāo)（X軸坐標(biāo)）clientY鼠標(biāo)指針位于瀏覽器頁面當(dāng)前窗口可視區(qū)的垂直坐標(biāo)（Y軸坐標(biāo)）pageX鼠標(biāo)指針位于文檔的水平坐標(biāo)（X軸坐標(biāo)），IE6~8不兼容pageY鼠標(biāo)指針位于文檔的垂直坐標(biāo)（Y軸坐標(biāo)），IE6~8不兼容screenX鼠標(biāo)指針位于屏幕的水平坐標(biāo)（X軸坐標(biāo)）screenY鼠標(biāo)指針位于屏幕的垂直坐標(biāo)（Y軸坐標(biāo)）鼠標(biāo)事件7<divid=”d1”style=”width:300px;height:300px;background:red;”></div><script>document.getElementById('d1').ondblclick=function(){ console.log('我是雙擊顯示的');}document.getElementById('d1').onmousedown=function(){console.log('我是鼠標(biāo)摁下提示');}document.getElementById('d1').onmouseup=function(){console.log('鼠標(biāo)抬起的提示');}document.getElementById('d1').onmousemove=function(){console.log('鼠標(biāo)移動的提示');}document.getElementById('d1').onmouseover=function(){console.log('鼠標(biāo)移入操作');}document.getElementById('d1').onmouseout=function(){console.log('鼠標(biāo)移出操作');}</script>鼠標(biāo)事件實(shí)例（MouseEvent2.html）鼠標(biāo)事件7<canvasid="game"></canvas><script>varcanvas=document.querySelector("#game");

//初始化畫布

canvas.style.border="1pxsolid#000";canvas.width=1100;canvas.height=600;//獲取畫筆

varcontext=this.canvas.getContext('2d');//加載背景圖

varbgImg=newImage();bgImg.src="./images/bg.jpg";

varstartgame={ name:"開始游戲", x:460,y:250, fontsize:"40px宋體",cursor:"pointer“ };在畫布中指定的區(qū)域內(nèi)鼠標(biāo)形狀改變（MouseEvent3.html）bgImg.onload=function(){ //繪制背景圖

context.drawImage(bgImg,0,0, bgImg.width,bgImg.height, 0,0,canvas.width,canvas.height); context.font=startgame.fontsize; context.fillStyle="#f00"; context.fillText(,startgame.x,startgame.y);}canvas.onmousemove=function(e){ letrect={x:startgame.x+e.target.offsetLeft, y:startgame.y+e.target.offsetTop, w:.length*40,h:40 }; if(e.x>rect.x&&e.x<rect.x+rect.w&&e.y<rect.y &&e.y>rect.y-rect.h) { this.style.cursor=startgame.cursor; } else { this.style.cursor='default’; }};</script>鍵盤事件8事件名稱事件觸發(fā)時(shí)機(jī)keypress當(dāng)任意鍵（Shift、Fn、CapsLock除外）按下時(shí)連續(xù)觸發(fā)keydown當(dāng)任意鍵按下時(shí)觸發(fā)keyup當(dāng)任意鍵彈起時(shí)觸發(fā)在JavaScript中，當(dāng)用戶操作鍵盤時(shí)，會觸發(fā)鍵盤事件，鍵盤事件主要包括3種類型，見表3-3。表3-3鍵盤事件鍵盤事件8實(shí)現(xiàn)鍵盤控制元素在頁面上移動；（類似游戲中的人物移動KeyEvent.html）<style> #person{ width:130px; position:absolute; top:0px;left:0px; }</style><imgsrc="images/p.jpg"id="person"><script>varstep=10;varperson=document.getElementById('person');functiongetCssProp(obj,prop){ varp=getComputedStyle(obj,null)[prop]; returnparseInt(p);}document.onkeypress=function(e){switch(e.key){ case's’: vartop=getCssProp(person,"top"); person.style.top=(top+step)+"px"; console.log('down'); break; case'd’: varleft=getCssProp(person,"left"); person.style.left=(left+step)+"px"; console.log('right'); break; case'a’: varleft=getCssProp(person,"left"); person.style.left=(left-step)+"px"; console.log('left'); break; case'w’: vartop=getCssProp(person,"top"); person.style.top=(top-step)+"px"; console.log('up'); break;}}</script>onload事件9用法一：onload通常用于<body>元素，在頁面完全載入后(包括圖片、css文件等等。)執(zhí)行腳本代碼。此種情況通常需要對頁面元素進(jìn)行一些屬性或內(nèi)容的修改，惹元素未加載就想操作它，則會出現(xiàn)錯(cuò)誤，這是一個(gè)代碼執(zhí)行時(shí)機(jī)的問題。它通常有以下幾種用法：在HTML中:<bodyonload="SomeJavaScriptCode">在JavaScript中:window.onload=function(){SomeJavaScriptCode};在JavaScript中:window.addEventListener(“l(fā)oad”,function(){SomeJavaScriptCode});onload事件9頁面加載完成后修改元素的內(nèi)容，對比兩段代碼，如有錯(cuò)誤找出錯(cuò)誤原因onload代碼段1（onload1.html）<head><script> document.getElementById('myid').innerHTML="新的內(nèi)容";</script></head>

<body> <pid="myid">修改這里的內(nèi)容</p></body>UncaughtTypeError:Cannotsetpropertiesofnull(setting'innerHTML')onload事件9onload代碼段2（onload2.html）<head><script> window.onload=function(){ document.getElementById('myid').innerHTML="新的內(nèi)容"; }</script></head>

<body> <pid="myid">修改這里的內(nèi)容</p></body>代碼段2與代碼段1對比一下，為什么代碼段2不出錯(cuò)了？onload事件9window.onload與window.addEventListener(“l(fā)oad”,…)的區(qū)別onload代碼段3（onload3.html）<head><script> window.onload=function(){ varmyp=document.getElementById('myid'); myp.innerHTML="新的內(nèi)容"; console.log(myp.innerHTML); } window.onload=function(){ varmyp=document.getElementById('myid'); myp.innerHTML="我也是新的內(nèi)容"; console.log(myp.innerHTML); }</script></head><body> <pid="myid">修改這里的內(nèi)容</p></body>運(yùn)行后顯示的是什么？onload事件9window.onload與window.addEventListener(“l(fā)oad”,…)的區(qū)別onload代碼段4（onload4.html）<head><script> window.addEventListener("load",function(){ varmyp=document.getElementById('myid'); myp.innerHTML="新的內(nèi)容"; console.log(myp.innerHTML); } window.addEventListener("load",function(){ varmyp=document.getElementById('myid'); myp.innerHTML="我也是新的內(nèi)容"; console.log(myp.innerHTML); }</script></head><body> <pid="myid">修改這里的內(nèi)容</p></body>運(yùn)行后顯示的是什么？onload事件9用法二：onload用于圖像加載完成時(shí)執(zhí)行腳本代碼。此種情況通常用于圖片已經(jīng)從服務(wù)器上下載完成后執(zhí)行一些操作，比如繪制圖片到畫布中，惹圖片未加載完成就繪制圖片則看不到圖片內(nèi)容，其實(shí)例在本章畫布內(nèi)容中有演示。它通常有以下幾種用法：在HTML中:<imgonload="SomeJavaScriptCode">在JavaScript中:varImg=newImage();Img.src="./images/bg.jpg";Img.onload=function(){SomeJavaScriptCode};在JavaScript中:varImg=newImage();Img.src="./images/bg.jpg";Img.addEventListener(“l(fā)oad”,function(){SomeJavaScriptCode});變量的作用域和閉包函數(shù)10作用域：即可以訪問變量的范圍0102全局作用域：當(dāng)前頁面的JS中任何位置都可以訪問局部作用域：當(dāng)前頁面的JS中某一塊代碼中可以訪問變量的作用域和閉包函數(shù)10變量的作用域（zuoyongyu.html）vara=1;functionfun1(){ vara=2; console.log(a);}functionfun2(){ console.log(a);}fun1();fun2();變量的作用域和閉包函數(shù)10可訪問性：變量是否允許訪問，允許訪問的范圍。安全性：是否存在訪問的不可控制性。這兩個(gè)特征是對立統(tǒng)一的。變量的作用域和閉包函數(shù)10假如我們要設(shè)計(jì)一個(gè)計(jì)數(shù)器，希望調(diào)用相應(yīng)方法時(shí)對數(shù)值進(jìn)行修改，不調(diào)用指定的方法不能修改數(shù)值。varnum=0;functionplus(){ num++; console.log(num);}plus();plus();方案一：functionplus(){ varnum=0; num++; console.log(num);}plus();plus();方案二：分析這2個(gè)方案運(yùn)行之后num的值分別是什么？能滿足設(shè)計(jì)要求嗎？變量的作用域和閉包函數(shù)10一個(gè)函數(shù)可以把它自己內(nèi)部的語句，和自己聲明時(shí)所處的作用域一起封裝成了一個(gè)密閉環(huán)境，我們稱為“閉包”（Closures）。它可以解決前面計(jì)數(shù)器的問題。varplus=function(){ varnum=0; returnfunction(){ num++; console.log(num); }}();//這里一定要調(diào)用一下plus();plus();安全的計(jì)數(shù)器（bibao.html）：plus到底代表的什么？為什么注釋處需要調(diào)用一下？分析這個(gè)方案運(yùn)行之后num的值是什么？能滿足設(shè)計(jì)要求嗎？變量的作用域和閉包函數(shù)10閉包的特征：一般有兩層函數(shù)需要的是第一層函數(shù)的作用域和第二層函數(shù)的功能缺一不可。三種對話框11常用的對話框有3種類型：0102提示類型：alert()選擇類型：confirm03輸入類型：prompt三種對話框11<scriptlanguage="javascript">alert(“學(xué)無上境”);</script>提示對話框（alert.html）三種對話框11<scriptlanguage="javascript">if(confirm(“你學(xué)會了嗎？”)==true) alert(“非常棒”);else alert(“不能放棄”);</script>選擇對話框（confirm.html）三種對話框11<scriptlanguage="javascript">varname=prompt("你叫什么名字？");if(name=="null"||name.length<1) alert("要多交流哦");else alert("你好"+name);</script>輸入對話框（prompt.html）Ajax12Ajax即AsynchronousJavaScriptandXml的縮寫，異步的JavaScript和Xml；Ajax12在JS中使用XmlHttpRequest對象異步的向服務(wù)器發(fā)送請求；服務(wù)器返回部分?jǐn)?shù)據(jù)，而不是一個(gè)完整的頁面，以頁面無刷新的效果更改頁面中的局部內(nèi)容。下面是在JS中使用ajax的步驟，基本遵照這個(gè)流程可靈活變化的地方不多。第一步：創(chuàng)建XMLHttpRequest對象varxmlhttp=newXMLHttpRequest();Ajax12第二步：onreadystatechange事件綁定表3-4XMLHttpRequest的重要屬性屬性描述onreadystatechange定義了當(dāng)readyState屬性發(fā)生改變時(shí)所調(diào)用的函數(shù)。readyState保存了XMLHttpRequest的狀態(tài)。0:請求未初始化1:服務(wù)器連接已建立2:請求已接收3:正在處理請求4:請求已完成且響應(yīng)已就緒status200:"OK"403:"Forbidden"404:"Pagenotfound"statusText以文本形式返回的數(shù)據(jù)最常用也是必須的就是在onreadystatechange事件中處理接收返回?cái)?shù)據(jù)。當(dāng)readyState值為4并且status值為200時(shí)表示正確得到返回?cái)?shù)據(jù)。Ajax12第二步：onreadystatechange事件綁定xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200) { //這里寫上處理返回?cái)?shù)據(jù)的代碼，返回?cái)?shù)據(jù)的獲取通過 xmlhttp.responseText或responseXML屬性; }}Ajax12xmlhttp.open(method,url,async);xmlhttp.send();第三步：發(fā)送請求表3-5XMLHttpRequest對象的重要方法方法描述open(method,url,async)規(guī)定請求的類型、URL以及是否異步處理請求。method：請求的類型；GET或POSTurl：文件在服務(wù)器上的位置async：true（異步）或false（同步）send(string)將請求發(fā)送到服務(wù)器。

string：僅用于POST請求Ajax12使用GET還是POST發(fā)送數(shù)據(jù)好？與POST相比，GET更簡單也更快，并且在大部分情況下都能用。然而，在以下情況中，請使用POST請求：不愿使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST沒有數(shù)據(jù)量限制）發(fā)送包含未知字符的用戶輸入時(shí)，POST比GET更穩(wěn)定也更可靠Ajax12本節(jié)與ajax有關(guān)的實(shí)例需要使用web服務(wù)器軟件，且演示用的所有文件需要放到服務(wù)器軟件指定的web目錄下。例：使用get方式請示數(shù)據(jù)（Ajax1.html）<head><scripttype="text/javascript">functionloadXMLDoc(){xmlhttp=newXMLHttpRequest();xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200) { document.getElementById("myDiv").innerHTML =xmlhttp.responseText; }}xmlhttp.open("GET","ajax1.txt",true);xmlhttp.send();}</script></head><body><div><h2>實(shí)例</h2>

<divid="myDiv"><h3>使用ajax改變這里的內(nèi)容</h3></div><buttontype="button" onclick="loadXMLDoc()">

通過AJAX改變內(nèi)容

</button></div></body>Ajax12當(dāng)服務(wù)器端文件的內(nèi)容更新后，在瀏覽器上刷新不一定能得到更新后的數(shù)據(jù)，這是因?yàn)闉g覽器具有緩存功能，當(dāng)瀏覽器請求緩存的網(wǎng)址時(shí)瀏覽器是從緩存中讀取數(shù)據(jù)的，不是從服務(wù)器上讀取。如何解決這個(gè)問題呢？即是說如何獲取新的數(shù)據(jù)呢？根據(jù)瀏覽器的緩存原理，只需要設(shè)置請求的網(wǎng)址不一樣即可，這里說的請求的網(wǎng)址并不是說真的改變訪問的目標(biāo)文件，看下面改善后的語句：xmlhttp.open("GET","ajax1.txt?r="+Math.random(),true);Ajax12若使用post方式請求，則需要注意有以下兩點(diǎn)與get方式不同：需要在send之前設(shè)置請求文件頭；發(fā)送數(shù)據(jù)的位置由open方法變更到了send方法。例：以post方式請求（Ajax2.html）<head><scripttype="text/javascript">functionloadXMLDoc(){xmlhttp=newXMLHttpRequest();xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200) { document.getElementById("myDiv").innerHTML =xmlhttp.responseText; }}xmlhttp.open("POST","Ajax2.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("name=xxw&age=40");}</script></head><body><div><h2>實(shí)例</h2>

<divid="myDiv"><h3>使用ajax改變這里的內(nèi)容</h3></div><buttontype="button" onclick="loadXMLDoc()">

通過AJAX改變內(nèi)容

</button></div></body>聲音的播放13HTML5提供了播放音頻文件的標(biāo)準(zhǔn)，即使用audio標(biāo)簽實(shí)現(xiàn)，但是這不在本課程的討論范圍內(nèi)，本課程中使用javascript播放音頻（無界面）。下面是示例代碼：varmp3=newAudio('xxx.mp3');//創(chuàng)建音頻對象mp3.play();//播放上面代碼中xxx.mp3是音頻文件的路徑，一般使用相對路徑；play方法使音頻開始播放，還有暫停、停止、重新加載的控制方法，如下面代碼所示。mp3.pause();//暫停mp3.stop();//停止mp3.load();//重載（重新開始）聲音的播放13<body> <script> varmp3=newAudio('https://…/00EB2.mp3'); mp3.play(); </script></body>Audio對象（audio3.html）此段代碼會報(bào)錯(cuò)：Uncaught(inpromise)DOMException:play()failedbecausetheuserdidn'tinteractwiththedocumentfirst.為什么？聲音的播放13<body> <button>Play</button> <script> varmp3=newAudio('https:/…/EB2.mp3'); document.querySelector('button').onclick=function(){ mp3.play(); } </script></body>改進(jìn)后的代碼（audio4.html）函數(shù)參數(shù)的值傳遞和引用傳遞14針對引用類型（復(fù)雜數(shù)據(jù)類型）01值傳參02引用傳參針對基本數(shù)據(jù)類型傳參可以理解為復(fù)制變量值?；绢愋蛷?fù)制后倆個(gè)變量完全獨(dú)立，之后任何一方改變都不會影響另一方；引用類型復(fù)制的是引用（即指針），之后的任何一方改變都會映射到另一方。函數(shù)參數(shù)的值傳遞和引用傳遞14functionadd(num){ num+=5; returnnum;}varsum=10;varresult=add(sum);console.log(sum);console.log(result);值傳參（paramVal.html）此案例的輸出結(jié)果是什么？函數(shù)參數(shù)的值傳遞和引用傳遞14functionchgName(obj){ =”hello”;}varperson=newObject();=“xxw”;chgName(person);console.log();引用傳參（paramRef.html）此案例的輸出結(jié)果是什么？完成本章綜合案例案例實(shí)現(xiàn)貳背景場景設(shè)計(jì)思路1背景場景是本游戲中所有界面的背景環(huán)境，游戲的主題是在海底中通過按鍵（每個(gè)魚身上會有一個(gè)鍵盤字母）擊殺游魚來獲得游戲積分?？傮w上分為三個(gè)場景：歡迎界面游戲界面排行榜界面。所有界面中都以同一幅海底圖片作為背景，并且這個(gè)背景中會不時(shí)冒出氣泡以烘托氛圍。背景場景設(shè)計(jì)實(shí)現(xiàn)2游戲引擎類GameEngine畫布背景圖片bgImgPath畫布寬bgWidth畫布高bgHeight畫布?xì)馀輸?shù)據(jù)arr_of_qipao游戲界面標(biāo)識state入口方法init()主渲染方法draw更新氣泡數(shù)據(jù)的方法generateQiPao氣泡的產(chǎn)生和消亡generateQiPao構(gòu)造函數(shù)constructor()主背景圖片的路徑所有的氣泡數(shù)據(jù)位置、大小、運(yùn)動速度和方向0時(shí)表示歡迎界面，為1時(shí)表示游戲界面，為2時(shí)表示排行榜界面初始化初始化畫布、加載圖片啟動氣泡生成線程和主渲染線程；開始監(jiān)聽畫布的鼠標(biāo)事件和鍵盤事件生成新氣泡、清除已消失氣泡更新氣泡的位置等渲染畫布尺寸氣泡類QiPao背景場景設(shè)計(jì)實(shí)現(xiàn)2實(shí)現(xiàn)代碼：classGameEngine{constructor(){this.bgImgPath="./images/bg.jpg";this.bgWidth=1100;this.bgHeight=600;this.arr_of_qipao=newArray();//氣泡數(shù)組

this.state=0;//0：開始界面，1：游戲中，2：排行榜

}init(){ ……}

。。。}背景場景設(shè)計(jì)實(shí)現(xiàn)2實(shí)現(xiàn)代碼：init初始化畫布init(elem){//獲取畫布

this.canvas=document.querySelector(elem);if(this.canvas==null)return;//初始化畫布

this.canvas.style.border="1pxsolid#000";this.canvas.width=this.bgWidth;this.canvas.height=this.bgHeight;//獲取畫筆

this.context=this.canvas.getContext('2d');//加載背景圖

this.bgImg=newImage();this.bgImg.src=this.bgImgPath;

//加載氣泡圖

this.qipaoImg=newImage();this.qipaoImg.src='./images/qipao2.png';this.qipaoImg.onload=(function(game){ returnfunction(){ game.generateQiPao(); game.draw(); };})(this);this.canvas.addEventListener('mousemove',this.mousemove);this.canvas.addEventListener('mousedown',this.mousedown);document.gameObj=this;//可以在keypress中訪問document.addEventListener('keypress',this.keypress);}//init結(jié)束背景場景設(shè)計(jì)實(shí)現(xiàn)2實(shí)現(xiàn)代碼：generateQiPao產(chǎn)生氣泡generateQiPao(){vargame=this;varnextQiPao=Math.randomNumber(500,1500);varnewQiPao=function(){if(game.arr_of_qipao.length<5)//生成新氣泡

{game.arr_of_qipao.push(newQiPao(game.bgWidth,game.bgHeight));}//刪除超出邊界的氣泡

leti=0;while(i<game.arr_of_qipao.length){if(game.arr_of_qipao[i].y<0){game.arr_of_qipao.splice(i,1);//刪除

}elsei++;}nextQiPao=Math.randomNumber(500,1500);setTimeout(newQiPao,nextQiPao);};setTimeout(newQiPao,nextQiPao);}背景場景設(shè)計(jì)實(shí)現(xiàn)2實(shí)現(xiàn)代碼：draw主繪制線程draw(){vargame=this;varupdateGame=function(){//繪制背景圖

game.context.drawImage(game.bgImg,0,0,game.bgImg.width,game.bgImg.height, 0,0,game.canvas.width,game.canvas.height);//平鋪

//繪制氣泡

for(letqpofgame.arr_of_qipao){qp.draw(game.context,game.qipaoImg);qp.update();}//繪制各界面 。。。

};setInterval(updateGame,game.updateInterval);}背景場景設(shè)計(jì)實(shí)現(xiàn)2實(shí)現(xiàn)代碼：氣泡類functionQiPao(maxX,maxY){//氣泡對象的構(gòu)造函數(shù)

this.x=Math.randomNumber(0,maxX);//隨機(jī)坐標(biāo)

this.y=Math.randomNumber(0,maxY);this.size=Math.randomNumber(10,30);this.speed=Math.randomNumber(5,50);//速度

this.update=function(){this.y=this.y-this.speed;}this.draw=function(context,qipaoImg){context.drawImage(qipaoImg,0,0,qipaoImg.width,qipaoImg.height,this.x,this.y,this.size,this.size);}}//Math不能實(shí)例化，所以不能使用prototype擴(kuò)展Math.randomNumber=function(min,max){//生成隨機(jī)數(shù)字

letr=Math.random()*(max-min);returnMath.round(min+r);}背景場景設(shè)計(jì)實(shí)現(xiàn)2<canvasid="game">

您的瀏覽器不支持畫布</canvas><script>vargame=newGameEngine();game.init('#game');</script>在HTML文件中設(shè)置canvas標(biāo)簽，并在嵌入式j(luò)s代碼中創(chuàng)建GameEngine對象，并調(diào)用它的init方法，init方法傳遞的是畫布的選擇器。歡迎界面的設(shè)計(jì)思路3在歡迎界面中在大約水平居中的位置從上往下依次顯示游戲名稱、“開始游戲”按鈕、“排行榜”按鈕和作者信息。當(dāng)鼠標(biāo)移動到“開始游戲”按鈕和“排行榜”按鈕上時(shí)鼠標(biāo)顯示成小手的形狀。歡迎界面的實(shí)現(xiàn)4在GameEngine類的構(gòu)造函數(shù)中增加對象startFace表示歡迎界面，它包含title、start、phb和author四個(gè)子對象，分別表示游戲名稱、開始游戲按鈕、排行榜按鈕和作者；這些對象具有name屬性表示要顯示的字符串；x和y屬性表示顯示位置的坐標(biāo)；fontsize屬性表示顯示的字體和大小；cursor屬性表示顯示的鼠標(biāo)形狀。this.startFace={ title:{ name:"捕魚鍵盤獵手",x:360,y:150, fontsize:"60px宋體" }, start:{ name:"開始游戲",x:460,y:250, fontsize:"40px宋體",cursor:"pointer"}, phb:{ name:"排行榜",x:480,y:350, fontsize:"40px宋體",cursor:"pointer"}, author:{ name:"薛現(xiàn)偉",x:490,y:560, fontsize:"30px宋體"}};歡迎界面的實(shí)現(xiàn)4在GameEngine類的主渲染方法draw中，繪制氣泡代碼的后面添加如下代碼進(jìn)行各個(gè)界面的繪制，game.state是0的時(shí)候表示歡迎界面。以下代碼中的forin循環(huán)遍歷startFace子對象進(jìn)行字符串的繪制。

//繪制各界面switch(game.state){case0: for(letkeyingame.startFace) { varitem=game.startFace[key]; game.context.font=item.fontsize; game.context.fillStyle="#f00"; game.context.fillText(,item.x,item.y); }break;}歡迎界面的實(shí)現(xiàn)4在鼠標(biāo)移動事件的監(jiān)聽函數(shù)mousemove中實(shí)時(shí)監(jiān)測鼠標(biāo)位置，當(dāng)鼠標(biāo)位置位于“開始游戲”按鈕和“排行榜”按鈕文字上方時(shí)讓畫布顯示小手的形狀，鼠標(biāo)在其他位置時(shí)顯示默認(rèn)的指針形狀。mousemove(e){switch(game.state){case0://歡迎界面遍歷顯示小手的區(qū)域

for(letkeyingame.startFace){ varitem=game.startFace[key]; if('cursor'initem) { letfontsize=parseInt(item.fontsize); letrect={x:item.x+e.target.offsetLeft, y:item.y+e.target.offs