《WEB前端開發(fā)技術(shù)實用教程》第05章 交互動態(tài)大師-Javascript技術(shù)_第1頁
《WEB前端開發(fā)技術(shù)實用教程》第05章 交互動態(tài)大師-Javascript技術(shù)_第2頁
《WEB前端開發(fā)技術(shù)實用教程》第05章 交互動態(tài)大師-Javascript技術(shù)_第3頁
《WEB前端開發(fā)技術(shù)實用教程》第05章 交互動態(tài)大師-Javascript技術(shù)_第4頁
《WEB前端開發(fā)技術(shù)實用教程》第05章 交互動態(tài)大師-Javascript技術(shù)_第5頁
已閱讀5頁，還剩69頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1第5章交互動態(tài)大師

-Javascript技術(shù)目錄25.1Javascript腳本語言概述5.2網(wǎng)頁中引入Javascript腳本5.3Javascript語法規(guī)范及特點5.4Javascript變量與數(shù)據(jù)類型5.5Javascript運算符與表達式5.7Javascript自定義函數(shù)5.6Javascript流程控制語句5.8Javascript常見系統(tǒng)函數(shù)5.1Javascript概述由Netscape(網(wǎng)景)公司開發(fā)開發(fā)，最初取名LiveScript,于1995年11月與Sun公司聯(lián)合把其改名為JavaScript。Javascript并不是Java語言，而是兩種獨立的語言是世界上流行的編程語言之一,JavaScript的流行完全在于它作為WWW的腳本語言的角色。

