1、第2章 JSP預(yù)備知識(shí)lHTML是學(xué)習(xí)JSP必須掌握的，因?yàn)镴SP程序就是Java代碼或者JSP標(biāo)簽，然后由JSP引擎翻譯成Servlet，由Web容器編譯執(zhí)行。lJavaScript實(shí)際上JSP 知識(shí)體系中一個(gè)可選的知識(shí)模塊。l2.1 HTML快速入門l2.2 JavaScript技術(shù)2.1 HTML快速入門l HTML使Web獲得奇跡般的發(fā)展有以下三個(gè)主要原因：l 首先是通過設(shè)計(jì)， HTML能普遍地訪問所有計(jì)算機(jī)平臺(tái),從最強(qiáng)勁的UNIX系統(tǒng)到普遍流行的Windows和Macintosh個(gè)人計(jì)算機(jī)。l 第二是HTML容易使用，你不需要輸入一系列復(fù)雜而深?yuàn)W的計(jì)算機(jī)指令，只要使用一列標(biāo)記來組成文

2、本，使得創(chuàng)造Web頁面變得相當(dāng)簡單。HTML的強(qiáng)勁訪問能力推動(dòng)了Web的流行，使數(shù)以萬計(jì)的個(gè)人Web站點(diǎn)如雨后春筍般地涌現(xiàn)。l最后一點(diǎn)是HTML使你能在一個(gè)Web站點(diǎn)與另一個(gè)Web站點(diǎn)之間建立鏈接。當(dāng)你用鼠標(biāo)點(diǎn)到這些鏈接中的一個(gè)時(shí)(它可能是一個(gè)短語或是一幅圖畫)你就能輕易跳到其它Web站點(diǎn)上，進(jìn)入到一個(gè)廣闊而又在不斷發(fā)展的互連的和交互的知識(shí)庫中。2.1.1 HTML基本結(jié)構(gòu)l 一個(gè)HTML文件應(yīng)具有下面的基本的結(jié)構(gòu)： HTML文件開始 文件頭開始 文件頭內(nèi)容 文件頭結(jié)束 文件體開始 文件體內(nèi)容 文件體結(jié)束 HTML文件結(jié)束2.1.2 HTML常用標(biāo)簽l1.單標(biāo)簽“+字母”l 常用單標(biāo)簽：l 1

3、) ，換行標(biāo)簽，強(qiáng)制文本換行，不在行與行之間增加空行 l 2) ，水平線標(biāo)簽，成一條水平線l2.雙標(biāo)簽格式：l 1）開始標(biāo)簽“+字母”l 2）結(jié)束標(biāo)簽“+/+字母”l 3）常用雙標(biāo)簽簡介l 注： l 表示該標(biāo)記屬圍堵標(biāo)記，即需要關(guān)閉標(biāo)記如 。 l 表示該標(biāo)記屬空標(biāo)記，即不需要關(guān)閉標(biāo)記。 l IE 表示該標(biāo)記只適用于 Internet Explorer。 l NC 表示該標(biāo)記只適用于 Netscape Communicator。 l 反對(duì) 表示該標(biāo)記不為 W3C 所贊同，通常這標(biāo)記是 IE 或 NC 自訂，且己為眾所支 持，只是 HTML 標(biāo)準(zhǔn)中有其它同功能或更好的選擇。 l 棄用 表示該標(biāo)記己

4、為 W3C 所棄用，是過時(shí)的標(biāo)記，但 HTML 具向下兼容的特 性，不用擔(dān)心新瀏覽器不支援舊標(biāo)記。 l 新 表示該標(biāo)記是 HTML 4.0 中新增的。 標(biāo)記 類型 譯名或意義 作 用 備注 文件標(biāo)記文件標(biāo)記 文件聲明 讓瀏覽器知道這是 HTML 文件 開頭 提供文件整體資訊 標(biāo)題 定義文件標(biāo)題，將顯示于瀏覽頂端 本文 設(shè)計(jì)文件格式及內(nèi)文所在 排版標(biāo)記排版標(biāo)記 說明標(biāo)記 為文件加上說明，但不被顯示 段落標(biāo)記 為字、畫、表格等之間留一空白行 換行標(biāo)記 令字、畫、表格等顯示于下一行 水平線 插入一條水平線 居中 令字、畫、表格等顯示于中間 反對(duì) 預(yù)設(shè)格式 令文件按照原始碼的排列方式顯示 區(qū)隔標(biāo)記 設(shè)

5、定字、畫、表格等的擺放位置 不折行 令文字不因太長而繞行 建議折行 預(yù)設(shè)折行部位 l 字體標(biāo)記字體標(biāo)記 加重語氣 產(chǎn)生字體加粗 Bold 的效果 粗體標(biāo)記 產(chǎn)生字體加粗的效果 強(qiáng)調(diào)標(biāo)記 字體出現(xiàn)斜體效果 斜體標(biāo)記 字體出現(xiàn)斜體效果 打字字體 Courier字體，字母寬度相同 加上底線 加上底線 反對(duì) 一級(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)記 將字體變粗變大加寬 字形標(biāo)記 設(shè)定字形、大小、顏色 反對(duì) 基準(zhǔn)字形標(biāo)記 設(shè)定所有字形、大小、顏色 反對(duì)

6、字體加大 令字體稍為加大 字體縮細(xì) 令字體稍為縮細(xì) 畫線刪除 為字體加一刪除線 反對(duì) 程式碼 字體稍為加寬如 鍵盤字 字體稍為加寬，單一空白 范例 字體稍為加寬如 變數(shù) 斜體效果 傳記引述 斜體效果 引述文字區(qū)塊 縮排字體 述語定義 斜體效果 地址標(biāo)記 斜體效果 下標(biāo)字 下標(biāo)字 上標(biāo)字 指數(shù)（平方、立方等） 清單標(biāo)記清單標(biāo)記 順序清單 清單項(xiàng)目將以數(shù)字、字母順序排列 無序清單 清單項(xiàng)目將以圓點(diǎn)排列 清單項(xiàng)目 每一標(biāo)記標(biāo)示一項(xiàng)清單項(xiàng)目 選單清單 清單項(xiàng)目將以圓點(diǎn)排列，如 反對(duì) 目錄清單 清單項(xiàng)目將以圓點(diǎn)排列，如 反對(duì) 定義清單 清單分兩層出現(xiàn) 定義條目 標(biāo)示該項(xiàng)定義的標(biāo)題 定義內(nèi)容 標(biāo)示定義內(nèi)容

