Transcript Introduction to Programming the WWW I
Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 11
Topics Today • Introduction to DOM (cont’d) • More JavaScript examples 2
Reminder • Final project released • Quiz3 next Monday • Class delayed to 11:30 next Monday 3
Review: DOM Nodes • • • • Element nodes Each tag is an element node Text nodes Text contained by element node Attribute nodes Attribute associate with element node Attributes and text nodes are children nodes of the node containing it 4
Review: DOM Nodes Example
How are you, john
Element Node
Level1 p Level2 align:center
Attribute Node
text node: How are you, Level3
Text Node
b text node: john
Element Node Text Node
5
Review: Basic DOM Operations [1] • • • • • • •
node
.firstchild
node
.parentNode
node
.childNodes
node
.childNodes[0]
node
.nodeValue
node
.setAttribute(‘
att’
,’
val
’)
node
.style.<
property
>=“
value
” 6
Review: Basic DOM Operations [2] • • • • • • • document.getElementById() document.getElementsByTagName() document.createElement() document.createNode() document.createTextNode()
node
.appendChild(
newChild
)
node
.removeChild(
existingChild
) 7
Review: DOM Examples • Example1: Browse Nodes • Example2: Update Nodes Changing node text Removing and adding nodes Using loops to change nodes 8
Example 3: Updating Node Style • Change alignment, color, and size through JavaScript buttons • Note that when CSS properties are hyphenated (e.g. text-algin ), JavaScript refers to them with the dash removed and the next letter capitalized (e.g. textAlign ) • Example Web page: styleupdates.html
9
Example 4: Page Writer • • • Use JavaScript to append nodes to a page dynamically at loading time Addresses scaling issue if code is externally linked Example Web page template.html
10
Working with Images • Using predloading for image swapping • Creating a slide show • Animated banners 11
Example 1: Image Swapping (preloading images) • • Have created a crude rollever effect Changing the SRC onMouseOver property of event handler in an Example: rolloverimage.html
This technique is not recommended! Why?
Create more effective rollovers by preloading image files Why it is efficient?
Runs in only those browsers that support the Image object Example: newrolloverimage.html
12
Example 2: Creating a Slide Show • • • • Preloading multiple images can be applied to creating slide shows Mouseover events are common triggers for image swapping but CLICK events work just as well Buttons or links with onclick handlers may be used to trigger image swaps Function to change images may do different things based on what parameter received ( next or previous) • Example: listing5.1.html
13
Example 3: Animated Advertising Banners • Banner with images that change with a schedule is one use of the setTimeout() method • • This method allows you to schedule tasks for the Web browser to perform after a given delay A unique number for each requested task may be stored in a variable so that the task may be cancelled using the clearTimeout() method • Example: listing5.2.html
14
Dynamic Techniques in JavaScript • • • • Sliding menus Dropdown menus Collapsible menus Dynamic clipping •
See DHTML/CSS book chapter 5
15
Code Library Used • All examples use codelibrary.js
• What codelibrary.js
includes?
16
Sliding Menus • Get the menu out of the way to give more space for reading • • Need a clickable area to begin the sliding Example: listing5-2.html
17
Dropdown Menus • Useful for giving sub-choices within a given category • Need some dynamic visibility plus some positioning of divs • • Start with scaled-down version of the book’s example Example: listing5-4.html
18
Some Points • • • • Note arrays of URLs created Note that hide and drop menu functions can work on any menu Go to a page uses the code: window.location.href=eval(stuff) Follow the string manipulations inside, then evaluate it as a JavaScript value 19
Collapsible Menus • • • • • • Simulate hierarchical file trees Set display to none to hide menu Set display to block to show menu Enhance with text node substitution Enhance with cursor and color changes Example: listing5-6.html
20
Dynamic Clipping • • • Control visible portion of content Use the clip property of the style object Example: listing5-8.html
21
Final Project http://www.classes.cs.uchicago.edu/classes/ archive/2003/summer/10100 1/hw/project.html
22