JavaScript Handout PF

Return to Client Side (The Browser)
So far we have been developing
Programming on the Client Side:

JavaScript/Dynamic HTML
Recap - Perl/CGI:
Static Web pages

569
Server Side
Search Engine
Log Usage
Gather Data/Stats
Interface to Databases
Many more suitable applications ....
Often Adequate for the task in hand

Often useful and
Often entertaining or informative.

!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Making Web Pages Dynamic
Other Typical Uses of Dynamic Web Page
Can replace some (but not all) CGI functionality?
Detecting which browser accesses page

Customising HTML for browsers
E.g. HTML form:
Users enter data and submit it to the server
570
Very nice.
Essential to do hard work processing on the Internet (PHP similar)
Static Pages:
571
a CGI script is used to verify and validate that data.
User Customised HTML
Opening new browser windows for new links
572
Messages and confirmations, Alerts, Status Bar
passes data across the network slow.
Writing to Frames
Rollover Buttons, Moving Images
How much more interactive could a site

be if data were checked by the browser and
any error messages originated locally?
Multiple pages in a single Download

..... Many More
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Some More Definitions: Dynamic HTML and Document Object

Model
The Document Object Model (DOM)

DOM:
Before delving into the programming there are two more topics to
introduce.
The Document Object Model (DOM) :
The key element of DHTML is probably the document object

model.
573
Scripts can only manipulate objects on the page because of
DOM makes everything on the page into an object
574
Elements can be manipulated by programmed scripts.
DOM
This was developed by the World Wide Web Consortium (W3C)

Limited Cross-browser Support neither of the big players
yet adheres fully to it.
Dynamic HTML (DHTML) :
A combination of content formatted using HTML, cascading

style sheets, a scripting language and the DOM.
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
DOM of an HTML Document
Example HTML DOM
The DOM model of an HTML document is a hierarchical structure

which might reasonably be represented as a tree.
The relationship between some HTML code and the DOM
Does NOT imply that DOM software must manipulate the

document in a hierarchical manner,
575
It is simply a representation.
!!
""
!
"
<html>
<head>
<title>TITLE OF PAGE</title>
</head>
<body>
<p>Some text...</p>
<ul>
<li>First
<li>Second
</ul>
</body>
</html>
576
!!
""
!
"
Back
Back
Close
Close
JavaScript
Example HTML DOM (Cont.)
JavaScript is NOT JAVA:
The only similarity between the two languages is in their names!!!

577
Basic idea : a client-side browser language not as complicated as

Java.
578
JavaScript and JScript
Meant to be implementations of the same thing.

Not exactly the SAME!!!!
The DOM models, but does not implement:
Objects that comprise a document
Semantics, behaviour and attributes of those objects

Relationships between those objects
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
What is JavaScript and What is it Used For?
Pros and Cons of JavaScript
JavaScript is:
Advantages:
A fairly simple language
Only suitable for fairly simple tasks
Best suited to tasks which run for a short time
579
Most commonly used to manipulate the pieces of the document

object model.
Wide browser support i.e. Most Browsers speak a dialect.

Easy access to document objects and their manipulation
No long download times w.r.t java or graphic animations
No Plug-in support required
Relatively Secure
580
Disadvantages:
!!
""
!
"
Back
Close
Not standard support for Javascript across browsers esp. DOM

Web page useless if script does not work!!
Javascript may be disabled by browser reading HTML file no
control over this
JavaScripts can run slowly
The version of JavaScript that was used as the basis of the ECMA
Script standard was 1.1. Therefore everything that is written using
JavaScript 1.1 should comply with the standard.
!!
""
!
"
Back
Close
Learning JavaScript
Borrowing Code
First Steps in JavaScript
As with HTML (and Perl):
A lot of code on Web.
Running Javascript
581
All the JavaScript that your browser encounters is freely available
582
MOST COMMONLY: front-ends for Web pages.
to you.
Therefore:
Part of HTML document (as we will see very soon)

So View Source, or
Save as ... HTML will give you access to lots of Examples.
One of the best resources on the web is The JavaScript Source at
http://javascript.internet.com
JavaScript can be run on some file and Web servers
You do not compile it like other programs, Java, C, Pascal

