Download
1 / 32
320 likes | 426 Views
JAVASCRIPT. NỘI DUNG. 1. Giới thiệu 2. Cú pháp JavaScript 3. Cấu trúc JavaScript 4. Objects, Events và DOM 5. Alerts, Promts và Comfirms 6. Form Validation 7. Hiệu ứng chuột. 1. Giới thiệu. Là ngôn ngữ thông dịch
E N D
NỘI DUNG 1. Giớithiệu 2. Cúpháp JavaScript 3. Cấutrúc JavaScript 4. Objects, Events và DOM 5. Alerts, PromtsvàComfirms 6. Form Validation 7. Hiệuứngchuột
1. Giớithiệu • Làngônngữthôngdịch • Đượcnhúng (embedded) hoặctíchhợp (integated) vàotập tin HTML chuẩn • Hướngđốitượng • Có 2 dạng object: Built-in object vàngườidùngtạora.
JavaScript hổtrợhầuhếttrêncáctrìnhduyệtphổbiến. Ngoàiracònđượcsửdụng ở phía server. • JavasSriptlàsựmởrộngchứcnăngđốivới 1 trang HTML thôngthường: kiểmtradữliệunhập, tạohiệuứngchocácđốitượngtrongvănbản…
2. Cúpháp JavaScript • Đưa JavaScript vàotrang HTML SCRIPT LANGUAGE=”JavaScript”> JavaScript Program </SCRIPT> Thuộctínhcủathẻ SCRIPT • + SRC :Địachỉ URL chỉđếntập tin chươngtrình JavaScript (*.js) • + LANGUAGE: Chỉđịnhngônngữđượcsửdụngtrong Script vàcácphiênbảnsửdụng (JavaScript ,JavaScript .1.2 vv… ,VBScript )
3. Cấutrúclậptrìnhcơbản • Khaibáobiến • Sửdụngtoántử • Cấutrúcđiềukhiểncơbản • Hàm
Khaibáobiến • Sửdụngtừkhóavar • var x = 0; • JavaScript phânbiệtchữhoavàchữthường • x và X làkhácnhau • JavaScript khôngcókiểucụthể, tùyngữcảnhsẽcókiểuphùhợp • x = "Chuoithi du" => x cókiểulà string • x = 5 => x cókiểu number
Toántử • Cáctoántửvàcáchsửdụngtoántửgiốngnhưcácngônngữ Java, C, PHP
Cấutrúcđiềukhiển • if... else • switch ... case Hoàntoàntươngtự C, PHP
Hàm • Hàmxâydựngsẵn • Hàm do ngườidùngtạo function TenHam(Cácthamsố) { cácmệnhđề JS } Nếucókếtquảtrảvềsửdụngtừkhóareturn
4. Objects, Events và DOM • Objects • Toántử "new" • DOM • Mảng • Events: onClick, onSubmit, onMouseOver, onMoveOut, onBlur, onSubmit..
Objects • Object làtậphợpcácbiến(parameter) vàcáchàm (method) • Cúphápsửdụng object: object.parameterhoặcobject.method() • VD: mộtchuỗilàmộtđốitượngtrong JavaScript vớimộtsốbiếnvàphươngthức varStringVar = new String("This is a string"); var x = StringVar.length; StringVar = StringVar.toUpperCase();
Toántử new • Các object đểsửdụngđượctrongchươngtrình JavaScript thìcầnphảiđượctạora • Đểtạo object sửdụngtừkhóa “new” Cấutrúcchungnhưsau: o = new Object(); Đốitượng o nàysẽcómọibiến (parameter) vàphươngthứccủa object gốc Object.
Document Object Model (DOM) • Trìnhduyệtcungcấpchochúngtamộtloạtcác object. • Cửasổtrìnhduyệtđượcgọilàđốitượng window. • Trang HTML đượchiểnthịbởitrìnhduyệtđượcgọilàđốitượngtàiliệu. • Đốitượngtàiliệulàđốitượngsửdụngthườngxuyênnhấttrong JavaScript phía client.
Document Object Model (DOM) • Cácthànhphần HTML làsựmởrộngcủahệthốngphâncấp object. • VD: đốivớithànhphần FORM • window.document.forms[0]: form đầutiêntrongtrang • window.document.Form1: form cótên Form1 • window.document.Form1.firstname.value: lấygiátrịtrong textbox cótênfirstnametrong Form1
Array • Tươngtựnhưtrongcácngônngữlậptrìnhkhác • Vídụ: var a = new Array(); //tạo 1 array tên a a[0] = 1.2; //truysuấtphầntửđầutiên a[1] = “JavaScript”; //truysuất pt thứhai • Nhiềuthànhphầncủa DOM đượcthựcthidướidạng array như forms, images vàcácthànhphầnkhác.
Events • Event làmột “nútnhấn” (trigger) gọiđếnmộtchứcnăngnàođó. Mộtchươngtrình JavaScript sẽkhôngchạynếukhôngcó event. • Event cóthểlànhấnmộtnút, đưa con trỏchuộtlên 1 hìnhảnh, đưa con trỏvào textbox… • Mộtsố event thườngdùngnhư: onClick(), onSubmit(), onMouseOver()….
Events • onClick(): xảyrakhinhấnmột button, checkbox, radio button. <input type="button" value="Click me" onClick="window.alert('Xinchaomoinguoi');" />
onSubmit(): • sựkiệnxảyrakhingườidùng submit 1 form. • thườngdùngchoviệckiểmtratínhhợplệcủadữliệukhinhậpvào form • VD: <form action=“xuly.php” onSubmit=“return checkform();”> Khingườidùng click vàonút submit, nósẽgọihàmcheckform, nếucheckform() trảvề true, dữliệu form sẽđượcgởiđếntrang xuly.php. Ngượclạidữliệusẽkhônggởiđi.
onMouseOver(): event xảyrakhingườidùngđưachuộtvàomột link hay 1 vùng link • onMouseOut(): event xảyrakhingườidùngđưachuộtrakhỏimột link hay 1 vùng link • onFocus(): event xảykhikhingườidùng tab hay click vàomột textbox, textarea hay FileUpload <input type=“text” name=“month” onFocus=“window.alert(‘Nhapvaothangtu 01 den 12’);” />
onBlur(): khingườidùngrờikhỏi text box, textarea hay FileUpload • onChange(): khingườidùngrờikhỏi text box, textarea hay FileUploadvàlàmnội dung thayđổi Lưu ý: khôngnênsửdụngonBlur() vàonChange() đồngthờinhưvậysẽgâyrađụngđộ (conflic)
onLoad(): sựkiệnxảyrakhitrìnhduyệt load xong 1 trang • onUnLoad(): sựkiệnxảyrakhichuyểnđến 1 trangtàiliệumới. Vídụ: khi click vàonút Back củatrìnhduyệt hay click vàoliênkếtmởratrangmới.
JavaScript cócác object đượcxâydựngsẵn • String • Math • Date • Array
5. Alert, Promtvà Confirm • Alert, Promtvà Confirm làcácphươngthứccủađốitượng window nhằmtạoracáchộpthoạibêntrongcửasổ. • Alert: sửdụngwindow.alert(message), message là plain text (khôngphải HTML). Hộpthôngbáochỉcó 1 nút OK VD: window.alert(“Hello world”);
Promt: window.promt(message, default): message là plain text, default làgiátrịmặcđịnhtrong textbox.
Confirm: window.confirm(question): question cũnglà plain text
6. Tạo form hiệuquả • Tạo form với Active Cursor: chọnthànhphầnđầutiênđược active, sửdụngphươngthứconFocus()
