1、第八章 JavaScript介紹,重點：,難點：,8.1 JavaScript概述,JavaScript的功能 JavaScript的特性 為什么要用JavaScript JavaScript版的Hello world JavaScript的編程方法,8.1 JavaScript概述,8.1.1 JavaScript的功能 JavaScript（JS） 是現(xiàn)在在Web上應(yīng)用最為廣泛的客戶段腳本編程語言。 它能處理相當(dāng)多的任務(wù)，包括對表單數(shù)據(jù)的確認(rèn)到創(chuàng)建復(fù)雜的用戶界面。JS 將成為WEB 開發(fā)人員不得不掌握的語言。,8.1 JavaScript概述,8.1.2 JavaScript的特性 Jav

2、aScript 是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。 使用它的目的是與HTML 超文本標(biāo)記語言、Java 腳本語言（Java 小程序）一起實現(xiàn)在一個Web 頁面中連接多個對象，與Web 客戶交互作用。 它是通過嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML 語言中實現(xiàn)的。,8.1 JavaScript概述,8.1.3 為什么要用JavaScript JavaScript的出現(xiàn)彌補了HTML 語言的缺陷，是Java 與HTML 折中的選擇。 與HTML 配合使用。HTML 只能顯示靜態(tài)頁面；JavaScript 則可以實現(xiàn)動態(tài)地進行頁面編輯，輸入驗證，提交表

3、單等。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World document.write(Hello World!); ,8.1 JavaScript概述,8.1.4 JavaScript版Hello World Html代碼我們都已經(jīng)很熟悉了，其中僅僅多了一句 document.write(Hello World!); 其中標(biāo)簽表示要插入腳本代碼，其中l(wèi)anguage屬性表示是js代碼，隨后標(biāo)簽內(nèi)中的的document： 文檔對象document是JavaScript中window（表示當(dāng)前窗口）和frames（表示當(dāng)前框架）對象的一個屬性，是顯示于窗

4、口或框架內(nèi)的一個文檔。 document.write() 可以向當(dāng)前文檔對象寫入一段字符串。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World 因為運行腳本涉及到本地安全的問題，因此會出現(xiàn)下面這種情況，這是由于瀏覽器的安全性設(shè)置導(dǎo)致的。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World,8.1 JavaScript概述,8.1.5 JavaScript編程方法 腳本開發(fā)人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創(chuàng)建動態(tài)的網(wǎng)頁元素。每一個網(wǎng)頁元素（一個HTML標(biāo)簽）都對應(yīng)著一個對象（object，所謂“

5、對象”）。 文檔對象模型把整張網(wǎng)頁組織成這樣的一個樹狀的結(jié)構(gòu)，樹結(jié)構(gòu)中的每一個元素都被視為一個節(jié)點（node）。包括JavaScript在內(nèi)的各種編程語言都可以通過文檔對象模型來訪問和改變網(wǎng)頁的各種細(xì)節(jié)。,8.2 JavaScript的基本語法,JS腳本的基本結(jié)構(gòu) JS的數(shù)據(jù)類型與變量 JS的控制語句 JS的函數(shù)與對象 JS嵌入到HTML,8.2 JavaScript的基本語法,8.2.1 腳本的基本結(jié)構(gòu) 其中標(biāo)簽表示使用js腳本語言 而標(biāo)簽內(nèi)為js語句，因為這種標(biāo)簽屬于html語言的注釋語句，這樣如果瀏覽器不支持js，那么js語句也不會顯示出來。,8.2 JavaScript的基本語法,8.

6、2.2 JS的數(shù)據(jù)類型與變量 JS是區(qū)分大小寫的腳本語言，其語法與c/c+，java語言很相近。變量命名規(guī)則基本相同。 JS有很多數(shù)據(jù)類型，如整數(shù)，小數(shù)，時間，字符串，數(shù)組等等。 JS是一種弱數(shù)據(jù)類型的語言，變量聲明只要用var就可以了。例如 var i; JS中的變量可以指向任何對象，包括基本數(shù)據(jù)類型，和HTML DOM 中任意標(biāo)簽對象。,8.2 JavaScript的基本語法,8.2.3 JS的控制語句 JS的ifelse,for(;),while,swichcase等語句的用法與c語言等完全相同。同時swich()中的常量還不僅僅限于整數(shù)。 例如 for(var i=0;i10;i=i+

7、1) if(i=3)document.write(“No”); else document.write(i); ,8.2 JavaScript的基本語法,8.2.4 JS的函數(shù)與對象 Js的函數(shù)聲明使用function關(guān)鍵字。例如 function myFun(a) alert(a);return false; a為形參，不用帶數(shù)據(jù)類型 返回值可有可無，根據(jù)具體情況而定。 每個函數(shù)都是js的一個對象。函數(shù)內(nèi)部可以使用this，表示對象本身。例如： function student(id, name) this.sid = id; this.sname = name; ,8.2 JavaScri

