Download
1 / 35
350 likes | 362 Views
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
E N D
sparcs.org jQuery Tutorial 100610
Presenter ㅎㅇㅎㅇ
Background Topics • HTML • Javascript • CSS • CGI • AJAX
Javascript • A script language that interpreted by browser • OOP • Dynamic typing • Run-time evaluation
Javascript • Cannot access host computer (except cookie) • Same origin policy • Non-persistence • Cannot access history object • Cannot write the value of file upload field
Javascript • Javascript is not a good language design(??) • Writing Javascript code is tedious, time-consuming, and error-prone (really??) • Browser compatibility • AJAX
Alternatives • jQuery • Mootools • Prototype • YUI
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.
Presenter 공부해봅시다 ㅋㅋ
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?
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!”); });
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 $()
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???
jQuery Events • .bind() • .blur() • .change() • .click() • .focus() • .hover() • .select() • .toggle() • .trigger() • .submit() • .mousedown() • .mouseenter() • .mouseleave() • .keypress() • .keyup()
jQuery Events $(document).keyup(function(event){ switch(event.which){ case 32: alert(“32 pressed”); break; } }); • event.preventDefault() • event.stopPropagation()
jQuery Selectors • follows CSS1~3 Selectorshttp://www.w3.org/TR/css3-selectors • :animated • :has() • :gt()
jQuery Attributes • .addClass() • .removeClass() • .hasClass() • .toggleClass() • .attr() • .removeattr() • .val() • .html()
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()); }); });
jQuery Traversing • .add() • .children() • .contents() • .filter() • .find() • .next() • .not() • .prev()
jQuery Manipulations • .append() • .appendTo() • .clone() • .detach() • .insertAfter() • .insertBefore() • .remove()
jQuery CSS • .css() • .height() • .width() • .position() • .offset() • .scrollTop() • .scrollLeft()
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>
jQuery Effect • .fadeIn() • .hide() • .show() • .toggle()
jQuery AJAX • jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] ) Returns: XMLHttpRequest • jQuery.post() • jQuery.getJSON() • .load() • jQuery.getScript()
만들자 Does ‘username’ exist? yes/no jQuery username SPARCS server check… print HTML
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); }); }); });
Data transfer & save • XML (xPath) • JSON • HTML • Cookie • window object
jQuery Plug-in • http://plugins.jquery.com/
Presenter 거의끝났음!! 개발하며 생각해야할점…
Let’s consider… • What does jQuery(JS) do? • Fat client vs Thin client
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
Accessibility • What if javascript is not available? • screen reader
Homework • look Gmail • 단축키로 커서를 움직일 때 마다 auto scrolling, focusing을 하는 스크립트를 작성 해 보자.
sparcs.org Thank You !
