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: Example code: Example Web page: 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 Multi-line comment block 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.html mylibrary.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.