JSP網(wǎng)站設(shè)計ch2

1、HTMLHTML語言和語言和JavaScriptJavaScript語言語言第二章第二章本章學(xué)習(xí)目標(biāo)：本章學(xué)習(xí)目標(biāo)：能夠開發(fā)一個靜態(tài)網(wǎng)站能夠開發(fā)一個靜態(tài)網(wǎng)站本章學(xué)習(xí)方法：本章學(xué)習(xí)方法： 掌握服務(wù)器端網(wǎng)頁代碼和掌握服務(wù)器端網(wǎng)頁代碼和客戶端瀏覽效果的對應(yīng)關(guān)系！客戶端瀏覽效果的對應(yīng)關(guān)系！要要 求求禁止復(fù)制禁止復(fù)制pptppt中的代碼用于實驗！中的代碼用于實驗！第二章第二章 HTMLHTML語言和語言和JavaScriptJavaScript語言語言第一節(jié)第一節(jié) HTML語言語言 第二節(jié)第二節(jié) JavaScript語言語言第一節(jié)第一節(jié) HTMLHTML語言語言一、一、HTMLHTML文本結(jié)構(gòu)文本結(jié)構(gòu)

2、二、二、HTMLHTML基本標(biāo)記基本標(biāo)記 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記 四、四、HTMLHTML范例分析范例分析 一、一、HTMLHTML文本結(jié)構(gòu)文本結(jié)構(gòu) 第一個第一個HTML網(wǎng)頁網(wǎng)頁開始學(xué)習(xí)開始學(xué)習(xí)HTML！ 第一節(jié)第一節(jié) HTMLHTML語言語言一、一、HTMLHTML文本結(jié)構(gòu)文本結(jié)構(gòu) 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記 四、四、HTMLHTML范例分析范例分析 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（一）（一）HTMLHTML注釋標(biāo)記注釋標(biāo)記（ex2_1_注釋注釋.html） 第一個第一個HTML網(wǎng)頁網(wǎng)頁 HTML注釋演示！注

3、釋演示！二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（二）（二）HTMLHTML文字格式標(biāo)記文字格式標(biāo)記 1 1、標(biāo)題大小：標(biāo)題大?。海╡x2_2_h1h6.html） 最大最大 最小最小 標(biāo)題標(biāo)記標(biāo)題標(biāo)記 h1標(biāo)題標(biāo)題1 h2標(biāo)題標(biāo)題2 h3標(biāo)題標(biāo)題3 h4標(biāo)題標(biāo)題4 h5標(biāo)題標(biāo)題5 h6標(biāo)題標(biāo)題6 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（二）（二）HTMLHTML文字格式標(biāo)記文字格式標(biāo)記 2 2、字體字體: :(ex2_3_字體字體.html) 文字內(nèi)容文字內(nèi)容 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（二）（二）HTMLHTML文字格式標(biāo)記文字格式標(biāo)記3 3、其他字體標(biāo)記其他字體標(biāo)記： (

4、ex2_4.html)加粗加粗斜體斜體下劃線下劃線刪除線刪除線傾斜傾斜 加強顯示加強顯示二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（三）（三）HTMLHTML文字版面標(biāo)記文字版面標(biāo)記: :(ex2_5_版面版面.html)1、換行：換行： 2、不換行：不換行： 不換行的內(nèi)容不換行的內(nèi)容； 3、段落標(biāo)記：段落標(biāo)記： 段落內(nèi)容段落內(nèi)容 換行和不換行標(biāo)記換行和不換行標(biāo)記 你好！這是換行標(biāo)記效果你好！這是換行標(biāo)記效果 這是不換行標(biāo)記，請把窗口變窄，看實際效果！這是不換行標(biāo)記，請把窗口變窄，看實際效果！ 去掉不換行標(biāo)記，請把窗口變窄，看實際效果！去掉不換行標(biāo)記，請把窗口變窄，看實際效果！ 居左對齊居左對齊

