ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:lecture10

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
eg-259:lecture10 [2009/11/02 08:16] – eechriseg-259:lecture10 [2011/03/07 08:31] – eechris
Line 6: Line 6:
 ====== Dynamic Documents with JavaScript ====== ====== Dynamic Documents with JavaScript ======
  
-**Lecture 10**: To be given on Monday 2<sup>nd</sup> November, 2009.+**Lecture 10**: To be given on Monday 7<sup>th</sup> March, 2011.
  
 **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]]. **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
Line 35: Line 35:
   * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]   * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]
   * [[eg-259:lecture10#stacking_elements|Stacking Elements]]    * [[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#locating_the_mouse_cursor|Locating the Mouse Cursor]] 
   * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]   * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]
Line 52: Line 57:
   * What are the standard values for the ''visibility'' property?    * What are the standard values for the ''visibility'' property? 
   * What properties control the foreground and background colours of a document?    * 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 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 property has the content of an element? 
 +  * What JavaScript variable is associated with the ''z-index'' property? 
  
 ===== Learning Outcomes (continued) ===== ===== Learning Outcomes (continued) =====
Line 60: Line 71:
 //At the end of this lecture you should be able to answer these questions//: //At the end of this lecture you should be able to answer these questions//:
  
-  * 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?    * 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? 
   * What exactly is stored in the ''clientX'' and ''clientY'' properties after a mouse click?    * What exactly is stored in the ''clientX'' and ''clientY'' properties after a mouse click? 
Line 74: Line 84:
 ===== Moving Elements ===== ===== Moving Elements =====
  
