Except where otherwise noted, the contents of this document are
Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst.
All rights reserved.
Any redistribution, reproduction, transmission, or storage of part
or all of the contents in any form is prohibited without the author's
expressed written permission.
10.1: Prototype
10.1: Prototype
10.2: Scriptaculous
Problems with JavaScript
JavaScript is a powerful language, but it has many flaws:
the DOM can be clunky to use
the same code doesn't always work the same way in every browser
code that works great in Firefox, Safari, ... will fail in IE and vice versa
many developers work around these problems with hacks (checking if browser is IE, etc.)
elements with same parent
as this one (not text nodes)
// alter siblings of "main" that do not contain "Sun"
var sibs = $("main").siblings();
for (var i = 0; i < sibs.length; i++) {
if (sibs[i].innerHTML.indexOf("Sun") < 0) {
sibs[i].innerHTML += " Sunshine";
}
}
Prototype strips out the unwanted text nodes
notice that these are methods, so you need ()
Selecting groups of DOM objects
methods in document and other DOM objects for accessing descendents:
array of descendants that match given CSS selector, such as "div#sidebar ul.news > li"
var gameButtons = $("game").select("button.control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "yellow";
}
The $$ function
var arrayName = $$("CSS selector");
// hide all "announcement" paragraphs in the "news" section
var paragraphs = $$("div#news p.announcement");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].hide();
}
$$ returns an array of DOM elements that match the given CSS selector
like $ but returns an array instead of a single DOM object
a shorthand for document.select
useful for applying an operation each one of a set of elements
Common $$ issues
many students forget to write . or # in front of a class or id
// get all buttons with a class of "control"
var gameButtons = $$("control");
var gameButtons = $$(".control");
$$ returns an array, not a single element; must loop over the results
// set all buttons with a class of "control" to have red text$$(".control").style.color = "red";
var gameButtons = $$(".control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "red";
}
Q: Can I still select a group of elements using $$ even if my CSS file doesn't have any style rule for that same group? (A: Yes!)
style property lets you set any CSS style for an element
problem: you cannot (usually) read existing styles with it
Accessing styles in Prototype
function biggerFont() {
// turn text yellow and make it bigger
var size = parseInt($("clickme").getStyle("font-size"));
$("clickme").style.fontSize = (size + 4) + "pt";
}
getStyle function added to DOM object allows accessing existing styles
constructor is written as a special initialize function
Class.create example
Point = 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 + ")";
}
});
Inheritance
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;
}
});
the afterFinish event fires once the effect is done animating
useful do something to the element (style, remove, etc.) when effect is done
each of these events receives the Effect object as its parameter
its properties: element, options, currentFrame, startOn, finishOn
some effects (e.g. Shrink) are technically "parallel effects", so to access the modified element, you write effect.effects[0].element rather than just effect.element
Drag and drop
Scriptaculous provides several objects for supporting drag-and-drop functionality:
onChange handler function receives the dragging element as its parameter
onUpdate handler function receives the list as its parameter
Sortable list events example
document.observe("dom:loaded", function() {
Sortable.create("simpsons", {
onUpdate: listUpdate
});
});
function listUpdate(list) {
// can do anything I want here; effects, an Ajax request, etc.
list.shake();
}
Homer
Marge
Bart
Lisa
Maggie
Subtleties of Sortable events
for onUpdate to work, each limust have an id of the form listID_index
#bandlistarea {
border: 2px solid gray;
}
/* 'selected' class is given to the autocomplete item currently chosen */
#bandlistarea .selected {
background-color: pink;
}
Click effects above
Draggable demo.
