《JavaScript程序設計》電子教案_第1頁
《JavaScript程序設計》電子教案_第2頁
《JavaScript程序設計》電子教案_第3頁
《JavaScript程序設計》電子教案_第4頁
《JavaScript程序設計》電子教案_第5頁
已閱讀5頁，還剩69頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、【精品文檔】如有侵權，請聯系網站刪除，僅供學習與交流JavaScript程序設計電子教案.精品文檔.江西先鋒軟件職業技術學院教 案院、部： 軟件工程學院 教研室： 計算機應用 姓 名： 王維偉 職 稱： 助教 課程名稱： JavaScript程序設計 授課專業： 1003級 學生人數： 授課時間： 2011 至 2012 學年度 1 學期教材名稱： JavaScript入門與提高 編者 曾光 出版單位： 科學出版社 出版時間 2008年7月 第一講第一章 第一節萬維網和HTML教學目的和目標1、了解萬維網的發展歷史及功能。2、介紹HTML語言的概念，簡單語法。3、熟練編寫靜態頁面。教學重點與難

2、點1、掌握理解萬維網的功能。2、掌握理解HTML概念，語法規則及文件結構。3、HTML頁面元素多，記憶難，要求學生短時間里具有編寫HTML頁面能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容1.1萬維網和HTML萬維網的目的是用于共享資源,這些資源包括文字,圖片,音頻和視頻等.統一的標準是一種用于定位和打開這些信息的超文本語言, HTML語言。1.1.1什么是萬維網 萬維網,環球網,1989年始于瑞士日內瓦的CERN,通過統一的方式來訪問各類信息，這就是超文本鏈接。 為了設計含有各類信息資源的

3、超文本鏈接的萬維網頁面，產生了超文本標記語言， 即HTML。 流行瀏覽器有IE,NETscape,firefox等。 頁面都有一個唯一的地址，即統一資源定位符URL,使用的協議是HTTP協議。 域名是包括標識串和網站的類型，com代表私營公司，gov代表政府，edu代表教育機構等。 例： http是協議,www是服務, 是域名。1.1.2 了解HTML標簽HTML頁面是純文本，可以用記事本來編輯。HTML文件的后綴名必須是.html或.htm，用瀏覽器來解釋和執行。HTML文檔基本組成部分是標簽，一般有一對尖括號“<>”,并不是所有的標簽都有結束標簽。HTML文檔必須以<ht

4、ml>開始，</html>結束，一個HTML文檔分為HEAD和BODY兩部分。<a>標簽：href屬性是用來指定超文本鏈接所要訪問的URL地址。<img>標簽：src屬性是用來指定要顯示的圖片的地址。HTML標簽允許嵌套使用。例子：1-1.htm<!- ->表示注釋。div與span:這是用得最多的兩個標簽，以后會有專文總結如何使用好他們，現在必須知道的是前者是block元素，后者是inline元素；而block元素與inline元素區別正如名字告訴我們的那樣：前者是所包含的內容是一個整體，幾個block元素間垂直堆疊，強制后面元素另起一行

5、；而后者，幾個inline元素水平排列，相互間只有水平方向上的邊距設置才會有效，padding-top，margin-bottom等豎直格式設置會被忽略。不添加css，前者無法并放，后者無法堆疊。即span內部是不能放div的。ul，ol與dl:無序，有序（按字母或數字順序）以及定義（表示對話也可以）列表，列表項使用<li>元素標記，不能含block元素，即<hx>不能包含其中。a 與link:<a href="#top">,<link>可有得研究他和<a>都有兩個重要屬性：rel以及rev，rel指出該文檔與hr

6、ef指向的鏈接關系類型，rev則將兩對象方向互換，可選類型有：alternative，如果是可選譯文，則與lang屬性一起用；如果是可選媒介，則用到media屬性。colgroup，col:在表頭區分格需要這兩個標簽，并不實用，不如用scope屬性值，rowspan，colspan等屬性也可，具體哪種更好現在不明。form與input，label:用得太多了，就說form的enctype屬性與input有file類型可用有關，而reset類型還是別再用了。1.1.3 <body>標簽的常用屬性Background:設置頁面的背景圖案Bgcolor:設置頁面的背景色Text:設置頁面

