BÀI GIẢNG MÔN THIẾT KẾ WEB potx

BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang41  Ghichú:Hàmevaldùngchuyểnđổigiátrịchuỗithànhgiátrịsốeval(“10*10”)trảvềgiátrịlà100 3.CácHàmCóSẳn JavaScriptcómộtsốhàmcósẵn,gắntrựctiếpvàochínhngônngữvàkhôngnằmtrong mộtđốitượngnào:eval,parseInt,parseFloat a.Hàmeval Chuyểnđổigiátrịchuỗithànhgiátrịsố. Cúpháp: returnval=eval(biểuthức) Vídụ:Tạotrang(Eval.htm) <HTML><Head><Title>EvalExample</Title> <ScriptLanguage="JavaScript">  varstring=”10+Math.sqrt(64)”;  document.write(string+“=”+eval(string)); </Script> </Head> <Body></Body> </HTML>  b.HàmparseInt Hàmnàychuyểnmộtchuỗisốthànhsốnguyênvớicơsốlàthamsốthứhai. Cúpháp: parseInt(string,[,radix]) Vídụ:Tạotrang(ParserInt.htm) <HTML><Head><Title>ParserIntExample</Title><Body> <ScriptLanguage="JavaScript"> document.write("Converting0xChextobase-10:"+parseInt(0xC,10)+"<BR>"); document.write("Converting1100binarytobase-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ần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang42  c.HàmparseFloat HàmnàygiốnghàmparseIntnhưngnóchuyểnchuỗithànhsốbiểudiễndướidạngdấu phẩyđộng. Cúpháp:parseFloat(string) Vídụ:Tạotrang(ParserFloat.htm) <Body> <scriptlanguage="JavaScript"> document.write("Thisscriptwillshowhowdiffrentstringsare"); document.write("ConvertedusingparseFloat<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ần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang43 Chương03 ĐỐITƯỢNG&SỰKIỆN  Đốitượngvàthaotáctrênđốitượng  Sựkiệnvàxửlýsựkiện  Cácđốitượngthườngdùng  I.KháiNiệmĐốiTượng 1.KháiNiệmVềĐôiTượ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 TrongsơđồphâncấpcácđốitượngcủaJavaScript,cácđốitượngconthựcsựlàcácthuộctính củacácđốitượngcha. Vi dụ chương trìnhxử lý sựkiệntrên form tên frmDieutra làthuộc tính của đốitượng documentvàtrườngtexttxtAgelàthuộctínhcủaformfrmDieutra.Đểthamchiếuđếngiátrịcủa txtAgephảisửdụng:document.frmDieucha.txtAge.value Sơđồsausẽminhhoạsựphâncấpcủacácđốitượng           2.Cáccâulệnhthaotáctrênđốitượng a.LệnhFor in Câulệnhnàyđượcsửdụngbiêttấtcảcácthuộctính(properties)củamộtđốitượng. for(<variable>in<object>){ //Cáccâulệnh }   Window Texturea Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select Plugin MimeType Frame document Location History Layer Link Image Area Anchor Applet Plugin Form navigator Option This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang44 Vídụ:Tạotrang(ForIn.htm)intấtcảcácthuộctínhcủađốitượngWindow. <Body> <SCRIPTLANGUAGE="JavaScript"><BODY> document.write("ThepropertiesoftheWindowobjectare:<BR>"); for(varxinwindow)  document.write(""+x+","); </SCRIPT> </Body> b.Biếnnew Biếnnewđượcthựchiệnđểtạoramộtthểhiệnmớicủamộtđốitượng objectvar=newobject_type(param1[,param2] [,paramN]) c.TừKhóaThis Từkhoáthisđượcsửdụngđểchỉđốitượnghiệnthời. this[.property] d.LệnhWith Lệnhnàyđượcsửdụngđểthiếtlậpđốitượngngầmđịnhchomộtnhómcáclệnh. with(object){  //statement } Vídụ:Tạotrang(Object.htm)minhhoạcáchtạovàsửdụngbiếnNew,từkhoathisvàlệnhwith. <HTML> <HEAD><TITLE>FunctionExample</TITLE> <ScriptLanguage="JavaScript"> functionperson(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; } functionprintStats(){  with(document){ write("Name:"+this.last_name+""+this.first_name+"<BR>");  write("Age:"+this.age+"<BR>");  write("Sex:"+this.sex+"<BR>");  } } person1=newperson("Thuy","DauBich","23","Female"); person2=newperson("Chung","NguyenBao","24","Male"); person3=newperson("Binh","NguyenNhat","24","Male"); person4=newperson("Hoan","DoVan","23","Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); </SCRIPT> </HEAD> <BODY></BODY> </HTML> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang45  II.SựKiện&XưLySựKiện 1.Kháiniệmsựkiệnvàxưlysựkiện JavaScriptlàngônngữđịnhhướngsựkiện,nghĩalàsẽphảnứngtrướccácsựkiệnnhư: Clickchuột... Chươngtrìnhxửlýsựkiện(Eventhandler)là1đoạnmãhay1hàmđượcthựchiệnđể phảnứngtrước1sựkiệnđượcxácđịnhlàmộtthuộctínhcủamộtthẻHTML: <tagNameeventHandler="JavaScriptCodeorFunction"> Vídụ:TrangEventHander.htmthẩmđịnhgiátrịđưavàotrongtrườngtextTuổiphaihợplệnếu sẽxuấthiệnthôngbáoyêucầunhậplại. <HTML> <HEAD><Title>AnEventHandlerExemple</Title> <ScriptLanguage="JavaScript"> functionCheckAge(form){ if((form.AGE.value<0)||(form.AGE.value>120)){ alert("Tu ổinhậpvàokhônghợplệ!Mờibạnnhậplại");  form.AGE.value=0;  } } </Script> </Head><Body> <FormNAME="frmDieutra"> Nh ậpvàotêncủabạn:<BR> Tên<InputType=TextName="TEN"><BR> Đệm<InputType=TextName="DEM"><BR> H ọ<InputType=TextName="HO"><BR> Age<InputType=TextName="AGE"onChange="CheckAge(frmDieutra)"><BR> <InputType=SubmitValue=”Submit”> <InputType=ResetValue=”Reset”> </Form> </Body></HTML>   This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang46 2.MộtsốsựkiệntrongJavaScript: onBlur Xảyrakhiinputfocusbịxoátừthànhphầnform onClick Xảyrakhingườidùngkíchvàocácthànhphầnhayliênkếtcủaform. onChange Xảyrakhigiátrịcủathànhphầnđượcchọnthayđổi onFocus Xảyrakhithànhphầncủaformđượcfocus(làmnổilên). onLoad XảyratrangWebđượctải. onMouseOver  Xảyrakhidichuyểnchuộtquakếtnốihayanchor. onSelect Xảyrakhingườisửdụnglựachọnmộttrườngnhậpdữliệutrênform. onSubmit Xảyrakhingườidùngđưaramộtform. onUnLoad Xảyrakhingườidùngđóngmộttrang 3.cácsựkiệncósẵncủamộtsốđốitượng. Đốitượng Chươngtrìnhxửlýsựkiệncósẵn Selectionlist onBlur,onChange,onFocus Text onBlur,onChange,onFocus,onSelect Textarea onBlur,onChange,onFocus,onSelect Button onClick Checkbox onClick Radiobutton onClick Hypertextlink onClick,onMouseOver,onMouseOut ClickableImagemaparea onMouseOver,onMouseOut Resetbutton onClick Submitbutton onClick Document onLoad,onUnload,onError Window onLoad,onUnload,onBlur,onFocus Framesets onBlur,onFocus Form onSubmit,onReset Image onLoad,onError,onAbort Vídụ:TrangLoadUnLoad.htm <HTML> <HEAD><TITLE>EventHandler</TITLE> </HEAD> <BODYonLoad="alert('Welcometomypage!');"onUnload="alert('Goodbye!');"> <IMGSRC="Logo.jpg"> </BODY> </HTML>    III.CÁCĐỐITƯỢNGTHƯỜNGDÙNG 1.Đốitượngwindow Đốitượngwindowlàđốitượngởmứccaonhất.Cácđốitượngdocument,frame,location đềulàthuộctínhcủađốitượngwindow. Cácthuộctính: defaultStatus Thôngbáongầmđịnhhiểnthịlêntrênthanhtrạngtháicủacửasổ Frames Mảngxácđịnhtấtcảcácframetrongcửasổ. Length Sốlượngcácframetrongcửasổcha. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang47 Name Têncủacửasổhiệnthời. Parent ĐốitượngcửasổchA Self Cửasổhiệnthời. Status Đượcsửdụngthôngbáotạmthờihiểnthịlêntrênthanhtrạngtháicửasổ. Top Cửasổởtrêncùng. Window Cửasổhiệnthời. Cácphươngthức alert("message") Hiểnthịhộpthoạivớichuỗi"message"vànútOK. clearTimeout(timeoutID) XóatimeoutdoSetTimeoutđặt.SetTimeouttrảlại timeoutID WindowReference.close ĐóngcửasổwindowReference. confirm("message") Hiểnthịhộpthoạivớichuỗi"message",nútOKvà nút Cancel. Trả lại trị True cho OK và False cho Cancel. [windowVar=][window].open("URL", "windowName",["windowFeatures"]) Mởcửasổmới. prompt("message"[,"defaultInput"]) Mởhộphộithoạiđểnhậndữliệuvàotrườngtext. TimeoutID=setTimeout(expression,msec)  Đánhgiábiểuthứcexpresionsauthờigianmsec. 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.htmlxuốngcửasổmớiđórồimộtnútkhácdùngđểđóngcủasổthứhailại, <HTML> <Head><Title>WindowObject</Title></Head> <Body> <Form> <InputType="button"VALUE="OpenSecondWindow" onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')"> <BR><AHREF="doc.htm"TARGET="window2">LoadaFileintowindow2</A> <InputType="button"VALUE="CloseSecondWindow"onClick="msgWindow.close()"> </Form> </Body> </HTML>  2.Đốitượngforms Cácformđượctạoranhờcặpthẻ<FORM>...</FORM>.Cómộtvàiphầntử(elements) củađốitượngformsnhư:Button,checkbox,password,radio,reset,select,submit,text,textarea Cácthuộctính Action thuộctínhACTIONcủathẻFORM. Elements Mảngchứacácthànhphầntrongform(nhưcheckbox,textBOX.. Encoding XâuchứakiểuMIMEđượcsửdụngđểmãhoánộidungcủaformgửichoserver. length Sốlượngcácthànhphầntrongmộtform. Method ThuộctínhMETHOD. target Xâuchứatêncủacửasổđíchkhisubmitform  This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang48 Cácphươngthức formName.submit()-XuấtdữliệucủamộtformtênformNametớitrangxửlý.Phương thứcnàymôphỏngmộtclickvàonútsubmittrênform. CácphầntửcủađốitượngForm Formđượctạobởicácphầntửchophépngườisửdụngđưathôngtinvào.Khiđó,nội dung(hoặcgiátrị)củacácphầntửsẽđượcchuyểnđếnmộtchươngtrìnhtrênserverquamột giaodiệnđượcgọilàCommonGatewayInterface(Giaotiếpquamộtcổngchung)gọitắtlàCGI BngCácphntcaform Phầntử Môtả Button Làmộtnútbấmhơnlànútsubmithaynútreset(<INPUTTYPE="button">) Checkbox Mộtcheckbox(<INPUTTYPE="checkbox">) FileUpload LàmộtphầntửtảiFilechophépsửdụnggửilênmộtFile(<INPUTTYPE="File">)  Hidden Mộttrườngẩn(<INPUTTYPE="hidden">) Password Mộttrườngtextđểnhậpmậtkhẩumàtấtcảcáckýtựnhậpvàođềuhiểnthịlàdấu (*)(<INPUTTYPE="password">) Radio Mộtnútbấm(<INPUTTYPE="radio">) Reset Mộtnútreset(<INPUTTYPE="reset">) Select Mộtdanhsáchlựachọn(<SELECT><OPTION>option1</OPTION> <OPTION>option2</OPTION></SELECT>) Submit Mộtnútsubmit(<INPUTTYPE="submit">) Text Mộttrườngtext(<INPUTTYPE="text">) textArea Mộttrườngtextchophépnhậpvàpnhiềudòng <TEXTAREA>defaulttext</TEXTAREA>) ThuộctínhName:MỗiphầntửđượcđặttênđểJavaScripttruycậpđếnchúngqua ThuộctínhTtype:Đólàmộtxâuchỉđịnhrõkiểucủaphầntửđượcđưavàonhưnútbấm,một trườngtexthaymộtcheckbox làmộttrongcácgiátrịsau:  Textfield:"text"  Radiobutton:"radio"  Checkbox:"checkbox"  Hiddenfield:"hidden"  Submitbutton:"submit"  Resetbutton:"reset"  Passwordfield:"password"  Button:"button"  Selectlist:"select-one"  Multipleselectlists:"select-multiple"  Textareafield:"textarea" a.Phntbutton TrongmộtformHTMLchuẩn,chỉcóhainútbấmcósẵnlàsubmitvàresetbởivìdữliệu trongformphảiđượcgửitớimộtđịachỉURLđểxửlývàlưutrữ.Mộtphầntửbuttonđượcchỉ địnhrõkhisửdụngthẻINPUT: <INPUTTYPE="button"NAME="name"VALUE="buttonName"> “name”làtêncủabutton,“buttonname”lànhãncủabuttonsẽđượchiểnthị. ChỉcómộtsựkiệnduynhấtlàonClick. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang49 Vídụ:TrangButton.htmĐịnhgiátrịtrongformsửdụngphầntửbutton. <HTML> <Head><Title>buttonExample</Title> <ScriptLanguage="JavaScript"> functioncalculate(form){  form.results.value=eval(form.entry.value); } </Script> </Head> <Body> <FormMethod=POST> EnteraJavaScriptmathematicalexpression: <INPUTTYPE="text"NAME="entry"VALUE=""><BR> Theresultofthisexpressionis: <INPUTTYPE=textNAME="results"onFocus="this.blur();"><BR> <INPUTTYPE="button"VALUE="Calculate"onClick="calculate(this.form);"> </Form> </Body></HTML>  b.Phntcheckbox Cácphầntửcheckboxcókhảnăngbậttắtdùngđểchọnhoặckhôngchọnmộtthôngtin. Bangdanhsáchcácthuộctínhvàcácphươngthức checked Chobiếttrạngtháihiệnthờicủacheckbox defaultChecked Chobiếttrạngtháimặcđịnhcủaphầntử name ChobiếttêncủaphầntửđượcchỉđịnhtrongthẻINPUT value ChobiếtgiátrịhiệnthờicủaphầntửđượcchỉđịnhtrongthẻINPUT click() Môtảmộtclickvàocheckbox(Phươngthức) Vídụ:TrangCheckbox.htmTạohộpcheckboxđểnhậpvàomộtsốlựachọn: <HTML><Head><Title>CheckboxExample</Title> <Script> functioncalculate(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;   } //endif(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àiGiảngMônThiếtKếWeb  Phần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang50 <FormMethod=Post> Value:<InputType="text"NAME="entry"VALUE=0 onChange="calculate(this.form,this.name);"><BR> Action:<InputType=checkboxNAME=square onClick="calculate(this.form,this.name);">Square<BR> Result:<InputType="text"NAME="result"VALUE=0 onChange="calculate(this.form,this.name);"> </Form> </Body></HTML>  c.PhntFileUpload PhầntửnàycungcấpchoformmộtcáchđểngườisửdụngcóthểchỉrõmộtFileđưa vàoformxửlý. d.Phnthidden PhầntửhiddenlàphầntửkhôngđượchiểnthịtrênWebbrowser.Trườnghiddencóthể sửdụngđểlưucácgiátrịcầnthiếtđểgửitớiserversongsongvớisựxuấtratừformnhưngnó khôngđượchiểnthịtrêntrang. e.PhntPassword ĐốitượngPasswordlàđốitượngmàkhigõbấtkỳkýtựnàovàocũngđềuhiểnthịdấu sao(*).Dùngđểnhậpnhữngthôngtinbímậtnhưmậtkhẩu  f.Phntradio Đốitượngradiogầngiốngsựbậttắtcheckbox.Khinhiềuradiođượckếthợpthànhmột nhóm,chỉcómộtnútđượcchọntrongbấtkỳmộtthờiđiểmnào. NhómcácnútradiolạibằngcáchđặtchochúngcócùngmộttêntrongcácthẻINPUT. Bảngsauhiểnthịcácthuộctínhvàcáchthứccủađốitượngradio. Thuộctínhvàcáchthức Môtả checked Môtảtrạngtháihiệnthờicủaphầntửradio defaultChecked Môtảtrạngtháimặcđịnhcủaphầntử index Môtảthứtựcủanútradiođượcchọnhiệnthờitrongmộtnhóm length Môtảtổngsốnútradiotrongmộtnhóm name MôtảtêncủaphầntửđượcchỉđịnhtrongthẻINPUT value MôtảgiátrịhiệnthờicủaphầntửđượcđịnhratrongthẻINPUT click() Môphỏngmộtclicktrênnútradio(cáchthức) Vídụ:TrangRadioButton.htm <HTML><Head><Title>RadiobuttonExample</Title> <Script> functioncalculate(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ần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang41  Ghichú:Hàmevaldùngchuyểnđổigiátrịchuỗithànhgiátrịsốeval(“10*10”)trảvềgiátrịlà100 3.CácHàmCóSẳn JavaScriptcómộtsốhàmcósẵn,gắntrựctiếpvàochínhngônngữvàkhôngnằmtrong mộtđốitượngnào:eval,parseInt,parseFloat a.Hàmeval Chuyểnđổigiátrịchuỗithànhgiátrịsố. Cúpháp: returnval=eval(biểuthức) Vídụ:Tạotrang(Eval.htm) <HTML><Head><Title>EvalExample</Title> <ScriptLanguage="JavaScript"> . document.write(string+“=”+eval(string)); </Script> </Head> <Body></Body> </HTML>  b.HàmparseInt Hàmnàychuyểnmộtchuỗisốthànhsốnguyênvớicơsốlàthamsốthứhai. Cúpháp: parseInt(string,[,radix]) Vídụ:Tạotrang(ParserInt.htm) <HTML><Head><Title>ParserIntExample</Title><Body> <ScriptLanguage="JavaScript"> document.write("Converting0xChextobase-10:"+parseInt(0xC,10)+"<BR>"); document.write("Converting1100binarytobase-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ần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang42  c.HàmparseFloat HàmnàygiốnghàmparseIntnhưngnóchuyểnchuỗithànhsốbiểudiễndướidạngdấu phẩyđộng. Cúpháp:parseFloat(string) Vídụ:Tạotrang(ParserFloat.htm) <Body> <scriptlanguage="JavaScript"> document.write("Thisscriptwillshowhowdiffrentstringsare"); document.write("ConvertedusingparseFloat<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. Trang42  c.HàmparseFloat HàmnàygiốnghàmparseIntnhưngnóchuyểnchuỗithànhsốbiểudiễndướidạngdấu phẩyđộng. Cúpháp:parseFloat(string) Vídụ:Tạotrang(ParserFloat.htm) <Body> <scriptlanguage="JavaScript"> document.write("Thisscriptwillshowhowdiffrentstringsare"); document.write("ConvertedusingparseFloat<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ần2:NgônNgữKịchBảnJavaScript   Biênsọan:DươngThànhPhết  Trang43 Chương03 ĐỐITƯỢNG&SỰKIỆN 