Introduction to JavaScript
JavaScript is used to do things like when you want to bring up a confirm dialog box, move an object with Dynamic HTML, or bring up an alert dialog box. It is an offshoot of the programming language JAVA, and was invented by Netscape. JavaScript can be incorporated into the code of an HTML document, which makes it very useful in web design terms. There are many different properties, methods, and so on, and I am not going to go over them all here. Instead, here are a few of the more simple and useful features the language offers for web designers.
JavaScript uses what are called event handlers, which execute a set of an instructions when an event takes place, like the user clicks something. The ones we will be using are:
OnClick
JavaScript is not recognised by old browsers, if they don't take frames they certainly won't take JScript. If we just wrote the code within the two tags <SCRIPT> & </SCRIPT> then an old browser would not recognise the tags and just take the language as being normal text to be printed in the web page, and it would come up. This presents an easily solved problem of how to prevent this happening: The answer is to use comment tags round the code, as new browsers will execute anything within the SCRIPT tags regardless of comment tags, and old browsers will skip the SCRIPT tags and take the code as a comment.
Alerts:
Where anyname is the name of the function that will be executed when the event that calls it happens.
<A HREF="anyname()"> A link with an alert when you click on it. </A>
This does not need the OnClick event handler because when you click on a link the browser goes to that page or executes that function without being told "On Click do this".
<FORM>
Confirm Dialogs:
<SCRIPT>
This brings us to the subject of the "location" statement, which specifies what file to go to if the user chooses OK, in this case the MIDI file dcodys.mid. If the user chooses cancel nothing happens and they can continue to browse.
<HTML>
The OnMouseOver Statement:
<A HREF="apage.htm" OnMouseOver="self.status='A link to apage.htm'; return true;"> A link to a page </A>
You can use these methods for practically anything in an HTML page, images, buttons, checkboxes.....
OnMouseOver
OnLoad
OnUnload.
Inside the SCRIPT tag we start with a comment tag and finish with a comment tag. Inside these tags we place the JavaScript code. JavaScript functions are normally placed in the HEAD tag so that they load before anything else, so that even if the user clicks on something before the page is fully loaded the functions will already have been loaded, and no error messages will come up.
These are used to give the user little messages when something happens, like they click on something. The code is as follows:
<SCRIPT>
<!--
function anyname()
{ alert("This is a test alert")
}
//-->
</SCRIPT>
An event to do this could be someone clicking a link. The function is called in the following way:
I we were using a button in a form then we would use the OnClick event handler:
<INPUT TYPE="button" VALUE="Click Here!" OnClick="anyname()">
</FORM>
These are used to prompt the user for action with an Ok/Cancel box. This is what can be used to ask the user whether they want background music or not. The code is the following:
<!--
function aconfirmthing()
{ if (confirm('Would you like Background Music?'))location='dcodys.mid';
}
//-->
</SCRIPT>
The OnLoad & OnUnload Statements:
These are used to execute a function when something in the page loads or unloads. For example, the alert on the first page is done when the background for the "Iceman" title loads. If you really wanted, when someone left your page you could put up a confirm box to ask whether they really wanted to leave. This would be done by placing the command OnUnload into the code for the page's background, or one of its images. The code would be as follows:
<HEAD>
<TITLE> A JavaScript Enabled Page</TITLE>
<SCRIPT>
<!--
function whyleave()
{ if (confirm('Don't you want to stay?'))location='index.htm';
}
//-->
</SCRIPT>
</HEAD>
<BODY BACKGROUND="backpic.gif" OnUnload="whyleave()">
This is a JScript Enabled Page!
</BODY>
</HTML>
This is useful when a user's cursor is over a link. We can then show them in the grey status bar at the bottom of their browser window (you know, where Netscape tells you its managed download 60% of 42K!) a little message, like what the link leads to, in our own words, and not have just a message generated by the browser saying what file it leads to.
This part of code is pretty easy:
Basically, just experiment and see what happens.
Further reference on JavaScript can be found at http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html