7、的文字顏色Topmargin：頂空白像素Leftmargin:左空白像素Link: 指定文檔的所有連接顏色不推薦使用樣式來取代Vlink: 指定文檔那些被訪問過的連接顏色不推薦使用樣式來取代1.1.4編寫HTML頁面例子：1-3.htmHTML頁面是不分大小寫的，常用小寫。一定要閉合HTML標簽,聲明正確的文檔類型( DocType ), 不要使用嵌入式CSS樣式, 在頁面head標簽中引入所有的樣式表文件, 不要使用嵌入式JavaScript.1.1.5使用瀏覽器訪問網頁流行瀏覽器有IE,NETscape,firefox等,跨瀏覽器訪問網頁。布置課后任務及作業完成課后練習題：P10: （1）

8、（5） 課堂講解第二講第一章 第二節程序與Web腳本教學目的和目標1、了解程序的功能。2、了解與認識web腳本。教學重點與難點1、掌握程序的功能。2、認識web腳本。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容1.2程序與Web腳本javascript可以嵌入到HTML頁面, javascript稱為web腳本語言。1.2.1 認識一段程序   計算機程序或者軟件程序（通常簡稱程序）是指一組指示計算機每一步動作的指令，通常用某種程序設計語言編寫，運行于某種目標體系結構上。打個

9、比方，一個程序就像一個用漢語（程序設計語言）寫下的紅燒肉菜譜（程序），用于指導懂漢語的人（體系結構）來做這個菜。 通常，計算機程序要經過編譯和鏈接而成為一種人們不易理解而計算機理解的格式，然后運行。未經編譯就可運行的程序通常稱之為腳本程序。程序的運行:為了一個程序運行，計算機加載程序代碼，可能還要加載數據，從而初始化成一個開始狀態，然后調用某種啟動機制。在最低層上，這些是由一個引導序列開始的。在大多數計算機中，操作系統例如Windows等，加載并且執行很多程序。在這種情況下，一個計算機程序是指一個單獨的可執行的映射，而不是當前在這個計算機上運行的全部程序。馮諾依曼體系結構:在一臺基于最常見的馮

10、諾依曼體系結構(又稱Harvard Architecture)的計算機上，程序從某種外部設備，通常是硬盤，被加載到計算機里。 如果計算機選擇馮諾依曼體系結構，那么程序就被加載入內存。 指令序列順序執行，直到一條跳轉或轉移指令被執行，或者一個中斷出現。所有這些指令都會改變指令寄存器的內容。 基于這種體系計算機如果沒有程序的支持將無法工作。一個計算機程序是一系列指令的集合。 程序里的指令都是基于機器語言；程序通常首先用一種計算機程序設計語言編寫，然后用編譯程序或者解釋執行程序翻譯成機器語言。 有時，程序也可以用匯編語言編寫，匯編語言實質就是表示機器語言的一組記號在這種情況下，用于翻譯的程序叫做匯編

11、程序(Assembler)。程序和數據:程序已經被定義了。如何定義數據呢？數據可以被定義為被程序處理的信息。當我們考慮到整個計算機系統時，有時程序和數據的區別就不是那么明顯了。中央處理器有時有一組微指令控制硬件，數據可以是一個有待執行的程序（參見腳本編程語言），程序可以編寫成去編寫其它的程序；所有這些例子都使程序和數據的比較成為一種視角的選擇。有人甚至斷言程序和數據沒有區別。編寫一個程序去生成另外一個程序的過程被稱之為原編程(Metaprogramming)。它可以被應用于讓程序根據給定數據生成代碼。單一一個程序可能不足以表示給定數據的所有方面。讓一個程序去分析這個數據并生成新的程序去處理數據

12、所有的方面可能會容易一些。Lisp就是一例支持這種編程模式的程序語言。在神經網絡里儲存的權重是一種數據。正是這些權重數據，跟網路的拓撲結構一起，定義了網絡的行為。人們通常很難界定這些數據到底表示什么或者它們是否可以由程序來代替。這個例子以及跟人工智能相關的其它一些問題進一步考驗程序和數據的區別。算法:算法指解決某個問題的嚴格方法，通常還需輔以某種程度上的運行性能分析。算法可以是純理論的，也可以由一個計算機程序實現。理論算法通常根據復雜性分為不同類別；實現的算法通常經過頗析(Profiling)以測試其性能。請注意雖然一個算法在理論上有效可行，但是一個糟糕的實現仍會浪費寶貴的計算機資源。（更詳細

