《JavaScript程序設(shè)計》電子教案設(shè)計

7、常用屬性 Background:設(shè)置頁面的背景圖案 Bgcolor:設(shè)置頁面的背景色 Text:設(shè)置頁面的文字顏色 Topmargin：頂空白像素 Leftmargin:左空白像素 Link: 指定文檔的所有連接顏色[不推薦]使用樣式來取代 Vlink: 指定文檔那些被訪問過的連接顏色[不推薦]使用樣式來取代 編寫HTML頁面 例子： HTML頁面是不分大小寫的，常用小寫。 一定要閉合HTML標(biāo)簽,聲明正確的文檔類型( DocType ), 不要使用嵌入式CSS樣式, 在頁面head標(biāo)簽中引入所有的樣式表文件, 不要使用嵌入式JavaScript. 使用瀏覽器訪問網(wǎng)頁

8、 流行瀏覽器有IE,NETscape,firefox等,跨瀏覽器訪問網(wǎng)頁。 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P10: 〔1〕——〔5〕 課堂講解 第二講 第一章 第二節(jié)《程序與Web腳本》 教學(xué)目的和目標(biāo) 1、了解程序的功能。 2、了解與認(rèn)識web腳本。 教學(xué)重點與難點 1、掌握程序的功能。 2、認(rèn)識web腳本。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 程序與Web腳本javascript可以嵌入到HT

9、ML頁面, javascript稱為web腳本語言。 1.2.1 認(rèn)識一段程序 ? ?計算機程序或者軟件程序〔通常簡稱程序〕是指一組指示計算機每一步動作的指令，通常用某種程序設(shè)計語言編寫，運行于某種目標(biāo)體系結(jié)構(gòu)上。打個比方，一個程序就像一個用漢語〔程序設(shè)計語言〕寫下的紅燒肉菜譜〔程序〕，用于指導(dǎo)懂漢語的人〔體系結(jié)構(gòu)〕來做這個菜。 通常，計算機程序要經(jīng)過編譯和而成為一種人們不易理解而計算機理解的格式，然后運行。未經(jīng)編譯就可運行的程序通常稱之為腳本程序。 程序的運行:為了一個程序運行，計算機加載程序代碼，可能還要加載數(shù)據(jù)，從而初始化成一個開始狀態(tài)，然后調(diào)用某種啟動機制。在最低層上，這些是由一

10、個引導(dǎo)序列開始的。 在大多數(shù)計算機中，操作系統(tǒng)例如Windows等，加載并且執(zhí)行很多程序。在這種情況下，一個計算機程序是指一個單獨的可執(zhí)行的映射，而不是當(dāng)前在這個計算機上運行的全部程序。 馮諾依曼體系結(jié)構(gòu):在一臺基于最常見的馮諾依曼體系結(jié)構(gòu)(又稱Harvard Architecture)的計算機上，程序從某種外部設(shè)備，通常是硬盤，被加載到計算機里。 如果計算機選擇馮諾依曼體系結(jié)構(gòu)，那么程序就被加載入內(nèi)存。 指令序列順序執(zhí)行，直到一條跳轉(zhuǎn)或轉(zhuǎn)移指令被執(zhí)行，或者一個中斷出現(xiàn)。所有這些指令都會改變指令存放器的內(nèi)容。 基于這種體系計算機如果沒有程序的支持將無法工作。一個計算機程序是一系列指令的

11、集合。 程序里的指令都是基于機器語言；程序通常首先用一種計算機程序設(shè)計語言編寫，然后用編譯程序或者解釋執(zhí)行程序翻譯成機器語言。 有時，程序也可以用匯編語言編寫，匯編語言實質(zhì)就是表示機器語言的一組記號－在這種情況下，用于翻譯的程序叫做匯編程序(Assembler)。 程序和數(shù)據(jù):程序已經(jīng)被定義了。如何定義數(shù)據(jù)呢？數(shù)據(jù)可以被定義為被程序處理的信息。當(dāng)我們考慮到整個計算機系統(tǒng)時，有時程序和數(shù)據(jù)的區(qū)別就不是那么明顯了。中央處理器有時有一組微指令控制硬件，數(shù)據(jù)可以是一個有待執(zhí)行的程序〔參見腳本編程語言〕，程序可以編寫成去編寫其它的程序；所有這些例子都使程序和數(shù)據(jù)的比擬成為一種視角的選擇。有人甚至斷

12、言程序和數(shù)據(jù)沒有區(qū)別。 編寫一個程序去生成另外一個程序的過程被稱之為原編程(Metaprogramming)。它可以被應(yīng)用于讓程序根據(jù)給定數(shù)據(jù)生成代碼。單一一個程序可能不足以表示給定數(shù)據(jù)的所有方面。讓一個程序去分析這個數(shù)據(jù)并生成新的程序去處理數(shù)據(jù)所有的方面可能會容易一些。Lisp就是一例支持這種編程模式的程序語言。 在神經(jīng)網(wǎng)絡(luò)里儲存的權(quán)重是一種數(shù)據(jù)。正是這些權(quán)重數(shù)據(jù)，跟網(wǎng)路的拓?fù)浣Y(jié)構(gòu)一起，定義了網(wǎng)絡(luò)的行為。人們通常很難界定這些數(shù)據(jù)到底表示什么或者它們是否可以由程序來代替。這個例子以與跟人工智能相關(guān)的其它一些問題進(jìn)一步考驗程序和數(shù)據(jù)的區(qū)別。 算法:算法指解決某個問題的嚴(yán)格方法，通常還需輔以

