• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
handout-05b
 

handout-05b

on

  • 744 views

 

Statistics

Views

Total Views
744
Views on SlideShare
744
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    handout-05b handout-05b Presentation Transcript

    • Website Construction Client-side programming with JQuery Frédéric Haziza <daz@it.uu.se> Department of Computer Systems Uppsala University Summer 2009
    • JavaScript allows developers to create rich and interactive web interfaces establish asynchronous communication with servers for constantly up-to-date data without a page refresh. 2 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Javascript tutorial 3 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Javascript library Write less, do more. JQuery / JQuery UI MooTools Scriptaculous / Prototype Element selection Dojo DOM manipulation Yahoo! UI Library (YUI) AJAX MochiKit ... ?? ... 4 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Loading jQuery <html> <head> ... < s c r i p t t y p e=" t e x t / j a v a s c r i p t " s r c=" p a t h / t o / j q u e r y . j s "></ s c r i p t> ... < s c r i p t t y p e=" t e x t / j a v a s c r i p t "> // Your c o d e h e r e </ s c r i p t> </ head> <body> <!−− y o u r c o n t e n t −−> </ body> </ html> 5 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Usally, most programmers end up testing: <html> <head> ... < s c r i p t t y p e=" t e x t / j a v a s c r i p t "> window . o n l o a d = f u n c t i o n ( ) { a l e r t ( ’ Hello world ! ’ ) ; } </ s c r i p t> </ head> <body> <!−− y o u r c o n t e n t −−> </ body> </ html> 6 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Loading jQuery <html> <head> ... < s c r i p t t y p e=" t e x t / j a v a s c r i p t " s r c=" p a t h / t o / j q u e r y . j s "></ s c r i p t> ... < s c r i p t t y p e=" t e x t / j a v a s c r i p t " s r c = ’ ’ mycode . j s ’ ’></ s c r i p t> </ head> <body> <!−− y o u r c o n t e n t −−> </ body> </ html> 7 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Saving bandwidth Instead of loading from your own server, get it from google. http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js Readable Non-readable 8 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • JQuery - Documentation Homepage Online docs 9 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Old style <script type="text/javascript"> function notEmpty(){ var myTextField = document.getElementById(’myText’); if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") } </script> <input type=’text’ id=’myText’ /> <input type=’button’ value=’Form Checker’ /> onclick=’notEmpty()’ /> 10 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Simple with JQuery Problem Need to wait for the document to be ready Solution JQuery: Event handler waits for the document to be ready. $(document).ready(function() { // do stuff when DOM is ready }); What is the DOM? 11 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • Example HTML <a href=’’http://jquery .com’’>Visit Us</a> JQuery $ ( document ) . r e a d y ( f u n c t i o n ( ) { $( "a" ) . c l i c k ( f u n c t i o n ( ) { a l e r t ( " Hello world ! " ) ; }) ; }) ; $(“a”) selects all a elements. This code binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs. 12 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • The magic $ $(’a’); All anchors in the document (CSS/XPath) $(’div.container’); All divs with a container class (CSS) $(’div[@class=codeSnippet]/code’); All code elements that are direct children of divs in the document with the class ’codeSnippet’. (XPath) As of version 1.2, XPath syntax has been separated out in its own plugin (reducing the footprint, i.e smaller file size) 13 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • The magic $ $( selector, [context] ); The selector can be a CSS selector or an XPath query. The context limits the scope of the search. Note that it returns an object which represent all matching elements. JQuery selectors 14 WebConst’09 | Website Construction (Client-side programming with JQuery)
    • JQuery Effects JQuery effects online demo 15 WebConst’09 | Website Construction (Client-side programming with JQuery)