項(xiàng)目十八JAVASCRIPT內(nèi)置對(duì)象和函數(shù)教學(xué)目標(biāo)課件

湖北職院計(jì)科系湖北職院計(jì)科系教學(xué)目標(biāo)1、掌握J(rèn)avaScript內(nèi)置函數(shù)的應(yīng)用2、掌握J(rèn)avaScript內(nèi)置對(duì)象的應(yīng)用3、掌握J(rèn)avaScript瀏覽器對(duì)象的應(yīng)用上一頁下一頁教學(xué)目標(biāo)上一頁下一頁教學(xué)重點(diǎn)1、掌握J(rèn)avaScript內(nèi)置函數(shù)的使用方法2、掌握J(rèn)avaScript常用內(nèi)置對(duì)象的屬性和方法3、掌握J(rèn)avaScript瀏覽器對(duì)象的含義上一頁下一頁教學(xué)重點(diǎn)上一頁下一頁教學(xué)難點(diǎn)1、掌握使用瀏覽器對(duì)象提供的信息來完成一定功能的網(wǎng)頁設(shè)計(jì)。上一頁下一頁教學(xué)難點(diǎn)上一頁下一頁教學(xué)方法1、項(xiàng)目工程互動(dòng)式教學(xué)法2、“講、學(xué)、觀察”相結(jié)合

上一頁下一頁教學(xué)方法上一頁下一頁一、JavaScript內(nèi)置函數(shù)的應(yīng)用

JavaScript中的系統(tǒng)函數(shù)又稱內(nèi)部方法。它提供了與任何對(duì)象無關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需創(chuàng)建實(shí)例，可以直接用。1、eval()：計(jì)算字符串表達(dá)式的值2、parseFloat()和parseInt()：將字符串開頭的整數(shù)或浮點(diǎn)數(shù)分解出來，轉(zhuǎn)換為整數(shù)或浮點(diǎn)數(shù)3、isNaN()：確定一個(gè)變量是否為NaN（NotaNumber）4、escape()：將字符串中的非字母數(shù)字字符轉(zhuǎn)換為按格式%XX表示的數(shù)字5、unescape()：將字符串格式為%XX的數(shù)字轉(zhuǎn)換為字符下一頁上一頁一、JavaScript內(nèi)置函數(shù)的應(yīng)用下一頁上一頁6、程序案例1：求用戶在提示對(duì)話框中輸入的表達(dá)式的值。<scriptlanguage=javascript>alert(eval(prompt("請(qǐng)輸入一個(gè)常量表達(dá)式,運(yùn)算符可以是JavaScript所允許的任何運(yùn)算符,而操作數(shù)只能是常量。如123*321/9,我將為您計(jì)算出結(jié)果。","65+98+96")))</script>下一頁上一頁eval()內(nèi)置函數(shù)的用法：計(jì)算字符串表達(dá)式的值。6、程序案例1：求用戶在提示對(duì)話框中輸入的表達(dá)式的值。下一頁二、JavaScript內(nèi)置對(duì)象的應(yīng)用1、Math對(duì)象2、Date對(duì)象3、Number對(duì)象4、String對(duì)象5、Array對(duì)象下一頁上一頁二、JavaScript內(nèi)置對(duì)象的應(yīng)用下一頁上一頁一、對(duì)象的基本概念1、什么是對(duì)象對(duì)象用于描述客觀世界存在的特定實(shí)體。在計(jì)算機(jī)世界中，不僅存在來自于客觀世界的對(duì)象，也包含為解決問題而引入的抽象對(duì)象。2、對(duì)象的屬性和方法在JavaScript中，對(duì)象就是屬性和方法的集合。方法是作為對(duì)象成員的函數(shù)表明對(duì)象所具有的行為，屬性是作為對(duì)象成員的一組變量，表明對(duì)象的狀態(tài)。通過訪問或設(shè)置對(duì)象的屬性，并且調(diào)用對(duì)象的方法，就可以對(duì)對(duì)象進(jìn)行各種操作，從而獲得需要的功能。調(diào)用對(duì)象的一個(gè)方法類似于調(diào)用一個(gè)函數(shù)。使用對(duì)象的一個(gè)屬性則類似于使用一個(gè)變量。