5、 居右對齊居右對齊 根據(jù)代碼嵌套關(guān)系設(shè)根據(jù)代碼嵌套關(guān)系設(shè)置縮進(jìn)，提高代碼可置縮進(jìn)，提高代碼可讀性，養(yǎng)成書寫代碼讀性，養(yǎng)成書寫代碼好習(xí)慣！好習(xí)慣！二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（四）圖像標(biāo)記（四）圖像標(biāo)記(ex2_8_圖像圖像.html) 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（五）超文本鏈接標(biāo)記（五）超文本鏈接標(biāo)記（關(guān)鍵標(biāo)記！）（關(guān)鍵標(biāo)記！） 鏈接到網(wǎng)頁鏈接到網(wǎng)頁1 URL“統(tǒng)一資源定位符統(tǒng)一資源定位符”的部分或全部的部分或全部專題：專題：URL相對路徑與絕對路徑相對路徑與絕對路徑1、絕對路徑：、絕對路徑： 即即URL全部，通常以協(xié)議開頭全部，通常以協(xié)議開頭。 href = “ h

6、ttp:/87 :8080/ test/ index . jsp” href = “ http:/ / test / index . jsp ”專題：專題：URL相對路徑與絕對路徑相對路徑與絕對路徑2 2、相對路徑：、相對路徑： 是是URL的一部分。兩種相對路徑：從的一部分。兩種相對路徑：從項目項目根目錄開始根目錄開始的的相對路徑相對路徑；從；從本頁面本頁面當(dāng)前目錄開始當(dāng)前目錄開始的相對路徑的相對路徑。 超鏈接路徑超鏈接路徑以以“ / ”開頭，開頭，則是從則是從本項目根目錄開始本項目根目錄開始的的相相對路徑對路徑： href = “/student/pages/botto

7、m.jsp” 若超鏈接路徑不以若超鏈接路徑不以“ / ”開頭，則是從本頁面開頭，則是從本頁面當(dāng)前目錄開當(dāng)前目錄開始的始的相對路徑相對路徑: href = “pages/top.jsp ”專題：專題：URL相對路徑與絕對路徑相對路徑與絕對路徑3、從本項目、從本項目根目錄開始根目錄開始的相對路徑的相對路徑： 超鏈接路徑超鏈接路徑以以” / ”開頭開頭，是從，是從本項目根目錄開始本項目根目錄開始的相對路徑（假的相對路徑（假定根目錄為定根目錄為student）：）： href = “/pathValue/pages/bottom.jsp”（1） “/pathValue” 替代了項目替代了項目根目錄根目

8、錄名稱，也就是名稱，也就是server.xml文件文件中本項目配置的中本項目配置的path值。因此項目根目錄名稱不能（需）寫出。值。因此項目根目錄名稱不能（需）寫出。（2）目標(biāo)頁面變換目錄之后就失效，較少使用；）目標(biāo)頁面變換目錄之后就失效，較少使用；（注釋：從根目錄（注釋：從根目錄student進(jìn)入進(jìn)入pages目錄找到目錄找到bottom.jsp）server.xml中配置項目中配置項目：專題：專題：URL相對路徑與絕對路相對路徑與絕對路徑徑3、從本項目、從本項目根目錄開始根目錄開始的相對路徑的相對路徑： 項目項目student的目錄結(jié)構(gòu)：的目錄結(jié)構(gòu)：webappsstudentpagesW

9、EB-INFindex.jspscorebasetop.jspside.jspmain.jspTomcat項目環(huán)境配置項目環(huán)境配置：main.jsp3、從、從項目根目錄開始項目根目錄開始的相對路徑的相對路徑： 頁面頁面index訪問訪問top： 頁面頁面index訪問訪問side： （練習(xí)）（練習(xí)） 頁面頁面main訪問訪問top：webappsstudentpagesWEB-INFindex.jspscorebasetop.jspside.jspTomcat項目環(huán)境配置項目環(huán)境配置：main.jsp3、從、從項目根目錄開始項目根目錄開始的相對路徑的相對路徑： 頁面頁面index訪問訪問top

10、： /myweb /pages / score / top . jsp 頁面頁面index訪問訪問side： /myweb /pages / base / side . jsp 頁面頁面main訪問訪問top： /myweb /pages / score / top . jspwebappsstudentpagesWEB-INFindex.jspscorebasetop.jspside.jsp項目根目錄項目根目錄student不能寫出來，被不能寫出來，被“/myweb” 替代了！替代了！Tomcat項目環(huán)境配置項目環(huán)境配置：專題：專題：URL相對路徑與絕對路徑相對路徑與絕對路徑3、從本項目、從

