Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-01
• Summer 2003
• Lecture 11

2
Topics Today

• Introduction to DOM (contd)
• More JavaScript examples

3
Reminder

• Final project released
• Quiz3 next Monday
• Class delayed to 1130 next Monday

4
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

5
Review DOM Nodes Example

• ltp aligncentergtHow are you, ltbgtjohnlt/bgtlt/pgt

Element Node
p
Level1
Element Node
Text Node
text node How are you,
aligncenter
b
Level2
Attribute Node
Text Node
text node john
Level3
6
Review Basic DOM Operations 1

• node.firstchild
• node.parentNode
• node.childNodes
• node.childNodes0
• node.nodeValue
• node.setAttribute(att,val)
• node.style.ltpropertygtvalue

7
Review Basic DOM Operations 2

• document.getElementById()
• document.getElementsByTagName()
• document.createElement()
• document.createNode()
• document.createTextNode()
• node.appendChild(newChild)
• node.removeChild(existingChild)

8
Review DOM Examples

• Example1 Browse Nodes
• Example2 Update Nodes
• Changing node text
• Removing and adding nodes
• Using loops to change nodes

9
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

10
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

11
Working with Images

• Using predloading for image swapping
• Creating a slide show
• Animated banners

12
Example 1 Image Swapping (preloading images)

• Have created a crude rollever effect
• Changing the SRC property of ltimggt in an
  onMouseOver event handler
• 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

13
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

14
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

15
Dynamic Techniques in JavaScript

• Sliding menus
• Dropdown menus
• Collapsible menus
• Dynamic clipping
• See DHTML/CSS book chapter 5

16
Code Library Used

• All examples use codelibrary.js
• What codelibrary.js includes?

17
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

18
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 books
  example
• Example listing5-4.html

19
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.hrefeval(stuff)
• Follow the string manipulations inside, then
  evaluate it as a JavaScript value

20
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

21
Dynamic Clipping

• Control visible portion of content
• Use the clip property of the style object
• Example listing5-8.html

22
Final Project

• http//www.classes.cs.uchicago.edu/classes/archive
  /2003/summer/10100-1/hw/project.html