沒有幻燈片標(biāo)題-西部故事

1、第9章 網(wǎng)頁制作,學(xué)習(xí)要點： HTML語言基本知識 JavaScript腳本語言,網(wǎng)頁建立與維護(hù),9.1 網(wǎng)頁的制作語言,9.2 網(wǎng)頁腳本語言——JavaScript,退出,9.1.1 HTML 語言的結(jié)構(gòu),9.1.3 超文本鏈接指針,9.1.2 構(gòu)成網(wǎng)頁的基本元素,9.1..4在HTML文件中使用圖像,9.1.6 表單的應(yīng)用,9.1.5 框架結(jié)構(gòu)的使用,9.1.7 HTML中的表格,9.1

2、網(wǎng)頁的制作語言,返 回,HTML（超文本標(biāo)記語言）是一種描述文檔結(jié)構(gòu)的標(biāo)注語言，它使用一些約定的標(biāo)記對WWW上的各種信息進(jìn)行標(biāo)注。當(dāng)用戶瀏覽WWW上的信息時，瀏覽器會自動解釋這些標(biāo)記的含義，并按照一定的格式在屏幕上顯示這些被標(biāo)記的文件。HTML的優(yōu)點是其跨平臺性。即任何可以運行瀏覽器的計算機都能閱讀并顯示HTML文件，不管其操作系統(tǒng)是什么，并且顯示結(jié)果相同。 HTML文件是標(biāo)準(zhǔn)的ASCII文件，且其后

3、綴名為htm或html的文件。HTML文件看起來象是加入了許多被稱為鏈接簽（tag）的特殊字符串的普通文本文件。從結(jié)構(gòu)上講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”， 即它有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始鏈接簽（start tag），元素結(jié)束標(biāo)記叫做結(jié)尾鏈接簽（end tag），在起始鏈接簽和結(jié)尾鏈接簽中間的部分是元素體。 每一個

4、元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。,9.1.1 HTML 語言的結(jié)構(gòu),下面來看一個HTML文件，它在瀏覽器中顯示的結(jié)果如圖8-15所示。, 廣東農(nóng)工商學(xué)院 這是一HTML的測試文件 ,標(biāo)記用來給網(wǎng)頁命名，網(wǎng)頁的名稱寫在與標(biāo)記之間，顯示在瀏覽器的標(biāo)題欄中。例如，在圖8-15中所示的瀏覽器頁面中，其

5、標(biāo)題欄所顯示的“武漢工業(yè)學(xué)院”是在HTML文件中的由廣東農(nóng)工商學(xué)院所定義的。,9.1.2 構(gòu)成網(wǎng)頁的基本元素,1．標(biāo)記,…到…標(biāo)題元素有6種，用于表示文章中的各種題目。字體大小到順序減小。下面這個例子中分別使用了到的標(biāo)題。其HTML文件如下所示，在瀏覽器中的顯示效果如圖8-16所示。,2．標(biāo)記,源文件,3．預(yù)格式化文本標(biāo)記,源文件,HTML的輸出是基于窗口的，因而HTML文件在輸出時都是要重新排版的，即把文本上任何額外的的字符（如空格

6、、制表符和回車符）都忽略，若確實不需要重新排版的內(nèi)容，可以用…通知瀏覽器。在圖8-17和圖8-18中顯示了有無預(yù)格式化文本標(biāo)記的對比。,4．和標(biāo)記,源文件,用于強制換行。 表示一個段落的開始。一般可不用。,5． 標(biāo)記,這幾個標(biāo)記都是用來修飾所包含文檔的。標(biāo)記使文本加粗；標(biāo)記使文本傾斜；標(biāo)記給文本加下劃線；標(biāo)記給文本加刪除線；標(biāo)記使文本字體加重。下面給出一個HTML源文件，其顯示結(jié)果如圖8-19所示。,6．標(biāo)記,…用來修改字體和

7、顏色。其中COLOR屬性指定文字顏色，顏色的表示可以用6位十六進(jìn)制代碼，如；SIZE屬性指定相對尺寸。另外， 如果用戶想要設(shè)置網(wǎng)頁的背景色和文字顏色，可以將標(biāo)記擴充為：其中各個元素的說明如表8-1所示，表8-2列出了一些常用顏色的RGB值。,超文本鏈接指針是HTML最吸引人的優(yōu)點之一，可以這樣說，如果沒有超文本鏈接指針，就沒有萬維網(wǎng)。使用超文本鏈接指針可以使順序存放的文件具有一定程度上隨機訪問的能力，這更加符合人類的踴躍思維方式。

