Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
Ajax.Request
, Scriptaculous Effect
/ Sortable
/ Draggable
var name = { fieldName: value, ... fieldName: value };
var pt = { x: 4, y: 3 }; alert(pt.x + ", " + pt.y);
Point
object; it has fields named x
and y
typeof(pt) === "object"
new Ajax.Request("http://example.com/app.php", { method: "get", // an object with a field named method (String) onSuccess: ajaxSuccess // and a method named onSuccess } ); $("my_element".fade( { duration: 2.0, // an object with 3 fields named: from: 1.0, // duration, from, and to (Number) to: 0.5 } );
{}
passed to Prototype/Scriptaculous were actually anonymous objectsvar name = { ... methodName: function(parameters) { statements; } };
var pt = {
x: 4, y: 3,
distanceFromOrigin: function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
};
alert(pt.distanceFromOrigin()); // 5
this
this
keyword is mandatory in JSWhat if we want to create an entire new class, not just one object?
// Creates and returns a new Point object. (This is bad code.)
function constructPoint(xValue, yValue) {
var pt = {
x: xValue, y: yValue,
distanceFromOrigin: function() {
return Math.sqrt(this.x * this.x + this.y * this.y;
}
};
return pt;
}
var p = constructPoint(4, -3);
new
syntax we're used to
// Constructs and returns a new Point object.
function Point(xValue, yValue) {
this.x = xValue;
this.y = yValue;
this.distanceFromOrigin = function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
};
}
var p = new Point(4, -3);
new
, JavaScript does the following:
this
within the function
new
?
var p = Point(4, -3);
// Constructs and returns a new Point object.
function Point(xValue, yValue) {
this.x = xValue;
this.y = yValue;
this.distanceFromOrigin = function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
};
}
Point
object has its own entire copy of the distanceFromOrigin
code
Object.prototype
String.prototype
, etc.
undefined
.
// also causes Point.prototype to become defined
function Point(xValue, yValue) {
...
}
Point
constructor, that creates a Point.prototype
Point
object will use Point.prototype
new
, JavaScript does the following:
this
// adding a method to the prototype
className.prototype.methodName = function(parameters) {
statements;
}
Point.prototype.distanceFromOrigin = function() { return Math.sqrt(this.x * this.x + this.y * this.y); };
x
and y
fields in Point.prototype
?
distance
and toString
methods.
Point
prototype methods// Computes the distance between this point and the given point p. Point.prototype.distance = function(p) { var dx = this.x - p.x; var dy = this.y - p.y; return Math.sqrt(dx * dx + dy * dy); }; // Returns a text representation of this object, such as "(3, -4)". Point.prototype.toString = function() { return "(" + this.x + ", " + this.y + ")"; };
Point
code could be saved into a file Point.js
toString
method works similarly as in Java// add a 'contains' method to all String objects String.prototype.contains = function(text) { return this.indexOf(text) >= 0; }; // add a 'lightUp' method to all HTML DOM element objects HTMLElement.prototype.lightUp = function() { this.style.backgroundColor = "yellow"; this.style.fontWeight = "bold"; };
reverse
method to strings.
shuffle
method to arrays.
moviegallery.html
to list your favorite movies.
Movie
:
Movie(title, genre, rating)
- constructor.createHTML()
- Creates and returns an HTML DOM object representing a div
holding the HTML for this movie.
<div class="movie"> <button class="delete">X</button> <p class="title">Indiana Jones 4</p> <p class="genre">Action/Adventure</p> <p class="rating">3/5</p> </div>
deleteMe()
- Removes the movie from the page.
function SuperClassName(parameters) { // "superclass" constructor
...
};
function SubClassName(parameters) { // "subclass" constructor
...
};
SubClassName.prototype = new SuperClassName(parameters); // connect them
SubClassName.prototype = SuperClassName.prototype; // connect them
// Constructor for Point3D "class" function Point3D(x, y, z) { this.x = x; this.y = y; this.z = z; }; Point3D.prototype = new Point(0, 0); // set as "subclass" of Point // override distanceFromOrigin method Point3D.prototype.distanceFromOrigin = function() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); };
super
keyword
Class.create
method makes a new class of objects
className = Class.create({
// constructor
initialize : function(parameters) {
this.fieldName = value;
...
},
methodName : function(parameters) {
statements;
},
...
});
initialize
functionClass.create
examplePoint = Class.create({ // Constructs a new Point object at the given initial coordinates. initialize: function(initialX, initialY) { this.x = initialX; this.y = initialY; }, // Computes the distance between this Point and the given Point p. distance: function(p) { var dx = this.x - p.x; var dy = this.y - p.y; return Math.sqrt(dx * dx + dy * dy); }, // Returns a text representation of this Point object. toString: function() { return "(" + this.x + ", " + this.y + ")"; } });
className = Class.create(superclass, { ... });
// Points that use "Manhattan" (non-diagonal) distances. ManhattanPoint = Class.create(Point, { // Computes the Manhattan distance between this Point and p. // Overrides the distance method from Point. distance: function(p) { var dx = Math.abs(this.x - p.x); var dy = Math.abs(this.y - p.y); return dx + dy; }, // Computes this point's Manhattan Distance from the origin. distanceFromOrigin: function() { return this.x + this.y; } });
$super
name: function($super, parameters) { statements; }
ManhattanPoint3D = Class.create(ManhattanPoint, {
initialize: function($super, initialX, initialY, initialZ) {
$super(initialX, initialY); // call Point constructor
this.z = initialZ;
},
// Returns 3D "Manhattan Distance" from p.
distance: function($super, p) {
var dz = Math.abs(this.z - p.z);
return $super(p) + dz;
},
});
$super
in codeClass.create
method to make the Movie
type.
FancyMovie
that displays its movie ratings as star images rather than just showing a number on the page.