第9章 Web應(yīng)用程序開發(fā)

1、第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)web應(yīng)用程序開發(fā)第9章第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)9.1 web概述概述9.3 基本基本html標(biāo)記標(biāo)記9.4 webweb腳本簡(jiǎn)介腳本簡(jiǎn)介9.2 網(wǎng)頁(yè)基礎(chǔ)網(wǎng)頁(yè)基礎(chǔ)第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)9.1 9.1 webweb概述概述第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)www(worldwww(world wide web) wide web)萬(wàn)維網(wǎng)萬(wàn)維網(wǎng)或或webweb。由一些應(yīng)用軟。由一些應(yīng)用軟件及一系列協(xié)議和約定組成，是一種可進(jìn)行信息瀏覽件及一系列協(xié)議和約定組成，是一種可進(jìn)行信息瀏覽和信息發(fā)布的網(wǎng)絡(luò)和信息發(fā)布的網(wǎng)絡(luò)。wwww

2、ww以超文本標(biāo)記語(yǔ)言以超文本標(biāo)記語(yǔ)言htmlhtml與超文本傳輸協(xié)議與超文本傳輸協(xié)議httphttp為為基礎(chǔ)，能夠提供面向基礎(chǔ)，能夠提供面向internetinternet服務(wù)的信息瀏覽系統(tǒng)服務(wù)的信息瀏覽系統(tǒng)。wwwwww是建立在客戶機(jī)是建立在客戶機(jī)/ /服務(wù)器模型之上的。服務(wù)器模型之上的。webweb服務(wù)服務(wù)器采用超鏈接形式將大量信息鏈接起器采用超鏈接形式將大量信息鏈接起來(lái)。來(lái)。wwwwww所提供的信息以統(tǒng)一資源定位器所提供的信息以統(tǒng)一資源定位器(url)(url)來(lái)標(biāo)識(shí)。來(lái)標(biāo)識(shí)。urlurl由協(xié)議類型、主機(jī)名和路徑及文件名由協(xié)議類型、主機(jī)名和路徑及文件名組成組成。http:/http:/

3、9.2 網(wǎng)頁(yè)基礎(chǔ)網(wǎng)頁(yè)基礎(chǔ)第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)網(wǎng)頁(yè)網(wǎng)頁(yè)：wwwwww的基本單位，是各種網(wǎng)絡(luò)應(yīng)用的載的基本單位，是各種網(wǎng)絡(luò)應(yīng)用的載體。是一個(gè)存放在體。是一個(gè)存放在webweb服務(wù)器上的一個(gè)文件，服務(wù)器上的一個(gè)文件，它在瀏覽器中為我們呈現(xiàn)各種多媒體信息它在瀏覽器中為我們呈現(xiàn)各種多媒體信息。9.2.1 9.2.1 基本概念基本概念超級(jí)鏈接超級(jí)鏈接：從一個(gè)網(wǎng)頁(yè)指向一個(gè)特定位置的：從一個(gè)網(wǎng)頁(yè)指向一個(gè)特定位置的鏈接，也可理解為指向其它信息的一個(gè)指針鏈接，也可理解為指向其它信息的一個(gè)指針htmlhtml：hypertext markup languagehypertext markup l

4、anguage，超文本，超文本標(biāo)記語(yǔ)言標(biāo)記語(yǔ)言。用于格式化網(wǎng)頁(yè)上顯示的文本、。用于格式化網(wǎng)頁(yè)上顯示的文本、建立超級(jí)鏈接、插入圖像、建立表格等建立超級(jí)鏈接、插入圖像、建立表格等第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)標(biāo)記標(biāo)記：用于控制網(wǎng)頁(yè)的顯示方式，以及所顯示用于控制網(wǎng)頁(yè)的顯示方式，以及所顯示的內(nèi)容的內(nèi)容。標(biāo)記演示標(biāo)記演示。單標(biāo)記單標(biāo)記：只有起始標(biāo)記，沒有結(jié)束標(biāo)記。：只有起始標(biāo)記，沒有結(jié)束標(biāo)記。雙標(biāo)記：既有起始標(biāo)記也有結(jié)束標(biāo)記。雙標(biāo)記：既有起始標(biāo)記也有結(jié)束標(biāo)記。屬性屬性：用于為標(biāo)記提供附加信息，位于起始：用于為標(biāo)記提供附加信息，位于起始標(biāo)記中。屬性可有可無(wú)，也可能有多個(gè)。標(biāo)記中。屬性可有可無(wú)，也