JavaScript是一種面向?qū)ο蠛褪录?qū)動，并具有安全性能的腳本語言。35.1Javascript概述Javascript語言特點：腳本編寫語言基于對象的語言簡單性動態(tài)性跨平臺45.1Javascript概述Javascript的主要功能：制作網(wǎng)頁特效提供表單前端數(shù)據(jù)驗證窗口動態(tài)操作減輕服務(wù)器端的負擔提高系統(tǒng)工作效率55.2網(wǎng)頁中引入Javascript腳本1、 直接在網(wǎng)頁中使用<script>標簽插入Javascript代碼：將JavaScript代碼放入<SCRIPT>…</SCRIPT>標記符中<html><head><scripttype="text/JavaScript">document.write(“歡迎進入Javascript教學課堂!");</script></head><body><p>盡情享受學習的快樂!!!</p></body></html>設(shè)置語言腳本代碼65.2網(wǎng)頁中引入Javascript腳本為避免某些瀏覽器不完全支持JavaScript，而造成錯誤，可將JavaScript代碼用注釋語句括起來7例如：<Script><!--

……--></Script>5.2網(wǎng)頁中引入Javascript腳本2、 在網(wǎng)頁中引入Javascript文件，后綴名為.js將代碼獨立存儲為以.js為擴展名的文件，利用src屬性將該文件調(diào)入8如：

<head><scriptsrc="common.js">//此處不能再加Javascript語句。</script></head>common.js文件內(nèi)容如下：

document.write("歡迎您學習JavaScript!");5.2網(wǎng)頁中引入Javascript腳本3、 在地址欄或標簽中加入javascript腳本9例：<HTML><BODY>

<ahref=“javascript:alert(‘Hello,Javascript!’);”>javascript</a>

</BODY></HTML>5.3Javascript語法規(guī)范及特點語法規(guī)則變量、常量、轉(zhuǎn)義符數(shù)據(jù)類型數(shù)組運算符、表達式程序控制結(jié)構(gòu)函數(shù)105.3Javascript語法規(guī)范及特點JavaScript中的標識符標識符是指JavaScript中定義的符號，合法的標識符舉例：indentifler、username、user_name、_userName、$username非法的標識符舉例：int、98.3、HelloWorld（有空格）JavaScript嚴格區(qū)分大小寫computer和Computer是兩個完全不同的符號JavaScript程序代碼的格式每條功能執(zhí)行語句的最后用分號（;）結(jié)束；每個詞之間用空格、制表符、換行符或大括號、小括號這樣的分隔符隔開所有語句中的符號一律用半角JavaScript程序的注釋/*…….*/中可以嵌套“//”注釋，但不能嵌套“/*….*/”115.4Javascript變量與數(shù)據(jù)類型1、變量變量的主要作用是存取數(shù)據(jù)、提供存放信息的容器。變量是一種使用方便的占位符，用于引用計算機內(nèi)存地址，該地址可以存儲Script運行時可更改的程序信息。125.4Javascript變量與數(shù)據(jù)類型變量的命名以字母或下劃線開頭（不能以數(shù)字開頭），后面接數(shù)字、字母或下劃線。不能使用JavaScript中的關(guān)鍵字作為變量。如下圖：變量名區(qū)分大小寫。如：變量myVar、myVAR和myvar是不同的變量13breakdeletefunctionreturntypeofcasedoifswitchvarcatchelseinthisvoidcontinuefalseinstanceofthrowwhiledebuggerfinallynewtruewithdefaultfornulltry

Javascript關(guān)鍵字5.4變量、常量與數(shù)據(jù)類型定義變量：varcount；變量賦值：count=5;同時聲明和賦值變量：varcount=10;聲明多個變量：varx,y,z;聲明多個變量并賦值：varx=1,y=10,z=100;用于聲明變量的關(guān)鍵字變量名格式：變量名=值；145.4Javascript變量、常量與數(shù)據(jù)類型

<HTML> <HEAD>

<TITLE></TITLE> </HEAD> <BODY> <SCRIPTLANGUAGE="JavaScript"> varstrWelcome="歡迎您！"; variCounter=10; iCounter=iCounter+1; document.write(strWelcome); document.write(iCounter); </SCRIPT> </BODY></HTML>變量定義實例：155.4Javascript變量、常量與數(shù)據(jù)類型常量：值不改變的量，如123、8.8、科學計數(shù)法等數(shù)值以及字符、字符串等。轉(zhuǎn)義符字符說明示例\b退格符alert(“這是第一句\b這是第二句”);\f換頁符alert(“這是第一句\f這是第二句”);\n換行符alert(“這是第一句\n這是第二句”);\r回車符alert(“這是第一句\r這是第二句”);\t

制表符alert(“這是第一句\t這是第二句”);165.4Javascript變量、常量與數(shù)據(jù)類型數(shù)據(jù)類型說明示例整型整數(shù)1、20、-209浮點型帶小數(shù)5.5、89.45、555.68字符型單個的字符，用單引號包圍‘a(chǎn)’、‘b’、‘c’字符串型多個字符，用雙引號包圍“hello”、“55.55”、“我”布爾型真或假true、false空特殊關(guān)鍵字，表示不存在值null由于JavaScript采用弱類型的形式，因而一個數(shù)據(jù)的變量或常量不必首先作聲明，而是在使用或賦值時確定其數(shù)據(jù)的類型的。175.4Javascript變量、常量與數(shù)據(jù)類型判斷類型：typeof：用來判斷操作數(shù)的類型格式：typeof操作數(shù)或typeof(操作數(shù))說明：typeof運算符把類型信息當作字符串返回。typeof返回值有六種可能："number,""string,""boolean,""object,""function,"和"undefined."如：typeof(“abc”)=>string185.5Javascript運算符與表達式在定義完變量后，就可以對它們進行賦值、改變、計算等一系列操作，這一過程通常由表達式來完成，可以說它是變量、常量、布爾及運算符的集合。表達式可以分為算術(shù)表述式、字符串表達式、賦值表達式以及布爾表達式等。195.5Javascript運算符與表達式運算符類型符號算術(shù)運算符+,-,*,/,%,++,--,邏輯運算符&&,||,!比較運算符

==,!=,<,<=,>,>=,===,!===字符串運算符

+賦值運算符=,+=,-=,*=,/=,%=,條件運算符condition?value1:value2205.5Javascript運算符與表達式1、算術(shù)運算符21運算符意義運算符意義運算符意義+加(Addition)/除(Division)--遞減(Decrement)-減(Subtraction)%求余(Modulus)-取負值(UnaryNegation)*乘(Multiplication)++遞增(Increment)5.5Javascript運算符與表達式2、賦值運算符22運算符意義運算符意義=x=5/=x=x/y+=x=x+y%=求余賦值－=x=x-y*=x=x*yx+=y等價于x=x+yx%=y等價于x=x%y5.5Javascript運算符與表達式3、比較運算符23操作符描述舉例A==B如果兩個操作數(shù)相等，返回truePsw==passwordA!=B如果兩個操作數(shù)不等，返回truemobile.length!=11A>=B如果A大于或者等于B，返回truetries>=2A>B如果A大于B，返回truemflag>20A<=b如果A小于或等于B，返回truei<=0A<B如果A小于B，返回truetries<10注意比較：=與==的區(qū)別思考：你能說出a=b與a==b的含義嗎？5.5Javascript運算符與表達式4、邏輯運算符操作符描述口訣舉例A&&B邏輯與(AND)，若a,b都是ture，則結(jié)果為ture一假即為假，全真才為真(5<=8)&&(3!=2)A||B邏輯或(OR)，若a,b任一是ture，則結(jié)果為ture。一真即為真，全假才為假(3>9)||(4==2)!A邏輯非(NOT)，若a是ture，則結(jié)果為false。真變?yōu)榧?，假變?yōu)檎?(3==8)245.5Javascript運算符與表達式5、字符串運算符操作符描述A+B將A與B的字符串內(nèi)容連接A+=B將A與B的字符串連接并存儲到A中255.5Javascript運算符與表達式5、字符串運算符實例：<HTML> <HEAD> <TITLE></TITLE> </HEAD><BODY> <SCRIPTLANGUAGE="JavaScript"> varstrHello="網(wǎng)頁編程"; varstrResult="你好，"; strResult+=strHello; //等價于：strResult=strResult+strHello; document.write(strResult); </SCRIPT></BODY></HTML>265.5Javascript運算符與表達式6、條件運算符形式：條件?值1:值2說明：當條件滿足時，表達式返回值1；不滿足時，返回值2也叫三目運算符275.5Javascript運算符與表達式6、條件運算符