11、本項目根目錄開始根目錄開始的相對路徑的相對路徑： 超鏈接路徑超鏈接路徑以以” / ”開頭開頭，是從，是從本項目根目錄開始本項目根目錄開始的相對路徑（假的相對路徑（假定根目錄為定根目錄為student）：）： href = “/pathValue/pages/bottom.jsp”（1） “/pathValue” 等于是項目根目錄名稱，就是等于是項目根目錄名稱，就是server.xml文件中文件中本項目配置的本項目配置的path值。因此路徑項目根目錄名稱不能（需）寫出。值。因此路徑項目根目錄名稱不能（需）寫出。（2）目標(biāo)頁面變換目錄之后就失效，較少使用；）目標(biāo)頁面變換目錄之后就失效，較少使用；（

12、注釋：從根目錄進(jìn)入（注釋：從根目錄進(jìn)入pages目錄找到目錄找到bottom.jsp）server.xml中配置項目中配置項目：由于在由于在tomcat中中context的的path屬性的設(shè)置對根屬性的設(shè)置對根目錄開始的目錄開始的URL相對路徑的寫法影響較大，本相對路徑的寫法影響較大，本課程只要求了解課程只要求了解URL相對路徑！不要和相對路徑！不要和include指令的文件包含路徑混淆。指令的文件包含路徑混淆。專題：專題：URL相對路徑與絕對路徑相對路徑與絕對路徑4、從、從本頁面當(dāng)前目錄開始本頁面當(dāng)前目錄開始的相對路徑的相對路徑： 超鏈接的超鏈接的URL路徑不以路徑不以“/”開頭，就是從本頁

13、面開頭，就是從本頁面當(dāng)前當(dāng)前目錄開始目錄開始的相對路徑的相對路徑： href = “ ch2 / test / main . jsp ” href = “ . . / . . / . . / core / test . jsp ” href = “ test . jsp ” （1）本頁面當(dāng)前目錄不需（能）出現(xiàn)在路徑中；本頁面當(dāng)前目錄不需（能）出現(xiàn)在路徑中； （2）適合同目錄的頁面，以及穩(wěn)定的目錄結(jié)構(gòu)；）適合同目錄的頁面，以及穩(wěn)定的目錄結(jié)構(gòu)；（從當(dāng)前目錄進(jìn)入（從當(dāng)前目錄進(jìn)入ch2目錄，再進(jìn)入目錄，再進(jìn)入test目錄找到目錄找到main.jsp）（從當(dāng)前目錄開始三次退到上一級目錄，再進(jìn)入（從當(dāng)前目

14、錄開始三次退到上一級目錄，再進(jìn)入core目錄找到目錄找到test.jsp）（在當(dāng)前目錄直接找到（在當(dāng)前目錄直接找到test.jsp）main.jsp4、從、從本頁面當(dāng)前目錄開始本頁面當(dāng)前目錄開始的相對路徑的相對路徑： 頁面頁面index訪問訪問top： 頁面頁面index訪問訪問side： （練習(xí)）（練習(xí)） 頁面頁面main訪問訪問top：webappsstudentpagesWEB-INFindex.jspscorebasetop.jspside.jspmain.jsp4、從、從本頁面當(dāng)前目錄開始本頁面當(dāng)前目錄開始的相對路徑的相對路徑： 頁面頁面index訪問訪問top： . . / sco

