祁長興《ASP.NETweb程序設(shè)計(jì)教程》PPT第二章

1、ASP.NET WebASP.NET Web程序設(shè)計(jì)程序設(shè)計(jì) 2HTMLHTML和和JavaScriptJavaScript 第章本章內(nèi)容本章內(nèi)容2.1 HTML 2.1 HTML 2.2 JavaScript2.2 JavaScript 2.3 2.3 案例：使用案例：使用HTMLHTML和和JavaScriptJavaScript實(shí)現(xiàn)實(shí)現(xiàn)表單注冊(cè)表單注冊(cè) 2.4 2.4 習(xí)題習(xí)題 2.1 HTMLv HTML是一種用來制作超文本文檔的簡單標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言，v Web瀏覽器能夠自動(dòng)解釋超文本文件并且按照一定的格式瀏覽器能夠自動(dòng)解釋超文本文件并且按照一定的格式顯

2、示出來。顯示出來。 v 只能實(shí)現(xiàn)靜態(tài)頁面的設(shè)計(jì)。只能實(shí)現(xiàn)靜態(tài)頁面的設(shè)計(jì)。v 2.1.1 HTML基本語法基本語法 v 2.1.2 文字段落標(biāo)記文字段落標(biāo)記 v 2.1.3 圖像標(biāo)記圖像標(biāo)記 v 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 v 2.1.5 表格標(biāo)記表格標(biāo)記 v 2.1.6 表單與控件表單與控件 v 2.1.7 框架的使用框架的使用 v HTML文件擴(kuò)展名是文件擴(kuò)展名是.html或或.htm，它們是可供瀏覽器解，它們是可供瀏覽器解釋瀏覽的文件格式。釋瀏覽的文件格式。 v HTML語言使用標(biāo)記編寫文件，標(biāo)記符必須用語言使用標(biāo)記編寫文件，標(biāo)記符必須用“”括起來，一般以括起來，一般以“”開始，

3、以開始，以“”結(jié)束，結(jié)束，即成對(duì)的使用標(biāo)記，也稱之為雙標(biāo)記。即成對(duì)的使用標(biāo)記，也稱之為雙標(biāo)記。v HTML的標(biāo)記是不區(qū)分大小寫的。的標(biāo)記是不區(qū)分大小寫的。 2.1.1 HTML基本語法基本語法 文檔內(nèi)容文檔內(nèi)容/ 2 文檔內(nèi)容文檔內(nèi)容/ 例如：例如：2.1.1 HTML基本語法基本語法 重點(diǎn)內(nèi)容重點(diǎn)內(nèi)容我的第一個(gè)網(wǎng)頁我的第一個(gè)網(wǎng)頁表格的內(nèi)容表格的內(nèi)容表示文字表示文字“重點(diǎn)內(nèi)容重點(diǎn)內(nèi)容”用帶下劃線的樣式顯示用帶下劃線的樣式顯示 表示當(dāng)前頁面的標(biāo)題為表示當(dāng)前頁面的標(biāo)題為“我的第一個(gè)網(wǎng)頁我的第一個(gè)網(wǎng)頁” 表示在瀏覽器上顯示一個(gè)表格，表格的邊框表示在瀏覽器上顯示一個(gè)表格，表格的邊框線粗細(xì)為線粗細(xì)為1

4、1，表格的寬度為，表格的寬度為300px 300px v 但也有些標(biāo)記只需單獨(dú)使用就能完整的表達(dá)意思，稱之為但也有些標(biāo)記只需單獨(dú)使用就能完整的表達(dá)意思，稱之為單標(biāo)記。常用的單標(biāo)記主要有換行標(biāo)記單標(biāo)記。常用的單標(biāo)記主要有換行標(biāo)記、水平線標(biāo)記、水平線標(biāo)記等。等。2.1.1 HTML基本語法基本語法 2 v HTML文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。一個(gè)完整的種文檔信息。一個(gè)完整的HTML文件的基本格式如下：文件的基本格式如下： 2.1

5、.1 HTML基本語法基本語法 網(wǎng)頁的標(biāo)題網(wǎng)頁的標(biāo)題 文檔主體，正文部分文檔主體，正文部分 2.1.1 HTML基本語法基本語法 例例2-1 創(chuàng)建一個(gè)簡單的創(chuàng)建一個(gè)簡單的HTMLHTML網(wǎng)頁文件網(wǎng)頁文件 meta http-equiv=Content-Type content=text/html;charset=gb2312創(chuàng)建一個(gè)創(chuàng)建一個(gè)HTMLHTML網(wǎng)頁文件網(wǎng)頁文件body background=backimage.jpg text=red leftmargin=50px topmargin=20px 我喜歡學(xué)習(xí)我喜歡學(xué)習(xí)HTMLHTML！例例2-1 創(chuàng)建一個(gè)簡單的創(chuàng)建一個(gè)簡單的HTML

6、HTML網(wǎng)頁文件網(wǎng)頁文件 步驟如下：步驟如下：1) 1) 新建一個(gè)記事本文件，并輸入如上新建一個(gè)記事本文件，并輸入如上HTMLHTML語句。語句。2) 2) 執(zhí)行記事本執(zhí)行記事本“文件文件”菜單下的菜單下的“另存另存為為”命令，將命令，將“保存類型保存類型”設(shè)置為設(shè)置為“所所有文件有文件”，將文件的擴(kuò)展名改為，將文件的擴(kuò)展名改為.htm.htm或或.html.html。單擊。單擊“保存保存”按鈕。按鈕。3) 3) 打開保存成功的打開保存成功的.htm.htm文件，即可以看文件，即可以看到瀏覽器中頁面的顯示效果。到瀏覽器中頁面的顯示效果。 2.1.1 HTML基本語法基本語法 例例2-1 運(yùn)行效

7、果運(yùn)行效果 2.1.1 HTML基本語法基本語法 1. 文字樣式標(biāo)記：包括文字的字體、字號(hào)和顏色，一般使用文字樣式標(biāo)記：包括文字的字體、字號(hào)和顏色，一般使用標(biāo)記來實(shí)現(xiàn)。具體格式如下：標(biāo)記來實(shí)現(xiàn)。具體格式如下：2.1.2 文字段落標(biāo)記文字段落標(biāo)記 font size= 文字內(nèi)容文字內(nèi)容 v “size”表示字號(hào)，表示字號(hào)，“數(shù)字?jǐn)?shù)字”表示字號(hào)的大小，最大為表示字號(hào)的大小，最大為7，最小為最小為1，默認(rèn)字號(hào)為，默認(rèn)字號(hào)為3。v “face”表示字體，默認(rèn)字體為宋體。表示字體，默認(rèn)字體為宋體。v “color”表示文字的顏色，默認(rèn)顏色為黑色。表示文字的顏色，默認(rèn)顏色為黑色。 HTML常用顏色設(shè)置值常

