Cs453 D HTML Javascript 1

HTML Documents and
JavaScript
Tom Horton
Alfred C. Weaver
CS453 Electronic Commerce
1
Overview
Some basic HTML
And principles and issues
W3C Standards that are relevant
DOM, XML, XHTML, ECMAScript
JavaScript introduction
Your tasks:
HTML, JavaScript exercises in VirtualLabs
Homework 2 on JavaScript
2
Readings
Many on-line tutorials
www.w3schools.com/Xhtml
Other on-line references (report!)
Our textbook
Chap. 12 on HTML
Virtual Lab exercises
On HTML, JavaScript
3
HTML Background
Many markup languages in the past
SGML: Standard Generalized Markup
Language
HTML (Hypertext Markup Language) based
on SGML
XML (eXtensible Markup Language)
replaces SGML
XHTML is replacing HTML
4
Principles
Distinguish structure from presentation
Presentation based on structure
Presentation may vary, perhaps based on display
characteristics, user-preference, etc.
People like to ignore this idea
E.g. use <B> vs. <EM>
<font> tag?
XML and CSS or XSL
5
6
Tags and Elements
Example of an element:
<name attr1=attrval>content</name>
Begin and end tags set off a section of a
document
Has a semantic property by tag-name
Modified by attributes
content can contain other elements
Elements nest, dont overlap
Empty-elements: no end tag
<br /> <img />
Note space before /> 7
Basic HTML Structure
Comments:

Example:
<html>
<head> <--- title, meta-tags,

</head>
etc. (not displayed)
<body>
. <--- main content
</body> (displayed)
</html>
8
Larger Example
<html>
<head>
<p>
<title>An Example</title>
<ol type="I" start=7>
</head>
<li><font
<body> color=#00FF00>Green</font>
<h3><hr>An Example</h3> </li>
<p align="left"> <li>Yellow</li>
<font face="Comic Sans MS" <ul type=square>
size="4"><b> <li>John</li>
Hello World!</b></font> <li>Mike</li>
</p> </ul>
<p align="right"> </ol>
<font size="5"><u>I am </p>
21.</u></font>
</body>
</p>
</html>

9
Displays As
10
Basic Tags
Text display:
<em>, <strong>, <em>
Structure:
<h1>, <h2>, <h3>
<p>
<ul>, <ol>, <blockquote>
Attributes:
Align, text, bgcolor, etc.
11
Basic Tags (2)
Links:
<a href=></a>
Images:
<img src=> an empty tag
Tables
Use an editor!
Forms: later
12
More HTML
Learn on your own
You may never code in raw HTML
You may need to tweak HTML files created by
a tool
You will need to understand HTML to code in
JavaScript etc.
You will need to understand HTML to know
limitations on how docs on the web can be
structured
13
Question:
Youre writing software to process an
HTML page
A web-browser engine, for example
What data structure would best
represent an HTML document?
Why?
14
Discuss and give me details
15
Document Object Model
(DOM)
An model for describing HTML
documents (and XML documents)
A standard (ok, standards)
Independent of browser, language
(ok, mostly)
A common set of properties/methods to
access everything in a web document
APIs in JavaScript, for Java, etc.
16
DOM
You get
anything you
want from
More info:
http://en.wikipedia.org/wiki/Document_
Object_Model 17
W3C Standards
XML, XHTML
CSS, XSL
XSLT
DOM
ECMAScript
etc
18
JavaScript
An example of a scripting langauge
that is embedded in HTML documents
The browsers display engine must
distinguish from HTML and Script
statements
Others like this:
PHP (later in the course)
19
History
JavaScript created by Netscape
JScript created by Microsoft
IE and Netscape renderings are slightly
different
Standardized by European Computer
Manufacturers Association (ECMA)
http://www.ecma-international.
org/publications /standards/Ecma-262.htm
20
General Format
<!doctype ...>
<html>
<Head>
<Title> Name of web page </title>
<script type="text/javascript">
...script goes here
</script>
</head
<body>
...page body here: text, forms, tables
...more JavaScript if needed
...onload, onclick, etc. commands here
</body>
</html>
21
Characteristics
Case sensitive
Object oriented
Produces an HTML document
Dynamically typed
Standard operator precedence
Overloaded operators
Reserved words
22
Characteristics
Division with / is not integer division
Modulus (%) is not an integer operator
5 / 2 yields 2.5
5.1 / 2.1 yields 2.4285714285714284
5 % 2 yields 1
5.1 % 2.1 yields 0.8999999999999995
23
Characteristics
" and ' can be used in pairs
Scope rules for variables
Strings are very common data types
Rich set of methods available
Arrays have dynamic length
Array elements have dynamic type
Arrays are passed by reference
Array elements are passed by value
24
JavaScript Topics
code placement while loops
document.writeln do-while loops
document tags if-else
window.alert variable values in tags
math library
user input/output
switch
parseInt and parseFloat
break
arithmetic labeled break
arithmetic comparisons continue
for loops Booleans
25
JavaScript Topics
functions arrays
random numbers searching
rolling dice strings
form input substrings
form output string conversions
submit buttons markup methods
games
26
JavaScripts Uses Include:
Dynamic web-pages
Whats DHTML? (in a second)
Image manipulation
Swapping, rollovers, slide shows, etc.
Date, time stuff (e.g. clocks, calendars)
HTML forms processing
Verifying input; writing output to fields
Cookies
27
Whats DHTML?
Purpose: make dynamic / interactive
web-pages on the client side
Use of a collection of technologies
together to do this, including
Markup language (HTML, XML, etc.)
Scripting language (JavaScript, etc.)
Presentation language (CSS etc.)
28
Other References
CS453 Virtual Lab exercises
The Web Wizards Guide To JavaScript,
Steven Estrella, Addison-Wesley
JavaScript for the World Wide Web, Gesing
and Schneider, Peachpit Press
http://www.w3schools.com/js/
www.javascript.com
E-books in UVas Safari On-line Books:
http://proquest.safaribooksonline.com/search
29
Browser Compatability
Use of:
<script type=text/javascript"
language=javascript" >


