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