javascript第二章.ppt

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