avaWeb應(yīng)用開(kāi)發(fā)ppt課件(完整版)

1、Java Web應(yīng)用開(kāi)發(fā)第一章 WEB應(yīng)用開(kāi)發(fā)概述 目標(biāo)了解WEB應(yīng)用體系結(jié)構(gòu) 掌握J(rèn)AVA WEB 開(kāi)發(fā)環(huán)境安裝與配置 1.1 B/S結(jié)構(gòu)編程技術(shù)1ASP技術(shù) ASP技術(shù)是微軟公司早期推出的B/S編程技術(shù) 2ASP.NET技術(shù) ASP.NET是微軟最新的B/S編程技術(shù)，ASP.NET可以用三種語(yǔ)言來(lái)編寫(xiě)：VB.NET、C#.NET、VJ#.NET。3JSP技術(shù) JSP技術(shù)是SUN公司推出的B/S編程技術(shù) .本書(shū)主要介紹JSP及相關(guān)技術(shù) 4PHP技術(shù) PHP是免費(fèi)的技術(shù)，與其配套的數(shù)據(jù)庫(kù)MySQL及操作系統(tǒng)Linux也都是免費(fèi)的 .1.2 WEB應(yīng)用體系結(jié)構(gòu)1靜態(tài)網(wǎng)頁(yè) 靜態(tài)網(wǎng)頁(yè)文件中沒(méi)有程序代

2、碼，只有HTML標(biāo)記，一般以后綴.html或htm保存，開(kāi)發(fā)工具可以是任何純文本編程器（如記事本） ，下圖是靜態(tài)網(wǎng)頁(yè)工作原理示意圖1.2 WEB應(yīng)用體系結(jié)構(gòu)2動(dòng)態(tài)網(wǎng)頁(yè) 所謂動(dòng)態(tài)網(wǎng)頁(yè)，就是服務(wù)器端可以根據(jù)客戶端的不同請(qǐng)求動(dòng)態(tài)產(chǎn)生網(wǎng)頁(yè)內(nèi)容 ,支持客戶端和服務(wù)器端的交互功能 ,下圖是動(dòng)態(tài)網(wǎng)頁(yè)的體系結(jié)構(gòu)。3三層/N層WEB應(yīng)用結(jié)構(gòu) 在構(gòu)建企業(yè)級(jí)應(yīng)用時(shí)，通常需要大量的代碼，這些代碼一般可以在邏輯上（在同一機(jī)器）或物理上（在不同機(jī)器）劃分為不同層次，下圖是三層B/S結(jié)構(gòu)。在三層結(jié)構(gòu)中，每二層之間都可以添加服務(wù)層從而構(gòu)建N層結(jié)構(gòu)。 1.2 WEB應(yīng)用體系結(jié)構(gòu)1.3 JAVA WEB 開(kāi)發(fā)環(huán)境安裝與配置 Ja

3、va Web應(yīng)用開(kāi)發(fā)需要運(yùn)行環(huán)境和開(kāi)發(fā)工具，運(yùn)行環(huán)境包括JRE（Java Runtime Environment）和Servlet容器（WEB應(yīng)用服務(wù)器） 。 Java Web開(kāi)發(fā)工具很多，但在企業(yè)中用得較多的主要有Eclipse和NetBean等免費(fèi)工具 1.下載并安裝JDK建議到/technetwork/java/javase/downloads/index.html下載Java SE Development Kit (JDK) 7.0或其他版本 2.下載并安裝TOMCAT 不同版本的Tomcat可以到其官方網(wǎng)站下載，你可以下載Tomcat6.0或Toncat7.0 3. 下載MyEcli

4、pse在MyEclipse官方網(wǎng)站/，你可下載MyEclipse 各種版本的安裝包（目前最新的版本是MyEclipse9.0） Java Web應(yīng)用開(kāi)發(fā)第二章 Java Web編程基礎(chǔ) 目標(biāo)掌握HTML的基本元素掌握HTML的table元素掌握HTML的form元素理解JavaScript的基本原理。掌握J(rèn)avaScript的基本語(yǔ)法。理解JavaScript事件機(jī)制。掌握CSS基本原理掌握CSS在布局中的應(yīng)用 基本概念HTTP-HyperText Transfer Protocol：超文本傳輸協(xié)議HTML-HyperText Markup Language：超文本標(biāo)記語(yǔ)言FTP-File T

5、ransfer Protocol：文件傳輸協(xié)議URL-Uniform Resource Locators：統(tǒng)一資源定位器2.1 HTML基礎(chǔ)源文件：HelloWorld.html 測(cè)試 你好，這是我的web測(cè)試！第一個(gè)HTML程序2.1 HTML基礎(chǔ)SampleHTML基本框架2.1 HTML基礎(chǔ)Head中常用元素：用于設(shè)置一些頭信息用于定義樣式用于定義腳本2.1 HTML基礎(chǔ)：各級(jí)標(biāo)題：字體的顏色、大?。汉隗w：斜體：下劃線：斜向上表示：斜向下表示：無(wú)序號(hào)列表：有序號(hào)列表：定義段落：換行：分區(qū)顯示文本格式化2.1 HTML基礎(chǔ)鏈接文字或者圖片顯示圖片與超鏈接標(biāo)記HTML表格 ：定義表格：定義行

6、：定義列：定義表頭Table標(biāo)記常用屬性：width：width屬性用于定義表格的寬度height：height屬性用于定義表格的高度border：border屬性用于定義表格的邊框的寬度，默認(rèn)為0，也就是沒(méi)有邊框；bgcolor：定義表格的背景色。2.1 HTML基礎(chǔ)2.2表單（FORM） 文本框 密碼框 多選框 單選框 隱藏項(xiàng) 文本域 列表項(xiàng) 列表框文件上傳框HTML表單標(biāo)記2.3 JavaScript JavaScript 是一種腳本語(yǔ)言,可以嵌入到HTML中,主要用于網(wǎng)頁(yè)動(dòng)態(tài)效果和HTML客戶端表單驗(yàn)證客戶端的JavaScript 必須要有瀏覽器的支持通過(guò)在網(wǎng)頁(yè)中加入標(biāo)記引入外部的以.

