Lecture 7

CS 3520: Website Development
Introduction to JavaScript
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 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, frames
limitations of client-side scripting

▪ since script code is embedded in the page, 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
<head> text to be displayed can include HTML

<title>JavaScript Page</title> tags
</head>
the tags are interpreted by the browser
<body>
<script type="text/javascript">
when the text is displayed
// 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 in browser

JavaScript data types & variables
JavaScript has only three primitive data types
strings : "foo" 'howdy do' "I said 'hi'." ""
numbers : 12 3.14159 1.5E6
booleans : true false
assignments are as in C++/Java

<html>
 message = "howdy";
pi = 3.14159;
<head>
<title>Data Types and Variables</title>
</head> variable names are sequences of letters,
digits, and underscores: start with a letter
<body>
x = 1024; variables names are case-sensitive
document.write("<p>x = " + x + "</p>");
you don't have to declare variables, will be
x = "foobar";
document.write("<p>x = " + x + "</p>"); created the first time used
</script>
</body> variables are loosely typed, can assign
</html>
different types of values
JavaScript operators & expressions
standard C++/Java operators are provided in JavaScript
numeric : + - * / % (remainder)
strings: + (concatenation)
relational: == != < <= > >=
logical : && || !
as in C++/Java, precedence rules
apply to expressions
<html>
 (* / %) → (+ -) → (&& || !)
<head>
<title>Operators and Expressions</title> operators are left-associative
</head> (evaluated in left-to-right order)
<body>
<script type="text/javascript"> must be careful when mixing strings
x = 5;
document.write("x+1 = " + x+1 + "<br />"); and numbers
document.write(x + 1 + " = x+1<br />");
document.write("x+1 = " + (x+1)); number + number ➔ addition
</script> string + string ➔ concatenation
</body>
</html> string + number ➔
convert number to string, then
view page in browser concatenation
JavaScript control statements
C++/Java control statements are provided in JavaScript
conditional execution:
if (BOOLEAN TEST) { if (BOOLEAN TEST) {

STATEMENTS; STATEMENTS;
} }
else {
STATEMENTS;
}
conditional looping:
while (BOOLEAN TEST) {

STATEMENTS;
}
counter-driven looping:
for (INITIALIZE; TEST; UPDATE) {

STATEMENTS;
}
JavaScript example
<html>

PUZZLE: Suppose you took a piece
<head> of paper and folded it in half, then in
<title>Folding Puzzle</title>
</head> half again, and so on.
<body>
How many folds before the thickness
distanceToSun = 93300000*5280*12; of the paper reaches from the earth to
thickness = .002; the sun?
foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
} Note: arithmetic assignments are
document.write("Number of folds = " +
foldCount);
provided as in C++/Java
</script>
</body> *= /= += -= ++ --
</html>

JavaScript Math routines
<html> the predefined Math


object contains routines
<head> and constants
<title>Mystery Program</title>
</head>
Math.sqrt
<body> Math.pow
<script type="text/javascript"> Math.abs
maxRange = 100; Math.max
Math.min
for(i = 1; i <= maxRange; i++) { Math.floor
if (Math.pow(Math.floor(Math.sqrt(i)),2) == i) {
Math.ceil
document.write(i + "<br>");
} Math.round
}
</script> Math.PI
</body> Math.E
</html>

QUESTION: what does
this program do?
Random page elements
<html>

Math.random
function returns a
<head>
<title> Random Dice Rolls </title> pseudo-random
<script type="text/javascript"> number in the range
function RandomInt(low, high) [0..1)
{
return Math.floor(Math.random()*(high-low+1)) + low;
}
</script>
can alter the range
</head> using other Math
<body>
routines
<div align="center">
roll1 = RandomInt(1, 6);
useful for
roll2 = RandomInt(1, 6); generating dynamic
document.write("<img src='http://www.mcs.csuhayward.edu/"+
page elements
"~bhecker/CS-3520/Examples/JavaScript/die" +
roll1 + ".gif' />");
document.write("  ");
roll2 + ".gif' />");
</script>
</div>
</body> view page in browser
</html>
Interactive pages using prompt
somewhat crude interaction with

