Use+jQuery+to+teach+interactively

=jQuery?=

jQuery is a javascript library which has for slogan "write less, do more". You can use jQuery to manipulate any html document and create great looking effects with only a few lines of code. The website is jquery.com.

Though alternative frameworks exist, jQuery has become the most popular, due to its ease of use combined with great cross browser compliance and excellent performance. With each release, major performance improvements have been made while keeping the minimized and gzipped version under 20K. It is slowly becoming an unofficial standard as most major web development environments provide out of the box support for jQuery. Google uses it, and even hosts it for you. Dell, Digg, Wordpress, Mozilla and many others use it too. Microsoft is shipping jQuery with Visual Studio. Adobe is shipping it with the latest version of Dreamweaver.

What really makes jQuery unique is its plugin system and the ease there is to extend the core library to provide advanced functionalities. This has encouraged and facilitated community contributions, as shown in the jquery plugins repository. You can find easy to re-use plugins for form validation, galleries, field hints, animation, and pretty much everything as shown on this page. Not just plugins. Over time, a large eco-system has developed around the library, with the availability of tutorials, books, sample code, reviews, etc.

=Environments to learn jQuery=


 * The simplest text editor will do but code editors tend to make your life easier with code coloring and other functionalities. Some of the most popular ones are Aptana Studio, Komodo Edit. Both free to use.
 * The Firefox browser with Firebug installed or the Safari browser with the developer toolbar enabled.

=Using jQuery=

To use jQuery, you need to load the library into the webpage.

If you are connected to the internet, the best way to do this is by loading it from google CDN (Content Distribution Network) that provides very fast loading of the library, faster than your server can. Moreover, as other developers use this service, the jquery library is likely to already be in the browser cache, making it unnecessary to download it again, making for an even better performance. code format="html4strict"  code To use a less specific version would increase the odds of it already being in the cache. One drawback to consider, howevr, is that when a new version comes out your users will start using it without giving you a chance to do any testing. code format="html4strict"   code

=Simple Example= Create a file in a text editor or code editor. Name it example1.html. Paste this code. Double click on the html file to open it up in your default browser.

code format="html4strict" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  Example 1

This is a paragraph

  $('red-paragraph').css('background-color', 'red');

code $('p') will select all paragraphs elements on the page, as marked by the tag. $('p').css will apply some CSS to each one of these elements. Here we set the background-color of the paragraph element to red.

Example 1 media type="custom" key="9198528"

If you choose to load the jQuery library in the head of the document, you have to make sure to use $(document).ready construct to make sure that this code gets executed only after the DOM (html document) has been parsed. Otherwise, there is no paragraph yet in the page at the time the css change is applied. More information in this blog post introducing document ready. code format="html4strict" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   Example 1

This is a paragraph

 $(document).ready(function {       $('.red-paragraph').css('background-color', 'red');    }); code

=Publishing jQuery code on the web=
 * [|jsdo.it] a community website where you can write, fork, share code that embeds javascript, jquery, html5 and css. A code editor is embedded into the webpage. All you need is to start typing.
 * [|jsfiddle] jsFiddle is an online editor for the web. Javascript libraries like MooTools, jQuery, Prototype, YUI, Glow and Dojo are available to use, and besides them, you can edit and save HTML and CSS snippets.
 * dropbox and droppages Dropbox is a web utility designed for backing up the files on your computer and for sharing files. But it can also be used for hosting simple websites made of nothing more than html, css, and javascript.
 * wikispaces, using other widget. Go to your wikispace and click the TV icon. > Select "Other HTML" > Copy the HTML code from your clipboard. > Click Save to save the widget. > Click Save to save the page. Information provided in this blog post on using jQuery in (wikispaces) addons.

=Sites to learn jQuery=
 * [|Learning jQuery] (blog)
 * jQuery fundamentals and the github repository for the example code - Licensed by Rebecca Murphey under the Creative Commons Attribution-Share Alike 3.0 United States license.
 * jQuery tutorials for beginners - contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

=Re-using plugins=


 * [|6 jQuery Plugins to use within your content in a Learning Management System]

Using jQuery as an app scripting language

 * [|Using jQuery in captivate]

Writing plugins

 * [|Step by Step to create jQuery plugin]

HTML 5
[|Get familiar with HTML5!]