JavaScript
Client-side dynamic documents
Netprog: JavaScript 1
Smart Browsers
• Most browsers support a <SCRIPT> tag
that is used to include executable
content in an HTML document.
• There are a number of scripting
languages that are supported
Netprog: JavaScript 2
Client-Side Script Languages
• Netscape and others
– JavaScript
• Internet Explorer
– Jscript (MS name for JavaScript)
– VBScript
– PerlScript
Netprog: JavaScript 3
JavaScript Capabilities
• Add content to a web page
dynamically.
• Alter a web page in response to user
actions.
• React to user events.
• Interact with frames.
• Manipulate HTTP cookies
Netprog: JavaScript 4
JavaScript is not Java
• JavaScript is a very simple scripting
language.
• Syntax is similar to a subset of Java.
• Interpreted language.
• Uses objects, but doesn't really support the
creation of new object types*
*It almost does, but it's cumbersome.
Netprog: JavaScript 5
Language Elements
• Variables
• Literals
• Operators
• Control Structures
• Objects
Netprog: JavaScript 6
JavaScript Variables
• Untyped!
• Can be declared with var keyword:
var foo;
• Can be created automatically by
assigning a value:
foo=1; blah="Hi Dave";
Netprog: JavaScript 7
Variables (cont.)
• Using var to declare a variable results
in a local variable (inside a function).
• If you don't use var – the variable is a
global variable.
Netprog: JavaScript 8
Literals
• The typical bunch:
– Numbers 17 123.45
– Strings "Hello Dave"
– Boolean: true false
– Arrays: [1,"Hi Dave",17.234]
Arrays can hold anything!
Netprog: JavaScript 9
Operators
• Arithmetic, comparison, assignment,
bitwise, boolean (pretty much just like
C).
+ - * / % ++ -- == != > <
&& || ! & | << >>
Netprog: JavaScript 10
Control Structures
• Again – pretty much just like C:
if if-else ?: switch
for while do-while
• And a few not in C
for (var in object)
with (object)
Netprog: JavaScript 11
Objects
• Objects have attributes and methods.
• Many pre-defined objects and object
types.
• Using objects follows the syntax of
C++/Java:
[Link]
[Link]()
Netprog: JavaScript 12
Array Objects
• Arrays are supported as objects.
• Attribute length
• Methods include:
concat join pop push reverse sort
Netprog: JavaScript 13
Array example code
var a = [8,7,6,5];
for (i=0;i<[Link];i++)
a[i] += 2;
b = [Link]();
Netprog: JavaScript 14
Many other pre-defined object types
• String: manipulation methods
• Math: trig, log, random numbers
• Date: date conversions
• RegExp: regular expressions
• Number: limits, conversion to string
Netprog: JavaScript 15
Predefined Objects
• JavaScript also includes some objects
that are automatically created for you
(always available).
– document
– navigator
– screen
– window
Netprog: JavaScript 16
The document object
• Many attributes of the current
document are available via the
document object:
Title Referrer
URL Images
Forms Links
Colors
Netprog: JavaScript 17
document methods
• [Link]() like a print
statement – the output goes into the
HTML document.
[Link]("My title is" +
[Link]);
string concatenation!
Netprog: JavaScript 18
JavaScript Example
<HEAD>
<TITLE>JavaScript is Javalicious</TITLE>
</HEAD>
<BODY>
<H3>I am a web page and here is my
name:</H3>
<SCRIPT>
[Link]([Link]);
</SCRIPT>
<HR>
Netprog: JavaScript 19
JavaScript and
HTML Comments
<SCRIPT>
n t
<!-- e
m
[Link]("Hi Dave"); com
L
T M
[Link]="BLUE"; H
-->
</SCRIPT>
Netprog: JavaScript 20
JavaScript Functions
• The keyword function used to define
a function (subroutine):
function add(x,y) {
return(x+y);
}
Netprog: JavaScript 21
JavaScript Events
• JavaScript supports an event handling
system.
– You can tell the browser to execute
javascript commands when some event
occurs.
– Sometimes the resulting value of the
command determines the browser action.
Netprog: JavaScript 22
Simple Event Example
<BODY BGCOLOR=WHITE onUnload="restore()">
<H5>Hello - I am a very small page!</H5>
<SCRIPT>
savewidth = [Link];
saveheight = [Link];
function restore() {
[Link]=savewidth;
[Link]=saveheight;
}
// Change the window size to be small
[Link]=300; [Link]=50;
[Link]='cyan';
</SCRIPT>
Netprog: JavaScript 23
Buttons
• You can associate buttons with JavaScript
events (buttons in HTML forms)
<FORM>
<INPUT TYPE=BUTTON
VALUE="Don't Press Me"
onClick="alert('now you are in trouble!')“ >
</FORM>
Netprog: JavaScript 24
Some Events (a small sample)
onUnLoad
Window events
onLoad
onClick
onMouseUp Button events
onMouseDown
onDblClick
Link events
onMouseOver
Netprog: JavaScript 25
Document Object Model
• Naming hierarchy used to access
individual elements of a HTML
document.
• Netscape D.O.M. is a little different than
IE D.O.M. (D.A.M.)!!!*
• Easy to use if you name all entities:
– Forms, fields, images, etc.
Things are getting better all the time – there are
standard DOMs defined by The W3C
Netprog: JavaScript 26
DOM example
<FORM ID=myform ACTION=…
Please Enter Your Age:
<INPUT TYPE=TEXT ID=age NAME=age><BR>
And your weight:
<INPUT TYPE=TEXT ID=weight
NAME=weight><BR>
</FORM>
From javascript you can get at the age input
field as: [Link]
Netprog: JavaScript 27
Form Field Validation
• You can have JavaScript code that
makes sure the user enters valid
information.
• When the submit button is pressed the
script checks the values of all
necessary fields:
– You can prevent the request from
happening.
Netprog: JavaScript 28
Checking Fields
function checkform() {
if ([Link] == "") {
alert("You need to specify an age");
return(false);
} else {
return(true);
}
}
Needs to return true or false!
Netprog: JavaScript 29
Nee
bro ded
ws
er f to pre
The Form rom ven
sub t the
mit
ting
<FORM METHOD=GET ACTION=[Link] !
NAME=myform
onSubmit="return(checkform())">
AGE: <INPUT TYPE=TEXT NAME=Age>
<INPUT TYPE=SUBMIT>
</FORM>
Netprog: JavaScript 30
Complete Form
Example
• Check the CGI example named
"JavaScript" for a complete example:
– Student grade database with form field
validation in the form.
Netprog: JavaScript 31
Important Note about Form
Validation!!!
• It's a good idea to make sure the user fills out
the form before submitting.
• Users can bypass your form – they can
create requests manually (or their own
forms).
• Your CGI programs cannot rely (soley) on
Client-Side JavaScript to validate form fields!
Netprog: JavaScript 32
Lots of JavaScript
• There are many javascript examples
available via the course home page:
"Stupid JavaScript Tricks“
Got one of your own? Send it to Dave!
Netprog: JavaScript 33