7、js作為擴(kuò)展名JavaScript文件一個(gè)頁(yè)面可以有多個(gè) ，不同部分的方法和變量，可以共享。 document.write(“第一個(gè) JavaScript 頁(yè)面);在網(wǎng)頁(yè)中加入JavaScript2.3JavaScript 例2-8：在HTML中嵌入JavaScript源文件：javascriptTest_1.html 在HTML中嵌入JavaScript document.write(這是javascript輸出的內(nèi)容!)；1注釋 在JavaScript中采用和Java中類似的注釋方式：?jiǎn)涡凶⑨層谩?”，多行注釋用“/*”和“*/”括起來(lái)： /單行注釋 /* 多行注釋和Java中類似 */2

8、.3 .1 JavaScript基本語(yǔ)法 2.變量定義：(1)用var來(lái)定義簡(jiǎn)單變量例如：var age；age=100+10；/先定義后使用username=Alex Wen；/直接使用雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做2.3 .1 JavaScript基本語(yǔ)法(2)數(shù)組定義 var 數(shù)組名= new Array(數(shù)組長(zhǎng)度) 例如：var arr = new Array(3);數(shù)組元素可以通過(guò)下標(biāo)訪問(wèn)例如： arr0=20;通過(guò)arr.length可以取得數(shù)組的長(zhǎng)度2.3 .1 JavaScript基本語(yǔ)法3.運(yùn)算符 算術(shù)運(yùn)算： +、-、*、/ 關(guān)系運(yùn)算符：

9、 、=、=、= 邏輯運(yùn)算：&（與） |(或) !(非) 字符串運(yùn)算符： 連接運(yùn)算：+ 條件表達(dá)式：條件?A:B2.3 .1 JavaScript基本語(yǔ)法4.流程控制語(yǔ)句(if) if(條件表達(dá)式) statement； else if(條件表達(dá)式) statement； else statement; 2.3 .1 JavaScript基本語(yǔ)法5.循環(huán)語(yǔ)句 (1)for語(yǔ)句的基本格式如下： for (initialization; test; increment) statements (2)while循環(huán)的基本格式如下： while (expression) statements 2.3 .

10、1 JavaScript基本語(yǔ)法(3) dowhile循環(huán)的基本格式如下： do statements while (expression) ; (4)遍歷數(shù)組或者對(duì)象的屬性 for (variable in object | array) statements 2.3 .1 JavaScript基本語(yǔ)法例2-9： 使用 for . in 循環(huán)遍歷數(shù)組源文件：scriptTest_2.htm for.in循環(huán) 下面是script輸出結(jié)果： var a,i; / 初始化數(shù)組 a = new Array(電子系,計(jì)算機(jī)系,材料工程系); / 迭代數(shù)組 for (i in a) document.w

11、rite(ai+); 2.3 .1 JavaScript基本語(yǔ)法6.函數(shù) 函數(shù)的定義語(yǔ)法格式如下： function (參數(shù)列表) 函數(shù)體; return 表達(dá)式; 例如： function cal(a,b) return a+b： 2.3 .1 JavaScript基本語(yǔ)法2.3.2 JavaScript常用內(nèi)置對(duì)象1window對(duì)象: window對(duì)象表示的是一個(gè)和瀏覽器相關(guān)的最高級(jí)對(duì)象 .Window對(duì)象最常用的地方在于從一個(gè)窗口中新開(kāi)一個(gè)窗口，它的基本語(yǔ)法如下：NewWindow=window.open(url，windowName,windowPros)；其中：newWindow為表

12、示這個(gè)新開(kāi)窗口對(duì)象的變量名稱；url是這個(gè)新開(kāi)窗口所引用的url； windowPros為新開(kāi)窗口的屬性，可以取下面各值：Toolbar：用于指明新開(kāi)窗口是否需要標(biāo)準(zhǔn)工具欄；status：用于指明新開(kāi)窗口是否需要狀態(tài)條；menubar用于指明新開(kāi)窗口是否需要菜單欄；scrollbar：用于指明當(dāng)新開(kāi)窗口中的文檔的內(nèi)容超出窗口大小的時(shí)候是否需要滾動(dòng)條；resizable：是否允許改變新開(kāi)窗口的大??；width：指定新開(kāi)窗口的寬度；height：指定新開(kāi)窗口的高度；top：指定新開(kāi)窗口距離電腦屏幕上方的像素；left：指定新開(kāi)窗口距離電腦屏幕左邊的像素。例2-10：用window.open()打開(kāi)

13、一個(gè)新窗口源文件：windowOpen.htm 父窗口 function createNewWindow(url) /打開(kāi)一個(gè)新的窗口，窗口內(nèi)容由url參數(shù)決定 window.open(url, width=300,height=120,toolbar=no,resizable=no,top=100,left=100); 2.3.2 JavaScript常用內(nèi)置對(duì)象2document對(duì)象：document對(duì)象包含當(dāng)前文檔的信息。常用方法：write()/writeln()/在瀏覽器中輸出動(dòng)態(tài)內(nèi)容 ；getElementById() /在文檔中通過(guò)html元素的ID屬性查找html元素對(duì)象；ge

14、tElementsByTagName() /在文檔中通過(guò)html元素的NAME屬性查找html元素對(duì)象；2.3.2 JavaScript常用內(nèi)置對(duì)象3form對(duì)象：Form對(duì)象是document下的一個(gè)子對(duì)象，表示表單對(duì)象 ?？梢允褂胐ocument.formName或者document.formsindex的方式來(lái)獲得對(duì)某個(gè)form的引用 ； 得到指定的form對(duì)象后，就可以使用它來(lái)獲得form中的各個(gè)表單元素，例如：document.myForm.myText表示myForm表單中的myText這個(gè)表單元素 。 關(guān)于HTML元素的引用請(qǐng)參考例2-11 -例2-1132.3.2 JavaSc

