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

《《JavaScript程序設(shè)計》電子教案.doc》由會員分享，可在線閱讀，更多相關(guān)《《JavaScript程序設(shè)計》電子教案.doc（95頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、江西先鋒軟件職業(yè)技術(shù)學院教 案院、部： 軟件工程學院 教研室： 計算機應(yīng)用 姓 名： 王維偉 職 稱： 助教 課程名稱： JavaScript程序設(shè)計 授課專業(yè)： 1003級 學生人數(shù)： 授課時間： 2011 至 2012 學年度 1 學期教材名稱： JavaScript入門與提高 編者 曾光 出版單位： 科學出版社 出版時間 2008年7月 第一講第一章 第一節(jié)萬維網(wǎng)和HTML教學目的和目標1、了解萬維網(wǎng)的發(fā)展歷史及功能。2、介紹HTML語言的概念，簡單語法。3、熟練編寫靜態(tài)頁面。教學重點與難點1、掌握理解萬維網(wǎng)的功能。2、掌握理解HTML概念，語法規(guī)則及文件結(jié)構(gòu)。3、HTML頁面元素多，記

2、憶難，要求學生短時間里具有編寫HTML頁面能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容1.1萬維網(wǎng)和HTML萬維網(wǎng)的目的是用于共享資源,這些資源包括文字,圖片,音頻和視頻等.統(tǒng)一的標準是一種用于定位和打開這些信息的超文本語言, HTML語言。1.1.1什么是萬維網(wǎng) 萬維網(wǎng),環(huán)球網(wǎng),1989年始于瑞士日內(nèi)瓦的CERN,通過統(tǒng)一的方式來訪問各類信息，這就是超文本鏈接。 為了設(shè)計含有各類信息資源的超文本鏈接的萬維網(wǎng)頁面，產(chǎn)生了超文本標記語言， 即HTML。 流行瀏覽器有IE,NETscape,f

3、irefox等。 頁面都有一個唯一的地址，即統(tǒng)一資源定位符URL,使用的協(xié)議是HTTP協(xié)議。 域名是包括標識串和網(wǎng)站的類型，com代表私營公司，gov代表政府，edu代表教育機構(gòu)等。 例：http:/ http是協(xié)議,www是服務(wù), 是域名。1.1.2 了解HTML標簽HTML頁面是純文本，可以用記事本來編輯。HTML文件的后綴名必須是.html或.htm，用瀏覽器來解釋和執(zhí)行。HTML文檔基本組成部分是標簽，一般有一對尖括號“”,并不是所有的標簽都有結(jié)束標簽。HTML文檔必須以開始，結(jié)束，一個HTML文檔分為HEAD和BODY兩部分。標簽：href屬性是用來指定超文本鏈接所要訪問的URL地址

4、。標簽：src屬性是用來指定要顯示的圖片的地址。HTML標簽允許嵌套使用。例子：1-1.htm表示注釋。div與span:這是用得最多的兩個標簽，以后會有專文總結(jié)如何使用好他們，現(xiàn)在必須知道的是前者是block元素，后者是inline元素；而block元素與inline元素區(qū)別正如名字告訴我們的那樣：前者是所包含的內(nèi)容是一個整體，幾個block元素間垂直堆疊，強制后面元素另起一行；而后者，幾個inline元素水平排列，相互間只有水平方向上的邊距設(shè)置才會有效，padding-top，margin-bottom等豎直格式設(shè)置會被忽略。不添加css，前者無法并放，后者無法堆疊。即span內(nèi)部是不能放

5、div的。ul，ol與dl:無序，有序（按字母或數(shù)字順序）以及定義（表示對話也可以）列表，列表項使用元素標記，不能含block元素，即不能包含其中。a 與link:,可有得研究他和都有兩個重要屬性：rel以及rev，rel指出該文檔與href指向的鏈接關(guān)系類型，rev則將兩對象方向互換，可選類型有：alternative，如果是可選譯文，則與lang屬性一起用；如果是可選媒介，則用到media屬性。colgroup，col:在表頭區(qū)分格需要這兩個標簽，并不實用，不如用scope屬性值，rowspan，colspan等屬性也可，具體哪種更好現(xiàn)在不明。form與input，label:用得太多了，

6、就說form的enctype屬性與input有file類型可用有關(guān)，而reset類型還是別再用了。1.1.3 標簽的常用屬性Background:設(shè)置頁面的背景圖案Bgcolor:設(shè)置頁面的背景色Text:設(shè)置頁面的文字顏色Topmargin：頂空白像素Leftmargin:左空白像素Link: 指定文檔的所有連接顏色不推薦使用樣式來取代Vlink: 指定文檔那些被訪問過的連接顏色不推薦使用樣式來取代1.1.4編寫HTML頁面例子：1-3.htmHTML頁面是不分大小寫的，常用小寫。一定要閉合HTML標簽,聲明正確的文檔類型( DocType ), 不要使用嵌入式CSS樣式, 在頁面head標

