categories: CSS classes, DOM tree traversal/manipulation, events, styles
Styles and CSS classes
(9.1.4)
function makeFontBigger() {
// turn text yellow and make it bigger
if (!$("text").hasClassName("highlight")) {
$("text").addClassName("highlight");
}
var size = parseInt($("text").getStyle("font-size"));
$("text").style.fontSize = (size + 2) + "pt";
}
getStyle function added to DOM object allows accessing existing styles
elements with same parent
as this one (not text nodes)
// remove elements in "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].remove();
}
}
notice that these are methods, so you need ()
Methods for selecting elements
Prototype adds methods to the document object (and all DOM element objects) for selecting groups of elements:
array of elements 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
(9.1.5)
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!)
Prototype and forms
(9.1.6)
$F("id")
$F returns the value of a form control with the given id
var name = $F("username");
if (name.length < 4) {
$("username").clear();
$("login").disable();
}
// listen to clicks on all buttons with class "control" that
// are directly inside the section with ID "game"
window.observe("load", function() {
var gameButtons = $$("#game > button.control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].observe("click", gameButtonClick);
}
});
function gameButtonClick() { ... }
you can use $$ and other DOM walking methods to unobtrusively attach event handlers to a group of related elements in your window.onload code
notice that the observe syntax can also be used for window.onload
The Event object
function name(event) {
// an event handler function ...
}
Event handlers can accept an optional parameter to represent the event that is occurring. Event objects have the following properties / methods:
method / property name
description
type
what kind of event, such as "click" or "mousedown"
window.observe("load", function() {
$("orderform").observe("submit", verify);
});
function verify(event) {
if ($F("zipcode").length < 5) {
event.stop(); // cancel form submission unless
} // zip code is 5 chars long
}
an error occurs when loading a document or an image
The above events can be handled on the global window object. Also:
// best way to attach event handlers on page loadwindow.observe("load", function() {document.observe("dom:loaded", function() {
$("orderform").observe("submit", verify);
});
document.observe("dom:loaded", function() {
$("clickme").observe("click", delayMsg);
});
function delayMsg() {
setTimeout(booyah, 5000);
$("output").innerHTML = "Wait for it...";
}
function booyah() { // called when the timer goes off
$("output").innerHTML = "BOOYAH!";
}
setInterval example
var timer = null;// stores ID of interval timer
document.observe("dom:loaded", function() {
$("clickme").observe("click", delayMsg2);
});
function delayMsg2() {
if (timer == null) {
timer = setInterval(rudy, 1000);
} else {
clearInterval(timer);
timer = null;
}
}
function rudy() { // called each time the timer goes off
$("output").innerHTML += " Rudy!";
}
Passing parameters to timers
function delayedMultiply() {
// 6 and 7 are passed to multiply when timer goes off
setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
alert(a * b);
}
any parameters after the delay are passed to the timer function
doesn't work in IE6; must create an intermediate function to pass the parameters
Common timer errors
many students mistakenly write () when passing the function