下一頁上一頁一、對(duì)象的基本概念下一頁上一頁二、Math對(duì)象1、Math對(duì)象的屬性是數(shù)學(xué)中常用的常量，如圓周率PI，自然對(duì)數(shù)的底E等。2、Math對(duì)象的方法則是一些十分有用的數(shù)學(xué)函數(shù)，如sin()、random()、log()等。3、在調(diào)用Math對(duì)象的屬性和方法時(shí)，直接寫成：Math.屬性和Math.方法。

下一頁上一頁二、Math對(duì)象下一頁上一頁4、案例2：求PI的5次方，并四舍五入取整。

<scriptlanguage=javascript>varnumber=Math.round(Math.pow(Math.PI,5));document.write("PI的5次方的值為："+number);</script>下一頁上一頁4、案例2：求PI的5次方，并四舍五入取整。下一頁上一頁三、Date對(duì)象1、Date對(duì)象的主要方法常用方法:設(shè)置和獲取日期中的年、月、日、小時(shí)、分、秒和毫秒等2、創(chuàng)建Date對(duì)象要使用Date對(duì)象，必須先使用new運(yùn)算符創(chuàng)建它。創(chuàng)建Date對(duì)象的常見方式有三種：(1)不帶參數(shù)vartoday=newDate();(2)創(chuàng)建一個(gè)指定日期的Date變量vartheDate=newDate(2000,9,1);(3)創(chuàng)建一個(gè)指定時(shí)間的Date變量vartheTime=newDate(2000,9,1,10,20,30,50)下一頁上一頁三、Date對(duì)象下一頁上一頁3、案例3：計(jì)算求1+2+3+…10000之和所需要的運(yùn)行時(shí)間(毫秒數(shù))。<scriptlanguage=javascript>vart1,t2,htime,i,sum=0;t1=newDate();document.write("循環(huán)前的時(shí)間:"+t1.toLocaleString()+":"+t1.getMilliseconds()+"<BR>");for(i=1;i<=10000;i++)sum+=i;t2=newDate();document.write("循環(huán)后的時(shí)間:"+t2.toLocaleString()+":"+t2.getMilliseconds()+"<BR>");htime=t2.getTime()-t1.getTime();document.write("執(zhí)行10000次循環(huán)用時(shí):"+htime+"毫秒<BR>")</script>

