introduction to programming the www i n.
Skip this Video
Download Presentation
Introduction to Programming the WWW I

Loading in 2 Seconds...

play fullscreen
1 / 24

Introduction to Programming the WWW I - PowerPoint PPT Presentation

  • Uploaded on

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).

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

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

Download Now An Image/Link below is provided (as is) to download presentation

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

Introduction to Programming the WWW I

CMSC 10100-01

Summer 2003

Lecture 10

topics today
Topics Today
  • JavaScript Introduction (cont’d)
  • Introduction to DOM
javascript review
JavaScript Review
  • Variables
  • Arrays
  • Methods
  • Assignment & Comparison Operators
  • Functions
  • Sequence
  • Loops
    • for loops
loops cont d
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
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
  • 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. */

where to placing scripts
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
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.htmlmylibrary.js


<script type="text/javascript" language=“JavaScript" src="mylibrary.js">

javascript resource
JavaScript Resource
  • JavaScript Tutorial for Programmers
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
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
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
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>



text node

manipulating nodes
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
Basic DOM operations
  • document.firstchild
  • document.getElementById()
  • node.parentNode
  • node.childNodes[0]
  • node.nodeValue
  • node.setAttribute(‘att’,’val’)
basic dom operations con d
Basic DOM operations (con’d)
  • document.getElementsByTag()
  • document.createNode()
  • document.createTextNode()
  • node.appendChild(aChild)
  • node.removeChild(aChild)
example 1 browse nodes
Example 1: browse nodes

var thenode =



var theNode=document.getElementById("p1")







example 2 update nodes
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
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
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
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
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.