javascript第二章.ppt

函數(shù)和window對(duì)象,第二章,回顧與作業(yè)點(diǎn)評(píng),JavaScript中BOM的作用是什么？ 如何使用JavaScript在頁(yè)面中輸出內(nèi)容？ 如何使用JavaScript接收用戶輸入的信息？,預(yù)習(xí)檢查,在javascript中的為什么需要使用函數(shù)？ Window對(duì)象常用的方法有哪些？并舉例說明其用法 如何能夠使靜止不動(dòng)的時(shí)鐘動(dòng)起來？,本章任務(wù),制作時(shí)鐘特效 制作彈出廣告窗口特效,演示示例：廣告窗口特效,演示示例：時(shí)鐘顯示特效,本章目標(biāo),使用函數(shù)實(shí)現(xiàn)代碼的重用 使用window對(duì)象的open()方法制作廣告窗口 使用window對(duì)象的setinterval()方法實(shí)現(xiàn)時(shí)鐘特效,什么是函數(shù),函數(shù)的含義：類似于Java中的方法，是完成特定任務(wù)的代碼語(yǔ)句塊 使用更簡(jiǎn)單：不用定義屬于某個(gè)類，直接使用,如果希望單擊某個(gè)按鈕后在頁(yè)面顯示“HelloWorld”， 并且能夠控制語(yǔ)句顯示的次數(shù)，怎么辦？,演示示例：調(diào)用函數(shù)輸出“HelloWorld”,JavaScript核心語(yǔ)法,系統(tǒng)函數(shù) 自定義函數(shù) 有參函數(shù) 無參函數(shù) 函數(shù)的調(diào)用,常用系統(tǒng)函數(shù),parseInt (“字符串“) 將字符串轉(zhuǎn)換為整型數(shù)字 如: parseInt (“86“)將字符串“86”轉(zhuǎn)換為整型值86 parseFloat(“字符串“) 將字符串轉(zhuǎn)換為浮點(diǎn)型數(shù)字 如: parseFloat(“34.45“)將字符串“34.45”轉(zhuǎn)換為浮點(diǎn)值34.45 isNaN() 用于檢查其參數(shù)是否是非數(shù)字,演示示例：類型轉(zhuǎn)換函數(shù),自定義函數(shù),創(chuàng)建函數(shù) 無參函數(shù) 有參函數(shù),function 函數(shù)名() JavaScript代碼; ,function 函數(shù)名(參數(shù)1,參數(shù)2， ) JavaScript代碼; ,調(diào)用函數(shù) 函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式： 事件名“函數(shù)名( )“ ;,單擊此按鈕時(shí)，調(diào)用函數(shù)showHello( )，執(zhí)行函數(shù)體中的代碼,調(diào)用無參函數(shù),調(diào)用無參函數(shù)，輸出10次“HelloWorld”,function showHello( ) for(var i=0;iHello World“); ,演示示例：調(diào)用無參函數(shù)輸出“HelloWorld”,調(diào)用有參函數(shù),根據(jù)輸入的次數(shù)，調(diào)用有參函數(shù)，顯示“HelloWorld”,單擊此按鈕時(shí)，調(diào)用函數(shù)showHello(count )，執(zhí)行函數(shù)體中的代碼,function showHello(count) for(var i=0;iHello World“); ,演示示例：調(diào)用有參函數(shù)輸出“HelloWorld”,練習(xí)編寫一個(gè)四則運(yùn)算函數(shù),需求說明 使用prompt輸入兩個(gè)數(shù)和運(yùn)算符號(hào)，然后計(jì)算兩個(gè)數(shù)的操作結(jié)果 使用switch判斷運(yùn)算符號(hào) 調(diào)用函數(shù)計(jì)算兩數(shù)的結(jié)果,完成時(shí)間：20分鐘,參考代碼,練習(xí)調(diào)試給定的程序-1,訓(xùn)練要點(diǎn) 使用alert()方法調(diào)試程序 使用Firebug工具調(diào)試程序 需求說明 調(diào)試給定的程序,練習(xí)調(diào)試給定的程序-2,實(shí)現(xiàn)思路 使用alert()方法調(diào)試程序 使用Firebug工具設(shè)置斷點(diǎn)進(jìn)行調(diào)試程序 通過單步進(jìn)入、單步跳過、單步退出方法進(jìn)行調(diào)試，查看變量或表達(dá)式的值的方式,完成時(shí)間：20分鐘,共性問題集中講解,常見調(diào)試問題及解決辦法 代碼規(guī)范問題,共性問題集中講解,變量的作用域,全局變量 聲明在函數(shù)外，用于函數(shù)間共享 局部變量 聲明在函數(shù)內(nèi)，僅在函數(shù)內(nèi)有效, var num; function showHello() for(var i=0;iHello World“); function counts() num=prompt(“請(qǐng)輸入顯示HelloWorld的次數(shù)：“,“); showHello(); ,全局變量,局部變量,演示示例：變量的作用范圍,小結(jié),如何創(chuàng)建一個(gè)有參函數(shù)并實(shí)現(xiàn)函數(shù)調(diào)用？ 全局變量和局部變量的區(qū)別是什么？,Window對(duì)象,常用屬性 常用方法 常用事件,Window對(duì)象的常用屬性,常用的屬性,Window對(duì)象的常用方法,常用的方法,confirm()方法,confirm()與alert ()、 prompt()區(qū)別,confirm(“對(duì)話框中顯示的純文本“), var flag=confirm(“確認(rèn)要?jiǎng)h除此條信息嗎？“); if(flag=true) alert(“刪除成功！“); else alert(“你取消了刪除“); ,open()方法,window.open(“彈出窗口的url“,“窗口名稱“,“窗口特征“),窗口特征,Window對(duì)象的常用事件,常用的事件,如何使用window對(duì)象-1,彈出窗口、彈出固定大小且無菜單欄的窗口 當(dāng)前頁(yè)面全屏顯示 彈出確認(rèn)消息框,如何使用window對(duì)象-2,示例完整代碼, function open_adv() window.open(“adv.html“); function open_fix_adv() window.open(“adv.html“,“,“height=380,width=320,toolbar=0, scrollbars=0,location=0,status=0,menubar=0,resizable=0“); function fullscreen() window.open(“plan.html“,“,“fullscreen=yes“); function confirm_msg() if(confirm(“你相信自己是最棒的嗎？“) alert(“有信心必定會(huì)贏，沒信息一定會(huì)輸！“); , input name=“con“ type=“button“ value=“打開確認(rèn)窗口“ onclick=“confirm_msg()“/,匿名調(diào)用函數(shù),Function 函數(shù)名() javaScript代碼 調(diào)用函數(shù)：onclick=“函數(shù)名() “,網(wǎng)上常見匿名寫法 方式一：事件名=function() 方式二： (function () JavaScript代碼;() 直接運(yùn)行函數(shù) window.onload=function() ,練習(xí)模擬簡(jiǎn)易購(gòu)物車頁(yè)面,需求說明 打開頁(yè)面時(shí)，彈出廣告頁(yè)面，并且此頁(yè)面可實(shí)現(xiàn)關(guān)閉窗口功能 購(gòu)物車頁(yè)面可實(shí)現(xiàn)全屏顯示 提交訂單頁(yè)面時(shí)，彈出確認(rèn)窗口,練習(xí)完整代碼,完成時(shí)間：20分鐘,共性問題集中講解,常見調(diào)試問題及解決辦法 代碼規(guī)范問題,共性問題集中講解,演示時(shí)鐘特效,如何實(shí)現(xiàn)如演示示例中所示的時(shí)鐘效果？,演示示例：時(shí)鐘效果演示,由于涉及到時(shí)間的顯示問題，所以要用到日期對(duì)象Date，還有時(shí)間在不停地走，因此需要不斷地調(diào)用函數(shù)，所以要用到Windows的定時(shí)器setInterval( )方法。,Date對(duì)象,var 日期對(duì)象=new Date(參數(shù)) 參數(shù)格式：MM DD,YYYY,hh:mm:ss,var today=new Date(); /返回當(dāng)前日期和時(shí)間 var tdate=new Date(“september 1,2009,14:58:12“);,Date對(duì)象的方法,Date 對(duì)象的方法,制作時(shí)鐘特效-1, function disptime() var today = new Date(); /獲得當(dāng)前時(shí)間 var hh = today.getHours(); /獲得小時(shí)、分鐘、秒 var mm = today.getMinutes(); var ss = today.getSeconds(); document.getElementById(“myclock“).innerHTML=hh+“:“+mm+“:“+ss; ,示例完整代碼,制作時(shí)鐘特效-2,制作的時(shí)鐘特效示例中，時(shí)間為什么不改變？,由于時(shí)間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時(shí)間的方法，如何解決？,使用setTimeout( )方法或setInterval(),定時(shí)函數(shù),setTimeout()用法 setTimeout（“調(diào)用的函數(shù)”, “指定的時(shí)間后“） setInterval()方法 setInterval（“調(diào)用的函數(shù)“, “指定的時(shí)間間隔“）,var myTimesetTimeout(“disptime( ) “, 1000 ); var myTimesetInterval(“disptime( ) “, 1000 );,setTimeout()只執(zhí)行disptime()一次，如果要多次調(diào)用使用setInterval()者者讓disptime()自身再次調(diào)用setTimeout(),每隔1秒(1000毫秒)執(zhí)行函數(shù)disptime()一次,時(shí)鐘顯示特效,練習(xí)制作12小時(shí)的時(shí)鐘-1,需求說明 顯示年、月、日 顯示星期幾 顯示時(shí)鐘特效，時(shí)鐘為12小時(shí)進(jìn)制,練習(xí)制作12小時(shí)的時(shí)鐘-2,實(shí)現(xiàn)思路 使用getFullYear()獲得當(dāng)前年份 使用getMonth()+1獲得當(dāng)前月份 使用getDate()獲得當(dāng)前日期 根據(jù)getHours()獲得的小時(shí)，使用if語(yǔ)句判斷當(dāng)前時(shí)間是否大于12 使用getDay()獲取當(dāng)前表示星期幾的數(shù)字，然后使用switch設(shè)置當(dāng)前星期幾,學(xué)員練習(xí)源代碼,完成時(shí)間：20分鐘,共性問題集中講解,常見調(diào)試問題及解決辦法 代碼規(guī)范問題,共性問