13、某種程度上的運行性能分析。算法可以是純理論的，也可以由一個計算機程序?qū)崿F(xiàn)。理論算法通常根據(jù)復(fù)雜性分為不同類別；實現(xiàn)的算法通常經(jīng)過頗析(Profiling)以測試其性能。請注意雖然一個算法在理論上有效可行，但是一個糟糕的實現(xiàn)仍會浪費寶貴的計算機資源?！哺敿?xì)信息，參見算法信息論，Algorithmic Information Theory〕 開發(fā):編寫程序是以下步驟的一個往復(fù)過程：編寫新的源代碼，測試、分析和提高新編寫的代碼以找出語法和語義錯誤。從事這種工作的人叫做程序設(shè)計員??趨多樣，由此產(chǎn)生了不同種類的程序設(shè)計員，每一種都有更細(xì)致的分工和任務(wù)。軟件工程師和系統(tǒng)分析員就是兩個例子?，F(xiàn)在，編程

14、的長時間過程被稱之為“軟件開發(fā)〞或者軟件工程。后者也由于這一學(xué)科的日益成熟而逐漸流行。 計算機程序是利用相應(yīng)的程序設(shè)計語言,按照一定的邏輯和語法進(jìn)展編寫和組織,通過程序的運行,使得計算機實現(xiàn)某種特定的功能。與web相關(guān)的有asp,jsp,php等。例: Php程序一段代碼如下: If ($num>0) { echo “the number you enter is >0〞 } Else { echo “the number you enter is <=0〞 } 1.2.2 認(rèn)識Web腳本 web腳本有javascript,還有VBscript等,腳本語言同程序設(shè)

15、計語言一樣,是根據(jù)一定的邏輯和語法來編寫腳本,以實現(xiàn)網(wǎng)頁中的特殊效果。 例: javascript 程序如下: If (num>0) { alert(“the number you enter is >0〞); } Else { alert(“the number you enter is <=0〞); } 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P11: 進(jìn)階練習(xí) 。 復(fù)習(xí)總結(jié)： 1、萬維網(wǎng)的開展歷史與功能是共享資源。 2、HTML語言的概念，簡單語法。 3、掌握程序的功能。 4、認(rèn)識web腳本。 第

16、三講 第二章第一節(jié)《JavaScript的開展史》 第二節(jié)《JavaScript的作用》 教學(xué)目的和目標(biāo) 1、了解JavaScript的開展史。 2、掌握J(rèn)avaScript的作用。 3、熟練編寫頁面特效。 教學(xué)重點與難點 1、掌握理解JavaScript的作用。 2、熟練編寫各種頁面特效。 3、HTML頁面元素多，記憶難，要求學(xué)生短時間里具有編寫HTML頁面能力。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 2.1 JavaScript的開展史

17、 Netscape的JavaScript:增加更多的用戶交互,控制瀏覽器以與動態(tài)創(chuàng)建頁面內(nèi)容的諸多功能,最主要的是使合法性驗證之類的工作在客戶端得以實現(xiàn)。 Microsoft的Jscript:IE瀏覽器。 EMCA-262標(biāo)準(zhǔn):歐洲計算機制造商聯(lián)合會創(chuàng)造了一個國際通用的標(biāo)準(zhǔn)化版本的JavaScript，稱為EMCAScript。 2.2 JavaScript的作用 表單驗證:最根本和最重要的作用。 例：2-1.htm演示各個限制條件。 實現(xiàn)網(wǎng)頁特效。 改善頁面樣式 頁面樣式是通過樣式表來定義的.通過樣式表,定義頁面元素的表現(xiàn)形式。如控制顏色,圖案,

18、文字,可見性等。 2.2.4 應(yīng)用Ajax Ajax技術(shù)并不是一個新的語言，是javascript,xml,css,xhtml,xml等的一個綜合應(yīng)用。優(yōu)勢是通過數(shù)據(jù)異步傳輸從而減少交互時間和改善用戶體驗等。 例：圖2.20:頁面的多塊區(qū)域能分時異步加載，減少等待時間。 圖2.23:通過Ajax技術(shù)，實時對用戶名進(jìn)展驗證并在頁面上顯示文字提示。 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P32:〔1〕——〔4〕課堂講解 第四講 第二章第三，四，五節(jié)《使用JavaScript》，《瀏覽器與JavaScr

