《網(wǎng)站前端技術》（梁玲）621-7 教案 第23課 JavaScript基礎六_第1頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第23課 JavaScript基礎六_第2頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第23課 JavaScript基礎六_第3頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第23課 JavaScript基礎六_第4頁
《網(wǎng)站前端技術》（梁玲）621-7 教案 第23課 JavaScript基礎六_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第23課JavaScript基礎（六）課時2課時（90min）教學目標知識技能目標：（1）掌握BOM常用的方法（2）能夠根據(jù)效果圖，使用JavaScript在網(wǎng)頁上繪制圖形素質目標：增加JavaScript相關知識儲備，鞏固所學理論知識，提升實踐能力教學重難點教學重點：BOM常用的方法教學難點：使用JavaScript在網(wǎng)頁上繪制圖形教學方法問答法、討論法、講授法、實踐練習法教學用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學設計第1節(jié)課：→→→傳授新知（28min）→頭腦風暴（10min）第2節(jié)課：→綜合案例（35min）→課堂小結（3min）→作業(yè)布置（2min）教學過程主要教學內(nèi)容及步驟設計意圖第一節(jié)課課前任務【教師】布置課前任務，和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP或其他學習軟件，完成課前任務請大家了解瀏覽器對象模型BOM的相關內(nèi)容?！緦W生】完成課前任務通過課前任務，使學生了解本次課的主要內(nèi)容，增加學生的學習興趣考勤

（2min）【教師】使用文旌課堂APP進行簽到【學生】按照老師要求簽到培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入（5min）【教師】提出以下問題什么是瀏覽器對象模型BOM？【學生】思考、舉手回答【教師】通過學生的回答引入要講的知識通過問題導入的方法，引導學生主動思考，激發(fā)學生的學習興趣傳授新知

（28min）4.13瀏覽器對象模型BOM【教師】講解瀏覽器對象模型BOM常用的方法【課堂互動】?【教師】提問瀏覽器對象模型有什么作用？?【學生】聆聽、思考、回答瀏覽器對象模型（browserobjectmodel，BOM）用于描述對象與對象之間層次關系的模型，它提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結構。4.13.1JavaScriptWindowwindow對象表示一個瀏覽器窗口，所有瀏覽器都支持window對象。所有全局JavaScript對象、函數(shù)和變量自動成為window對象的成員。其中，全局變量是window對象的屬性；全局函數(shù)是window對象的方法?！菊n堂互動】?【教師】提問window對象有哪些方法？?【學生】聆聽、思考、回答window對象的方法有window.open()、window.close()、window.moveTo()、window.resizeTo()等。window.open()用于在指定窗口打開指定的鏈接，并設定窗口參數(shù)，如寬度、高度等，其語法格式如下：window.open(URL,windowName,parameterlist)【示例4-13-1】在HTML文檔<body>標簽內(nèi)輸入以下代碼：<inputtype="button"value="百度鏈接"onclick="window.open('','blank','400px','300px')">【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示效果：頁面中顯示按鈕“百度鏈接”，單擊該按鈕，在新的窗口打開百度首頁，窗口大小為寬400px，高300px。window.close()用于關閉當前窗口，其語法格式如下：window.close()window.moveTo()用于移動當前窗口，其語法格式如下：window.moveTo(水平方向位移,垂直方向位移)window.resizeTo()用于調整當前窗口大小，其語法格式如下：window.resizeTo(窗口寬度,窗口高度)4.13.2JavaScriptScreen在JavaScript中，window.screen對象包含屏幕的信息。因為window是全局對象，所以window.screen可以簡寫為screen。screen對象常用的屬性有screen.width、screen.height、screen.availWidth、screen.availHeight、screen.colorDepth、screen.pixelDepth等。screen.width用于返回以像素計的屏幕寬度。screen.height用于返回以像素計的屏幕高度。screen.availWidth用于返回以像素計的訪問者屏幕寬度，即屏幕寬度減去窗口工具條等元素的寬度。screen.availHeight用于返回以像素計的訪問者屏幕高度，即屏幕高度減去窗口工具條等元素高度。screen.colorDepth用于返回一種顏色的比特數(shù)?，F(xiàn)代計算機一般為24位或36位，更老的計算機可能為14位，異常古老的手機為8位。screen.pixelDepth用于返回屏幕像素深度?！臼纠?-13-2】在HTML文檔<body>標簽內(nèi)輸入以下代碼：<divid="text1"></div><divid="text2"></div><divid="text3"></div><divid="text4"></div><divid="text5"></div><divid="text6"></div>在HTML文檔<script>標簽內(nèi)輸入以下代碼：window.onload=function(){ document.getElementById("text1").innerHTML="ScreenWidth="+screen.

width; document.getElementById("text2").innerHTML="ScreenHeight="+screen.

height; document.getElementById("text3").innerHTML="ScreenAvailWidth="+screen.availWidth; document.getElementById("text4").innerHTML="ScreenAvailHeight="+screen.availHeight; document.getElementById("text5").innerHTML="ScreenColorDepth="+screen.colorDepth; document.getElementById("text6").innerHTML="ScreenPixelDepth="+screen.pixelDepth;}【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示【教師】ppt展示“頁面顯示效果”圖片（詳見教材），并講解效果：頁面中顯示<div>標簽的內(nèi)容，該內(nèi)容是屏幕的信息數(shù)據(jù)。4.13.3JavaScriptLocation【課堂互動】?【教師】提問window.location對象有什么作用？?【學生】聆聽、思考、回答在JavaScript中，window.location對象用于獲取當前頁面地址信息，也可以用來重新定向到新頁面。該對象可以不帶前綴window，簡寫為location。location對象常用的屬性和方法有l(wèi)ocation、location.hostname、location.pathname、tocol、location.port、location.assign()等。location用于返回當前頁面地址或設置重新定位的頁面地址。location.hostname用于返回當前頁面的主機域名。location.pathname用于返回當前頁面所在路徑。tocol用于返回當前頁面的web協(xié)議。location.port用于返回當前頁面的主機端口。location.assign()用于將當前頁面重新定向到指定地址?！臼纠?-13-3】在HTML文檔<body>標簽內(nèi)輸入以下代碼：<divid="text1"></div><divid="text2"></div><divid="text3"></div><divid="text4"></div><divid="text5"></div><inputtype="button"value="重新定向1"onclick="window.location='';"><inputtype="button"value="重新定向2"onclick="window.location.assign('');">在HTML文檔<script>標簽內(nèi)輸入以下代碼：window.onload=function(){ document.getElementById("text1").innerHTML="頁面位置是"+window.location; document.getElementById("text2").innerHTML="主機域名是"+window.location.hostname; document.getElementById("text3").innerHTML="頁面路徑是"+window.location.pathname; document.getElementById("text4").innerHTML="Web協(xié)議是"+window.tocol; document.getElementById("text5").innerHTML="主機端口號是"+window.location.port;}【教師】組織學生分組上機完成上面的任務，并在各組中挑選一位學生進行演示，演示完成后教師進行點評【學生】聆聽、上機操作、演示【教師】ppt展示“頁面效果”圖片（詳見教材），并講解效果：頁面中顯示<div>標簽的內(nèi)容（該內(nèi)容是當前頁面地址信息）和兩個按鈕。任意單擊其中一個按鈕，頁面跳轉至百度首頁?！咎崾尽俊臼纠?/p>

