eg-259:lecture10
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| eg-259:lecture10 [2009/03/28 10:16] – eechris | eg-259:lecture10 [2011/03/07 08:34] (current) – old revision restored eechris | ||
|---|---|---|---|
| Line 6: | Line 6: | ||
| ====== Dynamic Documents with JavaScript ====== | ====== Dynamic Documents with JavaScript ====== | ||
| - | **Lecture 10**: To be given on Monday | + | **Lecture 10**: To be given on Monday |
| **Lecturer**: | **Lecturer**: | ||
| Line 35: | Line 35: | ||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| + | |||
| + | ===== Contents of this Lecture (2) ===== | ||
| + | |||
| + | Reacting to the mouse | ||
| + | |||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| Line 52: | Line 57: | ||
| * What are the standard values for the '' | * What are the standard values for the '' | ||
| * 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 | + | ===== 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 '' | * What JavaScript variable is associated with the '' | ||
| * To move an element to the top of the display, do you set the '' | * To move an element to the top of the display, do you set the '' | ||
| + | |||
| + | ===== Learning Outcomes (continued) ===== | ||
| + | |||
| + | //At the end of this lecture you should be able to answer these questions//: | ||
| + | |||
| * What exactly is stored in the '' | * What exactly is stored in the '' | ||
| * What exactly is stored in the '' | * What exactly is stored in the '' | ||
| Line 74: | Line 84: | ||
| ===== Moving Elements ===== | ===== Moving Elements ===== | ||
| - | * If position is set to either '' | + | * If '' |
| * Just change the '' | * Just change the '' | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http:// | + | <source http:// |
| Line 96: | Line 106: | ||
| </ | </ | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| Line 109: | Line 119: | ||
| * Background colour is controlled by the '' | * Background colour is controlled by the '' | ||
| * Foreground colour is controlled by the '' | * Foreground colour is controlled by the '' | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| Line 125: | Line 135: | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| Line 141: | Line 151: | ||
| this.style.font = ' | this.style.font = ' | ||
| </ | </ | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| - | + | ||
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| 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/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| Line 180: | Line 190: | ||
| * To change stacking order, the handler function must change the '' | * To change stacking order, the handler function must change the '' | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| * A call to the function from an element sets the '' | * A call to the function from an element sets the '' | ||
| Line 198: | Line 208: | ||
| * '' | * '' | ||
| * If we want to locate the mouse cursor when the mouse button is clicked, we can use the '' | * If we want to locate the mouse cursor when the mouse button is clicked, we can use the '' | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| 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 '' | * Use event handlers for '' | ||
| - | * Example: [[/~eechris/ | + | * Example: [[/ |
| ---- | ---- | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| Line 238: | Line 248: | ||
| * A // | * A // | ||
| * A // | * A // | ||
| - | * // | + | * // |
| ---- | ---- | ||
| Line 252: | Line 262: | ||
| * Code -- HTML: | * Code -- HTML: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| * Code -- JavaScript: | * Code -- JavaScript: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| ===== 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/ | + | * Example: magnetic poetry [[/ |
| * The DOM 2 event model is required (the '' | * The DOM 2 event model is required (the '' | ||
| * We use both DOM 0 and DOM 2 models (DOM 0 to call the '' | * We use both DOM 0 and DOM 2 models (DOM 0 to call the '' | ||
| Line 272: | Line 282: | ||
| * Code: | * Code: | ||
| - | <source http://77.68.39.12/ | + | <source http://www.cpjobling.me/ |
| Line 294: | Line 304: | ||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| + | |||
| + | ===== Summary of This Lecture (2) ===== | ||
| + | |||
| + | Reacting to the mouse | ||
| + | |||
| * [[eg-259: | * [[eg-259: | ||
| * [[eg-259: | * [[eg-259: | ||
| Line 306: | Line 321: | ||
| * What are the standard values for the '' | * What are the standard values for the '' | ||
| * 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 '' | ||
| + | * To move an element to the top of the display, do you set the '' | ||
| 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 '' | ||
| - | * To move an element to the top of the display, do you set the '' | ||
| * What exactly is stored in the '' | * What exactly is stored in the '' | ||
| * What exactly is stored in the '' | * What exactly is stored in the '' | ||
eg-259/lecture10.1238235368.txt.gz · Last modified: 2011/01/14 12:27 (external edit)