5、可能有多個(gè)。a href=第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)!- html- !- -標(biāo)題名標(biāo)題名!-html- . .其它頭部標(biāo)記其它頭部標(biāo)記. !- - !- - . .網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容. !- - !- html -9.2.2 html9.2.2 html文件的基本結(jié)構(gòu)文件的基本結(jié)構(gòu)第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)標(biāo)記的格式標(biāo)記的格式：body text=#ffff00 =#ffff00 utexttext屬性：設(shè)置網(wǎng)頁(yè)文本的顏色屬性：設(shè)置網(wǎng)頁(yè)文本的顏色；ubgcolorbgcolor屬性：設(shè)置網(wǎng)頁(yè)的背景顏色屬性：設(shè)置網(wǎng)頁(yè)的背景顏色；ubackgroundbackgroun

6、d屬性：設(shè)置網(wǎng)頁(yè)的背景圖像屬性：設(shè)置網(wǎng)頁(yè)的背景圖像；ulinklink、vlinkvlink、alinkalink屬性：設(shè)置尚未訪問(wèn)、屬性：設(shè)置尚未訪問(wèn)、已訪問(wèn)已訪問(wèn)、正被訪問(wèn)正被訪問(wèn)的超級(jí)鏈接的文本顏色的超級(jí)鏈接的文本顏色第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.29.2】使用】使用標(biāo)記標(biāo)記 使用使用標(biāo)記標(biāo)記 白帝城白帝城 朝辭白帝彩云間朝辭白帝彩云間, ,千里江陵一日還千里江陵一日還 兩岸猿聲啼不住兩岸猿聲啼不住, ,輕舟已過(guò)萬(wàn)重山輕舟已過(guò)萬(wàn)重山 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.29.2】使用】使用標(biāo)記標(biāo)記第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)9.39.3基

7、本基本htmlhtml標(biāo)記標(biāo)記第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)使用使用hn 標(biāo)記設(shè)置一篇文章或一段文本的標(biāo)題，標(biāo)記設(shè)置一篇文章或一段文本的標(biāo)題，標(biāo)題文字以粗體顯示。格式為標(biāo)題文字以粗體顯示。格式為： hn align=left標(biāo)題標(biāo)題 /hn 9.3.1 9.3.1 標(biāo)題標(biāo)題n n表示標(biāo)題的級(jí)別。表示標(biāo)題的級(jí)別。n=1n=1，表示一級(jí)標(biāo)題，此，表示一級(jí)標(biāo)題，此時(shí)標(biāo)題文字的字體最大；時(shí)標(biāo)題文字的字體最大；n=6n=6，表示六級(jí)標(biāo)題，表示六級(jí)標(biāo)題，此時(shí)標(biāo)題文字的字體最小。此時(shí)標(biāo)題文字的字體最小。alignalign表示標(biāo)題文本的對(duì)齊方式，取值表示標(biāo)題文本的對(duì)齊方式，取值leftleft、r

8、ightright和和centercenter。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.39.3】使用】使用hn 標(biāo)記標(biāo)記 使用使用標(biāo)記標(biāo)記 唐詩(shī)三百首唐詩(shī)三百首 唐詩(shī)三百首收錄了唐詩(shī)三百首收錄了7777位詩(shī)人的詩(shī)，共位詩(shī)人的詩(shī)，共311311首，在數(shù)量以首，在數(shù)量以杜甫詩(shī)數(shù)多，有杜甫詩(shī)數(shù)多，有3838首、王維詩(shī)首、王維詩(shī)2929首、李白詩(shī)首、李白詩(shī)2727首、李商隱詩(shī)首、李商隱詩(shī)2222首。內(nèi)容淺顯易懂，深受人們喜歡。首。內(nèi)容淺顯易懂，深受人們喜歡。 李白李白 月下獨(dú)酌春思關(guān)山月夜思怨情月下獨(dú)酌春思關(guān)山月夜思怨情玉階怨玉階怨第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.39