4-13-3】在本地服務器上實現(xiàn)，實現(xiàn)方法這里不做詳細介紹，重點了解window.location對象常用屬性和方法的作用即可。當http協(xié)議主機端口號為默認值80和https默認端口號為443時，window.location對象location.port屬性返回的主機端口號不顯示。4.13.4JavaScriptHistory在JavaScript中，window.history對象包含瀏覽器歷史，該對象常用的方法有history.back()、history.forward()等。history.back()后退方法，相當于點擊瀏覽器后退按鈕。history.forward()前進方法，相當于點擊瀏覽器前進按鈕。【學生】聆聽、記錄、理解通過教師講解、課堂互動、演示操作等方式，使學生了解瀏覽器對象模型BOM常用的方法頭腦風暴（10min）【教師】根據(jù)頭腦風暴主題，組織學生分組開展討論根據(jù)各隊伍的網(wǎng)站主題，討論如何設置頁面中顯示<div>標簽的內(nèi)容（該內(nèi)容是當前頁面地址信息）和兩個按鈕。任意單擊其中一個按鈕，頁面跳轉至百度首頁?！緦W生】思考、討論通過頭腦風暴的形式，活躍課堂氣氛，引發(fā)學生思考，培養(yǎng)學生的創(chuàng)新能力和團隊精神第二節(jié)課問題導入（5min）【教師】提出以下問題思考如何使用JavaScript在網(wǎng)頁上繪制圖形？【學生】思考、舉手回答通過提問引導學生思考本節(jié)課內(nèi)容綜合案例

