LOGO sparcs.org 1 jQuery Tutorial

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 library jQuery 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 <script type="text/javascript“ src=" query-latest.min.js">  What is jquery.js?

12 jQuery  Print Hello jQuery Hello, World! //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 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??? js $(document).ready(function(){ $(“#hello”).html(“Hello, jQuery!”); });

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 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 garbage food abroad js $(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() html left right 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"); });

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

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

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

27 jQuery AJAX html js $(document).ready(function(){ $("#username_submit").click(function(){ $.get('jqtest.cgi', {"username" : $("#username").val()}, function(data){ $('#check_result').html(data); }); #! /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" CGI

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

29 jQuery Plug-in 

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  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 을 하는 스크립트를 작성 해 보자.

LOGO sparcs.org 35