web程序設(shè)計第7章_第1頁
web程序設(shè)計第7章_第2頁
web程序設(shè)計第7章_第3頁
web程序設(shè)計第7章_第4頁
web程序設(shè)計第7章_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第7章JavaScript概述JavaScript是介于Java與HTML之間，基于對象和事件驅(qū)動的編程語言。它提供了一種實時的、動態(tài)的、可交互的表達(dá)能力，用交互式的Web頁面取代了靜態(tài)的HTML頁面，有效實現(xiàn)了網(wǎng)絡(luò)計算和網(wǎng)絡(luò)計算機的藍(lán)圖。7.1第一個JavaScript程序<html><head><scriptlanguage="JavaScript"><!--varname=prompt("請輸入您的大名：","");//彈出提示窗口//--></script></head><body><scriptlanguage="JavaScript"><!--document.write("歡送",name,"光臨!");//在頁面上輸出信息//--></script></body></html>演示7.1第一個JavaScript程序使用JavaScript編寫程序的特點：JavaScript是一種腳本語言，采用小程序段的方式實現(xiàn)編程，可以直接嵌入HTML文檔中。在標(biāo)識<scriptlanguage="JavaScript">…</script>之間可以參加JavaScript腳本。可將<script>…</script>標(biāo)識放在<head>…</head>或<body>…</body>之間。將JavaScript腳本置于<head>…</head>之間，可使之在主頁和其余局部代碼之前裝載。JavaScript是一種基于對象的語言，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用。7.1第一個JavaScript程序使用JavaScript編寫程序的特點：對于不支持JavaScript的瀏覽器，所有在<!--…//-->中的代碼均被忽略；對于支持JavaScript的瀏覽器，那么執(zhí)行<!--…//-->中的代碼。//是JavaScript的注釋標(biāo)識，其后的信息不被瀏覽器解釋。7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)JavaScript腳本語言同其他語言一樣，有它自身的根本數(shù)據(jù)類型、表達(dá)式、運算符以及程序的根本框架結(jié)構(gòu)。根本數(shù)據(jù)類型和常量數(shù)值型：最根本的數(shù)據(jù)類型，包括整型和實型整型常量：可以使用十進(jìn)制、八進(jìn)制或十六進(jìn)制表示，如1234、0745、0x93C等；實型常量：可以使用小數(shù)或指數(shù)方法表示，如12.34、5e7、4e-5等。字符串型：表示字符序列的數(shù)據(jù)類型字符串常量：用""或''括起來的假設(shè)干個字符，如"JavaScript"、'ThisisabookofC++'等；控制字符：以反斜杠\開頭的具有特殊功能的字符，如'\n'、'\r'、'\t'等。7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)根本數(shù)據(jù)類型和常量布爾型：表示狀態(tài)的數(shù)據(jù)類型布爾常量：只有兩個可能的值true和false，表示“真”和“假”兩種狀態(tài)。null和undefinednull：null的類型是Object，用來表示一個變量沒有任何數(shù)值。例如：varempty=null;//empty的值為nullundefined：undefined的類型也是undefined，表示變量沒有定義任何值。例如：varvalue;//value的值為undefined7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)變量變量的主要作用是存取數(shù)據(jù)和提供存放信息的容器，在JavaScript程序中必須明確變量的命名、聲明和作用域。變量的命名：必須以字母或下劃線開頭，后面可以跟數(shù)字、字母和下劃線。不能使用JavaScript中的關(guān)鍵字作為變量名。例如：正確的變量名：num1、_value、thisbook錯誤的變量名：1_max、C++、this、true變量的聲明：在JavaScript中，不管變量的數(shù)據(jù)類型為什么，都用var關(guān)鍵字來聲明。例如：varnum=1;varstr="JavaScriptLanguage";7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)變量的實際類型視變量數(shù)據(jù)的內(nèi)容而定。例如，上例中的num為數(shù)值型變量，str為字符串型變量。變量的類型也可以隨時被改變，只要指定不同類型的數(shù)據(jù)，變量的類型就會跟著改變。例如：varnum=1;//num為數(shù)值型變量……num="HelloWorld!";//num為字符串型變量變量也可以不用var聲明而直接使用，這時必須設(shè)定變量的初始值，否那么會產(chǎn)生編譯錯誤。例如：x=100;//x為數(shù)值型變量y="China";//y為字符串型變量z=true//z為布爾型變量好的編程風(fēng)格：每個變量在第一次使用時都用var聲明！7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)變量的作用域：分為全局變量和局部變量全局變量：在所有函數(shù)外聲明的變量，在程序的每個地方都可以使用；局部變量：在某函數(shù)內(nèi)聲明的變量，只對該函數(shù)可見。

