Thông tin tài liệu
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang31 Chương01 TỔNGQUANVỀJAVASCRIPT GiớiThiệu NhúngJavaScriptvàotrangWeb Cáclệnhcơbản I.Giớithiệu VớiHTMLsẽchotabiếtcáchtạoratrangWeb-tuynhiênchỉmớiởmứcbiểudiễnthông tinchứchưaphảilàcáctrangWebđộngcókhảnăngđápứngcácsựkiệntừphíangườidùng. HãngNetscapeđãđưarangônngữscriptcótênlàLiveScriptđểthựchiệnchứcnăngnày.Sau đóngônngữnàyđượcđổitênthànhJavaScriptđểtậndụngtínhđạichúngcủangônngữlập trìnhJava.MặcdùcónhữngđiểmtươngđồnggiữaJavavàJavaScript,nhưngchúngvẫnlàhai ngônngữriêngbiệt. JavaScriptlàngônngữdướidạngscriptcóthểgắnvớicácfileHTML.Nókhôngđược biêndịchmàđượctrìnhduyệtdiễndịch,trìnhduyệtđọcJavaScriptdướidạngmãnguồn.Chính vìvậytacóthểdễdànghọcJavaScripttrêncáctrangWebcósửdụngJavaScript. JavaScriptlàngônngữdựatrênđốitượng,nghĩalàbaogồmnhiềukiểuđốitượng,vídụ đối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữ hướngđốitượngnhưC++hayJavadokhônghỗtrợcáclớphaytínhthừakế. II.NhúngJavaScriptvàoFileHTML Sửdụngmộttrongcáccáchsau: • Sửdụngcáccâulệnhvàcáchàmtrongcặpthẻ<SCRIPT> • SửdụngcácFilenguồnJavaScript • SửdụngmộtbiểuthứcJavaScriptlàmgiátrịcủamộtthuộctínhHTML • Sửdụngthẻsựkiện(eventhandlers)trongmộtthẻHTMLnàođó Trongđó,sửdụngcặpthẻ<SCRIPT> </SCRIPT>vànhúngmộtFilenguồnJavaScript làđượcsửdụngnhiềuhơncả. 1.NhúngJavaScriptvàotrangHTML JavaScriptđượcđưavàoFileHTMLbằngcáchsửdụngcặpthẻ<Script>và</Script>. Nếuđặttrongphần<Head>,nósẽđượctảivàsẵnsàngtrướckhiphầncònlạicủavăn bảnđượctải.Sửdụngcúphápsau: <Script> //ChèncácmãJavacriptvàođây </Script> Vídụ:Tạotrangweb(Clock1.htm)sửdụngnhúngmãJavaScripttrựctiếpvàotrang Ghichú:CóthểsưutầmcácmãJavaScripttừWebsitehttp://www.javascriptbank.com.vn, www.echip.com.vn This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang32 2.SửdụngFilenguồnJavaScript DùngphươngphápnàyhayhơnnhúngtrựctiếplệnhJavaScriptvàotrangHTML. Cúpháp: <ScriptSrc="File_name.js"> </Script> Vídụ: <ScriptSrc="Clock2.js"> CácFileJavaScriptbênngoàichỉchứacáccâulệnhJavaScriptvàđịnhnghĩahàm.Tên FilecủacáchàmJavaScriptbênngoàicầncóđuôi.js, Ví dụ: Tạo trang web(Clock.htm) sử dụng nhúng mã JavaScript thông qua 1 tập tin Javascript. III.Cáclệnhcơbản 1.Cúphápcơbảncủalệnh: JavaScriptxâydựngcáchàm,cácphátbiểu,cáctoántửvàcácbiểuthứctrêncùngmột dòngvàkếtthúcbằng;Cáchgọimộtphươngthứccủamộtđốitượngnhưsau: object_name.property_name; VÍDụ: document.write("Chàocácbạn!<BR>"); 2.Hiểnthịmộtdòngvănbản Đối tượng document trongJavaScript được thiết kế sẵnhai phương thức đểxuất một dòngvănbảnramànhìnhclient:write()vàwriteln(). document.write(“Chuỗivănbản”); Vídụ: document.write("Chàocácbạn"); document.writeln(“Chúccácbạnvuivẽ!”); Phươngthứcwrite():Xuấtramànhìnhdòngvănbảnnhưngkhôngxuốngdòng Phươngthứcwriteln():Saukhiviếtxongdòngvănbảntựđộngxuốngdòng. Ghichú: Cóthểdùng“+”đểghépnhiềuchuỗikýtự. Chophépdùngcáckítựđặcbiệttrongchuổi: \n:Xuốngdòng \t:Tab KhicódùngcáckýtựđặcbiệthoặclệnhWritelnthìphảiđặtkhốiJavaScripttrongcặpthẻ <Pre>..</Pre>(Thẻquyđịnhvănbảnđịnhdạngtrước) Vídụ:Tạotrang(OutputText.htm)đểphânbiệtsựkhácnhaucủawrite()vàwriteln(): <Body> <PRE> <ScriptLanguage="JavaScript"> document.writeln("One,"); document.write("Two,\n"); document.write("Three"); document.write(" "); </Script> </PRE> <Body> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang33 3.Hiểnthịhộpthoạithôngbáo–Lệnhalert() Cúpháp: alert("Câuthôngbáo"); KhiđósẽchờchođếnkhingườisửdụngnhấnvàonútOK.Thôngthường,cáchthức alert()đượcsửdụngtrongcáctrườnghợp: • Thôngtinđưavàoformkhônghợplệ • Kếtquảsaukhitínhtoánkhônghợplệ • Khidịchvụchưasẵnsàngđểtruynhậpdữliệu Vídụ:Tạotrang(Thongbao.htm) <Body> <ScriptLanguage="JavaScript"> alert("Chàom ừngbạnđếnvớiJavaScript!.\nNhấnOkđểtiếptục"); </Script> Chúcb ạnthànhcông!!! </Body> 4.Giaotiếpvớingườisửdụng–Lệnhprompt() Mộthộpthoạigồm1dòngthôngbáo,1trườngnhậpdữliệu,1nútOKvà1nútCancel. NgườisửdụngnhậpvàotrườngđórồikíchvàoOK.Khiđó,tacóthểxửlýdữliệuvừađưavào. Cúpháp: window.prompt("Câuthôngbáo",”nộidungmặcđịnh”); Vídụ:Tạotrang(Hello.htm)hiệnthịhộpthoạihỏitênngườidùngvàsauđósẽhiểnthị mộtthôngbáochàotênmớiđưavào. <Body> <ScriptLanguage="JavaScript"> varname=window.prompt("Xinchào!B ạntêngì?",""); document.write("Xinchàob ạn"+name+"!ChúcbạnhọctốtJavaScript"); </Script> </Body> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang34 5.Hỏiđápngườisửdụng–Lệnhconfirm() Lệnhconfirm()tạora1hộpthoạigồm1dòngthôngbáo,nútOKvànútCancel.Người sửdụngcóthểclickvàoOK.Khiđósẽxửlýthựchiệnhànhđộngtheoyêucầu,ngượclạikhi ClickvàoCancelsẽbỏđónghộpthọaithôngbao. Thườngsửdụngtrongcáctrườnghỏiđáp,xácnhậnquyếtđịnhxửlýthôngtintừphía ngườidùng Cúpháp: confirm("Câuthôngbáohỏi?"); Vídụ:Tạotrang(HoiDap.htm)nhưsau. <script> functionHoidap(){ question=confirm("B ạnthậtsựmuốntruycậpWebsite") if(question!="0"){ top.location="http://www.tuoitre.com.vn/" } } </script> Hãyclickvào đâyđểtruycậpwebsite:<ahref=""onClick="Hoidap();returnfalse;">BáoTuổiTrẻ</a> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang35 Chương02 NGÔNNGỮKỊCHBẢNJAVASCRIPT Biếnvàkhaibáobiến Kiểudữliệu Lệnh,khốilệnh Toántửvàbiểuthức Cấutrúclậptrình Mảng Hàm I.Biến Cũngnhưcácngônngữlậptrìnhkhácjavascriptdùngbiếnđểlưutrữcácgiátrịnhập vào,cácgiátrịtínhtoán...Nóicáchkhácbiếnlàvùngnhớsửdụngđểlưutrữcácgiátrịkhác nhautrongquátrìnhchươngtrìnhhoạtđộng. Mỗibiếncómộttên,TênbiếntrongJavaScriptphảibắtđầubằngkýtự.Phạmvicủabiến cóthểlàmộttronghaikiểusau: • Biếntoàncục:Cóthểđượctruycậptừbấtkỳđâutrongứngdụng.Đượckhaibáo:x=0; • Biếncụcbộ:Chỉđượctruycậptrongphạmvichươngtrìnhmànókhaibáo.Biếncụcbộ đượckhaibáotrongmộthàmvớitừkhoávar:varx=0; II.Kiểudữliệu KhácvớiC++hayJava,JavaScriptlàngônngữcótínhđịnhkiểuthấp.Nghĩalàkhông phảichỉrakiểudữliệuchobiến.Kiểudữliệuđượctựđộngchuyểnthànhkiểuphùhợpkhicần. Vídụ:Tạotrang(DataType.htm)nhưsau <HTML> <Body> <ScriptLanguage="JavaScript"> vara='Tráitáo'; varn=12; n=n+20; vartb="Cót ấtcả"+n+""+a; document.write(tb); </Script> </Body> </HTML > TrongJavaScript,cóbốnkiểudữliệusauđây: 1.KIểunguyên(Interger) Sốnguyêncóthểđượcbiểudiễntheobacách:Hệcơsố10(hệthậpphân),Hệcơsố8(hệ bátphân)vàHệcơsố16(hệthậplụcphân)-Vớihaichữsốđầutiênlà0x.(VÍDụ:0x5F) 2.Kiểudấuphẩyđộng(FloatingPoint) Mộtbiếncókiểudấuphẩyđộngcó4thànhphầnsau:Phầnnguyênthậpphân.Dấuchấm thậpphân(.).Phầndư.Phầnmũ. Vídụ: 9.87 hay -0.85E4 This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang36 3.Kiểulogic(Boolean) Kiểulogicđượcsửdụngđểchỉhaiđiềukiện:đúnghoặcsai.Miềngiátrịcủakiểunàychỉ cóhaigiátrị:true,false. 4.Kiểuchuỗi(String) Mộtbiếnkiểuchuỗibiểudiễnbởikhônghaynhiềukýtựđặttrongcặpdấu" "hay' ' Vídụ: “Thedogranupthetree”hay“100” Ghichú:Đểbiểudiễndấunháykép("),trongchuỗisửdụng(\"), Vídụ: document.write(“\”Thistextinsidequotes.\””); III.Lệnh,khốilệnhtrongJavaScript CáccâulệnhtrongJavaScriptkếtthúcbằngmộtdấuchấmphẩy(;). Mộtkhốilệnhlàđoạnchươngtrìnhgồmhailệnhtrởlênvàđượcđặttrongcặpngoặc nhọn:{...} Bêntrongmộtkhốilệnhcóthểchứamộthaynhiềukhốilệnhkhác. {//khối1 {//khối2 lệnh2.1 lệnh2.2 … }//kếtthúckhốilệnh2 lệnh1.1 lệnh1.2 }//kếtthúckhốilệnh1 IV.Tóantử&BiểuthứctrongJavaScript 1.Địnhnghĩavàphânloạibiểuthức Tậphợpcácbiếnvàcáctoántửnhằmđánhgiámộtgiátrịnàođóđượcgọilàmộtbiểu thức(expression).Vềcơbảncóbakiểubiểuthức: • Sốhọc:Nhằmđểlượnggiágiátrịsố.VÍDụ:(3+4)+(84.5/3)bằng197.1666666667. • Chuỗi:Nhằmđểđánhgiáchuỗi.VÍDụ:"Thedog”+”barked!"là“Thedogbarked!” • Logic:Nhằmđánhgiágiátrịlogic.VÍDụ:23>32làFalse. NgòairaJavaScriptcũnghỗtrợbiểuthứcđiềukiện,cúphápnhưsau: (condition)?valTrue:valFalse Nếuđiềukiệnconditionlàđúng,biểuthứcnhậngiátrịvalTrue,ngượclạinhậngiátrịlà False. Vídụ: ketqua=(diemtb>=5)?"Đậu":"Rớt" Trongvídụnàybiếnketquađượcgángiátrị"Đậu"nếugiátrịcủabiếntdiemtblớnhơn hoặcbằng5;ngượclạinónhậngiátrị"Rớt". This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang37 2.CácToántử. Toántửđượcsửdụngđểthựchiệnmộtphéptoán.Đượcnhómthànhcácloạisauđây: gán,sosánh,sốhọc,chuỗivàlogic. = Gángiátrịcủatoánhạngbênphảichotoánhạngbêntrái. == (Bằng)Trảlạigiátrịđúngnếutoánhạngbêntráibằngtoánhạngbênphải != (Khác)Trảlạigiátrịđúngnếutoánhạngbêntráikháctoánhạngbênphải > Trảlạigiátrịđúngnếutoánhạngbêntráilớnhơntoánhạngbênphải >= (Lớnhơnhoặcbằng)Trảlạigiátrịđúngnếutoánhạngbêntráilớnhơnhoặc bằngtoánhạngbênphải < Trảlạigiátrịđúngnếutoánhạngbêntráinhỏhơntoánhạngbênphải <= (Nhỏ hơn hoặc bằng)Trả lạigiá trị đúng nếu toán hạng bên trái nhỏ hơn hoặcbằngtoánhạngbênphải var1%var2 (Chialấyphầndư)Trảlạiphầndưkhichiavar1chovar2 - (Phủđịnh)Chogiátrịphủđịnhtoánhạng var++ Toántửnàytăngvarlên1(cóthểbiểudiễnlà++var) var Toántửnàygiảmvarđi1(cóthểbiểudiễnlà var) + Kếthợphaichuỗi expr1&&expr2 ToántửANDtrảvềgiátrịđúngnếuexpr1vàexpr2cùngđúng. expr1||expr2 ToántửORtrảvềgiátrịđúngnếuítnhất1trong2expr1,expr2đúng. V.Cấutrúclậptrình CóthểchiacáccấutrúclậptrìnhcủaJavaScriptthành2nhómsau:Cấutrúcrẽnhánh (Điềukiện)vàCấutrúclặp. 1.Cấutrúclậptrìnhrẽnhánh(ĐiềuKiện) Cúpháp: if(<điềukiện>){ //Cáccâulệnhvớiđiềukiệnđúng }else{ //Cáccâulệnhvớiđiềukiệnsai } Vídụ:Tạotrang(CauTrucDK.htm)Sửdụngphươngphápconfirm()vớiphátbiểuif <HTML> <Head><Title>C ấuTrúcĐiềuKiện</Title> <ScriptLanguage="Javascript"> varquestion="Whatis10+10?"; varanswer=20; varcorrect="<IMGSRC='vui.gif'>"; varincorrect="<IMGSRC='buon.gif'>"; varresponse=prompt(question,"0"); if(response!=answer){ if(confirm("Wrong!pressOKforasecondchange")) response=prompt(question,"0"); } varoutput=(response==answer)? correct:incorrect; </Script> </Head><Body> <ScriptLanguage="Javascript"> document.write(output); </Script> </Body></HTML> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang38 2.Cấutrúclặp a.VònglặpFor Vònglặpforthiếtlập1biểuthứckhởiđầu-initExpr,sauđólặp1đoạnmãchođếnkhi biểuthức<điềukiện>đượcđánhgiálàđúng.Saukhikếtthúcmỗivònglặp,biểuthứcincrExpr đượcđánhgiálại. Cúpháp: for(initExpr;<điềukiện>;incrExpr){ //Cáclệnhđượcthựchiệntrongkhilặp } Vídụ:Tạotrang(ForLoop.htm)nhưsau for(x=1;x<=10;x++){ y=x*25; document.write("x="+x+";y="+y+"<BR>"); } b.VònglặpWhile Vònglặpwhilelặpkhốilệnhchừngnào<điềukiện>cònđượcđánhgiálàđúng Cúpháp: while(<điềukiện>){ //Cáccâulệnhthựchiệntrongkhilặp } Vídụ:Tạotrang(WhileLoop.htm)nhưsau x=1; while(x<=10){ y=x*25; document.write("x="+x+";y="+y+"<BR>"); x++; } //K ếtquảcủa vídụ nàygiốngnhưvídụtrước. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang39 c.LệnhBreak Câulệnhbreakdùngđểkếtthúcviệcthựchiệncủavònglặpforhaywhile.Chươngtrình đượctiếptụcthựchiệntạicâulệnhngaysauchỗkếtthúccủavònglặp. Cúpháp: break; Vídụ:Nếugiátrịxđưavàovònglặpnhỏhơn50,vònglặpsẽkếtthúc while(x<100){ if(x<50)break; x++; } d.LệnhContinue Đốivớivònglặpwhilelệnhcontinueđiềukhiểnquaylại<điềukiện>;vớiforlệnhcontinue điềukhiểnquaylạiincrExpr. Cúpháp: continue; Vídụ:Đoạnmãsautăngxtừ0lên5,nhảylên8vàtiếptụctănglên10 x=0; while(x<=10){ document.write(“Giátr ịcủaxlà:”+x+”<BR>”); if(x=5){ x=8; continue; } x++; } VI.Mảng-Array MặcdùJavaScriptkhônghỗtrợcấutrúcdữliệumảngnhưngtạoraphươngthứccho phépbạntựtạoracáchàmkhởitạomảngnhưsau: functiontaomang(n){ this.length=n; for(vari=1;i<=n;i++){ this[i]=0 } returnthis; } Tạora1mảngvớikíchthướcxácđịnhtrước(n)vàđiềncácgiátrị0. Vídụ: a=newtaomang(10); Tạoracácthànhphầntừa[1]đếna[10]vớigiátrịlà0.Gángiátrịchocácthànhphần: a[1]="NghệAn"; a[2]="HàNội"; Vídụ:Tạotrang(Array.htm) <HTML><Head> <Title>ArrayExemple</Title> <ScriptLanguage="JavaScript"> functiontaomang(n){ this.length=n; for(vari=1;i<=n;i++){ this[i]=0 } This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang40 returnthis; } a=newtaomang(10); a[1]="Ngh ệAn"; a[2]="HàN ội"; document.write(a[1]+"<BR>"); document.write(a[2]+"<BR>"); </Script> </Head> <Body></Body> </HTML> VII.Hàm-Function 1.Giớithiệu Trong lập trình sử dụng hàm là để thực hiện một đoạn chương trình nào đó. Trong Javascriptcócáchàmđượcxâydựngsẵnđểgiúpthựchiệnmộtchứcnăngvàtacũngcóthể địnhnghĩaracáchàmkhácđểthựchiệnmộtcôngviệcnàođó. Hàmcóthểcó1haynhiềuthamsốtruyềnvàovà1giátrịtrảvề.Hàmcóthểlàthuộctính của1đốitượng,trongtrườnghợpnàynóđượcxemnhưlàphươngthứccủađốitượngđó. 2.ĐịnhNghĩaHàm Cúpháp: functionfnName([param1],[param2], ,[paramN]){ //functionstatement } Vídụ:Tạotrang(Function.htm) MTWRFSS <HTML><Head><Title>Function</Title> <ScriptLanguage="JavaScript"> functiontestQuestion(question){ varanswer=eval(question); varoutput="Whatis"+question+"?"; varcorrect="<IMGSRC='vui.gif'>"; varincorrect="<IMGSRC='buon.gif'>"; varresponse=prompt(output,"0"); return(response==answer)?correct:incorrect; } </Script></Head><Body> <ScriptLanguage="JavaScript"> varresult=testQuestion("10+10"); document.write(result); </Script></Body> </HTML> This is trial version www.adultpdf.com . } varoutput=(response==answer)? correct:incorrect; </Script> </Head><Body> <ScriptLanguage="Javascript"> document.write(output); </Script> </Body></HTML> This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết. </SCRIPT>vànhúngmộtFilenguồnJavaScript làđượcsửdụngnhiềuhơncả. 1.NhúngJavaScriptvàotrangHTML JavaScriptđượcđưavàoFileHTMLbằngcáchsửdụngcặpthẻ<Script>và</Script>. Nếuđặttrongphần<Head>,nósẽđượctảivàsẵnsàngtrướckhiphầncònlạicủavăn bảnđượctải.Sửdụngcúphápsau: <Script> //ChèncácmãJavacriptvàođây </Script> Vídụ:Tạotrang web (Clock1.htm)sửdụngnhúngmãJavaScripttrựctiếpvàotrang Ghichú:CóthểsưutầmcácmãJavaScripttừWebsitehttp://www.javascriptbank.com.vn, www.echip.com.vn This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang32 2.SửdụngFilenguồnJavaScript DùngphươngphápnàyhayhơnnhúngtrựctiếplệnhJavaScriptvàotrangHTML. Cúpháp: <ScriptSrc="File_name.js"> </Script> Vídụ:. "); </Script> </PRE> <Body> This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang33 3.Hiểnthịhộpthoạithôngbáo–Lệnhalert() Cúpháp:
Ngày đăng: 13/08/2014, 23:21
Xem thêm: BÀI GIẢNG MÔN THIẾT KẾ WEB doc
