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.
id
$
function<span id="sale">Blowout sale!</span> <button onclick="makeRed();">Make Text Red</button>
function makeRed() { $("sale").style.color = "red"; }
$
function returns the DOM object for an element with a given id
$
is actually short for the command document.getElementById
$
functionfunction $(id) { return document.getElementById(id); }
document.getElementById
function returns the DOM object for an element with a given id
$("foo") === document.getElementById("foo")
document
is one of several useful global JS objects we'll see later$
is not part of standard JavaScript, but we'll have it in our programs
$
function for convenience
<input id="username" type="text" size="12" /> <button onclick="capitalize();">Capitalize It!</button>
function capitalize() { $("username").value = $("username").value.toUpperCase(); }
$("username").type
is "text"
$("username").size
is 12
$("username").value
is whatever value the user has typed
value
exists in most XHTML UI controls (textarea
, select
, ...)<div id="main" class="foo bar"> <p>Hello, <em>very</em> happy to see you!</p> </div>
tagName
: the HTML tag of this element, capitalized
$("main").tagName
is "DIV"
className
: the CSS class(es) of this element, if any
$("main").className
is "foo bar"
innerHTML
: the HTML text content inside this element
$("main").innerHTML
is "\n <p>Hello, <em>very</em> happy to see you!</p>\n"
style
property<button id="clickme" onclick="enlarge();"> Make me big!</button>
function enlarge() { $("clickme").style.fontSize = "42pt"; }
style
property represents the combined CSS styles on this elementnamesLikeThis
instead of names-like-this
backgroundColor
, borderLeftWidth
, fontFamily
.style
when setting styles
$("somediv").color = "red";$("somediv").style.color = "red";
likeThis
, not like-this
$("somediv").style.font-size = "14pt";$("somediv").style.fontSize = "14pt";
$("somediv").style.width = 200;$("somediv").style.width = "200px"; $("somediv").style.padding = "0.5em";
setTimeout
, setInterval
, clearTimeout
, clearInterval
functions
setTimeout(function, delay, [param1, param2, ...]);
setInterval(function, delay, [param1, param2, ...]);
setTimeout
and setInterval
return an object representing the timerclearTimeout(timer);
clearInterval(timer);
setTimeout
example
function delayMsg() {
setTimeout(booyah, 5000);
}
function booyah() { // called when the timer goes off
alert("Booyah!");
}
<button onclick="delayMsg();">Click me!</button>
setTimeout
returns instantly; delayMsg
does not wait for the 5 sec to elapsesetInterval
example
function repeatedMessage() { setInterval(rudyRudy, 1000); } function rudyRudy() { alert("Rudy!"); }
<button onclick="repeatedMessage();">Click me!</button>
var timer; function repeatedMessage() { timer = setInterval(rudyRudy, 1000); } function rudyRudy() { alert("Rudy!"); } function cancel() { clearInterval(timer); }
<button onclick="repeatedMessage();">Rudy chant</button> <button onclick="cancel();">Make it stop!</button>
setInterval
returns an object representing the timer
clearInterval
and pass the timer object
function delayedMultiply() {
// 6 and 7 are passed to multiply when timer goes off
var myTimer = setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
alert(a * b);
}
<button onclick="delayedMultiply();">Click me</button>
()
when passing the function
setTimeout(booyah(), 2000);setTimeout(booyah, 2000);
()
?function delayedMultiply() { var myTimer = setTimeout("multiply(6 * 7);", 2000); } function multiply(a, b) { alert(a * b); }
<button onclick="delayedMultiply();">Click me!</button>
()
and ;
after the call