7、簽中引入所有的樣式表文件, 不要使用嵌入式JavaScript.1.1.5使用瀏覽器訪問網(wǎng)頁流行瀏覽器有IE,NETscape,firefox等,跨瀏覽器訪問網(wǎng)頁。布置課后任務(wù)及作業(yè)完成課后練習題：P10: （1）（5） 課堂講解第二講第一章 第二節(jié)程序與Web腳本教學目的和目標1、了解程序的功能。2、了解與認識web腳本。教學重點與難點1、掌握程序的功能。2、認識web腳本。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容1.2程序與Web腳本javascript可以嵌入到HTML頁面, java

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

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

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

11、過程被稱之為原編程(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)路的拓撲結(jié)構(gòu)一起，定義了網(wǎng)絡(luò)的行為。人們通常很難界定這些數(shù)據(jù)到底表示什么或者它們是否可以由程序來代替。這個例子以及跟人工智能相關(guān)的其它一些問題進一步考驗程序和數(shù)據(jù)的區(qū)別。算法:算法指解決某個問題的嚴格方法，通常還需輔以某種程度上的運行性能分析。算法可以是純理論的，也可以由一個計算機程

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

13、熟而逐漸流行。計算機程序是利用相應(yīng)的程序設(shè)計語言,按照一定的邏輯和語法進行編寫和組織,通過程序的運行,使得計算機實現(xiàn)某種特定的功能。與web相關(guān)的有asp,jsp,php等。例: Php程序一段代碼如下:If ($num0)echo “the number you enter is 0”Elseecho “the number you enter is 0)alert(“the number you enter is 0”);Elsealert(“the number you enter is =0”);布置課后任務(wù)及作業(yè)完成課后練習題：P11: 進階練習 。復習總結(jié)： 1、萬維網(wǎng)的發(fā)展歷史及

14、功能是共享資源。2、HTML語言的概念，簡單語法。 3、掌握程序的功能。4、認識web腳本。第三講第二章第一節(jié)JavaScript的發(fā)展史 第二節(jié)JavaScript的作用教學目的和目標1、了解JavaScript的發(fā)展史。2、掌握JavaScript的作用。3、熟練編寫頁面特效。教學重點與難點1、掌握理解JavaScript的作用。2、熟練編寫各種頁面特效。3、HTML頁面元素多，記憶難，要求學生短時間里具有編寫HTML頁面能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容2.1 JavaSc

15、ript的發(fā)展史 Netscape的JavaScript:增加更多的用戶交互,控制瀏覽器以及動態(tài)創(chuàng)建頁面內(nèi)容的諸多功能,最主要的是使合法性驗證之類的工作在客戶端得以實現(xiàn)。Microsoft的Jscript:IE瀏覽器。EMCA-262標準:歐洲計算機制造商聯(lián)合會創(chuàng)造了一個國際通用的標準化版本的JavaScript，稱為EMCAScript。2.2 JavaScript的作用2.2.1表單驗證:最基本和最重要的作用。例：2-1.htm演示各個限制條件。2.2.2實現(xiàn)網(wǎng)頁特效。文字特效：例子2-2.htm鼠標特效 2-3.htm圖片特效 2-4.htm頁面特效2-5.htm時間特效2-6.htm狀

16、態(tài)欄特效2-7.htm導航特效 2-8.htm綜合特效 2-9.htm2.2.3改善頁面樣式頁面樣式是通過樣式表來定義的.通過樣式表,定義頁面元素的表現(xiàn)形式。如控制顏色,圖案,文字,可見性等。2.2.4 應(yīng)用AjaxAjax技術(shù)并不是一個新的語言，是javascript,xmlhttp,css,xhtml,xml等的一個綜合應(yīng)用。優(yōu)勢是通過數(shù)據(jù)異步傳輸從而減少交互時間和改善用戶體驗等。例：圖2.20:頁面的多塊區(qū)域能分時異步加載，減少等待時間。圖2.23:通過Ajax技術(shù)，實時對用戶名進行驗證并在頁面上顯示文字提示。布置課后任務(wù)及作業(yè)完成課后練習題：P32:（1）（4）課堂講解第四講第二章第三

