Java Web應(yīng)用開發(fā) 從入門到精通 課件 4.JavaScript_第1頁
Java Web應(yīng)用開發(fā) 從入門到精通 課件 4.JavaScript_第2頁
Java Web應(yīng)用開發(fā) 從入門到精通 課件 4.JavaScript_第3頁
Java Web應(yīng)用開發(fā) 從入門到精通 課件 4.JavaScript_第4頁
Java Web應(yīng)用開發(fā) 從入門到精通 課件 4.JavaScript_第5頁
已閱讀5頁，還剩68頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

第四章:客戶端動態(tài)腳本JavaScript教學(xué)目標(biāo)理解客戶端動態(tài)的基本原理掌握J(rèn)avaScript的基本語法了解JavaScript的內(nèi)置對象理解JavaScript文檔對象模型的原理理解JavaScript的事件處理機制掌握在Dreamweaver中編寫JavaScript常見事件處理程序并綁定HTML元素的方法13JavaScript事件處理45AgendaJavaScript基礎(chǔ)JavaScript文檔對象模型JavaScript框架2JavaScript內(nèi)置對象1JavaScript基礎(chǔ)1.

一個簡單的例子警告對話框即客戶端動態(tài)腳本的典型案例客戶端動態(tài)不是指Flash或者gif圖片的動畫，而是指與用戶的交互，如點擊某個頁面元素，敲鍵盤，滑動鼠標(biāo)等系統(tǒng)作出的響應(yīng)這些均發(fā)生在本地，而不是在遠程JavaScript就是實現(xiàn)客戶端動態(tài)的重要手段1.

JavaScript基礎(chǔ)JavaScript是1995年由Netscape公司發(fā)布.最開始叫Livescript,后來借Java的大名，改為JavaScript.語法上與Java類似，但在機制上完全不同.Netscape后來將其貢獻給了W3C.這是一種基于對象的事件驅(qū)動的安全腳本語言1.

JavaScript基礎(chǔ)JavaScript內(nèi)嵌在HTML代碼中以實現(xiàn)用戶和web系統(tǒng)的交互功能.它可以直接處理用戶的輸入而不需要使用遠程服務(wù)器端的程序.跨平臺，和瀏覽器有關(guān)，只要瀏覽器支持就可以運行.大部分通用，但部分代碼因為不同的瀏覽器，會存在一些運行效果上的差異.數(shù)據(jù)類型—基本數(shù)據(jù)類型數(shù)據(jù)類型—引用數(shù)據(jù)類型引用數(shù)據(jù)類型即Object類型，是一種復(fù)合類型，內(nèi)部由數(shù)據(jù)和方法組成。數(shù)據(jù)一般以“鍵:值”對作為其基本數(shù)據(jù)結(jié)構(gòu)，每個“鍵:值”對以逗號分隔，整個鍵值對集合存放在大括號中。數(shù)據(jù)類型—引用數(shù)據(jù)類型還可以在其中加入嵌套對象和函數(shù)數(shù)據(jù)類型-弱類型弱類型的語言，不創(chuàng)建或者不用指明類型也可以直接使用不需要指定類型由其值的類型自動確定運算符與表達式運算符是指針對變量執(zhí)行各種操作的符號或關(guān)鍵字，由變量和運算符組成的等式即表達式。JavaScript中主要有算數(shù)運算符、賦值運算符、比較運算符、邏輯運算符、字符串連接運算符。算術(shù)運算符算術(shù)運算符用于執(zhí)行變量之間的算術(shù)運算，給定變量x=20，y=10，計算規(guī)則如下。

賦值運算符比較運算符邏輯運算符字符串連接運算符控制語句控制語句即控制代碼執(zhí)行流程的語句，JavaScript中控制語句主要有條件語句和循環(huán)語句。條件語句條件語句是根據(jù)指定的條件，選擇性地執(zhí)行特定代碼的控制語句。在JavaScript中常見的條件語句有if與和switch語句。單分支語句雙分支語句多分支結(jié)構(gòu)循環(huán)語句循環(huán)語句是指按條件重復(fù)執(zhí)行表達式的語句。在JavaScript中，循環(huán)語句主要有for循環(huán)、while循環(huán)和do-while循環(huán)三種。在for循環(huán)中，初始化變量，即為循環(huán)聲明一個變量，該變量通常作為計數(shù)器，即用于設(shè)置循環(huán)的次數(shù)。而條件表達式，即根據(jù)初始化的變量，來決定是否要執(zhí)行循環(huán)體。操作表達式，一般是初始化變量的計數(shù)器，是決定循環(huán)能夠正常終止的關(guān)鍵代碼。while和dowhile語句while循環(huán)是在條件表達式為true的前提下，循環(huán)執(zhí)行指定一段代碼，直到表達式為false時結(jié)束循環(huán)。