15、re / top . jsp 頁面頁面index訪問訪問side： side . jsp 頁面頁面main訪問訪問top： score / top . jspwebappsstudentpagesWEB-INFindex.jspscorebasetop.jspside.jsp二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（六）表格標(biāo)記：（六）表格標(biāo)記： 表表 標(biāo)題標(biāo)題 表頭表頭 行行 格格課堂練習(xí)課堂練習(xí) 1寫出如下網(wǎng)頁的主要代碼。寫出如下網(wǎng)頁的主要代碼。ADBECF 學(xué)生信息表學(xué)生信息表 姓名姓名 性別性別 戴軍戴軍 男男 劉珍劉珍 女女表格標(biāo)記嵌套格式：表格標(biāo)記嵌套格式：(ex2_6_(ex2_

16、6_表格表格. .html)html)table標(biāo)記：標(biāo)記：ABCcellspacingbordercellpadding表格在頁面的位置不含邊框的部份表框與格框外框粗細(xì)行與格標(biāo)記：行與格標(biāo)記： 戴軍戴軍 男男 劉珍劉珍 女女課堂練習(xí)課堂練習(xí) 2寫出如下網(wǎng)頁的主要代碼。寫出如下網(wǎng)頁的主要代碼。導(dǎo)航欄導(dǎo)航欄菜單菜單內(nèi)容內(nèi)容廣告廣告版權(quán)欄版權(quán)欄 導(dǎo)航欄導(dǎo)航欄 菜單菜單 內(nèi)容內(nèi)容 廣告廣告 版權(quán)欄版權(quán)欄 導(dǎo)航欄導(dǎo)航欄菜單菜單內(nèi)容內(nèi)容廣告廣告版權(quán)欄版權(quán)欄練習(xí)練習(xí) 2：參考答案：參考答案課堂練習(xí)課堂練習(xí) 3寫出如下網(wǎng)頁的主要代碼。寫出如下網(wǎng)頁的主要代碼。導(dǎo)航欄導(dǎo)航欄內(nèi)容內(nèi)容版權(quán)欄版權(quán)欄A欄欄B欄欄 導(dǎo)航

17、欄導(dǎo)航欄 內(nèi)容內(nèi)容 A欄欄 B欄欄 版權(quán)欄版權(quán)欄 導(dǎo)航欄導(dǎo)航欄內(nèi)容內(nèi)容版權(quán)欄版權(quán)欄A欄欄B欄欄練習(xí)練習(xí)3：參考答案：參考答案二、二、HTMLHTML基本標(biāo)記基本標(biāo)記（六）表格標(biāo)記：（六）表格標(biāo)記： 表格標(biāo)記的頁面布局功能表格標(biāo)記的頁面布局功能TopNavigationMenuContentBottom課堂練習(xí)課堂練習(xí) 4寫出如下網(wǎng)頁的主要代碼。寫出如下網(wǎng)頁的主要代碼。導(dǎo)航欄導(dǎo)航欄菜單菜單內(nèi)容內(nèi)容版權(quán)欄版權(quán)欄A欄欄B欄欄 導(dǎo)航欄導(dǎo)航欄 菜單菜單內(nèi)容內(nèi)容A欄欄B欄欄 版權(quán)欄版權(quán)欄 導(dǎo)航欄導(dǎo)航欄菜單菜單內(nèi)容內(nèi)容版權(quán)欄版權(quán)欄A欄欄B欄欄第一節(jié)第一節(jié) HTMLHTML語言語言一、一、HTMLHTML文本

18、結(jié)構(gòu)文本結(jié)構(gòu) 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記 四、四、HTMLHTML范例分析范例分析 三、三、HTMLHTML表單標(biāo)記（重點）表單標(biāo)記（重點） 客戶端向服務(wù)器發(fā)送請求的時候，表客戶端向服務(wù)器發(fā)送請求的時候，表單的各個控件中填寫或選擇的內(nèi)容就是請單的各個控件中填寫或選擇的內(nèi)容就是請求的內(nèi)容之一！求的內(nèi)容之一！ 表單是動態(tài)網(wǎng)站開發(fā)的關(guān)鍵標(biāo)記！表單是動態(tài)網(wǎng)站開發(fā)的關(guān)鍵標(biāo)記！三、三、HTMLHTML表單標(biāo)記表單標(biāo)記 （一）表單標(biāo)記分類：（一）表單標(biāo)記分類：1 1、表單標(biāo)記分為、表單標(biāo)記分為三類三類： 下拉菜單標(biāo)記下拉菜單標(biāo)記多行文本輸入標(biāo)記多行文本