13、信息，參見算法信息論，Algorithmic Information Theory）開發:編寫程序是以下步驟的一個往復過程：編寫新的源代碼，測試、分析和提高新編寫的代碼以找出語法和語義錯誤。從事這種工作的人叫做程序設計員?趨多樣，由此產生了不同種類的程序設計員，每一種都有更細致的分工和任務。軟件工程師和系統分析員就是兩個例子。現在，編程的長時間過程被稱之為“軟件開發”或者軟件工程。后者也由于這一學科的日益成熟而逐漸流行。計算機程序是利用相應的程序設計語言,按照一定的邏輯和語法進行編寫和組織,通過程序的運行,使得計算機實現某種特定的功能。與web相關的有asp,jsp,php等。例: Php程序

14、一段代碼如下:If ($num>0)echo “the number you enter is >0”Elseecho “the number you enter is <=0”1.2.2 認識Web腳本web腳本有javascript,還有VBscript等,腳本語言同程序設計語言一樣,是根據一定的邏輯和語法來編寫腳本,以實現網頁中的特殊效果。例: javascript 程序如下:If (num>0)alert(“the number you enter is >0”);Elsealert(“the number you enter is <=0”);布置

15、課后任務及作業完成課后練習題：P11: 進階練習 。復習總結： 1、萬維網的發展歷史及功能是共享資源。2、HTML語言的概念，簡單語法。 3、掌握程序的功能。4、認識web腳本。第三講第二章第一節JavaScript的發展史 第二節JavaScript的作用教學目的和目標1、了解JavaScript的發展史。2、掌握JavaScript的作用。3、熟練編寫頁面特效。教學重點與難點1、掌握理解JavaScript的作用。2、熟練編寫各種頁面特效。3、HTML頁面元素多，記憶難，要求學生短時間里具有編寫HTML頁面能力。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用

16、先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容2.1 JavaScript的發展史 Netscape的JavaScript:增加更多的用戶交互,控制瀏覽器以及動態創建頁面內容的諸多功能,最主要的是使合法性驗證之類的工作在客戶端得以實現。Microsoft的Jscript:IE瀏覽器。EMCA-262標準:歐洲計算機制造商聯合會創造了一個國際通用的標準化版本的JavaScript，稱為EMCAScript。2.2 JavaScript的作用2.2.1表單驗證:最基本和最重要的作用。例：2-1.htm演示各個限制條件。2.2.2實現網頁特效。文字特效：例子2-2.htm鼠標特效

17、 2-3.htm圖片特效 2-4.htm頁面特效2-5.htm時間特效2-6.htm狀態欄特效2-7.htm導航特效 2-8.htm綜合特效 2-9.htm2.2.3改善頁面樣式頁面樣式是通過樣式表來定義的.通過樣式表,定義頁面元素的表現形式。如控制顏色,圖案,文字,可見性等。2.2.4 應用AjaxAjax技術并不是一個新的語言，是javascript,xmlhttp,css,xhtml,xml等的一個綜合應用。優勢是通過數據異步傳輸從而減少交互時間和改善用戶體驗等。例：圖2.20:頁面的多塊區域能分時異步加載，減少等待時間。圖2.23:通過Ajax技術，實時對用戶名進行驗證并在頁面上顯示文

18、字提示。布置課后任務及作業完成課后練習題：P32:（1）（4）課堂講解第四講第二章第三，四，五節使用JavaScript，瀏覽器與JavaScript，其他常用腳本和技術教學目的和目標1、掌握Javascript的使用。2、了解瀏覽器與JavaScript的版本號。3、了解其他常用腳本和技術。教學重點與難點1、掌握理解JavaScript的使用。2、掌握理解文檔對象模型概念。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容2.3使用Javascript 2.3.1認識<script>標簽

19、Javascript是嵌入到html才被解釋執行的， Javascript代碼可以放到頁面的任意位置。使用<!和/->將程序段包含起來，可以讓不支持的瀏覽器忽略過這一段代碼。2.3.2嵌入網頁Alert():彈出一個按鈕的提示框。例：2-10.htm2.3.3 使用JavaScript文件把篇幅較多的JavaScript代碼保存到一個單獨的文件中，然后在HTML文檔中進行引用，保持頁面的清晰性。代碼重復使用，只需引用文件即可，減少維護的工作量。JavaScript文件使用js作為擴展名，通過<script>中的src來引用.使用<script>標簽的src屬