</script>
language= for pre IE5 and NS6
Comment for very old browsers (e.g. IE2)
BTW, comments in HTML vs. in JavaScript
30
Organization of JavaScript
Create functions (non-OO style)
Define in header
Or load a .js file in header:
<script type="text/javascript"
language="javascript" src="mylib.js">
Functions called in <BODY>

Often in response to events, e.g.
<input type="button" onclick="myFunc();">
Global variables
31
JavaScript
Programming by example
32
document.writeln
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<! Welcome to JavaScript -->
<HEAD>
<TITLE> Welcome to JavaScript </TITLE>
<SCRIPT TYPE="text/javascript">
document.writeln( "<FONT COLOR='magenta'><H1>Welcome to ",
"JavaScript Programming!</H1></FONT>" );
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
33
document.write
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Using document.write </TITLE>
document.write ( "<H1>Welcome to ");
document.writeln( "JavaScript Programming!</H1>" );
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
34
window.alert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Using window.alert </TITLE>
window.alert( "Welcome to\nJavaScript\nProgramming!" );
</SCRIPT>
</HEAD>
<BODY>
<P>Click Refresh (or Reload) to run this script again.</P>
</BODY>
</HTML>
35
User input/output
var firstNumber, // first string entered by user
secondNumber, // second string entered by user
number1, // first number to add
number2, // second number to add
sum; // sum of number1 and number2
// read in first number from user as a string
firstNumber = window.prompt("Enter first integer", "0" );
// read in second number from user as a string
secondNumber = window.prompt( "Enter second integer", "0" );
// convert numbers from strings to integers
firstNumber = parseInt(firstNumber);
number2 = parseInt( secondNumber );
// add the numbers
sum = firstNumber + number2;
// display the results
document.writeln( "<H1>The sum is " + sum + "</H1>" );
</SCRIPT> 36
Functions
<SCRIPT TYPE = "text/javascript">
var input1 = window.prompt( "Enter first number", "0" );
var input2 = window.prompt( "Enter second number", "0" );
var input3 = window.prompt( "Enter third number", "0" );
var value1 = parseFloat( input1 );
var maxValue = maximum( value1, value2, value3 );
document.writeln( "First number: " + value1 +
"<BR>Second number: " + value2 +
"<BR>Third number: " + value3 +
"<BR>Maximum is: " + maxValue );
// maximum method definition (called from above)
function maximum( x, y, z ) {
return Math.max( x, Math.max( y, z ) );
}
</SCRIPT>
37
Random Numbers
var value;
document.writeln( "<H1>Random Numbers</H1>" +
"<TABLE BORDER = '1' WIDTH = '50%'><TR>" );
for ( var i = 1; i <= 20; i++ ) {
value = Math.floor( 1 + Math.random() * 6 );
document.writeln( "<TD>" + value + "</TD>" );
if ( i % 5 == 0 && i != 20 )
document.writeln( "</TR><TR>" );
}
document.writeln( "</TR></TABLE>" );
</SCRIPT>
38
Roll the Die
var frequency1 = 0, frequency2 = 0,
frequency3 = 0, frequency4 = 0,
frequency5 = 0, frequency6 = 0, face;
// summarize results
for ( var roll = 1; roll <= 6000; ++roll ) {
face = Math.floor( 1 + Math.random() * 6 );
switch ( face ) {
case 1: ++frequency1; break;
}
}
document.writeln( "<TABLE BORDER = '1' WIDTH = '50%'>" ); ..... 39
Rules of Craps
First roll:
7 or 11 is a win
2, 3, or 12 is a lose
otherwise, roll becomes your point
Subsequent rolls:
rolling your point is a win
7 or 11 is a lose
otherwise continue to roll
40
Craps
// variables used to test the state of the game
var WON = 0, LOST = 1, CONTINUE_ROLLING = 2;
// other variables used in program
var firstRoll = true, // true if first roll
sumOfDice = 0, // sum of the dice
myPoint = 0, // point if no win/loss on first roll
gameStatus = CONTINUE_ROLLING; // game not over yet
41
Craps
// process one roll of the dice
function play() {
if ( firstRoll ) {
// first roll of the dice
sumOfDice = rollDice();
switch ( sumOfDice ) {
case 7: case 11:
// win on first roll
gameStatus = WON;
document.craps.point.value = ""; // clear point field
break;
case 2: case 3: case 12:
// lose on first roll
gameStatus = LOST;
document.craps.point.value = ""; // clear point field
break; 42
Craps
default:
// remember point
gameStatus = CONTINUE_ROLLING;
myPoint = sumOfDice;
document.craps.point.value = myPoint;
firstRoll = false;
}
}
else {
sumOfDice = rollDice();
if ( sumOfDice == myPoint ) gameStatus = WON;
else if ( sumOfDice == 7 ) gameStatus = LOST;
}
43
Craps
if ( gameStatus == CONTINUE_ROLLING ) window.alert ("Roll again");
else {
if ( gameStatus == WON ) {
window.alert ("Player wins. " + "Click Roll Dice to play again.");
document.craps.point.value = " ";
}
else {
window.alert ("Player loses. " + "Click Roll Dice to play again.");
document.craps.point.value = " ";
}
firstRoll = true;
}
}
44
Craps
// roll the dice
function rollDice() {
var die1, die2, workSum;
die1 = Math.floor( 1 + Math.random() * 6 );
die2 = Math.floor( 1 + Math.random() * 6 );
workSum = die1 + die2;
document.craps.firstDie.value = die1;
document.craps.secondDie.value = die2;
document.craps.sum.value = workSum;
return workSum;
}
</SCRIPT>
45
Poker Hand
function rand1toN(N) {
return Math.floor( 1+Math.random()*N );
}
function dealcard(card) {
var rank = new Array(0,"A","2","3","4","5","6","7",
"8","9","T","J","Q","K");
var suit = new Array(0, "Spades", "Hearts", "Diamonds", "Clubs");
card[0] = rank[rand1toN(13)];
card[1] = suit[rand1toN(4)];
}
46
Poker Hand
var card = new Array(2);
var player = new Array(10);
var dealer = new Array(10);
for (var i=0; i<=4; i++) {
dealcard(card);
player[i*2] = card[0];
player[i*2+1] = card[1];
dealcard(card);
dealer[i*2] = card[0];
dealer[i*2+1] = card[1];
}
47
Poker Hand
document.writeln("<H1> PLAYER </H1>");
document.writeln("<TABLE BORDER='1' >");
for (var i=0; i<=4; i++) {
document.writeln("<TR><TD><P>" + player[i*2] + "</TD>"
+ "<TD><P>" + player[i*2+1] + "</TD></TR>");
}
document.writeln("</TABLE> </HTML>");
</SCRIPT>
48
Character Processing
var s = "ZEBRA";
var s2 = "AbCdEfG";
document.writeln( "<P> Character at index 0 in '"+
s + '" is " + s.charAt( 0 ) );
document.writeln( "<BR>Character code at index 0 in '" +
s + "' is " + s.charCodeAt( 0 ) + "</P>" );
document.writeln( "<P>'" + String.fromCharCode( 87, 79, 82, 68 ) +
"' contains character codes 87, 79, 82 and 68</P>" );
document.writeln( "<P>'" + s2 + "' in lowercase is '" +
s2.toLowerCase() + "'" );
document.writeln( "<BR>'" + s2 + "' in uppercase is '" +
s2.toUpperCase() + "'</P>" );
</SCRIPT>
49
Dates and Times
<SCRIPT LANGUAGE = "JavaScript">
var current = new Date();
document.writeln(current);
document.writeln( "<H1>String representations and valueOf</H1>" );
document.writeln( "toString: " + current.toString() +
"<BR>toLocaleString: " + current.toLocaleString() +
"<BR>toUTCString: " + current.toUTCString() +
"<BR>valueOf: " + current.valueOf() );
document.writeln( "<H1>Get methods for local time zone</H1>" );
document.writeln( "getDate: " + current.getDate() +
"<BR>getDay: " + current.getDay() + "<BR>getMonth: " +
current.getMonth() + "<BR>getFullYear: " + current.getFullYear() +
"<BR>getTime: " + current.getTime() + "<BR>getHours: " +
current.getHours() + "<BR>getMinutes: " + current.getMinutes() +
"<BR>getSeconds: " + current.getSeconds() + "<BR>getMilliseconds: " +
current.getMilliseconds() + "<BR>getTimezoneOffset: " +
current.getTimezoneOffset() );
50
Dates and Times
document.writeln( "<H1>Specifying arguments for a new Date</H1>" );
var anotherDate = new Date( 1999, 2, 18, 1, 5, 3, 9 );
document.writeln( "Date: " + anotherDate );
document.writeln( "<H1>Set methods for local time zone</H1>" );
anotherDate.setDate( 31 );
anotherDate.setMonth( 11 );
anotherDate.setFullYear( 1999 );
anotherDate.setHours( 23 );
anotherDate.setMinutes( 59 );
anotherDate.setSeconds( 59 );
document.writeln( "Modified date: " + anotherDate );
</SCRIPT>
51
Radio buttons
Assure that at least one radio button is
clicked before taking action
52
Checkboxes
Respond to selections made with
checkboxes
53
Textboxes
Detecting an empty textbox
54
Self-grading Tests
Collecting and evaluating answers to
questions
55
Character String Processing
Validate an email address
56
Cookies
Write a cookie on the client's device
57
Events
JavaScript can execute a statement (typically, call
a function) when an event occurs
< oneventname="javascript stmt;">
<BODY ONLOAD="func();">
<INPUT TYPE="submit" ONSUBMIT="f();">
58
Events
onsubmit - call when submit button is clicked
onclick - call when this button is clicked
onreset - call when the reset button is clicked
onload - call after page loads
onmouseover - call when mouse pointer enters image area
onmouseout - call when mouse pointer leaves image area
onfocus - call when control receives focus
onblur - call when a control loses focus
onchange - call when a control loses focus and the value of
its contents has changed
many more 59
Mouse Events
Illustrate onmouseover and
onmouseout
60
Handling Time
Create a simple JavaScript clock
61
Controlling Time
Turn a clock on and off and format the
time string
62
Handling Images
Create a slide show
63
Generate Real-Time Data
Simulate monitoring real-time
information from a device
64
Continuous Update
Gather data synchronously using the
clock as the event generator
65
End of Examples
66

Cs453 D HTML Javascript 1

Uploaded by

Cs453 D HTML Javascript 1

Uploaded by

HTML Documents and

// ends script hiding -->

Functions called in <BODY>

You might also like