17、，四，五節(jié)使用JavaScript，瀏覽器與JavaScript，其他常用腳本和技術(shù)教學目的和目標1、掌握Javascript的使用。2、了解瀏覽器與JavaScript的版本號。3、了解其他常用腳本和技術(shù)。教學重點與難點1、掌握理解JavaScript的使用。2、掌握理解文檔對象模型概念。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容2.3使用Javascript 2.3.1認識標簽Javascript是嵌入到html才被解釋執(zhí)行的， Javascript代碼可以放到頁面的任意位置。使用將程序段

18、包含起來，可以讓不支持的瀏覽器忽略過這一段代碼。2.3.2嵌入網(wǎng)頁Alert():彈出一個按鈕的提示框。例：2-10.htm2.3.3 使用JavaScript文件把篇幅較多的JavaScript代碼保存到一個單獨的文件中，然后在HTML文檔中進行引用，保持頁面的清晰性。代碼重復使用，只需引用文件即可，減少維護的工作量。JavaScript文件使用js作為擴展名，通過中的src來引用.使用標簽的src屬性來指定文件的路經(jīng)，可以使用外部的JavaScript文件。2.3.4 使用事件事件是Javascript時刻監(jiān)視某些特定條件，當Javascript發(fā)現(xiàn)這些條件發(fā)生后，根據(jù)具體的代碼對事件進行

19、響應(yīng)。如onclick,onfocus事件等。例：2-12.htm除了由用戶的行為來觸發(fā)的事件外，Javascript也響應(yīng)某些不由用戶觸發(fā)的事件，如整個HTML頁面加載完后的load(加載)事件。2.4瀏覽器與JavaScript2.4.1簡單認識文檔對象模型文檔對象模型DOM（Document Object Model）是表示文檔(HTML文檔)和訪問，操作構(gòu)成文檔的各種元素(如HTML標記和文本串)的應(yīng)用程序接口(API)，把整個頁面規(guī)劃成由節(jié)點分層級構(gòu)成的文檔。例：2-13.htmDOM通過創(chuàng)建樹來表示一個HTML文檔，從而使控制文檔內(nèi)容及結(jié)構(gòu)變得異常的容易。2.4.2 Javascr

