1 / 35

jQuery Tutorial

jQuery Tutorial. 100610. Presenter. ㅎㅇㅎㅇ. Background Topics. HTML Javascript CSS CGI AJAX. Evolution. Javascript. A script language that interpreted by browser OOP Dynamic typing Run-time evaluation. Javascript. Cannot access host computer (except cookie) Same origin policy

soluri
Télécharger la présentation

jQuery Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. sparcs.org jQuery Tutorial 100610

  2. Presenter ㅎㅇㅎㅇ

  3. Background Topics • HTML • Javascript • CSS • CGI • AJAX

  4. Evolution

  5. Javascript • A script language that interpreted by browser • OOP • Dynamic typing • Run-time evaluation

  6. Javascript • Cannot access host computer (except cookie) • Same origin policy • Non-persistence • Cannot access history object • Cannot write the value of file upload field

  7. Javascript • Javascript is not a good language design(??) • Writing Javascript code is tedious, time-consuming, and error-prone (really??) • Browser compatibility • AJAX

  8. Alternatives • jQuery • Mootools • Prototype • YUI

  9. jQuery • jQuery is a new kind of JavaScript libraryjQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

  10. Presenter 공부해봅시다 ㅋㅋ

  11. jQuery • Only jquery.js file is needed <html> <head> <script type="text/javascript“ src="http://code.jQuery.com/j query-latest.min.js"></script> <script type="text/javascript“ src=“jquerypractice.js”> </script> </head> <body> <!--Your body content here… --> </body> </html> • What is jquery.js?

  12. jQuery • Print Hello jQuery <!—body part of the html file --> <body> <div id=“hello”>Hello, World!</div> </body> //jQuerypractice.js file $(document).ready(function(){ $(“#hello”).html(“Hello, jQuery!”); });

  13. jQuery Core • jQuery( selector, [ context ] ) : Accepts a string containing a CSS selector which is then used to match a set of elements and returns a jQuery object. • jQuery( element ) • jQuery( elementArray ) • jQuery( jQuery object ) • jQuery() • can be written as $()

  14. js $(document).ready(function(){ $(“#hello”).html(“Hello, jQuery!”); }); jQuery Events • .ready( handler ) : execute handler when the DOM is fully loaded. js function printhello(){ $(“#hello”).html(“Hello, jQuery!”);} $(document).ready(printhello()); • Same as window.onload???

  15. jQuery Events • .bind() • .blur() • .change() • .click() • .focus() • .hover() • .select() • .toggle() • .trigger() • .submit() • .mousedown() • .mouseenter() • .mouseleave() • .keypress() • .keyup()

  16. jQuery Events $(document).keyup(function(event){ switch(event.which){ case 32: alert(“32 pressed”); break; } }); • event.preventDefault() • event.stopPropagation()

  17. jQuery Selectors • follows CSS1~3 Selectorshttp://www.w3.org/TR/css3-selectors • :animated • :has() • :gt()

  18. jQuery Attributes • .addClass() • .removeClass() • .hasClass() • .toggleClass() • .attr() • .removeattr() • .val() • .html()

  19. jQuery Each • .each() : Iterate over a jQuery object, executing a function for each matched element. html js <ul> <li>garbage</li> <li>food</li> <li>abroad</li> </ul> $(document).ready(function(){ $('li').each(function(index) { alert(index + ': ' + $(this).text()); }); });

  20. jQuery Traversing • .add() • .children() • .contents() • .filter() • .find() • .next() • .not() • .prev()

  21. jQuery Manipulations • .append() • .appendTo() • .clone() • .detach() • .insertAfter() • .insertBefore() • .remove()

  22. jQuery CSS • .css() • .height() • .width() • .position() • .offset() • .scrollTop() • .scrollLeft()

  23. jQuery Effect • .animate() js $(document).ready(function(){ $(".block").css({ 'position': 'absolute', 'backgroundColor': "#abc", 'left': '100px', 'width': '90px', 'height': '90px', 'margin': '5px' }); $("#left").click(function(){ $(".block").animate({left: "-=50px"}, "slow"); }); $("#right").click(function(){ $(".block").animate({left: "+=50px"}, "slow"); }); }); html <button id="left">left</button> <button id="right">right</button> <div class="block"></div>

  24. jQuery Effect • .fadeIn() • .hide() • .show() • .toggle()

  25. jQuery AJAX • jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] ) Returns: XMLHttpRequest • jQuery.post() • jQuery.getJSON() • .load() • jQuery.getScript()

  26. 만들자 Does ‘username’ exist? yes/no jQuery username SPARCS server check… print HTML

  27. jQuery AJAX html CGI <div id="user_check"> <input id="username" type="text"></input> <input id="username_submit" type="button" value="submit"></input> <p id="check_result"></p> </div> #! /usr/bin/python import cgi import os form = cgi.FieldStorage() print "Content-Type: text/html\n\n“ username = form.getvalue('username', '1') if os.path.exists("/home/“ + username + "/"): print "exists" else: print "not exists" js $(document).ready(function(){ $("#username_submit").click(function(){ $.get('jqtest.cgi', {"username" : $("#username").val()}, function(data){ $('#check_result').html(data); }); }); });

  28. Data transfer & save • XML (xPath) • JSON • HTML • Cookie • window object

  29. jQuery Plug-in • http://plugins.jquery.com/

  30. Presenter 거의끝났음!! 개발하며 생각해야할점…

  31. Let’s consider… • What does jQuery(JS) do? • Fat client vs Thin client

  32. Let’s consider… • Separate all layers!!! • No event handler in HTML template • No <a href=“#” …> • location.replace() instead of location.href • Users don’t like popup

  33. Accessibility • What if javascript is not available? • screen reader

  34. Homework • look Gmail • 단축키로 커서를 움직일 때 마다 auto scrolling, focusing을 하는 스크립트를 작성 해 보자.

  35. sparcs.org Thank You !

More Related