9、.3】使用】使用hn 標(biāo)記標(biāo)記第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)font face=color=black文字文字 (1)face(1)face屬性：字體名，默認(rèn)為宋體；屬性：字體名，默認(rèn)為宋體；(2)size(2)size屬性：字號(hào)，取值范圍為屬性：字號(hào)，取值范圍為1-71-7，sizesize取取7 7時(shí)最大，時(shí)最大，1 1時(shí)最小，默認(rèn)為時(shí)最小，默認(rèn)為3 3號(hào)；號(hào)；(3)color(3)color屬性：文字顏色，默認(rèn)為黑顏色。屬性：文字顏色，默認(rèn)為黑顏色。9.3.2 9.3.2 文字文字、：粗體、斜體、下劃線、刪除線、下標(biāo)、上標(biāo)粗體、斜體、下劃線、刪除線、下標(biāo)、上標(biāo)第第9章章web應(yīng)

10、用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.49.4】設(shè)置文字的格式】設(shè)置文字的格式使用使用標(biāo)記標(biāo)記 光明光明 作者：作者：朱自清朱自清 font face= _gb2312 size=4風(fēng)雨沉沉的也風(fēng)雨沉沉的也夜里，前面一片荒郊。夜里，前面一片荒郊。上帝慌著說(shuō)，上帝慌著說(shuō)，“光明？我沒處給光明？我沒處給你找！你找！你要光明，你自己去造！你要光明，你自己去造！”人物介紹：朱自清人物介紹：朱自清(1898-1948)(1898-1948)，原名自畢，字佩弦，原名自畢，字佩弦，號(hào)秋實(shí)，江蘇東海人，中國(guó)現(xiàn)代散文家、詩(shī)人。號(hào)秋實(shí)，江蘇東海人，中國(guó)現(xiàn)代散文家、詩(shī)人。主主要作品有詩(shī)歌散文集蹤跡。要作品有詩(shī)歌散文集蹤

11、跡。 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.49.4】設(shè)置文字的格式】設(shè)置文字的格式第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)將將標(biāo)記放置于文章中一行的末尾，可以使標(biāo)記放置于文章中一行的末尾，可以使文本產(chǎn)生強(qiáng)制換行。文本產(chǎn)生強(qiáng)制換行。標(biāo)記是一個(gè)單標(biāo)記標(biāo)記是一個(gè)單標(biāo)記。9.3.3 9.3.3 段落段落在在和和標(biāo)記中的文本會(huì)形成一個(gè)段落標(biāo)記中的文本會(huì)形成一個(gè)段落。段落內(nèi)容段落內(nèi)容其中，其中，alignalign屬性表示段落文本的對(duì)齊方式屬性表示段落文本的對(duì)齊方式第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.59.5】使用段落】使用段落使用段落使用段落 李白李白 關(guān)山月關(guān)山月 明月

12、出天山，蒼茫云海間。明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門關(guān)。關(guān)。漢下白登道，胡窺青海灣。漢下白登道，胡窺青海灣。由來(lái)征戰(zhàn)地，不見由來(lái)征戰(zhàn)地，不見有人還。有人還。戍客望邊邑，思?xì)w多苦顏。戍客望邊邑，思?xì)w多苦顏。高樓當(dāng)此夜，高樓當(dāng)此夜，嘆息未應(yīng)閑。嘆息未應(yīng)閑。行路難行路難 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.59.5】使用段落】使用段落第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)img 9.3.4 9.3.4 圖像圖像(1)src(1)src屬性：要顯示圖像的文件名及路徑。屬性：要顯示圖像的文件名及路徑。 (2) alt(2) alt屬性：指定屬性：指定替換

13、文本。替換文本。(3) width(3) width和和heightheight屬性：指定圖像的寬度和屬性：指定圖像的寬度和高度。取值可以是像素?cái)?shù)，也可以高度。取值可以是像素?cái)?shù)，也可以是百分比是百分比第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.69.6】使用圖像】使用圖像 使用圖像使用圖像 游子吟游子吟 孟郊孟郊 img src=water.jpg width=530 alt= 慈母手中線，游子身上衣。慈母手中線，游子身上衣。臨行密密縫，意恐遲遲臨行密密縫，意恐遲遲歸。歸。誰(shuí)言寸草心，報(bào)得三春暉。誰(shuí)言寸草心，報(bào)得三春暉。 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.69.6】使

