BÀI GIẢNG MÔN THIẾT KẾ WEB doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (472.11 KB, 10 trang )
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ừWebsite,
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=" /> }
}
</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
