ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~




====== Dynamic Documents with JavaScript ======

**Lecture 10**: To be given on Monday 7<sup>th</sup> March, 2011.

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|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 [[eg-259:case-studies:1|CSS for layout]] before you dive into this lecture.


===== Contents of this Lecture =====

An introduction to Dynamic HTML

  * [[eg-259:lecture10#moving_elements|Moving Elements]]
  * [[eg-259:lecture10#element_visibility|Element Visibility]] 
  * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]
  * [[eg-259:lecture10#stacking_elements|Stacking Elements]] 

===== Contents of this Lecture (2) =====

Reacting to the mouse

  * [[eg-259:lecture10#locating_the_mouse_cursor|Locating the Mouse Cursor]] 
  * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]
  * [[eg-259:lecture10#slow_movement_of_elements|Slow Movement of Elements]]
  * [[eg-259:lecture10#dragging_and_dropping_an_element|Dragging and Dropping an Element]] 






===== 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: [[/eg-259/examples/lecture10/mover.html|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'' and ''hidden''
<code javascript>
    if (dom.visibility == "visible")
      dom.visibility = "hidden";
    else
      dom.visibility = "visible"; 
</code>

  * Example: [[/eg-259/examples/lecture10/showHide.html|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: [[/eg-259/examples/lecture10/dynColors.html|dynColors.html]]

----

<note>
Background color:
<code html>
   <input type = "text" size = "10"
         name = "background"
         onchange = "setColor('background', this.value)"> 
</code>
  * 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:
<code html>
	onmouseover = "this.style.color = 'blue';
	      this.style.font = 'italic 16pt Times';"
	onmouseout = "this.style.color = 'black';
	      this.style.font = 'normal 16pt Times';" 
</code>
  * Example: [[/eg-259/examples/lecture10/dynLink.html|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: [[/eg-259/examples/lecture10/dynValue.html|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 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
<code html>
    <a href = "javascript:fun()"> 
</code>


===== Stacking Elements (continued) =====

  * To change stacking order, the handler function must change the ''zIndex'' property value of the element
  * Example: [[/eg-259/examples/lecture10/stacking.html|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 



===== 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: [[/eg-259/examples/lecture10/where.html|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'' and ''onmouseup'' that change the visibility attribute of the message 
  * Example: [[/eg-259/examples/lecture10/anywhere.html|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:
<code javascript>
    setTimeout("fun()", n)
</code>


===== 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//: [[/eg-259/examples/lecture10/moveText.html|moveText.html]], script: [[/eg-259/examples/lecture10/moveTextfuns.js|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'', 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 [[/eg-259/examples/lecture10/dragNDrop.html|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 the ''event'' object 
    - 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'') 
    - 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

  * [[eg-259:lecture10#moving_elements|Moving Elements]]
  * [[eg-259:lecture10#element_visibility|Element Visibility]] 
  * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]
  * [[eg-259:lecture10#stacking_elements|Stacking Elements]] 

===== Summary of This Lecture (2) =====

Reacting to the mouse

  * [[eg-259:lecture10#locating_the_mouse_cursor|Locating the Mouse Cursor]] 
  * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]
  * [[eg-259:lecture10#slow_movement_of_elements|Slow Movement of Elements]]
  * [[eg-259:lecture10#dragging_and_dropping_an_element|Dragging and Dropping an Element]] 

===== 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 [[eg-259:homework:12#homework_exercises|available]]. 


===== What's Next? =====

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



[[eg-259:lecture9|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture13|Next Lecture]]