20、ipt的版本 表2.12.4.3不同的瀏覽器支持 IE,Netscape,firefox等,表2.22.4.4指定Javascript版本標簽的language屬性來指定。例：Alert(“hello”); 版本號可以省。2.5其他常用腳本和技術(shù)2.5.1VBscript語言 例：2-14.htm2.5.2Java語言JavaScript和Java不是一個概念，Java是SUN公司推出的編程語言，跨平臺執(zhí)行的程序設(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴展Netscape Navigator功能而開發(fā)的一種可以嵌入Web

21、頁面中的基于對象和事件驅(qū)動的解釋性語言。 2.5.3 Asp和A語言Asp是“活動服務(wù)器網(wǎng)頁”，用來創(chuàng)建和運行動態(tài)網(wǎng)頁或Web應(yīng)用程序，用于各種動態(tài)網(wǎng)站，擴展名為.asp。A是asp的最近版本，擴展名為.asp或.aspx。2.5.4 php語言基于服務(wù)端創(chuàng)建動態(tài)網(wǎng)站的腳本語言，是開放源碼和跨平臺運行。布置課后任務(wù)及作業(yè)完成課后練習題：P32:（5）（9）課堂講解P32: 進階練習 即項目實訓1第五講第三章 第一部分教學目的和目標1、熟悉編輯javascript常用工具。2、掌握整個程序設(shè)計過程與思路。3、掌握普通提示對話框方法。4、掌握控制頁面元素的顯示和隱藏方法。教學重點與難點 1、掌握理

22、解整個程序設(shè)計過程與思路。2、掌握普通提示對話框方法。3、掌握控制頁面元素的顯示和隱藏方法。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容3.1常用工具介紹3.1.1使用記事本:記事本編輯純文本文件,HTML文檔,Javascript程序和其他各種類型的文本文件.演示操作.注意保存文件類型選擇為”所有文件”,文件名擴展名為.htm或html,js等.3.1.2 使用EditPlus文字編輯器。EditPlus文字編輯器功能強大,使用方便。3.1.3 使用Dreamweaver網(wǎng)頁軟件1.方便的設(shè)計

23、2.可視化編輯3.強大的Javascript和CSS支持3.2設(shè)計簡單的Javascript功能要創(chuàng)建一個完整的程序,事先需要對所實現(xiàn)的功能進行設(shè)計.例:2-9.htm3.3編寫Javascript代碼之前按照設(shè)計好的功能進行具體的實現(xiàn),包括HTML頁面和Javascript相關(guān)編寫3.3.1向用戶顯示普通提示對話框一個好的網(wǎng)頁除了要有合適的動態(tài)內(nèi)容外,還應(yīng)該有好的交互性,就是讓用戶在訪問網(wǎng)頁的過程中得到信息提示,或提供給用戶一些選擇.Alert()是內(nèi)置函數(shù),出現(xiàn)提示框.3.3.2控制頁面元素的顯示和隱藏Javascript的主要作用之一是控制頁面元素的樣式.例: 3-1.HTMLJavas

24、cript控制樣式的顯示需要兩個條件:(1)獲取需要控制的元素對象.document.getElementById(“id”)(2)使用對象的style屬性來操作樣式.例: 3-2.html布置課后任務(wù)及作業(yè)完成課后練習題：P59:（1）（3）課堂講解第六講第三章 第二部分教學目的和目標1、掌握確認提示對話框方法。2、掌握網(wǎng)頁中輸出內(nèi)容方法。3、掌握變量存儲數(shù)據(jù)定義方法。4、掌握函數(shù)定義方法。5、掌握HTML與Javascript整合技巧與方法。教學重點與難點1、掌握確認提示對話框方法。2、掌握網(wǎng)頁中輸出內(nèi)容方法。3、掌握變量存儲數(shù)據(jù)定義方法。4、掌握函數(shù)定義方法。5、理解HTML與Javas

25、cript整合技巧與方法。6、培養(yǎng)學生整合HTML與Javascript能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容3.3.3 向用戶顯示確認提示對話框confirm()是內(nèi)置函數(shù),出現(xiàn)確認提示框.3.3.4 在網(wǎng)頁中輸出內(nèi)容提供了在網(wǎng)頁中輸出內(nèi)容的方法,用”document.write();”例: 3-3.html3.3.5 使用變量存儲數(shù)據(jù),用var來顯示Var str=“hello”;例: 3-5.html3.3.6 使用javascript進行計算 Javascript支持”+,-

26、,*,/”等運算符.例: 3-6.html3.3.7 將javascript代碼定義為函數(shù) 定義函數(shù)使用function語句Function 函數(shù)名() 語句;3.4HTML文檔編寫與Javascript整合把代碼嵌入到頁面中.3.4.1編寫出所有需要的頁面元素3-7.html3-8.html3.4.2通過單選按鈕控制隱藏屬性編寫出所有需要的頁面元素3-9.html3.4.3提交表單時的確認提示框3.4.4用JAVASCRIPT函數(shù)計算結(jié)果3.4.5生成最終頁面3.4.6整合所有功能:借助主函數(shù)把所有功能組織起來.3-10.html布置課后任務(wù)及作業(yè)完成課后練習題：P59:（4）（10）課堂講

27、解P59: 進階練習 即項目實訓2。第七講第四章第一部分教學目的和目標1、掌握Javascript語法結(jié)構(gòu)。2、掌握理解Javascript對象概念。3、掌握理解Javascript對象創(chuàng)建。教學重點與難點1、掌握理解Javascript語法結(jié)構(gòu)。2、掌握理解Javascript對象概念。3、對象概念多，理解難，要求學生短時間里具有編寫對象能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容4.1Javascript語法結(jié)構(gòu)4.1.1大小寫敏感對大小寫敏感，必須大小寫一致 ，而HTML是不區(qū)分大小

28、寫的，而Javascript是嵌入到html中去，必須注意。4.1.2空格，制表符和換行使分隔符，來對齊用程序語句，或?qū)⒁粭l長語句分成幾行編寫，對于程序的美觀整潔是很有好處的，增加了程序的可讀性。4.1.3直接量是程序里直接顯示出來的數(shù)值。4.1.4分號用來分隔兩條程序語句的，每條語句都使用一個分號“;”作為結(jié)束。4.1.5標識符用來命名變量或函數(shù)等。標識符命名規(guī)則必須是以字母，下劃線或美元符開始的字母，數(shù)字 ，或任意組合，數(shù)字不允許作為變量名的開頭，標識符不能和保留字重名。4.1.6保留字表4.1,4.2,4.34.2理解Javascript對象4.2.1 Javascript面向?qū)ο蟾拍蠲?/p>

29、向?qū)ο蟊M可能模擬人類的思維習慣,使程序設(shè)計的方法與過程盡可能的接近人類的自然思維方式.Javascript對象類基于構(gòu)造器函數(shù)創(chuàng)建的實例化一個對象,構(gòu)造器函數(shù)包含屬性和方法兩個基本的元素,屬性實際上用于存儲對象的數(shù)據(jù),方法是在對象內(nèi)部調(diào)用的函數(shù),用來實現(xiàn)一些功能或?qū)傩赃M行訪問更改.4.2.2 對象的創(chuàng)建Javascript對象是通過”new”來創(chuàng)建的,Var obj=new object();類名通常以大寫字母來開頭,而構(gòu)造器函數(shù)相當于類,因此構(gòu)造機器函數(shù)通常以大寫字母開頭.Var date=new Date();/創(chuàng)建日期對象布置課后任務(wù)及作業(yè)完成課后練習題：P70:（1）（4）課堂講解第

