Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第九單元 javascript_第1頁(yè)
Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第九單元 javascript_第2頁(yè)
Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第九單元 javascript_第3頁(yè)
Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第九單元 javascript_第4頁(yè)
Web前端技術(shù)開(kāi)發(fā)（HTML5+CSS3+JavaScript）課件 第九單元 javascript_第5頁(yè)
已閱讀5頁(yè)，還剩39頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端開(kāi)發(fā)技術(shù)第九單元JavaScript掌握J(rèn)avaScript的基本語(yǔ)法，掌握J(rèn)Query的使用。JavaScript函數(shù)，對(duì)象和事件，JQuery的使用。9.1JavaScript概要9.2JavaScript的用法9.3JavaScript的常量與變量9.4JavaScript的運(yùn)算符9.8JQuery9.7事件9.6對(duì)象概述9.5流程控制結(jié)構(gòu)

JavaScript概要19.1.1什么是JavaScriptJavaScript簡(jiǎn)稱JS，是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)的，具有較高安全性的腳本語(yǔ)言。通過(guò)JavaScript可以實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中鏈接多個(gè)對(duì)象，網(wǎng)頁(yè)動(dòng)態(tài)特效，以及實(shí)現(xiàn)網(wǎng)頁(yè)與用戶之間的交互。JavaScript主要采用小段程序的編寫方式來(lái)實(shí)現(xiàn)編程，因此在代碼編寫的過(guò)程中，往往將JavaScript嵌入在標(biāo)準(zhǔn)的HTML語(yǔ)言中，從而實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。9.1.2JavaScript的特點(diǎn)

面向?qū)ο螅篔avaScript是一種基于對(duì)象的語(yǔ)言，同時(shí)也可以看作是一種面向?qū)ο蟮恼Z(yǔ)言。它可以運(yùn)用對(duì)象的方法與腳本的相互作用來(lái)實(shí)現(xiàn)相關(guān)的功能。簡(jiǎn)單性：

JavaScript是一種簡(jiǎn)單的語(yǔ)言。它是在Java基本語(yǔ)句和流程控制語(yǔ)句之上的一種簡(jiǎn)單而緊湊的語(yǔ)句，同時(shí)它的沒(méi)有嚴(yán)格的數(shù)據(jù)類型，變量定義時(shí)均采用var關(guān)鍵詞。安全性：

JavaScript是一種安全的語(yǔ)言。它不允許訪問(wèn)本地的硬盤，不允許將數(shù)據(jù)存入到服務(wù)器，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互等功能。因此可以較好的防止數(shù)據(jù)的丟失。9.1.2JavaScript的特點(diǎn)

動(dòng)態(tài)性：JavaScript可以采用事件驅(qū)動(dòng)的方式，直接對(duì)用戶端的輸入等操作做出響應(yīng)，因此它具有動(dòng)態(tài)交互性。

跨平臺(tái)：JavaScript是一種跨平臺(tái)的語(yǔ)言。它只與瀏覽器有關(guān)，而與具體的操作環(huán)境無(wú)關(guān)。只要是支持JavaScript瀏覽器的計(jì)算機(jī)，都可以正確執(zhí)行其相關(guān)功能。JavaScript的用法29.2JavaScript的用法與CSS用法類似，插入JavaScript代碼的用法主要有兩種。具體方法如下：1．在HTML文件中，嵌入JavaScript語(yǔ)句格式：<scriptlanguage="JavaScript"＞JavaScript函數(shù)或語(yǔ)句；…….＜/script＞其中，language="JavaScript"表示使用JavaScript腳本語(yǔ)言。9.2JavaScript的用法2．定義獨(dú)立的JavaScript文件，保存后綴名為.js文件，并在HTML文檔中進(jìn)行引入。在應(yīng)用時(shí)，在HTML文檔中引入JavaScript文件，具體格式如下：

說(shuō)明：type屬性定義引入的文件是JS類型的文件，src屬性指定JS文件所在路徑。<head> <scripttype=”text/javascript”src=”URL”></script></head>9.2JavaScript的用法實(shí)例9-1：一個(gè)簡(jiǎn)單的JavaScript程序。<html><head><title>一個(gè)JavaScript程序</title><head><body><scriptlanguage="JavaScript">alert("歡迎學(xué)習(xí)JavaScript！");</script></body></html>9.2JavaScript的用法實(shí)例代碼9-1的運(yùn)行效果如圖所示。3