例如：

varattr=1;//attr為全局變量

functiontestFunc(){vartmp=attr+1;//tmp為局部變量

returntmp;}varsum=testFunc();//sum為全局變量

document.write("attr

=

",

attr,

"<br>");

document.write("sum

=

",

sum,

"<br>");

document.write("tmp

=

",

tmp);演示？7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)運算符和表達(dá)式JavaScript提供了豐富的運算符，包括算術(shù)運算符、邏輯運算符等。表達(dá)式是常量、變量及運算符的集合，根據(jù)運算符類型不同，表達(dá)式可分為算術(shù)表達(dá)式、邏輯表達(dá)式等。算術(shù)運算符及算術(shù)表達(dá)式算術(shù)運算符說明例子+兩個操作數(shù)的加法3+5=8-兩個操作數(shù)的減法9-2=7*兩個操作數(shù)的乘法2*3=6/兩個操作數(shù)的除法3/2=1.5%求兩個操作數(shù)相除的余數(shù)12%5=2++單一操作數(shù)加一varx=3;++x;--單一操作數(shù)減一vary=16;y--;-單一操作數(shù)取反varx=3;x=-3;7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)比較運算符及比較表達(dá)式比較運算符說明例子==等于2==2(true)3=="3"(true)!=不等于3!=4(true)1!="1"(false)>大于7>4(true)3>"2"(true)<小于5<2(false)'6'<8(true)>=大于等于7>=7(true)"3">=2(true)<=小于等于4<=1(false)5<='3'(false)===恒等于2===2(true)3==="3"(false)!==恒不等于3!==4(true)1!=='1'(true)當(dāng)操作數(shù)類型不同時進(jìn)行類型轉(zhuǎn)換當(dāng)操作數(shù)類型不同時不進(jìn)行類型轉(zhuǎn)換7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)邏輯運算符及邏輯表達(dá)式邏輯運算符說明例子&&邏輯于(全真為真，其余為假)true&&true(true)(true&&false)&&true(false)||邏輯或(全假為假，其余為真)false||(true&&false)(false)(false&&true)||true(true)

!邏輯非(非真即假，非假即真)!true(false)!((true||false)&&false)(true)7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)位運算符及位表達(dá)式位運算符說明例子&將兩個操作數(shù)的對應(yīng)二進(jìn)制位作與運算3&5=1|將兩個操作數(shù)的對應(yīng)二進(jìn)制位作或運算3|5=7^將兩個操作數(shù)的對應(yīng)二進(jìn)制位作異或運算3^5=6~將單個操作數(shù)的二進(jìn)制位作取反運算~5=-6<<將操作數(shù)的二進(jìn)制位向左移動指定位數(shù)，最右邊的位(最低位)補04<<2=16

-5<<3=-40>>將操作數(shù)的二進(jìn)制位向右移動指定位數(shù)，最左邊的位(最高位)補符號位4>>2=1

-5>>3=-1>>>將操作數(shù)的二進(jìn)制位向右移動指定位數(shù)，最左邊的位(最高位)補04>>>2=1

-5>>>3=229-17.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)賦值運算符及賦值表達(dá)式賦值運算符例子等價于=x=5+=x+=7x=x+7-=x-=6x=x-6*=x*=5+3x=x*(5+3)/=x/=6-4x=x/(6-4)%=x%=3x=x%3&=x&=4x=x&4|=x|=5x=x|5^=x^=2x=x^2<<=x<<=3x=x<<3>>=x>>=5x=x>>3>>>=x>>>=2x=x>>>27.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)字符串運算符及字符串表達(dá)式字符串運算符說明例子+連接兩個字符串varstrA="Java";

varstrB="Script";

str=strA+strB;str的值是"JavaScript"+=連接兩個字符串，然后賦值varstrA="Hello";

varstrB="World";