It is an interpreted language: It is a script
!!
""
!
"
To Use: Simply embed JavaScript in you HTML web page
!!
""
!
"
Back
Back
Close
Close
A Simple Example 1 Hello World
The key points of JavaScript Programs
The script that follows could hardly be easier.

The JavaScript program is contained between the <script> .... </script>
Well list the code first then explain whats going on.
<html>
<head>
<title> Hello World JavaScript</title>
</head>
The language attribute must be set to "javascript" i.e

583
Each line of code is terminated by a semi-colon;
Blocks of code must be surrounded by a pair of curly brackets. A block of code
is a set of instructions that are to be executed together as a unit. This might be

because they are optional and dependent upon a boolean condition or because
they are to be executed repeatedly;
var str = "Hello World";

window.alert(str);
Functions have parameters which are passed inside parenthesis;
document.write("<h1>" + str + "</h1>");
</body>
</html>
584
JavaScript programs contain variables, objects and functions.
<body >
<script language="javascript">
</script>
!!
""
!
"
Variables are declared using the keyword var;
Scripts require neither a main function nor an exit condition.

Functions may be used.
!!
""
!
"
Back
Back
Close
Close
Our First Hello World Example
A Simple Example Hello World with a Function
Specifically for the Hello World Program:
Let us now see how we use use funtions in JavaScript

Here wee also note that
We create a variable str and store the string "Hello World" in

it.
We create an alert window with the message "Hello World".

