Java script

COMP519: Web Programming

Fall 2006
Acknowledgment:
The slides are by Dr. David Reed.
client-side programming with JavaScript
 scripts vs. programs
 JavaScript vs. JScript vs. VBScript
 common tasks for client-side scripts

 JavaScript
 data types & expressions
 control statements
 functions & libraries
 strings & arrays
 Date, document, navigator, user-defined classes

Client-Side Programming

• recall: HTML is good for developing static pages
 can specify text/image layout, presentation, links, …
 Web page looks the same each time it is accessed

 in order to develop interactive/reactive pages, must integrate programming

• client-side programming
 programs are written in a separate programming language
e.g., JavaScript, JScript, VBScript
 programs are embedded in the HTML of a Web page, with tags to identify the program
component
e.g., <script type="text/javascript"> … </script>
 the browser executes the program as it loads the page, integrating the dynamic output of
the program with the static content of HTML

Scripts vs. Programs

• a scripting language is a simple, interpreted programming language
 scripts are embedded as plain text, interpreted by application

 simpler execution model: don't need compiler or development environment
 saves bandwidth: source code is downloaded, not compiled executable
 platform-independence: code interpreted by any script-enabled browser
 but: slower than compiled code, not as powerful/full-featured

JavaScript: the first Web scripting language, developed by Netscape in 1995
syntactic similarities to Java/C++, but simpler & more flexible
(loose typing, dynamic variables, simple objects)

JScript: Microsoft version of JavaScript, introduced in 1996
same core language, but some browser-specific differences
fortunately, IE, Netscape, and Firefox can (mostly) handle both
JavaScript & JScript

JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard

VBScript: client-side scripting version of Microsoft Visual Basic

Common Scripting Tasks
• adding dynamic features to Web pages
 validation of form data
 image rollovers
 time-sensitive or random page elements
 handling cookies

• defining programs with Web interfaces
 utilize buttons, text boxes, clickable images, prompts, etc

• limitations of client-side scripting
 since script code is embedded in the page, it is viewable to the world
 for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
 since designed to run on any machine platform, scripts do not contain platform specific
commands
 script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development

JavaScript
• JavaScript code can be embedded in a Web page using SCRIPT tags
 the output of JavaScript code is displayed as if directly entered in HTML

<html> document.write displays text in page
<!–- COMP519 js01.html 16.08.06 -->
text to be displayed can include HTML
<head>
<title>JavaScript Page</title> tags
</head>
the tags are interpreted by the browser
<body> when the text is displayed
<script type="text/javascript">
// silly code to demonstrate output

document.write("Hello world!"); as in C++/Java, statements end with ;
document.write("<p>How are <br/>" +
"<i>you</i>?</p>");
</script> JavaScript comments similar to C++/Java

<p>Here is some static text as well. // starts a single line comment
</p>
</body> /*…*/ enclose multi-line comments
</html>

view page

JavaScript Data Types & Variables
• JavaScript has only three primitive data types
String : "foo" 'howdy do' "I said 'hi'." ""
Number: 12 3.14159 1.5E6
Boolean : true false *Find info on Null, Undefined

<html> assignments are as in C++/Java
<!–- COMP519 js02.html 16.08.06 -->
message = "howdy";
<head> pi = 3.14159;
<title>Data Types and Variables</title>
</head>
variable names are sequences of letters,
<body> digits, and underscores: start with a letter or
<script type="text/javascript"> an underscore
var x, y;
x= 1024;
variables names are case-sensitive
y=x; x = "foobar";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>"); you don't have to declare variables, will be
</script> created the first time used, but it’s better if
</body> you use var statements
</html>

var message, pi=3.14159;
view page
variables are loosely typed, can be
assigned different types of values

JavaScript Operators & Control Statements

<html>
standard C++/Java operators &
<!–- COMP519 js03.html 16.08.06 --> control statements are provided
<head> in JavaScript
<title>Folding Puzzle</title> • +, -, *, /, %, ++, --, …
</head>
• ==, !=, <, >, <=, >=
<body> • &&, ||, !,===,!==
distanceToSun = 93.3e6*5280*12; • if-then, if-then-else, switch
thickness = .002;
• while, for, do-while, …
foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2; PUZZLE: Suppose you took a piece
foldCount++; of paper and folded it in half, then in
}
document.write("Number of folds = " + half again, and so on.
foldCount);
</script>
</body>
How many folds before the thickness
</html> of the paper reaches from the earth to
the sun?
view page
*Find more info on this subject