JavaScript的常量與變量9.3.1標(biāo)識(shí)符

標(biāo)識(shí)符用來(lái)命名變量和函數(shù)，由字母、數(shù)字、下劃線(_)和美元符號(hào)($)組成，并且標(biāo)識(shí)符的第一個(gè)字符必須是字母，下劃線或美元符號(hào)。在JavaScript中，標(biāo)識(shí)符區(qū)分大小寫，并且標(biāo)識(shí)符不能為JavaScript中的關(guān)鍵字和保留字。常用關(guān)鍵字：for、hort、void、do、fortran、while、asm、double、goto、static、auto、else、if、struct、sizeof、break、entry、intswitch、case、enum、long、typedef、char、extern、register、union、contiue、float、return、unsigned、default。注意：標(biāo)識(shí)符不能是以數(shù)字開(kāi)頭。

9.3.2注釋

在JavaScript代碼中添加注釋，與其它計(jì)算機(jī)語(yǔ)言一樣，JavaScript的注釋不會(huì)被執(zhí)行。注釋的作用就是幫助程序相關(guān)人員更為方便的閱讀和理解代碼。在JavaScript中的注釋分為單行注釋與普通注釋兩種。1.單行注釋在JavaScript中插入符號(hào)“//”，標(biāo)識(shí)對(duì)該行內(nèi)容進(jìn)行單行注釋。如下代碼所示。<scripttype="text/JavaScript"＞ //在打開(kāi)的頁(yè)面中顯示“歡迎學(xué)習(xí)JavaScript！” document.write(“歡迎學(xué)習(xí)JavaScript！”);＜/script＞9.3.2注釋2.多行注釋如果需要對(duì)JavaScript中的多行代碼進(jìn)行注釋，則在多行代碼的起始行以"/*"開(kāi)始，在末尾行以"*/"結(jié)束。如下代碼所示。<scriptlanguage="JavaScript"＞/* 函數(shù)rec，參數(shù)form功能：密碼和確認(rèn)密碼的一致性核查變量a,b,c*/ functionrec(form){ vara=form.text1.value;varb=form.textf.value;varc=form.texts.value;{if(c==b)alert("恭喜您修改成功！");elsealert("對(duì)不起密碼與確認(rèn)碼不一致！");}＜/script＞9.3.3數(shù)據(jù)類型JavaScript常用的數(shù)據(jù)類型有三類：基本的類型：數(shù)字，字符串和布爾值；小數(shù)據(jù)類型：null和undefined；對(duì)象數(shù)據(jù)類型：object。1.Number（數(shù)字類型）數(shù)字類型的取值范圍是－1.797693e+308至－5e-324，取值范圍的表示中“e+n”表示以10為底數(shù)的+n次方。2.boolean（布爾類型）布爾型值往往表示比較運(yùn)算的結(jié)果，布爾型值只能是true（真）或false（假），true和false都應(yīng)該使用小寫。9.3.3數(shù)據(jù)類型

3.String（字符類型）字符類型的數(shù)據(jù)需要用單引號(hào)或雙引號(hào)表示，如"JavaScript"。如果需在JavaScript中表示單引號(hào)、雙引號(hào)以及換行符等特殊字符，則需要在上述字符前加上右斜杠符號(hào)（\），如“\’”和“\n”分別表示單引號(hào)和換行符。4.Null與UndefindNull類型只有一個(gè)值null，表示尚未存在的對(duì)象。而Undefind類型只有一個(gè)undefind值，表示當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined。5.Object（對(duì)象類型）對(duì)象是屬性和方法的集合，對(duì)象可以通過(guò)不同方法和屬性的調(diào)用來(lái)實(shí)現(xiàn)不同的功能。如document對(duì)象可調(diào)用document.write()方法來(lái)實(shí)現(xiàn)輸出網(wǎng)頁(yè)內(nèi)容的功能。9.3.4常量JavaScript中固定不變的量稱為常量，常量有整型常量、浮點(diǎn)型常量、布爾型常量、字符型常量以及一些特殊常量。具體內(nèi)容如下表所示。常量類型示例整形常量如2008，315等。浮點(diǎn)常量如－3.1E12，2E-12等。布爾常量只有ture與false。字符常量如’a’、"guoyongcan"、"tsinghuauniversity"等。Null常量Null可與任何類型的數(shù)據(jù)進(jìn)行轉(zhuǎn)換，當(dāng)數(shù)據(jù)類型為數(shù)值型時(shí)，Null表示0，當(dāng)數(shù)據(jù)類型為字符型時(shí)，Null表示空字符串。特殊常量如"\f"表示換頁(yè)符、"\t"表示制表符號(hào)。9.3.5變量在JavaScript中，變量用標(biāo)識(shí)符表示，因此變量名的命名必須符合標(biāo)識(shí)符的命名規(guī)則。但是和其它計(jì)算機(jī)語(yǔ)言不同，在JavaScript變量聲明時(shí)不需要指定變量的數(shù)據(jù)類型，變量的數(shù)據(jù)類型將隨著其賦值的數(shù)據(jù)類型的變化而變化。聲明變量的格式如下：var變量名；如：varage；變量在定義時(shí)可指定其初始值，如varage=10;變量的作用域分為全局變量與局部變量，在定義變量時(shí)一定要注意變量的作用范圍。varstr="JavaScript";//str表示全局變量。functiontestFunc(){vara=4;//a表示局部變量。}JavaScript的運(yùn)算符49.4JavaScript的運(yùn)算符