8、超文本鏈接指針是指把并不連續(xù)的兩段文字或兩個文件聯(lián)系起來。,9.2.3 超文本鏈接指針,1． 統(tǒng)一資源定位器URL,統(tǒng)一資源定位器（Uniform Resource Locator）是文件名的擴展。在單機系統(tǒng)中，如果要找一個文件，需要知道該文件所在的路徑和文件名；在互連網(wǎng)上同樣找一個文件，除了要知道以上內(nèi)容之外，顯然還需要知道該文件存放在哪個網(wǎng)絡(luò)的哪臺主機中才行。與單機系統(tǒng)不一樣的是，在單機系統(tǒng)中所有的文件都由統(tǒng)一的操作系統(tǒng)來管理，因

9、而不必給出訪問該文件的方法；而在互連網(wǎng)上，每個網(wǎng)絡(luò)，每臺主機的操作系統(tǒng)都不一樣，因此必須指定訪問該文件的方法。一個URL包括了以上所有的信息。它的構(gòu)成為： protocol:// machine.name[:port]／directory／filename,2． 建立一個鏈接,（1）鏈接到其它站點 在HTML文件中用鏈接指針指向一個目標(biāo)。其基本格式為： zzz 其中zzz可以是文字或圖片并

10、顯示在網(wǎng)頁中，當(dāng)用戶單擊它時，瀏覽器就會顯示由href屬性中的統(tǒng)一資源定位器（URL）所指向的目標(biāo)，實際上這個ZZZ在HTML文件中充當(dāng)指針的角色，它一般顯示為藍(lán)色。href中的h表示超文本，而ref表示“訪問”或“引用”的意思。例如：廣東農(nóng)工商學(xué)院 用戶用鼠標(biāo)單擊“廣東農(nóng)工商學(xué)院”，即可看到廣東農(nóng)工商學(xué)院的主頁內(nèi)容。在這個例子中， 充當(dāng)指針的是“廣東農(nóng)工商學(xué)院”。,（2）同一個文件中的鏈接 超鏈可以指向自己

11、的計算機中的某一個文件這種鏈接方式叫做本地鏈接。前面曾提到過一個超文本鏈接指針包括兩個部分，一個指向目標(biāo)的鏈接指針，另一個是被指向的目標(biāo)。 標(biāo)識一個目標(biāo)的方法為：……. NAME屬性將放置該標(biāo)記的地方標(biāo)記為“KKK”，KKK是一個全文唯一的標(biāo)記串，和 之間的內(nèi)容可有可無。這樣，就把放置標(biāo)記的地方做了一個叫做“KKK”的標(biāo)記（如果對Microsoft Word很熟悉的話，這就相當(dāng)于在Wo

12、rd中的定義“書簽”）。做好標(biāo)記后，可以用下列方法來指向它。轉(zhuǎn)向下一處 這時就可以點擊“轉(zhuǎn)向下一處”這段文字，瀏覽器就從標(biāo)記名為KKK的部分開始顯示此HTML文件的內(nèi)容了。,9.2.4 在HTML文件中使用圖像,1．在HTML文件中顯示圖像,在瀏覽器上顯示的圖像必須有特定的格式，目前使用的瀏覽器通常支持GIF和JPEG格式的圖像。在HTML網(wǎng)頁中加圖像是通過標(biāo)記實現(xiàn)的，它有幾個較為重要的屬性。其中：SRC屬性

13、：指明圖形的URL地址；HEIGHT屬性：決定圖形的高度；WIDTH屬性：決定圖形的寬度；BORDER屬性：決定邊框線的寬度，0-表示無邊框；ALT屬性：指明圖像顯示的備用文本；,源文件,2．在HTML文件中利用圖像建立鏈接,如果在鏈接標(biāo)記和的中間放置一個標(biāo)記，這個圖像將會成為一個可擊點，產(chǎn)生一個鏈接。例如： 當(dāng)用戶單擊這個圖像后，瀏覽器就會顯示“default.asp”這個文件的內(nèi)容了

14、。,9.2.5 框架結(jié)構(gòu)的使用,框架能夠?qū)㈨撁娣殖蓴?shù)個獨立變化的窗口，每個窗口可以顯示不同的Web頁面，并可以不斷更換顯示的對象。使用框架結(jié)構(gòu)，可以使屏幕的信息量增大，使Web網(wǎng)頁更加吸引讀者。有關(guān)框架內(nèi)容的HTML語法為：…… 其中...中的內(nèi)容顯示在不支持分框的瀏覽器窗口中，因而這里指向一個普通版本的HTML文件，以便使用不支持分框瀏覽器的用戶閱讀。 分框由指定，并且

15、可以嵌套，分區(qū)中各部分顯示的內(nèi)容用指定?！　⌒枰f明的是，frame是一個新出現(xiàn)的元素，許多瀏覽器不支持它。分框可以將窗口橫向分成幾個部分，也可以縱向分成幾個部分，還可以混合分框。,框架結(jié)構(gòu)標(biāo)記可以嵌套，用以實現(xiàn)大框架中的小框架。它主要有兩個屬性：ROWS和COLS，它們可以將瀏覽器頁面分為N行M列，當(dāng)然也可以各自獨立使用。下面來看一個框架結(jié)構(gòu)的例子。如圖8-21，其HTML源文件如下所示。, 廣東農(nóng)工商學(xué)院

