Introduction to Programming the WWW I

1
Introduction to Programming the WWW I

• CMSC 10100-01
• Summer 2003
• Lecture 7

2
Topics Today

• Cascading Style Sheet 2 (CSS2)
• Dynamic HTML concept
• JavaScript Introduction

3
Reminder

• Homework2 due tonight
• Midterm on this Friday
• 1-1.5 hours long
• Cover all the topics so far (including lecture 7)
• Homework3 will be posted tonight or tomorrow
  morning

4
CSS1 Review

• We saw
• selectors, properties, values
• placing style sheets
• some examples
• CSS1 can control every aspect of a page, you may
  get impressed by the online references.

5
CSS2

• CSS2 adds content positioning
• absolute (and fixed) vs. relative
• specify coordinates (relative to top left of box)
• z-index for saying whats on top when things are
  stacked
• The clip, overflow, visibility properties

6
CSS2 approach

• Make each section of the page a separate ltdivgt
  with an ID
• Use positioning for ID selectors, background
  colors, etc (exact control)
• Only need to include HTML, not formatting
  information on each page

7
The Position Property

• Content positioning
• Old solution graphics version of the content
• CSS2 solution is more efficient
• Example listing2-1.html
• 1.9K/0.3sec vs. 40K/8sec
• Absolute positioning Relative positioning
• Example listing2-3.html

8
The Visibility Property

• Hide any element by setting the visibility
  property to hidden.
• Example visibility.html

9
The Overflow Property

• CSS2 enable customizing the size of the bounding
  box of any block-level element
• Overflow content is handled by overflow property
• visible, hidden, scroll, auto
• Example overflow.html

10
The Clip Property

• CSS2 permits cropping an image or other element
• Applied only to absolutely positioned elements
• Examples
• cliporiginal.html
• clipcropped.html

11
Dynamic HTML

• Dynamic HTML HTML 4 CSS JavaScript
• HTML 4 represents the structure and it is static
• CSS represents the appearance details
• JavaScript works on the dynamic behaviors of the
  content!
• Document Object Model (DOM) provides a
  programming interface between HTML/CSS and
  JavaScript
• Dynamic HTML isnt really about HTML
• An abstract concept of breaking up a page into
  manipulable elements, and exposing them to script

12
Why Dynamic HTML?

• Web evolves
• static displays of data gt interactive
  applications
• Allows a Web page to change after loaded into the
  browser
• No need to communicate with server for an update
• More efficient than olden days solution Common
  Gateway Interface (CGI)

13
DHTML Main Components

• Positioning
• Precisely placing blocks of content on the page
  and, if desired, moving these blocks around
• Style modifications
• On-the-fly altering the aesthetics of content on
  the page
• Event handling
• How to relate user events to changes in
  positioning or other style modifications

14
JavaScript

• Scripting language
• Interpreted by browser
• Interacts with Web pages
• Started in 1995 - Netscape 2.0
• Microsoft followed suit
• Long wranglings over standardizing it across
  browsers

15
Why Learn JavaScript?

• Broad support among Web browsers
• Vast libraries of scripts available online
• Applicable to other host environments
• Allows use of reusable code libraries
• Similar syntax to C, C, and Java
• Encourages creative problem solving

16
Whats an object?

• Properties (have values)
• can be accessed, set, etc
• Actions (methods)
• Object instance
• Everything in the Web page is modeled by an
  object
• Example page sunflowerlady.html
• window.document.sunflowerphoto

17
Some sample JavaScript

• See examples from Chapter 1 of JS
• Rolloverimage.html
• Events respond to user actions
• Send messages, get input from user
• Userinput.html
• We will cover FORM tag in next lecture