下一頁上一頁3、案例3：計(jì)算求1+2+3+…10000之和所需要的運(yùn)行時(shí)四、Number對(duì)象1、Number對(duì)象用于存放MAX_VALUE、MIN_VALUE、NaN、NEGATIVE_INFINITY、POSITIVE_INFINITY等極端數(shù)值。2、案例4：在頁面中顯示JavaScript可以處理的數(shù)的區(qū)間。<scriptlanguage=javascript>document.write("JavaScript有效數(shù)的范圍是:["+Number.MIN_VALUE+","+Number.MAX_VALUE+"]");</script>下一頁上一頁四、Number對(duì)象下一頁上一頁五、String對(duì)象1、String對(duì)象提供對(duì)字符串進(jìn)行處理的屬性和方法。2、在使用String對(duì)象時(shí)，首先要?jiǎng)?chuàng)建一個(gè)字符串變量。3、使用new運(yùn)算符來創(chuàng)建，如：newstring=newString("Thisisanewstring")4、也可以直接將字符串賦給變量。newstring="Thisisanewstring"5、String對(duì)象的最常用屬性和方法length、toLowerCase()、toUpperCase()、charAt(index)、substr(start,len)下一頁上一頁五、String對(duì)象下一頁上一頁6、程序案例5：String對(duì)象的常用方法<scriptlanguage=javascript>varmystr="lookatthis";document.writeln(mystr.charAt(5));document.writeln(mystr.substring(5,7));document.writeln(mystr.toUpperCase());document.writeln(mystr.indexOf("oo"));</script>下一頁上一頁6、程序案例5：String對(duì)象的常用方法下一頁上一頁六、Array對(duì)象1、什么是數(shù)組一個(gè)數(shù)組可以包含多個(gè)數(shù)組元素。數(shù)組中數(shù)組元素的個(gè)數(shù)稱為數(shù)組長(zhǎng)度。2、創(chuàng)建和訪問數(shù)組一個(gè)數(shù)組元素由數(shù)組名、一對(duì)方括號(hào)[]和這對(duì)括號(hào)中的下標(biāo)組合起來表示。如：arrayname[0]、arrayname[1]。3、for…in語句用for…in語句處理數(shù)組，可以依次對(duì)數(shù)組中的每個(gè)數(shù)組元素執(zhí)行一條或多條語句。for…in的格式是：for(變量in數(shù)組)循環(huán)體語句;下一頁上一頁六、Array對(duì)象下一頁上一頁4、程序案例6：使用for…in語句，顯示數(shù)組的值。<scriptlanguage=javascript>varclassmates,i;classmates=newArray("張?jiān)?,"李良","王力","何芳");for(iinclassmates)document.write("第"+(parseInt(i)+1)+"個(gè)同學(xué)是:"+classmates[i]+"<BR>");</script>

下一頁上一頁4、程序案例6：使用for…in語句，顯示數(shù)組的值。下一頁實(shí)驗(yàn)內(nèi)容三、JavaScript瀏覽器對(duì)象的應(yīng)用1、窗口(Window)對(duì)象2、文檔(document)對(duì)象3、表單(form)對(duì)象下一頁上一頁實(shí)驗(yàn)內(nèi)容三、JavaScript瀏覽器對(duì)象的應(yīng)用下一頁上一頁一、窗口(window)對(duì)象1、window對(duì)象的屬性和方法窗口(window)對(duì)象處于對(duì)象層次的頂端，它提供了處理瀏覽器窗口的方法和屬性。對(duì)于window對(duì)象的使用，主要集中在窗口的打開和關(guān)閉、窗口狀態(tài)的設(shè)置、定時(shí)執(zhí)行程序以及各種對(duì)話框的使用等四個(gè)方面。在JavaScript中可直接引用window對(duì)象的屬性和方法。2、打開和關(guān)閉窗口通過腳本可以打開新窗口，也可以關(guān)閉窗口。下一頁上一頁一、窗口(window)對(duì)象下一頁上一頁3、程序案例7：設(shè)計(jì)一個(gè)有三個(gè)超鏈接的頁面，單擊這些鏈接時(shí)分別打開和關(guān)閉新窗口，以及關(guān)閉本身窗口

<SCRIPTlanguage="javascript">varnewwin;functionopennewwin(){newwin=open("new.htm","myWindow","height=100,width=400,top=10,left=0,toolbar=no,menubar=no,"+"scrollbars=no,resizable=no,location=no,status=no");}functionclosenewwin(){newwin.close();}</SCRIPT>下一頁上一頁3、程序案例7：設(shè)計(jì)一個(gè)有三個(gè)超鏈接的頁面，單擊這些鏈接時(shí)分二、文檔(document)對(duì)象

通過document對(duì)象可以訪問HTML文檔包含的任何HTML元素，如各種表格、表單、圖像、超鏈接等。所有HTML元素在文檔對(duì)象模型中都表現(xiàn)為一個(gè)對(duì)象。1、document對(duì)象的屬性和方法案例3_4：設(shè)計(jì)一個(gè)頁面，顯示document對(duì)象中的一些屬性。2、使用all屬性訪問HTML元素在document對(duì)象中，all是一個(gè)非常特殊的屬性。通過它，可以訪問文檔中的所有HTML元素對(duì)象。

下一頁上一頁二、文檔(document)對(duì)象下一頁上一頁3、案例8：顯示當(dāng)前HTML文檔中出現(xiàn)的所有標(biāo)記。

<SCRIPTlanguage="javascript">document.write("當(dāng)前文檔的標(biāo)題:"+document.title+"<BR>");document.write("當(dāng)前文檔的URL:"+document.URL+"<BR>");document.write("當(dāng)前文檔的背景色:"+document.bgColor+"<BR>");document.write("當(dāng)前文檔的最后修改日期:"+document.lastModified+"<BR>");document.write("當(dāng)前文檔包含"+document.links.length+"個(gè)超鏈接<BR>");document.write("當(dāng)前文檔包含"+document.images.length+"個(gè)圖像<BR>");</SCRIPT>

下一頁上一頁3、案例8：顯示當(dāng)前HTML文檔中出現(xiàn)的所有標(biāo)記。下一頁上三、表單對(duì)象1、form對(duì)象的屬性、方法和事件2、表單處理3、表單元素對(duì)象的屬性、方法和事件4、處理表單元素示例下一頁上一頁三、表單對(duì)象下一頁上一頁一、form對(duì)象的屬性、方法和事件1、在程序中，如果創(chuàng)建的表單有一個(gè)名字(如myform)，那么就可通過這個(gè)表單名訪問它，如:document.myform。獲取了form對(duì)象之后，就可以通過使用其屬性、方法和事件來實(shí)現(xiàn)各種功能。2、程序案例9：列出表單中所有表單元素的名稱。<scriptlanguage=javascript>varmyform,element,i;myform=document.myform;document.write("<H3>表單中有"+myform.length+"個(gè)元素:</H3>");for(i=0;i<myform.length;i++){element=myform.elements[i];if(i>0)document.write(",");document.write();}</script>

下一頁上一頁一、form對(duì)象的屬性、方法和事件下一頁上一頁一、form對(duì)象的屬性、方法和事件1、在程序中，如果創(chuàng)建的表單有一個(gè)名字(如myform)，那么就可通過這個(gè)表單名訪問它，如:document.myform。獲取了form對(duì)象之后，就可以通過使用其屬性、方法和事件來實(shí)現(xiàn)各種功能。2、程序案例9：列出表單中所有表單元素的名稱。<scriptlanguage=javascript>varmyform,element,i;myform=document.myform;document.write("<H3>表單中有"+myform.length+"個(gè)元素:</H3>");for(i=0;i<myform.length;i++){element=myform.elements[i];if(i>0)document.write(",");document.write();}</script>

下一頁上一頁一、form對(duì)象的屬性、方法和事件下一頁上一頁二、表單處理1、表單驗(yàn)證是指確定用戶提交的表單數(shù)據(jù)是否合法，例如填寫的身份證號(hào)碼是否有意義、年齡和學(xué)歷是否相符等問題。2、由于在表單正式提交到服務(wù)器之前，需要onSubmit的值為true(如果不設(shè)置事件處理函數(shù)，則該值默認(rèn)為true)，因此可以通過為onSubmit事件指定的處理函數(shù)來進(jìn)行表單數(shù)據(jù)的驗(yàn)證。下一頁上一頁二、表單處理下一頁上一頁3、程序案例10：設(shè)計(jì)一個(gè)表單，該表單有姓名和某種卡號(hào)兩個(gè)文本輸入框，其中這種卡號(hào)的格式為XXXX-XXXX-XXXX-XXXX(每個(gè)X代表一位數(shù)字)，要求在用戶單擊提交按鈕“發(fā)送”之前驗(yàn)證這兩個(gè)輸入數(shù)據(jù)的有效性。

<SCRIPTLanguage="javascript">functionvalidate(){alert("數(shù)據(jù)完全");returntrue;}functioncheckName(s){varok=(s.length>0);if(!ok)alert("名字輸入有誤，請(qǐng)查核！")returnok;}</SCRIPT>下一頁上一頁3、程序案例10：設(shè)計(jì)一個(gè)表單，該表單有姓名和某種卡號(hào)兩個(gè)文三、表單元素對(duì)象的屬性、方法和事件

1、表單可以有很多表單元素，稱之為表單元素對(duì)象。表單元素對(duì)