Table of Contents
~~SLIDESHOW~~
Dynamic Documents with JavaScript
Lecture 10: To be given on Monday 7th March, 2011.
Lecturer: Dr Chris P. Jobling.
A dynamic HTML document is one whose tag attributes, tag contents, or element style properties can be changed after the document has been and is still being displayed by a browser
Dynamic Documents with JavaScript
Informally, a dynamic XHTML document is one that in some way can be changed while it is being displayed by a browser. The most common client-side approach to providing dynamic documents is with JavaScript. Changes to documents can occur when explicitly requested by user interactions, or at regular timed intervals.
This lecture is based on Chapter 6 of Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. with additional material from Chapter 8 of Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006.
You should review the notes on CSS for layout before you dive into this lecture.
Contents of this Lecture
An introduction to Dynamic HTML
Contents of this Lecture (2)
Reacting to the mouse
Learning Outcomes
At the end of this lecture you should be able to answer these questions:
- Define a dynamic XHTML document.
- What are the standard values for the
visibility
property? - What properties control the foreground and background colours of a document?
Learning Outcomes
At the end of this lecture you should be able to answer these questions:
- What events can be used to change a font when the mouse cursor is moved over and away from an element?
- What property has the content of an element?
- What JavaScript variable is associated with the
z-index
property? - To move an element to the top of the display, do you set the
z-index
property to a large number or a small number?
Learning Outcomes (continued)
At the end of this lecture you should be able to answer these questions:
- What exactly is stored in the
clientX
andclientY
properties after a mouse click? - What exactly is stored in the
screenX
andscreenY
properties after a mouse click? - Describe the parameters and actions of the
setTimeout
function.
Moving Elements
- If
position
is set to eitherabsolute
orrelative
, the element can be moved after it is displayed - Just change the
top
andleft
property values with a script - Example: mover.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/mover.html javascript|mover.html>
Element Visibility
- The
visibility
property of an element controls whether it is displayed - The values are
visible
andhidden
if (dom.visibility == "visible") dom.visibility = "hidden"; else dom.visibility = "visible";
- Example: showHide.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/showHide.html javascript|showHide.html>
Dynamic Colours
- Background colour is controlled by the
backgroundColor
property - Foreground colour is controlled by the
color
property: - Example: dynColors.html
<note> Background color:
<input type = "text" size = "10" name = "background" onchange = "setColor('background', this.value)">
- The actual parameter this.value works because at the time of the call,
this
is a reference to the text box (the element in which the call is made) - So,
this.value
is the name of the new colour
</note>
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/dynColors.html javascript|dynColors.html>
Dynamically Changing Fonts
- We can change the font properties of a link by using the mouseover and mouseout events to trigger a script that makes the changes:
onmouseover = "this.style.color = 'blue'; this.style.font = 'italic 16pt Times';" onmouseout = "this.style.color = 'black'; this.style.font = 'normal 16pt Times';"
- Example: dynLink.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/dynLink.html html|dynLink.html>
Dynamic Content
- The content of an HTML element is addressed with the value property of its associated JavaScript object
- Example: dynValue.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/dynValue.html javascript|dynValue.html>
Stacking Elements
- The
z-index
attribute determines which element is in front and which are covered by the front element - The JavaScript property associated with the
z-index
attribute iszIndex
z-index
can be changed dynamically (by changingzIndex
)
Stacking Elements (continued)
- An image element can have an
onclick
attribute, so images can be clicked to trigger event handlers - Anchors can also trigger event handlers when they are clicked
- The
href
attribute can be set to call a JavaScript function by assigning it the call, with'javascript'
attached to the call code
<a href = "javascript:fun()">
Stacking Elements (continued)
- To change stacking order, the handler function must change the
zIndex
property value of the element - Example: stacking.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/stacking.html javascript|stacking.html>
- A call to the function from an element sets the
zIndex
value of the new top element to 10 and thezIndex
value of the old top element to 0 - It also sets the current top to the new top
Locating the Mouse Cursor
- The coordinates of the element that caused an event are available in the
clientX
andclientY
properties of theevent
object - These are relative to upper left corner of the browser display window
screenX
andscreenY
are relative to the upper left corner of the whole client screen- If we want to locate the mouse cursor when the mouse button is clicked, we can use the
onclick
event - Example: where.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/where.html javascript|where.html>
Reacting to a Mouse Click
- A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display
- Use event handlers for
onmousedown
andonmouseup
that change the visibility attribute of the message - Example: anywhere.html
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>
Slow Movement of Elements
- To animate an element, it must be moved by small amounts, many times, in rapid succession
- JavaScript has two ways to do this, but we cover just one:
setTimeout("fun()", n)
Slow Movement of Elements: An Example
- Example: move a text element from its initial position (100, 100) to a new position (300, 300)
- Use the
onload
attribute of the body element to initialize the position of the element - Use a
move
function to change the top and left attributes by one pixel in the direction of the destination - A problem: coordinate properties are stored as strings, which include the units (
"150px"
) - A solution: use pattern matching to get the number from coordinates, do arithmetic with numbers, add units back when updating position
- Example: moveText.html, script: moveTextfuns.js
<note>
- Another problem: We need to use some HTML special characters (
<
and--
)- XML parsers may remove all comments
- So either put the script in a
CDATA
section - or (better) put JavaScript in separate file
- These are problems of validation only
- Both IE6 and NS7 deal correctly with comments
</note>
- Code – HTML:
<source http://www.cpjobling.me/eg-259/examples/lecture10/moveText.html html|moveText.html>
- Code – JavaScript:
<source http://www.cpjobling.me/eg-259/examples/lecture10/moveTextfuns.js javascript|moveTextfuns.js>
Dragging and Dropping an Element
- We can use
mousedown
,mousemove
, andmouseup
events to grab, drag, and drop respectively - We know how to move an element – just change its
left
andtop
properties
Dragging and Dropping an Element (continued)
- Example: magnetic poetry dragNDrop.html
- The DOM 2 event model is required (the
Event
object and its property,currentTarget
) - We use both DOM 0 and DOM 2 models (DOM 0 to call the
mousedown
handler,grabber
)
- Code:
<source http://www.cpjobling.me/eg-259/examples/lecture10/dragNDrop.html javascript|dragNDrop.html>
Dragging and Dropping an Element (continued)
- Drag and drop requires three processes:
- Get the DOM of the element to be moved when the mouse button is pressed down (
onmousedown
) while the mouse cursor is over the element to be moved- We can get the DOM of the element on which an event occurred with the
currentTarget
property of theevent
object
- Move the element by changing its
top
andleft
properties of the element as the mouse cursor is moved (onmousemove
)- Compute the distance of each move as the difference between the current position ( the
left
andtop
values) and the mouse click position (clientX
andclientY
)
- Dropping the element when the mouse button is released by undefining the DOM used to carry out the move
Summary of This Lecture
An introduction to Dynamic HTML
Summary of This Lecture (2)
Reacting to the mouse
Learning Outcomes
At the end of this lecture you should be able to answer these questions:
- Define a dynamic XHTML document.
- What are the standard values for the
visibility
property? - What properties control the foreground and background colours of a document?
Learning Outcomes (continued)
- What events can be used to change a font when the mouse cursor is moved over and away from an element?
- What property has the content of an element?
- What JavaScript variable is associated with the
z-index
property? - To move an element to the top of the display, do you set the
z-index
property to a large number or a small number?
Learning Outcomes (continued)
At the end of this lecture you should be able to answer these questions:
- What exactly is stored in the
clientX
andclientY
properties after a mouse click? - What exactly is stored in the
screenX
andscreenY
properties after a mouse click? - Describe the parameters and actions of the
setTimeout
function.
Exercises (1)
Write, test, validate, and debug (if necessary) the following documents:
- The document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for only twenty characters per line (that is
20em
wide). A light-grey image of yourself must be superimposed over the centre of the text as a nested element. - Modify the document described in Exercise 1 to add four buttons. These buttons must be labeled Northwest, Northeast, Southwest, and Southeast. When they're pressed, the buttons must move your image to the specified corner of the text. Initially, your image must appear in the northwest (upper left) corner of the text.
Exercises (2)
Write, test, validate, and debug (if necessary) the following documents:
- The document must have a paragraph of text that describes your home. Choose at least three different phrases (three to six words) of this paragraph and make them change font, font style, colour, and font size when the mouse cursor is placed over them. Each of the different phases must change to different fonts, font styles, colours and font sizes.
- The document must contain four short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can always be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible.
Exercises (3)
Write, test, validate, and debug (if necessary) the following documents:
- The document must have a small image of yourself, which must appear when the mouse button us clicked at the position of the mouse cursor, regardless of the position of the cursor at that time.
- The document must contain the statement “save time with TIMESAVER 2.2”, which continuously moves back and forth across the top of the display.
More Homework Exercises
More Dynamic HTML exercises, taken from Chapter 6 of Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006., are available.
What's Next?
JavaScript Libraries
- JavaScript Library Overview
- A jQuery Example
- DOM manipulations in jQuery
- Accordian Menu
- jQuery UI widgets