（35min）4.14綜合案例——美麗的時鐘【教師】講解在網(wǎng)頁上繪制時鐘的具體流程該項目實現(xiàn)的網(wǎng)頁中使用了HTML5新增加的一個專門用于繪制圖形的canvas元素。但事實上，該元素本身是沒有繪制圖形的能力，它只是顯示一張設定好背景色的畫布，然后借助JavaScript在網(wǎng)頁上繪制圖形?！窘處煛縫pt展示“時鐘最終效果“圖片（詳見教材），并講解1.搭建網(wǎng)站，新建并關聯(lián)相關文件（1）在C盤上新建文件夾，命名為“clock”，此文件夾作為該項目站點。（2）在項目站點中新建js文件夾和index.html文件。其中，js文件夾用于存放JavaScript文件；index.html文件是網(wǎng)站首頁的HTML文件。（3）在項目站點js文件夾中創(chuàng)建index.js文件。（4）編輯index.html的基本結構，并利用<script>標簽導入index.js文件，代碼如下：<!doctypehtml><htmllang="en"><head> <metacharset="UTF-8"> <title>美麗的時鐘</title> <scriptsrc="js/fun.js"></script></head><body></body></html>2.添加畫布編輯index.html文件，在<body>標簽內(nèi)輸入<canvas>標簽，并設置畫布的大小，即寬為500px，高為500px，同時設置id的屬性值為clock，代碼如下：<canvaswidth="500"height="500"id="clock"> 您的瀏覽器不支持<canvas>標簽</canvas>此時，如果使用谷歌瀏覽器打開index.html文件，頁面中不會顯示標簽的內(nèi)容。但是，IE8.0版本以下的瀏覽器會因為不兼容<canvas>標簽的問題，導致頁面中顯示<canvas>標簽的內(nèi)容“您的瀏覽器不支持<canvas>標簽”。3.使用JavaScript方法獲取<canvas>標簽，并獲取畫布的2D渲染上下文varclock=document.getElementById("clock");varcxt=clock.getContext("2d");【提示】以下封裝的相關函數(shù)涉及cxt對象，均需要在頁面窗口加載事件中封裝。4.封裝繪制圓的函數(shù)circle(r,color,w)，并繪制表盤外圓和中心圓（1）創(chuàng)建繪制圓的函數(shù)circle(r,color,w)?！菊n堂互動】?【教師】提問繪制圓的步驟有哪些？?【學生】聆聽、思考、回答繪制圓的步驟包括：設置線條寬度、設置線條顏色、起始一條路徑、繪制曲線和繪制已定義的路徑。其中，繪制曲線包含6個參數(shù)，依次是圓心的水平坐標值、圓心的垂直坐標值、半徑、圓弧起始點角度、圓弧終止點角度、畫弧的方向（false為逆時針，true為順時針）。繪制圓的函數(shù)circle(r,color,w)將畫布中心為設置圓心，并將半徑、顏色、線條寬度設置為形參，以便于繪制不同的圓，代碼如下：functioncircle(r,color,w){ cxt.lineWidth=w;//設置線條寬度 cxt.strokeStyle=color;//設置線條顏色 cxt.beginPath();//起始一條路徑 cxt.arc(250,250,r,0,360,false);//繪制曲線,圓心坐標為畫布中心（250,250） cxt.stroke();//繪制已定義的路徑}（2）調用函數(shù)circle(r,color,w)繪制表盤外圓，設置半徑為200，顏色為blue，線條寬度為7，代碼如下：circle(200,"blue",7);（3）調用函數(shù)circle(r,color,w)繪制表盤中心圓，設置半徑為10，顏色為red，線條寬度為2，代碼如下：circle(10,"red",2);【教師】ppt展示“繪制表盤外圓和中心圓效果”圖片（詳見教材）5.封裝繪制表盤刻度線的函數(shù)line(i)，并繪制時刻度線和分刻度線（1）創(chuàng)建繪制表盤刻度線的函數(shù)line(i)，代碼如下：functionline(i){ cxt.save();//將后續(xù)（2）（3）（4）中的代碼添加到此處 cxt.restore(); }該函數(shù)中為防止循環(huán)創(chuàng)建線段覆蓋其他線段，在函數(shù)開頭利用save()保存當前畫布狀態(tài)，在函數(shù)結尾利用restore()返回之前保存的繪圖狀態(tài)。（2）設置筆觸顏色為黑色，映射畫布新的原點坐標為（250，250），旋轉的角度為i*6度（換算成弧度為i*6*Math.PI/180），起始一條路徑，代碼如下：cxt.strokeStyle="#000";cxt.translate(250,250);cxt.rotate(i*6*Math.PI/180);cxt.beginPath();（3）設置線條寬度，并設置移動路徑到指定點。當i能被5整除時，線條寬度為7，指定點為（0，?170）；當i不能被5整除時，線條寬度為5，指定點為（0，?180），代碼如下：if(i%5==0){ cxt.lineWidth=7; cxt.moveTo(0,-170);}else{ cxt.lineWidth=7; cxt.moveTo(0,-180); }（4）添加一個新的點為（0，?190），繪制已定義路徑，代碼如下：cxt.lineTo(0,-190);cxt.stroke();（5）通過for循環(huán)語句調用line(i)函數(shù)繪制60條刻度線，代碼如下：for(vari=0;i<60;i++){ line(i);}【教師】ppt展示“繪制時鐘刻度線效果”圖片（詳見教材）6.封裝繪制時、分、秒針的函數(shù)needle(color,w,r,s,t)【課堂互動】?【教師】提問繪制時、分、秒針需要用到什么函數(shù)？?【學生】聆聽、思考、回答（1）創(chuàng)建繪制時、分、秒針的函數(shù)needle(color,w,r,s,t)，首先保存當前畫布狀態(tài)，代碼如下：functionneedle(color,w,r,s,t){ cxt.save();//將后續(xù)（2）（3）中的代碼添加到此處}（2）設置筆觸顏色為color，線條寬度為w，映射原點坐標為（250，250），旋轉角度為r（換算成弧度為r*Math.PI/180），代碼如下：cxt.strokeStyle=color;cxt.lineWidth=w;cxt.translate(250,250);cxt.rotate(r*Math.PI/180);（3）起始一條路徑，將路徑移動到（0，s），添加新的點（0，t），繪制已有路徑，返回之前保存的繪圖狀態(tài)，代碼如下：cxt.beginPath();cxt.moveTo(0,s);cxt.lineTo(0,t);cxt.stroke();cxt.restore();7.封裝美化秒針的函數(shù)preSec(r)（1）創(chuàng)建美化秒針的函數(shù)preSec(r)，首先保存當前畫布狀態(tài)，設置筆觸顏色為紅色，設置線條寬度為2，映射原點坐標為（250，250），旋轉角度為r（換算成弧度為r*Math.PI/180），代碼如下：functionpreSec(r){ cxt.save(); cxt.lineWidth=2; cxt.strokeStyle="red"; cxt.translate(250,250); cxt.rotate(r*Math.PI/180); cxt.beginPath();//將后續(xù)（2）（3）（4）中的代碼添加到此處}（2）起始一條路徑，以（0，?150）為圓心繪制半徑為3的逆時針圓，代碼如下：cxt.beginPath();cxt.arc(0,-150,3,0,360,false);（3）設置填充顏色為灰色，并填充，代碼如下：cxt.fillStyle="#808080";cxt.fill();（4）繪制已有路徑，返回之前保存的繪圖狀態(tài)，代碼如下：cxt.stroke();cxt.restore();8.封裝時鐘顯示當前時間的函數(shù)drawPoint()（1）創(chuàng)建時鐘顯示當前時間的函數(shù)drawPoint()，定義變量now，獲取當前時間，接著定義變量h、min、sec分別獲取時、分、秒，代碼如下：functiondrawPoint(){ varnow=newDate(); varh=now.getHours();//將后續(xù)（2）中的代碼添加到此處 varmin=now.getMinutes(); varsec=now.getSeconds();//將后續(xù)（3）（4）（5）（6）中的代碼添加到此處}（2）刷新h的值，保證h為12進制，代碼如下：h=h>12?h-12:h;（3）繪制時針，顏色為黑色，線條寬度為10，相對原點起點為20，終點為?60，旋轉的角度為h*30+min/60*30，代碼如下：needle("#000",10,20,-60,(h*30+min/60*30));（4）繪制分針，顏色為灰色，線條寬度為6，相對原點起點為30，終點為?90，旋轉角度為min*6，代碼如下：needle("#808080",6,30,-90,min*6);（5）繪制秒針，顏色為紅色，線條寬度為2，相對于原點起點為35，終點為?180，旋轉角度為sec*6，代碼如下：needle("red",2,35,-180,sec*6);（6）美化秒針。preSec(sec*6);【教師】ppt展示“時鐘顯示當前時間的效果”圖片（詳見教材）時鐘顯示的時間為當前時間，但各指針并不隨時間的推移而行走。9.封裝繪制表盤的函數(shù)draw()，優(yōu)化程序（1）創(chuàng)建繪制表盤的函數(shù)draw()，清除500*500的畫布像素，代碼如下：functiondraw(){ cxt.clearRect(0,0,500,500);//將后續(xù)（2）（3）（4）（5）（6）中的代碼添加到此處}（2）繪制表盤的外圓，代碼如下：circle(200,"blue",7);（3）繪制60個刻度線，代碼如下：for(vari=0;i<60;i++){ line(i);}（4）繪制時、分、秒針，代碼如下：drawPoint();（5）繪制表盤中心

溫馨提示

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

評論

0/150

提交評論