1. © Hugh McCabe 2000 Web Authoring Lecture 12
JavaScript
What is JavaScript?
A platform-independent, event-driven, interpreted programming language developed by Netscape and Sun.
Used for adding interactivity to web pages because scripts can be embedded in HTML files by enclosing the code in <script> </script> tags.
Foundation of Dynamic HTML (DHTML)
JavaScript adds to HTML by making possible
event-handling
client-side processing
It is useful to the developer because they can use it to specify actions to carry out based on events which occur when the page is being viewed e.g. mouse clicks, button presses and so on ….
© Hugh McCabe 2000 Web Authoring Lecture 12 1 1

2. © Hugh McCabe 2000 Web Authoring Lecture 12
Differences between Java and JavaScript
1. Execution Java source code is compiled on the server into byte code, then sent to the client for execution as an applet. The Java Virtual Machine (e.g. a browser which can execute applets) must be resident on the client in order to execute this.
JavaScript code is embedded as ASCII text within the HTML document itself. This is sent from the server to the client. Browser must include a JavaScript interpreter which executes the JavaScript line by line.
In summary Java is compiled, JavaScript is interpreted.
2. Object Methodology
Java is a strict object-oriented programming language in that everything has to be developed as an object by the programmer.
JavaScript is object based . It has no classes or inheritance but otherwise uses most of the ideas of object-orientation.
© Hugh McCabe 2000 Web Authoring Lecture 12 2 2

3. © Hugh McCabe 2000 Web Authoring Lecture 12
3. Use in HTML Java is a separate language whose programs are created and stored independently of the HTML which might call them. It is called in the same way we might call an image file or sound file.
JavaScript is embedded plain text within the HTML document. It can only be executed when the enclosing HTML file is loaded into a browser.
4. Declaration of variables Java uses strong type checking. All variables are declared and checked server side during compilation.
JavaScript is loosely typed as data types are determined and assigned at run-time by the interpreter on the client browser
5. Language Scope Java is designed as a general purpose fully-featured programming language suitable for developing a wide range of applications. One of its uses is to provide a level of interactivity to web pages. JavaScript is designed solely as a means of providing interactivity to web pages.
© Hugh McCabe 2000 Web Authoring Lecture 12 3 3

4. © Hugh McCabe 2000 Web Authoring Lecture 12
Why is JavaScript object-based?
JavaScript is referred to as an object-based language because it makes use of many of the features of object-orientation without providing the full mechanism of classes, inheritance and so on.
Object oriented programming is a programming methodology which designs programs which are based on user and system defined chunks of data, along with the operations which can be performed on this data, and the means of accessing and modifying the data.
Fundamental concepts are objects, methods and properties.
An object is basically something which stores some information. It may provides ways for you to read that information and a way for you to write to, or change, that information.
© Hugh McCabe 2000 Web Authoring Lecture 12 4 4

5. © Hugh McCabe 2000 Web Authoring Lecture 12
Some of the information in the object may be directly accessible, other information may require you to use a method to access it. A method can be thought of as some operation which can be performed on or by the object.
The directly accessible bits of information in the object are its properties. The programmer can change these directly. Other bits of information associated with the object can be only accessed via methods.
What’s this got to do with HTML?
JavaScript regards the entire web document in which it is embedded as an object. All elements of the web page are also objects e.g. tables, forms, buttons, images etc…
All of these objects have properties (information about the object) which can be directly accessed. For example one of the properties of the web document is its background colour. This can be directly altered in JavaScript by:
document.bgcolor = “red”
© Hugh McCabe 2000 Web Authoring Lecture 12 5 5

6. © Hugh McCabe 2000 Web Authoring Lecture 12
Most objects have a set of things that they can do. Different objects can do different things. Each of the things that a document can do are methods. For example a document can write things to the screen. In JavaScript this is done using the write() method e.g.
document.write(“Hello World”)
How do we trigger these methods? JavaScript provides constructs for responding to events. For example we can place a button on a web page and trigger some method when the user clicks on it. Other events are things like OnMouseOver, OnMouseOut, OnLoad.
© Hugh McCabe 2000 Web Authoring Lecture 12 6 6