<html> the user can take place using the
 prompt function
<head>
<title>Interactive page</title> 1st argument: the prompt message
</head> that appears in the dialog box
<body> 2nd argument: a default value that
userName = prompt("What is your name?", "");
will appear in the box (in case the
user enters nothing)
document.write("Hello " + userName +
", welcome to my Web page."); the function returns the value
</script> entered by the user in the dialog
box
<p>The rest of the page...
</body>
</html>
forms will provide a better
interface for user interaction
(later)
Prompting for numbers
<html>
 Note: prompt always returns a
string
<head>
<title>Prompting for numbers</title>
</head> if the user enters the number 12
at the prompt, the string "12" is
<body>
<script type="text/javascript"> returned
num1 = prompt("Enter the first number", "1");
num1 = parseFloat(num1); recall: + applied to strings gives
concatenation
num2 = prompt("Enter the second number", "2");
num2 = parseFloat(num2);
if numbers are to be read using
document.write("The sum of the numbers is " + prompt, they must be explicitly
(num1 + num2));
</script> converted to numbers using
</body> parseFloat
</html>

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

function
<head>
<title>Prime Tester</title>
definitions go in
the HEAD
function isPrime(n)
// Assumes: n > 0 HEAD is loaded first,
// Returns: true if n is prime
{
so the function is
// CODE AS SHOWN ON PREVIOUS SLIDE defined before code
} in the BODY is
</script> executed
</head>
<body>
testNum = prompt("Enter a positive integer", "7");
testNum = parseFloat(testNum);
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 in
</html> browser
<html>
 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
<script type="text/javascript"> numbers in a range, then
roll1 = RandomInt(1, 6); use whenever needed
document.write("<img src='http://www.csuhayward.edu/"+ easier to remember,

"~bhecker/cs-3520/Images/die" + promotes reuse
roll1 + ".gif' />");
document.write("<img src='http://www.csuhayard.edu/"+
"~bhecker/cs-3520/Images/die" +
roll2 + ".gif' />");
</script>
</div>
</body>
</html> view page in browser
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.csuhayward.edu/~bhecker/3520/JavaScript/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.csuhayward.edu/~bhecker/cs3520/JavaScript/random.js">
</script>
Library example
<html>

<head>
<title> Random Dice Rolls Revisited</title>
src="http://www.msc.csuhayward.edu/bhecker/CS-
3520/Examples/JavaScript/random.js">
</script>
</head>
<body>
roll1 + ".gif' />");
roll2 + ".gif' />");
</script>
</div>
</body>
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 (pt. 1)
suppose we want to test whether a word or phrase is a palindrome
e.g., radar Bob noon
function IsPalindrome(str)
// Assumes: str is a string must traverse the string,
// Returns: true if str is a palindrome, else false
{ comparing characters from
str = str.toUpperCase(); front to back
for(var i = 0; i < Math.floor(str.length/2); i++) {
if (str.charAt(i) != str.charAt(str.length-i-1)) { should be case-insensitive,
return false; so make all letters
}
} uppercase before testing
return true;
}
String example (pt. 2)
function Strip(str)
// Assumes: str is a string better yet, we would like
// Returns: str with all but capital letters removed
{ to be able to test
var copy = ""; phrases
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) >= "A" && str.charAt(i) <= "Z") {
copy += str.charAt(i); Madam, I'm Adam.
}
} A man, a plan, a canal:
return copy;
} Panama!
// Assumes: str is a string
must strip non-letters out of the
// Returns: true if str is a palindrome, else false phrase, then test as before
{
str = Strip(str.toUpperCase()); to handle phrases, must be
for(var i = 0; i < Math.floor(str.length/2); i++) { able to strip out non-letters
if (str.charAt(i) != str.charAt(str.length-i-1)) {
return false;
}
}
return true;
}
<html>

<head>
<title>Palindrome Checker</title>
function Strip(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}
</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> view page in
</body> browser
</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
}
<html>