14、用圖像】使用圖像第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)使用使用alignalign屬性。屬性。圖文混排圖文混排uleftleft：圖像居左，文本在圖像右側(cè)：圖像居左，文本在圖像右側(cè)；urightright：圖像居右，文本在圖像左側(cè)：圖像居右，文本在圖像左側(cè)；utoptop：文本與圖像的頂部對(duì)齊：文本與圖像的頂部對(duì)齊；umiddlemiddle：文本與圖像的中間對(duì)齊：文本與圖像的中間對(duì)齊；ubottombottom：文本與圖像的底部對(duì)齊：文本與圖像的底部對(duì)齊。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.79.7】圖文混排】圖文混排圖文混排圖文混排 送孟浩然之廣陵送孟浩然之廣陵 李白李白

15、 img src=hhl.jpg width=230 height=180 align=left 故人西辭黃鶴樓，煙花三月下?lián)P州。故人西辭黃鶴樓，煙花三月下?lián)P州。孤帆遠(yuǎn)影碧孤帆遠(yuǎn)影碧空盡，惟見長(zhǎng)江天際流。空盡，惟見長(zhǎng)江天際流。高樓當(dāng)此夜，嘆息未應(yīng)閑。高樓當(dāng)此夜，嘆息未應(yīng)閑?！驹u(píng)析】：【評(píng)析】： 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.79.7】圖文混排】圖文混排第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)a 文本或圖象文本或圖象9.3.5 9.3.5 超級(jí)鏈接超級(jí)鏈接(1)href(1)href屬性：指定鏈接地址。屬性：指定鏈接地址。(2)target(2)target屬性：指定鏈接的

16、網(wǎng)頁(yè)在何處打開。屬性：指定鏈接的網(wǎng)頁(yè)在何處打開。取值取值_blank_blank、_self_self、_top_top或或_parent_parent。(3)name(3)name屬性：定義命名位置，又稱為錨點(diǎn)名。屬性：定義命名位置，又稱為錨點(diǎn)名。它與它與hrefhref屬性不能同時(shí)使用。屬性不能同時(shí)使用。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)a 新浪網(wǎng)新浪網(wǎng)1.1.鏈接到另一個(gè)網(wǎng)頁(yè)鏈接到另一個(gè)網(wǎng)頁(yè)2.2.鏈接到網(wǎng)頁(yè)的某個(gè)位置鏈接到網(wǎng)頁(yè)的某個(gè)位置(1)(1)定義命名位置定義命名位置( (或者錨點(diǎn)或者錨點(diǎn)) )a name=文本文本(2)(2)鏈接到命名位置鏈接到命名位置a href文本文本

17、第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.89.8】使用超級(jí)鏈接作為目錄】使用超級(jí)鏈接作為目錄 使用超級(jí)鏈接作為目錄使用超級(jí)鏈接作為目錄 唐詩(shī)三百首唐詩(shī)三百首 唐詩(shī)三百首收錄了唐詩(shī)三百首收錄了7777位詩(shī)人的詩(shī)，共位詩(shī)人的詩(shī)，共311311首，在數(shù)量以杜首，在數(shù)量以杜甫詩(shī)數(shù)最多，有甫詩(shī)數(shù)最多，有3838首、王維詩(shī)首、王維詩(shī)2929首、李白詩(shī)首、李白詩(shī)2727首、李商隱詩(shī)首、李商隱詩(shī)2222首。首。 李白李白 關(guān)山月關(guān)山月 行路難行路難 送孟浩然之廣陵送孟浩然之廣陵 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.89.8】使用超級(jí)鏈接作為目錄】使用超級(jí)鏈接作為目錄 關(guān)山月關(guān)山月明

18、月出天山，蒼茫云海間。明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門關(guān)。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門關(guān)。漢下白登道，胡窺青海灣。漢下白登道，胡窺青海灣。 行路難行路難金樽清酒斗十千，玉盤珍饈直萬(wàn)錢。金樽清酒斗十千，玉盤珍饈直萬(wàn)錢。停杯投箸不能食，停杯投箸不能食，拔劍四顧心茫然。拔劍四顧心茫然。 送孟浩然之廣陵送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下?lián)P州。故人西辭黃鶴樓，煙花三月下?lián)P州。孤帆遠(yuǎn)影碧空盡，孤帆遠(yuǎn)影碧空盡，惟見長(zhǎng)江天際流。惟見長(zhǎng)江天際流。 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.89.8】使用超級(jí)鏈接作為目錄】使用超級(jí)鏈接作為目錄第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)a 3.3.

