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

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)識(shí)web腳本。 教學(xué)重點(diǎn)與難點(diǎn) 1、掌握程序的功能。 2、認(rèn)識(shí)web腳本。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時(shí)間： 2課時(shí) 教學(xué)過程與詳細(xì)內(nèi)容 程序與Web腳本javascript可以嵌入到HT

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

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

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

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

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

14、的長(zhǎng)時(shí)間過程被稱之為“軟件開發(fā)〞或者軟件工程。后者也由于這一學(xué)科的日益成熟而逐漸流行。 計(jì)算機(jī)程序是利用相應(yīng)的程序設(shè)計(jì)語言,按照一定的邏輯和語法進(jìn)展編寫和組織,通過程序的運(yùn)行,使得計(jì)算機(jī)實(shí)現(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)識(shí)Web腳本 web腳本有javascript,還有VBscript等,腳本語言同程序設(shè)

15、計(jì)語言一樣,是根據(jù)一定的邏輯和語法來編寫腳本,以實(shí)現(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語言的概念，簡(jiǎn)單語法。 3、掌握程序的功能。 4、認(rèn)識(shí)web腳本。 第

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

42、號(hào)開始和完畢。 使用轉(zhuǎn)義符號(hào)“\〞：在字符串里邊包含單引號(hào)和雙引號(hào)，了解轉(zhuǎn)義字符。 Var str=“I am \〞student\〞,from ‘china’〞; 表 使用length屬性獲取字符串長(zhǎng)度，length屬性獲取。 截取字符串：substring方法，substr方法 (1)截取指定起始位置和長(zhǎng)度的字符串。 Var str=“十月一日是國(guó)慶節(jié)〞; Alert(str.substr(5,3));//國(guó)慶節(jié) (2)只指定起始位置截取字符串，默認(rèn)到字符串末尾。 Alert(str.substr(5)) (3)利用length屬性動(dòng)態(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é)時(shí)間： 2課時(shí) 使用數(shù)組 數(shù)組是由幾個(gè)變量組合起來的一個(gè)變量組。 創(chuàng)建一個(gè)數(shù)組 使用Array()構(gòu)造器來創(chuàng)建。 Var ary=new Array(num); 5.7.2 給數(shù)組元素賦值，通過下標(biāo)元素賦值也可以創(chuàng)建時(shí)賦值。 Var ary=new Array(“a〞,〞b〞,〞c〞); Ary[0]=“a〞; Alert(ary[0]);

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

46、用函數(shù)。 3、函數(shù)概念多，理解難，要求學(xué)生短時(shí)間里具有編寫函數(shù)能力。 教學(xué)方法和手段 1、以課堂問答法和案例討論法為主，以講授法和指導(dǎo)法為輔。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時(shí)間： 2課時(shí) 教學(xué)過程與詳細(xì)內(nèi)容 6.1.1定義函數(shù) JavaScript函數(shù)可以封裝那些在程序中可能要屢次用到的模塊。并可作為事件驅(qū)動(dòng)的結(jié)果而調(diào)用的程序。從而實(shí)現(xiàn)一個(gè)函數(shù)把它與事件驅(qū)動(dòng)相關(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)使用多個(gè)參數(shù)時(shí)，參數(shù)間以逗號(hào)相隔。 如果函數(shù)需要返回，如此使用關(guān)鍵字return 將值返回。 如果所要調(diào)用的函數(shù)不帶參數(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ù)，它代表了參數(shù)類

48、型和位置，系統(tǒng)并不為形式參數(shù)分配實(shí)際的存儲(chǔ)空間，而是在調(diào)用函數(shù)時(shí)候由實(shí)際參數(shù)代表形式參數(shù)參與函數(shù)的運(yùn)行。 實(shí)際參數(shù)： 調(diào)用函數(shù)時(shí)傳遞給函數(shù)的參數(shù)，它通常在調(diào)用函數(shù)前已經(jīng)分配了內(nèi)存，并且包含了實(shí)際數(shù)據(jù)。在函數(shù)執(zhí)行過程中，實(shí)際參數(shù)參與函數(shù)的運(yùn)行，函數(shù)定義中的形式參數(shù)只是明確了調(diào)用函數(shù)時(shí)實(shí)際傳遞的參數(shù)類型. 定義好函數(shù)，在需要的地方調(diào)用。如果所要調(diào)用的函數(shù)不帶參數(shù)，使用時(shí)只要直接以“函數(shù)名()〞的方式調(diào)用函數(shù)就可以了。如果調(diào)用的函數(shù)具有返回值，可以通過變量或直接將函數(shù)置于表達(dá)式中。 在多個(gè)位置調(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、掌握組合多個(gè)函數(shù)實(shí)現(xiàn)復(fù)雜功能。 教學(xué)重點(diǎn)與難點(diǎn) 1、掌握理解函數(shù)的返回值。 2、掌握理解函數(shù)變量的作用域。 3、掌握理解組合多個(gè)函數(shù)實(shí)現(xiàn)復(fù)雜功能。 教學(xué)方法和手段 1、以講授法、課堂操作演示與

50、學(xué)生實(shí)訓(xùn)為主。 2、使用先鋒電子教室多媒體手段進(jìn)展教學(xué)。 教學(xué)時(shí)間： 2課時(shí) 教學(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ù)可以返回一個(gè)確定的值，也可以只用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、掌握組合多個(gè)函數(shù)實(shí)現(xiàn)復(fù)雜功能。 第十五講 第六章 第二節(jié) HTML標(biāo)簽與事件 教學(xué)目的和目標(biāo) 1、掌握常用HTML標(biāo)簽事件。 2、掌握事件處理概念，處理程序。 教學(xué)重點(diǎn)與難點(diǎn) 1、掌握常用HTML標(biāo)簽事件。 2、掌握事件處理概念，處理程序。 教學(xué)方法和手段 1、以講授法、課堂操作演示與學(xué)生實(shí)

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

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

54、動(dòng)裝載和自動(dòng)卸載的例子。即當(dāng)裝入HTML文檔時(shí)調(diào)用loadform()函數(shù),而退出該文檔進(jìn)入另一HTML文檔時(shí)如此首先調(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ù)實(shí)現(xiàn)事件功能。 教學(xué)重點(diǎn)與難點(diǎn) 1、掌握使用常用事件方法。 2、掌握使用onClick, onLoad事件。 3、掌

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

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

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

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

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

60、與運(yùn)算符的集合，因此表達(dá)式可以分為算術(shù)表述式、字串表達(dá)式、賦值表達(dá)式以與布爾表達(dá)式等。 7.2、運(yùn)算符概述 7.3、使用算術(shù)運(yùn)算符7.3.1、二元運(yùn)算符 需要兩個(gè)操作數(shù)才能進(jìn)展運(yùn)算. 其二元 操作數(shù)１ 運(yùn)算符 操作數(shù)２ 　　即由兩個(gè)操作數(shù)和一個(gè)運(yùn)算符組成。如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、一元運(yùn)算符 -〔取反〕、++〔遞加1〕、--〔遞減1〕。 (1)〞++〞 運(yùn)算符在前面: Var a=3; Var b=++a; Alert(“ a is :〞+a+〞,b is:〞+b); //4,4 (2)〞++〞 運(yùn)算符在后面 var c = 3; var d = c++; alert("c is："+ c + ", d is " + d );//4,3 (3)〞--〞 運(yùn)算符在前面: Var e=3; Var f=++e; Alert(“ e

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

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

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

65、符: <(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。 7.5.1、〞==〞運(yùn)算符 判斷左右操作數(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、〞!=〞運(yùn)算符 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、〞>〞運(yùn)算符 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、〞>=〞運(yùn)算符 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、〞<〞運(yùn)算符 var a = 3; var b = 3; var c= 2; var flag_a