19、輸入標(biāo)記輸輸 入入 標(biāo)標(biāo) 記記 （input）單行文本框單行文本框密碼輸入框密碼輸入框單選框單選框復(fù)選框復(fù)選框提交按鈕提交按鈕重置按鈕重置按鈕普通按鈕普通按鈕隱藏標(biāo)記隱藏標(biāo)記2 2、表單各標(biāo)記嵌套方式：、表單各標(biāo)記嵌套方式： 足球足球游泳游泳 三類表單標(biāo)記為平行關(guān)系！三類表單標(biāo)記為平行關(guān)系！都在都在form標(biāo)記內(nèi)部！標(biāo)記內(nèi)部！三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（二）表單標(biāo)記（二）表單標(biāo)記(ex2_9_表單表單.html) 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（三）輸入標(biāo)記（三）輸入標(biāo)記（input類型）類型）： 1、 單行文本框單行文本框 2、 密碼輸入框：密碼輸入框： 屬性取值的雙

20、引號之間不能有多余的空格！屬性取值的雙引號之間不能有多余的空格！ value為默認(rèn)值為默認(rèn)值name屬性值在表單內(nèi)唯一！屬性值在表單內(nèi)唯一！ 服務(wù)器端需要服務(wù)器端需要name獲取請求信息。獲取請求信息。三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（三）表單輸入標(biāo)記（三）表單輸入標(biāo)記（input類型）類型）： 3、單選框：單選框： 4、復(fù)選框：復(fù)選框： 一組一組radio或或checkbox控件的控件的name取值必須相同！取值必須相同！三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（三）表單輸入標(biāo)記（三）表單輸入標(biāo)記（input類型）類型）： 5、提交按鈕：提交按鈕： 6、重置按鈕：重置按鈕： 7、普通

21、按鈕：普通按鈕： 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（三）表單輸入標(biāo)記（三）表單輸入標(biāo)記（input類型）類型）： 8、隱藏標(biāo)記：隱藏標(biāo)記： hidden標(biāo)記的標(biāo)記的value值依然會發(fā)送到服務(wù)器端。值依然會發(fā)送到服務(wù)器端。三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（四）多行輸入框：（四）多行輸入框：（非（非input類型）類型） 顯示的文本顯示的文本三、三、HTMLHTML表單標(biāo)記表單標(biāo)記（五）下拉菜單標(biāo)記：（五）下拉菜單標(biāo)記：（非（非input類型）類型）足球足球游泳游泳滑冰滑冰 name值必需！提交到服務(wù)器端的請求信息是值必需！提交到服務(wù)器端的請求信息是value值！值！第一節(jié)第一節(jié)

22、 HTMLHTML語言語言一、一、HTMLHTML文本結(jié)構(gòu)文本結(jié)構(gòu) 二、二、HTMLHTML基本標(biāo)記基本標(biāo)記 三、三、HTMLHTML表單標(biāo)記表單標(biāo)記 四、四、HTMLHTML范例分析范例分析 學(xué)生信息查詢輸入頁面學(xué)生信息查詢輸入頁面五、五、HTMLHTML課堂練習(xí)課堂練習(xí)1、如前述案例圖片所示，編寫一個表單名為如前述案例圖片所示，編寫一個表單名為frm，接受請求的頁面是接受請求的頁面是test.jsp。有一個單行文本。有一個單行文本輸入框（輸入框（tName），還有一個發(fā)送按鈕和一），還有一個發(fā)送按鈕和一個重置按鈕。個重置按鈕。五、五、HTMLHTML課堂練習(xí)課堂練習(xí)學(xué)號學(xué)號: 五、五、HT

23、MLHTML課堂練習(xí)課堂練習(xí)2、某網(wǎng)頁中有一表單名為某網(wǎng)頁中有一表單名為frm，有，有2個單行文本個單行文本輸入框，使用表格將兩個輸入框布局為如下輸入框，使用表格將兩個輸入框布局為如下形式：形式：用戶名：用戶名：密密 碼：碼：五、五、HTMLHTML課堂練習(xí)課堂練習(xí) 用戶名用戶名 密碼密碼 理解理解HTML標(biāo)記之間的關(guān)系：表格是布局、表單是內(nèi)容標(biāo)記之間的關(guān)系：表格是布局、表單是內(nèi)容六、代碼調(diào)試方法六、代碼調(diào)試方法1 1、刪除法：、刪除法： （1 1）刪除部分可疑代碼，剩余代碼運行無問題，表明刪除的代）刪除部分可疑代碼，剩余代碼運行無問題，表明刪除的代碼有錯。繼續(xù)改變刪除范圍縮小包圍圈，最后肉眼

