《網(wǎng)頁設(shè)計(jì)與制作》電子教案課程課件PPT 第五章

1、第5章 HTML語言和動(dòng)態(tài)交互HTML語言含有大量的標(biāo)記符號(hào)，并且還在不斷的增加當(dāng)中。本節(jié)將介紹HTML一些常用的標(biāo)記符號(hào)，以及它們使用時(shí)的語法規(guī)則 5.1.1 網(wǎng)頁和網(wǎng)頁和HTML語言的關(guān)系語言的關(guān)系l在Dreamweaver的可視化窗口中制作網(wǎng)頁時(shí)，形成的目標(biāo)文件仍然是HTML代碼，如果切換到代碼窗口中，馬上就可以看到對(duì)應(yīng)的HTML代碼。l1一個(gè)空白網(wǎng)頁的HTML代碼l 當(dāng)新建一個(gè)網(wǎng)頁時(shí)，網(wǎng)頁上沒有什么對(duì)象，這就是一個(gè)空白頁，現(xiàn)在看一下空白頁的HTML代碼。如圖5-1所示。圖5-1空白網(wǎng)頁的HTML代碼l 其實(shí)這個(gè)空白頁已經(jīng)已經(jīng)有了一些簡單的設(shè)置，在啟動(dòng)Dreamweaver時(shí)，系統(tǒng)已經(jīng)自

2、動(dòng)地加入了兩段代碼：l和lbgcolor=#FFFFFF text=#000000l 第一行代碼的意思是：當(dāng)用戶瀏覽網(wǎng)頁時(shí)，瀏覽器會(huì)自動(dòng)識(shí)別并設(shè)置網(wǎng)頁中的語言，這個(gè)語句告訴瀏覽器，該網(wǎng)頁的HTML文件使用了國標(biāo)gb2312字符集，是簡體中文主頁。同樣的，如果該網(wǎng)頁是英語，那么charset=en。l第二段代碼的意思是：頁面的背景色為白色（#FFFFFF），文本的顏色為黑色（#000000）。l在標(biāo)記 之間，可以輸入網(wǎng)頁的標(biāo)題名，輸入的標(biāo)題名會(huì)出現(xiàn)在Dreamweaver窗口上方的標(biāo)題欄中。l完全空白網(wǎng)頁的代碼由下面的標(biāo)記組成：lll lllll代碼窗口的情況如圖5-2所示。切換到可視窗口去觀察

3、，空白網(wǎng)頁所顯示的內(nèi)容，應(yīng)該是灰色的背景，這就是瀏覽器中默認(rèn)的無色背景，如圖5-3所示。 圖5-2空白網(wǎng)頁的HTML代碼圖5-3空白網(wǎng)頁的顯示情況l2在空白網(wǎng)頁上輸入一行文本l在空白的網(wǎng)頁上輸入一行文本，從代碼窗中可以看到文本添加在兩個(gè)之間。如圖5-4、圖5-5所示。l圖5-4 空白網(wǎng)頁的顯示情況l圖5-5代碼窗口中的文本對(duì)照l在HTML語言中規(guī)定，兩個(gè)之間是輸入網(wǎng)頁對(duì)象的位置。那么，如果是一幅圖像，情況又會(huì)怎樣呢？l注意：在代碼窗口調(diào)試HTML代碼時(shí)，如果有語法或格式錯(cuò)誤，代碼將會(huì)用黃色顯示。 圖5-4 空白網(wǎng)頁的顯示情況圖5-5代碼窗口中的文本對(duì)照l3在網(wǎng)頁中插入圖像l 在網(wǎng)頁中輸入一行文

4、本，采用5號(hào)字，再插入一幅大小為150100像素的圖像，在兩個(gè)窗口中觀察對(duì)比一下。如圖5-6所示。圖5-6代碼窗口和可視窗口中的圖片l從代碼窗口中可以看到，在兩個(gè)之間，增加了兩行代碼：l動(dòng)物趣聞字體格式 5號(hào)字 文本內(nèi)容 結(jié)束標(biāo)志l l 起始符 圖片 圖片的路徑和文件名 圖片寬度(像素) 圖片的高度 結(jié)束符l從上面幾個(gè)簡單的例子可以看到，HTML語言是一種標(biāo)記性語言，輸入網(wǎng)頁的內(nèi)容放在兩個(gè)說明符之間。lHTML語言創(chuàng)建出來的文檔，是一種純文本格式的代碼。這些文檔可以被瀏覽器解釋執(zhí)行后，并在屏幕上顯示成網(wǎng)頁的形式。5.1.2 HTML語言的語法規(guī)則語言的語法規(guī)則l1HTML語言文件的基本結(jié)構(gòu)l對(duì)