8、用顏色設(shè)置值 2.1.2 文字段落標(biāo)記文字段落標(biāo)記 顏色顏色英文名英文名RRGGBB顏色顏色英文名英文名RRGGBB黑色黑色Black#000000橙色橙色Orange#FFA500銀色銀色Silver#C0C0C0淺綠色淺綠色Aqua#00FFFF灰色灰色Gray#808080深藍(lán)色深藍(lán)色Navy#000080粉色粉色Pink#FFC8CB黃色黃色Yellow#FFFF00紅色紅色Red#FF0000綠色綠色Green#008000紫色紫色Purple#FF00FF橄欖色橄欖色olive#8080002. 字型標(biāo)記：字型標(biāo)記：HTML中字型標(biāo)記有很多，常用的字型標(biāo)記可中字型標(biāo)記有很多，常用的

9、字型標(biāo)記可參見下表參見下表2.1.2 文字段落標(biāo)記文字段落標(biāo)記 首標(biāo)記首標(biāo)記尾標(biāo)記尾標(biāo)記含義含義首標(biāo)記首標(biāo)記尾標(biāo)記尾標(biāo)記含義含義加粗加粗斜體斜體加下劃線加下劃線加刪除線加刪除線縮小縮小放大放大上標(biāo)上標(biāo)下標(biāo)下標(biāo)特別強(qiáng)調(diào)特別強(qiáng)調(diào)顯示郵件地顯示郵件地址址3. 段落標(biāo)記有兩種，分別是換段標(biāo)記段落標(biāo)記有兩種，分別是換段標(biāo)記和換行標(biāo)記和換行標(biāo)記。其中。其中屬于單標(biāo)記。屬于單標(biāo)記。2.1.2 文字段落標(biāo)記文字段落標(biāo)記 p align= 段落內(nèi)容段落內(nèi)容 v align指段落的對(duì)齊方式，取值為：指段落的對(duì)齊方式，取值為：Left(左對(duì)齊，默認(rèn)左對(duì)齊，默認(rèn))、Center(居中居中)和和Right(右對(duì)齊右對(duì)齊

10、)三個(gè)值中的任何一個(gè)。三個(gè)值中的任何一個(gè)。 靜夜思靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。2.1.2 文字段落標(biāo)記文字段落標(biāo)記 v 當(dāng)需要結(jié)束一行，并且不想開始新段落時(shí)，使用當(dāng)需要結(jié)束一行，并且不想開始新段落時(shí)，使用標(biāo)標(biāo)記。記。標(biāo)記不管放在什么位置，都能夠強(qiáng)制換行。標(biāo)記不管放在什么位置，都能夠強(qiáng)制換行。v 一個(gè)一個(gè)標(biāo)記可以看成是兩個(gè)換行標(biāo)記標(biāo)記可以看成是兩個(gè)換行標(biāo)記。靜夜思靜夜思床前明月光，疑是地上霜。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。舉頭望明月，低頭思故鄉(xiāng)。4. 水平線標(biāo)記：單標(biāo)記水平線標(biāo)記：單標(biāo)記表示在文檔當(dāng)前位置

11、畫一條水平表示在文檔當(dāng)前位置畫一條水平線，一般從窗口中當(dāng)前行的最左端一直畫到最右端；其線，一般從窗口中當(dāng)前行的最左端一直畫到最右端；其格式為：格式為：2.1.2 文字段落標(biāo)記文字段落標(biāo)記 hr size=noshade v size屬性設(shè)置水平線的粗細(xì)，默認(rèn)值為屬性設(shè)置水平線的粗細(xì)，默認(rèn)值為1；v color屬性設(shè)置水平線的顏色；屬性設(shè)置水平線的顏色；v width屬性設(shè)定水平線的長度，默認(rèn)值是屬性設(shè)定水平線的長度，默認(rèn)值是100%；v align屬性表示對(duì)齊方式；屬性表示對(duì)齊方式；v noshade屬性不用賦值，而是直接加入標(biāo)志即可使用，屬性不用賦值，而是直接加入標(biāo)志即可使用，它是用來加入一

12、條沒有陰影的水平線。它是用來加入一條沒有陰影的水平線。2.1.2 文字段落標(biāo)記文字段落標(biāo)記 5. 標(biāo)題標(biāo)記標(biāo)題標(biāo)記：其中：其中n為標(biāo)題的等級(jí)，為標(biāo)題的等級(jí)，HTML總共提供六總共提供六個(gè)等級(jí)的標(biāo)題，個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)就越大。越小，標(biāo)題字號(hào)就越大。這是一行普通文字這是一行普通文字用用1 1級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字用用2 2級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字用用3 3級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字用用4 4級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字用用5 5級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字用用6 6級(jí)標(biāo)題樣式顯示文字級(jí)標(biāo)題樣式顯示文字演示演示 運(yùn)行效果運(yùn)行效果 2.1

13、.2 文字段落標(biāo)記文字段落標(biāo)記 例例2-2 文字段落標(biāo)記的使用文字段落標(biāo)記的使用 文字段落標(biāo)記的使用文字段落標(biāo)記的使用 第一章第一章 詩詞歌賦詩詞歌賦 第一節(jié)第一節(jié) 宋詞宋詞 作品原文作品原文 2.1.2 文字段落標(biāo)記文字段落標(biāo)記 2.1.2 文字段落標(biāo)記文字段落標(biāo)記 font size=5 face= _GB2312 color=green水調(diào)歌頭水調(diào)歌頭··明月幾時(shí)有明月幾時(shí)有 丙辰中秋，歡飲達(dá)旦丙辰中秋，歡飲達(dá)旦11，大醉，作，大醉，作此篇，兼懷子由。此篇，兼懷子由。 明月幾時(shí)有？把酒問青天。明月幾時(shí)有？把酒問青天。不知天不知天上宮闕，今夕是何