7、 表格標(biāo)記表格標(biāo)記 表格標(biāo)記 設(shè)定該表格的各項(xiàng)參數(shù) 表格標(biāo)題 做成一打通列以填入表格標(biāo)題 表格列 設(shè)定該表格的列 表格欄 設(shè)定該表格的欄 表格標(biāo)頭 相等于，但其內(nèi)之字體會(huì)變粗 表單標(biāo)記 表單標(biāo)記 決定單一表單的運(yùn)作模式 文字區(qū)塊 提供文字方盒以輸入較大量文字 輸入標(biāo)記 決定輸入形式 選擇標(biāo)記 建立 pop-up 卷動(dòng)清單 選項(xiàng) 每一標(biāo)記標(biāo)示一個(gè)選項(xiàng) 圖形標(biāo)記圖形標(biāo)記 圖形標(biāo)記 用以插入圖形及設(shè)定圖形屬性 鏈接鏈接 標(biāo)記標(biāo)記 鏈接標(biāo)記 加入連結(jié) 基準(zhǔn)標(biāo)記 可將相對(duì) URL 轉(zhuǎn)絕對(duì)及指定連結(jié)目標(biāo) 排版標(biāo)記排版標(biāo)記 框架設(shè)定 設(shè)定框架 框窗設(shè)定 設(shè)定框窗 頁內(nèi)框架 于網(wǎng)頁中間插入框架 IE 不支援框

8、架 設(shè)定當(dāng)瀏覽器不支援框架時(shí)的提示 多媒體多媒體 背景聲音 于背景播放聲音或音樂 IE 多媒體 加入聲音、音樂或影像 其他標(biāo)記其他標(biāo)記 走動(dòng)文字 令文字左右走動(dòng) IE 閃爍文字 閃爍文字 NC 頁內(nèi)尋找器 可輸入關(guān)鍵字尋找于該一頁 反對(duì) 開頭定義 讓瀏覽器知道這是 HTML 文件 關(guān)系定義 定義該文件與其他 URL 的關(guān)系 影像地圖 影像地圖名稱 設(shè)定影像地圖名稱 連結(jié)區(qū)域 設(shè)定各連結(jié)區(qū)域 StyleSheet 樣式表 控制網(wǎng)頁版面 自訂標(biāo)記 獨(dú)立使用或與樣式表同用 特殊字符 調(diào)色原理 圖2-17 表單示例202.1.4 XML與XHTML l XML（Extensible Markup La

9、nguage）即可擴(kuò)展標(biāo)記語言，它與）即可擴(kuò)展標(biāo)記語言，它與HTML一樣，都是一樣，都是SGML(Standard Generalized Markup Language，標(biāo)準(zhǔn)通用標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言)。XML是是Internet環(huán)境中跨平臺(tái)的、環(huán)境中跨平臺(tái)的、依賴于內(nèi)容的技術(shù)，是當(dāng)前處理依賴于內(nèi)容的技術(shù)，是當(dāng)前處理結(jié)構(gòu)化文檔結(jié)構(gòu)化文檔信息的有力工具。信息的有力工具。XML是一種簡單的數(shù)據(jù)存儲(chǔ)語言，使用一系列簡單的標(biāo)簽描述數(shù)據(jù)，而是一種簡單的數(shù)據(jù)存儲(chǔ)語言，使用一系列簡單的標(biāo)簽描述數(shù)據(jù)，而這些標(biāo)簽可以很方便的建立，雖然這些標(biāo)簽可以很方便的建立，雖然XML占用的空間比二進(jìn)制數(shù)據(jù)要占用的空間比

10、二進(jìn)制數(shù)據(jù)要占用更多的空間，但占用更多的空間，但XML極其簡單并易于掌握和使用。極其簡單并易于掌握和使用。l XML是一種元標(biāo)簽語言，沒有許多固定的標(biāo)簽，為是一種元標(biāo)簽語言，沒有許多固定的標(biāo)簽，為Web開發(fā)人員提開發(fā)人員提供了更多了靈活性。當(dāng)使用供了更多了靈活性。當(dāng)使用HTML時(shí)，標(biāo)簽只是簡單地表示內(nèi)容的時(shí)，標(biāo)簽只是簡單地表示內(nèi)容的顯示形式，而與表示的內(nèi)容沒有任何關(guān)聯(lián)，為文檔的進(jìn)一步處理帶顯示形式，而與表示的內(nèi)容沒有任何關(guān)聯(lián)，為文檔的進(jìn)一步處理帶來極大的不便。來極大的不便。1. XML21比如要表示個(gè)人簡歷，用HTML的表示方式如下（文件名resume.html）： 姓名性別 出生日期專業(yè) 張

11、三男1991.8.12軟件開發(fā) 22上述html文件無法從標(biāo)簽、等得知其內(nèi)容表示什么，如果用XML，相應(yīng)的文檔（文件名resume.xml）就可以寫成如下形式：張三男1991.8.12軟件開發(fā) 這里，version規(guī)定了XML文檔的版本，encoding規(guī)定了XML文檔的編碼類型，此處取值gb2312表示簡體中文。對(duì)比兩個(gè)例子，使用XML可以做到自定義標(biāo)簽，用標(biāo)簽表明內(nèi)容的含義。這就為在網(wǎng)絡(luò)上交流資料時(shí)用計(jì)算機(jī)處理文檔提供了極大的方便，也增加了源文件的可讀性。23resume display: block;name display: block; font-size:120%;sex disp