5、于一個(gè)網(wǎng)頁，即一個(gè)HTML文檔，其基本結(jié)構(gòu)為：lll文檔標(biāo)題部分lll頁面主體部分lll從上面的格式可以看出，文檔內(nèi)容以開始，以結(jié)束。l文檔標(biāo)題 是文件標(biāo)題標(biāo)記。l文檔標(biāo)題部分 是頁面主體部分標(biāo)記。l 是一個(gè)頁面的開始和結(jié)尾。 l2HTML語言的語法lHTML語言有三種表達(dá)方法：l（1）對(duì)象l這是一種封閉型的標(biāo)記形式，他們成對(duì)出現(xiàn)，第二個(gè)標(biāo)記符前面有反斜線。如：l動(dòng)物世界 瀏覽器以標(biāo)題的格式顯示文本l 熱愛自然 瀏覽器以斜體字顯示文本l（2）對(duì)象l這是一種擴(kuò)展封閉型的標(biāo)記形式，利用屬性可以進(jìn)一步設(shè)置對(duì)象的格式，例如：l熱愛自然 其中 是錨標(biāo)記，href是該標(biāo)記的屬性之一，用于超級(jí)鏈接所指向的地

6、址。在這里“熱愛自然”鏈接的目標(biāo)是該頁面上的一個(gè)錨標(biāo)記#maojil（3）l這是一種非封閉型的標(biāo)記形式，在HTML語言中非封閉型的標(biāo)記很少，但確實(shí)存在。例如：l不分段換行標(biāo)記。l3HTML語言的嵌套l幾乎所有的HTML代碼都是由上面三種形式組合，如果將標(biāo)記嵌套組合，可以形成更為復(fù)雜的語句。l例如：l 環(huán)境保護(hù)，利國利民 在瀏覽器中將以粗體和斜體顯示“環(huán)境保護(hù)，利國利民”。 5.1.3常用的常用的HTML文本格式標(biāo)記文本格式標(biāo)記和含義和含義l除了上述基本的HTML文檔結(jié)構(gòu)標(biāo)記外，文本的格式是頁面設(shè)計(jì)中的重要環(huán)節(jié)，涉及到的格式參數(shù)有字體、字型、字號(hào)、標(biāo)題形式、排列形式、段落等。下面是一些常用的文本

7、格式標(biāo)記：l 創(chuàng)建最大的標(biāo)題。l 創(chuàng)建最小的標(biāo)題。l 創(chuàng)建黑體字。l 創(chuàng)建斜體字。l 字體標(biāo)記。l 創(chuàng)建一個(gè)飲用，通常是斜體。l 創(chuàng)建一個(gè)新的段落。l加重文本，通常是斜體加黑體。l字體對(duì)齊的三個(gè)標(biāo)記，為左齊、右齊、居中。l將文本段落按左、中、右對(duì)齊。l設(shè)置字體大小，從1到7。l設(shè)置字體的顏色，使用16進(jìn)制代碼。l 不分段的換行符。l 從兩邊縮進(jìn)文本。l分區(qū)標(biāo)記，用來拍板大塊的HTML段落。 l1標(biāo)題字號(hào)標(biāo)記-l示例：如圖5-7所示。lll示例lll熱愛家鄉(xiāng)熱愛家鄉(xiāng)l熱愛祖國熱愛祖國lll圖5-7標(biāo)題字號(hào)的大小圖5-7標(biāo)題字號(hào)的大小l2字體顏色標(biāo)記l 設(shè)置字體的顏色，從000000到FFFFFF

8、之間的16進(jìn)制數(shù)字。l示例如下：lll無標(biāo)題文檔lll熱愛家鄉(xiāng)熱愛家鄉(xiāng) ；字體大小為二號(hào)字lll3字體對(duì)齊標(biāo)記h1 align=”center” l字體對(duì)齊效果如圖5-8所示。示例如下：lll無標(biāo)題文檔lll 熱愛家鄉(xiāng)熱愛家鄉(xiāng) ；采用居中對(duì)齊，h1標(biāo)題字號(hào)。lll4字體標(biāo)記 l示例：如圖5-9所示。lll無標(biāo)題文檔lll 黃河，中華民族的搖黃河，中華民族的搖籃！籃！lll5字號(hào)標(biāo)記l示例：lll無標(biāo)題文檔lll黃河之水天上來。黃河之水天上來。 ；采用6號(hào)字lll6字符修飾標(biāo)記l傾斜文本表示 l給文本加下劃線l示例：如圖5-10所示。lll無標(biāo)題文檔lll兩岸猿聲啼不住，輕舟已過萬重山。兩岸猿聲