16、 , ,標(biāo)記有以下主要屬性：SRC屬性 指定框架單元的URL源，如第6行中指出的是當(dāng)前主機當(dāng)前目錄下的“a.htm”文件。即在此框中顯示“a.htm”的內(nèi)容。NAME屬性 為該框架單元起個標(biāo)識名，主要用來為將來改變框架內(nèi)容提供入口。SCROLLING屬性 設(shè)置

17、框架是否使用滾動務(wù)。有YES、NO和AUTO三個值，分別表示強制使用滾動條，禁止使用滾動條和自動判斷使用滾動條。,9.2.6 表單的應(yīng)用,HTML提供的表單是用來將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。例如可以利用表單建立一個錄入界面，也可以利用表單對數(shù)據(jù)庫進(jìn)行查詢。在這里需要聲明的是，表單的操作是與服務(wù)器進(jìn)行交互的操作，而服務(wù)器端的操作是通過服務(wù)器端的程序來實現(xiàn)的。實現(xiàn)在服務(wù)器端的操作有許多種方式，其中ASP（動態(tài)服務(wù)網(wǎng)頁）的方式就

18、是一種，它可以通過ADO方式與多種數(shù)據(jù)庫相連。 ASP（Active Server Page）程序是在服務(wù)器端工作，并且通過服務(wù)器端的編譯動態(tài)地送出HTML文件給客戶端，它負(fù)責(zé)處理HTML文件與運行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入他們的信息（這個信息可以是查詢條件，也可以是傳送給服務(wù)器的某些內(nèi)容）并提交給服務(wù)器后，便激活了一個ASP程序。該ASP程序又可以調(diào)用操作系統(tǒng)下的其他程序（例如數(shù)據(jù)庫管理系統(tǒng)）完成讀者的

19、查詢?nèi)蝿?wù)，當(dāng)操作系統(tǒng)下的程序完成查詢之后，便把查詢結(jié)果傳給ASP，通過ASP傳給Web服務(wù)器。由此可以看出，ASP程序在用戶與服務(wù)器之間進(jìn)行交互查詢時所起的重要作用。,1. 什么是表單,HTML提供的表單是用來將用戶數(shù)據(jù)從瀏覽器傳遞給Web服務(wù)器的。例如可以利用表單建立一個錄入界面，也可以利用表單對數(shù)據(jù)庫進(jìn)行查詢。在這里需要聲明的是，表單的操作是與服務(wù)器進(jìn)行交互的操作，而服務(wù)器端的操作是通過服務(wù)器端的程序來實現(xiàn)的。實現(xiàn)在服務(wù)器端的操作有

20、許多種方式，其中ASP（動態(tài)服務(wù)網(wǎng)頁）的方式就是一種，它可以通過ADO方式與多種數(shù)據(jù)庫相連。 ASP（Active Server Page）程序是在服務(wù)器端工作，并且通過服務(wù)器端的編譯動態(tài)地送出HTML文件給客戶端，它負(fù)責(zé)處理HTML文件與運行在服務(wù)器端的程序之間的數(shù)據(jù)交換。當(dāng)用戶輸入他們的信息（這個信息可以是查詢條件，也可以是傳送給服務(wù)器的某些內(nèi)容）并提交給服務(wù)器后，便激活了一個ASP程序。該ASP程序又可以調(diào)用操作系

21、統(tǒng)下的其他程序（例如數(shù)據(jù)庫管理系統(tǒng)）完成讀者的查詢?nèi)蝿?wù)，當(dāng)操作系統(tǒng)下的程序完成查詢之后，便把查詢結(jié)果傳給ASP，通過ASP傳給Web服務(wù)器。由此可以看出，ASP程序在用戶與服務(wù)器之間進(jìn)行交互查詢時所起的重要作用。,1. 什么是表單,表單就是為Internet網(wǎng)絡(luò)用戶在瀏覽器上建立一個交互接口，使Internet網(wǎng)絡(luò)用戶可以在這個接口上輸入自己的信息，然后使用提交按鈕，將Internet網(wǎng)絡(luò)用戶的輸入信息傳送給Web服務(wù)器。

22、 在HTML中，有一個專門的標(biāo)記FORM提供表單的功能，由表單開始標(biāo)記和表單結(jié)束標(biāo)記組成，表單中可以設(shè)置文本框、按鈕或下拉菜單，它們也是通過標(biāo)記完成。在表單的開始標(biāo)記中帶有兩個屬性：ACTION和METHOD。書寫表單的HTML格式如下…,2. 表單的標(biāo)記,FORM標(biāo)記有以下主要屬性：（1）ACTION屬性是用來指出，當(dāng)這個FORM提交后需要執(zhí)行的駐留在Web服務(wù)器上的程序名（包括路徑）是什么。一旦Internet網(wǎng)絡(luò)用戶提交