15、ript常用內(nèi)置對(duì)象2.3.3 JavaScript的對(duì)話框警告框(alert)：用于顯示JavaScfipt的警告對(duì)話框;例2-14 詢問(wèn)框(prompt)：用于接收用戶輸入的詢問(wèn)對(duì)話框，返回輸入的值；例2-15 確認(rèn)框(confirm)：用于顯示javascript確認(rèn)對(duì)話框，返回true/false例2-162.3.4JavaScript事件處理1窗口文檔事件 onLoad：出現(xiàn)在一個(gè)文檔完成對(duì)一個(gè)窗口的載入時(shí)。 例2-17 2焦點(diǎn)事件onfocus和 onblur當(dāng)光標(biāo)的焦點(diǎn)移到頁(yè)面的某些元素時(shí)，將會(huì)發(fā)生“聚焦事件(onfocus)”，失去焦點(diǎn)的元素將發(fā)生“失去焦點(diǎn)事件（onblur）

16、” 。 例2-18 -例2-193單擊事件（onclick） 當(dāng)在某個(gè)表單元素上單擊的時(shí)候，將會(huì)發(fā)生點(diǎn)擊(click)事件 。 例2-20 4內(nèi)容改變事件(onchange) 當(dāng)某些表單的內(nèi)容發(fā)生改變的時(shí)候，將發(fā)生“（內(nèi)容）改變”事件(onchange) 例2-21 5選擇事件（onselect） 當(dāng)選中表單元素中的文本內(nèi)容時(shí)，將會(huì)發(fā)生“選擇(onselect)”事件 。 例2-22 6提交事件(onsubmit) 當(dāng)表單提交的時(shí)候，會(huì)發(fā)生“表單提交”事件 例2-23 7鼠標(biāo)事件（onMouseOver / onMouseOut） 當(dāng)鼠標(biāo)移到某個(gè)對(duì)象上時(shí)，該對(duì)象會(huì)觸發(fā)onMouseOver事件

17、，當(dāng)鼠標(biāo)移開(kāi)某個(gè)對(duì)象上時(shí)會(huì)觸發(fā)onMouseOut事件。 例2-24 2.3.4JavaScript事件處理2.4JavaScript正則表達(dá)式 一個(gè)正則表達(dá)式就是由普通字符（例如字符 a 到 z）以及特殊字符（稱為元字符）組成的文字模式。該模式描述在查找文字主體時(shí)待匹配的一個(gè)或多個(gè)字符串。正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。 在JavaScript中，正則表達(dá)式主要應(yīng)用于表單數(shù)據(jù)的客戶端驗(yàn)證。例如：校驗(yàn)登錄名：只能輸入5-20個(gè)以字母開(kāi)頭、可帶數(shù)字、“_”、“.”的字符串 function isRegisterUserName(s)var patrn= /a-zA