20、性來指定文件的路經，可以使用外部的JavaScript文件。2.3.4 使用事件事件是Javascript時刻監視某些特定條件，當Javascript發現這些條件發生后，根據具體的代碼對事件進行響應。如onclick,onfocus事件等。例：2-12.htm除了由用戶的行為來觸發的事件外，Javascript也響應某些不由用戶觸發的事件，如整個HTML頁面加載完后的load(加載)事件。2.4瀏覽器與JavaScript2.4.1簡單認識文檔對象模型文檔對象模型DOM（Document Object Model）是表示文檔(HTML文檔)和訪問，操作構成文檔的各種元素(如HTML標記和文本串

21、)的應用程序接口(API)，把整個頁面規劃成由節點分層級構成的文檔。例：2-13.htmDOM通過創建樹來表示一個HTML文檔，從而使控制文檔內容及結構變得異常的容易。2.4.2 Javascript的版本 表不同的瀏覽器支持 IE,Netscape,firefox等,表指定Javascript版本<script>標簽的language屬性來指定。例：<script language=“javascript1.1”>Alert(“hello”);</script> 版本號可以省。2.5其他常用腳本和技術2.5.1VBscrip

22、t語言 例：2-14.htm2.5.2Java語言JavaScript和Java不是一個概念，Java是SUN公司推出的編程語言，跨平臺執行的程序設計語言，特別適合于Internet應用程序開發；而JavaScript是Netscape公司的產品，其目的是為了擴展Netscape Navigator功能而開發的一種可以嵌入Web頁面中的基于對象和事件驅動的解釋性語言。 2.5.3 Asp和A語言Asp是“活動服務器網頁”，用來創建和運行動態網頁或Web應用程序，用于各種動態網站，擴展名為.asp。A是asp的最近版本，擴展名為.asp或.aspx。2.5.4 php語言基于服務端創建動態網站的

23、腳本語言，是開放源碼和跨平臺運行。布置課后任務及作業完成課后練習題：P32:（5）（9）課堂講解P32: 進階練習 即項目實訓1第五講第三章 第一部分教學目的和目標1、熟悉編輯javascript常用工具。2、掌握整個程序設計過程與思路。3、掌握普通提示對話框方法。4、掌握控制頁面元素的顯示和隱藏方法。教學重點與難點 1、掌握理解整個程序設計過程與思路。2、掌握普通提示對話框方法。3、掌握控制頁面元素的顯示和隱藏方法。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容3.1常用工具介紹3.1.1使用記

24、事本:記事本編輯純文本文件,HTML文檔,Javascript程序和其他各種類型的文本文件.演示操作.注意保存文件類型選擇為”所有文件”,文件名擴展名為.htm或html,js等.3.1.2 使用EditPlus文字編輯器。EditPlus文字編輯器功能強大,使用方便。3.1.3 使用Dreamweaver網頁軟件1.方便的設計2.可視化編輯3.強大的Javascript和CSS支持3.2設計簡單的Javascript功能要創建一個完整的程序,事先需要對所實現的功能進行設計.例:2-9.htm3.3編寫Javascript代碼之前按照設計好的功能進行具體的實現,包括HTML頁面和Javascr

25、ipt相關編寫3.3.1向用戶顯示普通提示對話框一個好的網頁除了要有合適的動態內容外,還應該有好的交互性,就是讓用戶在訪問網頁的過程中得到信息提示,或提供給用戶一些選擇.<script language=“javascript”>Alert(“this is a simple user alert.”);</script>Alert()是內置函數,出現提示框.3.3.2控制頁面元素的顯示和隱藏Javascript的主要作用之一是控制頁面元素的樣式.例: 3-1.HTMLJavascript控制樣式的顯示需要兩個條件:(1)獲取需要控制的元素對象.document.get

26、ElementById(“id”)(2)使用對象的style屬性來操作樣式.例: 3-2.html布置課后任務及作業完成課后練習題：P59:（1）（3）課堂講解第六講第三章 第二部分教學目的和目標1、掌握確認提示對話框方法。2、掌握網頁中輸出內容方法。3、掌握變量存儲數據定義方法。4、掌握函數定義方法。5、掌握HTML與Javascript整合技巧與方法。教學重點與難點1、掌握確認提示對話框方法。2、掌握網頁中輸出內容方法。3、掌握變量存儲數據定義方法。4、掌握函數定義方法。5、理解HTML與Javascript整合技巧與方法。6、培養學生整合HTML與Javascript能力。教學方法和手段

