網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元5 JavaScript語言編程_第1頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元5 JavaScript語言編程_第2頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元5 JavaScript語言編程_第3頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元5 JavaScript語言編程_第4頁
網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版） 課件 單元5 JavaScript語言編程_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

單元5JavaScript語言編程網(wǎng)站規(guī)劃建設(shè)與管理維護(hù)（第三版）單元

1了解網(wǎng)站規(guī)劃與設(shè)計學(xué)習(xí)目標(biāo)1了解什么是腳本語言掌握J(rèn)avaScript腳本的基本語法理解JavaScript的常用函數(shù)學(xué)會在網(wǎng)頁中添加JavaScript腳本學(xué)會吃苦耐勞的工匠精神了解文檔對象模型DOM單元內(nèi)容及任務(wù)說明

任務(wù)1JavaScript語言編程

腳本語言（ScriptLanguage）是為了縮短傳統(tǒng)的編寫-編譯-連接-運(yùn)行（edit-compile-link-run）過程而創(chuàng)建的計算機(jī)編程語言。JavaScript等網(wǎng)頁腳本語言目前被廣泛地應(yīng)用于網(wǎng)頁設(shè)計中，通?？梢杂蓱?yīng)用程序臨時調(diào)用并執(zhí)行，網(wǎng)頁腳本不僅可以減小網(wǎng)頁的規(guī)模和提高網(wǎng)頁瀏覽速度，而且可以豐富網(wǎng)頁的表現(xiàn)。網(wǎng)頁腳本語言按應(yīng)用場合劃分，可分為服務(wù)器端的腳本語言和瀏覽器端的腳本語言。

本任務(wù)圍繞JavaScript語言編程展開。任務(wù)2

應(yīng)用文檔對象模型DOM任務(wù)3應(yīng)用JavaScript內(nèi)置對象

DOM（DocumentObjectModel，文檔對象模型）是W3C制訂的標(biāo)準(zhǔn)。DOM是一個能夠使程序和腳本動態(tài)訪問和更新文檔內(nèi)容、結(jié)構(gòu)及樣式的接口，通俗一些講，DOM是這樣一種規(guī)則：它將HTML文檔中的各個對象按容器級別組織成一種樹形訪問結(jié)構(gòu)，以便于JavaScript等面向?qū)ο缶幊陶Z言可以編程訪問文檔中所有的對象及其屬性方法。DOM提供了兩種標(biāo)準(zhǔn)對象集：HTML和XML，并有一個標(biāo)準(zhǔn)接口訪問并操縱它們。

本任務(wù)圍繞了解文檔對象模型DOM展開。

JavaScript提供了很多非常有用的內(nèi)置對象，常用的有數(shù)學(xué)對象、字符串對象、日期對象和數(shù)組對象等。

本任務(wù)圍繞應(yīng)用JavaScript內(nèi)置對象展開。任務(wù)1JavaScript語言編程確定網(wǎng)站建設(shè)的目的8888888888888確定網(wǎng)站建設(shè)的目的網(wǎng)站結(jié)構(gòu)總體策劃010205任務(wù)實(shí)施--JavaScript語言編程JavaScript如何寫入JavaScript如何輸出顯示事件及事件處理確定網(wǎng)站建設(shè)的目的03應(yīng)用JavaScript函數(shù)確定網(wǎng)站建設(shè)的目的04應(yīng)用JavaScript對象任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程任務(wù)實(shí)施-JavaScript語言編程

相關(guān)知識

相關(guān)知識相關(guān)知識-JavaScript簡介JavaScript是世界上最流行的腳本編程語言之一，是可插入HTML頁面的編程代碼，廣泛用于服務(wù)器、PC、筆記本式計算機(jī)、平板電腦和智能手機(jī)等設(shè)備。JavaScript很容易學(xué)習(xí)，它與HTML代碼一樣都是純文本形式，通過使用標(biāo)簽對將代碼直接寫到HTML文檔中，用IE瀏覽器可以立即查看JavaScript腳本的運(yùn)行結(jié)果。JavaScript是動態(tài)的，它可以直接對用戶的輸入做出響應(yīng)。JavaScript既可以用在客戶端，也可以用在服務(wù)器端，但主要是用在客戶端動態(tài)地改變網(wǎng)頁的顯示。JavaScript的出現(xiàn)使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時性的、動態(tài)的、交互性的關(guān)系，使得網(wǎng)頁包含更多活躍的元素和更加精彩的內(nèi)容。任何能編寫HTML文檔的軟件都可以用來編寫JavaScript代碼。本章的操作實(shí)例均使用帶有代碼提示功能的Dreamweaver進(jìn)行編輯。使用這種可視化的IDE工具進(jìn)行編程，有時只需輸入幾個字符或按空格，就會智能地給出一系列可選的函數(shù)或者變量供選擇輸入，給編程者帶來很大的方便。使用<script>…</script>標(biāo)簽對可以在HTML文檔的任意地方插入JavaScript，甚至允許在<html>標(biāo)簽之前或</html>標(biāo)簽之后插入JavaScript。