9、啼不住，輕舟已過萬重山。 ；文本采用6號(hào)字傾斜并加下劃線ll圖5-10采用6號(hào)字文本傾斜并加下劃線l7分段標(biāo)記l示例：全文共分三段，共有三對(duì)。如圖5-11所示。lll無標(biāo)題文檔lll毛澤東憶秦娥;婁山關(guān)l西風(fēng)烈，長空雁叫霜晨月。l 霜晨月，馬蹄聲碎，喇叭聲咽。l雄關(guān)漫道真如鐵，l 而今邁步從頭越。l 從頭越，蒼山如海，殘陽如血。ll圖5-11分段效果l8換行標(biāo)記 l 這個(gè)符號(hào)是單獨(dú)使用的。在Dreamweaver中，分段和換行是兩個(gè)不同的符號(hào)。分段不但會(huì)造成換行，而且行與行之間有較大的間距；使用換行，文字的行間距小，而且仍然屬于同一個(gè)段落，屬性相同。l9段落縮進(jìn)標(biāo)記l在可視窗口中，文檔屬性欄上

10、縮進(jìn)段落的按鈕是。l示例：如圖5-12所示。lll無標(biāo)題文檔lll l l 在Windows中，臨時(shí)文件是隨時(shí)隨處都存在的，IE也有自己的臨時(shí)文件夾。l 在此，我們一起來研究一下IE的臨時(shí)文件夾。 lll圖5-12段落縮進(jìn)l10文本標(biāo)志的綜合示例，如圖5-13所示。lll文本標(biāo)志例lll最大的標(biāo)題l使用h3的標(biāo)題l最小的標(biāo)題l黑體字文本 l斜體字文本 l下加一劃線文本 l打字機(jī)風(fēng)格的文本l引用方式的文本l強(qiáng)調(diào)的文本l加重的文本l文本大小取值1號(hào)字、顏色取值“紅色”時(shí)的文本ll圖5-13各種文本標(biāo)志5.1.4 文件頭標(biāo)記文件頭標(biāo)記 l文件頭標(biāo)記是。l 這個(gè)標(biāo)記用于對(duì)文件特征的描述，可以將一些關(guān)鍵

11、字置于文件頭中，這樣做的目的，是為了讓搜索引擎找到該文件。l示例：lll無標(biāo)題文檔llllllll這樣在搜索引擎中輸入“動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)”、“HTML語言的應(yīng)用”或“標(biāo)記的使用”就可以查找到該網(wǎng)頁。5.1.5插入圖片標(biāo)記和水平分隔線插入圖片標(biāo)記和水平分隔線標(biāo)記標(biāo)記l1插入圖片標(biāo)記 l 示例：lll無標(biāo)題文檔lll lll其中HLPGLOBE是圖片文件名。l2插入水平分隔線標(biāo)記l 示例：如圖5-14所示。lll無標(biāo)題文檔lllllll圖5-14幾種水平分隔線標(biāo)記5.1.6 插入錨點(diǎn)標(biāo)記插入錨點(diǎn)標(biāo)記l插入錨點(diǎn)標(biāo)記是 。l 示例：如圖5-15所示。lll無標(biāo)題文檔lll網(wǎng)上信息安全的防范技巧l刪除來歷不

12、明的文件刪除來歷不明的文件 屏蔽屏蔽 Cookie信息信息 不同的地方用不同的口令不同的地方用不同的口令 l人類社會(huì)已經(jīng)進(jìn)入了信息化時(shí)代。人已經(jīng)開始人類社會(huì)已經(jīng)進(jìn)入了信息化時(shí)代。人已經(jīng)開始離不開離不開 Internet網(wǎng)絡(luò)。然而從網(wǎng)絡(luò)。然而從Internet誕生之日起，它就成為眾矢之誕生之日起，它就成為眾矢之的。尤其是在一些電子商務(wù)網(wǎng)站進(jìn)行購物，或者希望注冊(cè)成為某些網(wǎng)的。尤其是在一些電子商務(wù)網(wǎng)站進(jìn)行購物，或者希望注冊(cè)成為某些網(wǎng)站的會(huì)員的時(shí)候，要特別注意保護(hù)自己個(gè)人信息在網(wǎng)上的安全。站的會(huì)員的時(shí)候，要特別注意保護(hù)自己個(gè)人信息在網(wǎng)上的安全。l l刪除來歷不明的文件刪除來歷不明的文件l 如果你收到一