12、lay:block; text-indent:2embirthday display:block; text-indent:2emmajor display:block; text-indent:2em建立文件resume.css后，在個(gè)人簡歷.xml文件的第一行后添加以下文字：當(dāng)然resume.xml能以表格形式運(yùn)行的前提是必須自定義好形式，定義其顯示形式的文件css文件。另一種方式：定義其顯示形式的文件如下（文件名resume.xsl，在xml文件的第二行引入了該xsl文件）： 姓名性別生日專業(yè) 25lXSL之于之于XML ，就像，就像 CSS 之于之于 HTML。它是指可擴(kuò)。它是指可擴(kuò)展

13、樣式表語言展樣式表語言 (Extensible Stylesheet Language)，這是一種用于以可讀格式呈現(xiàn)這是一種用于以可讀格式呈現(xiàn) XML 數(shù)據(jù)的語言。有數(shù)據(jù)的語言。有了了resume.xsl定義顯示形式，文件定義顯示形式，文件resume.xml在瀏在瀏覽器中顯示的形式和覽器中顯示的形式和resume.xml形式相同（如圖形式相同（如圖2-18所示），不過它給程序員提供了更大的靈活性，也所示），不過它給程序員提供了更大的靈活性，也更易于數(shù)據(jù)交換。更易于數(shù)據(jù)交換。圖2-18 瀏覽xml文件262. XHTMLl 可擴(kuò)展超文本標(biāo)記語言（可擴(kuò)展超文本標(biāo)記語言（eXtensible Hy

14、perText Markup Language，XHTML），與超），與超HTML類似，不過語法上更加嚴(yán)格。類似，不過語法上更加嚴(yán)格。HTML語法要求比語法要求比較松散，這樣對(duì)網(wǎng)頁編寫者來說比較方便，但對(duì)于機(jī)器來說，語言的語較松散，這樣對(duì)網(wǎng)頁編寫者來說比較方便，但對(duì)于機(jī)器來說，語言的語法越松散，處理起來就越困難，對(duì)于傳統(tǒng)的計(jì)算機(jī)來說，還有能力兼容法越松散，處理起來就越困難，對(duì)于傳統(tǒng)的計(jì)算機(jī)來說，還有能力兼容松散語法，但對(duì)于許多其他設(shè)備，比如手機(jī)，難度就比較大。因此產(chǎn)生松散語法，但對(duì)于許多其他設(shè)備，比如手機(jī)，難度就比較大。因此產(chǎn)生了由了由DTD定義規(guī)則，語法要求更加嚴(yán)格的定義規(guī)則，語法要求更加嚴(yán)

15、格的XHTML， XHTML 1.0在在2000年年1月月26日成為日成為W3C的推薦標(biāo)準(zhǔn)。的推薦標(biāo)準(zhǔn)。l 和和CSS（Cascading Style Sheets，層疊式樣式表）結(jié)合后，層疊式樣式表）結(jié)合后，XHTML能發(fā)揮真正的威力；這在實(shí)現(xiàn)樣式和內(nèi)容分離的同時(shí)，又能有機(jī)地組合能發(fā)揮真正的威力；這在實(shí)現(xiàn)樣式和內(nèi)容分離的同時(shí)，又能有機(jī)地組合網(wǎng)頁代碼，在另外的單獨(dú)文件中，還可以混合各種網(wǎng)頁代碼，在另外的單獨(dú)文件中，還可以混合各種XML應(yīng)用。應(yīng)用。27XHTMLXHTML與與HTMLHTML的重要區(qū)別的重要區(qū)別 1在XHTML中標(biāo)記名稱必須小寫 2在XHTML中屬性名稱必須小寫3在XHTML中標(biāo)

16、記必須嚴(yán)格嵌套4在XHTML中標(biāo)記必須封閉5在XHTML中即使是空元素的標(biāo)記也必須封閉 6在XHTML中屬性值用雙引號(hào)括起來7在XHTML中屬性值必須使用完整形式2.2 JavaScript技術(shù)l JavaScript是由是由Netscape公司開發(fā)的一種網(wǎng)頁的腳本編公司開發(fā)的一種網(wǎng)頁的腳本編程語言，它支持客戶端與服務(wù)器端的應(yīng)用程序以及構(gòu)件的程語言，它支持客戶端與服務(wù)器端的應(yīng)用程序以及構(gòu)件的開發(fā)。開發(fā)。JavaScript是一種解釋性的語言，它的基本結(jié)構(gòu)形是一種解釋性的語言，它的基本結(jié)構(gòu)形式與其他編程語言相似，需要先編譯后執(zhí)行。式與其他編程語言相似，需要先編譯后執(zhí)行。什么是JavaScript

17、 lJavaScript 是一種腳本語言l提供用戶交互 l動(dòng)態(tài)更改內(nèi)容 l數(shù)據(jù)驗(yàn)證 將JavaScript嵌入網(wǎng)頁 l可以將 JavaScript 語句插入 HTML 文檔，方式 如下：使用 標(biāo)簽將語句嵌入文檔將 JavaScript 源文件鏈接到 HTML 文檔中使用 Script 標(biāo)簽JavaScript 代碼document.write(歡迎來到 JavaScript 世界);盡情享受學(xué)習(xí)的快樂! 腳本代碼設(shè)置語言使用外部 JS 文件 l外部 JavaScript 文件可以鏈接到 HTML 文檔中l(wèi)SCRIPT 標(biāo)簽的 SRC（源文件）屬性可用于包括此外部文件 使用外部 JS 文件 Ja

18、vaScript 代碼代碼 (test.htm)使用外部文件以上文本是通過訪問外部 JavaScript 文件顯示的 document.write(喂！你好嗎喂！你好嗎?)JavaScript 代碼代碼 (test.js )35瀏覽器對(duì)象簡介 2-1 http:/Window 窗口對(duì)象location地址對(duì)象document文檔對(duì)象FORM表單對(duì)象瀏覽器對(duì)象的分層結(jié)構(gòu)window.document.myform.text1 l對(duì)象對(duì)象JavaScript的一個(gè)重要功能就是面向?qū)ο蟮墓δ?，的一個(gè)重要功能就是面向?qū)ο蟮墓δ埽ㄟ^基于對(duì)象的程序設(shè)計(jì)，可以用更直觀、模塊通過基于對(duì)象的程序設(shè)計(jì)，可以用更

