Web Programming Step by Step

Lecture 16
Global DOM Objects; Events

Reading: 8.1; 9.1 - 9.2

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

The six global DOM objects

Every Javascript program can refer to the following global objects:

The window object

the entire browser window; the top-level object in DOM hierarchy

• technically, all global code and variables become part of the window object
• properties:
  • document, history, location, name
• methods:
  • alert, 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

Popup windows with window.open

window.open("http://foo.com/bar.html", "My Foo Window",
            "width=900,height=600,scrollbars=1");

• window.open pops up a new browser window
• THIS method is the cause of all the terrible popups on the web!
• some popup blocker software will prevent this method from running

The document object

the current web page and the elements inside it

• properties:
  • anchors, body, cookie, domain, forms, images, links, referrer, title, URL
• methods:
  • getElementById
  • getElementsByName
  • getElementsByTagName
  • close, open, write, writeln
• complete list

The location object

the URL of the current web page

• properties:
  • host, hostname, href, pathname, port, protocol, search
• methods:
  • assign, reload, replace
• complete list

The navigator object

information about the web browser application

• properties:
  • appName, appVersion, browserLanguage, cookieEnabled, platform, userAgent
  • complete list
• Some web programmers examine the navigator object to see what browser is being used, and write browser-specific scripts and hacks:

  if (navigator.appName === "Microsoft Internet Explorer") { ...
  

  • (this is poor style; you should not need to do this)

The screen object

information about the client's display screen

• properties:
  • availHeight, availWidth, colorDepth, height, pixelDepth, width
  • complete list

The history object

the list of sites the browser has visited in this window

• properties:
  • length
• methods:
  • back, forward, go
• complete list
• sometimes the browser won't let scripts view history properties, for security

JavaScript events

• the click event (onclick) is just one of many events that can be handled
• problem: events are tricky and have incompatibilities across browsers
  • reasons: fuzzy W3C event specs; IE disobeying web standards; etc.
• solution: Prototype includes many event-related features and fixes

Attaching event handlers the Prototype way

element.onevent = function;
element.observe("event", function);

// call the playNewGame function when the Play button is clicked
$("play").observe("click", playNewGame);

• to use Prototype's event features, you must attach the handler using the DOM element object's observe method (added by Prototype)
• pass the event name as a string, and the function name to call
• handlers must be attached this way for Prototype's event features to work

• observe substitutes for addEventListener (not supported by IE)

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:

• *   replaces non-standard srcElement and which properties
• ** replaces non-standard return false;, stopPropagation, etc.

Mouse events (9.2.2)

Mouse event objects

The event passed to a mouse handler has these properties:

• *   replaces non-standard properties pageX and pageY
• ** replaces non-standard properties button and which

Mouse event example

<pre id="target">Move the mouse over me!</pre>

window.onload = function() {
	$("target").observe("mousemove", showCoords);
};

function showCoords(event) {
	$("target").innerHTML = 
		  "pointer: (" + event.pointerX() + ", " + event.pointerY() + ")\n"
		+ "screen : (" + event.screenX + ", " + event.screenY + ")\n"
		+ "client : (" + event.clientX + ", " + event.clientY + ")";
}

Move the mouse over me!

The keyword this (8.1.3)

this.fieldName                  // access field
this.fieldName = value;          // modify field

this.methodName(parameters);    // call method

• all JavaScript code actually runs inside of an object
• by default, code runs in the global window object (so this === window)
  • all global variables and functions you declare become part of window
• the this keyword refers to the current object

Event handler binding

window.onload = function() {
	$("textbox").observe("mouseout", booyah);   // bound to text box here
	$("submit").observe("click", booyah);       // bound to submit button here
};

function booyah() {           // booyah knows what object it was called on
	this.value = "booyah";
}

• event handlers attached unobtrusively are bound to the element
• inside the handler, that element becomes this (rather than the window)

Fixing redundant code with 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!");
}

• if the same function is assigned to multiple elements, each gets its own bound copy