jsp應用課件—web編程技術

1、第2章 Web編程技術,,2,內容提要,本章首先介紹HTML的發(fā)展歷史然后介紹HTML的基本框架詳細介紹了HTML的各種常用標記：文字標記、圖片標記、超級鏈接標記，等等介紹CSS的基本使用方法，如何讓CSS與HTML協(xié)同工作介紹JavaScript中的變量、數組、表達式、運算符、流程控制語句JavaScript的函數、內置對象、瀏覽器對象的層次和DOM模型的建立和使用,HTML編程技術,要把信息發(fā)布到全球，就必須要使用能夠被大

2、眾接受的語言，也就是使用一種大多數計算機能夠識別的語言。在Internet上，通常使用的發(fā)布語言是HTML,HTML概述,在20世紀90年代Web網絡的迅速興起，使得HTML空前繁榮。當時，HTML被發(fā)展成了許多不同的版本。出于解決這種混亂局面的考慮，迫切需要制定一個公認的HTML語言規(guī)范。1995年11月，Internet Engineering Task Force（IETF）整理了以前的各種版本，倡導并主持開發(fā)HTML2.0規(guī)

3、范，同年推出HTML3.0技術規(guī)范。1996年，World Wide Web Consortium（W3C）的HTML Working Group開始組織編寫新的規(guī)范，于1997年1月推出了HTML3.2。在HTML3.2中做了許多重要改動。到1999年下半年推出到現(xiàn)在依然使用的HTML4.0,HTML概述,案例名稱：HTML網頁框架程序名稱：2-01.htm,HEAD頭元素,案例名稱：HTML網頁框架程序名

4、稱：2-02.htm我的第一頁面,HTML的常用標記,HTML的常用標記有一些共同特點：都放在BODY標記里面。常用的標記有字體標記、圖片標記、超級鏈接、列表、表格和表單等,字體標記,案例名稱：使用字體標記程序名稱：2-03.htm本書的特色是以案例為主，全書有30個完整的案例。 ,圖片標記,案例名稱：使用圖片標記程序名稱：2-04.htm,超級鏈接,案例名稱：使用超級鏈

5、接程序名稱：2-05.htm其他文件上一個頁面位于北京的清華大學,列表,案例名稱：使用有序列表程序名稱：2-06.htm有序列表 熱愛祖國 熱愛人民無序列表 熱愛祖國 熱愛黨,1.基本表格,是表格的基本標記。代表表格的行，代表表格的列。,案例名稱：基本表格程序名稱：2-07.htm 第一行第一列第一行第二列 第二行第一列第二

6、行第二列 第三行第一列第三行第二列 ,表格的靈活應用,案例名稱：跨行和跨列程序名稱：2-08.htm 跨兩行 跨兩列 1000 1000 3000 2000 4000 ,Cellpadding和Cellspacing屬性,Cellpading的意思是單元格的邊距，

7、指的是字與單元格邊框的距離。Cellspacing的意思是單元格間距，指的是單元格之間的距離。,案例2-1：表格的樣式,案例名稱：表格的樣式程序名稱：StyleTable.htm序號大學師資評分學生評分設備評分1清華大學1001001002北京大學10010097,表單,表單的功能是收集用戶信息實現(xiàn)系統(tǒng)與用戶交互。比如E-mail信箱的注冊頁面就是一個十分典型的表單頁面。表單信息的處理過程如下：當單

8、擊表單中的提交按鈕時，表單中的信息就會上傳到服務器中，然后由服務器端的應用程序（例如CGI，ASP，PHP，JSP等）進行處理，處理后將用戶提交的信息存儲在服務器端的數據庫中，或者將有關信息返回到客戶端瀏覽器上。,表單頭及其屬性,案例名稱：表單的基本使用方法程序名稱：2-10.htm用戶名： 密碼：　 　　　　 　　,表單中常用控件,在常用的表單制作過程中，經常遇到的是按鈕制作、輸入元素的制作等。常見的表