18、-Z1(a-zA-Z0-9|._ )4,19$/; if (!patrn.exec(s) return false;elsereturn true ; 定位符限定符操作符元字符1建立正則表達(dá)式 構(gòu)造正則表達(dá)式的方法和創(chuàng)建數(shù)學(xué)表達(dá)式的方法一樣。也就是用多種元字符與操作符將小的表達(dá)式結(jié)合在一起來(lái)創(chuàng)建更大的表達(dá)式?？梢酝ㄟ^(guò)在一對(duì)分隔符之間放入表達(dá)式模式的各種組件來(lái)構(gòu)造一個(gè)正則表達(dá)式。對(duì) JavaScript 而言，分隔符為一對(duì)正斜杠 （ / ） 字符。 例如：/s t*$/ 用于匹配一個(gè)空白行。/a-z/ 用于匹配任何從小寫(xiě) a 到小寫(xiě) z 的字符。2.4.1正則表達(dá)式基本語(yǔ)法2正則表達(dá)式中的特殊字

19、符-元字符參考教材中的表2-12.4.1正則表達(dá)式基本語(yǔ)法3限定符 正則表達(dá)式支持限定符的概念。這些限定符可以指定正則表達(dá)式的一個(gè)給定組件必須要出現(xiàn)多少次才能滿足匹配。下表給出了各種限定符及其含義的說(shuō)明：字符描述*匹配前面的子表達(dá)式零次或多次。例如，zo* 能匹配 z 以及 zoo。 * 等價(jià)于0,。 + 匹配前面的子表達(dá)式一次或多次。例如，zo+ 能匹配 zo 以及 zoo，但不能匹配 z。+ 等價(jià)于 1,。 ? 匹配前面的子表達(dá)式零次或一次。例如，do(es)? 可以匹配 do 或 does 中的do 。? 等價(jià)于 0,1。nn 是一個(gè)非負(fù)整數(shù)。匹配確定的 n 次。例如，o2 不能匹配 B

20、ob 中的 o，但是能匹配 food 中的兩個(gè) o。 n,n 是一個(gè)非負(fù)整數(shù)。至少匹配n 次。例如，o2, 不能匹配 Bob 中的 o，但能匹配 foooood 中的所有 o。o1, 等價(jià)于 o+。o0, 則等價(jià)于 o*。 n,mm 和 n 均為非負(fù)整數(shù)，其中n = m。最少匹配 n 次且最多匹配 m 次。劉， o1,3 將匹配 fooooood 中的前三個(gè) o。o0,1 等價(jià)于 o?。請(qǐng)注意在逗號(hào)和兩個(gè)數(shù)之間不能有空格。 2.4.1正則表達(dá)式基本語(yǔ)法4定位符 定位符可以將一個(gè)正則表達(dá)式固定在一行的開(kāi)始或結(jié)束。也可以創(chuàng)建只在單詞內(nèi)或只在單詞的開(kāi)始或結(jié)尾處出現(xiàn)的正則表達(dá)式。下表包含了正則表達(dá)式中

21、定位符及其含義的列表：字符描述 匹配輸入字符串的開(kāi)始位置。如果設(shè)置了 RegExp 對(duì)象的 Multiline 屬性， 也匹配 n 或 r 之后的位置。 $ 匹配輸入字符串的結(jié)束位置。如果設(shè)置了RegExp 對(duì)象的 Multiline 屬性，$ 也匹配 n 或 r 之前的位置。 b 匹配一個(gè)單詞邊界，也就是指單詞和空格間的位置。 B 匹配非單詞邊界。2.4.1正則表達(dá)式基本語(yǔ)法2.4.2Javascript正則表達(dá)式對(duì)象1創(chuàng)建正則表達(dá)式對(duì)象 創(chuàng)建正則表達(dá)式對(duì)象有兩種語(yǔ)法格式： 語(yǔ)法1： re = /pattern/flags 語(yǔ)法2： re = new RegExp(pattern,flags

22、) 其中： re ：必選項(xiàng)。將要賦值為正則表達(dá)式模式的變量名，它保存正則表達(dá)式對(duì)象。 pattern：必選項(xiàng)。要使用的正則表達(dá)式模式。 如果使用語(yǔ)法 1，用 “/” 字符分隔模式。如果用語(yǔ)法2，用引號(hào)將模式引起來(lái)。 flags：可選項(xiàng) ，可用的有： g ：（全文查找出現(xiàn)的所有 pattern） i ：（忽略大小寫(xiě)） m ：（多行查找） 2正則表達(dá)式對(duì)象常用方法（1）exec方法 用正則表達(dá)式模式在字符串中運(yùn)行查找，并返回包含該查找結(jié)果的一個(gè)數(shù)組 。例：2-25 說(shuō)明了exec（）方法的使用。（2）test方法 返回一個(gè) Boolean 值，它指出在被查找的字符串中是否存在模式 。2.4.2Ja

23、vascript正則表達(dá)式對(duì)象1校驗(yàn)是否全由數(shù)字組成 function isDigit(s) var patrn=/0-91,20$/; if (!patrn.exec(s) return false else return true 說(shuō)明：在JavaScript中，空值（NULL）和非空可以用來(lái)在條件表達(dá)式中表示“false”和“true”。exec（）方法本來(lái)是返回一個(gè)數(shù)組，當(dāng)數(shù)組為空（NULL）時(shí)代表“false”，說(shuō)明字符串（s）與正則表達(dá)式模式不匹配，否則代表“true”。當(dāng)然這里也可以用test()方法。2.4.3常用正則表達(dá)式2校驗(yàn)登錄名：只能輸入5-20個(gè)以字母開(kāi)頭、可帶數(shù)字、

24、“_”、“.”的字符串 function isRegisterUserName(s)var patrn=/a-zA-Z1(a-zA-Z0-9|._ )4,19$/; if (!patrn.exec(s) return false;elsereturn true 正則表達(dá)式的使用請(qǐng)參考例2-29(驗(yàn)證表單)2.4.3常用正則表達(dá)式2.5 CSS樣式表基礎(chǔ)251 CSS基本概念 CSS是層疊樣式表（Cascading Style Sheets）的縮寫(xiě)，是一種用于為HTML文檔定義布局的樣式表語(yǔ)言。 CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級(jí)定位等 2.5.2 CSS基本語(yǔ)法CSS 規(guī)則

25、由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。selector declaration1; declaration2; . declarationN 例如：h1 color:red; font-size:14px; 選擇器（selector）通常是需要改變樣式的 HTML 元素。 聲明（declaration）由一個(gè)屬性和一個(gè)值組成。2.5.3 在HTML文檔中應(yīng)用CSS1內(nèi)聯(lián)樣式表：內(nèi)聯(lián)樣式表是使用HTML元素的style屬性。Style屬性可以應(yīng)用于任意body元素(包括body本身)。例如： 例子 這一段是紅色的 2.5.3 在HTML文檔中應(yīng)用CSS2內(nèi)部樣式表：內(nèi)部樣式表是采用H

26、TML元素style把樣式表的內(nèi)容定義在HTML文件的標(biāo)記內(nèi)。 例子 body background-color: #FF0000;這個(gè)頁(yè)面是紅色的2.5.3 在HTML文檔中應(yīng)用CSS3外部樣式表（引用一個(gè)樣式表文件）外部樣式表是一個(gè)擴(kuò)展名為.css的文本文件-樣式表文件 。引用方法：在HTML文件的區(qū)域內(nèi)使用標(biāo)記進(jìn)行鏈接，語(yǔ)法格式如下：其中url為樣式表文件的地址，可以是相對(duì)地址，也可以是絕對(duì)地址。2.5.4 CSS高級(jí)語(yǔ)法1選擇器的分組：定義選擇器時(shí)，可以對(duì)選擇器進(jìn)行分組 。例如： h1,h2,h3,h4,h5,h6 color: green; 2派生選擇器：派生選擇器允許根據(jù)文檔的上下

27、文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式 。例如： li strong font-style: italic; font-weight: normal; /該樣式只作用于標(biāo)記內(nèi)的3類選擇器:在定義類選擇器時(shí)，在自定義類名稱前面加上一句點(diǎn)“.”。語(yǔ)法格式如下：標(biāo)記名.類名 declaration1; declaration2; . declarationN 例如：p.red color: redp.blue color:blue.center text-align: center 其中： red、blue和center稱為類選擇器。red和blue這兩個(gè)類選擇器只能用于段落標(biāo)記p，而center類選擇器可以用

28、于任何HTML元素。2.5.4 CSS高級(jí)語(yǔ)法4id 選擇器id 選擇器可以為指定特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 # 來(lái)定義。語(yǔ)法格式如下：標(biāo)記名# id選擇器名 declaration1; declaration2; . declarationN 例如：#red color:red;#green color:green;注意：同一個(gè)id 屬性在同一個(gè)HTML 文檔中只能出現(xiàn)一次，因?yàn)樵贖TML文檔中，ID屬性必須具有唯一性。2.5.4 CSS高級(jí)語(yǔ)法5.偽類 :偽類（pseudo-class）可以在為HTML元素定義CSS屬性的時(shí)候?qū)l件和事件考慮在內(nèi) .例如

29、： a:link color: blue; /偽類:link用于瀏覽者從未訪問(wèn)過(guò)的鏈接 a:visited color: red; /偽類:visited用于瀏覽者已訪問(wèn)過(guò)的鏈接 a:active background-color: #FFFF00; /偽類:active用于活動(dòng)的鏈接 a:hover color: orange; font-style: italic; /偽類:hover用于有鼠標(biāo)懸停的鏈接 2.5.4 CSS高級(jí)語(yǔ)法2.5.5 CSS 樣式屬性1CSS 背景屬性:CSS 背景屬性用于改變?cè)氐谋尘吧驶虮尘皥D片 ，參考表2-42CSS字體屬性：字體屬性用于定義文本的字體系列

30、、大小、加粗、風(fēng)格 ， 參考表2-53CSS文本屬性：文本屬性用于定義文本的外觀，如文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)等等 ， 參考表2-64CSS列表屬性：列表屬性用于設(shè)置、改變列表項(xiàng)標(biāo)志 ， 參考表2-7 5CSS邊框?qū)傩裕哼吙驅(qū)傩杂糜谠O(shè)置元素邊框的樣式、寬度和顏色 ，參考表2-72.5.6 CSS 盒狀模型1CSS盒狀模型 CSS盒狀模型（box model，也有稱之為框模型）用于描述一個(gè)HTML元素形成的矩形盒子(任何一個(gè)HTML元素都是一個(gè)矩形盒子)。盒狀模型為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊距（padding）等 2CSS邊距屬性

31、 邊距屬性用來(lái)設(shè)置元素的內(nèi)邊距和外邊距 。CSS邊距屬性、作用、語(yǔ)法及示例參考表2-9 2.5.6 CSS 盒狀模型例2-26設(shè)置邊框、邊距 css框模型 p /*定義段落背景 */ background-color:blue ; /*定義字體大小 */ font-size: 20px; /*定義邊框?yàn)榧t色雙粗線 */ border: thick double red;/* 內(nèi)邊距都為100px */padding: 100px; /*上、下外邊距為20px，左右外邊距為80px */ margin: 20px 80px ; 這里的文本位于框中 2.5.6 CSS 盒狀模型2.5.7 CSS

32、定位CSS 定位機(jī)制 CSS 有三種基本的定位機(jī)制：普通流（默認(rèn)）、浮動(dòng)（float）和定位 (position)定位又可以分為：絕對(duì)定位（absolute ）和相對(duì)定位（relative ）CSS定位的原理 把瀏覽器窗口想象成一個(gè)坐標(biāo)系統(tǒng)；可以將任何盒子（box）放置在坐標(biāo)系統(tǒng)的任何位置上。 2.5.7 CSS 定位1.普通流: 如果沒(méi)有特別指定，所有框都在普通流中定位，普通流中的元素的位置由元素在 (X)HTML 中的位置決定 2.浮動(dòng):可以通過(guò)CSS屬性float令元素向左或向右浮動(dòng)。也就是說(shuō)，令盒子及其中的內(nèi)容浮動(dòng)到文檔（或者是上層盒子）的右邊或者左邊 由于浮動(dòng)框不在文檔的普通流中，所

33、以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣，右圖是浮動(dòng)示意圖 浮動(dòng)的應(yīng)用案例：假如我們想讓一張圖片被一段文字圍繞著，那么其顯示效果將如下所示： causas naturales et antecedentes, idciro etiam nostrarum voluntatum. #picture float:left; width: 100px; 2.5.7 CSS 定位2.5.7 CSS 定位3絕對(duì)定位:絕對(duì)定位的元素框從文檔流中完全刪除，并相對(duì)于其包含塊定位 .要對(duì)元素進(jìn)行絕對(duì)定位，應(yīng)將position屬性的值設(shè)為absolute 。下圖是絕對(duì)定位示意圖例2-27絕對(duì)定位的應(yīng)用 c

34、ss框模型 div background-color:gray; border: thick solid red; margin: 0; width: 200px; height:50px;position:absolute; top:0; left:0; 這是div內(nèi)容 2.5.7 CSS 定位4相對(duì)定位:采用相對(duì)定位的元素，其位置是相對(duì)于它在文檔中的原始位置計(jì)算而來(lái)的。通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng) 。要對(duì)元素進(jìn)行相對(duì)定位，應(yīng)將position屬性的值設(shè)為relative 2.5.7 CSS 定位5定位與布局屬性 與定位有關(guān)的CSS樣式屬性請(qǐng)參考教材中的表2-

