Dynamic Documents with JavaScript

Lecture 10: To be given on Monday 7^th 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

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.

An introduction to Dynamic HTML

• Moving Elements
• Element Visibility
• Dynamic Colours and Fonts
• Stacking Elements

Reacting to the mouse

• Locating the Mouse Cursor
• Reacting to a Mouse Click
• Slow Movement of Elements
• Dragging and Dropping an Element

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?

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?

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.

• 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:

<source http://www.cpjobling.me/eg-259/examples/lecture10/mover.html javascript|mover.html>

• 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:

<source http://www.cpjobling.me/eg-259/examples/lecture10/showHide.html javascript|showHide.html>

• 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>

• 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>

• 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>

• 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)

• 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()"> 

• 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 the zIndex value of the old top element to 0
• It also sets the current top to the new top

• 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:

<source http://www.cpjobling.me/eg-259/examples/lecture10/where.html javascript|where.html>

• 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:

<source http://www.cpjobling.me/eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>

• 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)

• 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>

• 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

• 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>

• 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

An introduction to Dynamic HTML

• Moving Elements
• Element Visibility
• Dynamic Colours and Fonts
• Stacking Elements

Reacting to the mouse

• Locating the Mouse Cursor
• Reacting to a Mouse Click
• Slow Movement of Elements
• Dragging and Dropping an Element

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?

• 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?

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.

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.

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.

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 Dynamic HTML exercises, taken from Chapter 6 of Chris Bates, Web Programming: Building Internet Applications, 3rd Edition, John Wiley, 2006., are available.

JavaScript Libraries

• JavaScript Library Overview
• A jQuery Example
• DOM manipulations in jQuery
• Accordian Menu
• jQuery UI widgets

Previous Lecture | home | Next Lecture