第二章 HTML 語(yǔ)言和JavaScript語(yǔ)言,前面第一章中，我們學(xué)習(xí)了如何來(lái)配置JSP的運(yùn)行環(huán)境，如果我們希望做一個(gè)比較完善的網(wǎng)站，我們還需要學(xué)習(xí)一些有關(guān)網(wǎng)頁(yè)的基礎(chǔ)知識(shí)，包括HTML語(yǔ)言、JavaScript語(yǔ)言等。下面我們來(lái)介紹這些內(nèi)容。,2.1 網(wǎng)頁(yè)的工作機(jī)制,網(wǎng)頁(yè)的工作機(jī)制實(shí)際上并不復(fù)雜，書上給出了大家四種瀏覽網(wǎng)絡(luò)地址的情況，我們這里只需明白第四種執(zhí)行情況，也就是JSP網(wǎng)頁(yè)的執(zhí)行情況，而這部分前面我們已經(jīng)介紹過(guò)，希望大家能掌握。,2.2 HTML語(yǔ)言,前面我們給大家的那個(gè)簡(jiǎn)單JSP的例子中，已經(jīng)涉及到了html語(yǔ)言，這里我們就不在敘述。,2.2.1 HTML 注釋,html 語(yǔ)言的注釋格式如下： ,2.2.2 HTML 文本的基本結(jié)構(gòu),在HTML文檔中，標(biāo)簽（也就是我們書中說(shuō)的標(biāo)記）是用來(lái)規(guī)定 Web文檔的邏輯結(jié)構(gòu)并控制文檔的顯示格式。可以使用HTML標(biāo)簽來(lái) 設(shè)置鏈接、標(biāo)題、段落、列表等等。一般HTML標(biāo)簽格式是這樣的： 相應(yīng)內(nèi)容 注意： (1) 標(biāo)簽名用尖括號(hào)括起來(lái)，不區(qū)分大小寫。 (2) HTML標(biāo)簽一般成對(duì)出現(xiàn)。 (3) 某些HTML元素只有起始標(biāo)簽而沒(méi)有相應(yīng)的結(jié)束標(biāo)簽，例如 換行標(biāo)簽，由于不包括相應(yīng)的內(nèi)容，所以只使用BR就可以了。 下面我們就來(lái)編寫一個(gè)簡(jiǎn)單的html網(wǎng)頁(yè)，這里我們 用記事本來(lái)編 輯。大家要注意，在編完之后一定要用保存為擴(kuò)展名為“html”或者 “htm”的存文本文件。 http:/localhost:8080/ch2/sample1.html 我們可以采用 IE 工具 查看原代碼 來(lái)看我們編寫的文件.,2.2.3 文字格式的設(shè)置,上節(jié)介紹的是一個(gè)很簡(jiǎn)單的html網(wǎng)頁(yè)，實(shí)際上要掌握好html語(yǔ)言，我們必須熟悉它的其它標(biāo)記的用法。這節(jié)我們來(lái)介紹如何來(lái)設(shè)置文字信息。, 設(shè)置標(biāo)題,標(biāo)題元素有6種，分別為h1, h2,h6，用于表示文章中的各種題目。標(biāo)題號(hào)越小，字體越大。一般情況下，瀏覽器對(duì)標(biāo)題作如下解釋： 一級(jí)標(biāo)題標(biāo)記 變粗變大加寬，程度與級(jí)數(shù)反比 二級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 三級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 四級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 五級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 六級(jí)標(biāo)題標(biāo)記 將字體變粗變大加寬 http:/localhost:8080/ch2/sample2.html, 設(shè)置字體,在HTML語(yǔ)言中，我們使用來(lái)設(shè)置字體，包括字體的字號(hào)、大小、顏色等。它的格式為： face 表示采用什么字體，size 表示字體大小，color 表示字體顏色 當(dāng)然這些屬性不需要全部設(shè)置。 hello 這個(gè)表示face 屬性設(shè)置了組合字體，在選擇時(shí)首選第一個(gè)，當(dāng)然如果沒(méi)有face 屬性，表示將采用系統(tǒng)的默認(rèn)設(shè)置。 http:/localhost:8080/ch2/sample3.html, 其它字體標(biāo)記,當(dāng)然有時(shí)候我們可能需要將某段文字加粗、以斜體顯示或者別的特殊效果時(shí)，我們可以通過(guò)下面的文字標(biāo)記。 http:/localhost:8080/ch2/sample4.html,2.2.4 文字版面標(biāo)記,這里講到的文字版面標(biāo)記，主要是指設(shè)置換行、文字分段和對(duì)齊等標(biāo)記。, 換行標(biāo)記,在HTML語(yǔ)言中，換行標(biāo)記為： ,值得注意的是換行標(biāo)記是一個(gè)單獨(dú)標(biāo)記，不是成對(duì)標(biāo)記。 另外對(duì)應(yīng)換行標(biāo)記，也有一個(gè)不換行標(biāo)記： 下面我們給大家一個(gè)例子，來(lái)示范這兩個(gè)標(biāo)記的效果。 http:/localhost:8080/ch2/sample5.html, 段落標(biāo)記,格式： 它標(biāo)識(shí)一個(gè)段落，并在段前段后各添加一個(gè)空行，其中的文字不受影響。, 對(duì)齊標(biāo)記,可以使用一些標(biāo)記將文字按某種方式對(duì)齊，如居中對(duì)齊、居左對(duì)齊等。我們直接看例子： http:/localhost:8080/ch2/sample6.html,2.2.5 創(chuàng)建表格,表格是一種能夠有效的描述信息的組織方式，由行、列和單元 格組成。它可以將文字和圖片等按照行和列排列起來(lái)，可以很好地控制頁(yè)面布局。 在瀏覽器中顯示時(shí)，表格的整體外觀是由標(biāo)簽的屬性 決定的。 HTML中使用 標(biāo)簽創(chuàng)建表格，其基 本格式為： 表格內(nèi)容 .標(biāo)簽用來(lái)定義表格的表頭。 .標(biāo)簽用來(lái)定義表格的某一行。 .標(biāo)簽用來(lái)定義表格的單元格 ，或者叫列標(biāo)記。,注意： 對(duì)于表格的Border的屬性值為非負(fù)數(shù)，0表示表格邊框不可見(jiàn) ，但是內(nèi)容可見(jiàn)。 ,2.2.6 設(shè)計(jì)表單,表單的制作有兩個(gè)部分，首先，你必須使用標(biāo)記和標(biāo)記建立表單的輸入界面，其次才是表單的后端處理。, 插入表單與按鈕,制作表單網(wǎng)頁(yè)的首要步驟是在html文件中使用標(biāo)記插入表單，然后使用標(biāo)記來(lái)插入按鈕。我們首先來(lái)認(rèn)識(shí)一下兩個(gè)按紐，也是我們經(jīng)常要用到的，“提交”（Submit)和“重新輸入”(Reset)”，當(dāng)我們按下“提交”按紐的時(shí)候，瀏覽器會(huì)將瀏覽者輸入的數(shù)據(jù)返回服務(wù)器，當(dāng)我們點(diǎn)取“重新輸入”的時(shí)候，瀏覽器會(huì)清除瀏覽者輸入的數(shù)據(jù)，使表單恢復(fù)至原始數(shù)據(jù)。, 插入單行文本框, 姓名： E-Mail： ,文本框的作用不言而喻，不過(guò)這里有幾點(diǎn)要注意一下： 1、單行文本框的名稱限英文且唯一，實(shí)際上同一個(gè)表單中的所有字段必須以英文命名，且不能重復(fù)。 2、單行文本框默認(rèn)是空白，不顯示數(shù)據(jù)，若要顯示數(shù)據(jù)在在標(biāo)記的value屬性中設(shè)置(中英文均可） 3、可以利用標(biāo)記的maxlength屬性來(lái)設(shè)置瀏覽者輸入的字符數(shù), 插入單選按鈕,年齡： 未滿20歲 2029 3039 4049 50歲以上,“單選按紐”就像只允許單選的選擇題一樣，我們通常會(huì)利用這個(gè)組件列出數(shù)個(gè)選項(xiàng)，這里面也有幾點(diǎn)值得大家注意： 1、同一組單選按紐的名稱（name)應(yīng)該相同，并且限英文同時(shí)也應(yīng)該是唯一的。 2、同一組中各個(gè)單選按紐的數(shù)值(value)必須是不同的，這里面中英文均可。, 插入復(fù)選按鈕,諾基亞 摩托羅拉 愛(ài)立信 三星,“復(fù)選框”就象復(fù)選的選擇題一樣，它允許瀏覽者同時(shí)選取多個(gè)選項(xiàng)。 這里面也要注意的是同一組復(fù)選按紐的名稱（name)應(yīng)該相同，并且限英文，同時(shí)也應(yīng)該是唯一的。, 插入多行文本框, 你使用手機(jī)時(shí)最常碰到哪些問(wèn)題？ 線路太忙 ,“多行文本框”允許瀏覽者輸入多行的文字說(shuō)明，如個(gè)人意見(jiàn)等信息。我們可以使用標(biāo)記在表單中插入多行文本框。 它必須放在標(biāo)記之間，多行文本框默認(rèn)是空白不顯示任何數(shù)據(jù)，如果要在多行文本框中間顯示數(shù)據(jù)，可以將數(shù)據(jù)放在標(biāo)記之間。 其中cols 和rows 兩個(gè)屬性分別設(shè)置文本框的寬度和高度,書上還給出了一個(gè)wrap屬性，來(lái)設(shè)置自動(dòng)換行的，這個(gè)大家了解一下就可以，一般不用設(shè)置。, 插入下拉式菜單, 中國(guó)電信 中國(guó)聯(lián)通 遠(yuǎn)傳 鐵路網(wǎng) 其他 ,“下拉式”菜單允許瀏覽者從下拉式菜單中選擇項(xiàng)目，我們可以利用標(biāo)記搭配標(biāo)記來(lái)制作下拉式菜單。而標(biāo)記是用來(lái)指定下拉式菜單的選項(xiàng)。 值得我們注意的是標(biāo)記必須結(jié)合標(biāo)記來(lái)指定下拉式菜單的選項(xiàng)。其中可以利用size屬性來(lái)設(shè)置下拉式菜單的高度，利用來(lái)設(shè)置瀏覽者可以在下拉式菜單中選取多個(gè)選項(xiàng)。 標(biāo)記放在之間以指定下拉式菜單的選項(xiàng),我們最后一起來(lái)看一個(gè)例子 書上給出的例子是 ,里面有些地方是有問(wèn)題的。,2.2.7 其他標(biāo)記, 超文本鏈接標(biāo)記, text href 屬性用來(lái)設(shè)定鏈接到哪個(gè)網(wǎng)頁(yè)上去。 如果希望被指向的目標(biāo)在一個(gè)新的窗口中顯示，可以使用target屬性來(lái)修飾鏈接指針元素。一般常用的是“_self ”表示在原來(lái)頁(yè)面上的窗口打開(kāi)。而“_blank” 表示在瀏覽器的一個(gè)新窗口打開(kāi)。 text, 圖象標(biāo)記,通過(guò)圖象標(biāo)記，可以在HTML文件中插入圖象，其格式為： 這個(gè)標(biāo)記一般單獨(dú)出現(xiàn)，書上有點(diǎn)錯(cuò)誤。 我們來(lái)看個(gè)例子 ch2/sample9.html ,它里面的超級(jí)鏈接為sample10.html 其中，圖片src 地址采用相對(duì)路徑，“./image/02_1.jpg” ,其中“./”表示當(dāng)前目錄。,2.3 JavaScript 語(yǔ)言,前面我們介紹了html語(yǔ)言，它主要用來(lái)設(shè)置一些文字格式、創(chuàng)建表格、和設(shè)計(jì)表單等。如果我們想利用它來(lái)檢測(cè)表單中的文本輸入框是否為空，此時(shí)它將顯得無(wú)能為力，這時(shí)就要借助我們下面要學(xué)習(xí)的JavaScript 來(lái)設(shè)置。,2.3.1 JavaScript 簡(jiǎn)介,JavaScript 語(yǔ)言的前身叫做LiveScript，它是 由NetScape 公司來(lái)設(shè)計(jì)出來(lái)的。 它有很多優(yōu)點(diǎn) (1) 簡(jiǎn)單易學(xué)。它主要采用HTML 文本中嵌入小程序段的方式，開(kāi)發(fā)過(guò)程非常簡(jiǎn)單。 (2) 響應(yīng)速度快 (3) 最關(guān)鍵的是它是一種與平臺(tái)無(wú)關(guān)的語(yǔ)言，只要瀏覽器能執(zhí)行，它就可以運(yùn)行，而與操作系統(tǒng)無(wú)關(guān)。, JavaScript 與Java 區(qū)別 很多人認(rèn)為JavaScript就是基于Java 語(yǔ)言的編程語(yǔ)言，實(shí)際上它們是完全兩個(gè)公司開(kāi)發(fā)的產(chǎn)品，下面我們來(lái)看看它們之間的區(qū)別。 (1) 它們相同之處是二者都是與平臺(tái)無(wú)關(guān)的語(yǔ)言。 (2) 兩者的處理方式不同，JAVA程序必須經(jīng)過(guò)編譯，然后在JAVA的虛擬機(jī)上執(zhí)行，而JavaScript語(yǔ)言則是通過(guò)瀏覽器邊解釋邊執(zhí)行。 (3) JAVA中如果需要個(gè)變量，在使用之前必須聲明，而JavaScript語(yǔ)言不必事先聲明就可以使用。 (4) JavaScript 是一種嵌入式語(yǔ)言，它通過(guò)在html文件中使用 來(lái)插入JavaScript 小程序。 而JAVA 則是在html 文件中使用 來(lái)調(diào)用java 的類文件。 (5) JavaScript 是一種腳本語(yǔ)言，學(xué)習(xí)起來(lái)比JAVA 容易。, 一個(gè)簡(jiǎn)單的實(shí)例,2.3.2 數(shù)據(jù)類型,在JavaScript中，常見(jiàn)的數(shù)據(jù)類型有四種，分別是： number (數(shù)字類型）、string(字符串類型）、object(對(duì)象類型）和boolean( 布爾類型） 在對(duì)變量的聲明時(shí)，我們可以不必聲明每一個(gè)變量的類型，我們可以使用var 關(guān)鍵字來(lái)聲明一個(gè)變量。例如； var isapple=true; 值得注意得是，JavaScript 是區(qū)分大小寫的，大家給變量起名字的時(shí)候這一點(diǎn)應(yīng)該記住。 當(dāng)然變量名肯定不能為我們系統(tǒng)的保留字，JavaScript的保留字在書上44頁(yè)表2-2中已經(jīng)列出。,2.3.4 常用語(yǔ)句,在JavaScipt 語(yǔ)言中，還有幾種重要的語(yǔ)句。下面我們一起來(lái)學(xué)習(xí)一下這些語(yǔ)句。, 函數(shù)定義語(yǔ)句,我們采用如下格式來(lái)定義函數(shù)； function 函數(shù)名稱 （參數(shù)） 函數(shù)內(nèi)容 return 表達(dá)式 當(dāng)然不是所有的函數(shù)都必須利用return 表達(dá)式。, 條件和分支語(yǔ)句,條件語(yǔ)句 if else 結(jié)構(gòu) if (條件） 語(yǔ)句1 else 語(yǔ)句2 ,(2) 分支語(yǔ)句 分支語(yǔ)句switch 是根據(jù)一個(gè)表達(dá)式取值的不同而采取不同的處理方法，其語(yǔ)法如下： switch (expression) case label1: 語(yǔ)句1； default : 語(yǔ)句 n+1; 如果表達(dá)式的值與任何的label都不匹配，則執(zhí)行default后面的語(yǔ)句n+1。, 循環(huán)語(yǔ)句,我們這里主要說(shuō)的是for 語(yǔ)句 和 while 語(yǔ)句等。,for 語(yǔ)句 for 語(yǔ)句的語(yǔ)法如下： for (變量初始化；條件； 更新變量） 語(yǔ)句 只要條件成立，就會(huì)反復(fù)執(zhí)行循環(huán)體中的語(yǔ)句。 (2) for in 語(yǔ)句 它循環(huán)的一般是一個(gè)對(duì)象的所有屬性或數(shù)組的元素 for (變量 in 對(duì)象或數(shù)組） 語(yǔ)句 ,(3) while 語(yǔ)句 while 語(yǔ)句格式如下： while (條件） 語(yǔ)句 如果條件成立，則一直循環(huán)，直到條件不再成立。 值得注意的是，還有兩個(gè)有用的語(yǔ)句:break 語(yǔ)句和continue 語(yǔ)句。 break 語(yǔ)句是結(jié)束當(dāng)前的各種循環(huán)，并跳出循環(huán)體，去執(zhí)行循環(huán)的下一條語(yǔ)句。 而continue 語(yǔ)句是結(jié)束當(dāng)前的循環(huán)，然后開(kāi)始下一個(gè)循環(huán)。,2.3.5 對(duì)象,JavaScript 是面向?qū)ο蟮恼Z(yǔ)言，對(duì)象由屬性和方法來(lái)構(gòu)成。對(duì)象的屬性是指對(duì)象的特征，而對(duì)象的方法是對(duì)對(duì)象屬性所進(jìn)行的操作。 訪問(wèn)對(duì)象的屬性，一般采用下面方法： 對(duì)象名稱 . 屬性名稱 訪問(wèn)對(duì)象的方法的格式為； 對(duì)象名稱 . 方法 在JavaScript中有許多對(duì)象，如String 、Date、Window、document、form、location等，下面我們來(lái)給大家介紹一些常用的對(duì)象。, String 對(duì)象,String 是字符串對(duì)象，它只有一個(gè)屬性: length屬性，但是它有很多方法。我們直接看個(gè)例子，通過(guò)這個(gè)例子來(lái)學(xué)習(xí)它的方法。 這里面substring(start ,end )表示獲取自start 到end的子串 indexOf (char,start) 表示字符串從start開(kāi)始查找第一次出現(xiàn)的char 字符，并返回其位置。 注意，大小寫區(qū)分。 , Date 對(duì)象 如果想要獲取時(shí)間，就必須用到Date 對(duì)象。使用Date 對(duì)象，必須首先使用關(guān)鍵字new 來(lái)創(chuàng)建，如： 變量名 =new Date ( ) Date 對(duì)象中的方法很多，我們主要看兩個(gè)，一個(gè)是 getMonth( ) ,它來(lái)獲取當(dāng)前月份，由于它從0開(kāi)始記數(shù)，所以我們實(shí)際算的時(shí)候，要+1，才能真正得到當(dāng)前月份。 getTime( ) ,它是返回從1970年1月1日到現(xiàn)在的毫秒數(shù)。 下面我們來(lái)看個(gè)例子 , Math 對(duì)象,Math對(duì)象給我們提供了很多有用的數(shù)學(xué)計(jì)算方法。 在 調(diào)用的時(shí)候，我們直接利用Math.屬性 或者 Math.方法 來(lái)用就可以了。它提供了一個(gè)很重要的屬性：PI （圓周率） 下面我們直接看個(gè)例子： , Window 和 document 對(duì)象,在前面的例子中，我們頻繁使用了alert（）方法，它實(shí)際上就是Window對(duì)象的方法，由于Window對(duì)象 是每個(gè)HTML網(wǎng)頁(yè)的頂層對(duì)象，我們?cè)谡{(diào)用的時(shí)候，不必顯示調(diào)用Window對(duì)象。 對(duì)于Window 對(duì)象一般有以下幾個(gè)有用的方法：,open ( ) 打開(kāi)一個(gè)窗口，有三個(gè)參數(shù)，第一個(gè)表示打開(kāi)網(wǎng)頁(yè)的文件名，第二個(gè)表示窗口名，第三個(gè)表示所要打開(kāi)窗口的大小和結(jié)構(gòu)。,(2) alert ( ) 打開(kāi)一個(gè)對(duì)話框，并顯示信息。 (3) confirm( ) 打開(kāi)一個(gè)具有“確定 ”和“取消”的對(duì)話框，并顯示信息。 (4) prompt ( ) 顯示一個(gè)prompt ，要求用戶根據(jù)顯示信息給予相應(yīng)輸入。 (5) close( ) 關(guān)閉當(dāng)前窗口，同時(shí)系統(tǒng)會(huì)彈出確認(rèn)對(duì)話框。 document ,