<HTML> <HEAD> <TITLE></TITLE> </HEAD><BODY> <SCRIPTLANGUAGE="JavaScript"> a=(4>3)?5:7; b=(4<3)?5:7; document.write(a); document.write("<br>"); document.write(b); </SCRIPT></BODY></HTML>285.5Javascript運算符與表達式操作符的優(yōu)先級：表中由上至下列出了操作符從高到低的優(yōu)先級。295.6Javascript流程控制語句常見的基本流程結(jié)構(gòu)有三種：順序結(jié)構(gòu)；分支結(jié)構(gòu)（或選擇結(jié)構(gòu)）；循環(huán)結(jié)構(gòu)順序結(jié)構(gòu)流程圖畫法：305.6Javascript流程控制語句分支結(jié)構(gòu)流程圖畫法：315.6Javascript流程控制語句循環(huán)結(jié)構(gòu)流程圖畫法：325.6Javascript流程控制語句順序結(jié)構(gòu)if條件選擇語句switch選擇語句while循環(huán)語句dowhile語句for循環(huán)語句break與continue語句335.6Javascript流程控制語句選擇結(jié)構(gòu)：if語句34if<邏輯表達式>

語句else

語句if<邏輯表達式>{語句組}else{語句組}if<邏輯表達式>{語句組}elseif<邏輯表達式>{語句組}else{語句組}5.6Javascript流程控制語句選擇結(jié)構(gòu)：if語句實例：<HTML> <HEAD> <TITLE></TITLE> </HEAD><BODY> <SCRIPTLANGUAGE="JavaScript"> variHour=13; if(iHour<12) { document.write("早上好！"); } else { document.write("下午好！"); } </SCRIPT></BODY></HTML>355.6Javascript流程控制語句if練習：制作一個考試成績自動分級程序輸入學生考試成績90分以上，評定為“優(yōu)”75到90分，評定為“良”60到75分，評定為“中”60分以下，評定為“差”365.6Javascript流程控制語句If練習：計算個人工資所得稅37級數(shù)扣除三險一金后月收入（元）稅率(%)速算扣除數(shù)（元）1<4500元5024500元-7500元107537500元-12000元20525412000元-38000元25975538000元-58000元302725658000元-83000元3554757>83000元45134755.6Javascript流程控制語句步驟1：算出自己的應(yīng)納稅額＝本人月收入-個稅“起征點”3000元

步驟2：

算出自己的個稅＝應(yīng)納稅額×對應(yīng)的稅率-速算扣除數(shù)

舉例：某公司職員在扣除三險一金后的月收入為10000元，位于上表中的第3檔。

對應(yīng)的稅率為20%，速算扣除數(shù)為525，

則應(yīng)納稅額為（10000元-個稅起征點3000元）＝7000元

個稅＝7000×20%-525元=875元。385.6Javascript流程控制語句選擇結(jié)構(gòu)：switch語句39switch(<變量>){

case<特定數(shù)值1>：<語句或語句組1>；

break;case<特定數(shù)值2>：<語句或語句組2>；

break;

default：<語句或語句組>；

}5.6Javascript流程控制語句switch語句實例：varx=2;switch(x){

case1: alert(“monday”); break;

case2: alert(“Tuesday”); break;

case3:alert(“wendnesday”);

break;

default:alert(“sorry,Idon’tknow”);}varx=2;switch(x){case1:case2:case3:case4:case5:alert(“workingday”);break;default:alert(“offday”);}405.6Javascript流程控制語句switch練習：獲取指定月份的天數(shù)根據(jù)用戶輸入月份返回當月天數(shù)例如輸入1,給用戶返回1月為31天415.6Javascript流程控制語句循環(huán)語句：包括：for語句while語句do…while語句break語句和continue語句425.6Javascript流程控制語句循環(huán)結(jié)構(gòu)：for語句43for([初始值]；[條件]；[變化量]

)

