 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 2Event-Driven Client-Side Scripting

 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 Navy. \____________________________________/ element 3Event-Driven Client-Side Scripting

 HTML elements can be given a name  Use id attribute in the start tag Elements named foo and bar.  Naming elements allows us to reference them by name inside JavaScript document.getElementById(“foo”) document.getElementById(“bar”) 4Event-Driven Client-Side Scripting

 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 5Event-Driven Client-Side Scripting

.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) 6Event-Driven Client-Side Scripting

 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 7Event-Driven Client-Side Scripting