JSP網站設計ch2

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

2、二、二、HTMLHTML基本標記基本標記 三、三、HTMLHTML表單標記表單標記 四、四、HTMLHTML范例分析范例分析 一、一、HTMLHTML文本結構文本結構 第一個第一個HTML網頁網頁開始學習開始學習HTML！ 第一節(jié)第一節(jié) HTMLHTML語言語言一、一、HTMLHTML文本結構文本結構 二、二、HTMLHTML基本標記基本標記 三、三、HTMLHTML表單標記表單標記 四、四、HTMLHTML范例分析范例分析 二、二、HTMLHTML基本標記基本標記（一）（一）HTMLHTML注釋標記注釋標記（ex2_1_注釋注釋.html） 第一個第一個HTML網頁網頁 HTML注釋演示！注

3、釋演示！二、二、HTMLHTML基本標記基本標記（二）（二）HTMLHTML文字格式標記文字格式標記 1 1、標題大?。簶祟}大小：（ex2_2_h1h6.html） 最大最大 最小最小 標題標記標題標記 h1標題標題1 h2標題標題2 h3標題標題3 h4標題標題4 h5標題標題5 h6標題標題6 二、二、HTMLHTML基本標記基本標記（二）（二）HTMLHTML文字格式標記文字格式標記 2 2、字體字體: :(ex2_3_字體字體.html) 文字內容文字內容 二、二、HTMLHTML基本標記基本標記（二）（二）HTMLHTML文字格式標記文字格式標記3 3、其他字體標記其他字體標記： (

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

5、 居右對齊居右對齊 根據(jù)代碼嵌套關系設根據(jù)代碼嵌套關系設置縮進，提高代碼可置縮進，提高代碼可讀性，養(yǎng)成書寫代碼讀性，養(yǎng)成書寫代碼好習慣！好習慣！二、二、HTMLHTML基本標記基本標記（四）圖像標記（四）圖像標記(ex2_8_圖像圖像.html) 二、二、HTMLHTML基本標記基本標記（五）超文本鏈接標記（五）超文本鏈接標記（關鍵標記！）（關鍵標記?。?鏈接到網頁鏈接到網頁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的一部分。兩種相對路徑：從的一部分。兩種相對路徑：從項目項目根目錄開始根目錄開始的的相對路徑相對路徑；從；從本頁面本頁面當前目錄開始當前目錄開始的相對路徑的相對路徑。 超鏈接路徑超鏈接路徑以以“ / ”開頭，開頭，則是從則是從本項目根目錄開始本項目根目錄開始的的相相對路徑對路徑： href = “/student/pages/botto

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

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

9、EB-INFindex.jspscorebasetop.jspside.jspmain.jspTomcat項目環(huán)境配置項目環(huán)境配置：main.jsp3、從、從項目根目錄開始項目根目錄開始的相對路徑的相對路徑： 頁面頁面index訪問訪問top： 頁面頁面index訪問訪問side： （練習）（練習） 頁面頁面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）目標頁面變換目錄之后就失效，較少使用；）目標頁面變換目錄之后就失效，較少使用；（

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26、JavaJava代碼錯誤的所在行；代碼錯誤的所在行；JavaScriptJavaScript代碼用代碼用alert()alert()方法標注；方法標注； （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、網頁控件的校驗；、網頁控件的校驗； 3 3、網頁動態(tài)效果的實現(xiàn)；、網頁

28、動態(tài)效果的實現(xiàn)； 4 4、客戶端程序，響應速度快；、客戶端程序，響應速度快； 5 5、開發(fā)簡單；、開發(fā)簡單； 6 6、平臺無關，僅需瀏覽器支持；、平臺無關，僅需瀏覽器支持； 一一 JavaScriptJavaScript語言簡介語言簡介（二）與二）與JavaJava語言關系：語言關系： 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事件事件（一）鼠標事件：（一）鼠標事件：(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(關閉窗體嗎

34、？關閉窗體嗎？) )close( );elsealert(用戶選擇不關閉窗體用戶選擇不關閉窗體);調用調用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( “內容內容” ) 改變了客戶端頁面的源代碼。改變了客戶端頁面的源代碼。 范例：范例： document . write方法的演示方法的演示 document對象對象write方法演示方法演示點擊頁面！點擊頁面！funct

36、ion doWrite( )document.write(這是用這是用write()寫的內容寫的內容1);document.write(這是用這是用write()寫出的內容寫出的內容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鼠標事件鼠標事件( (ex22_18_MOUSE.docex22_18_MOUSE.doc) ) 要點：要點： 1、JS事件嵌入事件嵌入HTML代碼的格式；代碼的格式； 2、事件處理方法的調用格式；、事件處理方法的調用格式； 3、單引號和雙引號的使用方法；、單引號和雙引號的使用方法； 應該間隔使用單引號應該間隔使用單引號或雙引號或雙引號六六 范例分析范例分析（二）范例（二）范例2 2頁面控件校驗頁面控件校驗( (ex22_19_FORM.htmlex22_19_FORM.html) ) 要點：要

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