23、輸入信息后服務(wù)器便激活這個程序，完成某種任務(wù)。例如： … 當(dāng)用戶點擊“提交”按鈕以后，Web服務(wù)器上的“l(fā)ogin.asp”將接收用戶輸入的信息，以登記用戶信息。（2）METHOD屬性是用來說明從客戶端瀏覽器將Internet網(wǎng)絡(luò)用戶輸入的信息傳送給Web服務(wù)器時所使用的方式，它有兩種方式：POST和GET。默認(rèn)的方式是GET，這兩者的區(qū)別是在使用POST時，表單中所有的變量及其值都按一定的規(guī)律放入報文中，而不是附加在ACTIO

24、N所設(shè)定的URL之后。在使用GET時將FORM的輸入信息作為字符串附加在ACTION所設(shè)定的URL的后面，中間用“？”隔開，即在客戶端瀏覽器的地址欄中可以直接看見這些內(nèi)容。,2. 表單的標(biāo)記,HTML中的INPUT標(biāo)記是表單中最常用的標(biāo)記。我們在網(wǎng)頁上所見到的文本框、按鈕等等都由這個標(biāo)記引出的。下面是INPUT標(biāo)記的標(biāo)準(zhǔn)格式：其中TYPE屬性是用來說明提供給用戶進(jìn)行信息輸入的類型是什么。例如是文本框、單選按鈕或多選按鈕。它的取值如

25、下：TYPE = “TEXT”表示在表單中使用單行文本框 = “PASSWORD” 表示在表單中為用戶提供密碼輸入框 = “RADIO” 表示在表單中使用單選按鈕 = “CHECKBOX” 表示在表單中使用多選按鈕 = “SUBMIT”表示在表單中使用提交按鈕 = “RESET”表示在表單中使用重置按鈕,3．HTML中的INPUT標(biāo)記,用一個例子說明文

26、字輸入和密碼輸入的制作。,（1）文字輸入和密碼輸入, 這是個測試頁 請輸入您的真實姓名: 您的主頁的網(wǎng)址: 密碼: ,（2）復(fù)選框（Checkbox） 和 單選框

27、（Radio Button）, 這是個測試頁 選擇一種你喜愛的水果: 香蕉 草莓 橘子 選擇你所喜愛的運動:

28、 足球 籃球 排球 ,（3）按鈕的制作,在上面幾個例子中，都有兩個按扭，一個是“發(fā)送”按鈕，另一個“重置”按鈕。其實“發(fā)送”按鈕真正的含義叫“提交”即當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊這個按鈕后，用戶輸入的信息便提交給一個駐留在Web服務(wù)器上的程序，

29、讓服務(wù)器進(jìn)行處理，其典型的格式：。提交按鈕在FORM中是必不可少的，前幾個例子只是說明INPUT語句中類型的使用，作為FORM語句并不完整，每個FORM中有且僅有一個提交按鈕。當(dāng)設(shè)置“提交”按鈕標(biāo)記時，如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現(xiàn)“SUBMIT”的字樣，這個字樣也可以自己設(shè)定，改變按鈕上的提示。例如：VALUE=“提交”。 另一種在瀏覽器常用的按鈕叫“重置”按鈕，當(dāng)Internet網(wǎng)絡(luò)用戶用鼠標(biāo)單擊

30、這個按鈕后，網(wǎng)絡(luò)用戶輸入的信息被清除，讓網(wǎng)絡(luò)用戶重新輸入信息。其典型的格式：，而且在這個標(biāo)記設(shè)置中如果缺省VALUE屬性，則瀏覽器窗口中的按鈕上出現(xiàn)“RESET”的字樣，這個字樣也可以自己設(shè)定，來改變按鈕上的提示，例如：VALUE=“重新輸入”。,（4）HTML中的SELECT標(biāo)記,在制做HTML文件時，使用…標(biāo)記可以在瀏覽器窗口中設(shè)置下拉式菜單或帶有滾動條的菜單，Internet網(wǎng)絡(luò)用戶可以在菜單中選中一個或多個選項。,

31、 廣東農(nóng)工商學(xué)院 請從下面課程中選擇幾門選擇課: 網(wǎng)絡(luò)技術(shù) 書法 音樂欣賞 現(xiàn)代文學(xué) 多媒體技術(shù) ,9.2.7 HTML中的表格,下面看一個表

32、格的例子,從這個例子可以看出一個表格有一個標(biāo)題（Caption），它表明表格的主要內(nèi)容，并且一般位于表的上方；表格中由行和列分割成的單元叫做“表元”（Cell），它又分為表頭（用TH標(biāo)記來表示）和表數(shù)據(jù)（用TD標(biāo)記來表示）；表格中分割表示的行列線稱為“框線”（B order）。,一個表格的基本框架如下所示：,1．表格的標(biāo)記,,,（1）TABLE標(biāo)記,一個表