35、10。26 實(shí)用案例 參考教材的代碼，用div+css完成右圖界面布局設(shè)計(jì)2.5.7 CSS 定位Java Web應(yīng)用開(kāi)發(fā)中國(guó)水利水電出版社第三章 JDBC數(shù)據(jù)庫(kù)編程長(zhǎng)沙民政職業(yè)技術(shù)學(xué)院WEB應(yīng)用開(kāi)發(fā)精品課程本章任務(wù)使用JDBC實(shí)現(xiàn)學(xué)生信息的增刪改查（以下為學(xué)生信息表結(jié)構(gòu)）字段名字段說(shuō)明字段類型其 他sno學(xué)號(hào)char(14)主鍵sname姓名char(10)非空sage年齡integerssex性別char(2)spe_id專業(yè)編號(hào)char(4)phote照片longBlob本章目標(biāo)JDBC概念和特點(diǎn)JDBC體系結(jié)構(gòu)JDBC URLODBC數(shù)據(jù)源配置JDBC數(shù)據(jù)庫(kù)開(kāi)發(fā)環(huán)境配置JDBC訪問(wèn)數(shù)據(jù)

36、庫(kù)的基本步驟常用的JDBC類與方法JDBC是Java數(shù)據(jù)庫(kù)連接技術(shù)的簡(jiǎn)稱，提供連接各種常用數(shù)據(jù)庫(kù)的能力311 JDBC的概念及特點(diǎn)Java應(yīng)用程序JDBCJDBCJSP/Servlet客戶端數(shù)據(jù)庫(kù)服務(wù)器應(yīng)用服務(wù)器數(shù)據(jù)庫(kù)服務(wù)器客戶端JDBC API提供者：Sun公司內(nèi)容：供程序員調(diào)用的接口與類，集成在java.sql和javax.sql包中，如：DriverManager類Connection接口Statement接口ResultSet接口DriverManager提供者：Sun公司作用：管理各種不同的JDBC驅(qū)動(dòng)JDBC 驅(qū)動(dòng)提供者：數(shù)據(jù)庫(kù)廠商作用：負(fù)責(zé)連接各種不同的數(shù)據(jù)庫(kù)312 JDBC體系