相關(guān)知識

相關(guān)知識

相關(guān)知識任務(wù)2應(yīng)用文檔對象模型DOM確定網(wǎng)站建設(shè)的目的8888888888888確定網(wǎng)站建設(shè)的目的網(wǎng)站結(jié)構(gòu)總體策劃0102任務(wù)實(shí)施-應(yīng)用文檔對象模型使用window對象的屬性動態(tài)改變窗口狀態(tài)欄的顯示使用document對象確定網(wǎng)站建設(shè)的目的03應(yīng)用Location對象確定網(wǎng)站建設(shè)的目的04應(yīng)用form對象和form元素對象任務(wù)實(shí)施-應(yīng)用文檔對象模型任務(wù)實(shí)施-應(yīng)用文檔對象模型任務(wù)實(shí)施-應(yīng)用文檔對象模型任務(wù)實(shí)施-應(yīng)用文檔對象模型相關(guān)知識-DOM文檔對象模型簡介在本書中，使用的是DOM的HTML對象集（有關(guān)HTMLDOM的一切，參見W3C技術(shù)推廣網(wǎng)站/）。DOM將HTML文檔看作是嵌套其他元素的樹形結(jié)構(gòu)元素。所有的元素，包括它們包含的文字以及樹形都可以被DOM樹訪問到，它們的內(nèi)容可以被修改和刪除，并且可以通過DOM建立新的元素。相關(guān)知識-DOM文檔對象模型簡介基于這樣的結(jié)構(gòu)化文檔對象模型，每個網(wǎng)頁元素例如窗口和文檔都是一個對象，每個對象（即網(wǎng)頁元素）都有自己的屬性、方法及事件。JavaScript可以通過從根結(jié)點(diǎn)往下訪問對象的屬性和方法的方式進(jìn)行編程，以此實(shí)現(xiàn)動態(tài)改變網(wǎng)頁元素的顯示樣式或者輸出客戶端信息，這是JavaScript作為前端顯示腳本的基礎(chǔ)。在DOM中，瀏覽器會為每一個網(wǎng)頁自動創(chuàng)建window對象、document對象、history對象、location對象和navigater對象。每個對象都具有其父對象的屬性和方法，屬性用于描述Web頁面或文檔的變量，方法用于操控部分Web頁面。要在腳本中改變編程、讀取某個對象的屬性、使用其方法時，需要指定完整的路徑。對照圖5-55所示的層次結(jié)構(gòu)圖，完整路徑為：從左至右順著箭頭方向，用點(diǎn)號“.”連接，直到指定的對象或?qū)ο蟮膶傩苑椒?。例如，一個Button對象的value屬性的完整路徑為window.document.formname.buttonname.value。window對象位于瀏覽器所有對象的最頂層，其他對象都是該對象的子對象，所以一般來說，可以省略。例如：window.open()可以寫成open()；window.document.write()可以寫成document.write()。下面講解幾個常用的瀏覽器對象。相關(guān)知識-window對象只要打開瀏覽器窗口，就會自動創(chuàng)建window對象。window對象包括兩類窗口：單個網(wǎng)頁窗口和窗口框架（frame/iframe）。前者指在一個瀏覽器窗口中只打開一個網(wǎng)頁；后者指在一個瀏覽器窗口中打開一個框架集，它是由多個網(wǎng)頁（每個網(wǎng)頁就是一個frame，也稱為幀）組成的一個頁面。幀窗口繼承窗口對象所有的屬性和方法。幀集合非空時，幀的個數(shù)由屬性window.frames.length給出，各幀用window.frames[0]，window.frames[1],…來表示。對于這兩類窗口，相同的屬性方法所起的作用會有所不同。相關(guān)知識-document對象Document對象是一個頂層對象，不需要預(yù)先實(shí)例化就可直接使用。代碼所在的HTML文檔就是它的一個實(shí)例，它包含了當(dāng)前網(wǎng)頁的所有信息，并向瀏覽器提供顯示HTML的方法，是腳本語言中用來輸出結(jié)果的必不可少的方法。引用該對象屬性和方法的格式如下：如果是對當(dāng)前窗口，則用：pertyname如果是對指定窗口，則用：windowObjectNpertyname相關(guān)知識-history對象History對象包含一組用戶在瀏覽器中訪問過的URL信息。相關(guān)知識-location對象location對象提供了瀏覽器窗口中文件的來源、URL、主機(jī)名、路徑等信息。通常情況下，一個URL的格式如下：協(xié)議//主機(jī):端口/路徑名稱#哈希標(biāo)識?搜索條件例如：9:8008/map1/individual.asp#A?uName=Mary各部分說明如下：①協(xié)議：URL的起始部分，包含兩個斜杠//。如http，還可以是ftp、file。②主機(jī)：主機(jī)域名，或者一個網(wǎng)絡(luò)主機(jī)的IP地址。如9。③端口：服務(wù)器用于通信的通信端口。如8008。④路徑名稱：URL的路徑方面的信息。如map1/individual.asp。⑤哈希標(biāo)識：URL中的錨名稱，包括哈希掩碼（#）。只應(yīng)用于HTTP的URL。⑥搜索條件：URL中的任何查詢信息，包括問號。只應(yīng)用于HTTP的URL。相關(guān)知識-form對象和form元素對象form對象是document對象下的一個子對象，表示表單對象。form對象代表一個HTML表單，在HTML文檔中<form>每出現(xiàn)一次，就有一個Form對象被創(chuàng)建。forms[]是一個數(shù)組，下標(biāo)從0開始，它包含了文檔中所有的表單；form元素對象則是form對象的子對象。form及form元素是開發(fā)動態(tài)網(wǎng)站必不可少的網(wǎng)頁元素，它們是用戶與Web服務(wù)器交互的橋梁。詳細(xì)了解form對象和form元素對象對動態(tài)網(wǎng)頁編程是有很大好處的。1）form對象引用某個form對象的語法是：document.forms[index]或document.formname2）form元素對象引用form元素對象的語法如下：documentname.formname.elementname或document.formname.elements[index].type任務(wù)3應(yīng)用JavaScript內(nèi)置對象確定網(wǎng)站建設(shè)的目的8888888888888確定網(wǎng)站建設(shè)的目的0102任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象利用Math對象實(shí)現(xiàn)抽獎效果使用String對象確定網(wǎng)站建設(shè)的目的03使用Date對象制作倒計時牌、顯示時鐘確定網(wǎng)站建設(shè)的目的04使用Array對象實(shí)現(xiàn)跑馬燈特效任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象任務(wù)實(shí)施-應(yīng)用JavaScript內(nèi)置對象相關(guān)知識-Math對象Math對象是內(nèi)置對象，不需要使用new操作符來創(chuàng)建對象實(shí)例，在JavaScript中可以直接調(diào)用Math對象的屬性和方法。Math對象的屬性、方法及其功能分別見表。相關(guān)知識-String對象