33、格至少一個TABLE標(biāo)記，由它來決定一個表格的開始和結(jié)束，而且TABLE標(biāo)記可以嵌套。TABLE標(biāo)記有以下五種屬性：BORDER屬性，指定圍繞表格的框的寬度（只能用像素）。CELLSPACING屬性，指定框線的寬度CELLPADDING屬性，用于設(shè)置表元內(nèi)容與邊框線之間的間距。ALIGN屬性用來控制表格本身在頁面上的對齊方式。其取值可是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）。WIDTH屬性，用來設(shè)置

34、表格的寬度，可以以像素為單位，也可用占瀏覽器窗口的百分比來定義。,（2）CATION標(biāo)記,CATION標(biāo)記用來標(biāo)注表格標(biāo)題的。CATION標(biāo)記必須緊接在TABLE開始標(biāo)記之后放在第一個TR標(biāo)記之前。通過該標(biāo)記所定義的表格標(biāo)題一般顯示在表格的上方，而且其水平方向是居中對齊。另外，如需要對表格的標(biāo)題突出顯示，可以在CATION標(biāo)記之間加入其它對字體進(jìn)行加重顯示的標(biāo)記。如： 表格標(biāo)題強調(diào)……….,（3）

35、TR標(biāo)記,定義表格的一行。TR標(biāo)記中有兩個屬性，一個是ALIGN屬性，用來設(shè)置表行中的每個表元在水平方向的對齊方式，其取值可以是LEFT（左對齊）、CENTER（居中對齊）、RIGHT（右對齊）；另一個是VLIGN屬性，用來設(shè)置表行中的每個表元在垂直方向的對齊方式，其取值可以是TOP（向上對齊）、CENTER（居中對齊）、BOTTOM（向下對齊）。例如，要使表行中各單元的內(nèi)容水平方向右對齊、垂直方向居中對齊，可使用如下源代碼：,（4

36、）TH標(biāo)記,TH標(biāo)記用來表示一個表行中的各個單元。TH標(biāo)記內(nèi)幾乎可以包含所有的HTML標(biāo)記，甚至還可以嵌套表格。該標(biāo)記與TR標(biāo)記同樣具有ALIGN和VALIGN屬性，如果在TH標(biāo)記和TR 標(biāo)記中都設(shè)置了ALIGN和VALIGN屬性，而且它們所設(shè)置的屬性值不相同，這時以TH標(biāo)記所設(shè)置的屬性值為準(zhǔn)。另外，TH標(biāo)記還有兩個屬性，一個是WIDTH屬性，用來設(shè)置表元的寬度，另一個HEIGHT屬性，用來設(shè)置表元的高度。這兩個屬性的取值單位都是像素。

37、在同一行中將多個表元設(shè)置為不同高度，或者在同一列中將多個表元設(shè)置為不同寬度，都有可能導(dǎo)致不可預(yù)料的結(jié)果。,在這個實例中，通過制作一個登記表格來給大家來說明如何制作一個比較復(fù)雜的表格。在表格中經(jīng)常會出現(xiàn)跨多行、多列的表元，這就要利用TD標(biāo)記另外兩個屬性，即COLSPAN和ROWSPAN屬性。例如 登記照 表示這個表項標(biāo)題將橫跨三個表項的位置； 登記照 表示這個表項標(biāo)題將縱跨三個表項的位置；另外每個表元還可以設(shè)置其

38、背景顏色。例如 登記照 還可以在表格中插入超級鏈接或在表格中插入圖片，如果能對這個例子舉一反三的話，那么僅需制作一個無框線的表格，就可以把各種數(shù)據(jù)按照自己所希望的形式在頁面進(jìn)行布置。,2．表格使用實例,下面就給出一個具體的實例, 表格綜合實例 大獎賽登記表 報名號757性別女

39、姓名江小麗 ,推薦單位宇宙公司,下面就給出一個具體的實例, 推薦單位 宇宙公司 ,9.2.1 JavaScript的基礎(chǔ)知識,9.2.2 JavaScript語言,9.2.3 JavaScript中的函數(shù),9.2.4 JavaScript的事件,9.2 網(wǎng)頁腳本語言——JavaScript,9.2.5

40、 JavaScript中的對象,返 回,9.2.1 JavaScript的基礎(chǔ)知識,腳本語言是一種簡單的描術(shù)性語言，它是針對HTML語言不能很好地解決動態(tài)交互這個缺點而引入的，它能對Web頁面中的元素進(jìn)行控制。一般來說，腳本語言是通過一個的標(biāo)記嵌入到HTML文檔中，并可以被瀏覽器解釋執(zhí)行，插入的腳本語言就如同子程序一樣被HTML元素所調(diào)用，成為HTML的一部分。目前比較流行的腳本語言有網(wǎng)景公司（Netscope）的