19、ipt》，《其他常用腳本和技術(shù)》 教學(xué)目的和目標(biāo) 1、掌握J(rèn)avascript的使用。 2、了解瀏覽器與JavaScript的版本號。 3、了解其他常用腳本和技術(shù)。 教學(xué)重點與難點 1、掌握理解JavaScript的使用。 2、掌握理解文檔對象模型概念。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 使用Javascript 認(rèn)識 版本號可以省。 其他常用腳本和技術(shù) 語言 例： 語言 JavaScript和Java不

22、是一個概念，Java是SUN公司推出的編程語言，跨平臺執(zhí)行的程序設(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴展Netscape Navigator功能而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言。 2.5.3 Asp和語言 Asp是“活動服務(wù)器網(wǎng)頁〞，用來創(chuàng)建和運行動態(tài)網(wǎng)頁或Web應(yīng)用程序，用于各種動態(tài)，擴展名為.asp。 A是asp的最近版本，擴展名為.asp或.aspx。 2.5.4 php語言 基于服務(wù)端創(chuàng)建動態(tài)的腳本語言，是開放源碼和跨平臺運行。 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題

23、：P32:〔5〕——〔9〕課堂講解 P32: 進(jìn)階練習(xí) 即項目實訓(xùn)1 第五講 第三章 第一局部 教學(xué)目的和目標(biāo) 1、熟悉編輯javascript常用工具。 2、掌握整個程序設(shè)計過程與思路。 3、掌握普通提示對話框方法。 4、掌握控制頁面元素的顯示和隱藏方法。 教學(xué)重點與難點 1、掌握理解整個程序設(shè)計過程與思路。 2、掌握普通提示對話框方法。 3、掌握控制頁面元素的顯示和隱藏方法。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多

24、媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 常用工具介紹 使用記事本: 記事本編輯純文本文件,HTML文檔,Javascript程序和其他各種類型的文本文件.演示操作.注意保存文件類型選擇為〞所有文件〞,文件名擴展名為.htm或html,js等. 3.1.2 使用EditPlus文字編輯器。 EditPlus文字編輯器功能強大,使用方便。 3.1.3 使用Dreamweaver網(wǎng)頁軟件 1.方便的設(shè)計 2.可視化編輯 3.強大的Javascript和CSS支持 設(shè)計簡單的Javascript功能 要創(chuàng)建一個完整的程序,事先需要對所實現(xiàn)的功能進(jìn)展設(shè)

25、計. 例:2-9.htm 編寫Javascript代碼之前 按照設(shè)計好的功能進(jìn)展具體的實現(xiàn),包括HTML頁面和Javascript相關(guān)編寫 一個好的網(wǎng)頁除了要有適宜的動態(tài)內(nèi)容外,還應(yīng)該有好的交互性,就是讓用戶在訪問網(wǎng)頁的過程中得到信息提示,或提供應(yīng)用戶一些選擇. Alert()是內(nèi)置函數(shù),出現(xiàn)提示框. 控制頁面元素的顯示和隱藏 Javascript的主要作用之一是控制頁面元素的樣式.

26、 例 Javascript控制樣式的顯示需要兩個條件: (1)獲取需要控制的元素對象.document.getElementById(“id〞) (2)使用對象的style屬性來操作樣式. 例 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P59:〔1〕——〔3〕課堂講解 第六講 第三章 第二局部 教學(xué)目的和目標(biāo) 1、掌握確認(rèn)提示對話框方法。 2、掌握網(wǎng)頁中輸出內(nèi)容方法。 3、掌握變量存儲數(shù)據(jù)定義方法。 4、掌握

27、函數(shù)定義方法。 5、掌握HTML與Javascript整合技巧與方法。 教學(xué)重點與難點 1、掌握確認(rèn)提示對話框方法。 2、掌握網(wǎng)頁中輸出內(nèi)容方法。 3、掌握變量存儲數(shù)據(jù)定義方法。 4、掌握函數(shù)定義方法。 5、理解HTML與Javascript整合技巧與方法。 6、培養(yǎng)學(xué)生整合HTML與Javascript能力。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 3.3.3 向用戶顯示確認(rèn)提示對話框 confirm()是內(nèi)置函數(shù),出現(xiàn)確認(rèn)提示框. 3.3.4 在網(wǎng)頁中輸出內(nèi)容提供了在網(wǎng)頁中輸出內(nèi)容的方法,用〞document.write();〞 例: 3.3.5 使用變量存儲數(shù)據(jù),用var來顯示 Var str=“hello〞; 例: 3.3.6 使用javascript進(jìn)展計算Javascript支持〞+,-,*,/〞等運算符. 例: 3.3.7 將javascript代碼定義為函數(shù) 定義函數(shù)使用function語句 Function 函數(shù)名() { 語句; }

29、 文檔編寫與Javascript整合 把代碼嵌入到頁面中. 編寫出所有需要的頁面元素 3.4.6整合所有功能:借助主函數(shù)把所有功能組織起來. 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P59:〔4〕——〔10〕課堂講解 P59: 進(jìn)階練習(xí) 即項目實訓(xùn)2。

30、 第七講 第四章第一局部 教學(xué)目的和目標(biāo) 1、掌握J(rèn)avascript語法結(jié)構(gòu)。 2、掌握理解Javascript對象概念。 3、掌握理解Javascript對象創(chuàng)建。 教學(xué)重點與難點 1、掌握理解Javascript語法結(jié)構(gòu)。 2、掌握理解Javascript對象概念。 3、對象概念多，理解難，要求學(xué)生短時間里具有編寫對象能力。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 語法結(jié)構(gòu) 大小寫敏感 對大小寫

31、敏感，必須大小寫一致，而HTML是不區(qū)分大小寫的，而Javascript是嵌入到html中去，必須注意。 空格，制表符和換行 使分隔符，來對齊用程序語句，或?qū)⒁粭l長語句分成幾行編寫，對于程序的美觀整潔是很有好處的，增加了程序的可讀性。 直接量 是程序里直接顯示出來的數(shù)值。 分號 用來分隔兩條程序語句的，每條語句都使用一個分號“;〞作為完畢。 標(biāo)識符 用來命名變量或函數(shù)等。 標(biāo)識符命名規(guī)如此必須是以字母，下劃線或美元符開始的字母，數(shù)字，或任意組合，數(shù)字不允許作為變量名的開頭，標(biāo)識符不能和保存字重名。 保存字 表 理解Javascript對象 4.2.1 Javascri

