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 . Bài Giảng Môn Thiết Kế 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"> . 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ài Giảng Môn Thiết Kế 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. 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ài Giảng Môn Thiết Kế Web Phần2:NgônNgữKịchBảnJavaScript Biênsọan:DươngThànhPhết Trang43 Chương03 ĐỐITƯỢNG&SỰKIỆN