<Welcome>Hello everybody!</Welcome>

• To give an overview of jQuery API, using it for better coding practices, thereby enhancing productivity.

• Working with HTML, Javascript & CSS.
• Basic understanding of DOM.
• Keeping yourself awake for the next 1 hour :)

• You will learn about the hottest buzzword of today's web technologies.
• After the session, you will be able to implement jQuery in your projects.

<Intro>Let's go UnObtrusive!</Intro>

• Javascript has gained popularity from a mere validation language to a great programming force in the Web 2.0 era. Javascript combined with CSS, XML is being widely used for the development of great user interfaces and dynamic web pages.
• Just as Cross browser compatibility, one of the emerging client requirements is Unobtrusive Javascript i.e.,A website should function normally even without the use of Javascript (Graceful Degradation).
  Why?
       Because everyone does not have javascript enabled.
  Why?
  • Company firewall policies-security concerns.
  • NoScript Firefox extension-Anti XSS.
  • Many mobile devices do not support js.
  So what should I do?
  
  • Build a site that works fine even without Javascript.
  • Use Javascript to enhance the site's UX (User eXperience).

<Libraries>I want to code less, but finish my work!</Libraries>

• In today's web world where performance matters more than anything else, the buzzword heard is AJAX. Also, demand for applications with drag n drop operations ,UI animations is increasing in leaps and bounds.
  Hey Dude! I know AJAX :) It is an installable available for download from Microsoft.com. Its all about Update Panels..hehe... (Really?? Hold on!)
• Okay. But why are you telling me all this? Is it that difficult to write javascript?
  I am a super coder, I can write UnObtrusive JS, AJAX and other stuff on my own.
  Appreciated! But wait...see this demo [Disable JS in your browser and open Sparsh, compare it with this site.]
• Writing clean code in the traditional way isn't that easy. It's not impossible either. But let's make our lives easier and promise better results to our clients!
  How? Use Javascript libraries.
• "A JavaScript library is a library of pre-written JavaScript controls which allow for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies".-Wikipedia.
• What are the available javascript libraries?
  

<$>Here comes jQuery!</$>

• "jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages" - jQuery.com.
  It is basically a JavaScript framework for writing large chunks of JavaScript with few lines of code.
• Benefits:
• 5 lines of code of jQuery can perform better task than 25 lines of traditional Javascript code.
• Innumerable plugins are available(far better than Microsoft AJAX controls), which solve all your requirements.
• Simplifies AJAX development (just 5-6 lines of code!)
• Cross browser compatible (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)
• Moreover, all this can be done by a single js file which is about 19KB & its FREE!!
  (Hey! how about ASP.NET AJAX library?)
• Who is using jQuery?

<ThumbsUp>Getting Started with jQuery!</ThumbsUp>

• To start with, download jquery.js file (get the latest version, whatever it may be) and include it in your project. Add javascript reference as:
  <script src="js/jquery.js" type="text/javascript"></script>
• Check out the sample code first.
• $(document).ready() is the function that contains all your jQuery code. It is more or less similar to the window.onload function of javascript.
• The most important difference is that, window.onload executes only after all your DOM & images (including banner ads) are loaded. But $(document).ready() executes once your DOM is loaded and hence it is faster!

• jQuery Selectors are a powerful feature of the jquery framework, which help jQuery lead the race among other js frameworks.
• You can select elements by Id, CSS Class, Element name, select multiple elements at a single shot, select by hierarchy (parent,child) etc.
• Here are demos on jQuery Selectors and Core functions.

<Cool>Features...</Cool>

• DOM (Document Object Model) is nothing but a heirarchy of all the elements of a webpage. Traversing means filtering/finding the desired element out of hundreds of elements of the page.
• In client scripting, most of the time, we would need to find an element and add attributes/events to it or manipulate it. Parsing the DOM in complex pages using javascript is really cumbersome. But jQuery API makes the task very easy!
• Here is a demo on Traversing with jQuery.

• Every method within jQuery returns the query object itself, allowing you to 'chain' upon it.
• e.g., consider this code: $("#divTest").addClass("highlight").show().html("Welcome!");
  Each of the jQuery methods in the above code (addClass, show, html) return a jQuery object (here it is "divTest"). Isn't this simple?
• Here is a demo on Chainability.

<Cool>More Features...</Cool>

• After traversing and finding the desired elements in the web page, we would need to read/change its attributes.
• Similarly, we would need to change the appearance(styles) of the found elements. This can be easily achieved by jQuery's attributes & CSS API.!
• Here is a demo on accessing attributes & styles of DOM elements.

• This is nothing but changing the content of the desired element.
  
• In most cases, you would need to pull content from an external source and append the retrieved data to a container. Here, you are doing nothing but manipulating the DOM. With jQuery, you have a number of options depending on how you want to modify.
• This has lot of implications during AJAX operations...
• Here is a demo on DOM Manipulation.

<Cool>More Features...</Cool>

• Binding events to your elements the jQuery way assures UnObtrusive features to your code. No more "onclick", "onmouseover" in your HTML code. Now you can write everything in an external javscript file with much ease.
• Event handling with obsolete javascript code is one of the reasons for browser compatibility problems.
• Here is a demo on event handling using jQuery Live [It binds a handler to an event (like click) for all current - and future - matched elements].

• jQuery effects help you to enhance the UI and make it appealing to the user. You don't need heavy Flash animations on your web page to achieve basic purposes.
• They also help in utilising space on your web page effectively (e.g., the famous accordion control.)
• Here is a demo on jQuery effects.

<Cool>Now, web dev is not only for big guys!</Cool>

• This is one of the coolest features of jQuery! jQuery makes the developer's life much more easier when coming to AJAX implimentation.
• Several types of AJAX requests are possible with jQuery. e.g., Loading a remote page, HTML from a remote page, loading JSON data using an HTTP GET or POST requests etc.
• A number of AJAX events like ajaxStart, ajaxStop, ajaxSuccess, ajaxError etc give you complete control over your AJAX calls.
• Here is a very simple demo on how AJAX can be implemented using jQuery.

• "jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications". - jQueryUI.com
• You can have several client side interactions like dragging, dropping, resizing, selecting, sorting, theming and many more. (e.g.,drag/drop shopping cart)

<Beauty>jQuery Plugins - The hot cakes!</Beauty>

• Plugins are reusable javascript components built using jQuery. A jQuery plugin consists of one or more javsacript files (sometimes with CSS files).
• How to use them? Just include them in your code, like how you include normal javascript files and access the methods provided by them.
• plugins.jquery.com is a huge repository of jQuery plugins developed by developers across the world.
• Q: What can I develop using these plugins?     A: What not?
  You may use plugins for simple validations to complex DOM interactions & AJAX calls.
• Let's see some examples of these plugins:
  • The tool tip which you saw in the first page. It uses jTip plugin.
  • Table sorter plugin
  • Interactive validations
  • Few more amazing plugins

<Resources>Where can I learn more?</Resources>

• jQuery Docs
    Documentation from the official website of jQuery.
• jQuery Plugins
    Source of all jQuery plugins.
• jQuery API
    Complete cheat sheet of jQuery.
• John Resig
    jQuery's creator
• Google.  Our best friend :)
  
• Special thanks to Mr.Praveen Reddy, (Technical Architect, EUSD, Infosys) for some of the valuable demos and suggestions, without which the session would not have been interactive.
  You may get updates on latest web technologies from his Infy blog, "Praveen's world"


• Feel free to contact Praveen or me for any clarifications.
  Thank you!