32、pt面向?qū)ο蟾拍? 面向?qū)ο蟊M可能模擬人類的思維習(xí)慣,使程序設(shè)計的方法與過程盡可能的接近人類的自然思維方式. Javascript對象類基于構(gòu)造器函數(shù)創(chuàng)建的實例化一個對象,構(gòu)造器函數(shù)包含屬性和方法兩個根本的元素,屬性實際上用于存儲對象的數(shù)據(jù),方法是在對象內(nèi)部調(diào)用的函數(shù),用來實現(xiàn)一些功能或?qū)傩赃M(jìn)展訪問更改. 4.2.2 對象的創(chuàng)建 Javascript對象是通過〞new〞來創(chuàng)建的, Var obj=new object(); 類名通常以大寫字母來開頭,而構(gòu)造器函數(shù)相當(dāng)于類,因此構(gòu)造機器函數(shù)通常以大寫字母開頭. Var date=new Date();//創(chuàng)建日期對象 布置課后

33、任務(wù)與作業(yè) 完成課后練習(xí)題：P70:〔1〕——〔4〕課堂講解 第八講 第四章 第二局部 教學(xué)目的和目標(biāo) 1、掌握J(rèn)avascript對象屬性的設(shè)置和讀取。 2、掌握J(rèn)avascript對象的方法，繼承和原型。 3、培養(yǎng)學(xué)生養(yǎng)成良好的編程習(xí)慣。 教學(xué)重點與難點 1、掌握理解Javascript對象屬性的設(shè)置和讀取。 2、掌握理解Javascript對象的方法，繼承和原型。 3、理解良好的編程習(xí)慣重要性。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)

34、容 4.2.3 屬性的設(shè)置和讀取 通常用〞.〞運算符實現(xiàn)屬性的存取,〞.〞左邊是表示該對象的引用名,右邊是屬性名稱. Var dog=new Dog(); Dog.dog_weight=50; Dog.dog_type=“big〞; Alert(“dog type:〞+dog.dog_type); 4.2.4 對象的方法:訪問屬性通過〞this〞, 對象的方法其實就是一個函數(shù), Function showDogInfo() { alert(“dog type:〞+this.dog_type); ……. } 4.2.5 對象的繼承和原型:對象是類的一

35、個實例,類是對象的抽象,繼承是對象的一個很重要的特征,對象可以從實例化它的構(gòu)造器函數(shù)中繼承到屬性和方法. Function Animal(type,sound,food) { This.animal_type=type; ……. } //實例化對象 Var dog=new animal(“dog〞,……); 原型屬性是一個內(nèi)置的屬性,指定了對象所擴展的是構(gòu)造器函數(shù). Dog.prototype.detail_type=“〞; Var cat=new Animal(“cat〞,…); Alert(cat.detail_type);//輸出〞〞 通常情況下用prototyp

36、e.detail_type=“〞;增加屬性,具體的屬性值將在具體的實例化對象中設(shè)置,使用原型屬性可以實現(xiàn)附加對象定義擴展對象. 養(yǎng)成良好的編程習(xí)慣 維護(hù)本錢大于開發(fā)本錢，養(yǎng)成良好的編程習(xí)慣尤為重要。 命名風(fēng)格：命名風(fēng)格必須保持一致性和可讀性，任何一個實體的主要功能或用途必須能夠從命名中明顯的看出來。 函數(shù)：實現(xiàn)功能?！皠釉~+名詞〞 ：showInfo(); 變量名：存儲數(shù)據(jù)：名詞或形容詞+名詞。 以小寫字母開頭，第二個開始小寫，allMoney(); 類：使用名詞，以大寫字母開頭，Book(); 使用注釋 〔1〕使用“//〞實現(xiàn)單行注釋 〔2〕使用“/*〞和“*/〞實現(xiàn)塊注

