Introduction to Programming the WWW I CMSC 10100 01 Summer 2003 Lecture 10 Topics Today JavaScript Introduction cont d Introduction to DOM 2 JavaScript Review Variables Arrays Methods Assignment Comparison Operators Functions Sequence Loops for loops 3 Loops cont d The while loop Format while condition statements Example code i 5 while i 1 i 1 Example Web page whileloop html 4 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 5 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 6 Where to Placing Scripts Scripts can go in the HEAD or the BODY Event handlers in BODY send values to functions in HEAD 7 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 8 JavaScript Resource JavaScript Tutorial for Programmers http wdvl internet com Authoring JavaScript Tutorial 9 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 10 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 11 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 12 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 p align center Hello world p align text node 13 Visualizing Nodes 14 Visualizing Nodes tree Document html body head title text node DOM Nodes p p id p1 text node Hi My name is b text node Steven Estrella id p2 align center b text node Aligned Bold 15 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 16 Basic DOM operations document firstchild document getElementById node parentNode node childNodes 0 node nodeValue node setAttribute att val node style property value 17 Basic DOM operations con d document getElementsByTag document createNode document createTextNode node appendChild aChild node removeChild aChild 18 Example 1 browse nodes var thenode document firstchild childNodes 1 firstchild Document var theNode document getElementById p1 theNode parentNode html body head theNode parentNode parentNode title theNode parentNode parentNode firstChild theNode firstChild theNode childNodes 0 text node DOM Nodes p p id p1 text node Hi My name is b text node Steven Estrella id p2 align center b text node Aligned Bold 19 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 20 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 21 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 22 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 23 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 24