~~SLIDESHOW~~

Dynamic Documents with JavaScript

Lecture 10: To be given on Monday 7^th March, 2011.

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 and clientY properties after a mouse click?
What exactly is stored in the screenX and screenY properties after a mouse click?
Describe the parameters and actions of the setTimeout function.

Moving Elements

If position is set to either absolute or relative, the element can be moved after it is displayed
Just change the top and left property values with a script
Example: mover.html

Code:

Element Visibility

The visibility property of an element controls whether it is displayed
The values are visible and hidden

    if (dom.visibility == "visible")
      dom.visibility = "hidden";
    else
      dom.visibility = "visible";

Example: showHide.html

Code:

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:

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:

Dynamic Content

The content of an HTML element is addressed with the value property of its associated JavaScript object
Example: dynValue.html

Code:

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 is zIndex
z-index can be changed dynamically (by changing zIndex)

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:

A call to the function from an element sets the zIndex value of the new top element to 10 and the zIndex 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 and clientY properties of the event object
These are relative to upper left corner of the browser display window
screenX and screenY 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:

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 and onmouseup that change the visibility attribute of the message
Example: anywhere.html

Code:

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:

Code – JavaScript:

Dragging and Dropping an Element

We can use mousedown, mousemove, and mouseup events to grab, drag, and drop respectively
We know how to move an element – just change its left and top 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:

Dragging and Dropping an Element (continued)

Drag and drop requires three processes:
1. 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 the event object
2. Move the element by changing its top and left 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 and top values) and the mouse click position (clientX and clientY)
3. 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 and clientY properties after a mouse click?
What exactly is stored in the screenX and screenY 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

Previous Lecture | home | Next Lecture

ICCT Wiki

Table of Contents

Dynamic Documents with JavaScript