第二章javaservlet編程

1、第一章 網(wǎng)頁(yè)編程基礎(chǔ),1.3 中常用標(biāo)記,1.2 中常用標(biāo)記,1.1 HTML基礎(chǔ),1.4 JavaScript編程入門(mén),1.5 窗口中的對(duì)象和元素,1.0 任務(wù)引入,能力目標(biāo),,,,,C#,SQL Server,,,,XML,PSPM,ASP.NET,Oracle,OOAD,,Computer Base,,HTML/JavaScript,SQL Base,OOP/Java,,,C,,,,,STB,JSP/Servlet,

2、,,EJB/WebService,WinForms,,,,,,,Struts/JSF,Testing/SQA,,,,Linux,,能力目標(biāo),了解B/S結(jié)構(gòu)的工作原理，企業(yè)的開(kāi)發(fā)模式及開(kāi)發(fā)細(xì)節(jié)掌握多層架構(gòu)技術(shù)，熟練應(yīng)用MVC模式熟練應(yīng)用表示層技術(shù)（HTML及有效的使用JavaScript驗(yàn)證）熟練應(yīng)用數(shù)據(jù)層技術(shù)（JDBC數(shù)據(jù)訪(fǎng)問(wèn)技術(shù)）熟練應(yīng)用業(yè)務(wù)邏輯層技術(shù)（Servlet和JSP）,能力目標(biāo),熟練應(yīng)用控制層技術(shù)（JavaBean數(shù)

3、據(jù)裝載、Filter字符過(guò)濾)通過(guò)項(xiàng)目練習(xí)，獨(dú)立開(kāi)發(fā)企業(yè)級(jí)應(yīng)用的 B/S系統(tǒng),能力目標(biāo),HTML部分 熟練掌握HTML的基本結(jié)構(gòu) 熟練應(yīng)用HTML標(biāo)記編寫(xiě)Web頁(yè)面JavaScript部分 掌握J(rèn)avaScript的語(yǔ)法 會(huì)使用JavaScript的內(nèi)置對(duì)象與對(duì)話(huà)框 熟練應(yīng)用JavaScript事件機(jī)制并進(jìn)行表單驗(yàn)證,態(tài)度目標(biāo),學(xué)習(xí)態(tài)度；主動(dòng)性；理解

4、能力。,本章知識(shí)點(diǎn),HTML基本結(jié)構(gòu) 標(biāo)記：INPUT、RADIO、SELECT、TEXTAREA、CHECKBOX、BUTTON、SUBMIT、RESET、HIDDEN JavaScript基礎(chǔ)：將JavaScript嵌入到HTML頁(yè)面、注釋、變量定義、流程控制、循環(huán)、函數(shù)定義,本章知識(shí)點(diǎn),JavaScript內(nèi)置對(duì)象：window、document、form JavaScri

5、pt對(duì)話(huà)框alert、confirm、prompt 事件處理：onLoad、onFocus、onBlur、onclick、onChange、onSelect、onSubmit表單驗(yàn)證,任務(wù)引入,美國(guó)Loucs公司希望開(kāi)發(fā)一套客戶(hù)投保系統(tǒng)，由客戶(hù)自行在系統(tǒng)中選擇投保內(nèi)容，為方便各地客戶(hù)操作，系統(tǒng)應(yīng)采用網(wǎng)絡(luò)方式進(jìn)行，并且為了給客戶(hù)留下良好的印象，要求界面干凈整潔，并且對(duì)于客戶(hù)的操作有良好的驗(yàn)證性，以解決公司員工的工作量。

6、 本章節(jié)的HTML界面設(shè)計(jì)及JavaScript驗(yàn)證內(nèi)容可以很好的解決上述問(wèn)題。,1.1 HTML基礎(chǔ),HTTP---HyperText Transfer Protocol：超文本傳輸協(xié)議HTML---HyperText Markup Language：超文本標(biāo)記語(yǔ)言FTP---File Transfer Protocol：文件傳輸協(xié)議URL---Uniform Resource Locators：統(tǒng)一資源定位器,1

