Introduction to Programming the WWW I

1. Introduction to Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 9

2. 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

3. What’s an object? • Properties (have values) • can be accessed, set, etc • Abilities (methods) • Everything in the Web page is modelled by an “object”

4. Some sample Javascript • See examples from Chapter 1 of JS • Events: respond to user action • Send messages, get input form user

5. More Javascript • Variables: like “x” in algebra -- a name that stands for some other value var myColor = “pink”; window.document.bgColor = myColor;

6. Arrays • An array is a collection of variables in some particular order: var mycolors = new Array(); mycolors[0] = “red”; mycolors[1] = “pink”; mycolors[2] = “blue”;

7. Methods • Dogs bark, cats pur, cars slow down document.write(“Hello world!”) • Lots of predefined methods for manipulating Web pages, we’ll also learn how to define our own

8. Assignment & Comparison • You can change the values of variables: mynumber = 42; mynumber += 37; mynumber -= 28;

9. Comparison 39 == 30 + 9; // True 39 >= 39; // True 2 != 2 // False (2 == 2) || (3 == 5) // True (3 == 4) && (7 == 7) // False

10. Functions • You can write functions to perform specific tasks where the input might be different: • Listing 1.3 in JS book

11. The DOM • A hierarchical model to represent the objects created by a Web browser • document.getElementById();

12. DHTML • DHTML (Dynamic HTML) • Style sheets for color, layout, positioning • Javascript to update these things • Every object has a “style” property • Requires learning some about programming and a lot about Web pages • Example: Hot air balloon

13. What’s on the horizon: • Dynamically modifying page content/appearance • rollovers • style changes • Dynamic visibility • sliding, drop down menus • text popups