24、看！碼有錯。繼續(xù)改變刪除范圍縮小包圍圈，最后肉眼看！ （2 2）刪除的代碼通常是成對的標(biāo)記組成的代碼塊，剩余代碼可）刪除的代碼通常是成對的標(biāo)記組成的代碼塊，剩余代碼可獨立運行。獨立運行。 （3 3）可用于標(biāo)記不成對導(dǎo)致的錯誤；）可用于標(biāo)記不成對導(dǎo)致的錯誤； （4 4）可用于無明顯錯誤線索的代碼；）可用于無明顯錯誤線索的代碼； （5 5）可用于沒有明顯運行流程的網(wǎng)頁代碼；）可用于沒有明顯運行流程的網(wǎng)頁代碼； 案例演示六、代碼調(diào)試方法六、代碼調(diào)試方法2 2、日志法：、日志法： （ 1 1 ） 依 據(jù) 后 臺 日 志 文 件 的 報 錯 信 息 調(diào) 試 ：） 依 據(jù) 后 臺 日 志 文 件 的 報

25、錯 信 息 調(diào) 試 ：tomcatlogsstdout.logtomcatlogsstdout.log。注意。注意loglog文件的文件的時間；時間； （2 2）適合于頁面無報錯信息時使用，不適合）適合于頁面無報錯信息時使用，不適合HTMLHTML等靜態(tài)代碼的調(diào)試；等靜態(tài)代碼的調(diào)試； （3 3）和頁面報錯信息一樣，有用的報錯信息一般在）和頁面報錯信息一樣，有用的報錯信息一般在第一行；第一行；案例演示六、代碼調(diào)試方法六、代碼調(diào)試方法3 3、標(biāo)注法：、標(biāo)注法：（1 1）用多個）用多個System.out.println(“xxx”)System.out.println(“xxx”)方法定位方法定位

26、JavaJava代碼錯誤的所在行；代碼錯誤的所在行；JavaScriptJavaScript代碼用代碼用alert()alert()方法標(biāo)注；方法標(biāo)注； （2 2）適于通過了編譯，執(zhí)行中出錯的代碼；）適于通過了編譯，執(zhí)行中出錯的代碼；（3 3）先大間距定位，再逐步縮小，最后肉眼法分析；）先大間距定位，再逐步縮小，最后肉眼法分析；案例演示第二章第二章 HTMLHTML語言和語言和JavaScriptJavaScript語言語言第一節(jié)第一節(jié) HTMLHTML語言語言 第二節(jié)第二節(jié) JavaScriptJavaScript語言語言第二節(jié)第二節(jié) JavaScriptJavaScript語言語言一、一、

27、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJavaScript語法語法六、范例分析六、范例分析 一一 JavaScriptJavaScript語言簡介語言簡介（一）主要功能特點一）主要功能特點：( (ex22_10_JS.htmlex22_10_JS.html) ) 1 1、與用戶交互；、與用戶交互； 2 2、網(wǎng)頁控件的校驗；、網(wǎng)頁控件的校驗； 3 3、網(wǎng)頁動態(tài)效果的實現(xiàn)；、網(wǎng)頁

28、動態(tài)效果的實現(xiàn)； 4 4、客戶端程序，響應(yīng)速度快；、客戶端程序，響應(yīng)速度快； 5 5、開發(fā)簡單；、開發(fā)簡單； 6 6、平臺無關(guān)，僅需瀏覽器支持；、平臺無關(guān)，僅需瀏覽器支持； 一一 JavaScriptJavaScript語言簡介語言簡介（二）與二）與JavaJava語言關(guān)系：語言關(guān)系： 1 1、開發(fā)公司不同；、開發(fā)公司不同； 2 2、更簡單，功能少；、更簡單，功能少； 3 3、JavaScriptJavaScript腳本逐行解釋執(zhí)行，運行更快；腳本逐行解釋執(zhí)行，運行更快； 4 4、語法不同，變量使用之前不必聲明；、語法不同，變量使用之前不必聲明； 5 5、支持（運行）環(huán)境不同；、支持（運行）環(huán)

