Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp, Jessica Miller, and Jim George, and are licensed under the Creative Commons Attribution 2.5 License.
You have already used many types of JavaScript objects:
Ajax.Request
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
new Ajax.Request( "http://example.com/app.php", { method: "get", onSuccess: ajaxSuccess } ); new Effect.Opacity("my_element", { duration: 2.0, from: 1.0, to: 0.5 } );
{}
that you passed to Prototype and Scriptaculous were actually anonymous objectsvar name = { ... methodName: function(parameters) { statements; }, ... };
var pt = {
x: 4,
y: 3,
distanceFromOrigin: function() {
return this.x * this.x + this.y * this.y;
}
};
alert(pt.distanceFromOrigin()); // 5
this
this
keyword is mandatory in JS
What if we want to create an entire new class, not just one new object?
(so that we could say new Point()
)
// constructor function className(parameters) { this.fieldName = value; ... this.fieldName = value; } // adding a method to the prototype className.prototype.methodName = function(parameters) { statements; }
this
// Constructs a new Point object at the given initial coordinates. function Point(initialX, initialY) { this.x = initialX; this.y = initialY; } // 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 Point object. Point.prototype.toString = function() { return "(" + this.x + ", " + this.y + ")"; };
Point.js
toString
method works similarly as in Javamoviegallery.html
page to create a list of favorite movies. Create a new type called Movie
. A Movie
object should contain:
Movie(title, genre, rating)
- constructor.createHTML()
- Creates and returns an HTML DOM object representing a div
holding the HTML for this movie. Sample HTML:
<div class="movie_container"> <button class="delete_button">X</button> <div class="title">Indiana Jones 4</div> <div class="genre">Action/Adventure</div> <div class="rating">3/5</div> </div>
getRatingDisplay()
- Returns an HTML DOM object representing the div
in which to display this movie's rating. Sample HTML:
<div class="rating">3/5</div>
deleteMe()
- Removes this movie from the page.Class.create
method makes a new class of objectsclassName = Class.create({ // constructor initialize : function(parameters) { this.fieldName = value; ... }, functionName : 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;
},
// Overrides Point's toString method.
toString: function() {
return "(" + this.x + ", " + this.y + ", " + this.z + ")";
}
};
$super
in code
Modify the movie gallery code from the last practice problem so that it uses Prototype's Class.create
method to make the Movie
type.
Once this is done, add a new subtype FancyMovie
that displays its movie ratings as star images rather than just showing a number on the page.