27、1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容3.3.3 向用戶顯示確認提示對話框<script language=“javascript”>confirm(“eat?”);</script>confirm()是內置函數,出現確認提示框.3.3.4 在網頁中輸出內容提供了在網頁中輸出內容的方法,用”document.write();”例: 3-3.html3.3.5 使用變量存儲數據,用var來顯示Var str=“hello”;例: 3-5.html3.3.6 使用javascript

28、進行計算 Javascript支持”+,-,*,/”等運算符.例: 3-6.html3.3.7 將javascript代碼定義為函數 定義函數使用function語句Function 函數名() 語句;<script language=“javascript”>Function Fun1(i,j,k)alert(i-j+k);Fun1(10,100,3);</script>3.4HTML文檔編寫與Javascript整合把代碼嵌入到頁面中.3.4.1編寫出所有需要的頁面元素3-7.html3-8.html3.4.2通過單選按鈕控制隱藏屬性編寫出所有需要的頁面元素3-9.

29、html3.4.3提交表單時的確認提示框3.4.4用JAVASCRIPT函數計算結果3.4.5生成最終頁面3.4.6整合所有功能:借助主函數把所有功能組織起來.3-10.html布置課后任務及作業完成課后練習題：P59:（4）（10）課堂講解P59: 進階練習 即項目實訓2。第七講第四章第一部分教學目的和目標1、掌握Javascript語法結構。2、掌握理解Javascript對象概念。3、掌握理解Javascript對象創建。教學重點與難點1、掌握理解Javascript語法結構。2、掌握理解Javascript對象概念。3、對象概念多，理解難，要求學生短時間里具有編寫對象能力。教學方法和手

30、段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容4.1Javascript語法結構4.1.1大小寫敏感對大小寫敏感，必須大小寫一致 ，而HTML是不區分大小寫的，而Javascript是嵌入到html中去，必須注意。4.1.2空格，制表符和換行使分隔符，來對齊用程序語句，或將一條長語句分成幾行編寫，對于程序的美觀整潔是很有好處的，增加了程序的可讀性。4.1.3直接量是程序里直接顯示出來的數值。4.1.4分號用來分隔兩條程序語句的，每條語句都使用一個分號“;”作為結束。4.1.5標識符用來命名變量或函數等。標識符

31、命名規則必須是以字母，下劃線或美元符開始的字母，數字 ，或任意組合，數字不允許作為變量名的開頭，標識符不能和保留字重名。4.1.6保留字表4.1,4.2,4.34.2理解Javascript對象4.2.1 Javascript面向對象概念面向對象盡可能模擬人類的思維習慣,使程序設計的方法與過程盡可能的接近人類的自然思維方式.Javascript對象類基于構造器函數創建的實例化一個對象,構造器函數包含屬性和方法兩個基本的元素,屬性實際上用于存儲對象的數據,方法是在對象內部調用的函數,用來實現一些功能或對屬性進行訪問更改.4.2.2 對象的創建Javascript對象是通過”new”來創建的,Va

32、r obj=new object();類名通常以大寫字母來開頭,而構造器函數相當于類,因此構造機器函數通常以大寫字母開頭.Var date=new Date();/創建日期對象布置課后任務及作業完成課后練習題：P70:（1）（4）課堂講解第八講第四章 第二部分教學目的和目標1、掌握Javascript對象屬性的設置和讀取。2、掌握Javascript對象的方法，繼承和原型。3、培養學生養成良好的編程習慣。教學重點與難點1、掌握理解Javascript對象屬性的設置和讀取。2、掌握理解Javascript對象的方法，繼承和原型。3、理解良好的編程習慣重要性。教學方法和手段1、以課堂問答法和案例討

33、論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容4.2.3 屬性的設置和讀取通常用”.”運算符實現屬性的存取,”.”左邊是表示該對象的引用名,右邊是屬性名稱.Var dog=new Dog();Dog.dog_weight=50;Dog.dog_type=“big”;Alert(“dog type:”+dog.dog_type);4.2.4 對象的方法:訪問屬性通過”this”, 對象的方法其實就是一個函數,Function showDogInfo() alert(“dog type:”+this.dog_type);4.2.5 對象的

34、繼承和原型:對象是類的一個實例,類是對象的抽象,繼承是對象的一個很重要的特征,對象可以從實例化它的構造器函數中繼承到屬性和方法.Function Animal(type,sound,food)This.animal_type=type;/實例化對象Var dog=new animal(“dog”,);原型屬性是一個內置的屬性,指定了對象所擴展的是構造器函數.Dtotype.detail_type=“”;Var cat=new Animal(“cat”,);Alert(cat.detail_type);/輸出”通常情況下用prototype.detail_type=“”;增加屬性,具