7. © Hugh McCabe 2000 Web Authoring Lecture 12
What does it look like?
Here is a simple example.
<html>
<body> <br>
This is HTML<br>
<script language=“JavaScript”>
document.write(“This is JavaScript”)
</script>
<br>This is HTML again!
</body>
</html>
The bit inside the script tags is JavaScript.
If you type this is and load into a browser you will see
This is HTML
This is JavaScript
This is HTML again!
© Hugh McCabe 2000 Web Authoring Lecture 12 7 7

8. © Hugh McCabe 2000 Web Authoring Lecture 12
No big deal, could have done this without JavaScript
However it demonstrates the <script> tag. Everything inside is interpreted as JavaScript.
document.write() outputs to the HTML page.
What if the browser doesn’t do JavaScript?
In this case it will ignore the <script> tag and outputs everything following it as normal text. Very bad!
Fix this as follows:
<html>
<body>
<br>
This is a normal HTML document
<script language=“JavaScript”>
<! --
document.write(“This is JavaScript!”)
// -->
</script>
© Hugh McCabe 2000 Web Authoring Lecture 12 8 8

9. © Hugh McCabe 2000 Web Authoring Lecture 12
The contents of the script tag has been enclosed in HTML comments <!-- -->
So, non-JavaScript browsers will ignore this.
JavaScript browsers will ignore the comment tags!
Events
Events are caused by user actions.
We want to be able to write code to respond to these.
A simple event is the Click event.
For example if the user clicks on a button then we might want a pop-up window to appear. The following code illustrates this:
<form>
<input type =“button” value=“Click me” onClick=“alert(‘Hi’)”>
</form>
© Hugh McCabe 2000 Web Authoring Lecture 12 9 9

10. © Hugh McCabe 2000 Web Authoring Lecture 10
This creates a simple form with a button which will look something like this:
Click me
If the user clicks the button a pop-up window will ,eh, pop up. It will contain the text “Hi”.
onClick defines what happens when a click event occurs.
In this case the browser executes alert(‘Hi’)
This is JavaScript code. Note it does not have to be enclosed in the <script> tags in this case.
Alert creates pop-up windows.
Functions
These are used to bundle sets of commands together in order to use them to respond to events.
© Hugh McCabe 2000 Web Authoring Lecture 10 10 10

11. © Hugh McCabe 2000 Web Authoring Lecture 12
Here’s an example:
<html>
<script language=“JavaScript”>
<!-- hide
function Myfunction() {
document.write(“Welcome to my page!<br>”);
document.write(“This is JavaScript!<br>”); }
myFunction();
// -->
</script>
</html>
This will cause the text
Welcome to my page!
This is JavaScript!
to be displayed three times.
© Hugh McCabe 2000 Web Authoring Lecture 12 11 11

12. © Hugh McCabe 2000 Web Authoring Lecture 12
Functions are generally used in conjunction with event-handlers. Consider this example:
<html>
<head>
<script language=“JavaScript”>
<!-- hide
function calc() {
var x = 12;
var y = 5;
var result = x+y;
alert(result); }
//-->
</script>
</head> <body> <form>
<input type=“button” value=“Calculate” onClick=“calc()”>
</form> </body> </html>
© Hugh McCabe 2000 Web Authoring Lecture 12 12 12

13. © Hugh McCabe 2000 Web Authoring Lecture 12
The button calls the function calc() . It defines variables, gives them values and fires up a pop-up window with the results of a calculation.
Obviously for this to do anything useful we should be able to pass the function values. JavaScript allows this also.
The JavaScript Hierarchy
JavaScript organises all elements of the web page into an object hierarchy in order to allow the programmer to manipulate these objects.
Each object has certain properties and methods associated with it.
A simple example allow us to see how the hierarchy is organised.
© Hugh McCabe 2000 Web Authoring Lecture 12 13 13

14. © Hugh McCabe 2000 Web Authoring Lecture 12
<html>
<body bgcolor=“#ffffff”>
<center>
<img src=“home.gif” name=“pic1”>
</center>
<p>
<form name=“myForm”>
Name:
<input type=“text” name=“name” value=“”><br>
<input type=“text” name=“ ” value=“”><br><br>
<input type=“button” value=“Push me” name=“myButton”
onClick=“alert(‘Hi’)”>
</form>
<img src=“ruler.gif” name=“pic4”>
<a href=“ homepage</a>
</body>
</html>
© Hugh McCabe 2000 Web Authoring Lecture 12 14 14

15. © Hugh McCabe 2000 Web Authoring Lecture 12
Here’s a screenshot of the page with some things added
© Hugh McCabe 2000 Web Authoring Lecture 12 15 15

