jquery tutorial
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
sparcs.org
1
LOGO
jQuery Tutorial100610
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
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.
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
jQuery Events
.ready( handler ) : execute handler when the DOM is fully loaded.
jsfunction 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 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
<ul> <li>garbage</li> <li>food</li> <li>abroad</li></ul>
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
<button id="left">left</button> <button id="right">right</button><div class="block"></div>
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"); });
});
25
jQuery AJAX
jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] ) Returns: XMLHttpRequest
jQuery.post()
jQuery.getJSON()
.load()
jQuery.getScript()
26
만들자
jQuery
HTMLSPARCS serverusername
Does ‘username’ exist?
yes/no
check…print
27
jQuery AJAX
html<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>
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
29
jQuery Plug-in
http://plugins.jquery.com/
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
34
Homework
look Gmail
단축키로 커서를 움직일 때 마다 auto scrolling, focusing을 하는 스크립트를 작성 해 보자 .
sparcs.org
35
LOGO