Scribd
Upload
12 views66 pages

Javascript 2

Javascript

Uploaded by

Amjad Nawaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
12 views66 pages

Javascript 2

Javascript

Uploaded by

Amjad Nawaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 66

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

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, don’t “overlap”
 Empty-elements: no end tag
 <br /> <img … />
 Note space before />
7
Basic HTML Structure
 Comments:
<!-- … -->
 Example:
<html>
<head>
…
<--- title, meta-
</head> tags, etc. (not
<body> displayed)
….
</body> <--- main content
</html>
(displayed)

8
Larger Example
<html>
<head>
<p>
<title>An Example</title>
<ol type="I" start=7>
</head>
<li><font
<body> color=#00FF00>Green</fon
<h3><hr>An Example</h3> t></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>
<!-- see next column -->

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:
 You’re 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/Documen
t_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 browser’s 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
 user input/output
 math library
 parseInt and
parseFloat
 switch
 arithmetic
 break
 arithmetic comparisons
 labeled break
 for loops
 continue
 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
JavaScript’s Uses Include:
 “Dynamic” web-pages
 What’s 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
What’s 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 Wizard’s 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 UVa’s Safari On-line Books:
http://proquest.safaribooksonline.com/se
arch
29
Browser Compatability
 Use of:
<script type=”text/javascript"
language=”javascript" >
<!--

// ends script hiding -->


</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>
SCRIPT TYPE="text/javascript">
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>
SCRIPT TYPE="text/javascript">
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
<SCRIPT TYPE="text/javascript">
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>"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 value2 = parseFloat( input2 );
var value3 = parseFloat( input3 );
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 ) { 37
Random Numbers
<SCRIPT TYPE="text/javascript">
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
<SCRIPT TYPE="text/javascript">
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;
case 2: ++frequency2; break;
case 3: ++frequency3; break;
case 4: ++frequency4; break;
case 5: ++frequency5; break;
case 6: ++frequency6; 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
<SCRIPT TYPE="text/javascript">
// 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 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
<SCRIPT TYPE="text/javascript">
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' >");
or (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
<SCRIPT TYPE="text/javascript">
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">
ar current = new Date();
ocument.writeln(current);
ocument.writeln( "<H1>String representations and valueOf</H1>" );
ocument.writeln( "toString: " + current.toString() +
"<BR>toLocaleString: " + current.toLocaleString() +
"<BR>toUTCString: " + current.toUTCString() +
"<BR>valueOf: " + current.valueOf() );
ocument.writeln( "<H1>Get methods for local time zone</H1>" );
ocument.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

You might also like