Introduction to Programming the WWW I

Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 10

Topics Today • JavaScript Introduction (cont’d) • Introduction to DOM

JavaScript Review • Variables • Arrays • Methods • Assignment & Comparison Operators • Functions • Sequence • Loops • for loops

Loops (cont’d) • The while loop • Format: while ( condition ) { statements;} • Example code: • i=5; while (i>1){ …; i-=1; } • Example Web page: • whileloop.html

Conditional Branching • Code that makes decisions • The if-else structure • Test a condition • One set of statements if condition is true • Another set of statements if condition is false • Take care to not confuse assignment (=) with equality (==) • Example page: listing2.3.html

Comments • Single line comments • precede the line with two backslashes • //A single line comment • Multi-line comment block • begin the comment with /* and close with */ /* A dense thicket of commentary, spanning many captivating lines of explanation and intrigue. */

Where to Placing Scripts • Scripts can go in the HEAD or the BODY • Event handlers in BODY send values to functions in HEAD

Code Libraries • Reuse your favorite scripts • Store code libraries in plain text files • Use the .js extension for code libraries • Reference your source libraries using the script tag • Example: listing2.6.htmlmylibrary.js Usage: <script type="text/javascript" language=“JavaScript" src="mylibrary.js">

JavaScript Resource • JavaScript Tutorial for Programmers • http://wdvl.internet.com/Authoring/JavaScript/Tutorial/

The DOM • DOM is Document Object Model • The DOM provides an abstract description: • document structure • operations on a document • The DOM describes several markup languages, not just HTML • Vendors support this model to make Web pages interoperable • The W3C DOM1 replaces proprietary DOMs from Netscape and Microsoft

DOM1 Features • Use ID to assist in identifying elements • <div id=“section1”>Some text</div> • Access the element through document.getElementById() function • Access all elements with a given tag name • Use document.getElementByTagName() • Example: • document.getElementsByTagName(“h1”);

Document Structure • The DOM specifies that a document is structured into a tree consisting of nested nodes • <html> is at the top/bottom, <head><body> are its children, <p>,<h1> instances are children of <body>, etc • Every item in the document is a node with a parent and possibly children

More about nodes • Element nodes: • Each tag is an element node • Text nodes (text contained by element nodes) • Text nodes may contain further children • Attribute nodes (align=“center”) • Attributes and text are children nodes of the node containing it <p align=“center”> Hello world</p> p align text node

Visualizing Nodes

Visualizing Nodes (tree)

Manipulating nodes • JavaScript has a DOM API (application programmer interface) that allows us to access, look at, and edit attribute nodes • Every element node has a style child, and this can also be edited to control everything!

Basic DOM operations • document.firstchild • document.getElementById() • node.parentNode • node.childNodes[0] • node.nodeValue • node.setAttribute(‘att’,’val’) • node.style.<property>=“value”

Basic DOM operations (con’d) • document.getElementsByTag() • document.createNode() • document.createTextNode() • node.appendChild(aChild) • node.removeChild(aChild)

Example 1: browse nodes var thenode = document.firstchild. childNodes[1].firstchild var theNode=document.getElementById("p1") theNode.parentNode theNode.parentNode.parentNode theNode.parentNode.parentNode. firstChild theNode.firstChild theNode.childNodes[0]

Example 2: update nodes • Changing node text: listing3-1.html • Removing and adding nodes: listing3-3.html • Using loops to change nodes: listing3-5.html

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

Example 4: Pagewriter • Use JavaScript to append nodes to a page dynamically at loading • Addresses scaling issue if code is externally linked • Example Web page • template.html

Final Project • You will put up a Web site incorporating what we have learned this quarter. It should include • Several Web pages with a common look and feel induced by external style sheets and common header, footer material, navigation tools. These pages should be generated by scripts. Each page should have meaningful content, and many of them should include images and use of color for effect.

Final Project (cont’d) • Tasteful use of dynamic features such as image rollovers, animations, popup HTML, dynamic menus, etc. • Some portion of your code should include nontrivial server-side scripting. This could be a user database, logon system, or shopping system where state is maintained between Web pages, and where the server has to interact with data stored in a file.

Introduction to Programming the WWW I