41、JavaScript和微軟公司（Microsoft）的VBScript。 JavaScript是基于Netscape瀏覽器的，類似于Java編程語言的腳本語言，并且是一種基于對象的、面向Internet或Intranet的編程語言，使用它可以開發(fā)關(guān)于Internet或Intranet客戶端和服務(wù)器的應(yīng)用程序，也可以方便地嵌入到計算機文件中。由于JavaScript是第一個在WWW上使用的腳本語言，因而它一度是最流行的W

42、eb站點腳本語言，用它可以方便地編排HTML網(wǎng)頁，同時還可以控制動態(tài)HTML。 VBScript是Microsoft公司在Visual Basic編程語言的基礎(chǔ)上設(shè)計的，由于其在企業(yè)界廣為流行，且與Microsoft公司的其它產(chǎn)品有著密切的聯(lián)系，VBScript的使用范圍越來越大，逐漸會成為一種主要的腳本語言。,1． 什么是腳本語言,JavaScript語言起初并不叫此名稱，它的早期是Netscape的開發(fā)者們稱之為“M

43、ocha”的語言，開始在網(wǎng)上進(jìn)行β測試（由軟件的多個用戶在其實際的使用環(huán)境下進(jìn)行的測試叫β測試）時，名字改為“LiveScript”， Sun公司推出Java之后，Netscape引進(jìn)了Sun的有關(guān)概念，在其發(fā)行Netscape 2.0β測試版時才稱其為 “JavaScript”。它不僅支持Java的 Applet小程序，同時向Web頁的制作者提供一種嵌入 HTML文檔進(jìn)行編程的、基于對象的Script（腳本）程序設(shè)計語言，采用的許多結(jié)

44、構(gòu)與Java相 似 。 支持JavaScript的Navigator 2.0的網(wǎng)絡(luò)瀏覽器能夠解釋并執(zhí)行嵌在HTML中的用JavaScript語言書寫的“程序”。JavaScript具有很多采用CGI/PERL編寫的Script（腳本）的能力，其優(yōu)點是可以引用主機資源，響應(yīng)位于服務(wù)器Web頁中相應(yīng)語法元素要完成的功能，而又不與主機服務(wù)器進(jìn)行交互會話 。,2．JavaScript 的產(chǎn)生與發(fā)展,JavaScript語言起初并

45、不叫此名稱，它的早期是Netscape的開發(fā)者們稱之為“Mocha”的語言，開始在網(wǎng)上進(jìn)行β測試（由軟件的多個用戶在其實際的使用環(huán)境下進(jìn)行的測試叫β測試）時，名字改為“LiveScript”， Sun公司推出Java之后，Netscape引進(jìn)了Sun的有關(guān)概念，在其發(fā)行Netscape 2.0β測試版時才稱其為 “JavaScript”。它不僅支持Java的 Applet小程序，同時向Web頁的制作者提供一種嵌入 HTML文檔進(jìn)行編程的

46、、基于對象的Script（腳本）程序設(shè)計語言，采用的許多結(jié)構(gòu)與Java相 似 。 支持JavaScript的Navigator 2.0的網(wǎng)絡(luò)瀏覽器能夠解釋并執(zhí)行嵌在HTML中的用JavaScript語言書寫的“程序”。JavaScript具有很多采用CGI/PERL編寫的Script（腳本）的能力，其優(yōu)點是可以引用主機資源，響應(yīng)位于服務(wù)器Web頁中相應(yīng)語法元素要完成的功能，而又不與主機服務(wù)器進(jìn)行交互會話 。,2．Java

47、Script 的產(chǎn)生與發(fā)展,JavaScript的編程工作復(fù)雜與否和HTML文檔所提供的功能大小密切相關(guān)，下面用一個簡單的例子來介紹它的編程特點 。,3．一 個 簡 單 的 例 子,＜HTML＞ ＜HEAD＞＜TITLE＞This is a test＜/TITLE＞ ＜/HEAD＞ ＜BODY＞ 你好 ＜SCRIPT LANGUAGE="JavaScrip

48、t"＞ document.write "Hello，JavaScript! " ＜/SCRIPT＞ ＜/BODY＞ ＜/HTML＞,JavaScript源代碼被嵌在一個HTML文檔中，而且它可以出現(xiàn)在文檔頭部（HEAD節(jié)）和文檔體部 (BODY節(jié) )。SCRIPT標(biāo)記的一般格式為： ＜SCRIPT LANGUAGE="

49、;JavaScript"＞ ＜!--JavaScript語 句 串 · · · --＞＜/SCRIPT＞ 為了使老版本的瀏覽器（即Navigator2.0版以前的瀏覽器）避開不識別的“JavaScript語句串”，用JavaScript編寫的源代碼可以用注解括起來，即使用HTML的注解標(biāo)記＜!--…--＞，而Navigator2.x可以識別放在注解行中的Java