30、八講第四章 第二部分教學目的和目標1、掌握Javascript對象屬性的設(shè)置和讀取。2、掌握Javascript對象的方法，繼承和原型。3、培養(yǎng)學生養(yǎng)成良好的編程習慣。教學重點與難點1、掌握理解Javascript對象屬性的設(shè)置和讀取。2、掌握理解Javascript對象的方法，繼承和原型。3、理解良好的編程習慣重要性。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容4.2.3 屬性的設(shè)置和讀取通常用”.”運算符實現(xiàn)屬性的存取,”.”左邊是表示該對象的引用名,右邊是屬性名稱.Var dog=new

31、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 對象的繼承和原型:對象是類的一個實例,類是對象的抽象,繼承是對象的一個很重要的特征,對象可以從實例化它的構(gòu)造器函數(shù)中繼承到屬性和方法.Function Animal(type,sound,food)This.animal_type=type;

32、./實例化對象Var dog=new animal(“dog”,);原型屬性是一個內(nèi)置的屬性,指定了對象所擴展的是構(gòu)造器函數(shù).Dog.prototype.detail_type=“”;Var cat=new Animal(“cat”,);Alert(cat.detail_type);/輸出”通常情況下用prototype.detail_type=“”;增加屬性,具體的屬性值將在具體的實例化對象中設(shè)置,使用原型屬性可以實現(xiàn)附加對象定義擴展對象.4.3養(yǎng)成良好的編程習慣維護成本大于開發(fā)成本，養(yǎng)成良好的編程習慣尤為重要。4.3.1命名風格：命名風格必須保持一致性和可讀性，任何一個實體的主要功能或用途

33、必須能夠從命名中明顯的看出來。函數(shù)：實現(xiàn)功能?！皠釉~+名詞” ：showInfo();變量名：存儲數(shù)據(jù)：名詞或形容詞+名詞。以小寫字母 開頭，第二個開始小寫，allMoney();類：使用名詞，以大寫字母開頭，Book();4.3.2使用注釋（1）使用“/”實現(xiàn)單行注釋（2）使用“/*”和“*/”實現(xiàn)塊注釋，不能嵌套，可以跨多行。（3）使用整塊注釋注釋不是越多越好，要講究一個度，沒必要為每條語句加注釋。布置課后任務(wù)及作業(yè)完成課后練習題：P70:（5）（8） 課堂講解P71: 進階練習 第九講第五章 第一部分教學目的和目標1、掌握變量的命名。2、掌握賦值給變量的方法。3、掌握變量的作用域。教學重

34、點與難點1、掌握理解變量的命名。2、掌握理解賦值給變量的方法。3、掌握理解變量的作用域。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容5.1變量的命名變量是用來存儲數(shù)據(jù)的，利用變量參與各種運算以實現(xiàn)動態(tài)的效果。5.1.1使用有意義的名稱變量名代表了所存儲數(shù)據(jù)的具體含義，給變量取合適的名字能夠理解變量的含義，從而讓程序的編寫和理解更加容量。Var price=32.8 /定義price變量，表示價格5.1.2使用多個單詞與分隔符第二個單詞首字母要答謝，或在多個單詞間使用分隔符“_”Var userN

35、ame=“wei”;Var dog_weight=55;5.1.3全大寫命名方式變量名字母全部大寫，表明該變量的級別較高，為全局變量。5.1.4給變量名增加前綴防止重名或混淆，把具有相關(guān)性質(zhì)的變量進行統(tǒng)一命名，如統(tǒng)一使用前綴或“_”.5.1.5綜合示例 例5-1.html第十講教學時間：2課時5.2賦值給變量變量的作用是用來存儲數(shù)據(jù)的，變量賦值使用“=”（1）先定義變量后賦值 Var book_name;book_name=“javascript”;（2）定義時賦值 Var book_name=“javascript”;5.3變量的作用域分為全局和局部兩種，全局變量是在函數(shù)體外聲明的，可以在任

