1 / 19

Introducing jQuery

Dylan Beattie www.dylanbeattie.net/jquery/. Introducing jQuery. Who am I?. I’m not a web designer – I’m a programmer. I’m not a Javascript or jQuery guru But I don’t need to be – that’s John Resig’s job I’m just someone who writes web pages

gyula
Download Presentation

Introducing jQuery

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. Dylan Beattie www.dylanbeattie.net/jquery/ Introducing jQuery

  2. Who am I? • I’m not a web designer – I’m a programmer. • I’m not a Javascript or jQuery guru • But I don’t need to be – that’s John Resig’s job • I’m just someone who writes web pages • I want to add drag’n’drop, ajax, animation and other neat usability enhancements • I want the underlying markup to stay clean, minimalist and meaningful • I don’t have time to master the quirks of four different browsers

  3. What isjQuery? • An object-oriented Javascript framework • Written inJavascriptfor Javascript • Delivered alongside your HTML pages • Runs inside your browser • Provides elegant, powerful methods for adding interactive behaviour to web pages • Handles all the weird cross-browser stuff for you so you can get on with your job

  4. Why should you care? • Usability benefits of rich interfaces and AJAX • Achieve in a few lines of code what used to require a dedicated front-end developer. • “Web 2.0” sites raising clients’ and users’ expectations. • Syntax based on web standards (CSS) • Already part of ASP.NET MVC • Will be included in VS2010

  5. What about Flash / Silverlight? • jQuery provides a rich framework on top of HTML and CSS • Underlying content is still text/html • Accessible – screen readers & mobile devices • Discoverable ( = “Googlability”) • Maintainable – code in your favourite editor • Use progressive enhancement • Deliver basic pages to basic devices • Inject rich behaviour on supported clients. • Aka “code on demand” if REST is your thing.

  6. Getting Started • Download jQuery from jquery.com • Latest version 1.3, released last week. • Link to it from your <head /> section • That’s it. • Intellisense code completion is available in VS2008 • You’ll need Visual Studio 2008 with SP1 • And the VS2008 Hotfix • And the jquery-1.3-vsdoc.js file • Links are on my blog

  7. “Hello, World” in jQuery <html> <head> <title>jQuery Demo</title> </head> <bodystyle=“display: none; font-size: 300%;"> <!-- notice the body is empty... --> </body> </html>

  8. “Hello, World” in jQuery <html> <head> <title>jQuery Demo</title> <scriptsrc=“jquery-1.3.js"type="text/javascript"></script> </head> <bodystyle=“display: none; font-size: 300%;"> <!-- notice the body is empty... --> </body> </html>

  9. “Hello, World” in jQuery <html> <head> <title>jQuery Demo</title> <scriptsrc=“jquery-1.3.js"type="text/javascript"></script> <scripttype="text/javascript"> $(document).ready(function() { $("body") .html("<h1>Hello, World!</h1>") .fadeIn(2500); }); </script> </head> <bodystyle=“display: none; font-size: 300%;"> <!-- notice the body is empty... --> </body> </html> Run the demo...

  10. Building Interactive Pages • Wait until something happens • Find (or create) an element on the page • Do something interesting with it That’s all.

  11. 1. Wait until something happens • jQuery provides consistent, normalized event handlers across multiple browsers • Mouse and keyboard events • click, dblclick, focus, hover, keypress • Special events • ready() event – fires once when the document is initialized • Callback events from animations and ajax requests.

  12. 2. Find an element in the page • The “Query” part of jQuery • Replaces JS methods like document.getElementById() • Syntax based on CSS 2 & 3 • CSS : “make that paragraph blue” • jQuery : “make that paragraph dance”

  13. Selectors - Examples

  14. Example – Selectors and Event Handlers http://localhost:1985/example01.html Followed by demo – refactoring verbose jQuery to idiomatic jQuery – aka “how to reduce this example to 4 lines of code”

  15. 3. Do something cool with it. • Manipulate attributes and HTML directly • .css(), .addClass(), .removeClass() let you modify the appearance of your page • .append(), .prepend() allow you to insert new HTML elements • Use jQuery’s built-in effects library • fade, slideDown, slideUp, show, hide, toggle, animate • Initiate an AJAX request • And then do something interesting with the results

  16. ASP.NET MVC with JSON – Client • jQuery has a built-in getJSON() method $.getJSON( “/Film/JsonData”,{ filmId: 12 }, function(filmData) { // do something clever // with jsonData here });

  17. ASP.NET MVC with JSON - Server • ASP.NET MVC has built-in object  JSON serialization support public ActionResultJsonData(intfilmId) { Film film = FilmRepository.Load(filmId); return(new JsonResult() { Data = film;ContentType = “application/json” }); }

  18. Example – JSON Callbacks with ASP.NET MVC http://localhost:1985/example02.html

  19. Links & Follow-Up www.dylanbeattie.net/jquery/

More Related