BÀI GIẢNG MÔN THIẾT KẾ WEB potx
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 (825.29 KB, 10 trang )
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang41
Ghichú:Hàmevaldùngchuyểnđổigiátrịchuỗithànhgiátrịsốeval(“10*10”)trảvềgiátrịlà100
3.CácHàmCóSẳn
JavaScriptcómộtsốhàmcósẵn,gắntrựctiếpvàochínhngônngữvàkhôngnằmtrong
mộtđốitượngnào:eval,parseInt,parseFloat
a.Hàmeval
Chuyểnđổigiátrịchuỗithànhgiátrịsố.
Cúpháp:
returnval=eval(biểuthức)
Vídụ:Tạotrang(Eval.htm)
<HTML><Head><Title>EvalExample</Title>
<ScriptLanguage="JavaScript">
varstring=”10+Math.sqrt(64)”;
document.write(string+“=”+eval(string));
</Script>
</Head>
<Body></Body>
</HTML>
b.HàmparseInt
Hàmnàychuyểnmộtchuỗisốthànhsốnguyênvớicơsốlàthamsốthứhai.
Cúpháp:
parseInt(string,[,radix])
Vídụ:Tạotrang(ParserInt.htm)
<HTML><Head><Title>ParserIntExample</Title><Body>
<ScriptLanguage="JavaScript">
document.write("Converting0xChextobase-10:"+parseInt(0xC,10)+"<BR>");
document.write("Converting1100binarytobase-10:"+parseInt(1100,2)+"<BR>");
</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 Trang42
c.HàmparseFloat
HàmnàygiốnghàmparseIntnhưngnóchuyểnchuỗithànhsốbiểudiễndướidạngdấu
phẩyđộng.
Cúpháp:parseFloat(string)
Vídụ:Tạotrang(ParserFloat.htm)
<Body>
<scriptlanguage="JavaScript">
document.write("Thisscriptwillshowhowdiffrentstringsare");
document.write("ConvertedusingparseFloat<BR>");
document.write("137="+parseFloat("137")+"<BR>");
document.write("137abc="+parseFloat("137abc")+"<BR>");
document.write("abc137="+parseFloat("abc137")+"<BR>");
document.write("1abc37="+parseFloat("1abc37")+"<BR>");
</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 Trang43
Chương03
ĐỐITƯỢNG&SỰKIỆN
Đốitượngvàthaotáctrênđốitượng
Sựkiệnvàxửlýsựkiện
Cácđốitượngthườngdùng
I.KháiNiệmĐốiTượng
1.KháiNiệmVềĐôiTượng
JavaScript là ngôn ngữ lập trình dựa trên đối tượng, nhưng không hướng đối tượng
TrongsơđồphâncấpcácđốitượngcủaJavaScript,cácđốitượngconthựcsựlàcácthuộctính
củacácđốitượngcha.
Vi dụ chương trìnhxử lý sựkiệntrên form tên frmDieutra làthuộc tính của đốitượng
documentvàtrườngtexttxtAgelàthuộctínhcủaformfrmDieutra.Đểthamchiếuđếngiátrịcủa
txtAgephảisửdụng:document.frmDieucha.txtAge.value
Sơđồsausẽminhhoạsựphâncấpcủacácđốitượng
2.Cáccâulệnhthaotáctrênđốitượng
a.LệnhFor in
Câulệnhnàyđượcsửdụngbiêttấtcảcácthuộctính(properties)củamộtđốitượng.
for(<variable>in<object>){
//Cáccâulệnh
}
Window Texturea
Text
FileUpload
Password
Hidden
Submit
Reset
Radio
Checkbox
Button
Select
Plugin
MimeType
Frame
document
Location
History
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
navigator
Option
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 Trang44
Vídụ:Tạotrang(ForIn.htm)intấtcảcácthuộctínhcủađốitượngWindow.
<Body>
<SCRIPTLANGUAGE="JavaScript"><BODY>
document.write("ThepropertiesoftheWindowobjectare:<BR>");
for(varxinwindow)
document.write(""+x+",");
</SCRIPT>
</Body>
b.Biếnnew
Biếnnewđượcthựchiệnđểtạoramộtthểhiệnmớicủamộtđốitượng
objectvar=newobject_type(param1[,param2] [,paramN])
c.TừKhóaThis
Từkhoáthisđượcsửdụngđểchỉđốitượnghiệnthời.
this[.property]
d.LệnhWith
Lệnhnàyđượcsửdụngđểthiếtlậpđốitượngngầmđịnhchomộtnhómcáclệnh.
with(object){
//statement
}
Vídụ:Tạotrang(Object.htm)minhhoạcáchtạovàsửdụngbiếnNew,từkhoathisvàlệnhwith.
<HTML>
<HEAD><TITLE>FunctionExample</TITLE>
<ScriptLanguage="JavaScript">
functionperson(first_name,last_name,age,sex){
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
this.printStats=printStats;
}
functionprintStats(){
with(document){
write("Name:"+this.last_name+""+this.first_name+"<BR>");
write("Age:"+this.age+"<BR>");
write("Sex:"+this.sex+"<BR>");
}
}
person1=newperson("Thuy","DauBich","23","Female");
person2=newperson("Chung","NguyenBao","24","Male");
person3=newperson("Binh","NguyenNhat","24","Male");
person4=newperson("Hoan","DoVan","23","Male");
person1.printStats();
person2.printStats();
person3.printStats();
person4.printStats();
</SCRIPT>
</HEAD>
<BODY></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 Trang45
II.SựKiện&XưLySựKiện
1.Kháiniệmsựkiệnvàxưlysựkiện
JavaScriptlàngônngữđịnhhướngsựkiện,nghĩalàsẽphảnứngtrướccácsựkiệnnhư:
Clickchuột...
Chươngtrìnhxửlýsựkiện(Eventhandler)là1đoạnmãhay1hàmđượcthựchiệnđể
phảnứngtrước1sựkiệnđượcxácđịnhlàmộtthuộctínhcủamộtthẻHTML:
<tagNameeventHandler="JavaScriptCodeorFunction">
Vídụ:TrangEventHander.htmthẩmđịnhgiátrịđưavàotrongtrườngtextTuổiphaihợplệnếu
sẽxuấthiệnthôngbáoyêucầunhậplại.
<HTML>
<HEAD><Title>AnEventHandlerExemple</Title>
<ScriptLanguage="JavaScript">
functionCheckAge(form){
if((form.AGE.value<0)||(form.AGE.value>120)){
alert("Tu
ổinhậpvàokhônghợplệ!Mờibạnnhậplại");
form.AGE.value=0;
}
}
</Script>
</Head><Body>
<FormNAME="frmDieutra">
Nh
ậpvàotêncủabạn:<BR>
Tên<InputType=TextName="TEN"><BR>
Đệm<InputType=TextName="DEM"><BR>
H
ọ<InputType=TextName="HO"><BR>
Age<InputType=TextName="AGE"onChange="CheckAge(frmDieutra)"><BR>
<InputType=SubmitValue=”Submit”>
<InputType=ResetValue=”Reset”>
</Form>
</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 Trang46
2.MộtsốsựkiệntrongJavaScript:
onBlur Xảyrakhiinputfocusbịxoátừthànhphầnform
onClick Xảyrakhingườidùngkíchvàocácthànhphầnhayliênkếtcủaform.
onChange Xảyrakhigiátrịcủathànhphầnđượcchọnthayđổi
onFocus Xảyrakhithànhphầncủaformđượcfocus(làmnổilên).
onLoad XảyratrangWebđượctải.
onMouseOver
Xảyrakhidichuyểnchuộtquakếtnốihayanchor.
onSelect Xảyrakhingườisửdụnglựachọnmộttrườngnhậpdữliệutrênform.
onSubmit Xảyrakhingườidùngđưaramộtform.
onUnLoad Xảyrakhingườidùngđóngmộttrang
3.cácsựkiệncósẵncủamộtsốđốitượng.
Đốitượng Chươngtrìnhxửlýsựkiệncósẵn
Selectionlist onBlur,onChange,onFocus
Text onBlur,onChange,onFocus,onSelect
Textarea onBlur,onChange,onFocus,onSelect
Button onClick
Checkbox onClick
Radiobutton onClick
Hypertextlink onClick,onMouseOver,onMouseOut
ClickableImagemaparea onMouseOver,onMouseOut
Resetbutton onClick
Submitbutton onClick
Document onLoad,onUnload,onError
Window onLoad,onUnload,onBlur,onFocus
Framesets onBlur,onFocus
Form onSubmit,onReset
Image onLoad,onError,onAbort
Vídụ:TrangLoadUnLoad.htm
<HTML>
<HEAD><TITLE>EventHandler</TITLE>
</HEAD>
<BODYonLoad="alert('Welcometomypage!');"onUnload="alert('Goodbye!');">
<IMGSRC="Logo.jpg">
</BODY>
</HTML>
III.CÁCĐỐITƯỢNGTHƯỜNGDÙNG
1.Đốitượngwindow
Đốitượngwindowlàđốitượngởmứccaonhất.Cácđốitượngdocument,frame,location
đềulàthuộctínhcủađốitượngwindow.
Cácthuộctính:
defaultStatus Thôngbáongầmđịnhhiểnthịlêntrênthanhtrạngtháicủacửasổ
Frames Mảngxácđịnhtấtcảcácframetrongcửasổ.
Length Sốlượngcácframetrongcửasổcha.
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 Trang47
Name Têncủacửasổhiệnthời.
Parent ĐốitượngcửasổchA
Self Cửasổhiệnthời.
Status Đượcsửdụngthôngbáotạmthờihiểnthịlêntrênthanhtrạngtháicửasổ.
Top Cửasổởtrêncùng.
Window Cửasổhiệnthời.
Cácphươngthức
alert("message") Hiểnthịhộpthoạivớichuỗi"message"vànútOK.
clearTimeout(timeoutID) XóatimeoutdoSetTimeoutđặt.SetTimeouttrảlại
timeoutID
WindowReference.close ĐóngcửasổwindowReference.
confirm("message") Hiểnthịhộpthoạivớichuỗi"message",nútOKvà
nút Cancel. Trả lại trị True cho OK và False cho
Cancel.
[windowVar=][window].open("URL",
"windowName",["windowFeatures"])
Mởcửasổmới.
prompt("message"[,"defaultInput"]) Mởhộphộithoạiđểnhậndữliệuvàotrườngtext.
TimeoutID=setTimeout(expression,msec)
Đánhgiábiểuthứcexpresionsauthờigianmsec.
Ví dụ:TrangWindows.htm nút thứ nhất để mở cửa sổ rỗng, sau đó một liên kết sẽ tải File
doc2.htmlxuốngcửasổmớiđórồimộtnútkhácdùngđểđóngcủasổthứhailại,
<HTML>
<Head><Title>WindowObject</Title></Head>
<Body>
<Form>
<InputType="button"VALUE="OpenSecondWindow"
onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')">
<BR><AHREF="doc.htm"TARGET="window2">LoadaFileintowindow2</A>
<InputType="button"VALUE="CloseSecondWindow"onClick="msgWindow.close()">
</Form>
</Body>
</HTML>
2.Đốitượngforms
Cácformđượctạoranhờcặpthẻ<FORM>...</FORM>.Cómộtvàiphầntử(elements)
củađốitượngformsnhư:Button,checkbox,password,radio,reset,select,submit,text,textarea
Cácthuộctính
Action thuộctínhACTIONcủathẻFORM.
Elements Mảngchứacácthànhphầntrongform(nhưcheckbox,textBOX..
Encoding XâuchứakiểuMIMEđượcsửdụngđểmãhoánộidungcủaformgửichoserver.
length Sốlượngcácthànhphầntrongmộtform.
Method ThuộctínhMETHOD.
target Xâuchứatêncủacửasổđíchkhisubmitform
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 Trang48
Cácphươngthức
formName.submit()-XuấtdữliệucủamộtformtênformNametớitrangxửlý.Phương
thứcnàymôphỏngmộtclickvàonútsubmittrênform.
CácphầntửcủađốitượngForm
Formđượctạobởicácphầntửchophépngườisửdụngđưathôngtinvào.Khiđó,nội
dung(hoặcgiátrị)củacácphầntửsẽđượcchuyểnđếnmộtchươngtrìnhtrênserverquamột
giaodiệnđượcgọilàCommonGatewayInterface(Giaotiếpquamộtcổngchung)gọitắtlàCGI
BngCácphntcaform
Phầntử Môtả
Button Làmộtnútbấmhơnlànútsubmithaynútreset(<INPUTTYPE="button">)
Checkbox Mộtcheckbox(<INPUTTYPE="checkbox">)
FileUpload LàmộtphầntửtảiFilechophépsửdụnggửilênmộtFile(<INPUTTYPE="File">)
Hidden Mộttrườngẩn(<INPUTTYPE="hidden">)
Password Mộttrườngtextđểnhậpmậtkhẩumàtấtcảcáckýtựnhậpvàođềuhiểnthịlàdấu
(*)(<INPUTTYPE="password">)
Radio Mộtnútbấm(<INPUTTYPE="radio">)
Reset Mộtnútreset(<INPUTTYPE="reset">)
Select Mộtdanhsáchlựachọn(<SELECT><OPTION>option1</OPTION>
<OPTION>option2</OPTION></SELECT>)
Submit Mộtnútsubmit(<INPUTTYPE="submit">)
Text Mộttrườngtext(<INPUTTYPE="text">)
textArea Mộttrườngtextchophépnhậpvàpnhiềudòng
<TEXTAREA>defaulttext</TEXTAREA>)
ThuộctínhName:MỗiphầntửđượcđặttênđểJavaScripttruycậpđếnchúngqua
ThuộctínhTtype:Đólàmộtxâuchỉđịnhrõkiểucủaphầntửđượcđưavàonhưnútbấm,một
trườngtexthaymộtcheckbox làmộttrongcácgiátrịsau:
Textfield:"text"
Radiobutton:"radio"
Checkbox:"checkbox"
Hiddenfield:"hidden"
Submitbutton:"submit"
Resetbutton:"reset"
Passwordfield:"password"
Button:"button"
Selectlist:"select-one"
Multipleselectlists:"select-multiple"
Textareafield:"textarea"
a.Phntbutton
TrongmộtformHTMLchuẩn,chỉcóhainútbấmcósẵnlàsubmitvàresetbởivìdữliệu
trongformphảiđượcgửitớimộtđịachỉURLđểxửlývàlưutrữ.Mộtphầntửbuttonđượcchỉ
địnhrõkhisửdụngthẻINPUT:
<INPUTTYPE="button"NAME="name"VALUE="buttonName">
“name”làtêncủabutton,“buttonname”lànhãncủabuttonsẽđượchiểnthị.
ChỉcómộtsựkiệnduynhấtlàonClick.
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 Trang49
Vídụ:TrangButton.htmĐịnhgiátrịtrongformsửdụngphầntửbutton.
<HTML>
<Head><Title>buttonExample</Title>
<ScriptLanguage="JavaScript">
functioncalculate(form){
form.results.value=eval(form.entry.value);
}
</Script>
</Head>
<Body>
<FormMethod=POST>
EnteraJavaScriptmathematicalexpression:
<INPUTTYPE="text"NAME="entry"VALUE=""><BR>
Theresultofthisexpressionis:
<INPUTTYPE=textNAME="results"onFocus="this.blur();"><BR>
<INPUTTYPE="button"VALUE="Calculate"onClick="calculate(this.form);">
</Form>
</Body></HTML>
b.Phntcheckbox
Cácphầntửcheckboxcókhảnăngbậttắtdùngđểchọnhoặckhôngchọnmộtthôngtin.
Bangdanhsáchcácthuộctínhvàcácphươngthức
checked Chobiếttrạngtháihiệnthờicủacheckbox
defaultChecked Chobiếttrạngtháimặcđịnhcủaphầntử
name ChobiếttêncủaphầntửđượcchỉđịnhtrongthẻINPUT
value ChobiếtgiátrịhiệnthờicủaphầntửđượcchỉđịnhtrongthẻINPUT
click() Môtảmộtclickvàocheckbox(Phươngthức)
Vídụ:TrangCheckbox.htmTạohộpcheckboxđểnhậpvàomộtsốlựachọn:
<HTML><Head><Title>CheckboxExample</Title>
<Script>
functioncalculate(form,callingField){
if(callingField=="result"){
if(form.square.checked){
form.entry.value=Math.sqrt(form.result.value);
}else{
form.entry.value=form.result.value/2;
} //endif(2)
}else{
if(form.square.checked){
form.result.value=form.entry.value*form.entry.value;
}else{
form.result.value=form.entry.value*2;
}
}
}
</Script>
</Head>
<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 Trang50
<FormMethod=Post>
Value:<InputType="text"NAME="entry"VALUE=0
onChange="calculate(this.form,this.name);"><BR>
Action:<InputType=checkboxNAME=square
onClick="calculate(this.form,this.name);">Square<BR>
Result:<InputType="text"NAME="result"VALUE=0
onChange="calculate(this.form,this.name);">
</Form>
</Body></HTML>
c.PhntFileUpload
PhầntửnàycungcấpchoformmộtcáchđểngườisửdụngcóthểchỉrõmộtFileđưa
vàoformxửlý.
d.Phnthidden
PhầntửhiddenlàphầntửkhôngđượchiểnthịtrênWebbrowser.Trườnghiddencóthể
sửdụngđểlưucácgiátrịcầnthiếtđểgửitớiserversongsongvớisựxuấtratừformnhưngnó
khôngđượchiểnthịtrêntrang.
e.PhntPassword
ĐốitượngPasswordlàđốitượngmàkhigõbấtkỳkýtựnàovàocũngđềuhiểnthịdấu
sao(*).Dùngđểnhậpnhữngthôngtinbímậtnhưmậtkhẩu
f.Phntradio
Đốitượngradiogầngiốngsựbậttắtcheckbox.Khinhiềuradiođượckếthợpthànhmột
nhóm,chỉcómộtnútđượcchọntrongbấtkỳmộtthờiđiểmnào.
NhómcácnútradiolạibằngcáchđặtchochúngcócùngmộttêntrongcácthẻINPUT.
Bảngsauhiểnthịcácthuộctínhvàcáchthứccủađốitượngradio.
Thuộctínhvàcáchthức Môtả
checked Môtảtrạngtháihiệnthờicủaphầntửradio
defaultChecked Môtảtrạngtháimặcđịnhcủaphầntử
index Môtảthứtựcủanútradiođượcchọnhiệnthờitrongmộtnhóm
length Môtảtổngsốnútradiotrongmộtnhóm
name MôtảtêncủaphầntửđượcchỉđịnhtrongthẻINPUT
value MôtảgiátrịhiệnthờicủaphầntửđượcđịnhratrongthẻINPUT
click() Môphỏngmộtclicktrênnútradio(cáchthức)
Vídụ:TrangRadioButton.htm
<HTML><Head><Title>RadiobuttonExample</Title>
<Script>
functioncalculate(form,callingField){
if(callingField=="result"){
if(form.action[1].checked){
form.entry.value=Math.sqrt(form.result.value);
}else{
form.entry.value=form.result.value/2;
}
}else{
if(form.action[1].checked){
This is trial version
www.adultpdf.com
