jsp應(yīng)用課件—web編程技術(shù)

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

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

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

4、稱(chēng)：2-02.htm我的第一頁(yè)面,HTML的常用標(biāo)記,HTML的常用標(biāo)記有一些共同特點(diǎn)：都放在BODY標(biāo)記里面。常用的標(biāo)記有字體標(biāo)記、圖片標(biāo)記、超級(jí)鏈接、列表、表格和表單等,字體標(biāo)記,案例名稱(chēng)：使用字體標(biāo)記程序名稱(chēng)：2-03.htm本書(shū)的特色是以案例為主，全書(shū)有30個(gè)完整的案例。 ,圖片標(biāo)記,案例名稱(chēng)：使用圖片標(biāo)記程序名稱(chēng)：2-04.htm,超級(jí)鏈接,案例名稱(chēng)：使用超級(jí)鏈

5、接程序名稱(chēng)：2-05.htm其他文件上一個(gè)頁(yè)面位于北京的清華大學(xué),列表,案例名稱(chēng)：使用有序列表程序名稱(chēng)：2-06.htm有序列表 熱愛(ài)祖國(guó) 熱愛(ài)人民無(wú)序列表 熱愛(ài)祖國(guó) 熱愛(ài)黨,1.基本表格,是表格的基本標(biāo)記。代表表格的行，代表表格的列。,案例名稱(chēng)：基本表格程序名稱(chēng)：2-07.htm 第一行第一列第一行第二列 第二行第一列第二

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

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

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

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

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

11、，也可以在外部附加文檔作為外加文檔。CSS的功能無(wú)比強(qiáng)大，W3C也極力向世界推廣這一先進(jìn)技術(shù)。,CSS概述,簡(jiǎn)單來(lái)說(shuō)，HTML是一種標(biāo)記語(yǔ)言，而CSS是這種標(biāo)記的一種重要擴(kuò)展，可以進(jìn)一步美化頁(yè)面。換句話(huà)說(shuō)，CSS是一種用來(lái)裝飾HTML的標(biāo)記集合。CSS樣式規(guī)則組成為：選擇符 { 屬性: 值 }，單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開(kāi)，如：選擇符 { 屬性1: 值1; 屬性2: 值2 }。,使用CSS,案例名稱(chēng)：使用CSS程序名稱(chēng)：

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

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

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

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

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

17、ID選擇符號(hào)！,定義超級(jí)鏈接樣式,可以指定A標(biāo)記以不同的方式顯示。一個(gè)超級(jí)鏈接有幾種不同的狀態(tài)：未被訪(fǎng)問(wèn)鏈接（Link）已訪(fǎng)問(wèn)鏈接（Visited）鼠標(biāo)移動(dòng)過(guò)（Hover）可以定義超級(jí)鏈接文字的顏色，可以定義字體的大小，一般超級(jí)鏈接都有下劃線(xiàn)，可以利用“TEXT-DECORATION:NONE”將超級(jí)鏈接的下劃線(xiàn)去掉。,定義超級(jí)鏈接樣式,案例名稱(chēng)：定義超級(jí)鏈接樣式程序名稱(chēng)：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}這是超級(jí)鏈接,JavaScript編程技術(shù),JavaScript是一種Script腳本語(yǔ)言，

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

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

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

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

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

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

25、由于JavaScript區(qū)分大小寫(xiě)，所以Array的首字母必須是大寫(xiě)。,使用數(shù)組,案例名稱(chēng)：使用數(shù)組程序名稱(chēng)：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("");,表達(dá)式與運(yùn)算符,程序主要功能是運(yùn)算，例如加、減、乘、除等基本操作。算術(shù)運(yùn)算符主要提供加、減、乘、除等操作，計(jì)算機(jī)中沒(méi)有通常的乘號(hào)，用“*”代替。取余操作用“%”，,案例名稱(chēng)：算術(shù)運(yùn)算符程序名稱(chēng)：2-27.htm document.write(

27、3*2); document.write(""); document.write(3/2); document.write(""); document.write(3%2);//取余數(shù),邏輯運(yùn)算符,邏輯運(yùn)算符包括：與運(yùn)算符“&&”、或運(yùn)算符“||”和取反運(yùn)算符“！”,案例名稱(chēng)：邏輯運(yùn)算符程序名稱(chēng)：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);,字符串運(yùn)算符的使用方法,案例名稱(chēng)：字符串運(yùn)算符程序名稱(chēng)：2-29.htmvar strHello = "網(wǎng)頁(yè)編程";var strResult = "你好，";strResult += strHello;//等價(jià)于：strResult = strResult + strHello;document.write(strResu

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