在JavaScript中，有字符串?dāng)?shù)據(jù)類型，也有字符串對象。可以將任何字符串類型數(shù)據(jù)作為字符串對象處理。當(dāng)定義了一個字符串后，可以直接將其作為對象使用；也可以通過如下方法定義一個String對象：varstr=newString("abcdef")String對象有一個只讀屬性length，語法為str.length，該屬性返回字符串的字符個數(shù)，當(dāng)字符串為空時，則返回0。相關(guān)知識-Date對象Date對象可以存儲任意一個日期時間。如果不指定時區(qū)，都采用UTC（世界時間）時區(qū)，與GMT（格林威治時間）在數(shù)值上是一樣的。Date對象沒有提供直接訪問的屬性。①使用Date對象之前，必須先使用New操作符創(chuàng)建一個實(shí)例。如果要創(chuàng)建一個初始值為當(dāng)前時間的Date對象實(shí)例，可用如下格式：vartoday=newDate();如果要創(chuàng)建一個自定初始值的Date對象實(shí)例，可以用以下格式之一：newDate(yr_num,mo_num,day_num)newDate("mo_num/day_num/yr_num")newDate("monthday,yearhours:minutes:seconds")newDate(yr_num,mo_num,day_num,hr_num,min_num,sec_num)②獲取日期和時間的方法，設(shè)置日期和時間的方法見表。假設(shè)已經(jīng)創(chuàng)建了三個日期對象：DateName=newDate("August19,201101:25:30")CurDate=newDate("May

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論