1. Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 7

2. 2 Topics Today Cascading Style Sheet 2 (CSS2) Dynamic HTML concept JavaScript Introduction

3. 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. 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. 5 CSS2 CSS2 adds content positioning:  absolute (and fixed) vs. relative  specify coordinates (relative to top left of box)  z-index: for saying what’s on top when things are stacked The clip, overflow, visibility properties

6. 6 CSS2 approach Make each section of the page a separate 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. 7 The Position Property Content positioning  Old solution: graphics version of the content CSS2 solution is more efficient  Example: listing2-1.htmllisting2-1.html  1.9K/0.3sec vs. 40K/8sec Absolute positioning & Relative positioning  Example: listing2-3.htmllisting2-3.html

8. 8 The Visibility Property Hide any element by setting the visibility property to hidden. Example: visibility.htmlvisibility.html

9. 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.htmloverflow.html

10. 10 The Clip Property CSS2 permits cropping an image or other element Applied only to absolutely positioned elements Examples:  cliporiginal.html cliporiginal.html  clipcropped.html clipcropped.html

11. 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 isn’t really about HTML  An abstract concept of breaking up a page into manipulable elements, and exposing them to script

12. 12 Why Dynamic HTML? Web evolves  static displays of data —> 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. 13 DHTML Main Components 1. Positioning Precisely placing blocks of content on the page and, if desired, moving these blocks around 2. Style modifications On-the-fly altering the aesthetics of content on the page 3. Event handling How to relate user events to changes in positioning or other style modifications

14. 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. 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. 16 What’s 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.htmlsunflowerlady.html  window.document.sunflowerphoto

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