13、封帶有附件的電子郵件，且附件是擴(kuò)展名為如果你收到一封帶有附件的電子郵件，且附件是擴(kuò)展名為.EXE一類的文件，這時(shí)千萬不能貿(mào)然運(yùn)行它，因?yàn)檫@個(gè)不明真相的程序，一類的文件，這時(shí)千萬不能貿(mào)然運(yùn)行它，因?yàn)檫@個(gè)不明真相的程序，有可能是一個(gè)系統(tǒng)破壞程序。攻擊者常把系統(tǒng)破壞程序換一個(gè)名字用有可能是一個(gè)系統(tǒng)破壞程序。攻擊者常把系統(tǒng)破壞程序換一個(gè)名字用電子郵件發(fā)給你，并帶有一些欺騙性主題：電子郵件發(fā)給你，并帶有一些欺騙性主題：“這是個(gè)好東西，你一定這是個(gè)好東西，你一定要試試要試試”，“幫我測試一下程序幫我測試一下程序”之類的話。之類的話。l l建議：對(duì)待這些表面上很友好、很善意的郵件附件，我們應(yīng)該做的是建議：對(duì)

14、待這些表面上很友好、很善意的郵件附件，我們應(yīng)該做的是立即刪除這些來歷不明的文件。立即刪除這些來歷不明的文件。l 屏蔽屏蔽 Cookie信息信息l Cookie是是Web服務(wù)器發(fā)送到電腦里的數(shù)據(jù)文件，它記錄了諸如服務(wù)器發(fā)送到電腦里的數(shù)據(jù)文件，它記錄了諸如用戶名、口令和關(guān)于用戶興趣取向的信息。這些信息可能會(huì)被一些喜用戶名、口令和關(guān)于用戶興趣取向的信息。這些信息可能會(huì)被一些喜歡搞歡搞“惡作劇惡作劇”的人利用，它可能造成安全隱患。的人利用，它可能造成安全隱患。l建議：我們可以在瀏覽器中做一些必要的設(shè)置，要求建議：我們可以在瀏覽器中做一些必要的設(shè)置，要求瀏覽器在接受瀏覽器在接受Cookie之前提醒您，或

15、者干脆拒絕它之前提醒您，或者干脆拒絕它們。們。l 不同的地方用不同的口不同的地方用不同的口令令l 對(duì)于經(jīng)常上網(wǎng)的用戶，可能會(huì)發(fā)現(xiàn)在網(wǎng)上需要對(duì)于經(jīng)常上網(wǎng)的用戶，可能會(huì)發(fā)現(xiàn)在網(wǎng)上需要設(shè)置密碼的情況有很多。有很多用戶圖方便記憶，不設(shè)置密碼的情況有很多。有很多用戶圖方便記憶，不論在什么地方，都使用同一個(gè)口令，殊不知他們已不論在什么地方，都使用同一個(gè)口令，殊不知他們已不知不覺地留下了一個(gè)安全隱患。攻擊者一般在破獲到知不覺地留下了一個(gè)安全隱患。攻擊者一般在破獲到用戶的一個(gè)密碼后，會(huì)用這個(gè)密碼去嘗試用戶每一個(gè)用戶的一個(gè)密碼后，會(huì)用這個(gè)密碼去嘗試用戶每一個(gè)需要通道口令的地方！需要通道口令的地方！ll圖5-15

16、錨點(diǎn)和錨點(diǎn)的鏈接5.1.7 插入超鏈接標(biāo)記插入超鏈接標(biāo)記l1普通超級(jí)鏈接標(biāo)記l示例：lll無標(biāo)題文檔lll數(shù)據(jù)的安全性數(shù)據(jù)的安全性 lll2指向E-mail的超鏈接標(biāo)記l示例：lll無標(biāo)題文檔lll請(qǐng)給我回信請(qǐng)給我回信 lll3指向錨點(diǎn)的鏈接l示例：如 見517插入錨點(diǎn)標(biāo)記5.1.8 幾個(gè)動(dòng)態(tài)應(yīng)用的例子幾個(gè)動(dòng)態(tài)應(yīng)用的例子l例1在網(wǎng)頁上加入背景音樂lll無標(biāo)題文檔lllllll其中：src=“ ”中是音樂文件的路徑；在相應(yīng)的路徑下有一個(gè)wav音樂文件。lloop=-1代表一直循環(huán)播放。l例2使用動(dòng)態(tài)樣式改變字體的大小 l l l動(dòng)態(tài)改變字體的大小 l l l l使用動(dòng)態(tài)使用動(dòng)態(tài)HTML可以改變字