{<語句或語句組>}<Script>

for(vari=5;i>0;i--)

{document.write("i=",i,"<BR>");}</Script>5.6Javascript流程控制語句

for語句舉例：<HTML> <HEAD> <TITLE></TITLE> </HEAD><BODY>

<SCRIPTLANGUAGE="JavaScript"> variSum=0; for(i=0;i<=100;i++) { iSum+=i; } document.write(iSum); </SCRIPT></BODY></HTML>445.6Javascript流程控制語句如何實現(xiàn)455.6Javascript流程控制語句課后習題：自動生成一個取值從1950-2015范圍的下拉列表465.6Javascript流程控制語句語法:while（條件）{ 語句段}說明:當條件為真時，重復循環(huán)，否則退出循環(huán)。varx=1;while(x<3)//如果這里加上分號會怎樣呢？{alert(“x=”+x);x++;}循環(huán)結(jié)構(gòu)：while語句475.6Javascript流程控制語句循環(huán)結(jié)構(gòu)：while語句

<HTML> <HEAD> <TITLE></TITLE> </HEAD><BODY> <SCRIPTLANGUAGE="JavaScript"> variSum=0; vari=0; while(i<=100) { iSum+=i; i++; } document.write(iSum); </SCRIPT></BODY></HTML>485.6Javascript流程控制語句循環(huán)結(jié)構(gòu)：dowhile語句語法：do{

執(zhí)行語句塊;}while(條件表達式語句）;//注意這里的分號<Script>vari=5;

do{

document.write("i=",i,"<BR>");i--;}while(i>0)</Script>495.6Javascript流程控制語句break與continue語句：break：中斷，中止；說明：強制中止并退出當前循環(huán)Continue:繼續(xù)說明：中止此次循環(huán)進入下一輪循環(huán)505.6Javascript流程控制語句

break語句：<html>

<head>

<title></title>

</head><body>

<scriptlanguage=“javascript"> for(i=1;i<20;i++) { if(i%5==0) { break; } document.write(i+"<br>"); }

</script></body></html>515.6Javascript流程控制語句Continue語句：<html> <head> <title></title> </head><body> <scriptlanguage=“javascript"> for(i=1;i<20;i++) { if(i%5==0) {

continue; } document.write(i+"<br>"); } </script></body></html>525.6Javascript流程控制語句作業(yè)：制作一個猜價格游戲問題描述：用戶隨意猜一件商品價格，根據(jù)用戶猜測的價格與標準值進行對比，并給出相應(yīng)提示，以便下次猜測能接近標準值，每個用戶有五次機會。

