Scripts that execute in response to some event User clicking on something Script does NOT execute...
-
Upload
carol-bates -
Category
Documents
-
view
212 -
download
0
Transcript of Scripts that execute in response to some event User clicking on something Script does NOT execute...
EVENT-DRIVEN CLIENT-SIDE SCRIPTING
USNA SI110
LT BRIAN KIEHLLEAHY 103 | 410.293.0938
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