More advanced web page development: some introductory ...



More advanced web page development: some introductory Javascript

You will be aware that HTML can be used to produce web pages with stable patterns of text. Many websites these days, however, contain more innovative and dynamic content which allows for more interaction with the user: i.e. actions by the user affect what information is displayed. Scripting languages are a common way of achieving this and Javascript is the most common and best supported of these.

What are scripting languages?

Scripting languages allow for lines of (plain text) code to be inserted into another application, in this case into into the HTML of a web page in order to produce more interactive effects such as:

Changes in the text displayed (e.g. The Guardian’s site at newsunlimited.co.uk).

Calculations to be performed.

Making messages to the user appear.

Why is it useful to know about Javascript?

Because all web browsers support it. It is currently the principal scripting language on the WWW.

It is easy to use and powerful.

It is freely available.

Since its development in the mid-90's (as Livescript from Netscape) a large library of code has been developed and made acessible on the web

What Javascript is not:

Javascript is NOT (repeat NOT) the same as Java. Java is a fully-fledged programming language which requires knowledge of object-orientation and which needs you to download the Java Development Kit from Sun in order to have programs compiled (i.e. put into the kind of binary code that machines can understand). Javascript is a much more limited tool, but correspondingly needs less apparatus in order to run: essentially you write the script, insert it into the webpage and it will work (if the browser is Javascript enabled - and most are - the browser interprets the script).

A first script

To start with, write the following webpage:

Javascript

The following text is written to the page by Javascript.

document.write(" Hi! ")

The preceding script demonstrates the basic object.method (object dot method) paradigm.

The document object (the web page) has a method 'write' associated with it.

The write method acts on an argument placed in () brackets after it.

As youi might guess, the write method displays the argument on screen.

Note that what is written to the screen in this case is a 'string' of text and is enclosed in double quotes. Note also that the string includes some tags which are interpreted and acted on by the browser.

Script 2

function message()

{

alert("This standard alert box will be

called by the onload event")

}

document.write("This text is the page.")

The above script demonstrates:

• an inbuilt javascript feature (the alert box)

• a javascript function defined in the header. (It is in the header so that it is already in memory before the BODY loads.)

• a javascript function activated by an event (the onload event)

The next exercise takes a more careful look at functions and events.

Script 3

The following script will enable you to create two boxes into which numbers can be inserted and the product of the two numbers calculated. To start with, write the following webpage:

This will produce a web page that looks something like this:

[pic]

You have produced two boxes for input and a button. Nothing happens just yet if you click the button: be patient a little while longer and look at what you've already written.

You began the body of the page by writing . Any insertion of controls such as text boxes, command buttons or drop down boxes in HTML must be done within the and tags. You also associated the button with

a) a label (the text which says "Show result") and

b) an event (onClick="multiply()"). Events are things that are triggered by the user doing something to the screen - in this case it is what happens when the user clicks on the button.

But what happens when the user clicks on the button? Something called "multiply()" should occur but you haven't told the computer what that is yet. This is what you're about to do. Insert the following text into the HTML between the and tags.

Now, enter a number into each box, click on the button and an answer should appear in a little message box:

So what's happened here? Let’s think this through line by line:

This line tells the browser that Javascript is the language being used. It won’t automatically enable Javascript, however. If Javascript isn’t switched on then you can make sure it is by finding the preferences menu and clicking the appropriate box under languages.

This line ends the script.

The whole HTML file (including the script) should look like this:

And that is a function.

An exercise

1. produce a web page that converts a distance in miles to kilometres (approx 1.6 kilometres to the mile)

So - what have you learnt?

i) that you can write a function, which can be called from within the main body of the HTML. This is a very common way of organising software of many different kinds. A function which performs a standardised routine (or set of activities) is then "told" what values to use in its calculations. This function can be reused many times in this or in different programs.

ii) The idea of "event-driven" programming. Graphical User Interfaces often have functions launched when events such as a mouse click occur. Development tools such as Visual Basic also make very heavy use of events of this kind. For example in an Access database, a function performs a calculation whenever a record is changed.

But is this all about numbers and calculations? Not at all. Here's an example of a mouseover event - much used to brighten up web pages.

Using the onMouseover event

For this you will need a couple of graphical images. You can acquire these almost anywhere on the World Wide Web by clicking on them with the right hand mouse button and finding the Save Image menu item. For the purposes of this exercise I visited the National Portrait Gallery's site and saved pictures of Queen Elizabeth 1 and Lord Byron.

[pic] [pic]

Any picture will do for this exercise. And of course, it doesn't matter what type your graphics files are. In this case they are jpg files but you might use gif files. Just make sure you remember what name you've given them.

Produce an HTML script that looks like the following with your own filenames for the graphics substituted for mine:

What will happen is that when the file is loaded into the browser one picture will appear:

[pic]

And then when the mouse is moved over the picture the onMouseover event is triggered and the other picture is shown.

[pic]

And then when the mouse is moved off the image (onMouseout) the first image is reverted to.

So what is happening?

The lines

var down = new Image()

over.src = "liz1.jpg"

create a variable which is an image called "over". This variable, when the script is run, will have the value of one of the saved picture files.

Inside the body of the HTML file is a a form of anchor, rather like a link to another webpage, but in this case # is a dummy reference.

The anchor element is used because it allows us to include onMouseover and onMouseout events.

The onMouseover and onMouseout events here refer to the first image in the document. (Computing usually starts counting from 0 not 1, so the first, and in this case the only, image in the document is referred to as document.images[0].)

Each event (onMouseover and onMouseout) calls an image src method.

The initial image is inserted in the page by which is placed within the and anchor element tags.

(By the way, the BORDER and ALIGN tags are completely optional - they show what can be done with images in any form of HTML. The important bit that loads the image is IMG SRC="byron.jpg")

So what have you learnt here?

• the way in which Javascript can be used to manage the relationship between the different input and output hardware components, in this case the mouse and the screen.

• the exercise also illustrates the way in which data can be hidden until the cursor is moved to a particular part of the screen. This allows a web page to contain far more detail than a reader can cope with at one go because only a fraction of it is visible at any one moment.

Further things to do

• Find some web pages that use Javascript. You can usually tell this by looking to see if there are any interactive elements like mouseover events. Examine the source code and distinguish the Javascript function from the standard HTML.

• Check out the Javascript tutorial at

• Use a search engine to find pages ofering free scripts.

-----------------------

*

*

Queen Elizabeth I. The "Virgin Queen" - very

respectable.

Filename - liz1.jpg

Lord Byron - totally unrespectable. Lock up your daughters! Filename

byron.jpg

Mouseover example

var over = new Image()

over.src = "liz1.jpg"

HERE'S A COUPLE OF PICTURES

Move the mouse over to change the person shown.

The script which creates the multiply() event.

The are comment tags which hide the script from older browsers.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download