Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
84 views

Cs453 D HTML Javascript 1

This document provides an overview of HTML documents and JavaScript. It begins with basic HTML tags and structure, then discusses JavaScript characteristics, topics, and uses. It provides examples of JavaScript code for document writing, alerts, user input/output, functions, random numbers, and games like dice rolling. The document aims to introduce readers to both HTML and JavaScript concepts.

Uploaded by

niyati25
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
84 views

Cs453 D HTML Javascript 1

This document provides an overview of HTML documents and JavaScript. It begins with basic HTML tags and structure, then discusses JavaScript characteristics, topics, and uses. It provides examples of JavaScript code for document writing, alerts, user input/output, functions, random numbers, and games like dice rolling. The document aims to introduce readers to both HTML and JavaScript concepts.

Uploaded by

niyati25
Copyright
© © All Rights Reserved
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

W3C Standards that are relevant

And principles and issues


DOM, XML, XHTML, ECMAScript

JavaScript introduction
Your tasks:

HTML, JavaScript exercises in VirtualLabs


Homework 2 on JavaScript
2

Readings

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

People like to ignore this idea

Presentation based on structure


Presentation may vary, perhaps based on
display characteristics, user-preference, etc.
E.g. use <B> vs. <EM>
<font> tag?

XML and CSS or XSL

Tags and Elements

Example of an element:
<name attr1=attrval>content</name>
Begin and end tags set off a section of a
document

content can contain other elements

Has a semantic property by tag-name


Modified by attributes
Elements nest, dont overlap

Empty-elements: no end tag

<br /> <img />


Note space before />
7

Basic HTML Structure

Comments:
<!-- -->
Example:
<html>
<head>

</head>
<body>
.
</body>
</html>

<--- title, metatags, etc. (not


displayed)
<--- main content
(displayed)
8

Larger Example
<html>
<head>
<title>An Example</title>
</head>
<body>
<h3><hr>An Example</h3>
<p align="left">
<font face="Comic Sans MS"
size="4"><b>
Hello World!</b></font>
</p>
<p align="right">
<font size="5"><u>I am
21.</u></font>
</p>
<!-- see next column -->

<p>
<ol type="I" start=7>
<li><font
color=#00FF00>Green</fon
t></li>
<li>Yellow</li>
<ul type=square>
<li>John</li>
<li>Mike</li>
</ul>
</ol>
</p>
</body>
</html>
9

Displays As

10

Basic Tags

Text display:

Structure:

<em>, <strong>, <em>


<h1>, <h2>, <h3>
<p>
<ul>, <ol>, <blockquote>

Attributes:

Align, text, bgcolor, etc.


11

Basic Tags (2)

Links:
<a href=></a>
Images:

Tables

<img src=> an empty tag


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
document.writeln
document tags
window.alert
user input/output
parseInt and
parseFloat
arithmetic
arithmetic comparisons
for loops

while loops
do-while loops
if-else
variable values in tags
math library
switch
break
labeled break
continue
Booleans
25

JavaScript Topics

functions
random numbers
rolling dice
form input
form output
submit buttons
games

arrays
searching
strings
substrings
string conversions
markup methods

26

JavaScripts Uses Include:

Dynamic web-pages

Image manipulation

Swapping, rollovers, slide shows, etc.

Date, time stuff (e.g. clocks, calendars)


HTML forms processing

Whats DHTML? (in a second)

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/searc
h
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' >");
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

<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">


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

You might also like