ICCT Wiki

User Tools

Site Tools

Trace: • home
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
eg-259:lecture10 [2011/03/06 11:35] – external edit 127.0.0.1eg-259:lecture10 [2011/03/07 08:34] (current) – old revision restored 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? 
-  * 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) =====+===== Learning Outcomes =====
  
 //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 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?    * 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? 
 +
 +===== 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 ''clientX'' and ''clientY'' properties after a mouse click? 
   * What exactly is stored in the ''screenX'' and ''screenY'' properties after a mouse click?    * What exactly is stored in the ''screenX'' and ''screenY'' 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? 
 +
 +===== 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 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? 
 +  * 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? 
  
  
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?  
   * 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? 
   * What exactly is stored in the ''screenX'' and ''screenY'' properties after a mouse click?    * What exactly is stored in the ''screenX'' and ''screenY'' properties after a mouse click? 
eg-259/lecture10.1299411315.txt.gz · Last modified: 2011/03/06 11:42 (external edit)