do-while循環(huán)的語法結(jié)構(gòu)如下。do-while和while最大的差別在于do-while至少會執(zhí)行一次循環(huán)體，而while可能一次也不執(zhí)行。break和continue語句continue語句是用于中止當(dāng)前當(dāng)次循環(huán)，即在某一次循環(huán)中，如果執(zhí)行到continue語句，則continue之后的語句不再執(zhí)行，直接進入下一次循環(huán)。break語句則是直接結(jié)束循環(huán)，即如果在循環(huán)體中執(zhí)行到break語句，不論還剩下幾次循環(huán)，都會直接結(jié)束循環(huán)JavaScript函數(shù)

JavaScript使用關(guān)鍵詞“function”定義函數(shù)function

name(arg1,arg2,arg3…){語句…..[return

……]}

通常來說,函數(shù)定義在head區(qū)域，標(biāo)簽<script>和</script>之間2JavaScript內(nèi)置對象JavaScript內(nèi)置對象為了將簡化開發(fā)者的工作，JavaScript將許多常見操作也封裝成了對象及相關(guān)的方法，這些對象即內(nèi)置對象。JavaScript中的常用內(nèi)置對象共有：字符串對象、數(shù)組對象、日期對象和數(shù)學(xué)對象四種。字符串對象字符串是指處理字符串?dāng)?shù)據(jù)的對象?？梢允褂脛?chuàng)建String對象的方式來創(chuàng)建，即s=newString(“hello”)，也可以使用一個變量指向一個字符串?dāng)?shù)據(jù)的方式來創(chuàng)建字符串對象，即s=”hello”。數(shù)組對象數(shù)組是一種能夠存儲多個值的復(fù)合數(shù)據(jù)類型。數(shù)組中的每一個值，可以通過數(shù)組變量的下標(biāo)來訪問，其第一個元素的下標(biāo)為0。JavaScript使用newArray()來創(chuàng)建數(shù)組日期對象日期對象是用于處理日期時間的對象。JavaScript使用newDate()來創(chuàng)建

數(shù)學(xué)對象數(shù)學(xué)對象即執(zhí)行常見數(shù)學(xué)任務(wù)的對象。在JavaScript中，該對象不需額外創(chuàng)建，直接使用Math.屬性或者Math.方法即可。

Math常用屬性Math對象的常用方法3JavaScript文檔對象模型（DOM）什么是文檔對象模型?文檔對象模型（document

object

model），簡稱DOM將HTML抽象成節(jié)點和對象的集合.可以通過改變抽象節(jié)點和對象的屬性、內(nèi)容和結(jié)構(gòu)來改變HTML頁面的結(jié)構(gòu)，內(nèi)容和樣式.

是html和腳本語言之間連接的橋梁.JavaScript對象JavaScript是基于對象的語言.這里的對象是一種由屬性和方法組成的元素這種元素是HTML元素的一種映射其屬性和方法對應(yīng)HTML標(biāo)簽的屬性和事件DOM對象分為：內(nèi)置和html兩種對象內(nèi)置瀏覽器對象內(nèi)置瀏覽器對象是較為常用且功能強大的DOM對象內(nèi)置瀏覽器對象可以訪問Window對象(瀏覽器窗口)及其子對象(各種控件)Window對象Window是瀏覽器頂級對象.對應(yīng)的是瀏覽器窗口它的屬性和方法可以直接使用，不需要加window對象常用屬性常用方法Screen對象screen對象是對客戶端顯示屏幕的封裝。通過screen對象，可根據(jù)屏幕尺寸大小，在瀏覽器里決定加載大圖像還是小圖像，還能控制瀏覽器窗口在顯示器屏幕中的位置，常用屬性document對象document對象表示整個HTML文檔，即網(wǎng)頁中從<html>開始，到</html>結(jié)束的所有內(nèi)容。因此document對象可用來訪問頁面中的所有元素。document對象中包含了集合、屬性和方法，通過這些內(nèi)容來達到獲取和操作HTML元素的目的。

對象集合實例document對象的屬性document對象的方法getElementById方法getElementById()是document對象最常用的方法，通過這個方法，可以獲取一個HTML元素的引用，再通過該元素對應(yīng)的屬性，來實現(xiàn)對元素的修改。

getElementsByName方法getElementsByName也是常用的方法之一，它可以獲取具有相同name屬性的元素的集合，一般用于處理多選框的值。location對象location對象是對當(dāng)前URL信息的封裝。但其中href屬性，如果對其賦值一個網(wǎng)址，則會起到頁面跳轉(zhuǎn)的效果。如location.href=“http://”，當(dāng)js執(zhí)行到該代碼時，頁面會跳轉(zhuǎn)至南京審計大學(xué)的首頁。常用屬性常用方法history對象抽象了瀏覽器的歷史記錄對象

屬性next:下一個文檔previous:前一個文檔

方法

back():跳轉(zhuǎn)到瀏覽器歷史記錄中的上一個文檔,等同于瀏覽器的“后退”按鈕forward():跳轉(zhuǎn)到瀏覽器歷史記錄的下一個文檔,等同于瀏覽器的“前進”按鈕go(index):跳轉(zhuǎn)至瀏覽器歷史記錄的制定頁面（類似于按索引訪問）

如果