19、直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)?；涂芍貜?fù)使用的方式進(jìn)行程序開發(fā)。一組包含數(shù)據(jù)的屬性和對(duì)屬性中包含數(shù)據(jù)進(jìn)行操一組包含數(shù)據(jù)的屬性和對(duì)屬性中包含數(shù)據(jù)進(jìn)行操作的方法，稱為對(duì)象。作的方法，稱為對(duì)象。l比如要設(shè)定網(wǎng)頁的背景顏色，所針對(duì)的對(duì)象就是比如要設(shè)定網(wǎng)頁的背景顏色，所針對(duì)的對(duì)象就是document，所用的屬性名是，所用的屬性名是bgcolor，如，如document.bgcolor=blue，就是表示使背景的顏色為，就是表示使背景的顏色為藍(lán)色。藍(lán)色。3637瀏覽器對(duì)象簡介 2-2q瀏覽器對(duì)象的分層結(jié)構(gòu)瀏覽器對(duì)象的分層結(jié)構(gòu)變量 l變量名必須以字母或下劃線（_）開頭l變量可以包含數(shù)字、從 A

20、 至 Z 的大小寫字母lJavaScript 區(qū)分大小寫，即變量 myVar、 myVAR 和 myvar 是不同的變量聲明變量 var a; “var” 用于聲明變量的關(guān)用于聲明變量的關(guān)鍵字鍵字 “a” 變量名變量名同時(shí)聲明和初始化變量同時(shí)聲明和初始化變量var a= 10;var a= 10;a = 10;聲明變量聲明變量聲明多個(gè)變量聲明多個(gè)變量var x, y, z = 10;var x, y, z = 10;賦值賦值聲明變量 使用變量var x;x=prompt(淘寶網(wǎng)竟拍，請(qǐng)出一口價(jià),1) ;document.write(拍賣價(jià)格+x+) / +用來連接多個(gè)字符串document.w

21、rite(恭喜您，您以最高價(jià)拍賣成功！);alert(歡迎下次光臨！);定義變量賦 值輸 出prompt(“提示信息”,”默認(rèn)值”)將彈出提示對(duì)話框，接受用戶的輸入。點(diǎn)擊確定返回輸入的字符串，點(diǎn)擊取消反饋空字符串。變量 a、b 和 c 只能在其各自的函數(shù)中被訪問 變量的作用域腳本腳本函數(shù)function1局部變量a函數(shù)function2局部變量b函數(shù)function3局部變量c可由函數(shù) 1、函數(shù) 2 和函數(shù) 3 訪問全局變量 gg全局變量不需要以 var 關(guān)鍵字進(jìn)行聲明，但局部變量則必須以此關(guān)鍵字來聲明浮點(diǎn)型浮點(diǎn)型字面量至少必須含有一個(gè)數(shù)字。此數(shù)字可包含小數(shù)點(diǎn)或采用科學(xué)記數(shù)法表示的數(shù)字?？茖W(xué)記

22、數(shù)法中的整數(shù)可以是正整數(shù)(+) 或負(fù)整數(shù)(-)，指數(shù)(e) 表示“十次冪”。例如 10.24、1.20e+22、4E-8、.1815 等。常量整型整型浮點(diǎn)型浮點(diǎn)型字符串型字符串型字字 符符說說 明明示示 例例n換行符alert(“這是第一局 n 這是第二句”)r回車符alert(“這是第一局 r 這是第二句”)t制表符 alert(“這是第一局 t 這是第二句”)和C語言一樣，js也有轉(zhuǎn)義字符，常用的就是： “ n ”數(shù)據(jù)類型數(shù)據(jù)類型數(shù)據(jù)類型說說 明明示示 例例數(shù)字型整數(shù)或?qū)崝?shù)487, 25.95邏 輯 型 或 布爾型執(zhí)行邏輯運(yùn)算true或 false 字符串型一組字符“Hello”空特殊關(guān)鍵

23、字，表示不存在的值。 null var x=100;var y;var z;document.write(競(jìng)拍SONY數(shù)碼相機(jī) 600萬像素 +x+$起價(jià));y=prompt(加多少銀子？,1); z=x+y; alert(您最終的出價(jià)n+z+$); /”n”用于換行顯示 Prompt函數(shù)返回輸入的字符串“+”號(hào)的用法-1 10020 ? bug+字符串相連：100+”200”200 var x=100;var y;var z;document.write(競(jìng)拍SONY數(shù)碼相機(jī) 600萬像素 +x+$起價(jià));y=prompt(加多少銀子？,1); z=x+parseFloat( y ); al

24、ert(您最終的出價(jià)n+z+$); /”n”用于換行顯示 parseFloat( )函數(shù)將字符串轉(zhuǎn)換為float數(shù)據(jù) parseInt( )函數(shù)將字符串轉(zhuǎn)換為int數(shù)據(jù)如果轉(zhuǎn)換失敗，返回NaN值(not a number)“+”號(hào)的用法-2運(yùn)算符 l運(yùn)算符對(duì)一個(gè)或多個(gè)變量或值（操作數(shù)）進(jìn)行運(yùn)算，并返回一個(gè)新值l根據(jù)所執(zhí)行的運(yùn)算，運(yùn)算符可分為以下類別：算術(shù)運(yùn)算符比較運(yùn)算符邏輯運(yùn)算符運(yùn)算符運(yùn)算符說 明示 例+加a = 5 + 8-減a = 8 - 5/除a = 20 / 5*乘a = 5*19%取模兩個(gè)數(shù)相除的余數(shù)10 % 3 = 1+一元自加。該運(yùn)算符帶一個(gè)操作數(shù)，將操作數(shù)的值加 1。返回的值取

25、決于 + 運(yùn)算符位于操作數(shù)的前面或是后面將返回 x 自加運(yùn)算后的值。x+ 將返回 x 自加運(yùn)算前的值- -一元自減。該運(yùn)算符只帶一個(gè)操作數(shù)。返回的值取決于 - 運(yùn)算符位于操作數(shù)的前面或是后面-x 將返回 x 自減運(yùn)算后的值。x- 將返回 x 自減運(yùn)算前的值算術(shù)運(yùn)算符-1實(shí)現(xiàn)步驟：1.使用DreamWeaver設(shè)計(jì)頁面2.指定各個(gè)文本框的名稱3.切換為代碼視圖，編寫腳本代碼4.瀏覽并調(diào)試num1num2resultfunction calcu( )var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var