31、語(yǔ)句。（3）對(duì)象操作語(yǔ)句：new，this和with。（4）注釋語(yǔ)句：“//”或“/* */”。,if語(yǔ)句,案例名稱(chēng)：if語(yǔ)句程序名稱(chēng)：2-31.htmvar iHour = 13;if (iHour ,switch語(yǔ)句,案例名稱(chēng)：switch語(yǔ)句程序名稱(chēng)：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);,流控制語(yǔ)句之循環(huán)語(yǔ)句,循環(huán)語(yǔ)句包括：for語(yǔ)句、while語(yǔ)句，循環(huán)控制轉(zhuǎn)移語(yǔ)句continue

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

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

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

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

37、件,案例名稱(chēng)：?jiǎn)螕羰录绦蛎Q(chēng)：2-39.htm,下拉列表,下拉列表是常用的一種網(wǎng)頁(yè)元素，一般利用ONCHANGE事件來(lái)處理。,案例名稱(chēng)：處理下拉列表程序名稱(chēng)：2-40.htm 北京上海廣州 function func() {alert("你選擇了" + selAddr.value); },動(dòng)態(tài)按鈕,當(dāng)鼠標(biāo)移動(dòng)到按鈕上的時(shí)候，按鈕就會(huì)

38、凸起來(lái)。這通過(guò)JavaScript的事件實(shí)現(xiàn)起來(lái)非常方便。首先必須準(zhǔn)備兩張圖片，當(dāng)鼠標(biāo)移上去的時(shí)候，自動(dòng)切換成另一張圖片就可以了,動(dòng)態(tài)按鈕,案例名稱(chēng)：動(dòng)態(tài)按鈕程序名稱(chēng)：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;},對(duì)象處理語(yǔ)句,案例名稱(chēng)：this語(yǔ)句程序名稱(chēng)：2-41.htm

40、function imgclick(oimg){alert("圖片名稱(chēng)是：" + oimg.name+"\r\n圖片地址是：" + oimg.src );} ,for…in語(yǔ)句,案例名稱(chēng)：for…in語(yǔ)句程序名稱(chēng)：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 + "個(gè)為：" + arr[i]); },with語(yǔ)句,案例名稱(chēng)：with語(yǔ)句程序名稱(chēng)：2-43.htm with(document) { write("你好世

42、界"); write("你好中國(guó)"); write("再見(jiàn)"); },JavaScript內(nèi)置對(duì)象,內(nèi)置對(duì)象都有自己的方法和屬性，訪(fǎng)問(wèn)屬性的語(yǔ)法是：“對(duì)象名.屬性名稱(chēng)”。訪(fǎng)問(wèn)方法的語(yǔ)法是：“對(duì)象名.方法名稱(chēng)（參數(shù)表）”。所謂的方法就是一個(gè)普通的函數(shù)被封裝到一個(gè)對(duì)象中,使用時(shí)間對(duì)象,案例名稱(chēng)：使用時(shí)間對(duì)象程序名稱(chēng)：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;},網(wǎng)頁(yè)時(shí)鐘,Math對(duì)象,案例名稱(chēng)：使用Math對(duì)象程序名稱(chēng)：2-45.htmvar a = Math.sin(1);document.write(a),String對(duì)象,一般利用String對(duì)象提供的函數(shù)來(lái)處理字符串。String對(duì)字符串的處理主要提供了下列方法。（1）charAt(idx)：第一個(gè)字符位置是“0”，返回指定位置處的字符。（2）indexOf(Chr)：返回指定子字

46、符串的位置，從左到右，找不到返回–1。（3）lastIndexOf(chr)：返回指定子字符串的位置，從右到左。找不到返回–1。（4）toLowerCase()：將字符串中的字符全部轉(zhuǎn)化成小寫(xiě)。（5）toUpperCase()：將字符串中的字符全部轉(zhuǎn)化成大寫(xiě)。,String對(duì)象,案例名稱(chēng)：使用字符串處理函數(shù)程序名稱(chēng)：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)計(jì),案例名稱(chēng)：使用字符串處理函數(shù)程序名稱(chēng)：string.htmvar str = "I am a girl, I like cat"var iCount = 0;for( i = 0; i ,JavaScript的常用函數(shù),介紹幾個(gè)常用的函數(shù)：eval()函數(shù)p

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

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

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

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

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

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

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

56、是利用普通按鈕實(shí)現(xiàn)驗(yàn)證,程序控制Form表單,執(zhí)行客戶(hù)端的可執(zhí)行文件,案例名稱(chēng)：程序控制Form表單程序名稱(chēng)：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 ("目錄不存在文件！"); },小結(jié),本章首先介紹HTML的發(fā)展歷史然后介紹HTML的基本框架詳細(xì)介紹了HTML的各種常用標(biāo)記：文字標(biāo)記、圖片標(biāo)記、超級(jí)鏈接標(biāo)記，等等介紹CSS的基本使用方法，如何讓CSS與HTML協(xié)同工作介紹JavaScript中的變量、數(shù)組、表達(dá)式、運(yùn)算符、流程控制語(yǔ)句JavaScript的函數(shù)、內(nèi)置對(duì)象、瀏覽器對(duì)象的層次和DOM模型的建立

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

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