16. © Hugh McCabe 2000 Web Authoring Lecture 12
There’s two images, one link, and one form with two text fields and a button.
From JavaScript’s point of view the browser window is a window-object.
This window-object contains certain elements like the statusbar (not shown on the diagram).
Another element of the window-object is the document-object (into which we have loaded a HTML page).
The document-object is an important object in JavaScript.
This document-object has various properties like background colour and so on.
Furthermore all of the HTML-elements are themselves properties of the document-object.
These HTML-elements (like the images, forms etc.) are themselves objects with their own properties.
So we have an object hierarchy as shown overleaf.
© Hugh McCabe 2000 Web Authoring Lecture 12 16 16

17. © Hugh McCabe 2000 Web Authoring Lecture 12
In order to refer to different objects on the page we must refer to this hierarchy.
Suppose we want to access the first image. This is
document.images[0]
Access the first text field of the form as
document.forms[0].elements[0]
© Hugh McCabe 2000 Web Authoring Lecture 12 17 17

18. © Hugh McCabe 2000 Web Authoring Lecture 12
Suppose we want to know what the user entered into the first text field.
Once we have located it (previous slide) we want to be able to manipulate it. This is done with various properties and methods associated with that type of object (look up a JavaScript reference!).
If you do this you will see that textelements have a property called value. This is the text entered into the box.
We can read this out by using the line of code:
name=document.forms[0].elements[0].value;
The string is stored in the variable name.
We could for example create a pop-up window using this e.g.
alert(“Hi “ + name)
JavaScript also allow you to associate names with objects on the page in order to avoid working with numbered subscripts.
© Hugh McCabe 2000 Web Authoring Lecture 12 18 18

19. © Hugh McCabe 2000 Web Authoring Lecture 12
The previous example associated the name myForm with the form. It did this with the code
<form name=“myForm”>
Name:
. . .
</form>
This means that forms[0] is called myForm
Similarly the first text field is called name so instead of
name=document.forms[0].elements[0].value
we can use
name=document.myForm.name.value
We can also assign a new value to the text field as follows
<input type=“text” name=“input” value=“bla bla bla”>
<input type=“button” value=“Write”
onClick=“document.myForm.input.value=‘Hi!’>
© Hugh McCabe 2000 Web Authoring Lecture 12 19 19

20. © Hugh McCabe 2000 Web Authoring Lecture 12
In this case the text field starts off with the text “bla bla bla” in it but when the user clicks on the button it changes to “Hi!”.
Here is another example which illustrates the use of functions and more ...
<html>
<head>
<script language=“JavaScript”>
<!--hide
function first(){
//creates a popup window with the text which was
// entered into the text field
alert(“The value of the textfield is: “ +
document.myForm.myText.value); }
function second(){
//this function checks the state of the checkbox
var myString=“The checkbox is “;
if(document.myForm.myCheckbox.checked)myString+=“checked”
else myString+=“not checked”;
alert(myString);
(pto)
© Hugh McCabe 2000 Web Authoring Lecture 12 20 20

21. © Hugh McCabe 2000 Web Authoring Lecture 12
//-->
</script>
</head>
<body bgcolor=lightblue>
<form name=“myForm”>
<input type=“text” name=“myText” value=“bla bla”>
<input type=“button” name=“button1” value=“Button 1”
onClick=“first()”>
<br>
<input type=“checkbox” name=“myCheckbox” CHECKED>
<input type=“button” name=“button2” value=“Button 2”
onClick=“second()”>
</form>
<p><br><br>
<script language=“JavaScript”>
<!-- hide
document.write(“The background colour is: “);
document.write(document.bgColor + “<br>”);
document.write(“The text on the second button is: “);
document.write(document.myForm.button2.value);
</script> </body> </html>
© Hugh McCabe 2000 Web Authoring Lecture 12 21 21

22. © Hugh McCabe 2000 Web Authoring Lecture 12
So what’s it used for?
This lecture only suffices to give a brief overview of what JavaScript is and some idea of how it works.
Among the common uses of JavaScript are
Mouseovers
Form input validation
Client Side Processing of forms
Image Maps
Manipulating Windows and Controlling Loading of Documents
Any sort of programming which you might consider attaching to a web page … possibilities are endless!
© Hugh McCabe 2000 Web Authoring Lecture 12 22 22