9、單控件包括文本框、文本域、密碼框、多選框、單選框和下拉列表框，等等。,塊級元素,案例名稱：使用塊級元素程序名稱：2-12.htmI am a layer!I am a Span!,預排版標記,包含在預排版標記中的字符會按照HTML原碼的格式輸出到瀏覽器上。HTML文件中的英文空格一般不起作用，但是在預排版標記中空格可以顯示出來。,設計網頁框架,案例名稱：上下框架程序名稱：2-14.htm

10、 ,使用框架,一般在工程應用中，都是由三個頁面組成的框架組合，分成上框架，右框架和左框架,CSS編程技術,CSS（Cascading Style Sheets）中文翻譯為層疊樣式表單，簡稱樣式單，是近幾年才發(fā)展起來的新技術1998年5月12日，CSS level 2才成為W3C 的標準，它是一組樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標志里

11、，也可以在外部附加文檔作為外加文檔。CSS的功能無比強大，W3C也極力向世界推廣這一先進技術。,CSS概述,簡單來說，HTML是一種標記語言，而CSS是這種標記的一種重要擴展，可以進一步美化頁面。換句話說，CSS是一種用來裝飾HTML的標記集合。CSS樣式規(guī)則組成為：選擇符 { 屬性: 值 }，單一選擇符的復合樣式聲明應該用分號隔開，如：選擇符 { 屬性1: 值1; 屬性2: 值2 }。,使用CSS,案例名稱：使用CSS程序名稱：

12、2-16.htmH1 { FONT-SIZE: X-LARGE; COLOR: RED }H2 { FONT-SIZE: LARGE; COLOR: BLUE }中國，我的祖國！H1顯示的中國，我的祖國！H2顯示的,加載CSS樣式的三種方式,使用CSS來格式化網頁，共有三種方式：在HEAD中引用在BODY中引用作為文件來引用,HEAD內引用,案例名稱：HEAD內引用程序

13、名稱：2-17.htm H1 {COLOR:GREEN;FONT-SIZE:37PX;} P {BACKGROUND:YELLOW;} 北京大學，清華大學南京大學，復旦大學 ,BODY內引用,案例名稱：BODY內引用程序名稱：2-18.htm 北京大學，清華大學南京大學，復旦大學 ,文件外引用,案例名稱：樣式表文件程序名稱

14、：mystyle.cssH1 {COLOR:GREEN;FONT-SIZE:37PX;}P {BACKGROUND:YELLOW;},案例名稱：鏈接CSS文件程序名稱：2-19.htm 北京大學，清華大學南京大學，復旦大學 ,文件外導入,,案例名稱：導入CSS文件程序名稱：2-20.htm @IMPORT URL(MYSTYLE.CSS);

15、北京大學，清華大學南京大學，復旦大學 ,CSS與標記對應的三種方式,標記選擇符任何HTML元素都可以是一個CSS的選擇符。上面所有的樣式表都是采用標記選擇符引入的。例如：P { BACKGROUND:YELLOW;}，這里用的標記選擇符是P。,類選擇符,在STYLE標記定義一個“.類名”，然后在HTML標記中使用CLASS=“類名”就可以引入該樣式,案例名稱：類選擇符程序名稱：2-21.htm.LITTL

16、ERED{COLOR:RED;FONT-SIZE:18px}.LITTLEGREEN{COLOR:GREEN;FONT-SIZE:18px} 這是紅色，而且比較??！這是綠色，而且比較??！,ID選擇符,定義ID選擇符時，在樣式名之前加“#名字”，引用的時候使用“ID=名字”。,案例名稱：ID選擇符程序名稱：2-22.htm#SZG { COLOR:RED }這是

17、ID選擇符號！,定義超級鏈接樣式,可以指定A標記以不同的方式顯示。一個超級鏈接有幾種不同的狀態(tài)：未被訪問鏈接（Link）已訪問鏈接（Visited）鼠標移動過（Hover）可以定義超級鏈接文字的顏色，可以定義字體的大小，一般超級鏈接都有下劃線，可以利用“TEXT-DECORATION:NONE”將超級鏈接的下劃線去掉。,定義超級鏈接樣式,案例名稱：定義超級鏈接樣式程序名稱：2-23.htmA:LINK{COL

18、OR:RED ;FONT-SIZE:9PT;TEXT-DECORATION:NONE}A:VISITED{COLOR:BLUE;FONT-SIZE:9PT;TEXT-DECORATION:NONE}A:HOVER{COLOR:GREEN;FONT-SIZE:15PT;TEXT-DECORATION:UNDERLINE}這是超級鏈接,JavaScript編程技術,JavaScript是一種Script腳本語言，

19、所謂的腳本語言就是可以和HTML語言混合使用的語言。VBScript也是Script語言中的一種，但是VBScript只有微軟的瀏覽器Internet Explore（IE）才能完全支持。而JavaScript則不管是什么瀏覽器都可以運行，這也是JavaScript的一個優(yōu)點。JavaScript是一種高級的腳本描述性語言，并不需要依賴于特定的機器和操作系統(tǒng)，所以說它是獨立于操作平臺的。JavaScript 1.0最初是在Netsca

20、pe Navigator 2.0及Netscape LiveWire 1.0上實現(xiàn)的，目前JavaScript的版本是JavaScript 1.2。,,從本質上說JavaScript和Java沒有什么聯(lián)系，但是同時作為語言，可以從三個角度來區(qū)別。（1）JavaScript是解釋型的語言，當程序執(zhí)行的時候，瀏覽器一邊解釋一邊執(zhí)行。而Java是編譯型的語言，必須經過編譯才能執(zhí)行。（2）代碼格式不一樣，Java代碼經過編譯后成為二進制文件

21、，而JavaScript是純文本的文件。（3）在HTML中的嵌入方式不一樣。Java可以通過小應用程序嵌入HTML文件，而JavaScript可直接寫入一個文本文件或HTML文件中。,網頁中引入JavaScript,案例名稱：第一個JavaScript程序程序名稱：2-24.htmdocument.write("這是以JavaScript輸出的!"),變量與數組,變量和數組是JavaScript

22、的基礎，JavaScript和C語言屬于同一語系，許多基本語法一樣。不管是在JavaScript中還是在其他程序語言中，最基本的概念是變量。JavaScript定義變量只有一個關鍵字“var”，在JavaScript中定義一個用戶名變量的語法為：“var strUserName;”。,變量,案例名稱：使用變量程序名稱：2-25.htmvar strWelcome = "歡迎您！";var iCo

23、unter = 10;iCounter = iCounter + 1;document.write(strWelcome);document.write(iCounter);,變量命名需要遵守以下六個規(guī)則,（1）變量命名必須以一個英文字母或是下劃線為開頭，也就是變量名第一個字符必須是A到Z或是a到z之間的字母或是“_”。（2）變量名長度在0～255字符之間。（3）除了首字符，其他字符可以使用任何字

24、符、數字及下劃線，但是不可以使用空格。（4）不可以使用JavaScript的運算符號，例如：+，–，＊，／等。（5）不可以使用JavaScript用到的保留字，例如：sqrt（開方），parseInt（轉換成整型）等。（6）在JavaScript中，變量名大小寫是有所區(qū)別的，例如：變量s12和S12是不同的兩個變量。,聲明數組,用new和Array關鍵字，new代表建立一個新的對象，Array是JavaScript內置的一個對象

25、由于JavaScript區(qū)分大小寫，所以Array的首字母必須是大寫。,使用數組,案例名稱：使用數組程序名稱：2-26.htmvar arrUserName = new Array(2);arrUserName[0] = "Bill";arrUserName[1] = "Bob";document.write(arrUserName[0]);document.

