JavaScript Guide
This JavaScript Guide was last modified
Introduction
JavaScript Basics
What We Can Do with JavaScript
Embedding JavaScript in HTML
Functions
Using the JavaScript Console
Using JavaScript Objects
Window Methods
Handling Events
Using the Status Bar
Validating Form Input
Using Windows and Frames
Creating a Frame
Using JavaScript URLs
Introduction
What is JavaScript?
JavaScript is a cross-platform,
object-based scripting language
Netscape provides
on-line JavaScript documentation
Client-side JavaScript is embedded directly in HTML pages and is
interpreted by browser at runtime
Client-side JavaScript statements embedded in HTML page can
respond to user events such as mouse-clicks, form input, and page
navigation
Microsoft Internet Explorer also
supports JavaScript, but has some
additional features and calls its
version "JScript"
JavaScript syntax much like Java, C, C++
JavaScript language resembles Java but does not have Java's static
typing and strong type checking. That means you do not have to
declare what type a variable is in JavaScript like you have to in Java.
JavaScript and Java have nearly same expression syntax and basic
control-flow constructs
JavaScript -- Interpreted (not compiled) by client
Java -- Compiled bytecodes downloaded from server, executed on client
JavaScript -- Code integrated with, and embedded in, HTML
Java -- Applets distinct from HTML (but accessed from HTML pages)
JavaScript Basics
Values -- numbers (42, 3.14159), logical values (true, false), strings
("Purdue University")
Use variables as symbolic names for values. Must start with letter
or underscore (_). Subsequent characters can also be digits (0-9).
Declare a variable via
var x;
Character string is zero, one, or more characters enclosed in double
(") or single (') quotation marks
Expression is any valid set of values, variables, operators, and
expressions that evaluates to single value; value can be number,
string, or logical value
Basic assignment operator is equal (=)
Standard arithmetic operators are addition (+), subtraction (-),
multiplication (*), and division (/)
Comparison operators are equal (==), not equal (!=), greater than
(>), greater than or equal (>=), less than (<), less than or
equal (<=)
JavaScript is object-based
Object has properties (fields)
Object has functions associated with it that are known as the object's
methods
Function is JavaScript procedure -- set of statements that performs
specific task
Function definition has these parts:
function keyword
- function name
- comma-separated list of arguments to function in parentheses
- statements in function in curly braces
if...else Statement
<![CDATA[
if (condition)
{
statements1
}
else
{
statements2
}
if (form1.threeChar.value.length == 3)
{
return true;
}
else
{
alert("Enter exactly three characters. " +
document.form1.threeChar.value +
" is not valid.");
return false;
}
]]>
switch Statement
<![CDATA[
switch (expression)
{
case label :
statement;
break;
case label :
statement;
break;
...
default : statement;
}
switch (fruit)
{
case "Oranges" :
document.write("Oranges are
$0.59 a pound.<BR>");
break;
case "Apples" :
document.write("Apples are
$0.32 a pound.<BR>");
break;
case "Bananas" :
document.write("Bananas are
$0.48 a pound.<BR>");
break;
case "Cherries" :
document.write("Cherries are
$3.00 a pound.<BR>");
break;
default :
document.write("Sorry, we are out of "
+ fruit + ".<BR>");
}
]]>
for Statement
<![CDATA[
for (initial; condition; increment)
{
statements
}
for (i=0; i<selectObj.options.length; i=i+1)
{
if (selectObj.options[i].selected==true)
{
numberSelected = numberSelected +1;
}
}
]]>
while Statement
<![CDATA[
while (condition)
{
statements
}
n = 0;
x = 0;
while( n < 3 )
{
n = n+1;
x = x+n;
}
]]>
do...while Statement
<![CDATA[
do
{
statement
}
while (condition);
do
{
i=i+1;
document.write(i);
}
while (i<5);
]]>
What We Can Do with JavaScript
(1) Build HTML dynamically
(2) Monitor user events and take actions -- such as...
clicking button or link
changing form field
moving mouse on or off link
Embedding JavaScript in HTML
SCRIPT tag is extension to HTML that can enclose
JavaScript statements
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
JavaScript statements...
</SCRIPT>
]]>
Document can have multiple SCRIPT tags and, thus, multiple
groups of JavaScript statements
Browser executes code within
SCRIPT container.
Some browsers do NOT support
JavaScript. To ensure that these
browsers ignore the JavaScript code,
place entire script within HTML
comment tags, and precede ending
comment tag with double-slash (//)
that indicates JavaScript
single-line comment.
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
JavaScript statements...
// end script hiding from some browsers -->
</SCRIPT>
]]>
Simple script...
<![CDATA[
<HTML>
<HEAD>
<TITLE>My first JavaScript!</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
document.write ("My first JavaScript!");
// end script hiding from some browsers -->
</SCRIPT>
JavaScript can be used to create text
that is displayed along with
text appearing in the BODY of the file.
</BODY>
</HTML>
]]>
Try it
SRC attribute of SCRIPT tag lets you specify file as
JavaScript source (rather than embedding JavaScript in HTML)
JavaScript statements within SCRIPT tag with SRC attribute are
ignored unless inclusion has error
<![CDATA[
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT SRC="common.js">
document.write ("Oops.
Something went wrong in getting
the JavaScript file!");
</SCRIPT>
</HEAD>
]]>
Guidelines for .js files:
- Do not have any HTML in the file. Only JavaScript commands
should be there.
- Do not include SCRIPT tags or HTML comments.
- The .js file should be world-readable just like
an .html file.
Functions
Define functions for page in HEAD portion of document
JavaScript Calculator
JavaScript Adding Machine that does NOT
work
JavaScript Adding Machine that DOES
work
<![CDATA[
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
function increase (number)
{
return (number + 1);
}
// end script hiding from some browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("The function returned ",
increase(7), ".");
</SCRIPT>
<P> That is all.... <P>
</BODY>
]]>
Try it
write method of document displays output on screen
<![CDATA[
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide script from some browsers
// This function displays a horizontal rule
// of specified width
function rule(width)
{
document.write("<HR ALIGN=LEFT WIDTH="
+ width + "% NOSHADE>\n");
}
// This function displays a heading
// of specified level and some text
function heading(headLevel, headText, text)
{
document.write("<H", headLevel, ">",
headText, "</H",
headLevel, ">\n", text, "<P>\n")
}
// end script hiding from some browsers -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Using the write method</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from some browsers
rule(25);
heading(2, "The write method",
"Notice the use of + and ,");
// end script hiding from some browsers -->
</SCRIPT>
This is some standard HTML,
unlike the above that is generated.<P>
</BODY>
]]>
Try it
Using the JavaScript Console
Suppose that you make an error in
your JavaScript
Type "javascript:" into Location for details
But this will not catch all errors
Using JavaScript Objects
navigator: properties for name and
version of browser being used
window: properties for entire window (also window object for each
window in framed document)
document: properties for document content, such as title, background
color, links, forms
To refer to specific properties, specify object name and all
ancestors
Generally, object gets name from NAME attribute of corresponding HTML
tag
<![CDATA[
document.sform.schoolname.value
]]>
value property of schoolname
text field in form named sform in current
document
The JavaScript Date Object
Window Methods
alert: displays an alert box with message
confirm: displays confirm dialog box with OK and Cancel buttons
prompt: displays prompt dialog box with text field for entering a
value
<![CDATA[
If you want to know about Prompts, well then
<SCRIPT LANGUAGE="JavaScript">
document.write(prompt("Enter your name:",
"Justin"));
</SCRIPT>
this page is for you!
]]>
JavaScript prompt
<![CDATA[
<FORM METHOD=POST
ENCTYPE="text/plain"
ACTION=mailto:xxx@purdue.edu
onSubmit="return(confirm(kid.value
+ ': The information you gave is '
+ 'being e-mailed to us. '
+ 'We will get in touch with you in '
+ '3-5 days.'))">
]]>
JavaScript confirmation
setTimeout: evaluates expression or calls function once after
specified period elapses (in milliseconds -- thousandths of seconds)
setInterval: evaluates expression or calls function each time
specified period elapses (in milliseconds)
location: redirects client to another URL as if user had clicked
hyperlink
<![CDATA[
location = "http://www.purdue.edu";
]]>
Pick and Click with Javascript
document object properties: title, bgColor, fgColor, linkColor,
alinkColor, vlinkColor, lastModified (date document was last
modified), referrer (previous URL client visited), and URL (URL of
document)
window object properties: innerHeight, innerWidth, outerHeight,
outerWidth (inner and outer height and width of browser window -- can
be changed to resize window)
navigator object properties: appName (name of browser ... Netscape),
appVersion (version information ... 4.7)
<![CDATA[
document.topform
document.fillform
document.lastform
]]>
Form objects stored in array called forms
<![CDATA[
document.forms[0]
document.forms[1]
document.forms[2]
]]>
Elements in form (text fields, radio buttons, etc.) also stored in
elements array
<![CDATA[
document.forms[1].elements[3]
]]>
Also arrays for document.applets, document.images, document.links,
window.frames
Using form arrays
<![CDATA[
document.writeln("Title --",
document.title, "<BR>");
document.writeln("URL --",
document.URL, "<BR>");
document.writeln("Background color --",
document.bgColor, "<BR>");
document.writeln("Last Modified --",
document.lastModified, "<BR>");
document.writeln("Referred by --",
document.referrer, "<BR>");
document.writeln("Inner height of window --",
window.innerHeight, "<BR>");
document.writeln("Inner width of window --",
window.innerWidth, "<BR>");
document.writeln("Outer height of window --",
window.outerHeight, "<BR>");
document.writeln("Outer width of window --",
window.outerWidth, "<BR>");
document.writeln("Web browser is --",
navigator.appName);
document.writeln(" version ",
navigator.appVersion, "<BR>");
]]>
Try it
<![CDATA[
window.innerWidth=450;
window.innerHeight=250;
]]>
Try it
Handling Events
Events are actions that occur usually as result of something user
does --
clicking button or link
changing form field
moving mouse on or off link
Event handlers and events:
onFocus - user gives input focus to window or form element
onBlur - user removes input focus from window or form element
onChange - user changes text field, textarea, select list
onClick - user clicks button or link
onLoad - (used in <BODY> or <FRAMESET>) done when Web page
loads initially
onMouseOver - user moves cursor over link
onMouseOut - user moves cursor out of client-side image map or link
onSubmit - user clicks SUBMIT button in form
<![CDATA[
<TAG eventHandler="JavaScript Code">
]]>
where TAG is HTML tag, eventHandler is name of the event handler,
JavaScript Code is function call (usually) or JavaScript statements
<![CDATA[
<INPUT TYPE="button" VALUE="Calculate"
onClick="compute(this.form)">
]]>
this refers to current object -- the button
this.form refers to form containing the button
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
function compute(fm)
{
if (confirm("Is this what you want?"))
fm.result.value = eval(fm.expr.value)
else
setInterval
('alert("Please try again!")',10000)
}
// end script hiding from some browsers -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter some expression:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calculate"
onClick="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15>
</FORM>
</BODY>
]]>
Try it
JavaScript Message Scroller
JavaScript onMouseOver
can be used along with HREF in a standard link or in a client side
image map
JavaScript onMouseOver
can be used to change the appearance of images
OnMouseOver can also be used for
changing images and popping up alerts
The Elusive "Click Here" Image
"Real world" example of OnMouseOver and OnMouseOut
Animated Images Using JavaScript
Protecting Images Using JavaScript
An Evolving Background Color Using JavaScript
Using the Status Bar
Two window properties display
messages in the browser status
bar
defaultStatus appears when nothing else is in status bar
status displays transient message in status bar
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
defaultStatus = "Watch this status line as you move the mouse over the image map";
// end script hiding from some browsers -->
</SCRIPT>
<AREA SHAPE="RECT" COORDS="26,72,145,146"
HREF="http://www.nbc.com/"
onMouseOver="window.status='Go to NBC'; return true"
onMouseOut="window.status=''; return true">
]]>
Try it
Validating Form Input
JavaScript Handling of Forms
JavaScript Forms Example
Download each of the following JavaScript and mailto examples, change
the "mailto" field, and try them out:
(1) Confirm information received via
Browser window
(2) Confirm information received via
JavaScript confirmation mini-window
As user enters it, onChange event handler on each form
element that you want validated
When user submits form, onClick event handler on
button that submits form
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from some browsers
function foc()
{
window.status="Please enter a number 1-999";
}
function blu()
{
window.status="";
}
function isaPosNum(s)
{
return (parseInt(s) > 0)
}
function qty_check(item, min, max)
{
var returnVal = false
if (!isaPosNum(item.value))
alert("Please enter a positive number")
else if (parseInt(item.value) < min)
alert("Please enter a " + item.name
+ " greater than " + min)
else if (parseInt(item.value) > max)
alert("Please enter a " + item.name
+ " less than " + max)
else
returnVal = true
return returnVal
}
function validateAndSubmit(theform)
{
if (qty_check(theform.quantity, 0, 999))
{
alert("Order has been Submitted")
return true
}
else
{
alert
("Sorry, Order Cannot Be Submitted!")
return false
}
}
// end script hiding from some browsers -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Validating Form Input</H1>
<FORM ACTION="lwapp.cgi" METHOD="post">
Quantity of tennis balls?
<INPUT TYPE="text" NAME="quantity"
onFocus="foc()"
onBlur="blu()"
onChange="qty_check(this, 0, 999)">
<BR>
<INPUT TYPE="button" VALUE="Enter Order"
onClick="validateAndSubmit(this.form)">
</FORM>
</BODY>
]]>
Try it
Using Windows and Frames
Can create a window with the open method
<![CDATA[
colorWindow=window.open("color.html")
]]>
Can
specify attributes such as window's height and width and whether
window contains toolbar, location field, or scrollbars
<![CDATA[
purdueWindow=window.open
("http://www.purdue.edu",
"purduePlace",
"height=300,width=500,location=yes,
toolbar=no,scrollbars=yes")
]]>
Try it
<![CDATA[
function Navigator()
{
myWin= open("Navigation.html",
"displayWindow",
"width=250,height=120,status=no,
toolbar=no,menubar=no");
}
<BODY BGCOLOR="#000000"
OnLoad="Navigator()">
]]>
Try it
Closing windows and
creating a back button (this one opens in a new window by using
TARGET="_blank")
Closing windows and creating a back
button (this one opens in the same window)
Creating a form with a selected mailto that opens a window
Creating a Frame
<![CDATA[
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=category.html
NAME="listFrame">
<FRAME SRC=titles.html
NAME="contentFrame">
</FRAMESET>
<FRAME SRC=navigate.html
NAME="navigateFrame">
</FRAMESET>
]]>
listFrame is top.frames[0]
contentFrame is top.frames[1]
navigateFrame is top.frames[2]
<![CDATA[
function reframe()
{
top.frames[0].location='inter.title.html';
top.frames[1].location='inter.toc.html';
top.frames[2].location='titlePage.html';
}
<INPUT TYPE="button" VALUE="The Internet"
onClick="reframe()">
]]>
Try it
Using JavaScript URLs
<![CDATA[
function visit()
{
if (confirm
("Would you like to visit Purdue?"))
purdueWindow=window.open
("http://www.purdue.edu",
"purduePlace",
"height=300,width=500,location=yes,
toolbar=no,scrollbars=yes")
else
alert("Maybe next time...")
}
This page can open a new window containing
the <A HREF="javascript:visit()">
Purdue Website</A>....<P>
]]>
Try it