37、釋，不能嵌套，可以跨多行。 〔3〕使用整塊注釋 注釋不是越多越好，要講究一個度，沒必要為每條語句加注釋。 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P70:〔5〕——〔8〕 課堂講解 P71: 進(jìn)階練習(xí) 第九講 第五章 第一局部 教學(xué)目的和目標(biāo) 1、掌握變量的命名。 2、掌握賦值給變量的方法。 3、掌握變量的作用域。 教學(xué)重點與難點 1、掌握理解變量的命名。 2、掌握理解賦值給變量的方法。 3、掌握理解變量的作用域。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教

38、學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 變量的命名 變量是用來存儲數(shù)據(jù)的，利用變量參與各種運算以實現(xiàn)動態(tài)的效果。 使用有意義的名稱 變量名代表了所存儲數(shù)據(jù)的具體含義，給變量取適宜的名字能夠理解變量的含義，從而讓程序的編寫和理解更加容量。 Var price=32.8 //定義price變量，表示價格 使用多個單詞與分隔符 第二個單詞首字母要答謝，或在多個單詞間使用分隔符“_〞 Var userName=“wei〞; Var dog_weight=55; 全大寫命名方式 變量名字母全部大寫，明確該變量的級別較高，為全局變量。 給變量名增加前綴 防止重名或混淆，把具

39、有相關(guān)性質(zhì)的變量進(jìn)展統(tǒng)一命名，如統(tǒng)一使用前綴或“_〞. 綜合示例 例 第十講 教學(xué)時間： 2課時 賦值給變量 變量的作用是用來存儲數(shù)據(jù)的，變量賦值使用“=〞 〔1〕先定義變量后賦值 Var book_name; book_name=“javascript〞; 〔2〕定義時賦值 Var book_name=“javascript〞; 變量的作用域 分為全局和局部兩種，全局變量是在函數(shù)體外聲明的，可以在任何地方使用，局部變量在函數(shù)體內(nèi)聲明，只能在函數(shù)體內(nèi)使用，并隨著函數(shù)的完畢而消失。 局部變量：在函數(shù)體內(nèi)聲明的

40、變量 全局變量：在函數(shù)體外聲明的變量，聲明后可以在任何地方調(diào)用，聲明全局變量，全部用大寫， 如果全局變量和局部變量遇到重名情況，局部變量優(yōu)先。 布置課后任務(wù)與作業(yè) 完成課后練習(xí)題：P87:〔1〕——〔4〕課堂講解 第十一講 教學(xué)時間： 2課時 第五章 第二局部 教學(xué)目的和目標(biāo) 1、掌握數(shù)字，布爾值的使用方法。 2、掌握字符串的常見用法。 3、掌握數(shù)組的常見用法。 教學(xué)重點與難點 1、掌握理解數(shù)字，布爾值的使用方法。 2、掌握理解字符串的常見用法。 3、掌握理解

41、數(shù)組的常見用法。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 使用數(shù)字 一種是整型，另一種是浮點型,科學(xué)計算法 例, 使用布爾值 布爾值是一個邏輯值，有true和false兩個，對應(yīng)1和0表示。 使用字符串 字符串是一段文本內(nèi)容，常用一對單引號或雙引號起來。 創(chuàng)建字符串：字符串里含有雙引號，那么創(chuàng)建是就用一對單引號“‘〞. Var str=‘I am “student〞’; Var str=“I am ‘student’〞; 字符串必須以一樣類型的引

42、號開始和完畢。 使用轉(zhuǎn)義符號“\〞：在字符串里邊包含單引號和雙引號，了解轉(zhuǎn)義字符。 Var str=“I am \〞student\〞,from ‘china’〞; 表 使用length屬性獲取字符串長度，length屬性獲取。 截取字符串：substring方法，substr方法 (1)截取指定起始位置和長度的字符串。 Var str=“十月一日是國慶節(jié)〞; Alert(str.substr(5,3));//國慶節(jié) (2)只指定起始位置截取字符串，默認(rèn)到字符串末尾。 Alert(str.substr(5)) (3)利用length屬性動態(tài)指定位置截取。 Alert(s

43、tr.substr(0,str.length-3)); 字符串的大小寫轉(zhuǎn)換： toLowerCase():變?yōu)樾? toUpperCase():變?yōu)榇髮? Alert(“大寫:〞+str.toUpperCase()+〞小寫:〞 str.toLowerCase()); 查找與匹配字符串： Indexof 或lastindexof方法來進(jìn)展 Indexof：字符串在被查找的字符串里第一次出現(xiàn)的位置。 lastindexof ：該字符串在被查找的字符串里最后一次出現(xiàn)的位置。 Var str=“a〞; Var str1=“javascript〞; Alert(“the first

44、:〞+str1.indexOf(str)+〞,the last :〞+ str1.lastIndexOf(str)); 第十二講 教學(xué)時間： 2課時 使用數(shù)組 數(shù)組是由幾個變量組合起來的一個變量組。 創(chuàng)建一個數(shù)組 使用Array()構(gòu)造器來創(chuàng)建。 Var ary=new Array(num); 5.7.2 給數(shù)組元素賦值，通過下標(biāo)元素賦值也可以創(chuàng)建時賦值。 Var ary=new Array(“a〞,〞b〞,〞c〞); Ary[0]=“a〞; Alert(ary[0]);

