JavaScript
(ECMAScript)
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 have been a number of scripting
languages supported by browsers, but
just about all scripting is now done
using JavaScript (ECMAScript).
Netprog: JavaScript 2
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
• Special Effects
• Limited network programming
Netprog: JavaScript 3
JavaScript is not Java
• JavaScript is a very simple scripting
language.
• Syntax is similar to a C/Java.
• Interpreted language.
• OOP, but parts of the support for objects are
cumbersome.
Netprog: JavaScript 4
Language Elements
• Variables
• Literals
• Operators
• Control Structures
• Objects
Netprog: JavaScript 5
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 6
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 7
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 8
Operators
• Arithmetic, comparison, assignment,
bitwise, boolean (pretty much just like
C).
+ - * / % ++ -- == != > <
&& || ! & | << >>
Netprog: JavaScript 9
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 10
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 11
Array Objects
• Arrays are supported as objects.
• Attribute length
• Methods include:
concat join pop push reverse sort
Netprog: JavaScript 12
Array example code
var a = [8,7,6,5];
for (i=0;i<[Link];i++)
a[i] += 2;
b = [Link]();
Netprog: JavaScript 13
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 14
Predefined Objects
• JavaScript also includes some objects
that are automatically created for you
(always available).
– document
– navigator
– screen
– window
Netprog: JavaScript 15
The document object
• Many attributes of the current
document are available via the
document object:
Title Referrer
URL Images
Forms Links
Colors Cookies
Netprog: JavaScript 16
document methods
• [Link]() like a print
statement – the output goes into the
HTML document.
[Link]("My title is" +
[Link]);
string concatenation!
Netprog: JavaScript 17
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 18
JavaScript and
HTML Comments
<script>
n t
<!-- e
m
[Link]("Hi Dave"); om
c
L
[Link]="BLUE"; T M
H
-->
</script>
Netprog: JavaScript 19
JavaScript Functions
• The keyword function used to define
a function (subroutine):
function add(x,y) {
return(x+y);
}
Netprog: JavaScript 20
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 21
Simple Event Example
Depending on your browser setting, this may not change the window size...
<body 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 22
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 23
Some Events (a small sample)
onUnload
Window events
onLoad
onClick
onMouseUp Button events
onMouseDown
onDblClick
onMouseOver Link events
Netprog: JavaScript 24
Document Object Model
• Naming hierarchy used to access
individual elements of a HTML
document.
• There are some variations in the DOM
supported by browsers (DAM!!!)*
• Easy to use if you provide id attributes
for all entities:
– Forms, fields, images, etc.
Things are getting better all the time – there are
standard DOMs defined by The W3C
Netprog: JavaScript 25
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]("age").value
Netprog: JavaScript 26
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 27
Checking Fields
function checkform() {
if
([Link]("age").value
== "") {
alert("You need to specify an age");
return(false);
} else {
return(true);
}
Needs to return true or false!
Netprog: JavaScript 28
Nee
bro ded
ws
er f to pre
The Form rom ve
sub nt th
mit e
ting
<form !
method='get'action='[Link]'
onSubmit="return(checkform())">
Age: <input type='text'
id='age' name='age'>
<input type='submit'>
</form>
Netprog: JavaScript 29
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 30
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 31
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 32