14、年。上宮闕，今夕是何年。我欲乘風(fēng)歸去，又恐瓊樓玉宇，高處不勝寒。我欲乘風(fēng)歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。起舞弄清影，何似在人間。 轉(zhuǎn)朱閣，低綺戶，照無眠。轉(zhuǎn)朱閣，低綺戶，照無眠。不應(yīng)有恨，不應(yīng)有恨，何事長向別時(shí)圓？何事長向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共嬋娟。但愿人長久，千里共嬋娟。 注釋：注釋： 2.1.2 文字段落標(biāo)記文字段落標(biāo)記 11達(dá)旦：至早晨；到清晨。達(dá)旦：至早晨；到清晨。如有學(xué)習(xí)上的問題，請(qǐng)聯(lián)系如有學(xué)習(xí)上的問題，請(qǐng)聯(lián)系例例2-2 運(yùn)行效果運(yùn)行效果2.1.2 文字段落標(biāo)記文字段落標(biāo)記 2

15、.1.3 圖像標(biāo)記圖像標(biāo)記 v 如果希望將一幅圖片插入到網(wǎng)頁中，可以使用圖片標(biāo)記如果希望將一幅圖片插入到網(wǎng)頁中，可以使用圖片標(biāo)記。圖片標(biāo)記是一個(gè)單標(biāo)記。其基本格式為：。圖片標(biāo)記是一個(gè)單標(biāo)記。其基本格式為：img src=img src=圖片文件名圖片文件名 alt=alt=簡要說明簡要說明 width=width=圖片的寬度圖片的寬度 height=height=圖片的高度圖片的高度 border=border=邊框?qū)挾冗吙驅(qū)挾?hspace=hspace=水平方向水平方向空白空白 vspace=vspace=垂直方向空白垂直方向空白/ / 2.1.3 圖像標(biāo)記圖像標(biāo)記 v 例如：下面是一段在

16、頁面中插入圖片的代碼。代碼中用例如：下面是一段在頁面中插入圖片的代碼。代碼中用到了到了標(biāo)記和標(biāo)記和標(biāo)記來設(shè)置圖片水平方向的對(duì)標(biāo)記來設(shè)置圖片水平方向的對(duì)齊方式。齊方式。 插入圖片插入圖片img src=1.jpg width=200 height=190 alt=1border=1/img src=2.jpg width=182 height=194 alt=2/演示演示 運(yùn)行效果運(yùn)行效果 2.1.3 圖像標(biāo)記圖像標(biāo)記 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 v 超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系。它包超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系。它包含兩部分內(nèi)容：含兩部分內(nèi)容：鏈接目標(biāo)可以

17、是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同鏈接目標(biāo)可以是另一個(gè)網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)電子郵件地址。位置，還可以是一個(gè)電子郵件地址。超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。 1. 文字鏈接：指的是超鏈接的對(duì)象是一段文本，跳轉(zhuǎn)的目標(biāo)文字鏈接：指的是超鏈接的對(duì)象是一段文本，跳轉(zhuǎn)的目標(biāo)是當(dāng)前網(wǎng)站的另外一個(gè)網(wǎng)頁或者另一個(gè)網(wǎng)站的網(wǎng)址。其是當(dāng)前網(wǎng)站的另外一個(gè)網(wǎng)頁或者另一個(gè)網(wǎng)站的網(wǎng)址。其格式為：格式為： a href=url target= 熱點(diǎn)文本熱點(diǎn)文本 v href：是超鏈接引用，：是超鏈接引用，url為鏈接要轉(zhuǎn)到的目標(biāo)網(wǎng)頁。為鏈接要

18、轉(zhuǎn)到的目標(biāo)網(wǎng)頁。v target：定義鏈接到目標(biāo)資源時(shí)，打開窗口的方式。：定義鏈接到目標(biāo)資源時(shí)，打開窗口的方式。 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 v 對(duì)于超鏈接的文字的顏色也可以通過一些屬性來設(shè)置，對(duì)于超鏈接的文字的顏色也可以通過一些屬性來設(shè)置，具體為：具體為：link：表示尚未被訪問過的超鏈接的顏色，默認(rèn)為藍(lán)色。：表示尚未被訪問過的超鏈接的顏色，默認(rèn)為藍(lán)色。vlink：表示曾經(jīng)訪問過的超鏈接的顏色，默認(rèn)為棕紅色。：表示曾經(jīng)訪問過的超鏈接的顏色，默認(rèn)為棕紅色。alink：表示超文本鏈接被訪問瞬間的顏色，默認(rèn)為藍(lán)色。：表示超文本鏈接被訪問瞬間的顏色，默認(rèn)為藍(lán)色。2.1.4 超級(jí)鏈接標(biāo)記超級(jí)

19、鏈接標(biāo)記 首頁首頁 百度百度 2. 圖像鏈接：如果希望使用圖片作為超鏈接的對(duì)象，格式圖像鏈接：如果希望使用圖片作為超鏈接的對(duì)象，格式為：為： a href=url target= v url：點(diǎn)擊鏈接后要轉(zhuǎn)到的目標(biāo)網(wǎng)頁。：點(diǎn)擊鏈接后要轉(zhuǎn)到的目標(biāo)網(wǎng)頁。v target：打開窗口的方式。：打開窗口的方式。v scr:：包括路徑在內(nèi)的圖片的文件名。：包括路徑在內(nèi)的圖片的文件名。 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 3. 電子郵件鏈接的格式為：電子郵件鏈接的格式為： 文字文字 v email：為接收郵件的郵箱：為接收郵件的郵箱 。2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 聯(lián)系我們聯(lián)系我們 4. 錨點(diǎn)鏈接

20、：如果一個(gè)頁面的內(nèi)容過多，導(dǎo)致頁面過長，錨點(diǎn)鏈接：如果一個(gè)頁面的內(nèi)容過多，導(dǎo)致頁面過長，用戶需要不停地拖動(dòng)滾動(dòng)條來查看文檔中的內(nèi)容，為了用戶需要不停地拖動(dòng)滾動(dòng)條來查看文檔中的內(nèi)容，為了方便用戶閱讀過長的頁面內(nèi)容，可以使用錨點(diǎn)鏈接。方便用戶閱讀過長的頁面內(nèi)容，可以使用錨點(diǎn)鏈接。a name=” 文字文字 v name屬性用來創(chuàng)建一個(gè)命名的錨。屬性用來創(chuàng)建一個(gè)命名的錨。v 錨名相當(dāng)于文章中的一個(gè)標(biāo)記。錨名相當(dāng)于文章中的一個(gè)標(biāo)記。 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 a href=” # 文字文字 v 錨點(diǎn)創(chuàng)建好后，就可以在其他位置進(jìn)行超鏈接了。如果錨點(diǎn)創(chuàng)建好后，就可以在其他位置進(jìn)行超鏈接了。如果