19、圖像鏈接圖像鏈接第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.99.9】圖像鏈接】圖像鏈接 圖像鏈接圖像鏈接 運(yùn)動(dòng)項(xiàng)目運(yùn)動(dòng)項(xiàng)目 img src=golf.gif 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.99.9】圖像鏈接】圖像鏈接第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā) 表項(xiàng)表項(xiàng)1.1.表項(xiàng)表項(xiàng)n n 表項(xiàng)表項(xiàng)1.1.表項(xiàng)表項(xiàng)n n .9.3.6 9.3.6 表格表格第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.109.10】使用表格】使用表格使用表格使用表格 課表課表 星期一星期一星期星期二二星期三星期三星期四星期四星期五星期五 上午上午第一節(jié)第一節(jié)英語(yǔ)英語(yǔ)高等數(shù)學(xué)高

20、等數(shù)學(xué)線性代數(shù)線性代數(shù)cc語(yǔ)言語(yǔ)言英語(yǔ)英語(yǔ) 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.109.10】使用表格】使用表格 第二節(jié)第二節(jié)線性代數(shù)線性代數(shù)英語(yǔ)英語(yǔ)高等數(shù)學(xué)高等數(shù)學(xué)計(jì)算機(jī)概論計(jì)算機(jī)概論大學(xué)物大學(xué)物理理 下午下午第三節(jié)第三節(jié)cc語(yǔ)言語(yǔ)言線性代數(shù)線性代數(shù)大學(xué)物理大學(xué)物理高等數(shù)學(xué)高等數(shù)學(xué) 第四節(jié)第四節(jié)計(jì)算機(jī)概論計(jì)算機(jī)概論線性線性代數(shù)代數(shù)線性代數(shù)線性代數(shù)高等數(shù)學(xué)高等數(shù)學(xué) 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.109.10】使用表格】使用表格第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)表單是各種表單元素的容器。利用這些表單元表單是各種表單元素的容器。利用這些表單元素，可以與用

21、戶進(jìn)行交互素，可以與用戶進(jìn)行交互。文本框、按鈕、單選按鈕、復(fù)選框、列表框等文本框、按鈕、單選按鈕、復(fù)選框、列表框等。9.3.7 9.3.7 表單表單form action=url method=get name=form1 表單元素表單元素第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(1) action(1) action屬性：指定用于處理表單數(shù)據(jù)的屬性：指定用于處理表單數(shù)據(jù)的服務(wù)器程序。服務(wù)器程序。(2) method(2) method屬性：指定瀏覽器向服務(wù)器傳遞屬性：指定瀏覽器向服務(wù)器傳遞表單數(shù)據(jù)時(shí)采用的數(shù)據(jù)傳輸方式。表單數(shù)據(jù)時(shí)采用的數(shù)據(jù)傳輸方式。getget和和postpost(3)nam

22、e(3)name屬性：為表單命名，以便在程序中訪屬性：為表單命名，以便在程序中訪問(wèn)該表單。問(wèn)該表單。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)文本框允許用戶輸入文本文本框允許用戶輸入文本。1.1.文本框文本框input type=text name=(1)name(1)name屬性：指定文本框的名字，以便在程屬性：指定文本框的名字，以便在程序中訪問(wèn)該文本框。序中訪問(wèn)該文本框。(2)value(2)value屬性：獲取文本框中的文本。屬性：獲取文本框中的文本。(3)size(3)size屬性：指定文本框的顯示寬度。屬性：指定文本框的顯示寬度。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)提交按鈕、重置按

23、鈕和普通按鈕提交按鈕、重置按鈕和普通按鈕2.2.按鈕按鈕提交按鈕用于提交表單提交按鈕用于提交表單。input type=submit value=重置按鈕用于將表單上的表單元素置為初值重置按鈕用于將表單上的表單元素置為初值input type=reset value=普通按鈕用于執(zhí)行某個(gè)命令普通按鈕用于執(zhí)行某個(gè)命令。input type=button value=name=button1第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.119.11】使用文本框和按鈕】使用文本框和按鈕使用文本框和按鈕使用文本框和按鈕 用戶登錄用戶登錄 用戶名：用戶名： 密碼：密碼： input type=su