Array
<head>
<title>Die Statistics</title> example
src="http://www.mcs.csuhayward.edu/~bhecker/CS-
3520/Examples/JavaScript/random.js">
</script>
</head>
<body>
<script type="text/javascript"> suppose we want to
numRolls = 60000; simulate die rolls and
dieSides = 6;
verify even distribution
rolls = new Array(dieSides+1);
for (i = 1; i < rolls.length; i++) { keep an array of counters:
rolls[i] = 0;
}
initialize each count to 0
for(i = 1; i <= numRolls; i++) {
rolls[RandomInt(1, dieSides)]++; each time you roll X,
} increment rolls[X]
for (i = 1; i < rolls.length; i++) { display each counter

document.write("Number of " + i + "'s = " +
rolls[i] + "<br />");
}
</script>
</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
<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>
<html>

Another example
<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(2003,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>
document object
Both IE and Netscape allow you to access information about an HTML
document using the document object (Note: not a class!)
<html>
 document.write(…)
<head> method that displays text in
<title>Documentation page</title> the page
</head>
<body>
<table width="100%"> document.URL
<tr> property that gives the
<td><small><i> location of the HTML
<script type="text/javascript"> document
document.write(document.URL);
</script>
</i></small></td>
<td align="right"><small><I> document.lastModified
<script type="text/javascript"> property that gives the date &
document.write(document.lastModified); time the HTML document was
</script> saved
</i></small></td>
</tr>
</table>
</html>
navigator object
navigator.appName <html>

property that gives the browser
name <head>
<title>Dynamic Style Page</title>
navigator.appVersion
property that gives the browser if (navigator.appName == "Netscape") {
version document.write('<link rel=stylesheet '+
'type="text/css" href="Netscape.css">');
}
 else {
document.write('<link rel=stylesheet ' +
a {text-decoration:none; 'type="text/css" href="MSIE.css">');
font-size:larger; }
color:red; </script>
font-family:Arial} </head>
a:hover {color:blue}
<body>
 Here is some text with a
<a href="javascript:alert('GO AWAY')">link</a>.
a {font-family:Arial; </body>
color:white; </html>
background-color:red}
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
// Die.js
// define Die function (i.e.,
// Die class definition
//////////////////////////////////////////// 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>

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 numRolls)
while (roll6 != roll8) {
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>
</html>
End of Lecture
Introduction to JavaScript

Lecture 7

Uploaded by

Copyright:

Available Formats

Lecture 7

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 7

Uploaded by

Copyright:

Available Formats

CS 3520: Website Development

client-side programming with JavaScript

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

▪ simpler execution model: don't need compiler or development environment

JavaScript: the first Web scripting language, developed by Netscape in 1995

JScript: Microsoft version of JavaScript, introduced in 1996

JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard

VBScript: client-side scripting version of Microsoft Visual Basic

defining programs with Web interfaces

limitations of client-side scripting

<head> text to be displayed can include HTML

document.write("Hello world!"); as in C++/Java, statements end with ;

view page in browser

assignments are as in C++/Java

if (BOOLEAN TEST) { if (BOOLEAN TEST) {

while (BOOLEAN TEST) {

for (INITIALIZE; TEST; UPDATE) {

view page in browser

<html> the predefined Math

view page in browser

somewhat crude interaction with

view page in browser

document.write("<img src='http://www.csuhayward.edu/"+ easier to remember,

the file at http://www.csuhayward.edu/~bhecker/3520/JavaScript/random.js

RandomNum(low, high) returns random real in range [low..high)

a String encapsulates a sequence of characters, enclosed in quotes

properties/methods are called exactly as in C++/Java

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)

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

for (i = 1; i < rolls.length; i++) { display each counter

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

newYear.getYear() can access individual components of a date

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

time = "AM"; can pull out portions of the date using

days = Math.floor(secs / 86400); divide into number of days, hours,

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

function Die(sides) initialize data fields in the

<script type="text/javascript" create a Die object using new

document.write("<br />Number of rolls: " +

You might also like