21、超鏈接到本文檔的錨點(diǎn)，格式為：超鏈接到本文檔的錨點(diǎn)，格式為： 2.1.4 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 v 如果超鏈接到其他頁面的錨點(diǎn)，格式為：如果超鏈接到其他頁面的錨點(diǎn)，格式為：a href=” 文字文字 table border=value bordercolor=value width=value caption align= 標(biāo)題標(biāo)題表頭表頭11表頭表頭22表頭表頭33表頭表頭nn表項(xiàng)表項(xiàng)11表項(xiàng)表項(xiàng)22表項(xiàng)表項(xiàng)33表項(xiàng)表項(xiàng)nn表項(xiàng)表項(xiàng)11表項(xiàng)表項(xiàng)22表項(xiàng)表項(xiàng)33表項(xiàng)表項(xiàng)nnv 在在HTML網(wǎng)頁中，表格一般由網(wǎng)頁中，表格一般由標(biāo)記開始，以標(biāo)記開始，以標(biāo)記結(jié)束。表的內(nèi)容由標(biāo)記結(jié)束。表的內(nèi)容由

22、、組成。具體格式如下：組成。具體格式如下：2.1.4 表格標(biāo)記表格標(biāo)記 v border：定義表格邊框線的寬度，單位為象素。若省略：定義表格邊框線的寬度，單位為象素。若省略則表格沒有邊框。則表格沒有邊框。v bordercolor：定義表格邊框線的顏色值。：定義表格邊框線的顏色值。 v width：定義表格的寬度，單位為象素或百分比。：定義表格的寬度，單位為象素或百分比。v height：定義表格的高度，單位為像素或百分比，單位：定義表格的高度，單位為像素或百分比，單位為百分比時(shí)與為百分比時(shí)與width相同。相同。v cellspacing：定義單元格與單元格之間的間距，單位為：定義單元格與單

23、元格之間的間距，單位為像素。像素。v cellpadding：定義單元格內(nèi)容與邊框之間的間距，單位：定義單元格內(nèi)容與邊框之間的間距，單位為像素。為像素。v align：定義表格的水平對(duì)齊方式，其值可為：定義表格的水平對(duì)齊方式，其值可為left、center、right。默認(rèn)值為。默認(rèn)值為center。2.1.4 表格標(biāo)記表格標(biāo)記 例例2-3 在在HTMLHTML中插入一個(gè)表格中插入一個(gè)表格 插入一個(gè)表格插入一個(gè)表格table border=1px bordercolor=black width=400px cellspacing=1px cellpadding=3px align=center

24、表格示例表格示例2.1.4 表格標(biāo)記表格標(biāo)記 例例2-3 在在HTMLHTML中插入一個(gè)表格中插入一個(gè)表格 橫向通欄示例橫向通欄示例縱向通欄示例縱向通欄示例格式單詞格式單詞含義含義widthwidth寬度寬度heightheight高度高度 2.1.4 表格標(biāo)記表格標(biāo)記 例例2-3 運(yùn)行效果運(yùn)行效果 2.1.4 表格標(biāo)記表格標(biāo)記 v 表單的基本語法格式為：表單的基本語法格式為：2.1.6 表單與控件表單與控件 form name= v name：設(shè)置表單的名稱。：設(shè)置表單的名稱。v action：設(shè)置表單的處理方式，通常為一個(gè)：設(shè)置表單的處理方式，通常為一個(gè)URL，指出處，指出處理表單數(shù)據(jù)的程

25、序文件名（包括網(wǎng)絡(luò)路徑、網(wǎng)址或相對(duì)路理表單數(shù)據(jù)的程序文件名（包括網(wǎng)絡(luò)路徑、網(wǎng)址或相對(duì)路徑），也可以為一個(gè)電子郵件地址。徑），也可以為一個(gè)電子郵件地址。v method：提交表單的方法，有：提交表單的方法，有GET和和POST兩種。兩種。 在在HTML中，常用表單控件主要有：中，常用表單控件主要有：1. 文本框：一種讓用戶自己輸入內(nèi)容的表單控件，通常被用文本框：一種讓用戶自己輸入內(nèi)容的表單控件，通常被用來填寫簡短的字符，如姓名、地址等。其格式為：來填寫簡短的字符，如姓名、地址等。其格式為： 2.1.6 表單與控件表單與控件 input type=text name=input type=text

26、 name=名稱名稱 size=size=寬度寬度 maxlength=maxlength=字符數(shù)字符數(shù) value=value=初始值初始值 v type=text：定義控件類型為單行文本框。：定義控件類型為單行文本框。v name：定義文本框的名稱，是唯一的。：定義文本框的名稱，是唯一的。v size：定義文本框的寬度，以單個(gè)字符為單位。：定義文本框的寬度，以單個(gè)字符為單位。v maxlength：定義允許輸入的最大字符數(shù)。：定義允許輸入的最大字符數(shù)。v value：定義文本框的初始值，為可選屬性。：定義文本框的初始值，為可選屬性。 2. 密碼框：一種特殊的文本框，用于輸入密碼。當(dāng)用戶輸入

27、密碼框：一種特殊的文本框，用于輸入密碼。當(dāng)用戶輸入文字時(shí)，文字會(huì)被星號(hào)或其他符號(hào)代替，而輸入的文字文字時(shí)，文字會(huì)被星號(hào)或其他符號(hào)代替，而輸入的文字會(huì)被隱藏。其格式為：會(huì)被隱藏。其格式為： 2.1.6 表單與控件表單與控件 input type=password name=input type=password name=名稱名稱 size=size=寬度寬度maxlength=maxlength=字符數(shù)字符數(shù) value=value=初始值初始值 v type=password定義控件類型為密碼框，其他屬性含義定義控件類型為密碼框，其他屬性含義同文本框。例如：同文本框。例如： 3. 復(fù)選框：允

28、許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選復(fù)選框：允許在待選項(xiàng)中選中一項(xiàng)以上的選項(xiàng)。每個(gè)復(fù)選框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。其框都是一個(gè)獨(dú)立的元素，都必須有一個(gè)唯一的名稱。其格式為：格式為： 2.1.6 表單與控件表單與控件 input type=checkbox name=input type=checkbox name=名稱名稱 v type= checkbox：定義控件類型為復(fù)選框。：定義控件類型為復(fù)選框。v name：定義復(fù)選框的名稱，名稱唯一。：定義復(fù)選框的名稱，名稱唯一。 4. 單選框：是指在待選答案中只能選中一項(xiàng)而且必須選中一單選框：是指在待選答案中只能選中一項(xiàng)而且必