8、pt的基本語法,8.2.5 JS嵌入到HTML Js代碼可以嵌入在html中的任何地方，但一般都放在head標(biāo)簽之內(nèi) Js不必有main函數(shù)。 Js代碼在html中順序執(zhí)行。在html頁面載入后就已經(jīng)運行完了。,8.3 JavaScript對象,JavaScript對象概述 JavaScript對象基礎(chǔ) JavaScript內(nèi)置對象 Document對象,8.3 JavaScript對象,8.3.1 JavaScript對象概述 Javascript的一個重要功能就是面向?qū)ο蟮墓δ?，通過基于對象的程序設(shè)計，可以用更直觀、模塊化和可重復(fù)使用的方式進行程序開發(fā)。 一組包含數(shù)據(jù)的屬性和對屬性中包含數(shù)

9、據(jù)進行操作的方法，稱為對象。比如要設(shè)定網(wǎng)頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor=blue，就是表示使背景的顏色為藍(lán)色。,8.3 JavaScript對象,8.3.2 JavaScript對象基礎(chǔ) 對象是JavaScript的基礎(chǔ)。實際上JavaScript語言中的一切都是對象，JavaScript的多數(shù)能力也正起源于此。 上節(jié)說明了創(chuàng)建一個JavaScript 對象的方法，即function student () 。其中this 關(guān)鍵字所指的就是這個JavaScript 對象的屬性。 可以使用new關(guān)鍵字 初始化一個對象

10、,8.3 JavaScript對象,8.3.3 JavaScript內(nèi)置對象 Window 對象表示瀏覽器窗口。 Navigator 包含客戶端瀏覽器的信息。 Screen 包含客戶端顯示屏的信息。 History 包含了瀏覽器窗口訪問過的 URL。 Location 包含了當(dāng)前URL的信息。 Document 代表整個 HTML 文檔， Event代表事件的狀態(tài),8.3 JavaScript對象,8.3.4 Document對象,8.3 JavaScript對象,8.3.4 Document對象,8.3 JavaScript對象,8.3.4 Document對象,8.4 JavaScript

11、事件,JS事件概述 JS事件方法 JS事件應(yīng)用,8.4 JavaScript事件,8.4.1 JS事件概述 用戶與網(wǎng)頁交互時產(chǎn)生的操作，稱為事件。絕大部分事都由用戶的動作所引發(fā)，如：用戶按鼠標(biāo)的按鈕，就產(chǎn)生click事件，若鼠標(biāo)的指針的鏈接上移動，就產(chǎn)生mouseover事件等等。,8.4 JavaScript事件,8.4.2 JS事件方法 傳統(tǒng)的方法就是定義元素的on.事件，例如對于表單中的一個按鈕 其中onClick=“alert(ok);”就表示，當(dāng)單擊該按鈕的時候，響應(yīng)一個alert方法。,8.4 JavaScript事件,8.4.3 JS事件應(yīng)用驗證表單 function check

12、(form) if (form.username.value= | form.pwd.value=) alert(請?zhí)顚懲暾畔ⅲ?; return false; else return true; function jsSubmit (form) if (check(form) form.submit(); JavaScript提交表單 用戶名： 密碼： ,8.4 JavaScript事件,8.4.3 JS事件應(yīng)用驗證表單 在用戶輸入登錄信息（用戶名、密碼等）并提交表單時，需對用戶輸入的完整性進行驗證。若未通過驗證，則提示錯誤信息；若通過驗證，則跳轉(zhuǎn)到HelloWorld.html。 (1)

13、在用戶點擊“js 提交”按鈕時觸發(fā)了onclick 事件，以表單為參數(shù)自動調(diào)用jsSubmit() 方法。 (2)在jsSubmit() 方法中，又調(diào)用了check() 方法； (3)在check() 方法中，對表單數(shù)據(jù)進行檢測： 如果表單填寫完整，則返回true 以繼續(xù)提交表單； 如果表單填寫不完整，則提示“請?zhí)顚懲暾畔ⅲ　?，返回false 以中止表單提交； 若表單驗證正確，則通過form.submit() 方法提交表單，跳轉(zhuǎn)到HelloWorld.html 。,8.4 JavaScript事件,8.4.3 JS事件應(yīng)用驗證表單,8.4 JavaScript事件,8.4.3 JS事件應(yīng)用正

