We編程開發(fā)基礎(chǔ)(JavaScript)

Web編程開發(fā)根底(JavaScript)JavaScript介紹JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)平安性的客戶端腳本語言；JavaScript旨在使網(wǎng)頁開發(fā)人員能對(duì)網(wǎng)頁的功能進(jìn)行管理和控制；學(xué)習(xí)JavaScript基于：表單驗(yàn)證頁面動(dòng)態(tài)效果簡(jiǎn)單易用簡(jiǎn)潔易用，與Java有類似的語法可以使用任何文本編輯工具編寫只需要瀏覽器就可以執(zhí)行程序解釋執(zhí)行事先不編譯逐行執(zhí)行無需進(jìn)行嚴(yán)格的變量聲明基于對(duì)象內(nèi)置大量現(xiàn)成對(duì)象，編寫少量程序可以完成目標(biāo)JavaScript的特點(diǎn)適合做哪些事情客戶端數(shù)據(jù)計(jì)算客戶端表單合法性驗(yàn)證瀏覽器對(duì)象的調(diào)用瀏覽器事件的觸發(fā)網(wǎng)頁特殊顯示效果制作不適合做哪些事情大型應(yīng)用程序圖像、多媒體處理網(wǎng)絡(luò)實(shí)時(shí)通訊應(yīng)用JavaScript的特點(diǎn)JavaScript介紹Web三層結(jié)構(gòu)JavaScript編程文檔訪問CSS樣式特效事件表單Web三層結(jié)構(gòu)用戶體驗(yàn)的豐富程度Web三層結(jié)構(gòu)用HTML設(shè)置內(nèi)容在網(wǎng)頁中需要閱讀和理解的內(nèi)容都應(yīng)該放在改頁面的HTML代碼中；HTML文檔應(yīng)包括負(fù)責(zé)傳遞頁面內(nèi)容的意思或語義的所有信息，但要防止出現(xiàn)與這些內(nèi)容展現(xiàn)效果先關(guān)的信息；Web三層結(jié)構(gòu)CSS描述頁面展現(xiàn)效果頁面的展現(xiàn)效果應(yīng)該全部通過頁面的CSS代碼來進(jìn)行完整的描述；CSS樣式應(yīng)用到網(wǎng)頁中有3中方式：內(nèi)聯(lián)樣式嵌入樣式外部樣式Web三層結(jié)構(gòu)JavaScript實(shí)現(xiàn)行為JavaScript添加到網(wǎng)頁中方法：可以在HTML中直接嵌入JavaScript代碼；在HTML文檔頭部通過<Script>標(biāo)簽嵌入代碼；將JavaScript代碼放在一個(gè)獨(dú)立的文件中，然后再需要使用該代碼的多個(gè)HTML文檔中連接該文件；JavaScript編程Script標(biāo)簽language=“JavaScript”可以出現(xiàn)在Head中，也可以出現(xiàn)在Body體內(nèi)注釋在Script標(biāo)簽內(nèi)的JavaScript代碼一般用HTML的注釋<!--...-->括起來，防止瀏覽器不支持Script標(biāo)簽而造成顯示錯(cuò)誤JavaScript語言自身的注釋為/*...*/JavaScript根本語法變量JavaScript是一門弱類型的語言，所有的變量定義均以var來實(shí)現(xiàn)JavaScript的變量建議先定義，再使用JavaScript區(qū)分大小寫雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做數(shù)組定義vararr=newArray(3);通過arr.length取得數(shù)組的長(zhǎng)度注釋的寫法－－》和java的一樣數(shù)組使用方式：myarray=newArray(num)myarray=newArray(value1,value2…)<Scriptlanguage="JavaScript"> aa=newArray(3); aa[20]=444; document.write(aa[20]);</Script>num不設(shè)定，那么按數(shù)組默認(rèn)的最大長(zhǎng)度自動(dòng)設(shè)定。例如：<Scriptlanguage="JavaScript"> aa=newArray(); aa[20]=444; document.write(aa.length);</Script>JavaScript根本語法—運(yùn)算符算術(shù)運(yùn)算+、-、*、/>、<、=、>=、<=、==(7.htm)邏輯運(yùn)算與：&&或：||非：!(8.htm)字符串運(yùn)算符連接運(yùn)算：+(9.htm)取子集：substring(index1,index2)(10.htm)條件表達(dá)式條件?A:B(11.htm)JavaScript根本語法—控制語句if語句if(條件)elseif(條件1)else…(12.htm)while語句while(條件)…switch語句switch(i)casei1:…casei2:…default:…fordo…whilewhileMath對(duì)象常用方法：abs()絕對(duì)值sin(),cos()正弦余弦值asin(),acos()反正弦反余弦tan(),atan()正切反正切round()四舍五入sqrt()平方根pow(x,y)x的y次方案例：Math.htmDate對(duì)象創(chuàng)立方式：myDate=newDate();日期起始值:１9７０年１月１日００:００:００主要方法getYear():返回年數(shù)setYear():設(shè)置年數(shù)getMonth():返回月數(shù)setMonth():設(shè)置月數(shù)getDate():返回日數(shù)setDate():設(shè)置日數(shù)getDay():返回星期幾setDay():設(shè)置星期數(shù)getHours():返回小時(shí)數(shù)setHours():設(shè)置小時(shí)數(shù)getMinutes():返回分鐘數(shù)setMintes():設(shè)置分鐘數(shù)getSeconds():返回秒數(shù)setSeconds():設(shè)置秒數(shù)getTime():返回毫秒數(shù)setTime():設(shè)置毫秒數(shù)函數(shù)(一)函數(shù)定義functionf(形參列表){語句}f是函數(shù)名，參數(shù)之間用“,”分隔函數(shù)不能嵌套定義函數(shù)調(diào)用f(實(shí)參列表)函數(shù)可以互相調(diào)用沒有參數(shù)時(shí)，()不能少函數(shù)(二)形參和實(shí)參函數(shù)定義時(shí)的參數(shù)是形參函數(shù)調(diào)用時(shí)的參數(shù)是實(shí)參形參一定是變量實(shí)參可以是任意表達(dá)式對(duì)形參的修改不影響實(shí)參函數(shù)(三)函數(shù)的返回值return語句returnx或return(x)函數(shù)的返回值可以象變量一樣參與運(yùn)算，但不能被賦值系統(tǒng)預(yù)定義的函數(shù)主要是各種系統(tǒng)預(yù)定義對(duì)象中的函數(shù)JavaScript編程注釋單行注釋以//開始多行注釋以/*開始，*/結(jié)束類型轉(zhuǎn)化根本類型轉(zhuǎn)換從一個(gè)值中提取另一種類型值parseInt〔〕parseFloat〔〕JavaScript編程對(duì)象對(duì)象實(shí)際上就是屬性和方法的集合；屬性只是能通過對(duì)象訪問的變量，方法是只能通過對(duì)象訪問的函數(shù)；對(duì)象所包含的屬性和方法都只能通過對(duì)象來訪問，通過javaScript中的對(duì)象可以對(duì)程序的管理變得更加容易；變量名以小寫字母開頭，對(duì)象名以大寫字母開頭；varOb=newobject〔〕；文檔訪問瀏覽器把對(duì)HTML代碼的解釋作為一種JavaScript對(duì)象結(jié)構(gòu)存儲(chǔ)起來，這種結(jié)構(gòu)就稱為文檔對(duì)象模型，簡(jiǎn)稱DOM;在DOM中，HTML文檔的每一個(gè)元素都是一個(gè)對(duì)象，屬性和文本也都是對(duì)象，JavaScript能夠獨(dú)立訪問每個(gè)對(duì)象，通過使用內(nèi)建的函數(shù)也能輕松地發(fā)現(xiàn)或改變所需要的對(duì)象；文檔訪問瀏覽器對(duì)象的分層結(jié)構(gòu)文檔訪問Window對(duì)象介紹文檔訪問定時(shí)器函數(shù)該方法表示每隔多長(zhǎng)時(shí)間，循環(huán)調(diào)用某個(gè)函數(shù)； 語法格式 setTimeout〔”disptime()”,1000〕setTimeout()補(bǔ)充：setInterval〔〕；文檔訪問History對(duì)象History對(duì)象是通過JavaScript運(yùn)行時(shí)引擎自動(dòng)創(chuàng)立的，并且是由一系列URLS組成的；方法Back〔〕Forward〔〕Go〔〕Location對(duì)象History對(duì)象是通過JavaScript運(yùn)行時(shí)引擎自動(dòng)創(chuàng)立的，包含了關(guān)于當(dāng)前URL地址的信息；文檔訪問Document對(duì)象Document對(duì)象表示給定瀏覽器窗口中的HTML文檔；常用方法：文檔訪問操作元素屬性屬性主要用于讀取和修改與元素相關(guān)的數(shù)據(jù)獲取屬性值getAttribute()設(shè)置屬性值setAttribute〔〕CSS樣式特效通過DOM可以修改頁面中的各種內(nèi)容，當(dāng)然也包括頁面的樣式；每個(gè)元素都有一個(gè)style屬性，style屬性是一個(gè)功能強(qiáng)大的對(duì)象，應(yīng)用該屬性可以從各個(gè)方面來改變?cè)氐娘@示效果；對(duì)于元素中所應(yīng)用的各個(gè)CSS屬性，style中都有一個(gè)相應(yīng)的屬性，通過它就可以修改該屬性的值；CSS樣式特效用JavaScript改變?cè)仫@示效果的最正確方法是修改樣式類：實(shí)現(xiàn)了頁面行為與樣式的別離；修改樣式時(shí)無須查找整個(gè)JavaScript文件；修改樣式的工作應(yīng)該由樣式的設(shè)計(jì)人員而不是JavaScript程序員來完成；在CSS中編寫樣式將更加簡(jiǎn)潔；CSS樣式特效層的顯示/隱藏特效用到CSS樣式中的display屬性，它主要用來控制頁面中的元素〔如層，圖片，表格，段落等〕是否顯示，從而實(shí)現(xiàn)頁面中元素的顯示和隱藏效果。=“value”;Value取值BlockNoneinlineCSS樣式特效Display指定區(qū)域是否在瀏覽器中顯示，設(shè)置為display：none的對(duì)象根本就不會(huì)顯示，在頁面中仿佛沒有該對(duì)象一樣；Visibility指定區(qū)域是否可見，設(shè)置visibility：didden的對(duì)象仍占據(jù)著頁面的空間，知識(shí)該空間看上去是空的。事件JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)平安性的客戶端腳本語言；事件句柄是通過JavaScript代碼響應(yīng)事件的最簡(jiǎn)單的方式；事件句柄是一個(gè)JavaScript函數(shù)，該函數(shù)將”插接”在一個(gè)DOM節(jié)點(diǎn)上，當(dāng)發(fā)生與該元素相關(guān)的特定事件時(shí)該函數(shù)就能自動(dòng)調(diào)用。JavaScript事件處理onFocus：在用戶為了輸入而選擇select、text、textarea等時(shí)(onFocus.htm)onBlur：在select、text、password、textarea失去焦點(diǎn)時(shí)(onBlur.htm)onChange：在select、text、textarea的值被改變且失去焦點(diǎn)時(shí)(onChange.htm/SelectionChange.htm)onClick：在一個(gè)對(duì)象被鼠標(biāo)點(diǎn)中時(shí)〔button,checkbox,radio,link,reset,submit,text,textarea等〕(onClick.htm)onLoad：出現(xiàn)在一個(gè)文檔完成對(duì)一個(gè)窗口的載入時(shí)(onLoad.htm)onUnload：當(dāng)用戶退出一個(gè)文檔時(shí)(onload.htm)onMouseOver：鼠標(biāo)被移動(dòng)到一個(gè)對(duì)象上時(shí)(onMouse.htm)onMouseOut：鼠標(biāo)從一個(gè)對(duì)象上移開時(shí)(onMouse.htm)onSelect：當(dāng)form對(duì)象中的內(nèi)容被選中時(shí)(onSelect.htm)onSubmit：出現(xiàn)在用戶通過提交按鈕提交一個(gè)表單時(shí)(onSubmit.htm)JavaScript事件處理表單驗(yàn)證為什么需要表單防止信息無法更新或出現(xiàn)新錯(cuò)誤；減輕效勞器端的壓力；客戶端驗(yàn)證實(shí)際上就是包含在已下載的頁面中，當(dāng)用戶提交表單的時(shí)候，它直接在已下載到本地的頁面中調(diào)用腳本來進(jìn)行驗(yàn)證，這樣可以減少效勞器端的運(yùn)算。表單驗(yàn)證表單驗(yàn)證的內(nèi)容檢查表單元素是否為空；驗(yàn)證是否為數(shù)字；驗(yàn)證用戶輸入的郵件地址是否有效；檢查用戶輸入的數(shù)據(jù)是否在某個(gè)范圍；驗(yàn)證用戶輸入的信息長(zhǎng)度是否足夠；檢查用戶輸入的出生日期是否有效；表單驗(yàn)證String對(duì)象表單驗(yàn)證文本框?qū)ο蟮氖录幚沓绦虮韱悟?yàn)證數(shù)組介紹趣味JavaScript程序黑客帝國(ex1/matrix.htm)鼠標(biāo)跟隨(ex2/mouseTrace.htm)找相同圖片游戲(ex1/game/game.htm)飄浮的云(ex1/float