29、須選中一項(xiàng)。其格式為：項(xiàng)。其格式為： 2.1.6 表單與控件表單與控件 input type=radio name=input type=radio name=名稱名稱 checkedchecked v type=radio：定義控件類型為單選框。：定義控件類型為單選框。v name：定義單選框的名稱。：定義單選框的名稱。v checked：定義單選框的選中狀態(tài)，不需要設(shè)置值。：定義單選框的選中狀態(tài)，不需要設(shè)置值。input type=radio name=checked 男男 input 女女 5. 文件上傳控件：文件上傳控件和文本框差不多，只是還包文件上傳控件：文件上傳控件和文本框差不多，

30、只是還包含了一個(gè)瀏覽按鈕。用戶可以通過在文本框輸入或者點(diǎn)含了一個(gè)瀏覽按鈕。用戶可以通過在文本框輸入或者點(diǎn)擊瀏覽按鈕選擇需要上傳的文件。其格式為：擊瀏覽按鈕選擇需要上傳的文件。其格式為：2.1.6 表單與控件表單與控件 input type=file name=input type=file name=名稱名稱 size=size=寬度寬度maxlength=maxlength=字符數(shù)字符數(shù) v type=file定義控件類型為文件上傳控件，其它屬性含義與定義控件類型為文件上傳控件，其它屬性含義與單行文本框相同。單行文本框相同。 6. 提交按鈕：是用來將輸入的信息提交到服務(wù)器。其代碼格提交按鈕：

31、是用來將輸入的信息提交到服務(wù)器。其代碼格式為：式為： 2.1.6 表單與控件表單與控件 input type=submit name= v type=submit：定義控件類型為提交按鈕。：定義控件類型為提交按鈕。v name：定義提交按鈕的名稱。：定義提交按鈕的名稱。v value：定義按鈕的顯示文字。：定義按鈕的顯示文字。input type=submit value= 7. 重置按鈕：也叫復(fù)位按鈕，用來重置表單。其代碼格式為重置按鈕：也叫復(fù)位按鈕，用來重置表單。其代碼格式為：2.1.6 表單與控件表單與控件 input type=reset name= v type=reset定義控件類

32、型為重置按鈕。其它屬性含義與提定義控件類型為重置按鈕。其它屬性含義與提交按鈕相同。交按鈕相同。input type=reset value= 8. 一般按鈕：用來控制其他定義了處理腳本的處理工作。其一般按鈕：用來控制其他定義了處理腳本的處理工作。其代碼格式為：代碼格式為： 2.1.6 表單與控件表單與控件 input type=button name=input type=button name=名稱名稱value=value=文字文字 v type=button定義了控件類型為一般按鈕，其他屬性含義定義了控件類型為一般按鈕，其他屬性含義與提交按鈕相同。與提交按鈕相同。 9. 下拉列表框：允許

33、在一個(gè)有限的空間內(nèi)設(shè)置多種選項(xiàng)。其下拉列表框：允許在一個(gè)有限的空間內(nèi)設(shè)置多種選項(xiàng)。其代碼格式為：代碼格式為： 2.1.6 表單與控件表單與控件 select name=multiple 選項(xiàng)一選項(xiàng)一 選項(xiàng)二選項(xiàng)二 選項(xiàng)三選項(xiàng)三2.1.6 表單與控件表單與控件 v name：定義下拉列表框的名稱。：定義下拉列表框的名稱。v size：定義同時(shí)顯示在菜單中的選項(xiàng)條數(shù)，如果沒有該屬：定義同時(shí)顯示在菜單中的選項(xiàng)條數(shù)，如果沒有該屬性，則缺省為性，則缺省為1。v multiple：定義是否允許用戶一次選多個(gè)選項(xiàng)，缺省為一：定義是否允許用戶一次選多個(gè)選項(xiàng)，缺省為一次只能選一項(xiàng)。次只能選一項(xiàng)。v 可帶屬性可帶

34、屬性selected，表示該項(xiàng)已預(yù)選。，表示該項(xiàng)已預(yù)選。 上海上海 天津天津 北京北京10. 多行文本框：是一種讓用戶自己輸入內(nèi)容的表單控件，多行文本框：是一種讓用戶自己輸入內(nèi)容的表單控件，只不過能讓用戶輸入較長的內(nèi)容。其代碼格式為：只不過能讓用戶輸入較長的內(nèi)容。其代碼格式為： 2.1.6 表單與控件表單與控件 textarea name= . . v name：定義多行文本框的名稱。：定義多行文本框的名稱。v rows：定義多行文本框的行數(shù)。：定義多行文本框的行數(shù)。v Cols：定義多行文本框的列數(shù)。：定義多行文本框的列數(shù)。 例例2-4 表單與控件的使用：運(yùn)行效果表單與控件的使用：運(yùn)行效果

35、2.1.6 表單與控件表單與控件 2.1.7 框架的使用框架的使用 v框架框架也可以稱之為窗口，可以把瀏覽器窗口切割成若干個(gè)也可以稱之為窗口，可以把瀏覽器窗口切割成若干個(gè)獨(dú)立的窗口，每個(gè)窗口可以顯示不同的網(wǎng)頁，使用框架網(wǎng)獨(dú)立的窗口，每個(gè)窗口可以顯示不同的網(wǎng)頁，使用框架網(wǎng)頁的最主要的目的是創(chuàng)建鏈接的結(jié)構(gòu)。頁的最主要的目的是創(chuàng)建鏈接的結(jié)構(gòu)。 v 設(shè)計(jì)網(wǎng)頁的框架結(jié)構(gòu)，使用設(shè)計(jì)網(wǎng)頁的框架結(jié)構(gòu)，使用標(biāo)記和標(biāo)記和標(biāo)記。其基本結(jié)構(gòu)為：標(biāo)記。其基本結(jié)構(gòu)為： 2.1.7 框架的使用框架的使用 1. 框架集標(biāo)記框架集標(biāo)記v 框架集用于定義窗口的分割方式。它是一對(duì)雙標(biāo)記，有兩框架集用于定義窗口的分割方式。它是一對(duì)雙

