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 [2011/03/06 11:35] – external edit 127.0.0.1eg-259:lecture10 [2011/03/07 08:31] – eechris
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 81: Line 91:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/mover.html javascript|mover.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/mover.html javascript|mover.html>
  
  
Line 101: Line 111:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/showHide.html javascript|showHide.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/showHide.html javascript|showHide.html>
  
  
Line 125: Line 135:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/dynColors.html javascript|dynColors.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynColors.html javascript|dynColors.html>
  
  
Line 142: Line 152:
 </code> </code>
   * Example: [[/eg-259/examples/lecture10/dynLink.html|dynLink.html]]   * Example: [[/eg-259/examples/lecture10/dynLink.html|dynLink.html]]
-  +
 ---- ----
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/dynLink.html html|dynLink.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynLink.html html|dynLink.html>
  
  
Line 158: Line 168:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/dynValue.html javascript|dynValue.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/dynValue.html javascript|dynValue.html>
  
  
Line 185: Line 195:
  
   * Code:   * Code:
-<source /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 203: Line 213:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/where.html javascript|where.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/where.html javascript|where.html>
  
  
Line 216: Line 226:
  
   * Code:   * Code:
-<source /eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>+<source http://www.cpjobling.me/eg-259/examples/lecture10/anywhere.html javascript|anywhere.html>
  
  
Line 252: Line 262:
  
   * Code -- HTML:   * Code -- HTML:
-<source /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 /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 272: Line 282:
  
   * Code:   * Code:
-<source /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