7、.1 HTML基礎(chǔ),HTML基本框架Sample,1.1 HTML基礎(chǔ),…標(biāo)記文檔中含有超文本的內(nèi)容…h(huán)tml文檔的頭部，含有初始化信息…頁(yè)面的標(biāo)題…文檔體，包含頁(yè)面所有的具體內(nèi)容,1.1 HTML基礎(chǔ), … 超級(jí)鏈接圖片標(biāo)記,1.2 中常用標(biāo)記,：用于設(shè)置一些頭信息。 …用于定義格式。 …用于定義腳本。,1.3 中常用

8、標(biāo)記,………：各級(jí)標(biāo)題…：字體的顏色、大小…：黑體…：斜體…：下劃線(xiàn)…：斜向上表示…：斜向下表示…：無(wú)序號(hào)列表…：有序號(hào)列表,1.3 中常用標(biāo)記,…：定義段落：換行…：分區(qū)顯示…：定義表格…：定義行…：定義列…：定義表頭,1.3 中常用標(biāo)記,…定義表單 文本框 密碼框 多選框 單選框 隱藏項(xiàng)… 文本域,1.4 JavaScript編程入門(mén),1.4.2 JavaScript基本語(yǔ)

9、法,1.4.1 JavaScript簡(jiǎn)介,1.4.3 JavaScript函數(shù),1.4.4 JavaScript事件處理,1.4.5 JavaScript的對(duì)話(huà)框,1.4.1 JavaScript簡(jiǎn)介,JavaScript是一種描述式語(yǔ)言，它與HTML結(jié)合起來(lái)，用于增強(qiáng)功能，并提高與最終用戶(hù)之間的交互性能。 由Netscape公司利用Sun的Java開(kāi)發(fā)。 它是與Java完全不同的一種語(yǔ)言。雖然

10、在結(jié)構(gòu)和語(yǔ)法上與Java類(lèi)似，但是，它只是函數(shù)式的語(yǔ)言。 客戶(hù)端的JavaScript 必須要有瀏覽器的支持。,1.4.1 JavaScript簡(jiǎn)介,在網(wǎng)頁(yè)中加入JavaScript 通過(guò)在網(wǎng)頁(yè)中加入…標(biāo)記JavaScript的開(kāi)始和結(jié)束，將JavaScript代碼放到…之間。 也可以引入一個(gè)外部的JavaScript文件，這個(gè)JavaScript文件一般以.js作為擴(kuò)展名原則上，放在

11、之間。但視情況可以放在網(wǎng)頁(yè)的任何部分。 一個(gè)頁(yè)面可以有幾個(gè)… ，不同部分的方法和變量，可以共享。,1.4.2 JavaScript基本語(yǔ)法,JavaScript是一門(mén)弱類(lèi)型的語(yǔ)言，所有的變量定義均以var來(lái)實(shí)現(xiàn)。 JavaScript的變量必需先定義，再使用。 JavaScript區(qū)分大小寫(xiě)。,1.4.2 JavaScript基本語(yǔ)法,1.JavaScript基本語(yǔ)法—變量 變量定

12、義：用var來(lái)定義變量。 雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做（例12.htm）。2.JavaScript基本語(yǔ)法—數(shù)組 數(shù)組定義：var arr = new Array(3); 通過(guò)arr.length取得數(shù)組的長(zhǎng)度。 例13.htm,1.4.2 JavaScript基本語(yǔ)法,3. JavaScript基本語(yǔ)法—運(yùn)算符 算術(shù)運(yùn)算