strA+=strB;strA的值是"HelloWorld"7.2JavaScript根本數(shù)據(jù)結(jié)構(gòu)條件運算符及條件表達(dá)式條件運算符有3個操作數(shù)，格式如下：varvarA=條件式?valueB:valueC當(dāng)條件式成立時，valueB會被賦給varA，否那么將valueC賦給varA。例如：varmin=6<=7?6:7;varmax=6>7?6:7;思考：假設(shè)x、y、z三個變量均以賦值，請寫出求三個變量中最大值和最小值的條件表達(dá)式。7.3JavaScript程序構(gòu)成JavaScript程序的根本構(gòu)成包括語句、函數(shù)、對象、方法和屬性等，通過它們來實現(xiàn)編程。程序控制結(jié)構(gòu)選擇結(jié)構(gòu)：通過判斷給定的條件是否成立，從給定的各種可能中選擇一種執(zhí)行。if語句的三種形式：單分支結(jié)構(gòu)：if(表達(dá)式)語句段例1：if(count>10)count=0;例2：if(count>10){count=0;alert("count被重設(shè)為0!");}注意：如果語句段中的語句不止一條，應(yīng)用大括號將它們括起來。7.3JavaScript程序構(gòu)成雙分支結(jié)構(gòu)：if(表達(dá)式)語句段1else語句段2

例1：if(num%2==0)

alert("num是一個偶數(shù)");else

alert("num是一個奇數(shù)");

注意：else不能單獨使用，必須與if配對使用；每一個else總是與離它最近的一個尚未匹配的if配對。

例2：if(a>=b)

if(a>=c)alert("a是最大值");elsealert("c是最大值");else

if(b>=c)alert("b是最大值");elsealert("c是最大值");7.3JavaScript程序構(gòu)成多分支結(jié)構(gòu)：if(表達(dá)式1)語句段1elseif(表達(dá)式2)語句段2……elseif(表達(dá)式n-1)語句段n-1[else語句段n]

例如：if(x<0)alert("x<0");elseif(x<5)alert("0<=x<5");elseif(x<10)alert("5<=x<10");elsealert("x>=10");7.3JavaScript程序構(gòu)成例根據(jù)用戶的不同操作在頁面上顯示不同的信息<html><head><scriptlanguage="JavaScript"><!--varname=prompt("請輸入您的大名：","");//彈出提示窗口if(name=="")//不在提示窗口中輸入任何值document.write("您沒有輸入任何信息!");elseif(name==null)//按下取消按鈕或直接關(guān)閉提示窗口document.write("您取消了操作!");else//在提示窗口中輸入字符串并按下確定按鈕document.write("歡送",name,"光臨!");//--></script></head></html>演示7.3JavaScript程序構(gòu)成switch語句根本格式：switch(表達(dá)式){case常量表達(dá)式1:語句段1;break;case常量表達(dá)式2:語句段2;break;……case常量表達(dá)式n-1:語句段n-1;break;default:語句段n;}執(zhí)行過程：首先計算表達(dá)式的值，當(dāng)表達(dá)式的值與某個case后面的常量表達(dá)式的值相等時，就執(zhí)行此case后面的語句段；假設(shè)所有case后的常量表達(dá)式的值都不與表達(dá)式的值相等，就執(zhí)行default后面的語句段。7.3JavaScript程序構(gòu)成例根據(jù)用戶的不同操作在頁面上顯示不同的信息<html><head><scriptlanguage="JavaScript">varname=prompt("請輸入您的大名：","");//彈出提示窗口varuser="DaVinci";switch(name){case"":document.write("您沒有輸入任何信息!");break;casenull:document.write("您取消了操作!");break;caseuser:document.write("歡送",name,"光臨!");break;default:document.write("歡送",name,"參加!");}</script></head></html>演示7.3JavaScript程序構(gòu)成switch語句break的作用：當(dāng)某個case后面的語句段執(zhí)行完后，直接跳出整個switch控制語句。如果省略break，在執(zhí)行完某個case后面的語句段后會繼續(xù)執(zhí)行下一個case后面的語句段，直到遇上break或者所有的語句段都被執(zhí)行完。思考：省略上例中所有的break語句，當(dāng)用戶在提示窗口中執(zhí)行不同操作時，頁面上會顯示什么信息？演示7.3JavaScript程序構(gòu)成JavaScript程序的根本構(gòu)成包括語句、函數(shù)、對象、方法和屬性等，通過它們來實現(xiàn)編程。程序控制結(jié)構(gòu)循環(huán)結(jié)構(gòu)：在某條件成立時反復(fù)執(zhí)行相同的語句段(循環(huán)體)。循環(huán)語句的三種形式for語句格式：for(表達(dá)式1;表達(dá)式2;表達(dá)式3)循環(huán)體;各局部的作用：表達(dá)式1：給循環(huán)控制變量賦初值；表達(dá)式2：設(shè)置循環(huán)條件；表達(dá)式3：修改循環(huán)控制變量的值；循環(huán)體：當(dāng)循環(huán)條件成立時反復(fù)執(zhí)行。7.3JavaScript程序構(gòu)成執(zhí)行流程：求解表達(dá)式1；求解表達(dá)式2，假設(shè)其值為true，那么進(jìn)入c；假設(shè)為false，那么進(jìn)入f；執(zhí)行循環(huán)體；求解表達(dá)式3；返回b繼續(xù)執(zhí)行;結(jié)束循環(huán)，執(zhí)行for語句的后續(xù)語句。例如：varsum=0,i;for(i=1;i<=100;i++)sum=sum+i;注意：如果循環(huán)體中的語句不止一條，應(yīng)用大括號將它們括起來。7.3JavaScript程序構(gòu)成while語句格式：while(循環(huán)條件)