26、 total=parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total; 計(jì)算總價(jià)并顯示添加單擊事件，單擊按鈕時(shí)調(diào)用“calcu()” 函數(shù)算術(shù)運(yùn)算符-2獲取表單中輸入的數(shù)據(jù)：document.表單名.表單元素名.value定義calcu( )計(jì)算函數(shù),實(shí)現(xiàn)兩個(gè)數(shù)相乘的功能.定義函數(shù)的語法： function 函數(shù)名(參數(shù)列表) /JavaScript語句； 比較運(yùn)算符比較運(yùn)算符 2-1 運(yùn)算符運(yùn)算符說說 明明示示 例例= = 等于。如果兩個(gè)操作數(shù)相等，則返回真。a = = b!=不等于。如果兩個(gè)操作數(shù)不相等，則返

27、回真。Var2 != 5大于。如果左邊的操作數(shù)大于右邊的操作數(shù)，則返回真。Var1 var2小于。如果左邊的操作數(shù)小于右邊的操作數(shù)，則返回真。Var2 var1=小于等于。如果左邊的操作數(shù)小于或等于右邊的操作數(shù)，則返回真。Var2 = 4Var2 =大于等于。如果左邊的操作數(shù)大于或等于右邊的操作數(shù)，則返回真。Var1 = 5Var1 = var2function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total= parseFloat(numb1)*parseFloa

28、t(numb2);document.calc.result.value=total; if (total500) alert(購買總價(jià)超過500n支付時(shí)將贈(zèng)送超級(jí)Q幣2枚！);.其他代碼略，同上例比較運(yùn)算符購買總價(jià)超過500，贈(zèng)送超級(jí)Q幣2枚！ 運(yùn)算符邏輯運(yùn)算符運(yùn)算符運(yùn)算符值值說說 明明與 ( &)e x p r 1 & & expr2只有當(dāng) expr1 和 expr2 同為真時(shí)，才返回真。否則，返回假?；?( | )expr1 | expr2如果其中一個(gè)表達(dá)式為真，或兩個(gè)表達(dá)式同為真，則返回真。否則，返回假。非 (!)!expr如果表達(dá)式為真，則返回假。如果為假，則返

29、回真。function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;var total= parseFloat(numb1)*parseFloat(numb2);document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價(jià)超過2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！);.其他代碼略，同上例邏輯運(yùn)算符5001000 之間，贈(zèng)送超級(jí)Q幣兩枚；10002000之間，贈(zèng)送IBM

30、智能鼠標(biāo)一只；2000以上，直接與貴賓臺(tái)聯(lián)系。條件語句用于測(cè)試條件。if(條件) JavaScript代碼; 語法：語法：if 語句 2-1如果要執(zhí)行多個(gè)語句，必須將這些語句放在一對(duì)大括號(hào) ( ) 內(nèi)。但如果只要執(zhí)行一個(gè)語句，則可以省略大括號(hào)function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) var total= parseFloat(numb1)*parseFloat(numb2); document.calc.

31、result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價(jià)超過2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！); .其他代碼略，同上例If語句 2-2如果輸入框中的數(shù)據(jù)用戶漏填了，出現(xiàn)NaN的 bug 為什么呢?if else 語句 2-1if(條件) /JavaScript代碼;else /JavaScript代碼;語法：語法：function calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (n

32、umb1!=) & (numb2!=) var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total500) &(total1000) &(total2000) alert(購買總價(jià)超過2000n請(qǐng)直接與貴賓臺(tái)聯(lián)系！); else alert(購買數(shù)量或競(jìng)拍價(jià)格沒有填寫n請(qǐng)重新輸入！);If-else語句 2-2提示沒有填寫購買數(shù)量或者競(jìng)拍價(jià)格?if (條件1) if (條件2) /JavaScript代碼; 語法：語法：嵌套 if 語句 2-1fu

33、nction calcu()var numb1= document.calc.num1.value;var numb2= document.calc.num2.value;if (numb1!=) & (numb2!=) if (parseFloat(numb1)0) alert(競(jìng)拍價(jià)格不能小于零！n請(qǐng)重填); return; /函數(shù)返回，不再執(zhí)行后面的代碼 if (parseFloat(numb2)0) alert(購買數(shù)量不能小于零！n請(qǐng)重填); return; var total= parseFloat(numb1)*parseFloat(numb2); document.ca

34、lc.result.value=total; .嵌套If語句 2-2購買數(shù)量無意中輸入負(fù)數(shù)，出現(xiàn) bug 怎么辦?switch 語句 2-1switch (表達(dá)式) case 常量1 : JavaScript語句; break; case 常量2 : JavaScript語句; break; . default : JavaScript語句;語法：語法：switch語句 2-2 . var f=document.calc.pay.value; /支付方式代號(hào) var grade; /折扣率 var total= parseFloat(numb1)*parseFloat(numb2); swit

