Introduction to Programming the WWW I

1 / 24

# Introduction to Programming the WWW I - PowerPoint PPT Presentation

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 &amp; Comparison Operators Functions Sequence Loops for loops. Loops (cont’d).

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Introduction to Programming the WWW I' - eli

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

### 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
• 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
• 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
• 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

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)