Information Systems and Technology ISP523
Intro To JavaScript: A Hands-On Tutorial
General Overview
What is JavaScript?
JavaScript is the internal scripting language used by
WWW browsers such as Netscape's Navigator and Internet Explorer
Object based language.
It is "loosely" based on the Java language,
and resembles C++ in it's structure.
Some Simple Uses For JavaScript
� Dynamic
forms that include built-in error checking
� Calculation
areas on pages
� User
interaction for warnings and getting confirmation
� Dynamically
changing background and text colors, or "buttons".
� To
look at the URL history and take action based on it.
� Open
and control windows.
�
Provide different documents or parts thereof based on user request. Ie.
Framed vs not framed
Java vs JavaScript
Java
� Java
is a complex, complete object-oriented Programming Language.
� Compiled
Language
� Designed
for large programs
� Fully
Extensible - Programmers can create their own classes (objects/data structures)
� Steep
Learning Curve
� Client-Server
Interaction
� Generates
Stand-Alone Applications and Applets
JavaScript
� Simple
to use scripting language.
� Interpreted
� Designed
for small simple programs
� Strong
direct interaction with the HTML pages.
� Not
Fully Extensible
� Basically
only handles client-end activities
� Integrated
into HTML
�
Source code readily available
Strengths and Weaknesses of JavaScript
Strengths
� Quick
Development
� Easy
To Learn
� Platform
Independent
� Low
Overhead
Weaknesses
� Limited
Range of Built-In Methods or Functions
� No
ability to hide code
� Lack
of Development Tools
� Not
Supported By Netscape Gold's Editor
JavaScript Lessons
Your First JavaScript
Choose your editor
All your JavaScript Code needs to be entered and
edited in a plain text or html editor.
Enter The Basic HTML Tags of any document
<HTML>
<HEAD>
<TITLE>My First JavaScript</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
In The Body Section Add The Following JavaScript
Lines
<SCRIPT LANGUAGE="JavaScript">
<!--
Hide from other browsers
document.write("Hello World!");
// Stop
hiding from browsers -->
</SCRIPT>
Notes:
� The
JavaScript Appears Between the <SCRIPT> and </SCRIPT> Tags
� The
<!-- and --> tells the html viewer that the text (ie. JavaScript) between
them are just "comments", thus it does not display them.
� //
indicates the rest of the line is an JavaScript comment
� ;
denotes the end of a statement, just like in C, C++, and Pascal
� document
denotes the default html window
� .write
is the method to write text out to an object, such as a window
Save the file to an html document
Open the file in Internet Explorer
Writing To The Default Document
In your sample document after the line
document.write("Hello World!");
Add
document.write("It's A Wonderful Day.");
And resave and run
the new program.
Notice how the text runs
together.
Placing HTML Tags In Your JavaScript Output
When writing to the HTML document, you must always
remember that it is processed as if it was normal html, all html tags will be
honored and processed.
Change the following lines in your program
document.write("Hello World!");
document.write("It's A Wonderful Day.");
To read
document.write("Hello World!<P>");
document.write("It's A <B>Wonderful
Day</B><P>.");
Rerun
the program.
Remember Your Text Inherits Whatever Attributes The
Previous Text Had, And Passes It's Along
Just after the body tag add the line.
<H1>My JavaScript Program
Between the two document.write statements
Add
The following
document.write("</H1><I>");
Before the </body> tag add the line
That's All!
Rerun
the program.
While viewing the document do a View Source and
observe the results.
Writeln Method
A variation on the write method is the writeln method,
which puts out an eoln after printing out the string characters. This is not
useful in formatting the text as HTML ignores the eoln in the document. It's
only useful if you are outputting text with the <PRE>tag.
Interacting With The User
Prompting For User For Information
Prompt(prompt string, default reply)
� The
prompt command requires two parameter strings.
� The
first is the prompt to display, the second is the default answer. If you do not
want a default answer, just use "".
� It
returns what the user typed s a string of characters
Var
� The
keyword var declares a variable with the name given.
� It
is not need, but is good programming style, and may prevent interpretation
problems or better error messages.
� There
are two forms:
◦ var name;
◦ var name= "value";
Start A New Document In The Editor, Or cleanup the
current one.
Enter the following JavaScript program
var color = prompt("Enter favourite color:",
"Red");
document.write(color);
Now run
the program
Alerts
� The
alert dialog box displays the message given to it.
� Only
an OK response is allowed to the user.
� The
script and HTML document halts execution until the user chooses the OK button.
� The
phrase "JavaScript Alert" is included in the dialog box to let the
user know what caused the alert.
Some uses
� Insufficient
information provided in a form.
� Incorrect
data entered
� Invalid
result
� Service
that is unavailable
Add the following line to your program at the
start.
alert("Just Learning JavaScript, Please Be
Patient");
Run the
program.
Confirm
The Confirm method presents a dialog window showing a
prompt, and allows the user to choose between OK and Cancel.
It then returns with a value of True of OK choosen, or False if Cancel choosen.
The confirm method is most often used to check with
the user before going on. For example, before loading a specific page (maybe
one containing large images or frames) you could ask the user if they wanted it
and then take appropriate action (choose not to load images or go to a no-frame
version).
Try the following program out.
<h1>Cats</h1>
<SCRIPT LANGUAGE="JavaScript">
<!--
Hide from other browsers
var
animated_images= confirm("Load animated images");
if
(animated_images)
{document.writeln('<IMG
SRC="animated.gif">');}
else
{document.writeln('<IMG SRC="static.gif">');}
// Stop
hiding from browsers -->
</SCRIPT>
Note: You can copy the images from the course disk, or
just put in a text message instead, or use the full path to the images given
below.
http://www.dcs.uwaterloo.ca/~anderson/JavaScript/animated.gif
http://www.dcs.uwaterloo.ca/~anderson/JavaScript/static.gif
Run
the program.