29、境不同；第二節(jié)第二節(jié) JavaScriptJavaScript語言語言一、一、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJavaScript語法語法六、范例分析六、范例分析 二二 JavaScriptJavaScript事件事件（一）鼠標(biāo)事件：（一）鼠標(biāo)事件：(ex22_11_MOUSE.htmlex22_11_MOUSE.html)1、onClick2、onMouseDown3

30、、onMouseUp4、onMouseMove5、onMouseOut6、onMouseOver二、二、JavaScriptJavaScript事件事件（二）鍵盤事件：（二）鍵盤事件：1、onKeyDown2、onKeyUp3、onKeyPress （三）焦點事件：（三）焦點事件： (ex22_12_FOCUS.htmlex22_12_FOCUS.html) 1、onFocus 2、onBlur二二 JavaScriptJavaScript事件事件 （四）加載和卸載窗口事件：（四）加載和卸載窗口事件：( (ex22_13_LOAD.htm)ex22_13_LOAD.htm)1、onLoad2、

31、onUnload第二節(jié)第二節(jié) JavaScriptJavaScript語言語言一、一、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJavaScript語法語法六、范例分析六、范例分析 三三 JavaScript函數(shù)函數(shù) function 函數(shù)名（參數(shù)）函數(shù)名（參數(shù)） 函數(shù)語句；函數(shù)語句； return 返回值；（可無）返回值；（可無） 范例見ex22_14_FUCTION第二節(jié)第二

32、節(jié) JavaScriptJavaScript語言語言一、一、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJavaScript語法語法六、范例分析六、范例分析 四四 JavaScriptJavaScript對象對象（一）（一）JavaScriptJavaScript對象簡介：對象簡介： 1、對象機制；、對象機制； 2、對象的屬性和功能；、對象的屬性和功能； 3、對象的使用方法：、對象

33、的使用方法： 對象名對象名.屬性名屬性名frm.txtName.value = “John” 對象名對象名.方法名方法名document.write(“hello！”)四四 JavaScriptJavaScript對象對象（二）（二）JavaScriptJavaScript主要對象及其方法：主要對象及其方法：1、 Window對象的方法對象的方法:open( )alert( ) close( ) confirm( ) (ex22_15_confirm.html)prompt( )范例：范例：confirm方法的演示方法的演示 function doOff( )if( confirm(關(guān)閉窗體嗎

34、？關(guān)閉窗體嗎？) )close( );elsealert(用戶選擇不關(guān)閉窗體用戶選擇不關(guān)閉窗體);調(diào)用調(diào)用windowwindow對象的方法對象的方法不需要寫出對象名稱不需要寫出對象名稱四四 JavaScriptJavaScript對象對象（二）（二）JavaScriptJavaScript主要對象及其方法：主要對象及其方法：1、 Window對象的方法對象的方法:open( )alert( ) close( ) confirm( )prompt( ) (ex22_16_prompt.html)范例：范例： prompt方法的演示方法的演示 function doAdd( )var strNa

35、me = prompt(“請輸入用戶姓名！請輸入用戶姓名！”)；frm.tName.value = strName；四四 JavaScriptJavaScript對象對象（二）（二）JavaScriptJavaScript主要對象及其方法：主要對象及其方法： 2、document對象的方法對象的方法: (ex22_17_write.html)document . write( “內(nèi)容內(nèi)容” ) 改變了客戶端頁面的源代碼。改變了客戶端頁面的源代碼。 范例：范例： document . write方法的演示方法的演示 document對象對象write方法演示方法演示點擊頁面！點擊頁面！funct

36、ion doWrite( )document.write(這是用這是用write()寫的內(nèi)容寫的內(nèi)容1);document.write(這是用這是用write()寫出的內(nèi)容寫出的內(nèi)容2看源代碼看源代碼);四四 JavaScriptJavaScript對象對象（二）（二）JavaScript主要對象及其方法：主要對象及其方法： 3、String對象：對象： (ex22_17_String.html) substring( start，end ) （從（從start到到end(不含不含end)的子串）的子串） charAt( start ) length屬性屬性 注：字符串注：字符串string中

