Prototype and Events

CSE 190 M (Web Programming), Spring 2008

University of Washington

Reading: Chapter 4

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.

Valid XHTML 1.1 Valid CSS!

Lecture Outline

Prototype JavaScript library

A set of useful additional objects, methods, and cross-browser compatibility fixes

Problems with JavaScript

JavaScript is a powerful language, but it has many flaws:

(Some) Things that break in IE

Prototype

<script src="http://www.cs.washington.edu/education/courses/cse190m/08sp/prototype.js" 
 type="text/javascript"></script>

<!-- or, -->
<script src="http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js" 
 type="text/javascript"></script>

Prototype methods

Some Prototype features

Prototype DOM element methods

Prototype adds the following methods to every DOM element object:

Prototype in action

function makeFontBigger() {
	$("text").style.fontSize = parseInt(
		$("text").getStyle("font-size")) + 2 + "pt";
}

Global DOM objects

Objects provided by the browser that let you learn about the current document, browser window, URL, ...

The six global objects

Every Javascript program can refer to the following global objects:

The document object

The window object

Popup windows with window.open

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

The location object

The navigator object

The screen object

The history object

Events

handling more user events such as mouse and keyboard actions

Mouse events

XHTML elements have the following events:

<div onmousemove="myFunction();">...</div>

Mouse event example

<div id="target" onmouseover="colorIt();">I'm OVER you!</div>

function colorIt() {
	$("target").style.backgroundColor = "red";
}
I'm OVER you!

Handling multiple mouse events

<div id="dare" onmousedown="colorIt();" onmouseup="uncolorIt();">
	Click me ... I dare you!
</div>

function colorIt() {
	$("dare").style.backgroundColor = "red";
}
function uncolorIt() {
	$("dare").style.backgroundColor = "white";
}
Click me ... I dare you!

Examining the mouse event object

function colorIt(event) {
	$("dare").style.backgroundColor = "red";
	$("dare").innerHTML = "You clicked (" + event.screenX +
			", " + event.screenY + ")");
}
Click me ... I dare you!

Event object properties

Browser incompatibilities with events

Poorly supported event properties

Click me: Which properties are supported?

Prototype and events

function name(event) {
	Event.extend(event);
	...
}

Keyboard events

DOM objects for HTML elements have the following properties:

Key event object properties

Which key event properties does your browser support?

Prototype and keyboard events

function name(event) {
	Event.extend(event);
	...
}

Detecting Enter key on a text field

<input type="text" onkeypress="keyPress();" />

function keyPress(event) {
	Event.extend(event);
	if (event.keyCode == Event.KEY_RETURN) {
		// the user pressed Enter
		alert("You pressed the Enter key!");
	}
}

Text box events

these are supported by <input type="text">, <textarea>

Practice problem: Draggable map

One of the coolest features of Google Maps is the ability to drag the map to move it around. Write a program with a draggable map of Middle Earth using Javascript mouse event handlers. (See the background CSS properties from the end of the CSS slides.)