17、體的大小可以改變字體的大小 l l ll在這一例子中，當(dāng)用戶用鼠標(biāo)在文字上單擊時(shí)文字變大。style是樣式表在HTML中的應(yīng)用。l例3圖像的替換 l l圖像的替換 l l l l l l在這個(gè)例子里，通過改變img 元素的 SRC屬性，改變圖像的顯示內(nèi)容。當(dāng)鼠標(biāo)移動(dòng)到這個(gè)圖像上時(shí)，它的源由 before.gif 改變成 after.gif。當(dāng)鼠標(biāo)離開這個(gè)圖像后，它的源又由 after.gif 改變成 before.gif。l這個(gè)例子是行為在HTML中的應(yīng)用。lbefore.gif和after.gif這兩個(gè)圖片，在調(diào)試時(shí)應(yīng)選用實(shí)際路徑和文件名。l例4在屏幕上顯示立體字，如圖5-16所示。l l在

18、屏幕上顯示立體字 l l l 以史為鑒l l 圖5-16立體字效果5.2 JavaScript程序程序lJavaScript語言的前身叫作LiveScript。后來Netscape公司引進(jìn)了Sun公司有關(guān)Java的程序概念，將自己原有的LiveScript 重新進(jìn)行設(shè)計(jì)，并改名為JavaScript。 JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語言，有了JavaScript，可使網(wǎng)頁變得生動(dòng)。使用JavaScript的目的是與HTML超文本標(biāo)識(shí)語言一起實(shí)現(xiàn)與網(wǎng)絡(luò)客戶的交互，從而可以開發(fā)客戶端的應(yīng)用程序。5.2.1 什么是什么是JavaScriptlHTML超文本標(biāo)識(shí)語言，

19、通過超文本和超媒體技術(shù)，結(jié)合超鏈接功能將各種信息組織成網(wǎng)絡(luò)結(jié)構(gòu)，構(gòu)成網(wǎng)絡(luò)文檔，實(shí)現(xiàn)Internet上的“漫游”。然而采用這種超鏈技術(shù)存在有一定的缺陷，那就是它只能提供一種靜態(tài)的信息資源，缺少動(dòng)態(tài)的交互。lJavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言一起，與Web客戶交互，它是在標(biāo)準(zhǔn)的HTML語言中通過嵌入或調(diào)入Java 腳本語言實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷，JavaScript具有以下一些基本特點(diǎn)。l在學(xué)習(xí)JavaScript之前，應(yīng)該首先掌握HTML，并且具備了面向?qū)ο缶幊痰幕A(chǔ)（最好掌握C+或Java），將會(huì)有助于更好地理解Ja

20、vaScript。l1JavaScrip是一種腳本編寫語言lJavaScript是一種腳本語言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語言一樣，JavaScript同樣也是一種解釋性語言，它的基本結(jié)構(gòu)形式與C、C+、VB、Delphi十分類似。但它不像這些語言一樣，需要先編譯，而是在程序運(yùn)行過程中逐行地解釋運(yùn)行。它與HTML標(biāo)識(shí)結(jié)合在一起，便于用戶的使用操作。lJavaScript是一種基于對(duì)象的語言，這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。lJavaScript運(yùn)行時(shí)不訪問本地的硬盤，也不會(huì)將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行

21、修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。 lJavaScript可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無須經(jīng)過服務(wù)器上的Web服務(wù)程序。它對(duì)用戶的響應(yīng)，是以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在頁面上執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件”。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，就會(huì)引發(fā)預(yù)先設(shè)定的動(dòng)作。lJavaScript依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。與計(jì)算機(jī)上配置的操作系統(tǒng)無關(guān)，因而具有跨平臺(tái)性。 lJavaScript是一種新的描述語言，它可以被

22、嵌入到HTML的文件之中。JavaScript語言可以做到回應(yīng)使用者的需求事件，不用任何的網(wǎng)絡(luò)來回傳輸資料，所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，不用經(jīng)過服務(wù)器處理，再傳回來的過程，而直接可以被客戶端的應(yīng)用程序所處理。5.2.2 一個(gè)一個(gè)JavaScript應(yīng)用的實(shí)例應(yīng)用的實(shí)例l在網(wǎng)頁上插入一幅圖片，給圖片設(shè)置的行為是：當(dāng)鼠標(biāo)指向圖片時(shí)，彈出信息框，即“onMouseOver”事件，引發(fā)彈出信息框的動(dòng)作。圖5-17所示是“行為”設(shè)置好后的JavaScript代碼。與空白網(wǎng)頁較比，分別在和區(qū)域中多出一段代碼，這就是嵌入的JavaScript程序。l程序如下：lll無標(biāo)題文檔llllll lll其中：l

