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/11/02 08: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.1257149796.txt.gz · Last modified: 2011/01/14 12:27 (external edit)