JavaScript Math Routines
<html> the Math object
<!–- COMP519 js04.html 16.08.06 -->
contains functions
<head> and constants
<title>Random Dice Rolls</title>
</head>
Math.sqrt
<body> Math.pow
<div style="text-align:center"> Math.abs
<script type="text/javascript"> Math.max
roll1 = Math.floor(Math.random()*6) + 1; Math.min
roll2 = Math.floor(Math.random()*6) + 1; Math.floor
Math.ceil
document.write("<img src='http://www.csc.liv.ac.uk/"+
Math.round
"~martin/teaching/comp519/Images/die" +
roll1 + ".gif'/>");
document.write("  "); Math.PI
document.write("<img src='http://www.csc.liv.ac.uk/"+ Math.E
roll2 + ".gif'/>"); Math.random
</script>
</div>
function returns
</body> number in [0..1)
</html>

view page

Interactive Pages Using Prompt
crude user interaction can
<html>

take place using prompt
<head>
<title>Interactive page</title> 1st argument: the prompt
</head> message that appears in the
dialog box
<body>
userName = prompt("What is your name?", ""); 2nd argument: a default value
that will appear in the box (in
userAge = prompt("Your age?", ""); case the user enters nothing)
userAge = parseFloat(userAge);

document.write("Hello " + userName + ".") the function returns the value
if (userAge < 18) { entered by the user in the
document.write(" Do your parents know " +
"you are online?");
dialog box (a string)
}
else { if value is a number, must use
document.write(" Welcome friend!"); parseFloat to convert
}
</script>
forms will provide a better
<p>The rest of the page...</p>
</body>
view page
interface for interaction
</html>
(later)

User-Defined Functions
• function definitions are similar to C++/Java, except:
 no return type for the function (since variables are loosely typed)
 no types for parameters (since variables are loosely typed)
 by-value parameter passing only (parameter gets copy of argument)

function isPrime(n)
// Assumes: n > 0 can limit variable scope
// Returns: true if n is prime, else false
{
if (n < 2) { if the first use of a variable is preceded
return false; with var, then that variable is local to
} the function
else if (n == 2) {
return true;
} for modularity, should make all
else { variables in a function local
for (var i = 2; i <= Math.sqrt(n); i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
}

Function Example
<html>
<!–- COMP519 js06.html 16.08.2006 -->

<head> function
<title>Prime Tester</title>
definitions go in
<script type="text/javascript"> the HEAD
function isPrime(n)
// Assumes: n > 0
// Returns: true if n is prime HEAD is loaded
{
// CODE AS SHOWN ON PREVIOUS SLIDE
first, so the function
} is defined before
</script> code in the BODY is
</head> executed
<body>
testNum = parseFloat(prompt("Enter a positive integer", "7"));

if (isPrime(testNum)) {
document.write(testNum + " <b>is</b> a prime number.");
}
else {
document.write(testNum + " <b>is not</b> a prime number.");
}
</script>
</body> view page
</html>

<html>
<!–- COMP519 js07.html 16.08.2006 --> Another
<head>
<title> Random Dice Rolls Revisited</title> Example
function RandomInt(low, high)
// Assumes: low <= high
// Returns: random integer in range [low..high]
{
return Math.floor(Math.random()*(high-low+1)) + low;
recall the dynamic dice
} page
</script>
</head>
could define a function for
<body> generating random
<div align="center">
<script type="text/javascript"> numbers in a range, then
roll1 = RandomInt(1, 6); use whenever needed
roll2 = RandomInt(1, 6);

easier to remember,
"~martin/teaching/comp519/Images/die" + promotes reuse
roll1 + ".gif'/>");
document.write("  ");
roll2 + ".gif'/>");
</script>
</div>
</body> view page
</html>

JavaScript Libraries

• better still: if you define functions that may be useful to many pages, store in a
separate library file and load the library when needed

• the file at http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js
contains definitions of the following functions:

RandomNum(low, high) returns random real in range [low..high)
RandomInt(low, high) returns random integer in range [low..high)
RandomChar(string) returns random character from the string
RandomOneOf([item1,…,itemN]) returns random item from list/array

Note: as with external style sheets, no tags in the JavaScript library file

load a library using the SRC attribute in the SCRIPT tag (nothing between the tags)

<script type="text/javascript"
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js">
</script>

Library Example
<html>
<!–- COMP519 js08.html 16.08.2006 -->
<head>
<title> Random Dice Rolls Revisited</title>
<script type="text/javascript“
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/random.js">
</script>
</head>
<body>
<div align="center">