535.7Javascript自定義函數(shù)函數(shù)的定義和調(diào)用全局變量與局部變量函數(shù)的返回值545.7Javascript自定義函數(shù)作用：一次定義，多次使用；減少代碼量，程序結(jié)構(gòu)清晰，易于管理。。。。。。。。。。函數(shù)1。。。。。。。。。。函數(shù)2。。。。。。。。。。函數(shù)1。。。。。。。。。。主程序。。。。。函數(shù)3。。。。。。。。。函數(shù)1。。。。。。。。。。。。函數(shù)2。。。。。。。。。。。。函數(shù)3555.7Javascript自定義函數(shù)函數(shù)的定義：56定義函數(shù)的注意事項：易于識別功能模塊化放置在程序開始部分function函數(shù)名([參數(shù)1，參數(shù)2，…]){<函數(shù)內(nèi)容>[return<返回值>]}5.7Javascript自定義函數(shù)定義無參函數(shù)的一般形式為:調(diào)用：函數(shù)名();57function函數(shù)名(){

函數(shù)體;

}5.7Javascript自定義函數(shù)定義有參函數(shù)的一般形式:調(diào)用：函數(shù)名(實際參數(shù)表列);58function函數(shù)名(形式參數(shù)表列){語句部分

｝5.7Javascript自定義函數(shù)函數(shù)參數(shù)：形參和實參形參：函數(shù)名后面括號中的變量名稱為“形式參數(shù)”（簡稱“形參”）實參：主調(diào)函數(shù)中調(diào)用一個函數(shù)時，函數(shù)名后面括號中的參數(shù)(可以是一個表達式)稱為“實際參數(shù)”（簡稱“實參”）595.7Javascript自定義函數(shù)函數(shù)的實際參數(shù)：argumentsarguments數(shù)組用來存儲各個參數(shù)的值arguments.length獲取參數(shù)個數(shù)arguments[0],arguments[1],…arguments[arguments.length-1]分別用來引用各個參數(shù)的值60實例：求任意個數(shù)的最大值<scriptlanguage="javascript">functions_max(){ vartemp=arguments[0]; for(vari=1;i<arguments.length;i++){ if(temp<arguments[i]){ temp=arguments[i]; } } returntemp;}document.write(s_max(12,-1,234,998,13));</script>5.7Javascript自定義函數(shù)函數(shù)返回值：return后面的括號中的值作為函數(shù)帶回的值（稱函數(shù)返回值）有返回值的函數(shù)調(diào)用：變量＝函數(shù)名（傳遞給函數(shù)的參數(shù)1,傳遞給函數(shù)的參數(shù)2,…）在程序中直接使用返回的結(jié)果，例如：alert(“sum=”+square(2,3));615.7Javascript自定義函數(shù)函數(shù)定義和調(diào)用實例：<html> <head> <title></title> <scriptlanguage="javascript"> functiongetsqrt(inum) { varitemp=inum*inum; returnitemp; } </script> </head><body> <scriptlanguage="javascript"> varresult=getsqrt(8);document.write(result);

</script></body></html>inum形參“8”為實參調(diào)用函數(shù)函數(shù)的定義返回itemp的值將得到結(jié)果用變量保存62函數(shù)function2局部變量b函數(shù)function3局部變量c全局變量ff函數(shù)function1局部變量a全局變量ff可以被function1、function2、function3訪問局部變量a、b、c只能在function1、function2、Function3內(nèi)部調(diào)用5.7Javascript自定義函數(shù)變量的作用域全局變量（

Globalvariable）：每個函數(shù)都可以訪問的變量局部變量（

Localvariable）：只能在函數(shù)體內(nèi)部使用的變量635.7Javascript自定義函數(shù)變量的作用域<Script>vargv="JavaScript";

//gv是全局變量functiontest(){

varlv="VBScript";

//lv是局部變量

document.write("gv="+gv+"<br>");document.write("lv="+lv+"<br>"+"<br>");

}test();document.write("document的輸出：<br>");document.write("gv="+gv+"<br>");document.write("lv="+lv+"<br>");</Script>

64函數(shù)定義2：Function()構(gòu)造函數(shù)形式：var變量=newFunction(‘參數(shù)1’,’參數(shù)2’,…,’函數(shù)體’);如：varf=newFunction(‘x’,’y’,’returnx*y;’);基本等價于：functionf(x,y){returnx*y;}65Function()構(gòu)造函數(shù)可以接受任意多個字符串參數(shù)，最后一個參數(shù)時函數(shù)主體，可以包含任何javascript語句，之間用分號分隔；如果定義的函數(shù)沒有參數(shù)，只需給構(gòu)造函數(shù)傳遞一個字符串（即函數(shù)主體）即可。Function()構(gòu)造函數(shù)的用途：允許動態(tài)的簡歷和編譯一個函數(shù)，不會將我們限制在function語句預編譯的函數(shù)體中。負效應(yīng)就是每次調(diào)用一個函數(shù)是，F(xiàn)unction()構(gòu)造函數(shù)都要對它進行編譯。在循環(huán)體或經(jīng)常使用的函數(shù)中，不想頻繁地調(diào)用這個構(gòu)造函數(shù)。能將函數(shù)定義為javascript表達式的一部分，而不是將其定義為一個語句在javascript1.1及以后版本中使用函數(shù)定義3：函數(shù)直接量函數(shù)直接量是一個表達式，可以定義匿名函數(shù)。形式：var變量=function(x,y){returnx*y;}66三種函數(shù)定義形式比較：1)functionf(x,y){returnx*y;}2)varf=newFunction(‘x’,’y’,’returnx*y’);3)varf=function(x,y){returnx*y;}函數(shù)直接量與Function（）方式更適合只是用一次無需命名的函數(shù)在javascript1.2及其后版本中使用遞歸函數(shù)所謂遞歸函數(shù)就是函數(shù)在自身的函數(shù)體內(nèi)調(diào)用自身，使用遞歸函數(shù)時一定要當心，處理不當將會使程

溫馨提示

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

評論

0/150

提交評論