Material Type: Notes;
Professor: Brown;
Class: Intro to Web Development;
Subject: Information Technology;
University: Southern Polytechnic State University;
Term: Fall 2006;
Download Javascript and HTML - Lecture Slides | IT 3203 and more Study notes Information Technology in PDF only on Docsity!
IT 3204
Introduction to Web Development
JavaScript and HTML
September 27
Syllabus Error Corrected
The first exam is October 2. Please correct
your paper syllabus.
This error has been corrected in the on-line
syllabus.
Labeling Systems
Feedback in a conversation is immediate;
Feedback when we “converse” via a Web site is
at best delayed.
What we call things (labels) are an important part
of the conversation.
Here is a Web Page
Kinds of Labels
Navigation system choices
Contextual links
Headings
Index terms
Labels Within Navigation Systems
MIND
& SPIRIT
Labels Within Navigation Systems Labels as Contextual Links
Labels as Headings Labels as Index Items
About Iconic Labels How Jet Blue Fixed It
A Simple JavaScript Example
Test of JavaScript
A Simple JavaScript Example
var i=5; document.write("
"); document.write("
Number
Square
Cube
"); document.write("
"+i+"
"+i*i+"
"+i*i*i+"
"); document.write("
");
Result of the Example
A two-row table with headings and data
The Document Object
The “document” object is a container for the
displayed HTML; it is a property of “window”
The document object has properties and methods
One of the methods is the “write( )” method, which
sends HTML to the browser’s rendering engine.
The HTML elements displayed by the browser are
properties of the document object.
The Document Object Model
Defines an interface between HTML and applications
DOM 0 Not a standard…
ad hoc model for early support of JavaScript
DOM 1 HTML and XML; 1998
DOM 2 Added style sheet support; 2000
Netscape 6, not complete in IE 6
DOM 3 XML content; future
An HTML Document is a Tree
head
html
body
title h1 p
The DOM Interface
An abstract interface
Logically, a tree-like structure
(not necessarily implemented as a tree)
There must be a correspondence (binding) between
language and model
There can be more than one tree in a document
DOM objects have properties and methods.
The DOM Tree
DOM Example
One object, two properties
type value “text”
name value “address”
(name= is deprecated in XHTML. Use id= instead
of name other than in form elements. If id and name
are both present, they should generally be the same.)
DOM Objects Contain Arrays
HTML elements are usually not required to have
an ID attribute.
The DOM uses arrays to make anonymous
elements accessible to JavaScript.
The document object contains a forms[ ] array.
The forms[ ] array contains an elements[ ] array.
DOM Example
document.forms[0].elements[0]
What about introduction of new elements?
Name: Address: City:
Name: Address:
City:
Identifying Elements
var x=document.getElementById("order").elements; for (var i=0;i<x.length;i++){ if ((x[i].name == "credit") && (x[i].checked)) { selected=x[i].value; } }
Radio Buttons – Checking One Group
Validating Form Input
Why check on client?
fast; no network access
immediate feedback
Why check on server?
secure
can do database lookups
Which way is right?
Validation Example
Phone:
The “verify” Function
function verify( ) { var hasError = false; var phNum=document.getElementById("phone").value; var ok = phNum.search(/^\d{3}-\d{3}-\d{4}$/); if (ok !== 0) { hasError = true; alert("Invalid phone number."); } if (hasError) return false; else return true; }
The HTML Document
Verify Tester
Steps to Client-Side Validation
Verify, field by field, setting a flag.
alert( ) message ... clear, complete and polite...