50、Script源代碼。 說明：＜SCRIPT＞標(biāo)記可聲明一個腳本程序，LANGUAGE屬性聲明該腳本是一個用JavaScript語言編寫的腳本。在和之間的任何內(nèi)容都視為腳本語句，會被瀏覽器解釋執(zhí)行。在JavaScript腳本中，用“//”作為行的注釋標(biāo)注。,9.2.2 JavaScript語言,在JavaScript中，數(shù)據(jù)類型是十分寬松的，程序員在聲明變量時可以不指定該變量的數(shù)據(jù)類型，JavaScript會自動地按照

51、需要來分配適當(dāng)?shù)臄?shù)據(jù)類型。這一點和JAVA或C++是截然不同的。JavaScript有以下幾種基本的數(shù)據(jù)類型：,1．JavaScript數(shù)據(jù)類型,（1）數(shù)字類型如: 34，3.14表示為十進(jìn)制數(shù)；034表示為八進(jìn)制數(shù)，用十進(jìn)行表示其值為28；0x34表示為十六進(jìn)制數(shù)，用十進(jìn)行表示其值為52。（2）字符串類型如："Hello!"；,（3）邏輯值類型其取值僅可能是“真”或“假”，用 True或False來表示

52、。 （4）空值當(dāng)你定義一個變量后未賦初值時，則該變量為空值。例如： var ch1; //此時ch1就為空值，它不屬于任何一種數(shù)據(jù)類型。,它的定義要求與C語言相仿，例如以字母或下劃線開始 ，變量不能是保留字（如int，var等），不能使用數(shù)字作為變量名的第一個字母等等。但它的定義方法與C語言有很大的差別。 C語言的變量定義格式為： int a=1; float f1=3.14 而JavaSc

53、ript的變量定義格式:Var 變量名； 或者 Var 變量名=初始值； JavaScript 并不是在定義變量時來說明變量的數(shù)據(jù)類型，而是在給變量賦初始值時來確定該變量的數(shù)據(jù)類型；JavaScript對字母的大小寫是敏感的。如Var my； Var My，JavaScript認(rèn)為這是兩個不同的變量。 說明：在使用變量之前，最好對每個變量使用關(guān)鍵字VAR進(jìn)行變量聲明，防止發(fā)生變量的有效區(qū)域沖突的

54、問題。,2．JavaScript 變量,JavaScript常量分為4類：整數(shù)、浮點數(shù)、布爾值和字符串。下面分別加以說明。,3．JavaScript常量,（1）整數(shù)常量在JavaScript中，整數(shù)可以表示為：十進(jìn)制數(shù)：即一般的十進(jìn)制整數(shù)，它前面不可有前導(dǎo)0。例：75。八進(jìn)制數(shù)：以0為前導(dǎo)，表示八進(jìn)制數(shù)。例：075。16進(jìn)制數(shù)：以0x為前導(dǎo)，表示16進(jìn)制數(shù)。例：0x0F。（2）浮點數(shù)常量浮點數(shù)可以用一般的小數(shù)格式來表示，也可

55、以使用科學(xué)計數(shù)法來表示。例如：7.54343，3.0e9,（3）布爾型常量布爾型常量只有兩個值：True 和 False。（4）字符串常量字符串常量是用單引號或雙引號括起來的0個或多個字符組成。例如：“ Test String”，”12345”,在JavaScript的語法規(guī)則中，每一條語句的最后必須使用一個分號，例如：document.write(“kkk”); //此語句的功能在瀏覽器中輸出“kkk”字符串

56、 在編寫JavaScript程序時，一定要有一個良好的習(xí)慣，最好是一行寫一條語句，如果使用復(fù)合語句塊時，注意把復(fù)合語句塊用大括號括起來，并且根據(jù)每一句作用范圍的不同，應(yīng)有一定的縮進(jìn)。另外一個好的編程風(fēng)格是要適當(dāng)加一些注釋。例如：,4．JavaScript語句的結(jié)構(gòu),＜SCRIPT LANGUAGE="JavaScript"＞ var SUM , P , i;SUM=0;//初始化累加和