36、何地方使用，局部變量在函數(shù)體內(nèi)聲明，只能在函數(shù)體內(nèi)使用，并隨著函數(shù)的結(jié)束而消失。5.3.1局部變量：在函數(shù)體內(nèi)聲明的變量5.3.2全局變量：在函數(shù)體外聲明的變量，聲明后可以在任何地方調(diào)用，聲明全局變量，全部用大寫，如果全局變量和局部變量遇到重名情況，局部變量優(yōu)先。布置課后任務(wù)及作業(yè)完成課后練習題：P87:（1）（4）課堂講解第十一講教學時間：2課時第五章 第二部分教學目的和目標1、掌握數(shù)字，布爾值的使用方法。2、掌握字符串的常見用法。3、掌握數(shù)組的常見用法。教學重點與難點1、掌握理解數(shù)字，布爾值的使用方法。2、掌握理解字符串的常見用法。3、掌握理解數(shù)組的常見用法。教學方法和手段1、以課堂問答法

37、和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容5.4使用數(shù)字一種是整型，另一種是浮點型,科學計算法例5-2.html,5-3.html5.5使用布爾值布爾值是一個邏輯值，有true和false兩個，對應(yīng)1和0表示。5.6使用字符串字符串是一段文本內(nèi)容，常用一對單引號或雙引號起來。5.6.1創(chuàng)建字符串：字符串里含有雙引號，那么創(chuàng)建是就用一對單引號“”.Var str=I am “student”;Var str=“I am student”;字符串必須以相同類型的引號開始和結(jié)束。5.6.2使用轉(zhuǎn)義符號“”：在字符串里邊包含單引號