索引<-1,后退,索引>1,前進,索引=1,刷新.4JavaScript事件處理事件驅(qū)動JavaScript使用事件去驅(qū)動動作和響應(yīng).事件是指在瀏覽器中發(fā)生的用戶交互動作，如鼠標(biāo)點擊、鼠標(biāo)拖拽、敲擊鍵盤、切換選擇框等。由鼠標(biāo)或鍵盤觸發(fā)的應(yīng)用動作稱為事件驅(qū)動.當(dāng)事件發(fā)生時，觸發(fā)的一系列應(yīng)用動作則稱為事件驅(qū)動，響應(yīng)該動作的程序即事件處理程序。在JavaScript中，對應(yīng)動作的js函數(shù)即事件處理程序?qū)嵗搶嵗龑崿F(xiàn)的功能是當(dāng)用戶輸入完用戶名，鼠標(biāo)離開該輸入框時，檢查輸入用戶名的長度，如果長度小于6，則彈出對話框提示“用戶名長度必須大于或者等于6”。一、編寫事件處理程序：js函數(shù)二、找出事件匹配“滿足鼠標(biāo)離開該輸入框時”這樣一個條件：對應(yīng)本例要求的onBlur事件，即鼠標(biāo)離開事件。從源碼可以看出，這個事件是作為html元素的一個屬性。三、如何在滿足該條件時調(diào)用事先編寫好的響應(yīng)程序：將事先定義好的事件處理程序（js函數(shù)），賦值給onBlur屬性。常見事件OnClick事件鼠標(biāo)單擊事件當(dāng)鼠標(biāo)單擊某個對象時，觸發(fā)該事件Button,

CheckBox,

radio,

body,

td,

img等.幾乎所有的HTML對象都支持OnClick事件，其中按鈕是最常用的.

“onclick”

對應(yīng)單擊事件.

“check()”

對事件的響應(yīng)方法，該方法需要我們編寫.

我們也是可以使用內(nèi)置方法來響應(yīng)事件OnChange事件當(dāng)值發(fā)生變化時，觸發(fā)該事件.

常用于選擇框，文本框和文本區(qū)域.<selectname="term"id="term"onchange="loadcourse(this.value);"><optionvalue=“1”>2020-2021上學(xué)期</option>

<optionvalue=“2”>2020-2021下學(xué)期</option></select>案例:級聯(lián)選擇Write

a

js

function

in

the

head

districtInvoke

it

in

htmlOnSubmit事件OnSubmit在表單被提交時觸發(fā).<formaction=“/user/loginaction”method=“POST”

onsubmit=“retrun

check();”>

<inputtype=“text”name=“用戶名”maxlength=“20”id=“id_username”>

<inputtype=“password”name=“密碼”requiredid=“id_userpwd”>

<inputname=“button2”type=“submit”id=“button2”value=“提交">

</form>OnSelect選擇事件OnSelect在文本框或文本區(qū)域中的內(nèi)容被選中時觸發(fā).<input

type=“text”

value=“hello

world!”

onSelect=“alert(’你選中了我!’);”>可應(yīng)用拷貝，統(tǒng)計文本等OnFocus事件OnFocus

在文本或文本框獲得焦點時觸發(fā).一個典型案例：當(dāng)文本框獲得焦點時選中其中的內(nèi)容.<inputtype=“text”name=“用戶名"onfocus="SelectText(this);">functionSelectText(para)

{

if(para.value!="")

para.select();

}OnBlur事件OnBlur當(dāng)文本框或文本區(qū)域失去焦點時觸發(fā)，其觸發(fā)條件與OnFocus相反?？捎糜跈z查文本框是否為空.<inputtype=“text”name=“用戶名"id="id_username"onfocus="SelectText(this);"onblur="isNull(this);">functionisNull(para)

{

if(para.value==“”)

alert(+“內(nèi)容為空！");

}OnLoad事件OnLoad

在頁面加載時觸發(fā).

主要用于<body>可用于頁面數(shù)據(jù)的初始化.<bodyonload="loadlist();">functionloadlist()

{

alert(“加載成功！”);

}OnUnLoad事件OnUnLoad

離開頁面時觸發(fā)，與OnLoad相反.

可用于釋放資源，如注銷時清空記錄.<bodyonunload=”unload();">functionunload()

{

alert(”拜拜”);

}其他事件OnKeyDown

--按下鍵盤中的某個鍵,

OnKeyUp

--

釋放某個鍵,

OnKeyPress

--

OnKeyDown+onKeyUp可以監(jiān)控打了什么字OnMouseMove

–移動鼠標(biāo),

OnMouseOut

–鼠標(biāo)移出某對象,

OnMouseOver–鼠標(biāo)移到某個對象上<tronMouseOver="this.style.background='#E8EFF7'"onMouseOut="this.style.background='#FFFFFF’”>onMousedown–

按下鼠標(biāo),

onMouseUp

–松開鼠標(biāo),

onDblClick–雙擊鼠標(biāo)可以制作右鍵彈出菜單案例:

隨機點名Write

a

js

function

in

the

head

districtInvoke

it

in

htmlData

preparationGet

the

random

index

of

datasetinterval

-

exec

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論