24、bmit value= input type=reset value= 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.119.11】使用文本框和按鈕】使用文本框和按鈕第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)3. 3. 單選按鈕單選按鈕用于在多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)的場(chǎng)合用于在多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)的場(chǎng)合。input type=radio name=checked文本文本把多個(gè)單選按鈕組成一組。例如把多個(gè)單選按鈕組成一組。例如：input type=radio name=gender checked男男女女第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.129.12】使用表單】使用表單使

25、用表單使用表單 個(gè)人資料個(gè)人資料 table border=0 bgcolor=#e0e0e0 cellpadding=3 姓名：姓名：input type=text size=14 性別：性別：input type=radio name=gender checked男男女女 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.129.12】使用表單】使用表單 電話：電話： 愛好：愛好：足球足球音樂音樂游泳游泳 input type=submit value= 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.129.12】使用表單】使用表單第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)9.4 w

26、eb9.4 web腳本簡(jiǎn)介腳本簡(jiǎn)介第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)webweb腳本一般分為兩類腳本一般分為兩類：(1)(1)客戶端腳本：是在客戶端瀏覽器中運(yùn)行的客戶端腳本：是在客戶端瀏覽器中運(yùn)行的程序。典型的客戶端腳本編程語(yǔ)言有程序。典型的客戶端腳本編程語(yǔ)言有javascriptjavascript和和vbscriptvbscript。(2)(2)服務(wù)器端腳本：是由服務(wù)器端腳本：是由webweb服務(wù)器運(yùn)行的程序。服務(wù)器運(yùn)行的程序。典型的服務(wù)器端腳本技術(shù)有典型的服務(wù)器端腳本技術(shù)有aspasp、phpphp、asp.netasp.net、jspjsp等。等。第第9章章web應(yīng)用程序開發(fā)應(yīng)用

27、程序開發(fā)1.1.編寫第一個(gè)編寫第一個(gè)javascriptjavascript程序程序9.4.1 9.4.1 javascriptjavascript語(yǔ)言基礎(chǔ)語(yǔ)言基礎(chǔ)我的第一個(gè)我的第一個(gè)javascriptjavascript網(wǎng)頁(yè)網(wǎng)頁(yè) var var msgmsg = = prompt(prompt(請(qǐng)輸入你的大名請(qǐng)輸入你的大名：,);,); document.write( document.write(歡迎歡迎 + + msgmsg + + 光臨我們的網(wǎng)站光臨我們的網(wǎng)站！););我們會(huì)帶你進(jìn)入一個(gè)我們會(huì)帶你進(jìn)入一個(gè)javascriptjavascript世界世界。第第9章章web應(yīng)用程序開發(fā)應(yīng)

28、用程序開發(fā)第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā) 腳本內(nèi)容腳本內(nèi)容腳本引入腳本引入: :languagelanguage屬性用于指定使用什么腳本編程語(yǔ)屬性用于指定使用什么腳本編程語(yǔ)言，一般為言，一般為javascriptjavascript和和vbscriptvbscript，默認(rèn)為，默認(rèn)為vbscriptvbscript。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(1)(1)字符串類型字符串類型字符串是用單引號(hào)字符串是用單引號(hào)“”“”或雙引號(hào)或雙引號(hào)“”“”引起引起來(lái)的一串字符。例如：來(lái)的一串字符。例如：abc7dabc7d，123123。(2)(2)布爾類型布爾類型布爾類型只能取值布爾類型

29、只能取值truetrue或或falsefalse，表示真，表示真或假或假(3)(3)數(shù)值類型數(shù)值類型數(shù)值類型包括整數(shù)和浮點(diǎn)數(shù)。例如：數(shù)值類型包括整數(shù)和浮點(diǎn)數(shù)。例如：123123，89.2389.23，3e53e5。2.2.數(shù)據(jù)類型與變量數(shù)據(jù)類型與變量第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)變量變量javascriptjavascript語(yǔ)言是一種弱類型的語(yǔ)言，所以語(yǔ)言是一種弱類型的語(yǔ)言，所以變量在使用前可以聲明，也可以不用聲明。變量在使用前可以聲明，也可以不用聲明。聲明變量的格式：聲明變量的格式：var var 變量名變量名 = =初值初值 var x;var x;var a = 3 , b