循環(huán)體;功能：當(dāng)循環(huán)條件為true時，反復(fù)執(zhí)行循環(huán)體；當(dāng)循環(huán)條件為false時，退出循環(huán)，執(zhí)行while語句的后續(xù)語句。例如：varsum=0,i=1;while(i<=100){sum=sum+i;i++;}7.3JavaScript程序構(gòu)成do-while語句格式：do循環(huán)體;while(循環(huán)條件);執(zhí)行流程：先執(zhí)行循環(huán)體，再判斷循環(huán)條件，假設(shè)為true，那么重新執(zhí)行循環(huán)體，如此反復(fù)，直到循環(huán)條件為false時退出循環(huán)，執(zhí)行do-while語句的后續(xù)語句。例如：varsum=0,i=1;do{sum=sum+i;i++;}while(i<=100);7.3JavaScript程序構(gòu)成例求1!+2!+3!+…+10!<html><head><scriptlanguage="JavaScript">vari,t=1,s=0;for(i=1;i<=10;i++){t=t*i;s+=t;}alert("1!+2!+3!+…+10!="+s);</script></head></html>演示7.3JavaScript程序構(gòu)成程序控制結(jié)構(gòu)break和continue語句break語句格式：break;功能：提前退出循環(huán)或從switch結(jié)構(gòu)中直接跳出。例：varsum=0,i=1;while(i<=100){if(i%2==0)break;sum=sum+i;i++;}程序運行結(jié)果：sum=17.3JavaScript程序構(gòu)成continue語句格式：continue;功能：跳過循環(huán)體內(nèi)剩余的語句，提前進(jìn)入下一次循環(huán)。例：varsum=0,i=0;while(i<=100){i++;if(i%2==0)continue;sum=sum+i;}程序運行結(jié)果：sum=26017.3JavaScript程序構(gòu)成函數(shù)JavaScript函數(shù)用來封裝那些在程序中要屢次用到的功能模塊，并可作為事件驅(qū)動的結(jié)果而被調(diào)用。定義方式：function函數(shù)名(參數(shù)表)函數(shù)體;function：定義函數(shù)的關(guān)鍵字；函數(shù)名：自定義函數(shù)的名稱；參數(shù)表：包含假設(shè)干個參數(shù)，不同參數(shù)間用逗號間隔。當(dāng)調(diào)用函數(shù)時，可以向參數(shù)表中傳入常量值、變量值或其他表達(dá)式的值，函數(shù)體可通過參數(shù)名來引用這些傳進(jìn)來的值；函數(shù)體：實現(xiàn)函數(shù)功能的程序代碼。當(dāng)函數(shù)體包含的語句不止一條時，應(yīng)用大括號將它們括起來。7.3JavaScript程序構(gòu)成例定義一個求階乘的函數(shù)