23、function 定義一個(gè)函數(shù)。lMM_popupMsg(msg) 是彈出對(duì)話框函數(shù)。lonMouseOver=MM_popupMsg(動(dòng)物趣聞) 當(dāng)發(fā)生“onMouseOver”事件時(shí)調(diào)用“MM_popupMsg(msg)”函數(shù)。圖5-17一個(gè)簡單的JavaScript程序l其中：lfunction 定義一個(gè)函數(shù)。lMM_popupMsg(msg) 是彈出對(duì)話框函數(shù)。lonMouseOver=MM_popupMsg(動(dòng)物趣聞) 當(dāng)發(fā)生“onMouseOver”事件時(shí)調(diào)用“MM_popupMsg(msg)”函數(shù)。5.2.3 JavaScript的語法規(guī)則的語法規(guī)則l前面已經(jīng)提到，JavaScr

24、ipt是嵌入到HTML中使用的。所謂的嵌入就是在網(wǎng)頁的和之間，插入的JavaScript代碼。lJavaScript語言的標(biāo)識(shí)符，類同于C語言。也有表達(dá)式、語法、變量、常量、操作符、對(duì)象、函數(shù)、事件等。編程的方式也類同于C，也有循環(huán)、數(shù)組、字符串等。l1JavaScript的表達(dá)式l一個(gè)表達(dá)式就是由常量、變量和操作符相連接而組成的式子，這個(gè)式子可以唯一地得出一個(gè)值。l 條件表達(dá)式l 一個(gè)條件表達(dá)式是形如這樣的式子：l （條件）？A：Bl其中A和B為任何類型的值，包含數(shù)值、字符串以及布爾值等，如果表達(dá)式中的條件成立，則表達(dá)式取值A(chǔ)：否則，表達(dá)式式取值B。l例：status=(campo=19)

25、? 歡迎光臨 : 請(qǐng)下次再來l 這個(gè)表達(dá)式首先判斷變量campo的值是否大于等于19。如果滿足條件，表達(dá)式的值為：“歡迎光臨”，否則為：“請(qǐng)下次再來”。 l 表達(dá)式的賦值操作符l 一個(gè)賦值操作符把它右邊的表達(dá)式的值送給左邊的變量。最基本的賦值操作符是等號(hào)（“=”）。 l 例：x = y + 1;l這意味著把等號(hào)右邊y + 1 的值賦給左邊的變量x。l2JavaScript的基本語法lJavaScript的基本語法包括：變量聲明、賦值語句、函數(shù)定義語句、條件分支語句、 l循環(huán)語句、對(duì)象操作語句、注釋語句等。 l（1）變量聲明、賦值語句：varl var語句聲明了一個(gè)變量的名稱，同時(shí)也可以讓這個(gè)變

26、量具有一個(gè)初始值。l如果var語句在一個(gè)函數(shù)中聲明變量，則這下個(gè)變量的有效區(qū)域只限于這個(gè)函數(shù)，叫局部變量；如果var語句在函數(shù)體外，則有效區(qū)為整個(gè)應(yīng)用程序，叫全局變量。l（2）函數(shù)定義語句function，return語句lfunction用來定義一個(gè)函數(shù)，讓瀏瀏覽器知道有這樣一個(gè)函數(shù)，但只有當(dāng)函數(shù)被調(diào)用時(shí)才會(huì)執(zhí)行。l 基本格式：lfunction 函數(shù)名 （參數(shù)，變?cè)﹍函數(shù)體lreturn 表達(dá)式ll說明：l當(dāng)調(diào)用函數(shù)時(shí)，所用變量或字面量均可作為變?cè)獋鬟f。l函數(shù)由關(guān)鍵字function定義。l函數(shù)名：定義自己函數(shù)的名字。l參數(shù)表：是傳遞給函數(shù)使用或操作的值，其值可以是常量 ，變量或其它表達(dá)

27、式。l通過指定函數(shù)名（實(shí)參）來調(diào)用一個(gè)函數(shù)。l必須使用return將值返回。l函數(shù)名對(duì)大小寫是敏感的。 l下面舉一個(gè)簡單的例子： l l l 歡迎光臨l l function go() l l alert(歡迎光臨)l l l l l ll ll l程序中：l.：在標(biāo)識(shí)符之間插入JavaScript腳本。lalert()：JavaScript的窗口對(duì)象方法，其功能是彈出一個(gè)對(duì)話框，并顯示括號(hào)中的字符串。l：注釋，使用注釋這是一個(gè)好的編程習(xí)慣，以使其他人讀懂該段程序。對(duì)于不認(rèn)識(shí) JavaScript代碼的瀏覽器，則其中的標(biāo)識(shí)被忽略；若認(rèn)識(shí)，則執(zhí)行其結(jié)果。l 為標(biāo)簽結(jié)束。l該網(wǎng)頁顯示的結(jié)果如圖5-