35、ch(parseInt(f) case 1: grade=0.6 ; /打6折優(yōu)惠 break; case 2: .同理其他方式打7折、八折 case 4: grade=0.9 ; /打9折優(yōu)惠 break;default: alert(請(qǐng)重新選擇支付方式！); return; var money=total*grade; /根據(jù)折扣率，計(jì)算實(shí)際總價(jià) document.calc.result.value=money; alert(您享受了+grade*10+折優(yōu)惠！); .銀行轉(zhuǎn)帳 打6折電話支付 打7折郵政匯款 打8折Q幣支付 打9折下拉列表框pay的選項(xiàng)和值JavaScript 核心語言對(duì)

36、象目標(biāo)l使用數(shù)組l使用循環(huán)語句控制應(yīng)用程序l創(chuàng)建自定義函數(shù) l理解 JavaScript 對(duì)象 l使用 String、Math 和 Date 等對(duì)象 數(shù)組 4-1l聲明數(shù)組 var 數(shù)組名數(shù)組名 = = new Array( (數(shù)組大小數(shù)組大小);); 例：例： var emp = = new Array(3)l添加元素 emp0 = “AA; emp1 = “BB; emp2 = “CC;AABBCCemp 也可以聲明數(shù)組并賦初值： 例：例： var emp=new Array(“AA”，“BB”，“CC”)；使用數(shù)組var emp = new Array(3);emp0 = Ryan Di

37、as;emp1 = Graham Browne;emp2 = David Greene;document.write(數(shù)組emp中的數(shù)據(jù)為:);document.write(emp0+);document.write(emp1+);document.write(emp2+);數(shù)組 4-2 數(shù)組 4-3 l 常用屬性 length ：返回?cái)?shù)組中元素的個(gè)數(shù)l 常用方法方方 法法說說 明明join將數(shù)組中的元素組合成字符串reverse顛倒數(shù)組元素的順序，使第一個(gè)元素成為最后一個(gè)，而最后一個(gè)元素成為第一個(gè)sort對(duì)數(shù)組元素進(jìn)行排序var emp = new Array(3);emp0 = Ryan

38、Dias;emp1 = Graham Browne;emp2 = David Greene;emp.sort( );document.write(“排序結(jié)果是：);document.write(emp0+);document.write(emp1+);document.write(emp2+);數(shù)組排序 4-2 循環(huán) lfor循環(huán)ldo-whilelwhile For 循環(huán)演示document.write(打印金字塔直線);for (var i= 0; i100; i=i+5) document.write();q for循環(huán)例：var i;for (i=0; i10; i+) / 語句; f

39、or 循環(huán)如何實(shí)現(xiàn)當(dāng)i=5 時(shí)， .myfont font-size:150; color:#c99c96; font-family:Webdings /產(chǎn)生埃及圖像的特殊字體產(chǎn)生埃及圖像的特殊字體 document.write(每個(gè)字符都對(duì)應(yīng)一個(gè)漂亮的埃及圖像每個(gè)字符都對(duì)應(yīng)一個(gè)漂亮的埃及圖像);do var c = prompt(輸入一個(gè)字符，輸入輸入一個(gè)字符，輸入N 或或n停止停止,A) ; document.write (+c+); while (c !=N & c !=n);qwhile循環(huán) while(循環(huán)條件) /語句； qdowhile循環(huán) do /語句； while(循