JavaScript的運(yùn)算符主要包括：算術(shù)運(yùn)算符、關(guān)系運(yùn)算符、條件運(yùn)算符、位運(yùn)算符、邏輯運(yùn)算符以及賦值運(yùn)算符。接下來(lái)介紹常用的算術(shù)運(yùn)算符、比較運(yùn)算符和邏輯運(yùn)算符。

9.4.1算術(shù)運(yùn)算符

在JavaScript中基本的算術(shù)運(yùn)算符主要用于算術(shù)運(yùn)算，包括單目算術(shù)運(yùn)算符（+、–、++、––）和雙目算術(shù)運(yùn)算符（+、–、*、/、%）等，如下表所示。

運(yùn)算符描述+加-減*乘/除%求余數(shù)(保留整數(shù))++累加--遞減=賦值運(yùn)算符+=先加后賦值，例如a+=5相當(dāng)于a=a+5-=先減后賦值，例如a-=5相當(dāng)于a=a-5*=先乘后賦值，例如m*=5相當(dāng)于m=m*5/=先除后賦值，例如m/=5相當(dāng)于m=m/5%=取余，如19％3=1

實(shí)例9-2：運(yùn)用算術(shù)運(yùn)算符計(jì)算平均分。<body><scriptlanguage="JavaScript">functionrec(form){form.recanswers.value=(form.t1.value*1+form.t3.value*1+form.t2.value*1)/3;}</script><form> <tablealign="center"><tr> <tdcolspan="2"><h1align="center">計(jì)算平均分</h1></td> </tr> <tr><td>日語(yǔ)：</td><td><inputtype="text"name="t1"></td></tr>

9.4.1算術(shù)運(yùn)算符

<tr> <td>C語(yǔ)言：</td><td><inputtype="text"name="t2"></td> </tr> <tr><td>IT素養(yǎng):</td><td><inputtype="text"name="t3"></td> </tr> <tr><td><inputname="button"type="button"onClick="rec(this.form)"value="平均分"></td><td><inputtype="text"name="recanswers"></td> </tr></table></form></body>9.4.1算術(shù)運(yùn)算符

運(yùn)行效果如圖所示。9.4.1算術(shù)運(yùn)算符

9.4.2比較運(yùn)算符

比較運(yùn)算符在JavaScript中實(shí)現(xiàn)比較運(yùn)算符兩側(cè)操作數(shù)比較的功能，比較的結(jié)果為布爾型值（ture或flase）。常用的比較運(yùn)算符如下表所示。運(yùn)算符描述例子==等于x==8為false===全等（值和類型）x===5為true；x==="5"為false!=不等于x!=8為true>大于x>8為false<小于x<8為true>=大于或等于x>=8為false<=小于或等于x<=8為true9.4.3邏輯運(yùn)算符

JavaScript中的邏輯運(yùn)算符用于判定多個(gè)條件的情況。在進(jìn)行邏輯運(yùn)算時(shí)，運(yùn)算符兩邊的操作數(shù)和運(yùn)算結(jié)果都必須為布爾類型。常用的邏輯運(yùn)算符如下表所示。運(yùn)算符描述例子&&and(x<10&&y>1)為true||or(x==5||y==5)為false!not!(x==y)為true9.4.3邏輯運(yùn)算符