26、write("");document.write(arrUserName[1]);document.write("");,表達式與運算符,程序主要功能是運算，例如加、減、乘、除等基本操作。算術運算符主要提供加、減、乘、除等操作，計算機中沒有通常的乘號，用“*”代替。取余操作用“%”，,案例名稱：算術運算符程序名稱：2-27.htm document.write(

27、3*2); document.write(""); document.write(3/2); document.write(""); document.write(3%2);//取余數,邏輯運算符,邏輯運算符包括：與運算符“&&”、或運算符“||”和取反運算符“！”,案例名稱：邏輯運算符程序名稱：2-28.htm documen

28、t.write(true&&false); document.write(""); document.write(false&&false); document.write(""); document.write(true||false); document.write(""); document.

29、write(!false);,字符串運算符的使用方法,案例名稱：字符串運算符程序名稱：2-29.htmvar strHello = "網頁編程";var strResult = "你好，";strResult += strHello;//等價于：strResult = strResult + strHello;document.write(strResu

30、lt);,條件表達式,案例名稱：條件表達式程序名稱：2-30.htm a = (4>3) ? 5 : 7; b = (4"); document.write(b);,控制語句之條件語句,JavaScript提供的語句可以分為以下4大類。（1）條件和分支語句：If…else語句，switch語句。（2）循環(huán)語句：for語句，do…while語句，break語句和continue

31、語句。（3）對象操作語句：new，this和with。（4）注釋語句：“//”或“/* */”。,if語句,案例名稱：if語句程序名稱：2-31.htmvar iHour = 13;if (iHour ,switch語句,案例名稱：switch語句程序名稱：2-32.htmvar val = "";var i = 5;switch(i){case 3:val

32、 = "三";break;case 4:val = "四";break;case 5:val = "五";break;default:val = "不知道";} document.write(val);,流控制語句之循環(huán)語句,循環(huán)語句包括：for語句、while語句，循環(huán)控制轉移語句continue

