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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

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

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

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

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

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

本任務(wù)圍繞應(yīng)用JavaScript內(nèi)置對(duì)象展開。任務(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對(duì)象任務(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)知識(shí)

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

相關(guān)知識(shí)

相關(guān)知識(shí)

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論