37、結(jié)構(gòu)Sql ServerOracleJDBC API JDBC Driver Manager JDBC 驅(qū)動(dòng) JDBC 驅(qū)動(dòng) Java 應(yīng)用程序 JDBC API可做三件事：1與數(shù)據(jù)庫(kù)建立連接、2執(zhí)行SQL 語(yǔ)句、3處理結(jié)果DriverManager ：依據(jù)數(shù)據(jù)庫(kù)的不同，管理JDBC驅(qū)動(dòng)Connection ：負(fù)責(zé)連接數(shù)據(jù)庫(kù)并擔(dān)任傳送數(shù)據(jù)的任務(wù) Statement ：由 Connection 產(chǎn)生、負(fù)責(zé)執(zhí)行SQL語(yǔ)句ResultSet：負(fù)責(zé)保存Statement執(zhí)行后所產(chǎn)生的查詢結(jié)果JDBC APIConnectionDriverManagerStatementResultSet客戶端數(shù)據(jù)庫(kù)服

38、務(wù)器1234JDBC驅(qū)動(dòng)由數(shù)據(jù)庫(kù)廠商提供在個(gè)人開(kāi)發(fā)與測(cè)試中，可以使用JDBC-ODBC橋連方式在生產(chǎn)型開(kāi)發(fā)中，推薦使用純Java驅(qū)動(dòng)方式313 JDBC的種類DB ServerDBServerJDBC APIJDBC Driver Manager純Java 驅(qū)動(dòng) JDBCODBC橋Java 應(yīng)用程序 ODBC使用JDBC-ODBC橋方式連接數(shù)據(jù)庫(kù)將對(duì)JDBC API的調(diào)用，轉(zhuǎn)換為對(duì)另一組數(shù)據(jù)庫(kù)連接API的調(diào)用優(yōu)點(diǎn)：可以訪問(wèn)所有ODBC可以訪問(wèn)的數(shù)據(jù)庫(kù)缺點(diǎn)：執(zhí)行效率低、功能不夠強(qiáng)大JDBC-ODBC橋Java 應(yīng)用程序 JDBC APIODBC APIODBC層DBServer313 JDBC的

39、種類使用純Java方式連接數(shù)據(jù)庫(kù) 由JDBC驅(qū)動(dòng)直接訪問(wèn)數(shù)據(jù)庫(kù)優(yōu)點(diǎn)：100% Java，快又可跨平臺(tái)缺點(diǎn)：訪問(wèn)不同的數(shù)據(jù)庫(kù)需要下載專用的JDBC驅(qū)動(dòng)JDBC 驅(qū)動(dòng) Java 應(yīng)用程序 JDBC API DBServer313 JDBC的種類314 JDBC URLJDBC URL提供了一種標(biāo)識(shí)數(shù)據(jù)庫(kù)的方法，可以使相應(yīng)的驅(qū)動(dòng)程序能夠識(shí)別該數(shù)據(jù)庫(kù)并與它建立連接。標(biāo)準(zhǔn)的JDBC URL的格式如下： jdbc:JDBC URL由三個(gè)部分組成，各個(gè)部分之間用冒號(hào)分隔。是指數(shù)據(jù)庫(kù)連接的方式。可以根據(jù)子協(xié)議的改變而變化。（1）Oracle(thin連接方式)jdbc:oracle:thin:服務(wù)器名/IP地

40、址:1521:數(shù)據(jù)庫(kù)實(shí)例名（2）SQL Server 2000jdbc:microsoft:sqlserver:/ 服務(wù)器名/IP地址:1433;databaseName=數(shù)據(jù)庫(kù)名（3）SQL Server 2005jdbc:sqlserver:/ 服務(wù)器名/IP地址:1433;databaseName=數(shù)據(jù)庫(kù)名（4）MySQLjdbc:mysql:/ 服務(wù)器名/IP地址:3306/數(shù)據(jù)庫(kù)名（5）JDBC-ODBC橋jdbc:odbc:mydb ;user=用戶名;password=密碼（數(shù)據(jù)源名稱：mydb）315 ODBC數(shù)據(jù)源配置（1）在Access中創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)（2）進(jìn)入ODBC數(shù)據(jù)

41、源配置程序315 ODBC數(shù)據(jù)源配置（3）創(chuàng)建新的數(shù)據(jù)源（4）為新數(shù)據(jù)源命名316 JDBC數(shù)據(jù)庫(kù)開(kāi)發(fā)環(huán)境配置（1）安裝并配置數(shù)據(jù)庫(kù)（2）下載相關(guān)驅(qū)動(dòng)程序（3）設(shè)置驅(qū)動(dòng)程序類路徑（4）創(chuàng)建數(shù)據(jù)庫(kù)和表（5）輸入測(cè)試用數(shù)據(jù)321 JDBC訪問(wèn)數(shù)據(jù)庫(kù)的基本步驟1加載JDBC驅(qū)動(dòng)程序Class.forName(DriverName);2創(chuàng)建數(shù)據(jù)庫(kù)連接Connection conn=DriverManager.getConnection(String url,String user,String password);3創(chuàng)建Statement對(duì)象Statement smt=conn.createState

42、ment()；4執(zhí)行SQL語(yǔ)句，返回結(jié)果集對(duì)象ResultSetResultSet rs=smt.executeQuery(SELECT * FROM students)；5處理SQL的返回結(jié)果String studentName=rs.getString(“sno”);/按列名取值或:rs.getString(1);/按索引號(hào)取值6關(guān)閉創(chuàng)建的各個(gè)對(duì)象conn.close();例3-1：創(chuàng)建數(shù)據(jù)庫(kù)連接類，并測(cè)試連接是否成功源程序Test.javapackage com.csmy;import java.sql.*;public class Test public static void mai