28、18所示。 圖5-18 JavaScript程序的顯示結(jié)果l（3）條件分支語句 if.elsel基本格式為：lif（表述式）l語句段；l. elsel語句段；l功能：若表達(dá)式為true，則執(zhí)行語句段；否則執(zhí)行語句段。l說明：if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執(zhí)行順序。l（4）循環(huán)語句for語句l 基本格式：for（初始化；條件；增量）l語句集；l功能：實(shí)現(xiàn)條件循環(huán)，當(dāng)條件成立時(shí)，執(zhí)行語句集，否則跳出循環(huán)體。l說明：初始化參數(shù)告訴循環(huán)的開始位置，必須賦予變量的初值；l條件：是用于判別循環(huán)停止時(shí)的條件。若條件滿足，則執(zhí)行循環(huán)體，否則 跳出。l增量：

29、主要定義循環(huán)控制變量在每次循環(huán)時(shí)按什么方式變化。l（5）對(duì)象操作語句with，thislwith語句：使用該語句的意思是，在該語句體內(nèi)，任何對(duì)變量的引用被認(rèn)為是這個(gè)對(duì)象的屬性，以節(jié)省一些代碼。l基本格式：lwith objectl.l所有在with語句后的花括號(hào)中的語句，都是在后面object對(duì)象的作用域的。lthis關(guān)鍵字：this是對(duì)當(dāng)前的引用，在JavaScript由于對(duì)象的引用是多層次，多方位的，往往一個(gè)對(duì)象的引用又需要對(duì)另一個(gè)對(duì)象的引用，而另一個(gè)對(duì)象有可能又要引用另一個(gè)對(duì)象，這樣有可能造成混亂，最后自己已不知道現(xiàn)在引用的那一個(gè)對(duì)象，為此JavaScript提供了一個(gè)用于將對(duì)象指定當(dāng)前

30、對(duì)象的語句this。l 3JavaScript的變量與常量 l在JavaScript中，可以使用以下幾種數(shù)據(jù)類型：l（1）數(shù)字：JavaScript語言實(shí)現(xiàn)的時(shí)候并沒有把整數(shù)和實(shí)數(shù)嚴(yán)格的分開，可以自由轉(zhuǎn)換。l（2）邏輯值：只有兩個(gè)常量ture和false。l（3）字符串：放置在單引號(hào)或雙引號(hào)內(nèi)的一串字符，例如：“萬馬奔騰”。l（4）undefined類型：專門用指明一個(gè)已經(jīng)創(chuàng)建，但是卻還沒有一個(gè)初值的變量。l（5）對(duì)象：對(duì)象是JavaScript中重要組成部分?？梢园褜?duì)象想象成為一個(gè)命名好的容器，可以放數(shù)據(jù)，還可以對(duì)數(shù)據(jù)進(jìn)行操作。 l（6）變量的命名規(guī)則：l必須以字母或下劃線開始；后面的可以是

31、數(shù)字（大小寫不同的變量名是不同的變量）。l不可用保留字作為變量名。l 3JavaScript的變量與常量 l在JavaScript中，可以使用以下幾種數(shù)據(jù)類型：l（1）數(shù)字：JavaScript語言實(shí)現(xiàn)的時(shí)候并沒有把整數(shù)和實(shí)數(shù)嚴(yán)格的分開，可以自由轉(zhuǎn)換。l（2）邏輯值：只有兩個(gè)常量ture和false。l（3）字符串：放置在單引號(hào)或雙引號(hào)內(nèi)的一串字符，例如：“萬馬奔騰”。l（4）undefined類型：專門用指明一個(gè)已經(jīng)創(chuàng)建，但是卻還沒有一個(gè)初值的變量。l（5）對(duì)象：對(duì)象是JavaScript中重要組成部分。可以把對(duì)象想象成為一個(gè)命名好的容器，可以放數(shù)據(jù)，還可以對(duì)數(shù)據(jù)進(jìn)行操作。 l（6）變量的命

32、名規(guī)則：l必須以字母或下劃線開始；后面的可以是數(shù)字（大小寫不同的變量名是不同的變量）。l不可用保留字作為變量名。l1）代數(shù)操作符：l* 取模運(yùn)算符%：l A%B 返回整數(shù)A被整數(shù)B除后的余數(shù)。l 例如：24 % 5 = 4l * 增量運(yùn)算符+:l A+ 的形式，返回度量的值后再做增量運(yùn)算；l +A 的形式，則先對(duì)度量做增量運(yùn)算，再返回增量運(yùn)算后的值。l 例如：l x=4;l y=x+;l yy=+x;l 結(jié)果：y=4 yy=5l * 減量運(yùn)算符-：（形同增量運(yùn)算符） l * 取反運(yùn)算符-：l 采用-X的形式，取反運(yùn)算符可以改變操作數(shù)X的符號(hào)。l 例如：l X=5l 則-X得到-5。l（2）比較