37、的字符索引方法：中的字符索引方法： (0，1，2，3，4，)第二節(jié)第二節(jié) JavaScriptJavaScript語言語言一、一、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJavaScript語法語法六、范例分析六、范例分析 五五 JavaScriptJavaScript語法語法（一）數(shù)據(jù)類型：一）數(shù)據(jù)類型： 1、number（含整數(shù)、浮點數(shù)）含整數(shù)、浮點數(shù)） 2、string（

38、加上單引號或雙引號）加上單引號或雙引號） 3、boolean（取值為取值為truetrue或或falsefalse） 4、object五五 JavaScriptJavaScript語法語法（一）數(shù)據(jù)類型：一）數(shù)據(jù)類型： 5 5、使用規(guī)則：、使用規(guī)則： （1 1）最好先聲明后使用變量；）最好先聲明后使用變量； var myName “tom” ； （2）聲明時不需要指明類型，根據(jù)賦值來確定；聲明時不需要指明類型，根據(jù)賦值來確定； （3）大小寫敏感大小寫敏感； （4）變量名避免保留字；）變量名避免保留字；五五 JavaScriptJavaScript語法語法 （二）常用語句：（二）常用語句： 1、

39、條件語句：、條件語句： if( 條件式條件式 ) 語句；語句； else 語句；語句； 五五 JavaScriptJavaScript語法語法2 2、循環(huán)語句：、循環(huán)語句：for(k=0； k5； k+) 循環(huán)體；循環(huán)體； while( 條件條件 ) 循環(huán)體；循環(huán)體；第二節(jié)第二節(jié) JavaScriptJavaScript語言語言一、一、JavaScriptJavaScript語言簡介語言簡介 二、二、JavaScriptJavaScript事件事件 三、三、JavaScriptJavaScript函數(shù)函數(shù) 四、四、JavaScriptJavaScript對象對象 五、五、JavaScriptJ

40、avaScript語法語法六、范例分析六、范例分析 六六 范例分析范例分析（一）范例（一）范例1 1鼠標(biāo)事件鼠標(biāo)事件( (ex22_18_MOUSE.docex22_18_MOUSE.doc) ) 要點：要點： 1、JS事件嵌入事件嵌入HTML代碼的格式；代碼的格式； 2、事件處理方法的調(diào)用格式；、事件處理方法的調(diào)用格式； 3、單引號和雙引號的使用方法；、單引號和雙引號的使用方法； 應(yīng)該間隔使用單引號應(yīng)該間隔使用單引號或雙引號或雙引號六六 范例分析范例分析（二）范例（二）范例2 2頁面控件校驗頁面控件校驗( (ex22_19_FORM.htmlex22_19_FORM.html) ) 要點：要

41、點： 1、表單控件校驗的處理過程（、表單控件校驗的處理過程（submit）；）； 2、各種表單控件對象及屬性的訪問方法；各種表單控件對象及屬性的訪問方法； 3、特殊的函數(shù)、特殊的函數(shù)isNaN，關(guān)系運算符關(guān)系運算符 = ； 4、String對象的幾個方法對象的幾個方法substring()，charAt()； 頁面控件校驗流程圖頁面控件校驗流程圖 1 1點擊按鈕點擊按鈕校驗姓名值校驗姓名值校驗學(xué)號值校驗學(xué)號值發(fā)送發(fā)送submit無效？無效？無效？無效？無效無效無效無效有效有效有效有效點擊按鈕點擊按鈕去除姓名值前后空格去除姓名值前后空格doTrim警告框警告框alert校驗學(xué)號校驗學(xué)號焦點返回控件焦點返回控件程序返回程序返回頁面控件校驗流程圖頁面控件校驗流程圖 2 2無效？無效？無效無效有效有效姓名姓名: 學(xué)號學(xué)號: function doAdd() frm.txtName.value = doTrim( frm.txtName.value );if(frm.txtName.value = “” )alert(用戶名不能為空！用戶名不能為空！);frm.txtName.focus