45、 5.7.3 使用length屬性獲取數(shù)組的長度，數(shù)組的長度是數(shù)組元素的個數(shù)，。 For (var i=0;i

46、用函數(shù)。 3、函數(shù)概念多，理解難，要求學(xué)生短時間里具有編寫函數(shù)能力。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 6.1.1定義函數(shù) JavaScript函數(shù)可以封裝那些在程序中可能要屢次用到的模塊。并可作為事件驅(qū)動的結(jié)果而調(diào)用的程序。從而實現(xiàn)一個函數(shù)把它與事件驅(qū)動相關(guān)聯(lián)。這是與其它語言不一樣的地方。 function 函數(shù)名〔參數(shù)〕 { 具體語句; } 函數(shù)由關(guān)鍵字function定義，function是關(guān)鍵字。 函數(shù)名必須是唯一的，命名規(guī)如此與變

47、量名的命名規(guī)如此一樣，并且是大小寫有區(qū)別的。 函數(shù)可以帶參數(shù)也把可以不帶參數(shù)，其中函數(shù)的參數(shù)可以是常量、變量或表達(dá)式。 當(dāng)使用多個參數(shù)時，參數(shù)間以逗號相隔。 如果函數(shù)需要返回，如此使用關(guān)鍵字return 將值返回。 如果所要調(diào)用的函數(shù)不帶參數(shù)，使用時只要直接以“函數(shù)名()〞的方式調(diào)用函數(shù)就可以了。 如果調(diào)用的函數(shù)具有返回值，可以通過變量或直接將函數(shù)置于表達(dá)式中。 function showResult(a,b) { Var result=a*b; Alert(“square is:〞+result); } 函數(shù)說明： 形式參數(shù)：定義函數(shù)時為函數(shù)賦予的參數(shù)，它代表了參數(shù)類

48、型和位置，系統(tǒng)并不為形式參數(shù)分配實際的存儲空間，而是在調(diào)用函數(shù)時候由實際參數(shù)代表形式參數(shù)參與函數(shù)的運行。 實際參數(shù)： 調(diào)用函數(shù)時傳遞給函數(shù)的參數(shù)，它通常在調(diào)用函數(shù)前已經(jīng)分配了內(nèi)存，并且包含了實際數(shù)據(jù)。在函數(shù)執(zhí)行過程中，實際參數(shù)參與函數(shù)的運行，函數(shù)定義中的形式參數(shù)只是明確了調(diào)用函數(shù)時實際傳遞的參數(shù)類型. 定義好函數(shù)，在需要的地方調(diào)用。如果所要調(diào)用的函數(shù)不帶參數(shù)，使用時只要直接以“函數(shù)名()〞的方式調(diào)用函數(shù)就可以了。如果調(diào)用的函數(shù)具有返回值，可以通過變量或直接將函數(shù)置于表達(dá)式中。 在多個位置調(diào)用函數(shù)，可以在下述位置調(diào)用JavaScript函數(shù)： 在JavaScript代碼中調(diào)

49、用函數(shù)；在事件響應(yīng)中調(diào)用函數(shù)；通過調(diào)用函數(shù)。 布置課后任務(wù)與作業(yè) P99: 〔1〕——〔3〕 課堂講解 第十四講 第六章 第一節(jié) 函數(shù)的返回值與作用域 教學(xué)目的和目標(biāo) 1、掌握函數(shù)的返回值。 2、掌握函數(shù)變量的作用域。 3、掌握組合多個函數(shù)實現(xiàn)復(fù)雜功能。 教學(xué)重點與難點 1、掌握理解函數(shù)的返回值。 2、掌握理解函數(shù)變量的作用域。 3、掌握理解組合多個函數(shù)實現(xiàn)復(fù)雜功能。 教學(xué)方法和手段 1、以講授法、課堂操作演示與

50、學(xué)生實訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 〔1〕函數(shù)中變量的作用域:全局變量是在函數(shù)體外聲明的，可以在任何地方使用，局部變量在函數(shù)體內(nèi)聲明，只能在函數(shù)體內(nèi)使用，并隨著函數(shù)的完畢而消失。 〔2〕函數(shù)的返回值: 函數(shù)可以通過參數(shù)承受傳入的變量，將一些結(jié)果返回給調(diào)用函數(shù)的地方，由“return 返回值〞完成； Var retval=函數(shù)〔參數(shù)〕； 例子： 函數(shù)可以返回一個確定的值，也可以只用return返回空值。 代碼重用，編寫成函數(shù)，起主導(dǎo)地位的函數(shù)是主函數(shù)，被調(diào)用的函數(shù)是子函數(shù)，主函數(shù)和子函數(shù)通過主

51、函數(shù)調(diào)用子函數(shù)。 布置課后任務(wù)與作業(yè) P99: 〔4〕——〔6〕 課堂講解 復(fù)習(xí)總結(jié)： 1、掌握函數(shù)的定義格式。 2、掌握函數(shù)參數(shù)的傳遞。 3、掌握調(diào)用函數(shù)。 4、掌握函數(shù)的返回值。 5、掌握函數(shù)變量的作用域。 6、掌握組合多個函數(shù)實現(xiàn)復(fù)雜功能。 第十五講 第六章 第二節(jié) HTML標(biāo)簽與事件 教學(xué)目的和目標(biāo) 1、掌握常用HTML標(biāo)簽事件。 2、掌握事件處理概念，處理程序。 教學(xué)重點與難點 1、掌握常用HTML標(biāo)簽事件。 2、掌握事件處理概念，處理程序。 教學(xué)方法和手段 1、以講授法、課堂操作演示與學(xué)生實

52、訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 6.2.1 HTML標(biāo)簽與事件 HTML標(biāo)簽是主要的事件對象,標(biāo)簽的〞type〞屬性. 1、根本概念 JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對象的根本特征，就是采用事件驅(qū)動(event-driven)。它是在用形界面的環(huán)境下，使得一切輸入變化簡單化。通常鼠標(biāo)或熱鍵的動作我們稱之為事件〔Event〕，而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動〔Event Driver〕。而對事件進(jìn)

53、展處理程序或函數(shù)，我們稱之為事件處理程序〔Event Handler〕。 事件處理器的名稱是由事件名加上一個〞on〞組成,統(tǒng)一用小寫, 事件處理器代碼后面用〞=〞添加了事件觸發(fā)時需要的JavaScript代碼,代碼可以是一條語句,也可以是一個函數(shù), ２、事件處理程序 　　在JavaScript中對象事件的處理通常由函數(shù)(Function)擔(dān)任。其根本格式與函數(shù)全部一樣，可以將前面所介紹的所有函數(shù)作為事件處理程序。格式如下： Function 事件處理名〔參數(shù)表〕{ 事件處理語句集； …… } 　　X例1：下例程序是一個自

54、動裝載和自動卸載的例子。即當(dāng)裝入HTML文檔時調(diào)用loadform()函數(shù),而退出該文檔進(jìn)入另一HTML文檔時如此首先調(diào)用unloadform()函數(shù),確認(rèn)后方可進(jìn)入。 6_s1.htm 　 布置課后任務(wù)與作業(yè) P99: 〔7〕——〔9〕 課堂講解 第十六講 第六章 第二節(jié) 使用常用事件 教學(xué)目的和目標(biāo) 1、掌握使用常用事件方法。 2、掌握使用onClick, onLoad事件。 3、掌握組合函數(shù)實現(xiàn)事件功能。 教學(xué)重點與難點 1、掌握使用常用事件方法。 2、掌握使用onClick, onLoad事件。 3、掌

55、握組合函數(shù)實現(xiàn)事件功能。 教學(xué)方法和手段 1、以講授法、課堂操作演示與學(xué)生實訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 6.2.3、使用常用事件 　　JavaScript事件驅(qū)動中的事件是通過鼠標(biāo)或熱鍵的動作引發(fā)的。它主要有以下幾個事件： 〔１〕單擊事件onClick 　　當(dāng)用戶單擊鼠標(biāo)按鈕時，產(chǎn)生onClick事件。同時onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在如下根本對象中產(chǎn)生： · button〔按鈕對象〕 · checkbox〔復(fù)選框〕或〔檢查列表框〕 · radio 〔單項選擇鈕〕 · res

56、et buttons〔重要按鈕〕 · submit buttons〔提交按鈕〕 例：可通過如下按鈕激活change()文件：

57、area對象以與select對象不再擁有焦點、而退到后臺時，引發(fā)該文件，他與onFocas事件是一個對應(yīng)的關(guān)系。 〔3〕onChange改變事件 　　當(dāng)利用text或texturea元素輸入字符值改變時發(fā)該事件，同時當(dāng)在select表格項中一個選項狀態(tài)改變后也會引發(fā)該事件。 例：

58、ocus 　　當(dāng)用戶單擊Text或textarea以與select對象時，產(chǎn)生該事件。此時該對象成為前臺對象。 〔６〕載入文件onLoad 　　當(dāng)文檔載入時，產(chǎn)生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。 〔７〕卸載文件onUnload 當(dāng)Web頁面退出時引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。 布置課后任務(wù)與作業(yè) P99: 進(jìn)階練習(xí) 復(fù)習(xí)總結(jié)： 1、掌握函數(shù)的使用。 2、掌握常用事件的使用。

59、 第十七講 第7章 算術(shù), 賦值運算符和表達(dá)式 教學(xué)目的和目標(biāo) 1、掌握理解表述式。 2、掌握使用算術(shù)運算符。 3、掌握使用賦值運算符。 教學(xué)重點與難點 1、掌握理解表述式。 2、掌握使用算術(shù)運算符。 3、掌握使用賦值運算符。 教學(xué)方法和手段 1、以講授法、課堂操作演示與學(xué)生實訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 7.1、使用表達(dá)式 　　在定義完變量后，就可以對它們進(jìn)展賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫表達(dá)式來完成，可以說它是變量、常量、布爾

60、與運算符的集合，因此表達(dá)式可以分為算術(shù)表述式、字串表達(dá)式、賦值表達(dá)式以與布爾表達(dá)式等。 7.2、運算符概述 7.3、使用算術(shù)運算符7.3.1、二元運算符 需要兩個操作數(shù)才能進(jìn)展運算. 其二元 操作數(shù)１ 運算符 操作數(shù)２ 　　即由兩個操作數(shù)和一個運算符組成。如50＋40、"This"+"that"等。 Javascript是一種弱類型的語言,本身就有類型轉(zhuǎn)換的功能,如乘法:字符串轉(zhuǎn)換成數(shù)字.但加法除外. Var a=〞3〞; Var b=〞4〞; Var c=a*b; Alert(“result is :〞+c); //12 Var a=〞3〞; Var b=

61、〞4〞; Var c=a+b; Alert(“result is :〞+c); //34 7.3.2、一元運算符 -〔取反〕、++〔遞加1〕、--〔遞減1〕。 (1)〞++〞 運算符在前面: Var a=3; Var b=++a; Alert(“ a is :〞+a+〞,b is:〞+b); //4,4 (2)〞++〞 運算符在后面 var c = 3; var d = c++; alert("c is："+ c + ", d is " + d );//4,3 (3)〞--〞 運算符在前面: Var e=3; Var f=++e; Alert(“ e

62、 is :〞+e+〞,f is:〞+f); //2,2 (4)〞--〞 運算符在后面 var h = 3; var i = h--; alert("h is："+ h + ", i is " + i );//2,3 (5)取反運算符〞-〞 var j = 3; var k = -j; alert("j is："+ j + ", k is " + k );//3,-3 第十八講 教學(xué)時間： 2課時 7.4、使用賦值運算符 “=〞 7.4.1、〞+=〞運算符 先把左右操作數(shù)相加,后把得到的結(jié)果賦值給左邊的操作數(shù). var a = 3; a += 2;