36、標(biāo)記，有兩個(gè)常用屬性：個(gè)常用屬性：cols和和rows。v cols是把頁面縱向分割成若干個(gè)窗口。是把頁面縱向分割成若干個(gè)窗口。v rows是把頁面橫向分割成幾個(gè)窗口。是把頁面橫向分割成幾個(gè)窗口。v 主要的分割方式有三種：主要的分割方式有三種： 縱向分割縱向分割 橫向分割橫向分割 嵌套分割嵌套分割2.1.7 框架的使用框架的使用 2. 框架標(biāo)記框架標(biāo)記v 框架標(biāo)記是單標(biāo)記，用來指定在每一個(gè)窗口要打開的文件框架標(biāo)記是單標(biāo)記，用來指定在每一個(gè)窗口要打開的文件。把頁面分割成窗口后，若沒有使用。把頁面分割成窗口后，若沒有使用，則窗口顯，則窗口顯示為空。示為空。常和常和配合使用。其代碼格配合使用。其代碼

37、格式為：式為：frame src= scrolling=OPTION noresize 例例2-5 主頁中的主頁中的HTMLHTML代碼為：代碼為： 2.1.7 框架的使用框架的使用 frameset cols=200,例例2-5 lianjie.html lianjie.html文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 a href=http:/ target=right沈陽師范大學(xué)沈陽師范大學(xué)a href=http:/ target=right吉林大學(xué)吉林大學(xué) a href=http:/ target=right北京大學(xué)北京大學(xué) 例例2-5 top.htmtop.

38、htm文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 font size=7 face=color=fuchsia歡迎光臨歡迎光臨例例2-5 bottom.htmbottom.htm文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 謝謝光臨謝謝光臨例例2-5 運(yùn)行效果運(yùn)行效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 3. 不支持不支持框架標(biāo)記框架標(biāo)記v 早期版本的瀏覽器不支持框架結(jié)構(gòu)，使用早期版本的瀏覽器不支持框架結(jié)構(gòu)，使用 標(biāo)標(biāo)記可以使當(dāng)瀏覽器不能加載框架時(shí)，會(huì)顯示記可以使當(dāng)瀏覽器不能加載框架時(shí)，會(huì)顯示noframe 標(biāo)標(biāo)記中

39、的內(nèi)容。例如：記中的內(nèi)容。例如： framset cols=20%,frame src=b.html scrolling=AUTO對(duì)不起！您的瀏覽器不支持框架頁面顯對(duì)不起！您的瀏覽器不支持框架頁面顯示！示！2.1.7 框架的使用框架的使用 4. 浮動(dòng)浮動(dòng)框架框架v 又叫浮動(dòng)窗口，可以用它將一個(gè)又叫浮動(dòng)窗口，可以用它將一個(gè)HTML文檔嵌入在一個(gè)文檔嵌入在一個(gè)HTML中顯示。如同中顯示。如同“畫中畫畫中畫”電視。其格式為：電視。其格式為：iframe src=URL width=x height=y 2.1.7 框架的使用框架的使用 v 例如：將例如：將HTML文檔文檔shi.htm在另一在另一H

40、TML文檔文檔index.htm中顯示出來。中顯示出來。 首先創(chuàng)建首先創(chuàng)建shi.htm頁面的代碼：頁面的代碼： 靜夜思靜夜思 靜夜思靜夜思 床前明月光，疑床前明月光，疑是地上霜。是地上霜。舉頭望明月，低頭思故舉頭望明月，低頭思故鄉(xiāng)。鄉(xiāng)。演示演示 shi.htmshi.htm頁面效果頁面效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 v 然后創(chuàng)建然后創(chuàng)建index.htm頁面的代碼：頁面的代碼：浮動(dòng)窗口浮動(dòng)窗口 演示演示 index.htm index.htm頁面的浮動(dòng)窗口效果頁面的浮動(dòng)窗口效果 2.1.7 框架的使用框架的使用 2.2 JavaScriptv Jav

41、aScript 可以讓靜態(tài)的可以讓靜態(tài)的HTML網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)的效果，常網(wǎng)頁實(shí)現(xiàn)動(dòng)態(tài)的效果，常用來實(shí)現(xiàn)表單驗(yàn)證、創(chuàng)建用來實(shí)現(xiàn)表單驗(yàn)證、創(chuàng)建cookies、記錄用戶狀態(tài)等功能。、記錄用戶狀態(tài)等功能。 v 2.2.1 概述概述 v 2.2.2 在網(wǎng)頁中使用在網(wǎng)頁中使用JavaScript v 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 v 2.2.4 JavaSript在前端的應(yīng)用在前端的應(yīng)用 2.2.1 概述概述 v JavaScript的特點(diǎn)的特點(diǎn) ： JavaScript是一種腳本編寫語言。是一種腳本編寫語言。 JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的程序語言。是一種基于對(duì)象和事件驅(qū)動(dòng)的程序語言。

42、 JavaScript語法簡單，結(jié)構(gòu)松散。語法簡單，結(jié)構(gòu)松散。 JavaScript是一種具有安全性能的腳本語言。是一種具有安全性能的腳本語言。 JavaScript具有跨平臺(tái)性。具有跨平臺(tái)性。 2.2.1 概述概述 v JavaScript和和Java主要區(qū)別體現(xiàn)在以下幾個(gè)方面：主要區(qū)別體現(xiàn)在以下幾個(gè)方面： Java是一種真正的面向?qū)ο蟮木幊陶Z言；而是一種真正的面向?qū)ο蟮木幊陶Z言；而JavaScript 是是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言。一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言。 Java是傳統(tǒng)的編程語言，其源代碼在執(zhí)行之前必須經(jīng)過編是傳統(tǒng)的編程語言，其源代碼在執(zhí)行之前必須經(jīng)過編譯；而譯；而Ja

43、vaScript是一種解釋性編程語言，其源代碼在執(zhí)是一種解釋性編程語言，其源代碼在執(zhí)行之前不需要經(jīng)過編譯。行之前不需要經(jīng)過編譯。 Java采用強(qiáng)類型變量檢查；而采用強(qiáng)類型變量檢查；而JavaScript中的變量聲明采中的變量聲明采用弱變量類型。用弱變量類型。 Java不能直接嵌入到網(wǎng)頁中運(yùn)行，只能編寫出一個(gè)名為不能直接嵌入到網(wǎng)頁中運(yùn)行，只能編寫出一個(gè)名為applet的獨(dú)立于的獨(dú)立于HTML的文件，由的文件，由HTML調(diào)用；調(diào)用；JavaScript可以直接嵌入到可以直接嵌入到HTML文檔中，并且可以動(dòng)態(tài)的裝載。文檔中，并且可以動(dòng)態(tài)的裝載。 Java多用于服務(wù)器端，多用于服務(wù)器端，JavaScr