35、體的屬性值將在具體的實例化對象中設置,使用原型屬性可以實現附加對象定義擴展對象.4.3養成良好的編程習慣維護成本大于開發成本，養成良好的編程習慣尤為重要。4.3.1命名風格：命名風格必須保持一致性和可讀性，任何一個實體的主要功能或用途必須能夠從命名中明顯的看出來。函數：實現功能。“動詞+名詞” ：showInfo();變量名：存儲數據：名詞或形容詞+名詞。以小寫字母 開頭，第二個開始小寫，allMoney();類：使用名詞，以大寫字母開頭，Book();4.3.2使用注釋（1）使用“/”實現單行注釋（2）使用“/*”和“*/”實現塊注釋，不能嵌套，可以跨多行。（3）使用整塊注釋注釋不是越多越好

36、，要講究一個度，沒必要為每條語句加注釋。布置課后任務及作業完成課后練習題：P70:（5）（8） 課堂講解P71: 進階練習 第九講第五章 第一部分教學目的和目標1、掌握變量的命名。2、掌握賦值給變量的方法。3、掌握變量的作用域。教學重點與難點1、掌握理解變量的命名。2、掌握理解賦值給變量的方法。3、掌握理解變量的作用域。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容5.1變量的命名變量是用來存儲數據的，利用變量參與各種運算以實現動態的效果。5.1.1使用有意義的名稱變量名代表了所存儲數據的具體含義

37、，給變量取合適的名字能夠理解變量的含義，從而讓程序的編寫和理解更加容量。Var price=32.8 /定義price變量，表示價格5.1.2使用多個單詞與分隔符第二個單詞首字母要答謝，或在多個單詞間使用分隔符“_”Var userName=“wei”;Var dog_weight=55;5.1.3全大寫命名方式變量名字母全部大寫，表明該變量的級別較高，為全局變量。5.1.4給變量名增加前綴防止重名或混淆，把具有相關性質的變量進行統一命名，如統一使用前綴或“_”.5.1.5綜合示例 例5-1.html第十講教學時間：2課時5.2賦值給變量變量的作用是用來存儲數據的，變量賦值使用“=”（1）先定

38、義變量后賦值 Var book_name;book_name=“javascript”;（2）定義時賦值 Var book_name=“javascript”;5.3變量的作用域分為全局和局部兩種，全局變量是在函數體外聲明的，可以在任何地方使用，局部變量在函數體內聲明，只能在函數體內使用，并隨著函數的結束而消失。5.3.1局部變量：在函數體內聲明的變量5.3.2全局變量：在函數體外聲明的變量，聲明后可以在任何地方調用，聲明全局變量，全部用大寫，如果全局變量和局部變量遇到重名情況，局部變量優先。布置課后任務及作業完成課后練習題：P87:（1）（4）課堂講解第十一講教學時間：2課時第五章 第二部分

39、教學目的和目標1、掌握數字，布爾值的使用方法。2、掌握字符串的常見用法。3、掌握數組的常見用法。教學重點與難點1、掌握理解數字，布爾值的使用方法。2、掌握理解字符串的常見用法。3、掌握理解數組的常見用法。教學方法和手段1、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容5.4使用數字一種是整型，另一種是浮點型,科學計算法例5-2.html,5-3.html5.5使用布爾值布爾值是一個邏輯值，有true和false兩個，對應1和0表示。5.6使用字符串字符串是一段文本內容，常用一對單引號或雙引號起來。5.6.1創建字符