30、= true;var a = 3 , b = true;變量名必須以字母、下劃線或變量名必須以字母、下劃線或$ $符開始，后跟符開始，后跟字母、數(shù)字、下劃線或字母、數(shù)字、下劃線或$ $符。符。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(1)(1)算數(shù)運(yùn)算符：算數(shù)運(yùn)算符：+ +、- -、* *、/ /、% %、+、-。 例如：例如：3 + 53 + 5。(2)(2)邏輯運(yùn)算符：邏輯運(yùn)算符： 、=、 、= yx = y。(3)(3)賦值運(yùn)算符：賦值運(yùn)算符：= =。例如：。例如：x = 30 x = 30。(4)(4)字符串運(yùn)算符：字符串運(yùn)算符： “ “+” +” 。 例如：例如：abcabc + y

31、12 + y12。3.3.運(yùn)算符與表達(dá)式運(yùn)算符與表達(dá)式第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(1)if(1)if語(yǔ)句語(yǔ)句if(if(表達(dá)式表達(dá)式) )語(yǔ)句語(yǔ)句1 1else else 語(yǔ)句語(yǔ)句2 24.4.流程控制語(yǔ)句流程控制語(yǔ)句(2)switch(2)switch語(yǔ)句語(yǔ)句switch(switch(表達(dá)式表達(dá)式)case case 常數(shù)表達(dá)式常數(shù)表達(dá)式1:1:語(yǔ)句語(yǔ)句1;break;1;break; default:default:語(yǔ)句語(yǔ)句n;breakn;break; ; 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(3)while(3)while語(yǔ)句語(yǔ)句while(while(表達(dá)式表達(dá)式

32、)循環(huán)體循環(huán)體 (4)for(4)for語(yǔ)句語(yǔ)句for(for(初始表達(dá)式初始表達(dá)式; ;條件表達(dá)式條件表達(dá)式; ;變量表達(dá)式變量表達(dá)式)循環(huán)體循環(huán)體 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(5)(5)輸出語(yǔ)句輸出語(yǔ)句document.writedocument.write()()向網(wǎng)頁(yè)中輸出文本，以及各向網(wǎng)頁(yè)中輸出文本，以及各種種htmlhtml標(biāo)記標(biāo)記。第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.149.14】乘法口訣表】乘法口訣表 var i,j,k; var i,j,k;document.write(document.write(乘法口訣表乘法口訣表)for(k=0; k=9

33、; k+)for(k=0; k=9; k+) document.write(k+    ); document.write(k+    ); document.write();document.write();for(i=1;i=9;i+)for(i=1;i=9;i+) document.write(i+   ); document.write(i+   ); for(j=1;j=i;j+) for(j=1;j=i;j+) document.write(j

34、document.write(j* *i+   ); i+   ); document.write(); document.write(); 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.149.14】乘法口訣表】乘法口訣表第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)function function 函數(shù)名函數(shù)名( (參數(shù)列表參數(shù)列表) ) 函數(shù)體函數(shù)體 9.4.2 9.4.2 javascriptjavascript函數(shù)函數(shù)第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.159.15】雞兔同籠】雞兔同籠 document.w

35、rite( document.write(雞兔同籠雞兔同籠) function rabbit(head,foot) function rabbit(head,foot) var cock; var cock; document.write( document.write(雞兔同在一個(gè)籠子中，共有雞兔同在一個(gè)籠子中，共有+head+head+個(gè)頭，個(gè)頭，+foot+foot+只腳，問(wèn)雞兔各有多少只？只腳，問(wèn)雞兔各有多少只？);); cock=(4 cock=(4* *head-foot)/2;head-foot)/2; if(cock0 & cock0 & cockhead & 2* *cock

36、=4cock=4* *head-foot)head-foot) document.write(cock+ document.write(cock+只雞，只雞，+(head-cock)+(head-cock)+只兔只兔);); else document.write( else document.write(此題無(wú)解此題無(wú)解);); rabbit(25,74); rabbit(25,74); 第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.159.15】雞兔同籠】雞兔同籠第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)(1)(1)警示對(duì)話框警示對(duì)話框alertalert函數(shù)函數(shù): :顯示警示對(duì)話框顯

37、示警示對(duì)話框。參數(shù)設(shè)置對(duì)話框內(nèi)顯示的信息參數(shù)設(shè)置對(duì)話框內(nèi)顯示的信息。alert(alert(你好你好！););9.4.3 9.4.3 對(duì)話框?qū)υ捒虻诘?章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)confirmconfirm函數(shù)函數(shù): :顯示確認(rèn)對(duì)話框。按下確認(rèn)按鈕，顯示確認(rèn)對(duì)話框。按下確認(rèn)按鈕，返回返回truetrue；按下取消按鈕，返回；按下取消按鈕，返回falsefalse。參數(shù)參數(shù): :用于在對(duì)話框內(nèi)顯示確認(rèn)信息。用于在對(duì)話框內(nèi)顯示確認(rèn)信息。if(confirmif(confirm(確實(shí)要關(guān)閉窗口嗎？確實(shí)要關(guān)閉窗口嗎？)document.writedocument.write(你按下了確定按鈕你

38、按下了確定按鈕););else document.writeelse document.write(你按下了取消按鈕你按下了取消按鈕););(2)(2)確認(rèn)對(duì)話框確認(rèn)對(duì)話框第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)promptprompt函數(shù)函數(shù): :顯示提示對(duì)話框，用于接收用戶顯示提示對(duì)話框，用于接收用戶輸入的信息。輸入的信息。參數(shù)參數(shù): :在對(duì)話框內(nèi)顯示提示信息在對(duì)話框內(nèi)顯示提示信息; ;顯示默認(rèn)值。顯示默認(rèn)值。var msgvar msg = prompt( = prompt(請(qǐng)輸入購(gòu)買數(shù)量請(qǐng)輸入購(gòu)買數(shù)量,1);,1);(3)(3)提示對(duì)話框提示對(duì)話框第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開

