HTML5教案第22講 JavaScript函數(shù)2_第1頁
HTML5教案第22講 JavaScript函數(shù)2_第2頁
HTML5教案第22講 JavaScript函數(shù)2_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

web前端開發(fā)JavaScript函數(shù)（教案）教學(xué)內(nèi)容及教學(xué)過程說明步驟一問題引入定義函數(shù)后，我們?nèi)绾卫煤瘮?shù)解決問題呢？問題1：如何調(diào)用函數(shù)？回答1：。問題2：函數(shù)解決實際問題？回答2：。步驟二講授6.1函數(shù)的調(diào)用6.1.1函數(shù)調(diào)用(1)作為一個函數(shù)調(diào)用。如，函數(shù)名(參數(shù));這種方式，這種情況函數(shù)不屬于任何對象。但是在JavaScript中它始終是默認(rèn)的全局對象（全局對象是HTML頁面本身，所以函數(shù)是屬于HTML頁面）。(2)使用構(gòu)造函數(shù)調(diào)用函數(shù)。如，varx=new函數(shù)名(參數(shù));這種方式，如果函數(shù)調(diào)用前使用了new關(guān)鍵字，則是調(diào)用了構(gòu)造函數(shù)。這看起來就像創(chuàng)建了新的函數(shù)，但實際上JavaScript函數(shù)是重新創(chuàng)建的對象。(3)函數(shù)作為方法調(diào)用。JavaScript中可以將函數(shù)定義為對象的方法。(4)作為函數(shù)方法調(diào)用函數(shù)。在JavaScript中，函數(shù)是對象。JavaScript函數(shù)有它的屬性和方法。call()和apply()是預(yù)定義的函數(shù)方法。兩個方法可用于調(diào)用函數(shù)，兩個方法的第一個參數(shù)必須是對象本身。6.1.2函數(shù)的閉包如果在一個函數(shù)內(nèi)部，對在外部作用域(但不是全局作用域)的變量進(jìn)行引用，那么內(nèi)部函數(shù)就被認(rèn)為是閉包(closure)。閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，在本質(zhì)上，閉包是函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁。閉包的特點：(1)以讀取自身函數(shù)外部的變量(沿著作用域鏈尋找)先從自身開始查找，如果自身沒有才會繼續(xù)往上級查找，自身如果擁有將直接調(diào)用。(哪個離的最近就用哪一個)；(2)延長內(nèi)部變量的生命周期；(3)函數(shù)b嵌套在函數(shù)a內(nèi)部；(4)函數(shù)a返回函數(shù)b。閉包的作用：在函數(shù)a執(zhí)行完并返回后，閉包使JavaScript的垃圾回收機(jī)制不會收回a所占用的資源，因為a的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量，閉包是循序漸進(jìn)的過程。閉包由兩個部分構(gòu)成：(1)函數(shù)；(2)以及創(chuàng)建該函數(shù)的環(huán)境。閉包可以直接使用其所在函數(shù)的任何變量，這種使用是地址傳遞，而不是值傳遞。閉包示例：計數(shù)器，本任務(wù)是驗證閉包的特點，在函數(shù)內(nèi)部定義變量并賦值，函數(shù)的返回值為匿名函數(shù)，匿名函數(shù)返回值為最初定義的變量加1。匿名函數(shù)中值的變化依賴于定義變量counter。 <script> varadd=(function(){ varcounter=0;//閉包 returnfunction(){returncounter+=1;}//函數(shù)內(nèi)的返回值依賴于counter })(); functionmyFunction(){ document.getElementById("demo").innerHTML=add(); }</script>6.2函數(shù)的綜合應(yīng)用6.2.1任務(wù)實例制作鼠標(biāo)跟隨效果的div。6.2.2任務(wù)分析頁面上添加兩個div元素，當(dāng)鼠標(biāo)進(jìn)入某個div元素范圍后按下鼠標(biāo)左鍵，進(jìn)行拖動，div元素會隨著鼠標(biāo)的移動而移動。在頁面內(nèi)移動div，div的定位必須設(shè)置為絕對定位，利用this指針獲取鼠標(biāo)當(dāng)前位置信息。6.2.3實現(xiàn)步驟（1）頁面中添加<div>元素，并在樣式表中設(shè)置div的位置屬性為絕對定位；（2）定義dragobj函數(shù)，在函數(shù)中添加鼠標(biāo)按下事(this.onmousedown)件獲取鼠標(biāo)當(dāng)前坐標(biāo)，鼠標(biāo)移動事件（window.onmousemove）獲取鼠標(biāo)實時坐標(biāo)，鼠標(biāo)抬起事件（this.onmouseup）獲取鼠標(biāo)當(dāng)前位置，作為拖動div元素的最終位置；（3）for(i=0;i<len;i++){dragobj.apply(dragDiv[i]);}給元素添加函數(shù)調(diào)用。6.2.4實現(xiàn)代碼示例 <style> .drag{ width:120px; height:90px; background:green; position:absolute;/*位置必須是絕對定位*/} </style> <script> functiondragobj(){ this.flag=false; this.dx=0; this.dy=0; thisa=null; this.onmousedown=function(evt){ thisa=this; this.dx=evt.x-parseInt(this.style.left);//鼠標(biāo)拖動對象時修改對象的位置 this.dy=evt.y-parseInt(this.style.top); this.flag=true; } window.onmousemove=function(evt){ if(thisa.flag){ thisa.style.left=evt.x-thisa.dx+'px'; thisa.style.top=evt.y-thisa.dy+'px'; } } this.onmouseup=function(evt){ this.flag=false; thisa=null; } }window.onload=function(){ dragDiv=document.getElementsByClassName('drag'); len=dragDiv.length; for(i=0;i<len;i++){ dragobj.apply(dragDiv[i]);//繼承了上面的對象 } } </script></head><body><divclass='drag'style='left:100px;top:90px;'> </div><divclass='drag'style='left:500px;top:500px;'></div></body>步驟三課堂小結(jié)1．函數(shù)的調(diào)用2．函數(shù)的應(yīng)用重點理解函數(shù)調(diào)用方法步驟四作業(yè)問題引入第1題（2）課后作業(yè)1.實現(xiàn)頁面圖片隨鼠標(biāo)的移動的效果。2.函數(shù)調(diào)用方法。JavaScript中定義函數(shù)

溫馨提示

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

最新文檔

評論

0/150

提交評論