Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
Every Javascript program can refer to the following global objects:
name | description |
---|---|
document
|
current HTML page and its content |
history
|
list of pages the user has visited |
location
|
URL of the current HTML page |
navigator
|
info about the web browser you are using |
screen
|
info about the screen area occupied by the browser |
window
|
the browser window |
window
objectthe entire browser window; the top-level object in DOM hierarchy
window
objectalert
,
confirm
,
prompt
(popup boxes)
setInterval
,
setTimeout
clearInterval
,
clearTimeout
(timers)
open
,
close
(popping up new browser windows)
blur
,
focus
,
moveBy
,
moveTo
,
print
,
resizeBy
,
resizeTo
,
scrollBy
,
scrollTo
document
objectthe current web page and the elements inside it
location
objectthe URL of the current web page
navigator
objectinformation about the web browser application
navigator
object to see what browser is being used, and write browser-specific scripts and hacks:
if (navigator.appName === "Microsoft Internet Explorer") { ...
history
objectthe list of sites the browser has visited in this window
history
properties, for security<button id="ok" onclick="okayClick();">OK</button>
// called when OK button is clicked
function okayClick() {
alert("booyah");
}
// where element is a DOM element object
element.event = function;
$("ok").onclick = okayClick;
<head> <script src="myfile.js" type="text/javascript"></script> </head> <body> ... </body>
// global code
var x = 3;
function f(n) { return n + 1; }
function g(n) { return n - 1; }
x = f(x);
script
tag
body
<head> <script src="myfile.js" type="text/javascript"></script> </head> <body> <div><button id="ok">OK</button></div>
// global code $("ok").onclick = okayClick; // error: $("ok") is null
head
is processed before page's body
has loaded
window.onload
event
(8.1.1)
// this will run once the page has finished loading function functionName() { element.event = functionName; element.event = functionName; ... } window.onload = functionName; // global code
window.onload
event that occurs at that momentwindow.onload
handler we attach all the other handlers to run when events occur
<!-- look Ma, no JavaScript! -->
<button id="ok">OK</button>
// called when page loads; sets up event handlers function pageLoad() { $("ok").onclick = okayClick; } function okayClick() { alert("booyah"); } window.onload = pageLoad; // global code
()
when attaching the handler
window.onload = pageLoad();window.onload = pageLoad;okButton.onclick = okayClick();okButton.onclick = okayClick;
window.onLoad = pageLoad;window.onload = pageLoad;
function(parameters) { statements; }
window.onload = function() { var okButton = document.getElementById("ok"); okButton.onclick = okayClick; }; function okayClick() { alert("booyah"); }
window.onload = function() { var okButton = document.getElementById("ok"); okButton.onclick = function() { alert("booyah"); }; };
this
(8.1.3)
this.fieldName // access field this.fieldName = value; // modify field this.methodName(parameters); // call method
window
object
window
this
keyword refers to the current object
function pageLoad() { $("ok").onclick = okayClick; // bound to okButton here } function okayClick() { // okayClick knows what DOM object this.innerHTML = "booyah"; // it was called on } window.onload = pageLoad;
this
(rather than the window
)
this
<fieldset> <label><input type="radio" name="ducks" value="Huey" /> Huey</label> <label><input type="radio" name="ducks" value="Dewey" /> Dewey</label> <label><input type="radio" name="ducks" value="Louie" /> 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.value + " is checked!"); }