43、n(String args) Connection conn=null; try conn=Dbconn.getconn();/利用連接類的靜態(tài)方法獲得連接 if(conn!=null)/獲取連接對(duì)象成功 System.out.print(恭喜你,你已成功連接到MySQL數(shù)據(jù)庫(kù)); catch (SQLException e) e.printStackTrace(); 例3-2： 查詢studens表中所有數(shù)據(jù)，并打印出來(lái)。322常用的JDBC類與方法1DriverManager類2Connection接口（1）Statement createStatement() （2）PreparedSt

44、atement prepareStatement(String sql) （3）CallableStatement prepareCall(call stored_proc)（4）void close()（5）boolean isClosed()Statement接口常用方法方法名說(shuō) 明ResultSet executeQuery(String sql)執(zhí)行SQL查詢并獲取到ResultSet對(duì)象int executeUpdate(String sql)可以執(zhí)行插入、刪除、更新等操作，返回值是執(zhí)行該操作所影響的行數(shù)boolean execute(String sql) 可以執(zhí)行任意SQL語(yǔ)句，

45、然后獲得一個(gè)布爾值，表示是否返回ResultSetResultSet接口常用方法方法名說(shuō) 明boolean next()將光標(biāo)從當(dāng)前位置向下移動(dòng)一行boolean previous()游標(biāo)從當(dāng)前位置向上移動(dòng)一行void close()關(guān)閉ResultSet 對(duì)象int getInt(int colIndex)以int形式獲取結(jié)果集當(dāng)前行指定列號(hào)值int getInt(String colLabel)以int形式獲取結(jié)果集當(dāng)前行指定列名值float getFloat(int colIndex)以float形式獲取結(jié)果集當(dāng)前行指定列號(hào)值float getFloat(String colLabel)

46、以float形式獲取結(jié)果集當(dāng)前行指定列名值String getString(int colIndex)以String 形式獲取結(jié)果集當(dāng)前行指定列號(hào)值String getString(String colLabel)以String形式獲取結(jié)果集當(dāng)前行指定列名值 PreparedStatement接口 （預(yù)編譯的 SQL 語(yǔ)句） Statement 接口 提高了代碼的可讀性和可維護(hù)性 PreparedStatement 接口繼承 Statement接口PreparedStatement比普通的Statement對(duì)象使用起來(lái)更加靈活，更有效率 PreparedStatement接口提高了SQL語(yǔ)句執(zhí)

47、行的性能 提高了安全性CallableStatement 對(duì)于高級(jí)數(shù)據(jù)庫(kù)，一般都會(huì)提供存儲(chǔ)過(guò)程的功能，以加快SQL語(yǔ)句的執(zhí)行。那么，在JDBC中如何去調(diào)用一個(gè)存儲(chǔ)過(guò)程呢？JDBC中的CallableStatement接口提供了調(diào)用存儲(chǔ)過(guò)程的方法。 CallableStatement接口繼承了Statement接口和PreparedStatement接口，因此它具有兩者的特點(diǎn)：可以處理一般的SQL語(yǔ)句，也可以處理帶IN（輸入）參數(shù)的SQL語(yǔ)句。它還自己定義了OUT（輸出）參數(shù)以及INOUT（輸入輸出）參數(shù)的處理方法。通過(guò)Connection對(duì)象的prepareCall()方法，可以創(chuàng)建Calla