The window object is used and we call the alert method
(function) of this object.
Figure 29: Hello World JavaScript Example
We write() to the document model some HTML.
You may freely write JavaScript in any place in your Web page.
585
However if you wish to trigger actions from certain events you
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Hello World with a Function
Hello World with a Function Explanation
The Hello World program called from a function is as follows:
The operation of the program is essentially the same as the first version
except that
<html>
<head>
We write a function
587
function init(){
var str = "Hello World";
onLoad="init()"
</body>
</html>
588
We call the function when the Web page loads with the
document.write("<h1>" + str + "</h1>");
<body onLoad="init()">
init()
to do the job.
window.alert(str);
</script>
</head>
586
may wish to put your JavaScript in functions in the Head section

of the document.
!!
""
!
"
attribute in the body tag.
!!
""
!
"
Back
Back
Close
Close
More Functions
Popup Browser Information Example
We can add more functions that get called on different events:
The program also introduces some more objects and some useful
applications of JavaScript:
We call a function popup() when the Web page loads
We call a function farewell() when the page is unloaded:

The onUnLoad="farewell()" attribute is set.
589
The navigator contains
data about the browser being

used
program finds the
version of the application
appVersion
and
the
userAgent().
590
The
Safari Version
This information is displayed

in a pop up alert
!!
""
!
"
When you leave the Web
page or Refresh the page an

different alert is brought
up
Explorer Version
!!
""
!
"
Back
Back
Close
Close
Popup Browser Information Example
Popup Browser Information Example Code

The full code for this example is:
<html>
<head>
591
function popup(){
var major = parseInt(navigator.appVersion);
var minor = parseFloat(navigator.appVersion);
var agent = navigator.userAgent.toLowerCase();
592
document.write("<h1>Details in Popup</h1>");
window.alert(agent + " " + major);
}
Figure 30: Browser Version Page Exit JavaScript Example (Internet

Explorer Display Shown)
!!
""
!
"
Back
Close
function farewell(){
window.alert("Farewell and thanks for visiting");
}
</script>
</head>
<body onLoad="popup()" onUnLoad="farewell()">
</body>
</html>
!!
""
!
"
Back
Close
More Browser Information
A Second Browser Information Example
So far our examples have done everything inside JavaScript

environments:
The program achieves a similar task as the previous example but in

a completely different way:
You can also mix HTML and JavaScript
You can also access JavaScript variables in the HTML
The program an HTML TABLE (see later) to a Browser with the

593
!!
""
!
"
Browsers details:
Figure 31: Browser Version 2 JavaScript Example (Explorer)
594
!!
""
!
"
Back
Back
Close
Close
Browser Information Example 2: Javascript and HTML Mix

Browser Information Example 2: HTML HEAD
<HEAD>
<SCRIPT>
Figure 32: Browser Version 2 JavaScript Example (Safari)
595


596

</SCRIPT>
The program use the Javascript document object to determine

which browsers Name, Version, Code and Agent are in
operation.
Name, Version, Code and Agent are referenced in the body

of the HTML code
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Browser Information Example 2: HTML BODY

<BODY onLoad="whatBrowser()">
<CENTER> <TABLE BORDER>
<FORM NAME="Browser">
<TR>
<TD> Browser Name: </TD>
<TD> <INPUT TYPE="txt" NAME="Name" Size="45"></TD>
</TR>
<TR>
<TD> Browser Version: </TD>
<TD> <INPUT TYPE="txt" NAME="Version" Size="45"></TD>
</TR>
<TR>
<TD> Browser Code Name: </TD>
<TD> <INPUT TYPE="txt" NAME="Code" Size="45"></TD>
</TR>
<TR>
<TD> User-Agent: </TD>
<TD> <INPUT TYPE="txt" NAME="Agent" Size="45"></TD>
</TR>
</FORM>
</TABLE> </CENTER>
</BODY>
</HTML>
JavaScript: Formal Syntax

597
Now that we have seen a few examples we should be able to pick

up the main aspects of JavaScript.
But let us formally introduce these concepts:
Using JavaScript with HTML Pages

Formal JavaScript Syntax
Similar to many other languages at the command level
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Writing small scripts
Sharing A JavaScript Amongst Several Pages
If use small scripts or only scripts in a web few pages then
What if you have a good script and you wish/need to use it in several
distinct pages?:
Include the script code in the HTML Page:

<html>
<head>
<title>A Sample JavaScript</title>
<script language=javascript>
<!-the JavaScript code goes here...
// -->
</script>
</head>
<body>
...
</body>
</html>
598
Bad Idea: include it every page literally

599
Copy and Paste into appropriate place or Retype Code?

What if you need to change to source code?
600
Good Idea:
Store code in a separate file

Include that separate file code in the head of the page as shown
below.
Easier maintenance: Only one file edited for code changes.
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Including a JavaScript file
Variables
By convention JavaScript programs are stored in files with the

.js extension.
Like any programming language JavaScript has variables.
To include the JavaScript .js file:
Use the src attribute in the script tag:
<html>
<head>
<title>A Sample JavaScript File Include</title>
<script language=javascript src="sample.js">
</script>
</head>
<body>
...
</body>
</html>
601
!!
""
!
"
!!
""
!
"
Back
Close
Manipulating Variables
Having defined it you can manipulate variables in a variety of
ways.
603
These are fairly standard operations such as.
604
Simple arithmetic +,-,*/ etc. E.g.

num = num + 3;
num = 23;
str = "Some words";
another_str = str;
first_boolean = true;
As in Perl/Javascript, variables are context sensitive
Variable names must begin with a letter, digit or underscore;

You cant use spaces in names
Names are case sensitive so the variables fred, FRED and
frEd all refer to different variables,
HOWEVER It is not a good idea to name variables with
similar names
You cant use a reserved word as a variable name, e.g. var.
Back
Look at the following examples, E.g:

var
var
var
var
602
Close
Use the keyword var before the variable name.

A value can be assigned with =.
Strict rules governing how you name your variables (Much like
other languages):
Creating Variables
No necessity to give the variable a value
Stores data items used in the script.
Autoincrement ++, -++num;
!!
""
!
"
String concatenation +:
str = str + another_str;
!!
""
!
"
Back
Back
Close
Close
JavaScript Data Types
JavaScript Data Types (Cont.)
JavaScript has only four types of data,
Strings :
String Definition:
Note: you do not declare the type in var:
A Collection of characters (that are not numbers).
Numeric :
Integers such as 2,22 and 2,222,000 or

Floating point values like 23.42, -56.01 and 2E45.
No need to differentiate between
In fact variables can change type within program (Similar to
605
All of the following are strings:
Put quotes around the value to a assign a variable:
Perl).
name = "David Marshall";

name = David Marshall;
str = "34.45";
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
JavaScript Data Types (Cont.)
JavaScript Variable Scoping Rules
Boolean :
In JavaScript variables can be either local or global:
Variables can hold the values true and false.

Used a lot in conditional tests (later).
Null :
606
"David",
"David Marshall"
"12345.432".
Global :
607
Used when you dont yet know something.

A null value means one that has not yet been decided.
It does not mean nil or zero and should NOT be used in that
Variable is available to all parts of the program
Local :
608
Variables are declared inside a function.

Can only be used within that function.
way.
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Comments
Simple Example: Difference between Global and

Local Variables
The last global/local scoping example contained some JavaScript

comments:
The following (meaningless) code illustrates the difference between

global and local variables:
// declare the global variables
var global_one = 32;
var global_two;
Each line of a comment is defined by two slashes //, and

609
function test {
// this function has a local variable
// a global value is copied into it
// the local is then passed into a
// function as a parameter
var local_var = number;

}
// copying a local variable into a global
// like this is not allowed
global_two = local_var;
610
For example:
// this is a JavaScript comment
var local_var; // local variable

local_var = global_one; // copy global
// into local
func_two(local_var);
}
function func_two(number) {
// create a local variable and copy
// a parameter into it
Comments continue from that point (//)to the end of the line.
All code form // to end of line are ignored by Javascript
// var i = 1; this variable assignment is ignored

// as it is commented out
!!
""
!
"
No way of commenting large blocks of text as a block in JavaScript.

If you want a block comment then you have to comment each
and every line as in above example.
!!
""
!
"
Back
Back
Close
Close
Objects and Classes

Objects are described in software and design constructs called
classes.
Objects in JavaScript
JavaScript attempts to be an object-oriented (OO) language:
A class usually contains:

633
Some data items and
634
Some methods.
NOT a true OO language
BUT Primitive JavaScript objects are quite useful

Also many useful built-in functions
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
JavaScript Objects
studying the next few slides, or coding (or use a similar object
properties listing)
We do not really need to understand the ins and outs of objects for
this course.
We essentially just use built-in JavaScript objects such as:
635
636
!!
!!
""
!
"
Document and
Window
You can create your own JavaScript objects but well leave this for
another course (or see a good book or Web Site)
The web site:
http://www.physiol.ox.ac.uk/Computing/Online_Documentation/JavaScript/
""
contains a good reference for Javascript, and should be considered

when
!
"
Back
Back
Close
Close
Document Properties
The Document Object
The document
A document is a Web page (object) that is being either
Displayed or
Has a number of properties

637
Created.
Is accessed by JavaScript programs
638
Is used to manipulate the content of the Web page.
A document is controlled by a number of properties.

Some of these properties can be used to
Create HTML pages from within JavaScript

!!
""
!
"
Change the operation of the current page.
!!
""
!
"
Back
Back
Close
Close
bgcolor, fgcolor :
Some Common document Methods/Properties

write, writeln :
HTML pages can be created live (dynamically) using JavaScript.
This is done by using the write or writeln methods of the
document object.
639
E.g.:
The same properties can be set in the HTML <BODY> tag.

The values can be set from JavaScript.
The methods accept either hexadecimal values or common
names for colours:
640
document.bgcolor = "#e302334";
document.fgcolor = "coral";
document.write("<body>");
document.writeln("<h1>A test</h1>");
writeln causes a newline to be output with the output.
!!
""
!
"
Back
Back
Close
Close
anchors :
This property is an array of names of all the HTML anchors

List in the order in the HTML document.
Anchors can be accessed like this:
document.anchors[0];
!!
""
!
"
alert("The first hyperlink is " +

document.links[0].href)
Note how this relates to the DOM
641
642
!!
""
!
"
!!
""
!
"
e.g, we could say

alert("The first anchor is " +
document.anchors[0].name)
links :
Another array all HTML links

Order as they appear on the Web page.
Anchors can be accessed like this:
document.links[0];
e.g. we could say
Back
Back
Close
Close
forms :
The Window Object
An array in the order of the document.

The array contains all of the HTML forms.
Combining the array with individual form objects to access
The browser window is a mutable object

Addressed by JavaScript.
specific forms/form elements.
643
layers :
See Examples soon
644
A document can be made from a number of layers of content.

An array contains the layer objects.
Layers have many methods and properties of their own.
close() :
A JavaScript document isnt completely written until the

close() has been called.
!!
""
!
"
If you dont use this method then the browser will keep waiting
for more data even if there is none and may not complete
the rendering of the Web page.
!!
""
!
"
Back
Back
Close
Close
Some Common window Methods and Properties
Shuts the current window.
open :
Opens a new window which contains the document specified

by URL, Syntax:
win = window.open(URL , name,

prop1=X,prop2=X,propN=X );
645
646
!!
""
!
"
!!
""
!
"
The window is given an identifying name so that it can be

manipulated individually.
You can also manipulate the returned object, win in your JavaScript
code..
win = window.open("","New Window","width=100,

height=100,resizable=0");
win.document.writeln("<h1>NEW WINDOW
MANIPULATION</h1>");
Note that there is no URL, also note the use of arguments such
as width,resizable, etc
close() :
Back
Back
Close
Close
Some Common window Methods/Properties (Cont.)
Some Common window Methods/Properties (Cont.)
Properties that may be toggled :
scroll(co-ord, co-ord) :
Many of the attributes of a browser are undesirable in a pop-up

window.
Individually switched on and off.
647
toolbar=[1|0]
location=[1|0]
directories=[1|0]
status=[1|0]
menubar=[1|0]
scrollbars=[1|0]
resizable=[1|0]
Resizing a Window :
You specify the size of a window in pixel units:

width= pixels
height= pixels
The window can be automatically scrolled to given position

The co-ordinates are given in pixels.
Start indexing from (0, 0) which is the top left corner.
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Simple Example: Setting a Windows Properties
The Form Object
Frequently when a new window is being opened you may wish to

set up how it is displayed in a Browser, with JavaScript:
Two aspects of the form can be manipulated though JavaScript:
The data that is entered onto your form can be checked at
You may choose to open it at and set its properties very easily in
JavaScript, for example:
648
submission.
649
newWin = open(address, "newWin",

"width=100, height=100");
You can actually build forms through JavaScript.
650
Form Elements:
Creates a new window called newWin and of a size 100x100 pixels.
The elements of the form are held in an array
Any of the properties of those form elements is now accessible
Many other properties (above) set in a similar way
though JavaScript.
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
Simple JavaScript Form Example
Simple JavaScript Form Example HTML/JavaScript Code
This example shows a form and a JavaScript function which reads

the properties of the form elements
<html>
<head>
function validate() {
var method = document.forms[0].method;
var action = document.forms[0].action;
var value = document.forms[0].elements[0].value;
If the name entered in the forms first element (the name text
input field) is not David the form is reset!!!
651
652
if(value != "David"){
document.forms[0].reset();
}
else {
alert("Hi David!!");
!!
""
!
"
Back
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="user" size=32>
<input type="submit" value="Press Me!"
onClick="validate()">
</form>
</body>
</html>
Close
Validate/Submit to php/perl
The main points of this program are:
processForm.php/.pl will only run if all fields are filled in.
This event is set in the forms input tag for the submit type.
The onClick event can be applied to all form elements The
653
event is triggered when the user clicks on that element.
There other events that can triggered in a form:
onSubmit : This event can only be triggered by the form itself

and occurs when a form is submitted.
onReset : Triggered when a form is reset by the user.
!!
""
!
"
Back
Close
Back
Close
Simple JavaScript Form Example Explained

We use the onClick event to trigger validation routines.
!!
""
!
"
<html>
<head>
<!-function verifyForm(theForm) {
if(theForm.username.value == "" ) {
alert("Please enter a name");
return false;}
if(theForm.address.value == "" ) {
alert("Please enter an address");
return false;}
}
//-->
</script>
</head>
<body>
<form name="myForm" method="POST"
654
!!
""
!
"
Back
Close
action="processForm.php"
onSubmit="return verifyForm(this)">
Name: <input type="text" name="username"><br>
Address:<input type="text" name="address"><br>
<input type="submit" value="Send">
</form>
</body>
</html>
}
Now you can only visit processForm.php if David is entered.
655
656
!!
""
!
"
!!
""
!
"
The function verifyForm can also be substituted with a different

function
E.g. validate() could be used, but it would require some modification

if(value != "David"){
document.forms[0].reset();
//This new line is required
return false;
}else {
alert("Hi David!!");
Back
Back
Close
Close
More Events
Selected Events
Some events have already been seen i.e. onLoad, onClick, onReset
onClick: when the mouse button is clicked on an element (used

with the button and link elements)
Events are often generated in response to mouse or keyboard
onMouseOver/onMouseOut: when the mouse moves into/ out
actions
Events can be used to run JavaScript functions in response to user

actions, e.g. to validate user input from a form or to cause graphic
effects such as rollovers
657
of an element (used with the link, image and layer elements).
658
onMouseDown/onMouseUp: when the mouse button is pressed/released.

onLoad/onUnload: when browser loads/finishes with a document
(used with the body element).
Not all HTML elements support all events
onFocus/onBlur : when an element is selected/deselected (i.e.
The set of HTML elements able to support events is different for
another element is selected) with the mouse (used with the input,
select, textarea and button elements).
different browsers.
!!
""
!
"
onSubmit: when the submit button pressed in a form (used with

the form element).
!!
""
!
"
Back
Back
Close
Close
Another onClick example

<head>
<title>Example 3</title>
<!-function change(col) {
659
if(col=="red") {
document.body.style.backgroundColor = "#ff0000";
}
if(col=="blue") {
document.body.style.backgroundColor = "#0000ff";
}
}
//-->
</script>
!!
</head>
""
<body>
!
<form>
"
<input type="button" value="Red" onClick=change("red")>
Back
<input type="button" value="Blue" onClick=change("blue")>

</form>
</body>
660
!!
""
!
"
Back
Close
Rollovers
Rollover Example
A rollover is an image that changes its appearance when the mouse

moves over it, and returns to its original state when the mouse
moves away
The mouse movement is detected using the onMouseOver and

onMouseOut event handlers
Close
661
<img name="homeImage" src="home1.png">

The source of this image is stored in the object
document.homeImage.src
Mouse events trigger JavaScript commands that change the content
of this object
!!
""
!
"
<head>
<title>Rollovers</title>
</head>
<body>
<a href="home.html"
onMouseOver="document.homeImage.src=home2.png"
onMouseOut="document. homeImage.src=home1.png">
<img src="home1.png" name="homeImage"
alt="home" border="0" width="100">
</a>
</body>
662
!!
""
!
"
Back
Back
Close
Close
Recap: The open() method

Recall from last lecture window object definition :
JavaScript Examples
open("URL ", "name ")

close()
Rollovers
Manipulating Windows
663
Common tasks based around the window object:
Many practical uses
Commonly seen on many web pages

Window Example 1: Opening a New Window
Windows are independent of each other any windows
They can be spawned from our code

They can be made to look and act totally differently.
!!
""
!
"
664
!!
""
!
"
Back
Back
Close
Close
Window Example 1: Loading a URL into an Opening

Customised Window
Window Example 1: JavaScript Code

The JavaScript code is as follows:
So our JavaScript Example can be developed to:
Open a new window from a current one
toolbar=[1|0]
location=[1|0]
directories=[1|0]
status=[1|0]
menubar=[1|0]
scrollbars=[1|0]
resizable=[1|0]
width=pixels
height=pixels
665
<html>
<head>
<!-function Load(url){
666
newwin = open(url, "newwin",

status=0,
toolbar=0,
resizable=0,
width=500,
height=700);
}
//-->
</script>
</head>
Loads specified a URL and
Attributes of new window can be customised.
!!
""
!
"
Back
Close
<body>
<a href=""
onClick="Load(http://www.cs.cf.ac.uk)">
New page</a>
</body>
</html>
!!
""
!
"
Back
Close
Window Example 1 Explained
Window Example 2: Web Advertising
The basic operation of the code is:
Javascript commonly used to create/control web adverts

Here We access main page
The Web page Link is loaded into new window.

The URL and window name are not optional
The URL can be replaced with empty quotes to open a blank window,
E.g.:
667
This will action a function to bring up a second window with

adverts in
668
Simply we call a open() on an onLoad() event.
open("","blankwin);
Load a web page ad.html in this window.
Window has fixed given size:
It cannot be resized
No toolbar or status is present either.
Set resize,width height etc. parameters:
The parameter list must be inside a single set of single quotes,

There cannot be line breaks or spaces in the parameter string (licence is taken
in the notes for space considerations)
Dont have any spaces between the parameters,
Dont forget the commas between parameters.
!!
""
!
"
Back
Back
Close
Close
Window Example 2: JavaScript Code
Messages, Alerts, Prompts and Confirmations Example
<html>
<head>
<!-function Load(url){
newwin = open(url, "newwin",
status=0,toolbar=0,
resizable=0,
width=500,
height=700);
}
//-->
</script>
</head>
!!
""
!
"
We have already met the alert message is previous examples.

Other Message types exist.
JavaScript provides three built-in window types:
669
Prompts
670
Confirms
Alerts
<body onLoad="Load(ad.html)">
<h1> MAIN
</body>
</html>
PAGE HERE</h1>
!!
""
!
"
!!
""
!
"
Back
Back
Close
Close
prompt("string, string ") :

displays a simple window that contains a prompt and a textfield
in which the user can enter data.
E.g. prompt("You are being prompted", "");
confirm("string ") :
Shows a window containing a message and two buttons: OK and
Cancel.
E.g. confirm("Please Confirm?");
671
Cancel will abort any pending action,

OK will let the action proceed.
The method a has two parameters:
a text string defining the prompt message and

a string to use as the default value.
If you dont want to display a default then simply use an

empty string.
672
!!
""
!
"
Sample applications:
When submitting form data, or

Possibly as the user tries to follow a link that leaves your site
for another.
!!
""
!
"
Back
Back
Close
Close
alert("string ") :
Displays the text string and an OK button.
E.g. alert("Are You Alert?");
The Status Bar

At the bottom of the browser window.
Non JavaScript Usage:
673
Displays URL of any link mouse is over

Connection status of web connection
674
JavaScript can write to it:
!!
""
!
"
Some Web developers like to use as part of the site.

Text strings can be displayed in the status bar but should be
used with care.
Browser cant display your messages and useful messages about
browser!!
anything that can be done in the status bar can be done more
interestingly using elsewhere on Browser (Message box, body
...)
!!
""
!
"
Back
Back
Close
Close
Checking for a Browser and Alerting the User
To write to the status do:

<html>
<head>
<!-function Init(){
self.status = "Some Message";
}
//-->
</script>
</head>
<body onLoad="Init()">
<h1>And the Status Bar Says...</h1>
</body>
</html>
Note: we will see another example of the status() function in
the next browser check example
One final example for alerts and statuses:
We revisit the navigator object examples

675
676
!!
""
!
"
Back
Back
Close
Close
Checking for a Browser and Alerting the User Code Listing

(Cont.)
The Code should be readily understood as we have covered all the

elements before:
677
function Init() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
if (navigator.appName == "Microsoft Internet Explorer") {
alert("You are using Microsoft Products. GO AWAY!!!");
status = "You are using Microsoft Products. GO AWAY!!!";
}
else {
status = "You are using Safari. HOORAY";
}
}
</script></head>
Internet Explorer we inform the user via an alert() and status

()
!!
""
!
"
Checking for a Browser and Alerting the User Code Listing
<html> <head>
<title>
Browser Check - Java Script E.G.
</title>
<SCRIPT LANGUAGE="JavaScript">
We detect what browser is being used and if the user is using
!!
""
!
"
Back
Close
<body onLoad = "Init()">

<h1> Browser Information</h1>
<CENTER> <TABLE BORDER>
<FORM NAME="Browser">
<TR>
<TD> Browser Name: </TD>
<TD> <INPUT TYPE="txt" NAME="Name" Size="45"></TD>
</TR>
<TR>
<TD> Browser Version: </TD>
<TD> <INPUT TYPE="txt" NAME="Version" Size="45"></TD>
</TR>
<TR>
<TD> Browser Code Name: </TD>
<TD> <INPUT TYPE="txt" NAME="Code" Size="45"></TD>
</TR>
<TR>
<TD> User-Agent: </TD>
<TD> <INPUT TYPE="txt" NAME="Agent" Size="45"></TD>
</TR>
</FORM>
</TABLE></CENTER>
</body></html>
678
!!
""
!
"
Back
Close
Writing to a Different Frame

We are yet to meet HTML frames so well defer this until later.
More Examples
Lots more at:
http://javascript.internet.com
679
Bookmark this site!!.
!!
""
!
"
Back
Close

JavaScript Handout PF

Uploaded by

JavaScript Handout PF

Uploaded by

Return to Client Side (The Browser)

So far we have been developing

Programming on the Client Side:

Static Web pages

Often Adequate for the task in hand

Often entertaining or informative.

Making Web Pages Dynamic

Other Typical Uses of Dynamic Web Page

Can replace some (but not all) CGI functionality?

Detecting which browser accesses page

E.g. HTML form:

Users enter data and submit it to the server

Essential to do hard work processing on the Internet (PHP similar)

a CGI script is used to verify and validate that data.

User Customised HTML

Opening new browser windows for new links

Messages and confirmations, Alerts, Status Bar

passes data across the network slow.

Rollover Buttons, Moving Images

How much more interactive could a site

Multiple pages in a single Download

Some More Definitions: Dynamic HTML and Document Object

The Document Object Model (DOM)

The key element of DHTML is probably the document object

Scripts can only manipulate objects on the page because of

DOM makes everything on the page into an object

Elements can be manipulated by programmed scripts.

This was developed by the World Wide Web Consortium (W3C)

Dynamic HTML (DHTML) :

A combination of content formatted using HTML, cascading

DOM of an HTML Document

Example HTML DOM

The DOM model of an HTML document is a hierarchical structure

The relationship between some HTML code and the DOM

Does NOT imply that DOM software must manipulate the

Example HTML DOM (Cont.)

JavaScript is NOT JAVA:

The only similarity between the two languages is in their names!!!

Basic idea : a client-side browser language not as complicated as

JavaScript and JScript

Meant to be implementations of the same thing.

Objects that comprise a document

Semantics, behaviour and attributes of those objects

What is JavaScript and What is it Used For?

Pros and Cons of JavaScript

A fairly simple language

Only suitable for fairly simple tasks

Best suited to tasks which run for a short time

Most commonly used to manipulate the pieces of the document

Wide browser support i.e. Most Browsers speak a dialect.

Not standard support for Javascript across browsers esp. DOM

JavaScripts can run slowly

First Steps in JavaScript

As with HTML (and Perl):

A lot of code on Web.

All the JavaScript that your browser encounters is freely available

MOST COMMONLY: front-ends for Web pages.

Part of HTML document (as we will see very soon)

JavaScript can be run on some file and Web servers

You do not compile it like other programs, Java, C, Pascal

To Use: Simply embed JavaScript in you HTML web page

A Simple Example 1 Hello World

The key points of JavaScript Programs

The script that follows could hardly be easier.

The language attribute must be set to "javascript" i.e

Each line of code is terminated by a semi-colon;

Blocks of code must be surrounded by a pair of curly brackets. A block of code

is a set of instructions that are to be executed together as a unit. This might be

var str = "Hello World";

Functions have parameters which are passed inside parenthesis;

document.write("<h1>" + str + "</h1>");

JavaScript programs contain variables, objects and functions.

Variables are declared using the keyword var;

Scripts require neither a main function nor an exit condition.

Our First Hello World Example

A Simple Example Hello World with a Function