functionfact(n){vars=1,i; for(i=1;i<=n;i++) s=s*i; returns;}定義函數(shù)的關(guān)鍵字函數(shù)名參數(shù)表函數(shù)體7.3JavaScript程序構(gòu)成調(diào)用方式：函數(shù)名(實參表);實參是傳送給被調(diào)用函數(shù)的實際參數(shù)值。實參可以是常量、變量和表達(dá)式，實參必須有確定的值；在函數(shù)體內(nèi)改變某個傳進(jìn)來的參數(shù)值，并不會對函數(shù)外的實參值造成影響。例如：functioninc(n){n++;

alert(n);}

varx=5;

inc(x);

alert(x);調(diào)用函數(shù)inc參數(shù)傳遞程序運行結(jié)果：n=6x=57.3JavaScript程序構(gòu)成返回值：在JavaScript中經(jīng)常需要將函數(shù)的執(zhí)行結(jié)果傳回程序，一般格式為：

return返回值;

例如：functioninc(n){n++;returnn;}

varx=5;

vary=inc(x);

alert(x);

alert(y);參數(shù)傳遞返回值調(diào)用函數(shù)inc程序運行結(jié)果：x=5y=67.3JavaScript程序構(gòu)成變量的作用范圍：在函數(shù)內(nèi)才會用到的局部變量應(yīng)該用var聲明，否那么一旦函數(shù)執(zhí)行完畢，沒有用var聲明的局部變量會變成全局變量。例如：程序運行結(jié)果：sum=8程序運行結(jié)果：

'y'未定義functioninc(n){y=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);functioninc(n){vary=++n;returny;}varx=3;varsum=inc(x)+y;alert(sum);7.3JavaScript程序構(gòu)成事件驅(qū)動及事件處理JavaScript是基于對象和事件驅(qū)動的腳本語言，通常把由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作稱為事件驅(qū)動。對事件進(jìn)行處理的程序或函數(shù)，稱為事件處理程序。JavaScript主要有以下一些常用事件：單擊事件onClick：當(dāng)用戶單擊元件時，觸發(fā)onClick事件，同時onClick指定的事件處理程序?qū)⒈徽{(diào)用執(zhí)行。通常在以下根本對象中產(chǎn)生：

button〔按鈕〕

checkbox〔復(fù)選框〕

radio〔單項選擇按鈕〕7.3JavaScript程序構(gòu)成例單擊按鈕激活btnClick()處理程序<html><head><scriptlanguage="JavaScript">functionbtnClick(){alert("Youhaveclickedthebutton!");}</script></head><body><form><inputtype="button"name="buttonA"value="clickme"

onClick="btnClick();"></form></body></html>演示7.3JavaScript程序構(gòu)成改變事件onChange：當(dāng)text、textarea和select元件失去焦點且內(nèi)容被改變時，觸發(fā)該事件。

例如：

<scriptlanguage="JavaScript">functiontextChange(textObj){

alert(textObj.value);}</script><form><inputtype="text"name="textA"

onChange="textChange(this);"></form>演示7.3JavaScript程序構(gòu)成載入事件onLoad：當(dāng)網(wǎng)頁載入完成時，觸發(fā)該事件。卸載事件onUnload：當(dāng)用戶離開網(wǎng)頁時，觸發(fā)該事件。例如：<scriptlanguage="JavaScript">functionloadFile(){dovarname=prompt("請輸入您的大名：","");while(name==""||name==null);alert("歡送"+name+"光臨!");}</script><bodyonLoad="loadFile();"onUnload="alert('Seeyoulater!');"></body>演示7.4JavaScript對象利用JavaScript基于對象的功能，可以大大簡化程序的設(shè)計，用更直觀、模塊化和可復(fù)用的方式進(jìn)行程序開發(fā)。對象的根本知識對象的根本結(jié)構(gòu)：對象是由屬性和方法兩個根本元素構(gòu)成的。屬性用來描述對象的數(shù)據(jù)特征，與變量相關(guān)聯(lián)；方法用來描述作用在屬性上的操作(行為)，與函數(shù)相關(guān)聯(lián)。例如：大型客機可視為對象，它具有位置、速度、顏色、容量等屬性，對于該對象可施行起飛、降落、加速、維修等操作，這些操作將或多或少地改變飛機的屬性值。7.4JavaScript對象引用對象的方式：要

溫馨提示

  • 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

提交評論