-  * If position is set to either ''absolute'' or ''relative'', the element can be moved after it is displayed+  * 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   * Just change the ''top'' and ''left'' property values with a script
-  * Example: [[/~eechris/eg-259/examples/lecture10/mover.html|mover.html]]+  * Example: [[/eg-259/examples/lecture10/mover.html|mover.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://www.cpjobling.org.uk/~eechris/eg-259/examples/lecture10/mover.html javascript|mover.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/mover.html javascript|mover.html>
  
  
Line 96: Line 106:
 </code> </code>
  
-  * Example: [[/~eechris/eg-259/examples/lecture10/showHide.html|showHide.html]]+  * Example: [[/eg-259/examples/lecture10/showHide.html|showHide.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/showHide.html javascript|showHide.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/showHide.html javascript|showHide.html>
  
  
Line 109: Line 119:
   * Background colour is controlled by the ''backgroundColor'' property   * Background colour is controlled by the ''backgroundColor'' property
   * Foreground colour is controlled by the ''color'' property:   * Foreground colour is controlled by the ''color'' property:
-  * Example: [[/~eechris/eg-259/examples/lecture10/dynColors.html|dynColors.html]]+  * Example: [[/eg-259/examples/lecture10/dynColors.html|dynColors.html]]
  
 ---- ----
Line 125: Line 135:
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/dynColors.html javascript|dynColors.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynColors.html javascript|dynColors.html>
  
  
Line 141: Line 151:
        this.style.font = 'normal 16pt Times';"         this.style.font = 'normal 16pt Times';" 
 </code> </code>
-  * Example: [[/~eechris/eg-259/examples/lecture10/dynLink.html|dynLink.html]] +  * Example: [[/eg-259/examples/lecture10/dynLink.html|dynLink.html]] 
-  +
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/dynLink.html html|dynLink.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynLink.html html|dynLink.html>
  
  
Line 153: Line 163:
  
   * The content of an HTML element is addressed with the value property of its associated JavaScript object   * The content of an HTML element is addressed with the value property of its associated JavaScript object
-  * Example: [[/~eechris/eg-259/examples/lecture10/dynValue.html|dynValue.html]]+  * Example: [[/eg-259/examples/lecture10/dynValue.html|dynValue.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/dynValue.html javascript|dynValue.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynValue.html javascript|dynValue.html>
  
  
Line 180: Line 190:
  
   * To change stacking order, the handler function must change the ''zIndex'' property value of the element   * To change stacking order, the handler function must change the ''zIndex'' property value of the element
-  * Example: [[/~eechris/eg-259/examples/lecture10/stacking.html|stacking.html]]+  * Example: [[/eg-259/examples/lecture10/stacking.html|stacking.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/stacking.html javascript|stacking.html>+<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    * 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 
Line 198: Line 208:
   * ''screenX'' and ''screenY'' are relative to the //upper left corner// of the **whole client screen**   * ''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   * If we want to locate the mouse cursor when the mouse button is clicked, we can use the ''onclick'' event
-  * Example: [[/~eechris/eg-259/examples/lecture10/where.html|where.html]]+  * Example: [[/eg-259/examples/lecture10/where.html|where.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/where.html javascript|where.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/where.html javascript|where.html>
  
  
Line 211: Line 221:
   * A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display    * 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    * Use event handlers for ''onmousedown'' and ''onmouseup'' that change the visibility attribute of the message 
-  * Example: [[/~eechris/eg-259/examples/lecture10/anywhere.html|anywhere.html]]+  * Example: [[/eg-259/examples/lecture10/anywhere.html|anywhere.html]]
  
 ---- ----
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>
  
  
Line 238: Line 248:
   * A //problem//: coordinate properties are stored as strings, which include the units (''%%"%%150px%%"%%'')    * 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    * A //solution//: use pattern matching to get the number from coordinates, do arithmetic with numbers, add units back when updating position 
-  * //Example//: [[/~eechris/eg-259/examples/lecture10/moveText.html|moveText.html]], script: [[/~eechris/eg-259/examples/lecture10/moveTextfuns.js|moveTextfuns.js]]+  * //Example//: [[/eg-259/examples/lecture10/moveText.html|moveText.html]], script: [[/eg-259/examples/lecture10/moveTextfuns.js|moveTextfuns.js]]
  
 ---- ----
Line 252: Line 262:
  
   * Code -- HTML:   * Code -- HTML:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/moveText.html html|moveText.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/moveText.html html|moveText.html>
   * Code -- JavaScript:   * Code -- JavaScript:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/moveTextfuns.js javascript|moveTextfuns.js>+<source http://www.cpjobling.me/eg-259/examples/lecture10/moveTextfuns.js javascript|moveTextfuns.js>
  
 ===== Dragging and Dropping an Element ===== ===== Dragging and Dropping an Element =====
Line 265: Line 275:
 ===== Dragging and Dropping an Element (continued) ===== ===== Dragging and Dropping an Element (continued) =====
  
-  * Example: magnetic poetry [[/~eechris/eg-259/examples/lecture10/dragNDrop.html|dragNDrop.html]]+  * 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'')   * 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'')   * We use both DOM 0 and DOM 2 models (DOM 0 to call the ''mousedown'' handler, ''grabber'')
Line 272: Line 282:
  
   * Code:   * Code:
-<source http://77.68.39.12/~eechris/eg-259/examples/lecture10/dragNDrop.html javascript|dragNDrop.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dragNDrop.html javascript|dragNDrop.html>
  
  
Line 294: Line 304:
   * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]   * [[eg-259:lecture10#dynamic_colours|Dynamic Colours and Fonts]]
   * [[eg-259:lecture10#stacking_elements|Stacking Elements]]    * [[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#locating_the_mouse_cursor|Locating the Mouse Cursor]] 
   * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]   * [[eg-259:lecture10#reacting_to_a_mouse_click|Reacting to a Mouse Click]]
Line 306: Line 321:
   * What are the standard values for the ''visibility'' property?    * What are the standard values for the ''visibility'' property? 
   * What properties control the foreground and background colours of a document?    * 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?  
  
 +  ===== Learning Outcomes (continued) =====
 +
 +  //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? 
  
 ===== Learning Outcomes (continued) ===== ===== Learning Outcomes (continued) =====
Line 314: Line 334:
 //At the end of this lecture you should be able to answer these questions//: //At the end of this lecture you should be able to answer these questions//:
  
-  * 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?    * 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? 
   * What exactly is stored in the ''clientX'' and ''clientY'' properties after a mouse click?    * What exactly is stored in the ''clientX'' and ''clientY'' properties after a mouse click? 
eg-259/lecture10.txt · Last modified: 2011/03/07 08:34 by eechris