JavaScript and HTML

Simple Event Handling

3-Feb-13

JavaScript and DOM

JavaScript relies on a Document Object Model (DOM) that describes the structure of the web page

This is not the same as the XML DOM

You can do a lot with a just a little understanding of the DOM

You use the DOM to access elements on the web page You can capture events without knowing the DOM at all You need the DOM to make any changes to the web page

Events

Some (but not all) elements on the web page respond to user interactivity (keystrokes, mouse clicks) by creating events

Different kinds of elements produce different events

Browsers are not all alike in what events are produced

We will concentrate on events from HTML form elements and commonly recognized events If the event isnt generated, the handler does nothing A handler should be very short

You can put handlers on HTML form elements

Most handlers call a function to do their work

A simple event handler

<form method="post" action=""> <input type="button" name="myButton" value="Click me" onclick="alert('You clicked the button!');"> </form> The button is enclosed in a form The tag is input type="button" The name can be used by other JavaScript code The value is what appears on the button onclick is the name of the event being handled

The value of the onclick element is the JavaScript code to execute alert pops up an alert box with the given text
4

Capitalization

JavaScript is case sensitive HTML is not case sensitive onclick="alert('You clicked the button!');"

The underlined parts are HTML The quoted string is JavaScript You will frequently see onclick capitalized as onClick

The Java naming convention is easier to read This is fine in HTML, but an error if it occurs in JavaScript

Also note: Since we have a quoted string inside another quoted string, we need both single and double quotes
5

Common events

Most HTML elements produce the following events:

onClick -- the form element is clicked onDblClick -- the form element is clicked twice in close succession onMouseDown -- the mouse button is pressed while over the form element onMouseOver -- the mouse is moved over the form element onMouseOut -- the mouse is moved away from the form element onMouseUp -- the mouse button is released while over the form element onMouseMove -- the mouse is moved

In JavaScript, these should be spelled in all lowercase

Example: Simple rollover

The following code will make the text Hello red when the mouse moves over it, and blue when the mouse moves away
<h1 onMouseOver="style.color='red';" onMouseOut="style.color='blue';">Hello </h1>

Image rollovers are just as easy:

<img src="../Images/duke.gif" width="55" height="68" onMouseOver="src='../Images/duke_wave.gif';" onMouseOut="src='../Images/duke.gif';">

Events and event handlers I

The following tables are taken from:

http://developer.netscape.com/docs/manuals/js/client/ jsguide/index.htm Event Applies to Occurs when Handler

Load
Unload

Document body User loads the page in a browser

Document body User exits the page

onLoad
onUnload

Error
Abort

Images, window Error on loading an image or a window

Images User aborts the loading of an image

onError
onAbort
8

Events and event handlers II

Event Applies to Occurs when Handler

KeyDown Documents, images, User depresses onKeyDown links, text areas a key
KeyUp KeyPress Documents, images, User releases a onKeyUp links, text areas key Documents, images, User presses onKeyPress links, text areas or holds down a key Text fields, text User changes onChange areas, select lists the value of an element
9

Change

Events and event handlers III

Event Applies to Occurs when Handler MouseDown Documents, buttons, links MouseUp Documents, buttons, links User onMouseDown depresses a mouse button User releases onMouseUp a mouse button

Click

Buttons, radio User clicks a onClick buttons, form element checkboxes, or link submit buttons, reset buttons, links
10

Events and event handlers IV

Event MouseOver Applies to Links Occurs when Handler User moves onMouseOver cursor over a link User moves onMouseOut cursor out of an image map or link User selects onSelect form elements input field
11

MouseOut

Areas, links

Select

Text fields, text areas

Events and event handlers V

Event
Move Resize DragDrop

Applies to
Windows Windows Windows

Occurs when
User or script moves a window User or script resizes a window User drops an object onto the browser window

Handler
onMove onResize onDragDrop

12

Events and event handlers VI

Event Focus Applies to Windows and all form elements Windows and all form elements Forms Forms Occurs when User gives element input focus User moves focus to some other element User clicks a Reset button Handler onFocus

Blur

onBlur

Reset Submit

onReset

User clicks a onSubmit Submit button

13

Back to the DOM

You can attach event handlers to HTML elements with very little knowledge of the DOM However, to change what is displayed on the page requires knowledge of how to refer to the various elements The basic DOM is a W3C standard and is consistent across various browsers

More complex features are browser-dependent

The highest level element (for the current page) is window, and everything else descends from that

Every JavaScript variable is a field of some object In the DOM, all variables are assumed to start with window. All other elements can be reached by working down from there
14

The DOM hierarchy

Source:
http://sislands.com/coin70/week1/dom.htm
15

Fields of window, I

window

The current window (not usually needed). Same as window. If in a frame, the immediately enclosing window. If in a frame, the outermost enclosing window. An array of frames (if any) within the current window. Frames are themselves windows. The number of frames contained in this window.
16

self

parent

top

frames[ ]

length

Fields of window, II

document

The HTML document being displayed in this window. The URL of the document being displayed in this window. If you set this property to a new URL, that URL will be loaded into this window. Calling location.reload() will refresh the window. A reference to the Navigator (browser) object. Some properties of Navigator are:

location

navigator

appName -- the name of the browser, such as "Netscape" platform -- the computer running the browser, such as "Win32"

status

A read/write string displayed in the status area of the browser window. Can be changed with a simple assignment statement.

17

Methods of window, I

alert(string)

Displays an alert dialog box containing the string and an OK button. Displays a confirmation box containing the string along with Cancel and OK buttons. Returns true if OK is pressed, false if Cancel is pressed.

confirm(string)

prompt(string)

Displays a confirmation box containing the string, a text field, and Cancel and OK buttons. Returns the string entered by the user if OK is pressed, null if Cancel is pressed.
18

Methods of window, II

open(URL)

Opens a new window containing the document specified by the URL. Closes the given window (which should be a top-level window, not a frame).

close()

19

Fields of document, I

You must prefix these fields with document. anchors[ ]

An array of Anchor objects (objects representing <a name=...> tags) An array of Applet objects

applets[ ]

The properties are the public fields defined in the applet The methods are the public methods of the applet Cautions: You must supply values of the correct types for the fields and method parameters Changes and method calls are done in a separate Thread
20

Fields of document, II

forms[ ]

An array of Form elements

If the document contains only one form, it is forms[0]

images[ ]

An array of Image objects

To change the image, assign a new URL to the src property

links[ ]

An array of Link objects

A link has several properties, including href, which holds the complete URL

21

Fields of document, III

bgColor

The background color of the document

May be changed at any time

title

A read-only string containing the title of the document

URL

A read-only string containing the URL of the document

22

Fields of the form object

elements[ ]

An array of form elements

23

The End

24