40、串：字符串里含有雙引號，那么創建是就用一對單引號“”.Var str=I am “student”;Var str=“I am student”;字符串必須以相同類型的引號開始和結束。5.6.2使用轉義符號“”：在字符串里邊包含單引號和雙引號，了解轉義字符。Var str=“I am ”student”,from china”;表使用length屬性獲取字符串長度，length屬性獲取。5.6.4截取字符串：substring方法，substr方法(1)截取指定起始位置和長度的字符串。Var str=“十月一日是國慶節”;Alert(str.substr(5,3);/國慶節(2

41、)只指定起始位置截取字符串，默認到字符串末尾。Alert(str.substr(5)(3)利用length屬性動態指定位置截取。Alert(str.substr(0,str.length-3);5.6.5字符串的大小寫轉換：toLowerCase():變為小寫toUpperCase():變為大寫Alert(“大寫:”+str.toUpperCase()+”小寫:” str.toLowerCase();5.6.6查找與匹配字符串：Indexof 或lastindexof方法來進行Indexof：字符串在被查找的字符串里第一次出現的位置。lastindexof ：該字符串在被查找的字符串里最后一次

42、出現的位置。Var str=“a”;Var str1=“javascript”;Alert(“the first :”+str1.indexOf(str)+”,the last :”+ str1.lastIndexOf(str);第十二講教學時間：2課時5.7使用數組數組是由幾個變量組合起來的一個變量組。5.7.1創建一個數組使用Array()構造器來創建。Var ary=new Array(num);5.7.2 給數組元素賦值，通過下標元素賦值也可以創建時賦值。Var ary=new Array(“a”,”b”,”c”);Ary0=“a”;Alert(ary0);5.7.3 使用length

43、屬性獲取數組的長度，數組的長度是數組元素的個數，ary.length。For (var i=0;i<ary.length;i+) alert(aryi);5.7.4多維數組，數組中的每一個元素就是一個數組，就變成了三維數組.例：5-4.html。布置課后任務及作業完成課后練習題：P87: （5）（17） 課堂講解P87: 進階練習 第十三講第六章 第一節 函數的定義與調用教學目的和目標1、掌握函數的定義格式。2、掌握函數參數的傳遞。3、掌握調用函數。教學重點與難點1、掌握理解函數參數的傳遞。2、掌握理解調用函數。3、函數概念多，理解難，要求學生短時間里具有編寫函數能力。教學方法和手段1、

44、以課堂問答法和案例討論法為主，以講授法和指導法為輔。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容6.1.1定義函數JavaScript函數可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅動的結果而調用的程序。從而實現一個函數把它與事件驅動相關聯。這是與其它語言不一樣的地方。function 函數名 （參數）具體語句;函數由關鍵字function定義，function是關鍵字。函數名必須是唯一的，命名規則與變量名的命名規則一樣，并且是大小寫有區別的。函數可以帶參數也把可以不帶參數，其中函數的參數可以是常量、變量或表達式。當使用多個參數時，參數間以逗號相隔。如

45、果函數需要返回，則使用關鍵字return 將值返回。如果所要調用的函數不帶參數，使用時只要直接以“函數名()”的方式調用函數就可以了。如果調用的函數具有返回值，可以通過變量或直接將函數置于表達式中。function showResult(a,b) Var result=a*b; Alert(“square is:”+result);函數說明：形式參數：定義函數時為函數賦予的參數，它代表了參數類型和位置，系統并不為形式參數分配實際的存儲空間，而是在調用函數時候由實際參數代表形式參數參與函數的運行。實際參數：調用函數時傳遞給函數的參數，它通常在調用函數前已經分配了內存，并且包含了實際數據。在函數執

46、行過程中，實際參數參與函數的運行，函數定義中的形式參數只是表明了調用函數時實際傳遞的參數類型.函數定義格式:例子：6-1.htm,6-10.htm函數參數的傳遞:例子：6-8.htm6.1.2調用函數定義好函數，在需要的地方調用。如果所要調用的函數不帶參數，使用時只要直接以“函數名()”的方式調用函數就可以了。如果調用的函數具有返回值，可以通過變量或直接將函數置于表達式中。 在多個位置調用函數，可以在下述位置調用JavaScript函數：在JavaScript代碼中調用函數；在事件響應中調用函數；通過鏈接調用函數。（1）在JavaScript代碼中調用函數6-9.htm（2）在事件中調用函數

47、6-4.htm（3）通過鏈接調用函數6-5.htm布置課后任務及作業P99: （1）（3） 課堂講解第十四講第六章 第一節 函數的返回值與作用域教學目的和目標1、掌握函數的返回值。2、掌握函數變量的作用域。3、掌握組合多個函數實現復雜功能。教學重點與難點1、掌握理解函數的返回值。2、掌握理解函數變量的作用域。3、掌握理解組合多個函數實現復雜功能。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容6.1.3函數的返回值與函數變量的作用域（1）函數中變量的作用域: 全局變量是在函數體外聲明的，可以在任何地方使用，局部變

48、量在函數體內聲明，只能在函數體內使用，并隨著函數的結束而消失。具體區別詳見例子：6-6.htm（2）函數的返回值:函數可以通過參數接受傳入的變量，將一些結果返回給調用函數的地方，由“return 返回值”完成；Var retval=函數（參數）；例子：6-2.htm6-7.htm6-8.htm函數可以返回一個確定的值，也可以只用return返回空值。6.1.4組合多個函數來實現復雜功能代碼重用，編寫成函數，起主導地位的函數是主函數，被調用的函數是子函數，主函數和子函數通過主函數調用子函數。例子：6-3.htm布置課后任務及作業P99: （4）（6） 課堂講解復習總結： 1、掌握函數的定義格式。

49、2、掌握函數參數的傳遞。 3、掌握調用函數。4、掌握函數的返回值。5、掌握函數變量的作用域。6、掌握組合多個函數實現復雜功能。第十五講第六章 第二節 HTML標簽與事件教學目的和目標1、掌握常用HTML標簽事件。2、掌握事件處理概念，處理程序。教學重點與難點1、掌握常用HTML標簽事件。2、掌握事件處理概念，處理程序。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容6.2.1 HTML標簽與事件HTML標簽是主要的事件對象,<input>標簽的”type”屬性.表事件處理器1、基本概念

50、JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向對象的語言。而基于對象的基本特征，就是采用事件驅動(event-driven)。它是在用形界面的環境下，使得一切輸入變化簡單化。通常鼠標或熱鍵的動作我們稱之為事件（Event），而由鼠標或熱鍵引發的一連串程序的動作，稱之為事件驅動（Event Driver）。而對事件進行處理程序或函數，我們稱之為事件處理程序（Event Handler）。事件處理器的名稱是由事件名加上一個”on”組成,統一用小寫, 事件處理器代碼后面用”=”添加了事件觸發時需要的JavaScript代碼,代碼可以是一條語句,也可

51、以是一個函數,<input onclick=showInfo();>、事件處理程序在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的所有函數作為事件處理程序。格式如下：Function 事件處理名（參數表）事件處理語句集；范例1：下例程序是一個自動裝載和自動卸載的例子。即當裝入HTML文檔時調用loadform()函數,而退出該文檔進入另一HTML文檔時則首先調用unloadform()函數,確認后方可進入。 6_s1.htm 布置課后任務及作業P99: （7）（9） 課堂講解第十六講第六章 第二節 使用常用事件教

52、學目的和目標1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握組合函數實現事件功能。教學重點與難點1、掌握使用常用事件方法。2、掌握使用onClick, onLoad事件。3、掌握組合函數實現事件功能。教學方法和手段1、以講授法、課堂操作演示及學生實訓為主。2、使用先鋒電子教室多媒體手段進行教學。教學時間：2課時教學過程及詳細內容6.2.3、使用常用事件JavaScript事件驅動中的事件是通過鼠標或熱鍵的動作引發的。它主要有以下幾個事件：（）單擊事件onClick當用戶單擊鼠標按鈕時，產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執

53、行。通常在下列基本對象中產生：· button（按鈕對象） · checkbox（復選框）或（檢查列表框） · radio （單選鈕） · reset buttons（重要按鈕） · submit buttons（提交按鈕） 例：可通過下列按鈕激活change()文件：<Form><Input type="button" Value=“ ” onClick="change()"></Form>在onClick等號后，可以使用自己編寫的函數作為事件處理程序，也可以使用Ja

54、vaScript中內部的函數。還可以直接使用JavaScript的代碼等。例： <Input type="button" value=" " onclick=alert("這是一個例子"）;（2）失去焦點onBlur當text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時，引發該文件，他與onFocas事件是一個對應的關系。（3）onChange改變事件當利用text或texturea元素輸入字符值改變時發該事件，同時當在select表格項中一個選項狀態改變后也會引發該事件。例： <Form>

55、;<Input type="text" name="Test" value="Test" onCharge="check('this.test)"></Form>（4）選中事件onSelect當Text或Textarea對象中的文字被加亮后，引發該事件。（5）獲得焦點事件onFocus當用戶單擊Text或textarea以及select對象時，產生該事件。此時該對象成為前臺對象。（）載入文件onLoad當文檔載入時，產生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。（）卸載文件onUnload當Web頁面退出時引發onUnload事件，并可更新Cookie的狀態。6_s1.htm 6_20.htm布置課后任務及作業P99: 進階練習 復習總結： 1、掌握函數的使用。2、掌握

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論