Java script Learn Easy

CSC 551: Web Programming

Spring 2004

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
1

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

2

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
3

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
4

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>
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 in browser 5

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 & control statements
<html> standard C++/Java operators &

control statements are provided
<head>
<title>Folding Puzzle</title>
in JavaScript
</head> • +, -, *, /, %, ++, --, …
• ==, !=, <, >, <=, >=
<body>
<script type="text/javascript"> • &&, ||, !
distanceToSun = 93.3e6*5280*12; • if, if-else, while, do, …
thickness = .002;

foldCount = 0;
while (thickness < distanceToSun) { PUZZLE: Suppose you took a piece
thickness *= 2; of paper and folded it in half, then in
foldCount++;
}
half again, and so on.
document.write("Number of folds = " +
foldCount); How many folds before the thickness
</script>
</body> of the paper reaches from the earth to
</html> the sun?
view page in browser
7

JavaScript Math routines
<html> the Math object

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.creighton.edu/"+
Math.round
"~davereed/csc551/Images/die" +
roll1 + ".gif' />");
document.write("  "); Math.PI
document.write("<img src='http://www.creighton.edu/"+ Math.E
roll2 + ".gif' />"); Math.random
</script>
</div>
function returns
</body> number in [0..1)
</html>

Interactive pages using prompt crude user interaction can
take place using prompt
<html>

1st argument: the prompt
<head> message that appears in the
<title>Interactive page</title> dialog box
</head>

<body> 2nd argument: a default value
<script type="text/javascript"> that will appear in the box (in
userName = prompt("What is your name?", ""); case the user enters nothing)
userAge = prompt("Your age?", "");
userAge = parseFloat(userAge); the function returns the value
entered by the user in the
document.write("Hello " + userName + ".") dialog box (a string)
if (userAge < 18) {
document.write(" Do your parents know " +
"you are online?"); if value is a number, must use
} parseFloat to convert
</script>

<p>The rest of the page... forms will provide a better
</body>
</html> interface for interaction
view page in browser (later)
9

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) { if the first use of a variable is preceded
return false;
} 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;
}
} 10

Function example
<html>

function
<head>
<title>Prime Tester</title>
definitions go in
the HEAD
function isPrime(n)
// Assumes: n > 0 HEAD is loaded
// Returns: true if n is prime
first, so the function
{
// CODE AS SHOWN ON PREVIOUS SLIDE is defined before
} code in the BODY is
</script> executed
</head>

<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>
</html>
11

<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
<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,
"~davereed/csc551/Images/die" + promotes reuse
roll1 + ".gif' />");
document.write("  ");
roll2 + ".gif' />"); view page in browser
</script>
</div>
</body>
</html> 12

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.creighton.edu/~davereed/csc551/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.creighton.edu/~davereed/csc551/JavaScript/random.js">
</script>
13

Library example
<html>

<head>
<title> Random Dice Rolls Revisited</title>
</script>
</head>
<body>
<div align="center">

roll1 + ".gif' />");
document.write("  ");
roll2 + ".gif' />");
</script>
</div>
</body>
</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) 15

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

function IsPalindrome(str)
// Assumes: str is a string must strip non-letters out of the
// Returns: true if str is a palindrome, else false word or phrase
{
str = Strip(str.toUpperCase());
make all chars uppercasein
for(var i = 0; i < Math.floor(str.length/2); i++) { order to be case-insensitive
if (str.charAt(i) != str.charAt(str.length-i-1)) {
return false;
} finally, traverse and compare
} chars from each end
return true;
}
16

<html>


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

function Strip(str)
{
// CODE AS SHOWN ON PREVIOUS SLIDE
}

function IsPalindrome(str)
{
// 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 brows
</body>
</html> 17

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
}
18

<html>

Array
<head>
<title>Die Statistics</title> example
</script>
</head>

<body>
<script type="text/javascript"> suppose we want to
numRolls = 60000;
dieSides = 6; simulate die rolls and
verify even distribution
rolls = new Array(dieSides+1);
for (i = 1; i < rolls.length; i++) {
rolls[i] = 0; keep an array of counters:
}
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++) {
document.write("Number of " + i + "'s = " + display each counter
rolls[i] + "<br />");
}
</script>
</body> view page in browser
</html> 19

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()
20

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

<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(2004,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 in browser
22

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>
</body> view page in browser
</html> 23

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}
24

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

// Dave Reed Die.js 2/01/04
// define Die function (i.e.,
// Die class definition
//////////////////////////////////////////// constructor)

function Die(sides) initialize data fields in the
{
function, preceded with this
this.numSides = sides;
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;
}
25

<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>
</body>
</html>
26

Java script Learn Easy

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Java script Learn Easy (20)

Java script Learn Easy