63、 alert("a is："+ a );//5 7.4.2、〞-=〞運算符 var c = 3; c -= 2; alert("c is："+ c );//1 7.4.3、〞*=〞運算符 var e = 3; e *= 2; alert("e is："+ e);//6 7.4.4、〞/=〞運算符 var h = 3; h /= 2; 7.4.5、〞%=〞運算符 var j = 3; j %= 2; alert("j is："+ j );//1 布置課后任務(wù)與作業(yè) P116: 〔1〕——〔3〕 課堂講解 第十九講

64、第7章 關(guān)系,邏輯, 字符串運算符 教學(xué)目的和目標(biāo) 1、掌握使用關(guān)系運算符。 2、掌握使用邏輯運算符。 3、掌握使用字符串運算符。 4、掌握理解運算符的優(yōu)先級。 教學(xué)重點與難點 1、掌握使用關(guān)系運算符。 2、掌握使用邏輯運算符。 3、掌握使用字符串運算符。 4、掌握理解運算符的優(yōu)先級。 教學(xué)方法和手段 1、以講授法、課堂操作演示與學(xué)生實訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時間： 2課時 教學(xué)過程與詳細(xì)內(nèi)容 7.5、使用關(guān)系運算符 比擬運算符它的根本操作過程是，首先對它的操作數(shù)進(jìn)展比擬，此后再返回一個true或False值，有6個比擬運算

65、符: <(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。 7.5.1、〞==〞運算符 判斷左右操作數(shù)是否相等, 相等返回true,否如此返回false var a = 3; var b = 3; var c= 2; var flag_ab= a==b; var flag_ac= a==c; alert("a is equal of b："+ flag_ab+",a is equal of c："+flag_ac );//true,false 7.5.2、〞!=〞運算符 var a = 3; var b = 3; var c= 2

66、; var flag_ab= a!=b; var flag_ac= a!=c; alert("a is not equal of b："+ flag_ab+",a is not equal of c："+flag_ac );//false,true 7.5.3、〞>〞運算符 var a = 3; var b = 3; var c= 2; var flag_ab= a>b; var flag_ac= a>c; alert("a is > b："+ flag_ab+",a is > c："+flag_ac );//true,false 7.5.4、〞>=〞運算符 var a = 3; var b = 3; var c= 2; var flag_ab= a>=b; var flag_ac= a>=c; alert("a is >= b："+ flag_ab+",a is >= c："+flag_ac );//true,false 7.5.5、〞<〞運算符 var a = 3; var b = 3; var c= 2; var flag_a