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 [2008/06/26 16:30] – external edit 127.0.0.1 | eg-259:lecture10 [2011/03/07 08:34] (current) – old revision restored eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ~~SLIDESHOW~~ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ====== Dynamic Documents with JavaScript ====== | ||
+ | |||
+ | **Lecture 10**: To be given on Monday 7< | ||
+ | |||
+ | **Lecturer**: | ||
+ | |||
+ | A dynamic HTML document is one whose tag attributes, tag contents, or element style properties can be changed after the document has been and is still being displayed by a browser | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Dynamic Documents with JavaScript ===== | ||
+ | |||
+ | Informally, a dynamic XHTML document is one that in some way can be changed while it is being displayed by a browser. The most common client-side approach to providing dynamic documents is with JavaScript. Changes to documents can occur when explicitly requested by user interactions, | ||
+ | |||
+ | ---- | ||
+ | |||
+ | This lecture is based on Chapter 6 of Robert W. Sebasta, // | ||
+ | |||
+ | You should review the notes on [[eg-259: | ||
+ | |||
+ | |||
+ | ===== Contents of this Lecture ===== | ||
+ | |||
+ | An introduction to Dynamic HTML | ||
+ | |||
+ | * [[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: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Learning Outcomes ===== | ||
+ | |||
+ | //At the end of this lecture you should be able to answer these questions//: | ||
+ | |||
+ | * Define a dynamic XHTML document. | ||
+ | * What are the standard values for the '' | ||
+ | * 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 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 '' | ||
+ | |||
+ | ===== 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 '' | ||
+ | * Describe the parameters and actions of the '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Moving Elements ===== | ||
+ | |||
+ | * If '' | ||
+ | * Just change the '' | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Element Visibility ===== | ||
+ | |||
+ | * The '' | ||
+ | * The values are '' | ||
+ | <code javascript> | ||
+ | if (dom.visibility == " | ||
+ | dom.visibility = " | ||
+ | else | ||
+ | dom.visibility = " | ||
+ | </ | ||
+ | |||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Dynamic Colours ===== | ||
+ | |||
+ | * Background colour is controlled by the '' | ||
+ | * Foreground colour is controlled by the '' | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | Background color: | ||
+ | <code html> | ||
+ | < | ||
+ | name = " | ||
+ | | ||
+ | </ | ||
+ | * The actual parameter this.value works because at the time of the call, '' | ||
+ | * So, '' | ||
+ | </ | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Dynamically Changing Fonts ===== | ||
+ | |||
+ | * We can change the font properties of a link by using the mouseover and mouseout events to trigger a script that makes the changes: | ||
+ | <code html> | ||
+ | onmouseover = " | ||
+ | this.style.font = ' | ||
+ | onmouseout = " | ||
+ | this.style.font = ' | ||
+ | </ | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Dynamic Content ===== | ||
+ | |||
+ | * The content of an HTML element is addressed with the value property of its associated JavaScript object | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | ===== Stacking Elements ===== | ||
+ | |||
+ | * The '' | ||
+ | * The JavaScript property associated with the '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | ===== Stacking Elements (continued) ===== | ||
+ | * An image element can have an '' | ||
+ | * Anchors can also trigger event handlers when they are clicked | ||
+ | * The '' | ||
+ | <code html> | ||
+ | <a href = " | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Stacking Elements (continued) ===== | ||
+ | |||
+ | * To change stacking order, the handler function must change the '' | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | * A call to the function from an element sets the '' | ||
+ | * It also sets the current top to the new top | ||
+ | |||
+ | |||
+ | |||
+ | ===== Locating the Mouse Cursor ===== | ||
+ | |||
+ | * The coordinates of the element that caused an event are available in the '' | ||
+ | * These are relative to //upper left corner// of the **browser display window** | ||
+ | * '' | ||
+ | * If we want to locate the mouse cursor when the mouse button is clicked, we can use the '' | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Reacting to a Mouse Click ===== | ||
+ | |||
+ | * A mouse click can be used to trigger an action, no matter where the mouse cursor is in the display | ||
+ | * Use event handlers for '' | ||
+ | * Example: [[/ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Slow Movement of Elements ===== | ||
+ | |||
+ | * To animate an element, it must be moved by small amounts, many times, in rapid succession | ||
+ | * JavaScript has two ways to do this, but we cover just one: | ||
+ | <code javascript> | ||
+ | setTimeout(" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Slow Movement of Elements: An Example ===== | ||
+ | |||
+ | * Example: move a text element from its initial position (100, 100) to a new position (300, 300) | ||
+ | * Use the '' | ||
+ | * Use a '' | ||
+ | * A // | ||
+ | * A // | ||
+ | * // | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | * //Another problem//: We need to use some HTML special characters (''<'' | ||
+ | * XML parsers may remove all comments | ||
+ | * So either put the script in a '' | ||
+ | * or (better) put JavaScript in separate file | ||
+ | * These are problems of // | ||
+ | * Both IE6 and NS7 deal correctly with comments | ||
+ | </ | ||
+ | |||
+ | * Code -- HTML: | ||
+ | <source http:// | ||
+ | * Code -- JavaScript: | ||
+ | <source http:// | ||
+ | |||
+ | ===== Dragging and Dropping an Element ===== | ||
+ | |||
+ | * We can use '' | ||
+ | * We know how to move an element -- just change its '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Dragging and Dropping an Element (continued) ===== | ||
+ | |||
+ | * Example: magnetic poetry [[/ | ||
+ | * The DOM 2 event model is required (the '' | ||
+ | * We use both DOM 0 and DOM 2 models (DOM 0 to call the '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | * Code: | ||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Dragging and Dropping an Element (continued) ===== | ||
+ | |||
+ | * Drag and drop requires three processes: | ||
+ | - Get the DOM of the element to be moved when the mouse button is pressed down ('' | ||
+ | * We can get the DOM of the element on which an event occurred with the '' | ||
+ | - Move the element by changing its '' | ||
+ | * Compute the distance of each move as the difference between the current position ( the '' | ||
+ | - Dropping the element when the mouse button is released by undefining the DOM used to carry out the move | ||
+ | |||
+ | ===== Summary of This Lecture ===== | ||
+ | |||
+ | An introduction to Dynamic HTML | ||
+ | |||
+ | * [[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: | ||
+ | |||
+ | ===== Learning Outcomes ===== | ||
+ | |||
+ | //At the end of this lecture you should be able to answer these questions//: | ||
+ | |||
+ | * Define a dynamic XHTML document. | ||
+ | * What are the standard values for the '' | ||
+ | * 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 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 '' | ||
+ | |||
+ | |||
+ | ===== 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 '' | ||
+ | * Describe the parameters and actions of the '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Exercises (1) ===== | ||
+ | |||
+ | //Write, test, validate, and debug (if necessary) the following documents//: | ||
+ | |||
+ | * The document must have a paragraph of at least 10 lines of text that describe you. This paragraph must be centered on the page and have space for only twenty characters per line (that is '' | ||
+ | * Modify the document described in Exercise 1 to add four buttons. These buttons must be labeled Northwest, Northeast, Southwest, and Southeast. When they' | ||
+ | |||
+ | |||
+ | ===== Exercises (2) ===== | ||
+ | |||
+ | //Write, test, validate, and debug (if necessary) the following documents//: | ||
+ | |||
+ | * The document must have a paragraph of text that describes your home. Choose at least three different phrases (three to six words) of this paragraph and make them change font, font style, colour, and font size when the mouse cursor is placed over them. Each of the different phases must change to different fonts, font styles, colours and font sizes. | ||
+ | |||
+ | * The document must contain four short paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can always be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. | ||
+ | |||
+ | |||
+ | ===== Exercises (3) ===== | ||
+ | |||
+ | //Write, test, validate, and debug (if necessary) the following documents//: | ||
+ | |||
+ | * The document must have a small image of yourself, which must appear when the mouse button us clicked at the position of the mouse cursor, regardless of the position of the cursor at that time. | ||
+ | * The document must contain the statement "save time with TIMESAVER 2.2", which continuously moves back and forth across the top of the display. | ||
+ | |||
+ | |||
+ | |||
+ | ===== More Homework Exercises ===== | ||
+ | |||
+ | More Dynamic HTML exercises, taken from Chapter 6 of Chris Bates, //Web Programming: | ||
+ | |||
+ | |||
+ | ===== What's Next? ===== | ||
+ | |||
+ | JavaScript Libraries | ||
+ | * JavaScript Library Overview | ||
+ | * A jQuery Example | ||
+ | * DOM manipulations in jQuery | ||
+ | * Accordian Menu | ||
+ | * jQuery UI widgets | ||
+ | |||
+ | |||
+ | |||
+ | [[eg-259: | ||
+ | |||
+ | |||