Lecture 17: The Document Object Model (DOM); Unobtrusive JavaScript
Reading: 9.1 - 9.2
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.
var ok = document.getElementById("ok");
ok.onclick = okayClick;// error: null
problem: global JS code runs the moment the script is loaded
script in head is processed before page's body has loaded
no elements are available yet or can be accessed yet via the DOM
we need a way to attach the handler after the page has loaded...
The window.onload event
function functionName() {
// code to initialize the page
...
}
// run this function once the page has finished loadingwindow.onload = functionName;
there is a global event called window.onload event that occurs at the moment the page body is done being loaded
if you attach a function as a handler for window.onload, it will run at that time
An unobtrusive event handler
<button id="ok">OK</button> <!-- (1) -->
// called when page loads; sets up event handlers
function pageLoad() {
var ok = document.getElementById("ok"); // (3)
ok.onclick = okayClick;
}
function okayClick() {
alert("booyah"); // (4)
}
window.onload = pageLoad;// (2)
Common unobtrusive JS errors
event names are all lowercase, not capitalized like most variables
function okayClick() {
this.style.color = "red";
this.className = "highlighted";
}
.highlighted { color: red; }
well-written JavaScript code should contain as little CSS as possible
use JS to set CSS classes/IDs on elements
define the styles of those classes/IDs in your CSS file
The danger of global variables
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
globals can be bad; other code and other JS files can see and modify them
How many global symbols are introduced by the above code?
3 global symbols: count, incr, and reset
Enclosing code in a function
function everything() {
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
}everything();// call the function to run the code
the above example moves all the code into a function; variables and functions declared inside another function are local to it, not global
How many global symbols are introduced by the above code?
1 global symbol: everything (can we get it down to 0?)
The "module pattern"
(function() {
statements;
})();
wraps all of your file's code in an anonymous function that is declared and immediately called
0 global symbols will be introduced!
the variables and functions defined by your code cannot be messed with externally
Module pattern example
(function() {
var count = 0;
function incr(n) {
count += n;
}
function reset() {
count = 0;
}
incr(4);
incr(2);
console.log(count);
})();
How many global symbols are introduced by the above code?
0 global symbols
JavaScript "strict" mode
"use strict";
your code...
writing "use strict"; at the very top of your JS file turns on strict syntax checking:
shows an error if you try to assign to an undeclared variable
stops you from overwriting key JS system libraries
forbids some unsafe or error-prone language features
You should always turn on strict mode for your code in this class!