40、環(huán)條件);while和dowhile循環(huán)先執(zhí)行，后判斷循環(huán)條件先執(zhí)行，后判斷循環(huán)條件輸入一個(gè)字符，直到N停止，用哪個(gè)循環(huán)JavaScript 函數(shù)內(nèi)置函數(shù)內(nèi)置函數(shù) l eval 函數(shù)： 用于計(jì)算字符串表達(dá)式的值 l isNaN 函數(shù)：用于驗(yàn)證參數(shù)是否為 NaN（非數(shù)字）JavaScript 代碼var str1=prompt(“輸入一個(gè)表達(dá)式，我給您計(jì)算,1+1);var result=eval(str1);document.write(str1+=+result);var x = prompt(輸入一些數(shù)據(jù),0);if (isNaN(x) alert (x + 不是一個(gè)數(shù)字);else al

41、ert (x + 是一個(gè)數(shù)字);自定義函數(shù)l 定義函數(shù)：function 函數(shù)名( 參數(shù)1,參數(shù)2， ) 語句; l 調(diào)用函數(shù)：函數(shù)調(diào)用一般和表單元素的事件一起使用，調(diào)用格式為：事件名“函數(shù)名” ;function sum ( one, two) var result = one + two; return result;表示單擊此按鈕時(shí)，調(diào)用函數(shù)sum( )執(zhí)行函數(shù)的應(yīng)用 num1num2result定義函數(shù) JavaScript 代碼 function compute(op) var num1,num2; num1=parseFloat(document.myform.num1.value

42、); num2=parseFloat(document.myform.num2.value); if (op=+)document.myform.result.value=num1+num2 ; if (op=-)document.myform.result.value=num1-num2 ; if (op=*)document.myform.result.value=num1*num2 ; if (op=/ & num2!=0)document.myform.result.value=num1/num2 ; 定義函數(shù)compute( )，完成計(jì)算的功能。op參數(shù)代表運(yùn)算符號(hào) 調(diào)用函數(shù)

43、 第一個(gè)數(shù) 第二個(gè)數(shù) 計(jì)算結(jié)果 JavaScript 對(duì)象簡介 2-1l 對(duì)象是屬性和/方法的組合l 屬性是對(duì)象所擁有的一組外觀特征，一般為名詞 l 方法是對(duì)象可以執(zhí)行的功能，一般為動(dòng)詞 例如：汽車Ferrari對(duì)象：汽車屬性：型號(hào)：法拉利顏色：綠色方法：前進(jìn)、剎車、倒車JavaScript 對(duì)象簡介2-2q三類對(duì)象三類對(duì)象 瀏覽器對(duì)象瀏覽器對(duì)象 腳本對(duì)象腳本對(duì)象 HTML 對(duì)象對(duì)象 l瀏覽器窗口windowl文檔 documentlurl地址等lString字符串對(duì)象lDate日期對(duì)象lMath數(shù)學(xué)對(duì)象等 各種HTML標(biāo)簽:l段落l圖片l超鏈接等String 對(duì)象 3-1創(chuàng)建字符串有兩種不同

44、方法 ：l使用 var 語句 var newstr = “這是我的字符串這是我的字符串l創(chuàng)建 String 對(duì)象var newstr = new String (“這是我的字符串這是我的字符串) String 對(duì)象 3-2名名 稱稱說說 明明屬性length返回字符串的長度 方法big( )增大字符串文本 blink( )使字符串文本閃爍（IE 瀏覽器不支持）bold( )加粗字符串文本 fontcolor( )確定字體顏色 italics( )用斜體顯示字符串 indexOf(“子字符串”，起始位置 ) 查找子字符串的位置strike( )顯示加刪除線的文本 sub( )將文本顯示為下標(biāo) t

45、oLowerCase( )將字符串轉(zhuǎn)換成小寫 toUpperCase( )將字符串轉(zhuǎn)換成大寫 語法：indexOf(“查找的子字符串”，查找的起始位置)返回子字符串所在的位置，如果沒找到，返回 1例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回結(jié)果為2，起始位置是0 function checkEmail( ) var e=document.myform.email.value; if (e.length=0) /檢測(cè)長度是否為0，即是否為空 alert(電子郵件不能為空!); return ; if (e.indexOf(,0)=-1) /

46、檢測(cè)是否包含”符號(hào) alert(電子郵件格式不正確n必須包含符號(hào)！); return ; if (e.indexOf(.,0)=-1) /檢測(cè)是否包含”.”符號(hào) alert(電子郵件格式不正確n必須包含.符號(hào)！); return ; document.write(恭喜您！，注冊(cè)成功！歡迎進(jìn)入古城熱線！); 檢查電子郵件emailemail是否包含“”和”.”String 對(duì)象 3-3返回結(jié)果-1表示沒找到“”字符Math 對(duì)象 2-1名稱名稱 說說 明明屬性PI 的值， 約等于 3.1415LN1010 的自然對(duì)數(shù)的值，約等于 2.302EEuler 的常量的值，約等于 2.718。Euler

47、 的常量用作自然對(duì)數(shù)的底數(shù)abs(y)返回 y 的絕對(duì)值sin (y) 返回 y 的正弦，返回值以弧度為單位。cos (y)返回 y 的余弦，返回值以弧度為單位tan (y)返回 y 的正切，返回值以弧度為單位 min (x, y)返回 x 和 y 兩個(gè)數(shù)中較小的數(shù) max (x, y)返回 x 和 y 兩個(gè)數(shù)中較大的數(shù) random返回0-1的隨機(jī)數(shù)方法round (y)四舍五入取整sqrt (y)返回 y 的平方根Math.random( ) ：產(chǎn)生：產(chǎn)生01的隨機(jī)小數(shù)的隨機(jī)小數(shù)Math.round( )：四舍五入取整，如：四舍五入取整，如9.34 取整為取整為9自動(dòng)刷新 document

48、.write(2秒自動(dòng)刷新，隨機(jī)顯示圖片); var i=0; i=Math.round(Math.random( )*8+1); document.write(); Math 對(duì)象 2-2假定隨機(jī)產(chǎn)生的數(shù)字i=3，上述代碼即為：顯示第三幅圖片（3.jpg） 如何實(shí)現(xiàn)每隔2秒刷新網(wǎng)頁Math.round(Math.random( )*8+1) 產(chǎn)生1-9的數(shù)字Date 對(duì)象10-1 lDate 對(duì)象存儲(chǔ)的日期為自 1970 年 1 月 1 日 00:00:00 以來的毫秒數(shù)var 日期對(duì)象 = new Date (年、月、日等參數(shù))例：var mydate=new Date( “July 29

49、, 1998,10:30:00 ”) 如果沒有參數(shù)，表示當(dāng)前日期和時(shí)間例：var today = new Date( ) Date 對(duì)象10-2lData 方法的分組： 方法分組方法分組說說 明明 setxxx這些方法用于設(shè)置時(shí)間和日期值getxxx 這些方法用于獲取時(shí)間和日期值Toxxx這些方法用于從 Date 對(duì)象返回字符串值p a r s e x x x & UTCxx這些方法用于解析字符串Date 對(duì)象10-3l用作 Date 方法的參數(shù)的整數(shù)： 值值整整 數(shù)數(shù) Seconds 和和 minutes0 至至 59 Hours0 至至 23 Day0 至至 6（星期（星期幾）幾）

50、 Date1 至至 31（月份中的天數(shù)）（月份中的天數(shù)） Months0 至至 11（一月（一月至十二月）至十二月） Date 對(duì)象10-4lSet 方法：方法方法說明說明setDate設(shè)置 Date 對(duì)象中月份中的天數(shù)，其值介于 1 至 31 之間。setHours設(shè)置 Date 對(duì)象中的小時(shí)數(shù)，其值介于 0 至 23 之間。setMinutes設(shè)置 Date 對(duì)象中的分鐘數(shù)，其值介于 0 至 59 之間。 setSeconds設(shè)置 Date 對(duì)象中的秒數(shù)，其值介于 0 至 59 之間。 setTime設(shè)置 Date 對(duì)象中的時(shí)間值。 setMonth設(shè)置 Date 對(duì)象中的月份，其值介于

51、1 至 12 之間。Date 對(duì)象10-5lGet 方法：方法方法說明說明getDate返回 Date 對(duì)象中月份中的天數(shù)，其值介于 1 至 31 之間getDay返回 Date 對(duì)象中的星期幾，其值介于 0 至 6 之間getHours返回 Date 對(duì)象中的小時(shí)數(shù)，其值介于 0 至 23 之間getMinutes返回 Date 對(duì)象中的分鐘數(shù)，其值介于 0 至 59 之間getSeconds 返回 Date 對(duì)象中的秒數(shù)，其值介于 0 至 59 之間getMonth返回 Date 對(duì)象中的月份，其值介于 0 至11 之間getFullYear返回 Date 對(duì)象中的年份，其值為四位數(shù)get

52、Time返回自某一時(shí)刻（1970 年 1 月 1 日）以來的毫秒數(shù)Date 對(duì)象10-6方方 法法說說 明明 ToGMTString使用格林尼治標(biāo)準(zhǔn)時(shí)間 (GMT) 數(shù)據(jù)格式將 Date 對(duì)象轉(zhuǎn)換成字符串表示ToLocaleString使用當(dāng)?shù)貢r(shí)間格式將 Date 對(duì)象轉(zhuǎn)換成字符串表示lTo 方法：lParse 方法和 UTC 方法 方方 法法說說 明明Date.parse (date string )用日期字符串表示自 1970 年 1 月 1 日以來的毫秒數(shù) Date.UTC (year, month, day, hours, min., secs. )Date 對(duì)象中自 1970 年 1