57、P=1;,FOR (i=1; i<100; i++) { SUM+=i;//求累加和 P*=i; }＜/SCRIPT＞,,JavaScript常量分為4類：整數(shù)、浮點數(shù)、布爾值和字符串。下面分別加以說明。,3．JavaScript常量,（1）整數(shù)常量在JavaScript中，整數(shù)可以表示為：十進(jìn)制數(shù)：即一般的十進(jìn)制整數(shù)，它前面不可有前導(dǎo)0。例：75。八進(jìn)制數(shù)：以0為前導(dǎo)，表示八進(jìn)制數(shù)。例

58、：075。16進(jìn)制數(shù)：以0x為前導(dǎo)，表示16進(jìn)制數(shù)。例：0x0F。（2）浮點數(shù)常量浮點數(shù)可以用一般的小數(shù)格式來表示，也可以使用科學(xué)計數(shù)法來表示。例如：7.54343，3.0e9,（3）布爾型常量布爾型常量只有兩個值：True 和 False。（4）字符串常量字符串常量是用單引號或雙引號括起來的0個或多個字符組成。例如：“ Test String”，”12345”,JavaScript擁有一般編程語言（如Ｃ語言）的運算符，

59、包括算術(shù)運算符、比較運算符、連接運算符,5． JavaScript運算符和表達(dá)式,（1）算術(shù)運算符用于連接運算表達(dá)式的各種算術(shù)運算符如表8-1所示。,（2）位運算符位操作運算符對兩個表達(dá)式相同位置上的位進(jìn)行位對位運算。JavaScript支持的位操作運算符如表8-2所示。,（3）復(fù)合賦值運算符復(fù)合賦值運算符執(zhí)行的是一個表達(dá)式的運算。在JavaScript中，合法的復(fù)合賦值運算符如表8-3所示。,（4）比較運算符比較運算符用于比較

60、兩個對象之間的相互關(guān)系，返回值為True和False。各種比較運算符如表8-4所示。,（5）邏輯運算符邏輯運算符返回True和False，其主要作用是連接條件表達(dá)式，表示各條件間的邏輯關(guān)系。各種邏輯運算符如表8-5所示。,（6）運算符的優(yōu)先級,（7）表達(dá)式,JavaScript表達(dá)式可以用來計算數(shù)值，也可以用來連接字符串和進(jìn)行邏輯比較。JavaScript表達(dá)式可以分為三類： 算術(shù)表達(dá)式算術(shù)表達(dá)式用來計算一個數(shù)值，例：2*4

61、.5/3 字符串表達(dá)式字符串表達(dá)式可以連接兩個字符串，例如：”hello”+”world!”，該表達(dá)式的計算結(jié)果“helloworld!” 邏輯表達(dá)式 邏輯表達(dá)式 計算結(jié)果為一個布爾型常量（True或False）。 例如：12>24 其返回值為：False,JavaScript允許加一些注釋。并且有兩種注釋方法：單行注釋和多行注釋。單行注釋：以“//”開始，以同一行的最后一個字符作為結(jié)束。

62、多行注釋：以“/*”開始，以“*/”結(jié)束，符號“*/”可放在同一個行或一個不同的行中。下面舉例說明怎樣使用這兩種注釋方法：/*這是多行注釋的第一行 這是多行注釋的第二行*/k=24*7；//這是一個單行注釋的例子,6．腳本語言的注釋,JavaScript的腳本語言同C++語言類似的，提供了相同的程序流程控制語句。這些語句分別是if、switch、for、do和while語句。（1）條件語句 If

63、語句 If語句是一個條件判斷語句，它根據(jù)一定的條件執(zhí)行相應(yīng)的語句塊，其定義格式如下所示：If (expr){ code_block1 }else{code_block2} 這里，expr是一個布爾型的值或表達(dá)式（特別強調(diào)：expr一定要用小括號將其括起來），code_block1和code_block2是由多個語句組成的語句塊。當(dāng)expr值為“真”時，執(zhí)行code_block1，當(dāng)expr

64、值為“假”時，執(zhí)行code_block2。,7．JavaScript程序流程控制,另外有一點要說明的是，if語句是可以嵌套的，即在if語句的模塊中，還可以包含其它的if語句。例如：If (expr){ code_block1if (expr1) { code_block3 }}else{code_block2},②　switch語句switch語句測試一個表達(dá)式并有條件的執(zhí)行一段語句，其語法格

65、式如下：switch (表達(dá)式) {case 值1：code_block1 break; case 值2：code_block2 break; case 值3：code_block3 break;…default： code_blockn }switch語句首先計算表達(dá)式的值，然后根據(jù)表達(dá)式所計算出的值來選擇與之匹配的CASE后面

66、的值，并執(zhí)行該CASE后面的語句，直到遇到了一個break語句為止，如果所計算出的值與任何一個CASE后面的值都不相符的話，則執(zhí)行default后的語句。,下面舉例說明switch語句的用法：, 例9-3顯示<!--document.write("switch語名測試------");switch (14%3) {case 0: sth="您好";

67、 break;case 1: sth="大家好";break;default: sth="世界好";break;}document.write(sth);,//--> ,（2）循環(huán)語句 有許多時候，需要把一個語句塊重復(fù)執(zhí)行多次，每次執(zhí)行僅改變部分參數(shù)的值，這時可以使用循環(huán)語句，直到某一個條件不成立為止。 f

68、or語句 for語句用來產(chǎn)生一段程序循環(huán)，其語法格式如下：for ( init; test; incre){code_block} 這里init和incre是兩個語句，test是一個表達(dá)式。init語句只執(zhí)行一次，用來初始化循環(huán)變量。test表達(dá)式在每次循環(huán)后都要被計算一次，如果其運算值為“假”，則循環(huán)中止并立即繼續(xù)執(zhí)行for語句之后的語句，否則執(zhí)行code_block