Download presentation
Presentation is loading. Please wait.
1
Introduction to Programming the WWW I
CMSC Summer 2003 Lecture 10
2
Topics Today JavaScript Introduction (cont’d) Introduction to DOM
3
JavaScript Review Variables Arrays Methods
Assignment & Comparison Operators Functions Sequence Loops for loops
4
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
5
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
6
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. */
7
Where to Placing Scripts
Scripts can go in the HEAD or the BODY Event handlers in BODY send values to functions in HEAD
8
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">
9
JavaScript Resource JavaScript Tutorial for Programmers
10
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
11
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”);
12
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
13
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
14
Visualizing Nodes
15
Visualizing Nodes (tree)
16
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!
17
Basic DOM operations document.firstchild document.getElementById()
node.parentNode node.childNodes[0] node.nodeValue node.setAttribute(‘att’,’val’) node.style.<property>=“value”
18
Basic DOM operations (con’d)
document.getElementsByTag() document.createNode() document.createTextNode() node.appendChild(aChild) node.removeChild(aChild)
19
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]
20
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
21
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
22
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
23
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.
24
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.
Similar presentations
