Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
<body>
<button id="ok" onclick="okayClick();">Click me</button>
...
// called when OK button is clicked
function okayClick() {
$("ok").style.color = "red";
}
element.event = functionName;
$("ok").onclick = okayClick;
... <head> <script type="text/javascript" src="myfile.js"></script> </head> <body> <div><button id="ok">Click Me</button></div> ...
// global code $("ok").onclick = okayClick; // error: $("ok") is undefined
head
is processed before page's body
has loaded
onerror
: an error occurs when loading a document or an imageonload
: the browser loads the pageonresize
: the browser window is resizedonunload
: the browser exits the pagewindow
object or the document's body
window.onload
eventwindow.onload = functionName; // global code // this will run once the page has finished loading function functionName() { element.event = functionName; element.event = functionName; ... }
window.onload
event occurs, so we'll handle that eventwindow.onload
handler we attach all the other handlers, which in turn run when those controls are interacted with
<body>
<button id="ok">Click me</button>
...
window.onload = pageLoad;
// called when page loads; sets up event handlers
function pageLoad() {
$("ok").onclick = okayClick;
}
function okayClick() {
$("ok").style.color = "red";
}
()
when attaching the handler
window.onload = pageLoad();window.onload = pageLoad;$("ok").onclick = okayClick();$("ok").onclick = okayClick;
()
?window.onLoad = pageLoad;window.onload = pageLoad;
this
window.onload = pageLoad; function pageLoad() { $("ok").onclick = okayClick; // bound to $("ok") here } function okayClick() { // okayClick knows what DOM object this.style.color = "red"; // it was called on }
this
onclick
attribute in the XHTMLthis
<fieldset> <label><input id="Huey" type="radio" name="ducks" /> Huey</label> <label><input id="Dewey" type="radio" name="ducks" /> Dewey</label> <label><input id="Louie" type="radio" name="ducks" /> Louie</label> </fieldset>
... function processDucks() {if ($("huey").checked) { alert("Huey is checked!"); } else if ($("dewey").checked) { alert("Dewey is checked!"); } else { alert("Louie is checked!"); }alert(this.id + " is checked!"); }
function(parameters) { the function's code; }
window.onload = function() { $("ok").onclick = okayClick; }; function okayClick() { this.style.color = "red"; }
or, the following is even legal (though harder to read and bad style):
window.onload = function() { $("ok").onclick = function() { this.style.color = "red"; }; };
function okayClick() {this.style.color = "red";this.addClassName("highlighted"); }
.highlighted { color: red; }
className
, id
properties
How would we do each of the following in our JavaScript code?
div
s of class puzzle
to random x/y locations.ul
list with id
of TAs
to have a gray background.Each task involves modifying a group of elements to have a common new feature or style...
methods in document
object for getting DOM elements (* = Prototype):
document.getElementById
(a.k.a. $
*) :
DOM element that uses the given id
document.getElementsByTagName
: "div"
document.getElementsByName
: name
attribute (e.g. radio buttons in a group)document.getElementsByClassName
* : class
attribute
document.getElementsBySelector
*
(a.k.a. $$
*) : "div#sidebar ul.news > li"
highlight all paragraphs in document
var allParas = document.getElementsByTagName("p"); for (var i = 0; i < allParas.length; i++) { allParas[i].style.backgroundColor = "yellow"; }
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body>
$
highlight all paragraphs inside of the section with ID "footer"
var footerParas = $("footer").getElementsByTagName("p"); for (var i = 0; i < footerParas.length; i++) { footerParas[i].style.backgroundColor = "yellow"; }
<p>This won't be returned!</p>
<div id="footer">
<p>1234 Street</p>
<p>Atlanta, GA</p>
</div>
highlight all paragraphs inside of the section with ID "footer"
var footerParas = $$("#footer p"); for (var i = 0; i < footerParas.length; i++) { footerParas[i].style.backgroundColor = "yellow"; }
$$
function will return the array of DOM elements that matches any CSS selector$$
and event handlers
listen to clicks on all button
s with class control
directly inside of the section with ID "game"
window.onload = function() { var gameButtons = $$("#game > button.control"); for (var i = 0; i < gameButtons.length; i++) { gameButtons[i].onclick = gameButtonClick; } }; function gameButtonClick() { ... }
$$
and other DOM walking methods to unobtrusively attach event handlers to a group of related elements in your window.onload
code$$
errors.
or #
in front of a class
/ id
var gameButtons =$$("control");var gameButtons = $$(".control");
$$
returns an array, not a single element; must loop over the results and process each one
$$(".control").style.color = "red";var gameButtons = $$(".control"); for (var i = 0; i < gameButtons.length; i++) { gameButtons[i].style.color = "red"; }
$$
even if your CSS file has no style rule for that same group$
: Element.select
select all button
s with class control
directly inside of the section with ID "game"
var gameArea = $("game"); var gameButtons = gameArea.select("button.control"); for (var i = 0; i < footerParas.length; i++) { gameButtons[i].style.color = "yellow"; }
select
method returns an array of DOM element objects matching a given CSS selector within a particular root element
$$
, but only within part of the page"control"
that are inside the element with id
of "game"