33、和break語句。for語句的基本語法如下。for (初始化部分；條件部分；更新部分){語句塊},for 語句,案例名稱：for 語句程序名稱：2-33.htmvar iSum = 0;for(var i = 0; i ,while 語句,,案例名稱：while 語句程序名稱：2-34.htmvar iSum = 0;var i = 0;while( i,break語句,案例名稱：b

34、reak語句程序名稱：2-35.htmfor(i = 1; i ");},continue語句,案例名稱：continue語句程序名稱：2-36.htmfor(i = 1; i ");},JavaScript函數,函數在定義時并沒有被執(zhí)行，只有函數被調用時，其中的代碼才真正被執(zhí)行。為了實現(xiàn)函數的定義和調用，JavaScript語句提供了兩個關鍵字：function和retu

35、rn。JavaScript函數的基本語法如下：function 函數名稱（參數表）{語句塊;},函數定義和調用,案例名稱：函數定義和調用程序名稱：2-37.htmfunction getSqrt(iNum){var iTemp = iNum * iNum;document.write(iTemp);}getSqrt(8);,函數的返回值,案例名稱：函數的返回值程序名稱：2-3

36、8.htmfunction f(y){ var x = y * y; return x;} for(x = 0; x ");},事件的概念,JavaScript事件主要包括三大類的事件：超級連接事件，瀏覽器事件和界面事件。界面事件包括：Click（單擊）MouseOut（鼠標移出）MouseOver（鼠標移過）MouseDown（鼠標按下）等。,單擊事

37、件,案例名稱：單擊事件程序名稱：2-39.htm,下拉列表,下拉列表是常用的一種網頁元素，一般利用ONCHANGE事件來處理。,案例名稱：處理下拉列表程序名稱：2-40.htm 北京上海廣州 function func() {alert("你選擇了" + selAddr.value); },動態(tài)按鈕,當鼠標移動到按鈕上的時候，按鈕就會

38、凸起來。這通過JavaScript的事件實現(xiàn)起來非常方便。首先必須準備兩張圖片，當鼠標移上去的時候，自動切換成另一張圖片就可以了,動態(tài)按鈕,案例名稱：動態(tài)按鈕程序名稱：hoverbutton.htmfunction DoOver(oimg){var imgSRC;imgSRC = 'Edit_' + oimg.name + '_Over.gif';oimg.

39、src = 'images/' + imgSRC;}function DoOut(oimg){var imgSRC;imgSRC = 'Edit_' + oimg.name + '.gif';oimg.src = 'images/' + imgSRC;},對象處理語句,案例名稱：this語句程序名稱：2-41.htm

40、function imgclick(oimg){alert("圖片名稱是：" + oimg.name+"\r\n圖片地址是：" + oimg.src );} ,for…in語句,案例名稱：for…in語句程序名稱：2-42.htm var arr = new Array(3); arr[0] = "Jack"; arr[

41、1] = "Mike"; arr[2] = "Rose"; for(i in arr) {document.write("第" + i + "個為：" + arr[i]); },with語句,案例名稱：with語句程序名稱：2-43.htm with(document) { write("你好世

42、界"); write("你好中國"); write("再見"); },JavaScript內置對象,內置對象都有自己的方法和屬性，訪問屬性的語法是：“對象名.屬性名稱”。訪問方法的語法是：“對象名.方法名稱（參數表）”。所謂的方法就是一個普通的函數被封裝到一個對象中,使用時間對象,案例名稱：使用時間對象程序名稱：2-44.htmvar curr=n

43、ew Date();document.write("今天是");switch(curr.getDay()){case 0:document.write("周日,休息了！");break;case 1:document.write("周一,需要工作！");break;case 2:document.write("周二,需要工作！&qu

44、ot;);break;case 3:document.write("周三,需要工作！");break;case 4:document.write("周四,需要工作！");break;case 5:document.write("周五,需要工作！");break;case 6:document.write("周六,休息了！");

45、break;},網頁時鐘,Math對象,案例名稱：使用Math對象程序名稱：2-45.htmvar a = Math.sin(1);document.write(a),String對象,一般利用String對象提供的函數來處理字符串。String對字符串的處理主要提供了下列方法。（1）charAt(idx)：第一個字符位置是“0”，返回指定位置處的字符。（2）indexOf(Chr)：返回指定子字

46、符串的位置，從左到右，找不到返回–1。（3）lastIndexOf(chr)：返回指定子字符串的位置，從右到左。找不到返回–1。（4）toLowerCase()：將字符串中的字符全部轉化成小寫。（5）toUpperCase()：將字符串中的字符全部轉化成大寫。,String對象,案例名稱：使用字符串處理函數程序名稱：2-46.htmvar str = "I am a boy, I like programm

47、ing!";a = str.charAt(7);b = str.indexOf("a");c = str.lastIndexOf("a");d = str.toUpperCase();document.write(a + "");document.write(b + "")document.write(c

48、+ "")document.write(d + ""),案例2-5：字符串掃描統(tǒng)計,案例名稱：使用字符串處理函數程序名稱：string.htmvar str = "I am a girl, I like cat"var iCount = 0;for( i = 0; i ,JavaScript的常用函數,介紹幾個常用的函數：eval()函數p

49、arseInt()函數parseFloat函數。,使用eval()函數,案例名稱：使用eval()函數程序名稱：2-47.htm var str = "1+2+3";document.write(eval(str));,parseInt()函數和parseFloat()函數,parseInt()函數功能是從一個字符串中提出一個整數，如果遇到字符串中除了數字以外的字符，parseInt(

50、)就停止轉換，返回已有的結果。如果第一個字符不是數字，parseInt()就返回“NaN”值。ParseFloat()函數和parseInt()函數相似，區(qū)別parseFloat()可以提取小數。,parseInt函數和parseFloat函數,案例名稱：使用parseInt函數和parseFloat函數程序名稱：2-48.htmvar a = parseInt("123China");var

51、b = parseFloat("123.12China");document.write (a + "");document.write (b);,對象層次及DOM模型,,DOM,DOM（Document Object Model）是文檔對象模型的縮寫，文檔對象模型提供了文檔的定位模型。,function do_Copy(){var str = frm1

52、.txtBox1.value;frm2.txtBox2.value= str;},使用window對象,function new_win(){window.open("new.htm","my","toolbar=no, left=150, top=200, menubar=no, width=150,heig

53、ht=150");},使用location屬性,案例名稱：使用location屬性程序名稱：2-51.htm function test_location() { window.location="new.htm"; },History對象,案例名稱：使用History對象程序名稱：2-52.htm

54、 function goforward() {history.go(1); } function goback() {history.go(-1) },Web應用經典案例研究,在Web應用開發(fā)中有一些關鍵的動態(tài)編程技術，下面六種最常用的關鍵技術：動態(tài)表格常用的網頁對話框動態(tài)網頁框架表單驗證程序控制Form表單在頁面中執(zhí)行客戶端的可執(zhí)行文件,動態(tài)表格徹底研究,對表格單

55、元格的添加刪除修改并對其進行移動以及拷貝等操作，是目前應用開發(fā)中常用的技術。,表格的動態(tài)選中,三種網頁對話框,在Web應用開發(fā)中，有三種形式的網頁對話框：1、使用window.open打開的網頁2、使用Web模式對話框3、使用Web非模式對話框,動態(tài)網頁框架徹底研究,可以象對普通Windows窗口一樣操作網頁框架，可以最大化窗口頁可以最小化窗口，,表單驗證,常用的表單驗證有兩種方式第一種是利用onsubmit事件實現(xiàn)驗證第二種

56、是利用普通按鈕實現(xiàn)驗證,程序控制Form表單,執(zhí)行客戶端的可執(zhí)行文件,案例名稱：程序控制Form表單程序名稱：2-62.htmvar Shell = new ActiveXObject("WScript.Shell") ;//try{ var cmd="mspaint.exe" ;// var aa = Shell.Run(cmd,1, true) ;//}c

57、atch(e){ alert ("目錄不存在文件！"); },小結,本章首先介紹HTML的發(fā)展歷史然后介紹HTML的基本框架詳細介紹了HTML的各種常用標記：文字標記、圖片標記、超級鏈接標記，等等介紹CSS的基本使用方法，如何讓CSS與HTML協(xié)同工作介紹JavaScript中的變量、數組、表達式、運算符、流程控制語句JavaScript的函數、內置對象、瀏覽器對象的層次和DOM模型的建立

58、和使用,本章習題,2-1. 如何在網頁中設置字體？有哪些字體可以使用？2-2. 如何引入一張圖片？如何給圖片加上邊框？2-3. 如何使用超級鏈接？如何將超級鏈接的下劃線去掉？2-4. 如何定義跨行的表格？如何將表格的字體和邊框的距離加大？2-5. 框架有幾種基本形式？如何使用？2-6. 加載CSS樣式的方式有哪些？如何使用？2-7. 編寫E-mail注冊的表單。（上機練習）2-8. 編寫程序統(tǒng)計1到50中所有偶數的和。（分

59、別用for和while語句實現(xiàn)）2-9. 編寫程序實現(xiàn)：取系統(tǒng)時間，如果時間在6:00－12:00之間，輸出“早上好”；如果時間在12:00－18:00，輸出“下午好”；如果時間在18:00－24:00之間，輸出“晚上好”；如果時間在0:00－6:00，輸出“凌晨好”。2-10. 在字符串“I am a girl, I like dancing!”的每個字符之間加上一個字符“#”，輸出字符為：“I# #a#m# #a# #girl#