44、ipt多用于客戶端。多用于客戶端。 JavaScript與與Java的語法結(jié)構(gòu)不同。的語法結(jié)構(gòu)不同。2.2.2 在網(wǎng)頁中使用在網(wǎng)頁中使用JavaScript JavaScript v 標(biāo)記是一個(gè)通用標(biāo)記，它表明包含的語句是作為標(biāo)記是一個(gè)通用標(biāo)記，它表明包含的語句是作為可執(zhí)行的腳本來解釋的，而不是可顯示的可執(zhí)行的腳本來解釋的，而不是可顯示的HTML文本，該文本，該標(biāo)記被設(shè)計(jì)來容納瀏覽器支持的任何腳本語言。其基本格標(biāo)記被設(shè)計(jì)來容納瀏覽器支持的任何腳本語言。其基本格式為：式為：script language= !-/-2.2.2 在網(wǎng)頁中使用在網(wǎng)頁中使用JavaScript JavaScript v

45、 根據(jù)腳本語句在根據(jù)腳本語句在HTML中出現(xiàn)的位置，可以分為三種情況中出現(xiàn)的位置，可以分為三種情況： 放在放在標(biāo)記之間；標(biāo)記之間； 放在放在標(biāo)記之間標(biāo)記之間 ； 放在外部文件放在外部文件 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 1. window對(duì)象對(duì)象v window對(duì)象代表的是打開的瀏覽器窗口，是對(duì)象代表的是打開的瀏覽器窗口，是Web瀏覽器瀏覽器所有內(nèi)容的主容器，它處于整個(gè)對(duì)象鏈結(jié)構(gòu)的最高層。所有內(nèi)容的主容器，它處于整個(gè)對(duì)象鏈結(jié)構(gòu)的最高層。v window對(duì)象是其他對(duì)象的父對(duì)象。對(duì)象是其他對(duì)象的父對(duì)象。v 在調(diào)用在調(diào)用window對(duì)象的方法和屬性時(shí)，可以省略對(duì)象的方法和屬性時(shí)，可以省略windo

46、w對(duì)象的引用。對(duì)象的引用。2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 v Window對(duì)象的屬性和方法有很多，常用的屬性和方法對(duì)象的屬性和方法有很多，常用的屬性和方法有以下幾種：有以下幾種： status屬性屬性 ：用來顯示當(dāng)前窗口狀態(tài)欄中的信息。：用來顯示當(dāng)前窗口狀態(tài)欄中的信息。 open（）方法（）方法 ：使用：使用JavaScript創(chuàng)建新窗口創(chuàng)建新窗口 。close（）方法：關(guān)閉窗口（）方法：關(guān)閉窗口 。alert（）方法：生成一個(gè)對(duì)話框，在對(duì)話框中顯示傳給參數(shù)的（）方法：生成一個(gè)對(duì)話框，在對(duì)話框中顯示傳給參數(shù)的文本，并附以一個(gè)確定按鈕讓用戶關(guān)閉該對(duì)話框。文本，并附以一個(gè)確定按鈕讓用戶關(guān)閉該對(duì)話

47、框。 confirm（）方法：生成一個(gè)有兩個(gè)按鈕的對(duì)話框。（）方法：生成一個(gè)有兩個(gè)按鈕的對(duì)話框。 prompt（）方法：生成一種提示對(duì)話框，它顯示預(yù)先設(shè)置的文（）方法：生成一種提示對(duì)話框，它顯示預(yù)先設(shè)置的文本信息，并且提供一個(gè)文本域供用戶輸入應(yīng)答。本信息，并且提供一個(gè)文本域供用戶輸入應(yīng)答。settimeout（）和（）和cleartimeout（）方法（）方法 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 2. location對(duì)象對(duì)象v location對(duì)象描述的是當(dāng)前打開窗口對(duì)象或者特定框架對(duì)象描述的是當(dāng)前打開窗口對(duì)象或者特定框架的地址。的地址。v 一個(gè)多框架的窗口對(duì)象在一個(gè)多框架的窗口對(duì)象在loca

48、tion屬性顯示的是父窗口屬性顯示的是父窗口的地址，同時(shí)，每個(gè)框架也有一個(gè)與之相伴的的地址，同時(shí)，每個(gè)框架也有一個(gè)與之相伴的location對(duì)象。對(duì)象。 v location對(duì)象的屬性都是可讀寫屬性，可以通過修改對(duì)象的屬性都是可讀寫屬性，可以通過修改location對(duì)象的屬性來加載另一個(gè)文檔。對(duì)象的屬性來加載另一個(gè)文檔。 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 v 例如：大部分網(wǎng)站的首頁中都有例如：大部分網(wǎng)站的首頁中都有“友情鏈接友情鏈接”功能。此功能。此功能可通過功能可通過location對(duì)象的對(duì)象的href屬性來實(shí)現(xiàn)。代碼如下：屬性來實(shí)現(xiàn)。代碼如下： 友情鏈接友情鏈接function frili

49、nk()function frilink()location.href=document.form1.friend.value;location.href=document.form1.friend.value; 演示演示 友情鏈接友情鏈接- -頁面載入頁面載入 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 演示演示 友情鏈接友情鏈接- -頁面跳轉(zhuǎn)頁面跳轉(zhuǎn) 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 3. document對(duì)象對(duì)象v document對(duì)象代表瀏覽器窗口中裝載的整個(gè)對(duì)象代表瀏覽器窗口中裝載的整個(gè)HTML文檔文檔，包含從，包含從到到的內(nèi)容，被用來訪問一個(gè)頁的內(nèi)容，被用來

50、訪問一個(gè)頁面上的所有元素。面上的所有元素。v 該對(duì)象是該對(duì)象是window對(duì)象的一個(gè)屬性，在引用時(shí)可以省略對(duì)象的一個(gè)屬性，在引用時(shí)可以省略window，在程序中直接引用，在程序中直接引用document對(duì)象。對(duì)象。2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 3. document對(duì)象對(duì)象v document對(duì)象代表瀏覽器窗口中裝載的整個(gè)對(duì)象代表瀏覽器窗口中裝載的整個(gè)HTML文檔文檔，包含從，包含從到到的內(nèi)容，被用來訪問一個(gè)頁的內(nèi)容，被用來訪問一個(gè)頁面上的所有元素。面上的所有元素。v 該對(duì)象是該對(duì)象是window對(duì)象的一個(gè)屬性，在引用時(shí)可以省略對(duì)象的一個(gè)屬性，在引用時(shí)可以省略window，在程序中直接引用

