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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

說明：type屬性定義引入的文件是JS類型的文件，src屬性指定JS文件所在路徑。<head> <scripttype=”text/javascript”src=”URL”></script></head>9.2JavaScript的用法實(shí)例9-1：一個簡單的JavaScript程序。<html><head><title>一個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)識符

標(biāo)識符用來命名變量和函數(shù)，由字母、數(shù)字、下劃線(_)和美元符號($)組成，并且標(biāo)識符的第一個字符必須是字母，下劃線或美元符號。在JavaScript中，標(biāo)識符區(qū)分大小寫，并且標(biāo)識符不能為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ù)字開頭。

9.3.2注釋

在JavaScript代碼中添加注釋，與其它計算機(jī)語言一樣，JavaScript的注釋不會被執(zhí)行。注釋的作用就是幫助程序相關(guān)人員更為方便的閱讀和理解代碼。在JavaScript中的注釋分為單行注釋與普通注釋兩種。1.單行注釋在JavaScript中插入符號“//”，標(biāo)識對該行內(nèi)容進(jìn)行單行注釋。如下代碼所示。<scripttype="text/JavaScript"＞ //在打開的頁面中顯示“歡迎學(xué)習(xí)JavaScript！” document.write(“歡迎學(xué)習(xí)JavaScript！”);＜/script＞9.3.2注釋2.多行注釋如果需要對JavaScript中的多行代碼進(jìn)行注釋，則在多行代碼的起始行以"/*"開始，在末尾行以"*/"結(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("對不起密碼與確認(rèn)碼不一致！");}＜/script＞9.3.3數(shù)據(jù)類型JavaScript常用的數(shù)據(jù)類型有三類：基本的類型：數(shù)字，字符串和布爾值；小數(shù)據(jù)類型：null和undefined；對象數(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ù)需要用單引號或雙引號表示，如"JavaScript"。如果需在JavaScript中表示單引號、雙引號以及換行符等特殊字符，則需要在上述字符前加上右斜杠符號（\），如“\’”和“\n”分別表示單引號和換行符。4.Null與UndefindNull類型只有一個值null，表示尚未存在的對象。而Undefind類型只有一個undefind值，表示當(dāng)聲明的變量還未被初始化時，變量的默認(rèn)值為undefined。5.Object（對象類型）對象是屬性和方法的集合，對象可以通過不同方法和屬性的調(diào)用來實(shí)現(xiàn)不同的功能。如document對象可調(diào)用document.write()方法來實(shí)現(xiàn)輸出網(wǎng)頁內(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ù)值型時，Null表示0，當(dāng)數(shù)據(jù)類型為字符型時，Null表示空字符串。特殊常量如"\f"表示換頁符、"\t"表示制表符號。9.3.5變量在JavaScript中，變量用標(biāo)識符表示，因此變量名的命名必須符合標(biāo)識符的命名規(guī)則。但是和其它計算機(jī)語言不同，在JavaScript變量聲明時不需要指定變量的數(shù)據(jù)類型，變量的數(shù)據(jù)類型將隨著其賦值的數(shù)據(jù)類型的變化而變化。聲明變量的格式如下：var變量名；如：varage；變量在定義時可指定其初始值，如varage=10;變量的作用域分為全局變量與局部變量，在定義變量時一定要注意變量的作用范圍。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)算符。接下來介紹常用的算術(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)算符計算平均分。<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">計算平均分</h1></td> </tr> <tr><td>日語：</td><td><inputtype="text"name="t1"></td></tr>

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

<tr> <td>C語言：</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)算符用于判定多個條件的情況。在進(jìn)行邏輯運(yùn)算時，運(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í)例在計算平均分的基礎(chǔ)上，在點(diǎn)擊“提交”按鈕時，添加了條件判斷功能，如每門科目成績輸入不能為空判斷。當(dāng)點(diǎn)擊“重置”按鈕時，添加了清空重置功能，清空文本框中的所有內(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("輸入的成績不能為空！"); } 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">計算平均分</h1></td> </tr> <tr>

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

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

溫馨提示

  • 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

提交評論