Introduction to Programming the WWW I
Download
Report
Transcript 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
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
body
head
theNode.parentNode.parentNode
title
theNode.parentNode.parentNode.
text node:
firstChild
DOM Nodes
theNode.firstChild
theNode.childNodes[0]
html
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: listing33.html
• Using loops to change nodes: listing35.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