51、，在程序中直接引用document對(duì)象。對(duì)象。2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 4. history對(duì)象對(duì)象v 提供了與歷史清單有關(guān)的信息，包含有最近訪問過的提供了與歷史清單有關(guān)的信息，包含有最近訪問過的10個(gè)網(wǎng)頁的個(gè)網(wǎng)頁的URL的地址。的地址。v history對(duì)象的常用的主要方法有：對(duì)象的常用的主要方法有：back（）方法（）方法 ：在瀏覽器中顯示上一頁，相當(dāng)于：在瀏覽器中顯示上一頁，相當(dāng)于go(-1)方方法。法。 forward（）方法（）方法 ：在瀏覽器中顯示下一頁，相當(dāng)于：在瀏覽器中顯示下一頁，相當(dāng)于go(1)方法。方法。 go（int）方法：在瀏覽器中載入從當(dāng)前算起的第）方法：在瀏

52、覽器中載入從當(dāng)前算起的第int個(gè)頁個(gè)頁面。面。 2.2.3 瀏覽器對(duì)象瀏覽器對(duì)象 5. external對(duì)象對(duì)象v 該對(duì)象有一個(gè)常用的方法，即該對(duì)象有一個(gè)常用的方法，即addfavorite（）方法，使（）方法，使用該方法，可以實(shí)現(xiàn)將指定的網(wǎng)頁添加到收藏夾中。其用該方法，可以實(shí)現(xiàn)將指定的網(wǎng)頁添加到收藏夾中。其格式為：格式為： window.external.addfavorite(“URL”，”title”)v 該方法包含兩個(gè)參數(shù)：要收藏的網(wǎng)頁的網(wǎng)址和在收藏夾該方法包含兩個(gè)參數(shù)：要收藏的網(wǎng)頁的網(wǎng)址和在收藏夾中的顯示標(biāo)題。中的顯示標(biāo)題。2.2.4 JavaSriptJavaSript在前端的應(yīng)用

53、在前端的應(yīng)用 1. 實(shí)現(xiàn)網(wǎng)頁的特效實(shí)現(xiàn)網(wǎng)頁的特效v HTML語言創(chuàng)建的網(wǎng)頁都是靜態(tài)頁面，不能實(shí)現(xiàn)動(dòng)態(tài)效果語言創(chuàng)建的網(wǎng)頁都是靜態(tài)頁面，不能實(shí)現(xiàn)動(dòng)態(tài)效果。v 使用使用JavaScript可以彌補(bǔ)可以彌補(bǔ)HTML的不足，從而在靜態(tài)網(wǎng)的不足，從而在靜態(tài)網(wǎng)頁中實(shí)現(xiàn)動(dòng)態(tài)效果。頁中實(shí)現(xiàn)動(dòng)態(tài)效果。v 該方法包含兩個(gè)參數(shù)：要收藏的網(wǎng)頁的網(wǎng)址和在收藏夾該方法包含兩個(gè)參數(shù)：要收藏的網(wǎng)頁的網(wǎng)址和在收藏夾中的顯示標(biāo)題。中的顯示標(biāo)題。例例2-7 鼠標(biāo)跟隨特效鼠標(biāo)跟隨特效 meta http-equiv=Content-Type content=text/html; charset=utf-8跟隨鼠標(biāo)的文字跟隨鼠標(biāo)的文字.

54、spanstyle.spanstyle2.2.4 JavaSriptJavaSript在前端的應(yīng)用在前端的應(yīng)用 position: absolute;position: absolute;visibility: visible;visibility: visible;top: -50px;top: -50px;font-size: 9pt;font-size: 9pt;color: #FF6600;color: #FF6600;font-weight: bold;font-weight: bold; 2.2.4 JavaSriptJavaSript在前端的應(yīng)用在前端的應(yīng)用 /設(shè)定參數(shù)設(shè)定參數(shù)v

55、ar x, y; /var x, y; /鼠標(biāo)當(dāng)前在頁面上的位置鼠標(biāo)當(dāng)前在頁面上的位置var step = 20 var flag = 0;var step = 20 var flag = 0;var message = javascriptvar message = javascript跟隨鼠標(biāo)的文字跟隨鼠標(biāo)的文字.; .; message= message.split(); /message= message.split(); /分割字符串分割字符串var xpos = new Array();var xpos = new Array();for(i=0; i=message.length

56、-1; i+) for(i=0; i=message.length-1; i+) xposi = -50;xposi = -50; 2.2.4 JavaSriptJavaSript在前端的應(yīng)用在前端的應(yīng)用 var ypos = new Array(); /var ypos = new Array(); /分割字符串分割字符串for(i=0; i=message.length-1; i+) for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step; xposi = xposi-1 + step; yposi

57、 = yposi-1; yposi = yposi-1; xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;2.2.4 JavaSriptJavaSript在前端的應(yīng)用在前端的應(yīng)用 for(i=0; imessage.length-1; i+) /for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step;xposi = xposi-1 + step;yposi = yposi-1;yposi = yposi-1; 2.2.4 JavaSriptJa

58、vaSript在前端的應(yīng)用在前端的應(yīng)用 xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;for(i=0; imessage.length-1; i+) for(i=0; imessage.length-1; i+) var thisspan = eval(document.span + i);var thisspan = eval(document.span + i);thisspan.left = xposi;thisspan.left = xposi;thisspan.top = yposi;thisspan.top = ypos

59、i; var timer = setTimeout(makesnake(), 30); /var timer = setTimeout(makesnake(), 30); /使用使用setTimeoutsetTimeout延時(shí)執(zhí)行延時(shí)執(zhí)行makesnakemakesnake函數(shù)函數(shù) 2.2.4 JavaSriptJavaSript在前端的應(yīng)用在前端的應(yīng)用 for(i=0; i=message.length-1; i+) for(i=0; i=message.length-1; i+) document.write(span id=span + i + document.write();clas

60、s=spanstyle);document.write(messagei);document.write(messagei);document.write();document.write(); if(document.layers) if(document.layers) document.captureEvents(Event.MOUSEMOVE);document.captureEvents(Event.MOUSEMOVE); document.onmousemove = handlerMM; /document.onmousemove = handlerMM; /給給documentdocument對(duì)