Ken Ward's Java Script Tutorial ...

Jumping from a form button

If you click the button below, then you will go to the index page.

Now, you might say, "So what? Haven't we been doing this in all the previous lessons, nearly?" Er, No! In the previous lessons we have used HTML, perhaps wrongly, to do jumps. Now we are doing it with Java Script. I think that Java Script works better here. (Actually, there is a sneaky reason here because I want to introduce a few Java Script procedures, hopefully, rather gently!)

Here is the code:

<!-- This script goes in the HEAD -->

<script type="text/javascript">

<!-- Hide from older Browsers

function Locat()

{

location="index.html"

alert('Don\'t forget to press the back button to return!')

}

//Done Hiding-->

</script>

<!-- End of Script in the HEAD -->

<!-- This script goes where you want the button in the body -->

<form>

<p>

<input type="button" name="b1" value="Go to index ..." onclick="Locat();return false" />

</form>

<!-- End of Button Script>

Telling the Browser its Java Script!

The following code:

<script type="text/javascript">

<!-- Hide from older Browsers-->

Tells the browser that the type of script is "javascript". Actually, at the moment, browsers are happy with the simple <script> because Java Script is the default. The second line is an HTML comment which hides the script from non-Java Script browsers (they already know how to ignore the <script type ...> bit!) After this there are some lines of Javascript and the code ends with:

//Done Hiding-->
</script>

As you know, the --> is the end of the HTML comment tag which we started at the beginning of the code. The // is a Java Script comment marker and tells the Java Script engine not to try and understand 'Done Hiding'! It hides what follows on that line from Java Script. Every piece of Java Script needs to be enclosed in these comments. If you use these comments on what is not Java Script, say around a form, you will get an error - quite reasonably because these are for Java Script, not anything else!

Getting Functional

The heart of the code is the function.

function Locat()

{

location.href="index.html"

alert('Don\'t forget to press the back button to return!')

}

Its name is Locat(). It has two brackets, which all functions have. In this case they are empty. The curly brackets tell the browser where the function begins and where it ends. The stuff in the middle is what happens when you call the function.

My Favourite Location

location, is an object that stores the location of the current page. When we make it equal to something else, then we load that page instead of the current one. In the above code we make it equal to the contents page. In the above script we make location.href equal to the contents page (index.html), so when this function is called, the browser loads index.html.

The button in the body

We make a button in the body using the form. The only java script here is the onClick event. When the user clicks on the button the function Locat() is called.

<form action="">

<p>

<input type="button" id="b1" name="b1" value="Go to index ..." onclick="Locat(); return false" />

</form>

So we have mentioned:

Are you copying these scripts and playing about with them so you can really learn how to use them? If you wonder about why something is there, why not change it and see what happens?

In the next lesson we will look at buttons that give the user a choice.

Next: Getting Confirmation