roll1 + ".gif'/>");
document.write("  ");
roll2 + ".gif'/>");

</script>
</div>
</body>
view page
</html>

JavaScript Strings
• a class defines a new type (formally, Abstract Data Type)
 encapsulates data (properties) and operations on that data (methods)

• a String encapsulates a sequence of characters, enclosed in quotes
properties include
length : stores the number of characters in the string
methods include
charAt(index) : returns the character stored at the given index
(as in C++/Java, indices start at 0)
substring(start, end) : returns the part of the string between the start
(inclusive) and end (exclusive) indices
toUpperCase() : returns copy of string with letters uppercase
toLowerCase() : returns copy of string with letters lowercase

to create a string, assign using new or just make a direct assignment (new is implicit)
word = new String("foo"); word = "foo";

properties/methods are called exactly as in C++/Java
word.length word.charAt(0)

String example: Palindromes
function Strip(str) suppose we want to
// Assumes: str is a string
// Returns: str with all but letters removed test whether a word
{
var copy = ""; or phrase is a
for (var i = 0; i < str.length; i++) {
if ((str.charAt(i) >= "A" && str.charAt(i) <= "Z") ||
palindrome
(str.charAt(i) >= "a" && str.charAt(i) <= "z")) {
copy += str.charAt(i);
}
noon Radar
} Madam, I'm Adam.
return copy; A man, a plan, a canal:
} Panama!
function IsPalindrome(str)
// Assumes: str is a string
// Returns: true if str is a palindrome, else false must strip non-letters out of the
{
str = Strip(str.toUpperCase()); word or phrase

for(var i = 0; i < Math.floor(str.length/2); i++) { make all chars uppercasein
if (str.charAt(i) != str.charAt(str.length-i-1)) { order to be case-insensitive
return false;
}
} finally, traverse and compare
return true; chars from each end
}

<html>
<!–- COMP519 js09.html 16.08.2006 -->

<head>
<title>Palindrome Checker</title>

function Strip(str)
{
}

function IsPalindrome(str)
{
}
</script>
</head>

<body>
text = prompt("Enter a word or phrase", "Madam, I'm Adam");

if (IsPalindrome(text)) {
document.write("'" + text + "' <b>is</b> a palindrome.");
}
else {
document.write("'" + text + "' <b>is not</b> a palindrome.");
}
</script>
</body> view page
</html>

JavaScript Arrays
• arrays store a sequence of items, accessible via an index
since JavaScript is loosely typed, elements do not have to be the same type

 to create an array, allocate space using new (or can assign directly)
items = new Array(10); // allocates space for 10 items

items = new Array(); // if no size, will adjust dynamically

items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []

 to access an array element, use [] (as in C++/Java)

for (i = 0; i < 10; i++) {
items[i] = 0; // stores 0 at each index

}

 the length property stores the number of items in the array

for (i = 0; i < items.length; i++) {
document.write(items[i] + "<br>"); // displays elements
}

Array Example
<html> suppose we want to
<!–- COMP519 js10.html 16.08.2006 -->
<head> simulate die rolls and
<title>Die Statistics</title> verify even distribution
<script type="text/javascript"
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/JS/r
andom.js"> keep an array of counters:
</script>
</head>
initialize each count to 0
<body>
numRolls = 60000; each time you roll X,
dieSides = 6; increment rolls[X]

rolls = new Array(dieSides+1); display each counter
for (i = 1; i < rolls.length; i++) {
rolls[i] = 0;
}

for(i = 1; i <= numRolls; i++) {
rolls[RandomInt(1, dieSides)]++;
}

for (i = 1; i < rolls.length; i++) {
document.write("Number of " + i + "'s = " +
rolls[i] + "<br />");
}
</script>
</body> view page
</html>

Date Class
• String & Array are the most commonly used classes in JavaScript
 other, special purpose classes & objects also exist

• the Date class can be used to access the date and time
 to create a Date object, use new & supply year/month/day/… as desired

today = new Date(); // sets to current date & time

newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM

 methods include:

newYear.getYear() can access individual components of a date
newYear.getMonth()
newYear.getDay()
newYear.getHours()
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()

<html>
Date Example
<!–- COMP519 js11.html 16.08.2006 -->

<head>
<title>Time page</title>
</head>
by default, a date will be displayed in
<body> full, e.g.,
Time when page was loaded:
<script type="text/javascript"> Sun Feb 03 22:55:20 GMT-0600
now = new Date(); (Central Standard Time) 2002