53、 月 1 日以來的毫秒數(shù) var now= new Date( );var hour = now.getHours( );if (hour=0 & hour 12 & hour18 & hour 24) document.write(晚上好!);document.write(今天日期:+now.getYear()+年“ +(now.getMonth( )+1)+月+now.getDate()+日);document.write(現(xiàn)在時(shí)間:+now.getHours()+點(diǎn)+now.getMinutes( )+分); Date對(duì)象 10-7如何實(shí)現(xiàn)獲得當(dāng)前日期和時(shí)間獲得小

54、時(shí)，即當(dāng)前是幾點(diǎn)判斷上午、下午還是晚上月份數(shù)字011，注意1Date對(duì)象 10-8lsetTimeout的用法： setTimeout（“調(diào)用的函數(shù)”,”定時(shí)的時(shí)間”） 例： var myTimesetTimeout（”disptime( )”,1000）; clearTimeout（myTime）;本例的時(shí)間可以采用定時(shí)顯示，使用定時(shí)器函數(shù)，每隔1秒調(diào)用disptime( )函數(shù)顯示時(shí)間每隔1000毫秒調(diào)用函數(shù)disptime( )執(zhí)行關(guān)閉定時(shí)器Date 對(duì)象10-8JavaScript 代碼function disptime( ) var time = new Date( ); /獲得當(dāng)前

55、時(shí)間 var hour = time.getHours( ); /獲得小時(shí)、分鐘、秒 var minute = time.getMinutes( ); var second = time.getSeconds( ); var apm=AM; /默認(rèn)顯示上午: AM if (hour12) /按12小時(shí)制顯示 hour=hour-12; apm=PM ; if (minute 10) /如果分鐘只有1位，補(bǔ)0顯示 minute=0+minute; if (second 10) /如果秒數(shù)只有1位，補(bǔ)0顯示 second=0+second;document.myform.myclock.value

56、= hour+:+minute+:+ second+ +apm;var myTime = setTimeout(disptime( ),1000);無邊框的文本框myclock使用定時(shí)器函數(shù)，每隔1秒調(diào)用disptime( )函數(shù)刷新顯示獲得小時(shí)、分鐘、秒根據(jù)12小時(shí)制調(diào)整時(shí)間和AM/PM標(biāo)志確保分鐘和秒顯示位數(shù)為 2 位var myTime = setTimeout(disptime( ),1000);設(shè)置定時(shí)器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime( )執(zhí)行，刷新時(shí)鐘顯示 Date對(duì)象 10-10設(shè)置樣式：無邊框的文本框Onload ( ) 事件，頁面加載就調(diào)用函數(shù)：dispt

57、ime（顯示時(shí)間）目標(biāo) l理解事件處理程序的概念 l了解JavaScript 中的常用事件 l掌握常用的瀏覽器對(duì)象：window documenthistory事件處理 q 事件是發(fā)生并得到處理的操作事件：電話振鈴處理事件JavaScript 事件處理程序 l JavaScript 事件處理程序就是一組語句，在事件（如點(diǎn)擊鼠標(biāo)或移動(dòng)鼠標(biāo)等）發(fā)生時(shí)執(zhí)行 事件處理事件事件處理程序的基本語法是：事件名= JavaScript 代碼或調(diào)用函數(shù) 例如：表示鼠標(biāo)按下時(shí)，將調(diào)用執(zhí)行函數(shù)check( ) 。JavaScript 事件 事件名說明onClick鼠標(biāo)單擊onChange 文本內(nèi)容或下拉菜單中的選項(xiàng)

58、發(fā)生改變onFocus 獲得焦點(diǎn)，表示文本框等獲得鼠標(biāo)光標(biāo)。onBlur 失去焦點(diǎn)，表示文本框等失去鼠標(biāo)光標(biāo)。onMouseOver 鼠標(biāo)懸停，即鼠標(biāo)停留在圖片等的上方onMouseOut 鼠標(biāo)移出，即離開圖片等所在的區(qū)域onMouseMove鼠標(biāo)移動(dòng)，表示在層等上方移動(dòng)onLoad 網(wǎng)頁文檔加載事件onSubmit 表單提交事件onMouseDown 鼠標(biāo)按下onMouseUp 鼠標(biāo)彈起cardpassmyformfunction myfun1( ) if (document.myform.card.value=請(qǐng)注意格式：10 xxxxxx) document.myform.card.va

59、lue= ;function myfun2( ) var a=document.myform.card.value; if (a.substr(0,2)!=10 | isNaN(a) alert(格式錯(cuò)誤，請(qǐng)重新輸入) ; document.myform.card.focus(); onFocus和onBlur 事件-1文本框獲得鼠標(biāo)焦點(diǎn)時(shí)（onFocus）調(diào)用的函數(shù)：清空卡號(hào)文本框 文本框失去鼠標(biāo)焦點(diǎn)時(shí)（onBlur）調(diào)用的函數(shù)：判斷格式是否正確 focus( )方法再次獲得焦點(diǎn)，即鼠標(biāo)光標(biāo)回到卡號(hào)文本框卡號(hào)： 密碼： onFocus和onBlur 事件-2表單元素樣式添加事件處理onMou

60、seOver和onMouseDown事件圖片切換 低價(jià)轉(zhuǎn)讓哈士奇弟弟 移過來看看俺啊添加事件處理 ：切換圖片onMouseOver=src=dog2.jpg 表示本圖片的圖片名稱替換為dog2.jpg。請(qǐng)注意：由于外面兩端已有雙引號(hào)，為區(qū)別起見，dog2.jpg改用為單引號(hào)括起來。Window 對(duì)象 7-1 q屬性 名稱名稱 說明說明 document表示給定瀏覽器窗口中的 HTML 文檔。 history 包含有關(guān)客戶訪問過的URL的信息。location包含有關(guān)當(dāng)前 URL 的信息。 name設(shè)置或檢索窗口或框架的名稱。 status 設(shè)置或檢索窗口底部的狀態(tài)欄中的消息。 screen包含有關(guān)客戶端的屏幕和顯示性能的信息。 Window 對(duì)象 7-2 q方法方法 名稱 說明 alert (“m提示信息)顯示包含消息的