38、和雙引號，了解轉(zhuǎn)義字符。Var str=“I am ”student”,from china”;表5.15.6.3使用length屬性獲取字符串長度，length屬性獲取。5.6.4截取字符串：substring方法，substr方法(1)截取指定起始位置和長度的字符串。Var str=“十月一日是國慶節(jié)”;Alert(str.substr(5,3);/國慶節(jié)(2)只指定起始位置截取字符串，默認到字符串末尾。Alert(str.substr(5)(3)利用length屬性動態(tài)指定位置截取。Alert(str.substr(0,str.length-3);5.6.5字符串的大小寫轉(zhuǎn)換：toLow

39、erCase():變?yōu)樾憈oUpperCase():變?yōu)榇髮慉lert(“大寫:”+str.toUpperCase()+”小寫:” str.toLowerCase();5.6.6查找與匹配字符串：Indexof 或lastindexof方法來進行Indexof：字符串在被查找的字符串里第一次出現(xiàn)的位置。lastindexof ：該字符串在被查找的字符串里最后一次出現(xiàn)的位置。Var str=“a”;Var str1=“javascript”;Alert(“the first :”+str1.indexOf(str)+”,the last :”+ str1.lastIndexOf(str);第十

40、二講教學時間：2課時5.7使用數(shù)組數(shù)組是由幾個變量組合起來的一個變量組。5.7.1創(chuàng)建一個數(shù)組使用Array()構(gòu)造器來創(chuàng)建。Var ary=new Array(num);5.7.2 給數(shù)組元素賦值，通過下標元素賦值也可以創(chuàng)建時賦值。Var ary=new Array(“a”,”b”,”c”);Ary0=“a”;Alert(ary0);5.7.3 使用length屬性獲取數(shù)組的長度，數(shù)組的長度是數(shù)組元素的個數(shù)，ary.length。For (var i=0;iary.length;i+) alert(aryi);5.7.4多維數(shù)組，數(shù)組中的每一個元素就是一個數(shù)組，就變成了三維數(shù)組.例：5-4.

41、html。布置課后任務(wù)及作業(yè)完成課后練習題：P87: （5）（17） 課堂講解P87: 進階練習 第十三講第六章 第一節(jié) 函數(shù)的定義與調(diào)用教學目的和目標1、掌握函數(shù)的定義格式。2、掌握函數(shù)參數(shù)的傳遞。3、掌握調(diào)用函數(shù)。教學重點與難點1、掌握理解函數(shù)參數(shù)的傳遞。2、掌握理解調(diào)用函數(shù)。3、函數(shù)概念多，理解難，要求學生短時間里具有編寫函數(shù)能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容6.1.1定義函數(shù)JavaScript函數(shù)可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅(qū)動的結(jié)果而調(diào)用的程

42、序。從而實現(xiàn)一個函數(shù)把它與事件驅(qū)動相關(guān)聯(lián)。這是與其它語言不一樣的地方。function 函數(shù)名 （參數(shù)）具體語句;函數(shù)由關(guān)鍵字function定義，function是關(guān)鍵字。函數(shù)名必須是唯一的，命名規(guī)則與變量名的命名規(guī)則一樣，并且是大小寫有區(qū)別的。函數(shù)可以帶參數(shù)也把可以不帶參數(shù)，其中函數(shù)的參數(shù)可以是常量、變量或表達式。當使用多個參數(shù)時，參數(shù)間以逗號相隔。如果函數(shù)需要返回，則使用關(guān)鍵字return 將值返回。如果所要調(diào)用的函數(shù)不帶參數(shù)，使用時只要直接以“函數(shù)名()”的方式調(diào)用函數(shù)就可以了。如果調(diào)用的函數(shù)具有返回值，可以通過變量或直接將函數(shù)置于表達式中。function showResult(a,

43、b) Var result=a*b; Alert(“square is:”+result);函數(shù)說明：形式參數(shù)：定義函數(shù)時為函數(shù)賦予的參數(shù)，它代表了參數(shù)類型和位置，系統(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ù)定義格式:例子：6-1.htm,6-10.htm函數(shù)參數(shù)的傳遞:例子：6-8.htm6.1.2調(diào)用函數(shù)定義好函數(shù)，在需要的地方調(diào)用。如果所要調(diào)用

44、的函數(shù)不帶參數(shù)，使用時只要直接以“函數(shù)名()”的方式調(diào)用函數(shù)就可以了。如果調(diào)用的函數(shù)具有返回值，可以通過變量或直接將函數(shù)置于表達式中。 在多個位置調(diào)用函數(shù)，可以在下述位置調(diào)用JavaScript函數(shù)：在JavaScript代碼中調(diào)用函數(shù)；在事件響應(yīng)中調(diào)用函數(shù)；通過鏈接調(diào)用函數(shù)。（1）在JavaScript代碼中調(diào)用函數(shù)6-9.htm（2）在事件中調(diào)用函數(shù) 6-4.htm（3）通過鏈接調(diào)用函數(shù)6-5.htm布置課后任務(wù)及作業(yè)P99: （1）（3） 課堂講解第十四講第六章 第一節(jié) 函數(shù)的返回值與作用域教學目的和目標1、掌握函數(shù)的返回值。2、掌握函數(shù)變量的作用域。3、掌握組合多個函數(shù)實現(xiàn)復雜功能。教

45、學重點與難點1、掌握理解函數(shù)的返回值。2、掌握理解函數(shù)變量的作用域。3、掌握理解組合多個函數(shù)實現(xiàn)復雜功能。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容6.1.3函數(shù)的返回值與函數(shù)變量的作用域（1）函數(shù)中變量的作用域: 全局變量是在函數(shù)體外聲明的，可以在任何地方使用，局部變量在函數(shù)體內(nèi)聲明，只能在函數(shù)體內(nèi)使用，并隨著函數(shù)的結(jié)束而消失。具體區(qū)別詳見例子：6-6.htm（2）函數(shù)的返回值:函數(shù)可以通過參數(shù)接受傳入的變量，將一些結(jié)果返回給調(diào)用函數(shù)的地方，由“return 返回值”完成；Var retval=函數(shù)（參數(shù)

46、）；例子：6-2.htm6-7.htm6-8.htm函數(shù)可以返回一個確定的值，也可以只用return返回空值。6.1.4組合多個函數(shù)來實現(xiàn)復雜功能代碼重用，編寫成函數(shù)，起主導地位的函數(shù)是主函數(shù)，被調(diào)用的函數(shù)是子函數(shù)，主函數(shù)和子函數(shù)通過主函數(shù)調(diào)用子函數(shù)。例子：6-3.htm布置課后任務(wù)及作業(yè)P99: （4）（6） 課堂講解復習總結(jié)： 1、掌握函數(shù)的定義格式。2、掌握函數(shù)參數(shù)的傳遞。 3、掌握調(diào)用函數(shù)。4、掌握函數(shù)的返回值。5、掌握函數(shù)變量的作用域。6、掌握組合多個函數(shù)實現(xiàn)復雜功能。第十五講第六章 第二節(jié) HTML標簽與事件教學目的和目標1、掌握常用HTML標簽事件。2、掌握事件處理概念，處理程序

47、。教學重點與難點1、掌握常用HTML標簽事件。2、掌握事件處理概念，處理程序。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容6.2.1 HTML標簽與事件HTML標簽是主要的事件對象,標簽的”type”屬性.表6.16.2.2事件處理器1、基本概念JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對象的基本特征，就是采用事件驅(qū)動(event-driven)。它是在用形界面的環(huán)境下，使得一切輸入變化簡單化。通常鼠標或熱鍵的動作我們稱之為事件（Eve

48、nt），而由鼠標或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動（Event Driver）。而對事件進行處理程序或函數(shù)，我們稱之為事件處理程序（Event Handler）。事件處理器的名稱是由事件名加上一個”on”組成,統(tǒng)一用小寫, 事件處理器代碼后面用”=”添加了事件觸發(fā)時需要的JavaScript代碼,代碼可以是一條語句,也可以是一個函數(shù),、事件處理程序在JavaScript中對象事件的處理通常由函數(shù)(Function)擔任。其基本格式與函數(shù)全部一樣，可以將前面所介紹的所有函數(shù)作為事件處理程序。格式如下：Function 事件處理名（參數(shù)表）事件處理語句集；范例1：下例程序是一個自動裝載和

49、自動卸載的例子。即當裝入HTML文檔時調(diào)用loadform()函數(shù),而退出該文檔進入另一HTML文檔時則首先調(diào)用unloadform()函數(shù),確認后方可進入。 6_s1.htm 布置課后任務(wù)及作業(yè)P99: （7）（9） 課堂講解第十六講第六章 第二節(jié) 使用常用事件教學目的和目標1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握組合函數(shù)實現(xiàn)事件功能。教學重點與難點1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握組合函數(shù)實現(xiàn)事件功能。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學

50、時間：2課時教學過程及詳細內(nèi)容6.2.3、使用常用事件JavaScript事件驅(qū)動中的事件是通過鼠標或熱鍵的動作引發(fā)的。它主要有以下幾個事件：（）單擊事件onClick當用戶單擊鼠標按鈕時，產(chǎn)生onClick事件。同時onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對象中產(chǎn)生： button（按鈕對象） checkbox（復選框）或（檢查列表框） radio （單選鈕） reset buttons（重要按鈕） submit buttons（提交按鈕） 例：可通過下列按鈕激活change()文件：在onClick等號后，可以使用自己編寫的函數(shù)作為事件處理程序，也可以使用Java

51、Script中內(nèi)部的函數(shù)。還可以直接使用JavaScript的代碼等。例： Input type=button value= onclick=alert(這是一個例子）;（2）失去焦點onBlur當text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時，引發(fā)該文件，他與onFocas事件是一個對應(yīng)的關(guān)系。（3）onChange改變事件當利用text或texturea元素輸入字符值改變時發(fā)該事件，同時當在select表格項中一個選項狀態(tài)改變后也會引發(fā)該事件。例： （4）選中事件onSelect當Text或Textarea對象中的文字被加亮后，引發(fā)該事件。（5）獲得焦點事

52、件onFocus當用戶單擊Text或textarea以及select對象時，產(chǎn)生該事件。此時該對象成為前臺對象。（）載入文件onLoad當文檔載入時，產(chǎn)生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。（）卸載文件onUnload當Web頁面退出時引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。6_s1.htm 6_20.htm布置課后任務(wù)及作業(yè)P99: 進階練習 復習總結(jié)： 1、掌握函數(shù)的使用。2、掌握常用事件的使用。第十七講第7章 算術(shù), 賦值運算符和表達式教學目的和目標1、掌握理解表述式。2、掌握使用算術(shù)運算符。

53、3、掌握使用賦值運算符。教學重點與難點1、掌握理解表述式。2、掌握使用算術(shù)運算符。3、掌握使用賦值運算符。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內(nèi)容7.1、使用表達式在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常又叫稱一個叫表達式來完成，可以說它是變量、常量、布爾及運算符的集合，因此表達式可以分為算術(shù)表述式、字串表達式、賦值表達式以及布爾表達式等。7.2、運算符概述運算符完成操作的一系列符號，在JavaScript中有算術(shù)運算符，如、-、*、/等；有比較運算符如!、等; 有new

54、,邏輯布爾運算符如?。ㄈ》矗?、|、|; 有字串運算如 、 等。表7.17.3、使用算術(shù)運算符7.3.1、二元運算符需要兩個操作數(shù)才能進行運算.其二元運算符由下列組成：表7.2操作數(shù) 運算符 操作數(shù)即由兩個操作數(shù)和一個運算符組成。如5040、This+that等。 +（加） 、-（減）、 *（乘）、 /（除）、 %（取模） 、例子:7-1.htmJavascript是一種弱類型的語言,本身就有類型轉(zhuǎn)換的功能,如乘法:字符串轉(zhuǎn)換成數(shù)字.但加法除外.Var a=”3”;Var b=”4”;Var c=a*b;Alert(“result is :”+c); /12Var a=”3”;Var b=”4”

55、;Var c=a+b;Alert(“result is :”+c); /34例子:7-2.htm7.3.2、一元運算符只需一個操作數(shù)，其運算符可在前或后。表7.3 -（取反）、+（遞加1）、-（遞減1）。(1)”+” 運算符在前面: 7-3.htmVar 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)”-” 運算符在前面: 7-3.htmVar e=3;Var f=+e;Alert(“ e 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第十八講教學時間：2課時7.4、使用賦值運算符