33、操作符：l* A=B 如果兩個(gè)操作數(shù)相等，返回true l* A!=B 如果兩個(gè)操作數(shù)不等，返回true l* A=B 如果A大于或者等于B，返回true l* aB 如果A大于B，返回true l* A=b 如果A小于或等于B，返回true l* AB 如果A小于B，返回truel5JavaScript的對(duì)象l（1）創(chuàng)建自定義對(duì)象lJavaScript中創(chuàng)建對(duì)象的方法并不困難，其格式為：lFunction Object（屬性表）lTp1=prop1 lTp2=prop2lThis.meth=FunctionName1;lThis.meth=FunctionName

34、2;l在一個(gè)對(duì)象的定義中，可以為該對(duì)象指明其屬性和方法。通過屬性和方法構(gòu)成了一個(gè)對(duì)象的實(shí)例。下面是自己創(chuàng)建一個(gè)關(guān)于student對(duì)象的過程：lFunction student (name,city,creatDate URL)lT=name lThis.city=citylThis.creatDate=New Date(creatDate)lThis.URL=URLl其基本含義如下：lName：指定一個(gè)“單位”名稱。 lCity：“單位”所在城市。 lCreatDate：記載student對(duì)象的更新日期。 lURL：該對(duì)象指向一個(gè)網(wǎng)址。l（2）瀏覽器中可供利用的幾大類對(duì)象：l在

35、JavaScript中除了能夠創(chuàng)建自己的對(duì)象外，瀏覽器中提供了幾大類可利用的對(duì)象，這些對(duì)象提供給程序設(shè)計(jì)人員使用，減輕了編程人的設(shè)計(jì)工作量，提高設(shè)計(jì)Web頁面的能力，這些對(duì)象是：l瀏覽器對(duì)象：提供有關(guān)瀏覽器的信息l窗口對(duì)象：窗口對(duì)象處于對(duì)象層次的最頂端，它提供了處理窗口的方法和屬性。l位置對(duì)象：對(duì)象提供了與當(dāng)前打開的URL一起工作的方法和屬性，它是一個(gè)靜態(tài)的對(duì)象。l歷史對(duì)象：對(duì)象提供了與歷史清單有關(guān)的信息。l文檔對(duì)象：對(duì)象包含了與文檔元素一起工作的對(duì)象，它將這些元素封裝起來供編程人員使用。l（3）文檔對(duì)象l每一類對(duì)象中又包含幾個(gè)對(duì)象，就拿文檔對(duì)象來說，它包含了與文檔元素一起工作的三個(gè)對(duì)象，這三

36、個(gè)對(duì)象為：links，anchor，form。 lanchor：錨對(duì)象，錨對(duì)象指的是 標(biāo)識(shí)在HTML源碼中存在時(shí)產(chǎn)生的對(duì)象。它包含著文檔中所有的anchors信息。llinks：鏈接對(duì)象，鏈接對(duì)象指的是用 標(biāo)記的連接一個(gè)超文本或超媒體的元素作為一個(gè)特定的URL。lForm：窗體對(duì)象，窗體對(duì)象是文檔對(duì)象的一個(gè)元素，它含有多種格式的對(duì)象儲(chǔ)存信息，使用它可以在JavaScript腳本中編寫程序進(jìn)行文字輸入，并可以用來動(dòng)態(tài)改變文檔的行為。 l（4）關(guān)于對(duì)象的屬性l仍以文檔對(duì)象中的鏈接對(duì)象為例，鏈接對(duì)象的屬性，主要用于在引用Href標(biāo)識(shí)時(shí)，控制著顏色的格式。其屬性主要有以下幾個(gè)方面：llinkcolor

37、：超鏈接的顏色。lalinkcolor：激活鏈接顏色(鼠標(biāo)按住未放時(shí))。lVlinkColor：瀏覽過后鏈接的顏色。lbgcolor：背景顏色。lfgcolor：前景顏色。l關(guān)于這些屬性，在制作網(wǎng)頁時(shí)讀者已經(jīng)很熟悉了，Dreamweaver的屬性對(duì)話框中也主要包含這些屬性。6JavaScript中的事件處理中的事件處理lJavaScript事件驅(qū)動(dòng)中的事件是通過鼠標(biāo)或熱鍵的動(dòng)作引發(fā)的。它主要有以下幾個(gè)事件：l（）單擊事件onClickl當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)，產(chǎn)生onClick事件。同時(shí)onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對(duì)象中產(chǎn)生：lbutton（按鈕對(duì)象）lcheckbox（復(fù)選框）或（檢查列表框）lradio （單選鈕）lreset buttons（重要按鈕）lsubmit buttons（提交按鈕）l一切文本和圖片l例子：通過按鈕圖標(biāo)激活