14、則表達(dá)式 function verifyEmail(email) var myReg = /_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/; if (myReg.test(email) return true; return false; ,8.4 JavaScript事件,8.4.3 JS事件應(yīng)用正則表達(dá)式 在JavaScript中，正則表達(dá)式是由一個RegExp對象表示的?？梢允褂靡粋€RegExp()構(gòu)造函數(shù)來創(chuàng)建RegExp對象,也可以用JavaScript 1.2中的一個特殊語法來創(chuàng)建RegExp對象。就像字符串直接量被定義為包含在引號內(nèi)的字符一樣,正

15、則表達(dá)式直接量也被定義為包含在一對斜杠(/)之間的字符。 /_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/：_A-Za-z0-9表示下劃線或大小寫的字母或數(shù)字。 test() 方法用來測試某段字符串是否匹配指定的正則表達(dá)式。若匹配，則返回true ；否則返回false 。,8.5 CSS格式與應(yīng)用,HTML排版缺點 用CSS改進排版 CSS語法 用CSS美化網(wǎng)頁,8.5 CSS格式與應(yīng)用,8.5.1 Html排版的缺點 HTML 主要側(cè)重于定義內(nèi)容，比如 表示一個段落， 表示標(biāo)題，而并沒有過多設(shè)計HTML 的排版和界面效果。隨著Internet 的迅猛發(fā)展，H

16、TML 被廣泛應(yīng)用，上網(wǎng)的人們當(dāng)然希望網(wǎng)頁做得漂亮些，因此HTML 排版和界面效果的局限性日益暴露出來。為了解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML 增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片，過多利用table 來排版，用空白的圖片表示白色的空間等。直到CSS 出現(xiàn)。,8.5 CSS格式與應(yīng)用,8.5.2用css改進排版 CSS 可算是網(wǎng)頁設(shè)計的一個突破，它解決了網(wǎng)頁界面排版的難題。HTML 的Tag 主要是定義網(wǎng)頁的內(nèi)容(Content) ，而CSS 決定這些網(wǎng)頁內(nèi)容如何顯示(Layout) 。 DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之

17、一，通常為了說明與HTML網(wǎng)頁設(shè)計語言中的表格（table）定位方式的區(qū)別，因為XHTML網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。,8.5 CSS格式與應(yīng)用,8.5.3 Css的基本語法 CSS又名，層疊樣式表，一個樣式(Style)的語法由三部分構(gòu)成： 選擇器(Selector) 屬性(Property) 屬性值(Value) 必須把樣式表信息包括在 和 標(biāo)記中，為了使樣式表在整個頁面中產(chǎn)生作用，應(yīng)把該組標(biāo)記及其內(nèi)容放到 和 中去。,8.5 CSS格式與應(yīng)用,8.5.3 Css的基本語法 基本語法： CSS的定義是由三個部分構(gòu)成：選擇符（selecto

18、r），屬性（properties）和屬性的取值（value）。基本格式如下： selector property: value （選擇符 屬性：值）,8.5 CSS格式與應(yīng)用,8.5.3 Css的基本語法 選擇符組： 可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義： h1, h2, h3, h4, h5, h6 color: green ,8.5 CSS格式與應(yīng)用,8.5.3 Css的基本語法 類選擇符： 用類選擇符能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如想要兩個不同的段落，一個段落向右對齊，一個段落居中，可以先定義兩個類： p.right text-align: right p.center text-align: center,8.5 CSS格式與應(yīng)用,8.5.3 Css的基本語法 注釋:/* . */ 你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以/* 開頭，以*/ 結(jié)尾，如下: /* 定義段落樣式表