13、 +、-、*、/（例14.htm） >、=、<=、==。 邏輯運(yùn)算 與：&& 或：|| 非：! 例15.htm,1.4.2 JavaScript基本語(yǔ)法,字符串運(yùn)算符 連接運(yùn)算：+ （例16.htm） 取子集：substring(index1,index2)（例17.htm） 條件表達(dá)式 條件?A:B(例18.htm

14、),1.4.2 JavaScript基本語(yǔ)法,4. JavaScript基本語(yǔ)法—控制語(yǔ)句if語(yǔ)句 if(條件) else if(條件1) else…(例19.htm)while語(yǔ)句 while(條件)…例20.htmswitch 語(yǔ)句 switch(i) case i1:… casei2:… default:… (例21.htm),1.4.2 JavaScript基本語(yǔ)法,for

15、 例22.htmdo…while 例23.htmwhile 例24.htm,1.4.3 JavaScript函數(shù),函數(shù)的定義 例：利用function來(lái)定義一個(gè)函數(shù)（例25.htm） 例：傳入?yún)?shù)（例26.htm） 例：傳出值（例27.htm）,1.4.4 JavaScript事件處理,onBlur：在select、text、password、texta

16、rea失去焦點(diǎn)時(shí)。onChange：在select、text、textarea的值被改變且失去焦點(diǎn)時(shí)。onClick：出現(xiàn)在一個(gè)課選對(duì)象被鼠標(biāo)選中時(shí)（button,checkbox,radio,link,reset,submit,text,textarea等）。onFocus：在用戶(hù)為了輸入而選擇select、text、textarea時(shí)onLoad：出現(xiàn)在一個(gè)文檔完成對(duì)一個(gè)窗口的載入時(shí)。,1.4.4 JavaScript事件處理

17、,onMouseOver：鼠標(biāo)被移動(dòng)到一個(gè)超連接上時(shí)。onMouseOut：鼠標(biāo)從一個(gè)超連接上移開(kāi)時(shí)。onSelect：當(dāng)form對(duì)象中的內(nèi)容被選中時(shí)。onSubmit：出現(xiàn)在用戶(hù)通過(guò)提交按鈕提交一個(gè)表格時(shí)。onUnload：當(dāng)用戶(hù)退出一個(gè)文檔時(shí)。,1.4.5 JavaScript的對(duì)話(huà)框,警告框(alert)：出現(xiàn)一個(gè)提示信息。例28.htm詢(xún)問(wèn)框(prompt)：返回輸入的值。例29.htm確認(rèn)框(confirm)

18、：根據(jù)不同的選擇，返回true/false。例30.htm,1.5 窗口中的對(duì)象和元素,window 當(dāng)前窗口 新開(kāi)窗口（例b1.htm） 通過(guò)本地窗口控制新開(kāi)窗口（例b2.htm）location 獲取或設(shè)置現(xiàn)有文檔的URL（例b3.htm /例b4.htm / 例b5.htm ）,1.5 窗口中的對(duì)象和元素,history 先前訪(fǎng)問(wèn)過(guò)的UR

19、L的歷史列表（例b5.htm/例b6.htm） 常用方法：back()，go(number)document 當(dāng)前的文檔對(duì)象 document.write() document.formName(),HTML基本結(jié)構(gòu)標(biāo)記：INPUT、RADIO、SELECT、TEXTAREA、CHECKBOX、BUTTON、SUBMIT、RESET、HIDDEN將JavaScript

20、嵌入到HTML頁(yè)面、注釋、變量定義、流程控制、循環(huán)、函數(shù)定義JavaScript內(nèi)置對(duì)象及DOM結(jié)構(gòu)JavaScript 對(duì)話(huà)框alert、confirm、prompt,本章小結(jié),JavaScript事件處理：onLoad、onFocus、onBlur、onclick、onChange、onSelect、onSubmit表單驗(yàn)證,本章小結(jié),設(shè)計(jì)：在線(xiàn)報(bào)名頁(yè)面制作及驗(yàn)證 要求： 使用HTML與CSS樣