39、發(fā)【例【例9.169.16】單項(xiàng)選擇題】單項(xiàng)選擇題單項(xiàng)選擇題單項(xiàng)選擇題 var ans; var ans; ans=prompt(2008 ans=prompt(2008年奧運(yùn)會(huì)在哪個(gè)城市舉行？年奧運(yùn)會(huì)在哪個(gè)城市舉行？na.na.廣州廣州tb.tb.上海上海tc.tc.北京北京td.td.天津天津,a);,a); if(ans != c) if(ans != c) alert( alert(錯(cuò)！好好想一想再答錯(cuò)！好好想一想再答);); else else alert( alert(你答對(duì)了！你答對(duì)了！););第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.169.16】單項(xiàng)選擇題】單項(xiàng)選擇

40、題第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)1.1.常用事件常用事件9.4.4 9.4.4 事件事件(1)onclick(1)onclick事件事件按鈕、單選按鈕、復(fù)選框按鈕、單選按鈕、復(fù)選框。(2)onchange(2)onchange事件事件文本框中的文本改變時(shí)，引發(fā)該事件文本框中的文本改變時(shí)，引發(fā)該事件。(3)onload(3)onload事件事件當(dāng)載入當(dāng)載入htmlhtml文檔時(shí)，會(huì)引發(fā)該事件。文檔時(shí)，會(huì)引發(fā)該事件。(4)onmouseover(4)onmouseover(5)onmouseout(5)onmouseout第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)在在htmlhtml標(biāo)記中

41、加入事件的方法：標(biāo)記中加入事件的方法：將事件名作為標(biāo)記的一個(gè)屬性，將事件處理過(guò)將事件名作為標(biāo)記的一個(gè)屬性，將事件處理過(guò)程或者程或者javascriptjavascript代碼作為該屬性的屬性值代碼作為該屬性的屬性值。2.2.使用事件使用事件input type=button name=button1 )第第9章章web應(yīng)用程序開發(fā)應(yīng)用程序開發(fā)【例【例9.179.17】使用事件】使用事件使用事件使用事件 function hit() document.img1.src =over.gif function hit() document.img1.src =over.gif function normal()document.img1.src =out.gif function normal()document.img1.src =out.gif 在圖片上移動(dòng)鼠標(biāo)試試看在圖片上移動(dòng)鼠標(biāo)試試看 img src=out.gif name=img1 onmouseover=hit() onmouseout=normal() 第第9章章web應(yīng)用程