實(shí)例9-3：使用比較云幸福進(jìn)行多條件判斷。本實(shí)例在計(jì)算平均分的基礎(chǔ)上，在點(diǎn)擊“提交”按鈕時(shí)，添加了條件判斷功能，如每門科目成績(jī)輸入不能為空判斷。當(dāng)點(diǎn)擊“重置”按鈕時(shí)，添加了清空重置功能，清空文本框中的所有內(nèi)容。<body><scriptlanguage="JavaScript">functionrec(form){form.recanswers.value=(form.t1.value*1+form.t3.value*1+form.t2.value*1)/3;}functionrec1(form){vara=form.t1.value; varb=form.t2.value; varc=form.t3.value; vard=form.recanswers.value; if(a==""||b==""||c==""){ alert("輸入的成績(jī)不能為空！"); } elseif(d=="") { alert("平均分不能為空！"); }elsealert("您的提交已成功！");} functionrec2(form){form.t1.value="";form.t3.value="";form.t2.value="";form.recanswers.value="";}</script><form> <tablealign="center"><tr><tdcolspan="2"><h1align="center">計(jì)算平均分</h1></td> </tr> <tr>

9.4.3邏輯運(yùn)算符<td>日語(yǔ)：</td><td><inputtype="text"name="t1"></td></tr> <tr> <td>C語(yǔ)言：</td><td><inputtype="text"name="t2"></td> </tr> <tr><td>IT素養(yǎng):</td><td><inputtype="text"name="t3"></td> </tr> <tr><td><inputname="button"type="button"onClick="rec(this.form)"value="平均分"></td><td><inputtype="text"name="recanswers"></td> </tr> <tr><td><inputname="button"type="button"onClick="rec1(this.form)"value="提交"></td> <td><inputname="button"type="button"onClick="rec2(this.form)"value="重置"></td></table></form></body>9.4.3邏輯運(yùn)算符9.4.3邏輯運(yùn)算符實(shí)例代碼9-3的運(yùn)行效果如圖所示。9.4.3邏輯運(yùn)算符實(shí)例代碼9-3的運(yùn)行效果如圖所示。

流程控制結(jié)構(gòu)59.5流程控制結(jié)構(gòu)

JavaScript程序是由若干個(gè)語(yǔ)句組成的。在JavaScript程序代碼中改變程序語(yǔ)句執(zhí)行順序的語(yǔ)句稱為流程控制結(jié)構(gòu)。流程控制結(jié)構(gòu)在程序編寫過(guò)程中是非常關(guān)鍵。JavaScript的流程控制結(jié)構(gòu)可以分為順序結(jié)構(gòu)、條件結(jié)構(gòu)和循環(huán)結(jié)構(gòu)。9.5.1順序結(jié)構(gòu)JavaScript語(yǔ)言中，順序控制語(yǔ)句是最簡(jiǎn)單的流程控制語(yǔ)句。順序語(yǔ)句是指每條語(yǔ)句都按照一定的順序執(zhí)行，不重復(fù)，不跳過(guò)任何語(yǔ)句。每個(gè)語(yǔ)句用分號(hào)結(jié)尾。例：vara=12；在JavaScript語(yǔ)言中，如果有多條順序語(yǔ)句，則可以用大括號(hào){}把一些語(yǔ)句括起來(lái)，作為一個(gè)整體語(yǔ)句塊，也即構(gòu)成一個(gè)復(fù)合語(yǔ)句。9.5.1順序結(jié)構(gòu)在流程控制語(yǔ)句的選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)中，往往都會(huì)用到復(fù)合語(yǔ)句。一般情況下，函數(shù)也是由復(fù)合語(yǔ)句構(gòu)成的。{ i=3; j=j+i；}9.5.2選擇結(jié)構(gòu)

除了順序控制語(yǔ)句以外，JavaScript語(yǔ)言還定義了對(duì)語(yǔ)句具有選擇和循環(huán)功能的流程控制結(jié)構(gòu)。在JavaScript語(yǔ)言中，默認(rèn)的控制流結(jié)構(gòu)是順序結(jié)構(gòu)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論