48、bleStatement對(duì)象，如： conn.prepareCall(call stored_proc)；其中，stored_proc為存儲(chǔ)過(guò)程名稱。如果存儲(chǔ)過(guò)程有參數(shù)（比如有兩個(gè)參數(shù)），可以使用如下的方式調(diào)用： conn.prepareCall(call stored proc(?,?)；其中，占位符“?”是IN、OUT還是INOUT取決于存儲(chǔ)過(guò)程定義。而如果存儲(chǔ)過(guò)程有返回值，使用下面的方式調(diào)用： conn.prepareCall(?=call stored proc(?,?)；例3-5 調(diào)用存儲(chǔ)過(guò)程的例子 首先需要在MySQL中創(chuàng)建一個(gè)存儲(chǔ)過(guò)程，該存儲(chǔ)過(guò)程接收一個(gè)系部ID參數(shù)，通過(guò)輸出參數(shù)

49、返加系部名稱，SQL語(yǔ)句如下：delimiter / -設(shè)置MySQL的結(jié)束標(biāo)志為“/”create procedure finddepnamebyid(id char(2),out depname char(40)begin select dep_name into depname from department where dep_id=id;end; delimiter ; -把MySQL的結(jié)束標(biāo)志改回為“;”例3-5 調(diào)用存儲(chǔ)過(guò)程的例子 在JDBC中，事務(wù)默認(rèn)是自動(dòng)提交的通過(guò)Connection的setAutoCommit()方法來(lái)設(shè)置事務(wù)的提交屬性通過(guò)Connection的getAu

50、toCommit()方法來(lái)獲得當(dāng)前事務(wù)的提交方式通過(guò)Connection的commit()方法來(lái)提交事務(wù)通過(guò)Connection的rollback()方法來(lái)回滾事務(wù)3.2.3事務(wù)處理try Statement stmt = conn.createStatement(); Statement stmt1 = conn.createStatement(); String strSql,sql,strParameter; conn.setAutoCommit(false); strSql = delete from File_List where Type_ID=+request.getParame

51、ter(Type_ID)+; stmt.executeUpdate(strSql); sql = delete from Type_List where Type_ID=+request.getParameter(Type_ID)+; stmt1.executeUpdate(sql); mit(); stmt1.close(); stmt.close(); conn.close(); response.sendRedirect(OperationSuccess.jsp?msg=刪除目錄+request.getParameter(Type_Name)+成功！&ref=Y&tar=servlet/

52、dbclass.ManagerTree&frame=epost_menu);catch(Exception e)conn.rollback();response.sendRedirect(OperationFail.jsp?msg=刪除目錄+request.getParameter(Type_Name)+失敗！);設(shè)置事務(wù)的提交屬性提交事務(wù)回滾事務(wù)事務(wù)要使用可滾動(dòng)的結(jié)果集，必須使用不同于前面所定義的Statement：Statement stmt = conn.createStatement(type,concurrency);PreparedStatement stmt = conn.pre

53、pareStatement(sql,type,concurrency)3.2.4可滾動(dòng)和可更新的結(jié)果集ResultSet的Type說(shuō)明TYPE_FORWARD_ONLY結(jié)果集不能滾動(dòng)TYPE_SCROLL_INSENSITIVE結(jié)果集可滾動(dòng)，但對(duì)數(shù)據(jù)庫(kù)的變化不敏感TYPE_SCROLL_SENSITIVE結(jié)果集可以滾動(dòng)，并且對(duì)數(shù)據(jù)庫(kù)的變化敏感3.2.4可滾動(dòng)和可更新的結(jié)果集ResultSet的Concurrency說(shuō)明CONCUR_READ_ONLY結(jié)果集不可用于更新數(shù)據(jù)庫(kù)CONCUR_UPDATABLE結(jié)果集可以用于更新數(shù)據(jù)庫(kù)3.2.4可滾動(dòng)和可更新的結(jié)果集可滾動(dòng)結(jié)果集中的方法：firstl

54、astbeforeFirstafterLastisFirstisLastisBeforeFirstisAfterLastrelativenextpreviousabsolute3.2.4可滾動(dòng)和可更新的結(jié)果集可更新的結(jié)果集：可以直接通過(guò)結(jié)果集來(lái)更新（insert/update/delete）數(shù)據(jù)庫(kù)表rs.updateXXX(String name,Xxx value)/rs.updateRow();rs.moveToInsertRow()/rs.updateXxx()/rs.insertRow();rs.deleteRow();rs.cancelRowUpdates();3.2.4可滾動(dòng)和可更

55、新的結(jié)果集3.2.5批處理在JDBC2中，加入了批處理(batch)的功能。所謂批處理，就是將很多的命令(此處是SQL語(yǔ)句)集合到一起執(zhí)行，以提高效率。要使用JDBC的批處理，首先需要使用Statement對(duì)象的addBatch()方法向其中加入SQL語(yǔ)句，然后，使用Statement對(duì)象的executeBatch()方法來(lái)一次執(zhí)行加入到批處理中的SQL語(yǔ)句。注意，在使用addBatch()加入SQL語(yǔ)句的時(shí)候，語(yǔ)句并不會(huì)執(zhí)行，只有在調(diào)用了executeBatch()方法后，才會(huì)執(zhí)行。通常，會(huì)將批處理和事務(wù)處理結(jié)合起來(lái)使用。 3.2.5批處理3.2.6操作數(shù)據(jù)庫(kù)中的BLOBCLOB類型數(shù)據(jù)有時(shí)

56、候，需要將圖片、聲音等內(nèi)容保存到數(shù)據(jù)庫(kù)中，或者要將一個(gè)內(nèi)容較大的文本文件保存到數(shù)據(jù)庫(kù)中。這些數(shù)據(jù)在數(shù)據(jù)庫(kù)系統(tǒng)中一般使用的數(shù)據(jù)類型為：BLOB(Binary Large OBject) 或 BINARY：用于保存大的二進(jìn)制數(shù)據(jù)；CLOB(Character Large OBject) 或TEXT:：用于保存大的文本數(shù)據(jù)；在JDBC中，保存圖片、聲音、文本等大數(shù)據(jù)到數(shù)據(jù)庫(kù)，主要用到PreparedStatement接口提供的下列setXXX()方法： （1）void setBinaryStream(int parameterIndex, java.io.InputStream in, int le

57、ngth); 其中l(wèi)ength為輸入流長(zhǎng)度，一般可以通過(guò)輸入流的.available()方法計(jì)算(即in.available()。這個(gè)方法最常用，適合任何SQL類型。（2）void setAsciiStream(int parameterIndex, java.io.InputStream in, int length);主要用于處理文本對(duì)象。（3）void setBytes(int parameterIndex, byte x);（4）void setBlob(int parameterIndex , java.sql.Blob x);3.2.6操作數(shù)據(jù)庫(kù)中的BLOBCLOB類型數(shù)據(jù)（5）v

58、oid setClob(int parameterIndex , java.sql.Clob x);從數(shù)據(jù)庫(kù)中讀取圖片、聲音、文本等大數(shù)據(jù)，主要使用ResultSet接口提供的下列g(shù)etXXX()方法：（1）java.io.InputStream getBinaryStream(int columnIndex);/讀取二進(jìn)制數(shù)據(jù)（2）java.io.InputStream getAsciiStream(int columnIndex);/讀取大文本（3）byte getBytes(int columnIndex);（4）java.sql.Blob getBlob(int columnIndex

59、 );（5）java.sql.Clob getBlob(int columnIndex );3.2.6操作數(shù)據(jù)庫(kù)中的BLOBCLOB類型數(shù)據(jù)3.2.7獲得數(shù)據(jù)庫(kù)元數(shù)據(jù)所謂“元數(shù)據(jù)(Meta Data)”，就是有關(guān)數(shù)據(jù)庫(kù)和表結(jié)構(gòu)的信息。在JDBC中，DatabaseMetaData類保存了數(shù)據(jù)庫(kù)的所有特性，而ResultSetMetaData類保存了結(jié)果集的所有特性，它們提供許多的方法來(lái)取得這些信息。 1DatabaseMetaData類 2ResultSetMetaData類DatabaseMetaData相關(guān)方法getDatabaseProductName()getDatabaseProdu

60、ctVersion()getDriverName()getDriverVersion()getURL()getUserName()getColumnCount()getColumnName() 3.2.7獲得數(shù)據(jù)庫(kù)元數(shù)據(jù)總結(jié)JDBC常用API及其作用是什么？JDBC訪問(wèn)數(shù)據(jù)庫(kù)的步驟有哪些？如何遍歷結(jié)果集中數(shù)據(jù)？PreparedStatement比Statement好在哪里？Java Web應(yīng)用開(kāi)發(fā)第三章 JDBC數(shù)據(jù)庫(kù)編程本章任務(wù)使用JDBC實(shí)現(xiàn)學(xué)生信息的增刪改查（以下為學(xué)生信息表結(jié)構(gòu)）字段名字段說(shuō)明字段類型其 他sno學(xué)號(hào)char(14)主鍵sname姓名char(10)非空sage年齡in