hoc vng Slide 3 - Lm vic vi Javascript v JQuery 9 10. LM VIC VI JAVASCRIPT Cu lnh javascript: c thc hin bi trnh duyt Thc hin theo th t cu lnh getElementById (): l phng php truy cp cc yu t u tin vi ID xc nh Slide 3 - Lm vic vi Javascript v JQuery 10 document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; 11. LM VIC VI JAVASCRIPT Lnh javascript c nhm li trong du { } cc chui lnh thc hin cng nhau Slide 3 - Lm vic vi Javascript v JQuery 11 function myFunction() { document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; } 12. LM VIC VI JAVASCRIPT Truy vn ti m lnh javascript: Thc hin khai bo hm js Gn hm vi mt s kin trong HTML Slide 3 - Lm vic vi Javascript v JQuery 12 Try it 13. LM VIC VI JAVASCRIPT S kin trong javascript: L hnh ng c pht hin bi javascript Tt c cc yu t trn trang web u c s kin c kch hot bi javascript Cc s kin c thng c s dng kt hp vi cc chc nng, v cc chc nng s khng c thc hin trc khi s kin xy ra! Mt s s kin: onMouseOver, onSubmit, onFocus, onBlur, onChange, onClick, Slide 3 - Lm vic vi Javascript v JQuery 13 14. LM VIC VI JAVASCRIPT Bin trong javascritpt: c s dng gi cc gi tr hoc biu thc Mt bin phi c gn tn (v d: x, orderlist, ) Quy tc t tn bin: Bt u bng ch ci, cc k t hoc k t gch di Tn bin phn bit ch hoa v ch thng (v d: x v X l 2 bin khc nhau) Khai bo bin trong javascript v gn gi tr cho bin: Slide 3 - Lm vic vi Javascript v JQuery 14 var carname; carname=BMW"; var carname=" BMW "; 15. LM VIC VI JAVASCRIPT Javascript framework: L gii php tt nh thit k Cung cp mt s th vin c sn Bao gm cc hm c xy dng v kim tra bi nh thit k v pht trin Bao gm nhiu hm c sn v s dng c ngay Slide 3 - Lm vic vi Javascript v JQuery 15 16. JQUERY h5p://jquery.com/ h5p://www.w3schools.com/jquery/default.asp 17. JQUERY V d: ng dng jQuery n thnh phn trn trang Slide 3 - Lm vic vi Javascript v JQuery 17

If you click on me, I will disappear.

Click me away!

Click me too!

18. JQUERY Slide 3 - Lm vic vi Javascript v JQuery 18 19. JQUERY L th vin mi ca javascript D dng tip cn i vi ngi thit k Th vin JQuery lm vic vi thnh phn sau: Thnh phn HTML la chn Thnh phn HTML thao tc CSS thao tc S kin HTML Hiu ng JavaScript v hot hnh HTML DOM AJAX Utilities Slide 3 - Lm vic vi Javascript v JQuery 19 20. JQUERY Khai bo jQuery: Download Jquery: hin ti c 2 phin bn JQuery Slide 3 - Lm vic vi Javascript v JQuery 20 Truyvnvilejquery.js Cthdownloadphinbnminhttrnwebsite:h5p://jquery.com/ http://docs.jquery.com/Downloading_jQuery#Download_jQuery 21. JQUERY C php ca Jquery: Chn phn t HTML truy vn Thc hin cc " actions" ti cc phn t $:xcnhJquery (selector):truyvntithnhphnHTML AcXon:thhinhnhngtrnthnhphncchn V d: Slide 3 - Lm vic vi Javascript v JQuery 21 $(this).hide() ThchinjQuery()n,nccyuthinHTML. $(#test).hide() ThchinjQuery()n,nyutcid=test $(p).hide() ThchinjQuery()n,nttcccthnhphn

$(.test).hide() ThchinjQuery()n,nyutcclass=test $(selector).ac-on() 22. JQUERY Jquery selector : L thnh phn quan trng trong th vin Jquery Cho php la chn, thao tc ti cc thnh phn HTML nh mt nhm hay yu t duy nht C php: $() Slide 3 - Lm vic vi Javascript v JQuery 22 Jqueryselectors Giingha $("*") Lachntonbthnhphn $("p") Lachntonbthnhphn

$("p.intro") Lachntonbthnhphn

cclasslintro $("p#intro") Lachnthnhphn

uXncid=intro $(":animated") Lachntonbthnhphnhothnh $(":bu5on") Lachntonbthnhphnckiulbu5on 23. JQUERY S kin Jquery: Cc phng php x l s kin l chc nng ct li ca Jquery Slide 3 - Lm vic vi Javascript v JQuery 23

Skingimt hmcthc hinkhicskin nhnchut 24. JQUERY Mt s s kin ca Jquery: Slide 3 - Lm vic vi Javascript v JQuery 24 Skin Giingha $(document).ready(funcXon) Linkttihmskin(khivaloadxong) $(selector).click(funcXon) Linkttihmgiskinnhnchut $(selector).dblclick(funcXon) Linkttihmgiskinnhnpchut $(selector).focus(funcXon) Linkttihmgiskintrngtmca thnhphncchn $(selector).mouseover(funcXon) Linkttihmgiskinnhnmouseover 25. JQUERY Hm callback trong JQuery: c s dng ngn chn cc m tip theo c chy Hm c hiu lc khi cc hnh ng kt thc C php: V d: Slide 3 - Lm vic vi Javascript v JQuery 25 $(selector).hide(speed,callback) $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); 26. JQUERY Thao tc vi Jquery HTML: jQuery c phng php mnh m thay i v thao tc vi cc phn t HTML v thuc tnh ca chng. Slide 3 - Lm vic vi Javascript v JQuery 26 html> Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme