Advanced JavaScript and

jQuery
Topics
• JavaScript pseudo-classes, prototypes, and object-oriented design

• JavaScript frameworks such as jQuery

• How to post files asynchronously with JavaScript

• How jQuery can be used to animate page element

JavaScript Pseudo-Classes

• Although JavaScript has no formal class mechanism, it does support objects

(such as the DOM).

• You define pseudo-classes through a variety of interesting and nonintuitive

syntax constructs.

• Many common features of object-oriented programming, such as inheritance

and even simple methods, must be arrived at through these nonintuitive
methods.
Benefits of using object-oriented design in your JavaScript include
• Increased code reuse,
• Better memory management
• Easier maintenance.
• From a practical perspective, almost all modern frameworks (such as jQuery
and the Google Maps API) use prototypes to simulate classes
How to mimic class features?
Creation of a simple prototype to represent a single die object.
• Using Object Literals:
var oneDie = { color : "FF0000", faces : [1,2,3,4,5,6] };
oneDie.color="0000FF";

• Emulate Class through Functions:

function Die(col)
{
this.color=col;
this.faces=[1,2,3,4,5,6];
}
var oneDie = new Die("0000FF");
Adding Methods to the Object:
• To define a method in an object’s function one can either define it internally, or use a
reference to a function defined outside the class.
• External definitions can quickly cause namespace conflict issues, since all method names
must remain conflict free with all other methods for other classes.
• For this reason, one technique for adding a method inside of a class definition is by assigning
an anonymous function to a variable.
jQuery

• Developed in 2005 by John Resig at Rochester Institute of Technology.

• jQuery is a lightweight JavaScript library that emphasizes interaction

between JavaScript and HTML.

• Helps web developers to create simple pieces of interaction without

being forced to write long, complex, book-length pieces of code.
The jQuery library contains the following features:

• HTML element selections

• HTML element manipulation

• CSS manipulation

• HTML event functions

• JavaScript Effects and animations

• HTML DOM traversal and modification

• AJAX
Basic syntax is:
$(selector).action()
 A dollar sign to define jQuery
 A (selector) to "query" HTML elements
 A jQuery action() to be performed on the element(s)

Examples:
 $(this).hide() - hides current element.
 $("p").hide() - hides all paragraphs
 $("p.test").hide() hides all paragraphs with - class="test“
 $("#test").hide() hides the element with id="test“
Selectors
jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

• $("*") Universal selector matches all elements (and is slow).

• $("tag") Element selector matches all elements with the given element name.

• $(".class") Class selector matches all elements with the given CSS class.

• $("#id") Id selector matches all elements with a given HTML id attribute.

For example, to select the single element with id="grab" you would write:

var singleElement = $("#grab")

Thank You