JavaScript 4: Dialogue Boxes

Alert, Confirm and Prompt Dialogue Boxes

We have met Alert already and the other two are easy to pick up. A Confirm dialogue box has an OK button and a Cancel button which return True and False respectively when they are clicked by a user. You might have an event handler which changes properties of the screen and you arrange to issue a Confirm dialogue before the action takes place.

You have just seen a piece of dialogue using alert, confirm and prompt in combination. This is the code:

var agree=false, reply='';
agree=confirm('Do you want to see the rest of this page');
if (agree) {reply=prompt("Good. What do you think of it so far?",'Comments here:');}
else {reply=prompt("Too bad, you have no choice.",'Comments here:');}
alert(reply+'? Did you really say '+reply+'?');

The JavaScript was entered in the BODY of the HTML document rather than in the HEAD section and it was written in-line rather than as a function to be called by an event handler. JavaScript can be used in this way at any point in a document to collect information from the user such as a password - if the password failed you could jump back to the previous page (history-1). You should be able to see from this example how alert, prompt and confirm are used.

Here is another example using a prompt dialogue box to get a value from the user:


Enter a value when prompted and see the corresponding multiplication table:


Here is the function code:

function gdata(){
var x; var astr='';
x=prompt("Enter the value of x",'x:');
if (x==isNaN()){alert('You must enter a number');}
for (var i=1;i<=12;++i){
astr+=i*x+' ';}
document.prompteg.tableout.value=astr;
}

Javascript URLs

You can type Javascript into the URL box for immediate execution. This means you can use a browser as a calculator by typing in an expression such as:

javascript:alert(Math.PI)

If you type just javascript: into the URL box a new window pane opens called 'javascript typein' into which you can type any valid JavaScript statements. This is probably most useful for debugging programs where you want to know the value of a variable in a program which is not working properly. When Javascript code fails for some reason you will find a message in the status bar telling you to type 'javascript:' in the URL bar. This is a basic technique for debugging programs that don't work. Hopefully you will not encounter it on the Internet proper where pages should have been debugged before being made available for public use.

Where to Put JavaScript

So far we have placed JavaScript code in the <Head></HEAD> section of a HTML document but this is not the only place it can go. For functions which are called from within the <BODY> of a HTML document it makes sense to store them in the <HEAD> section so that they are read when the page is downloaded and are definitely available to the rest of the document. In-line code which does not define or call functions may be placed almost any where within the <BODY> of the document, inside <SCRIPT> and </SCRIPT> tags.

We have seen JavaScript functions invoked by event handlers inside an HTML FORM but there are other places from which javascript may be called. Dynamic HTML allows almost any HTML object to generate events and launch scripts.

Return to Javascript Menu