document.write("<p>" + now + "</p>");

time = "AM"; can pull out portions of the date using
hours = now.getHours();
if (hours > 12) {
the methods and display as desired
hours -= 12;
time = "PM" here, determine if "AM" or "PM" and
} adjust so hour between 1-12
else if (hours == 0) {
hours = 12; 10:55:20 PM
}
document.write("<p>" + hours + ":" +
now.getMinutes() + ":" +
now.getSeconds() + " " +
time + "</p>");
</script>
</body>
</html>
view page

Another Example
<html>
<!–- COMP519 js12.html 16.08.2006 -->

<head>
<title>Time page</title>
</head>
you can add and subtract Dates:
<body> the result is a number of
This year: milliseconds
now = new Date();
newYear = new Date(2006,0,1); here, determine the number of
seconds since New Year's day
secs = Math.round((now-newYear)/1000);

days = Math.floor(secs / 86400); divide into number of days, hours,
secs -= days*86400; minutes and seconds
hours = Math.floor(secs / 3600);
secs -= hours*3600;
minutes = Math.floor(secs / 60);
secs -= minutes*60
possible improvements?
document.write(days + " days, " +
hours + " hours, " +
minutes + " minutes, and " +
secs + " seconds.");
</script>
</body>
</html>
view page

document Object
Both IE and Netscape allow you to access information about an HTML document
using the document object (Note: not a class!)
<html>
<!–- COMP519 js13.html 16.08.2006 -->
document.write(…)
<head>
<title>Documentation page</title>
method that displays text in
</head>
the page
<body>
<table width="100%">
<tr>
document.URL
<td><small><i> property that gives the
<script type="text/javascript"> location of the HTML
document.write(document.URL); document
</script>
</i></small></td>
<td style=“text-align: right;"><small><i> document.lastModified
document.write(document.lastModified); property that gives the date &
</script> time the HTML document was
</i></small></td> saved
</tr>
</table>
</body>
</html> view page

navigator Object
<html>
navigator.appName <!–- COMP519 js14.html 16.08.2006 -->

property that gives the browser <head>
name <title>Dynamic Style Page</title>

navigator.appVersion <script type="text/javascript">
if (navigator.appName == "Netscape") {
property that gives the browser document.write('<link rel=stylesheet '+
version 'type="text/css" href="Netscape.css">');
}
else {
 document.write('<link rel=stylesheet ' +
'type="text/css" href="MSIE.css">');
a {text-decoration:none; }
font-size:larger; </script>
color:red; </head>
font-family:Arial}
a:hover {color:blue} <body>
Here is some text with a
 <a href="javascript:alert('GO AWAY')">link</a>.
</body>
a {font-family:Arial; </html>
color:white;
background-color:red}
view page

User-Defined Classes
• can define new classes, but the notation is awkward
 simply define a function that serves as a constructor
 specify data fields & methods using this

 no data hiding: can't protect data or methods

// COMP519 Die.js 16.08.2006//
// Die class definition define Die function (i.e.,
//////////////////////////////////////////// constructor)
function Die(sides)
initialize data fields in the
{
this.numSides = sides; function, preceded with this
this.numRolls = 0;
this.Roll = Roll; similarly, assign method to
}
separately defined function
function Roll() (which uses this to access
{ data)
this.numRolls++;
return Math.floor(Math.random()*this.numSides) + 1;
}

<html>
<!–- COMP519 js15.html 16.08.2006 -->
Class Example
<head>
<title>Dice page</title>

<script type="text/javascript" create a Die object using new
src="Die.js"> (similar to String and Array)
</script>
</head>
here, the argument to Die
<body> initializes numSides for that
<script type="text/javascript"> particular object
die6 = new Die(6);
die8 = new Die(8);
each Die object has its own
roll6 = -1; // dummy value to start loop properties (numSides &
roll8 = -2; // dummy value to start loop
while (roll6 != roll8) {
numRolls)
roll6 = die6.Roll();
roll8 = die8.Roll(); Roll(), when called on a
particular Die, accesses its
document.write("6-sided: " + roll6 +
"    " + numSides property and
"8-sided: " + roll8 + "<br />"); updates its NumRolls
}

document.write("<br />Number of rolls: " +
die6.numRolls);
</script>
</body>
</html> view page

Java script

More Related Content

What's hot

Similar to Java script

Recently uploaded

Java script