EVENT-DRIVEN CLIENT-SIDE SCRIPTING

USNA SI110

LT BRIAN KIEHLLEAHY 103 | 410.293.0938

KIEHL@USNA.EDU

Event-Driven Client-Side Scripting 2

Event-Driven Scripts

Scripts that execute in response to some event User clicking on something

Script does NOT execute as part of page loading DOM facilities like document.write() are not

useful Must use DOM facilities like document.getElementById(…) to make changes

Event-Driven Client-Side Scripting 3

Vocabulary

element – anything wrapped in an opening and closing HTML tag

attribute – Normally defined within an element’s opening tag Syntax: name=value Ex: img element usually has a src attribute set to the

URL/path for the image

______start tag________ / \ / ______attribute_________\ __ close tag / / \\ / \ Go <a href=“http://www.usna.edu”>Navy</a>. \____________________________________/ element

Event-Driven Client-Side Scripting 4

Naming Elements

HTML elements can be given a name Use id attribute in the start tag

Elements named <b id=“foo”>foo</b> and <b id=“bar”>bar</b>.

Naming elements allows us to reference them by name inside JavaScript

document.getElementById(“foo”)document.getElementById(“bar”)

Event-Driven Client-Side Scripting 5

Manipulating Elements

document.getElementById(…) returns an object representing the named HTML element Can be manipulated in several ways

.innerHTML .style

.innerHTML Stores whatever is located between the

element’s start and end tags If other elements are nested within the

element, .innerHTML will contain tags

Event-Driven Client-Side Scripting 6

.style Manipulation

.style – object that contains values that affect the way an element looks in the browser .style.color – color of text

Colors specified as RGB triples .style.background – background color .style.fontFamily – which font is used for text

Can specify specific font family or generic (e.g., serif, sans-serif, monospace)

.style.fontSize – size of the displayed font units including pt (points), px (pixels) and em

(multiple of current font-size)

Event-Driven Client-Side Scripting 7

Mouse Events

onclick Script runs when mouse button is clicked on an element

ondblclick Script runs when mouse button is double-clicked on the element

onmousedown Script runs when mouse button is pressed down

Similar to onclick, but executes before the button is released onmouseup

Script runs when mouse button is released onmousemove

Script runs when the mouse pointer is moved onmouseout

Script runs when mouse pointer moves out of an element onmouseover

Script runs when mouse pointer moves over an element