VERY BASIC JAVASCRIPT



What is JavaScript

JavaScript is a high-level interpreted script language. A script language is a kind of programming language used to control existing applications, and allow you to make more elaborate/powerful use of the existing features. Unlike HTML, it has functions, and variables, and all the other things that programming languages have. Here, we shall not be looking at it in very great depth. In fact, we'll barely be scraping the surface of this very useful language.

All we're going to learn here is some handy little commands that can make your website just that little bit better. We won't go into how the JavaScript is working, just how to use a few things.

Another thing to bear in mind is that JavaScript is becoming more and more widespread, but at the moment, the only browsers that will fully support it are Netscape browsers. Others should be able to use the functions that I am going to show you here, and if they don't it won't cause any problems, but for full effect, Netscape is the one to use.

Inserting JavaScript

First, you need to understand how to make a browser realise that something is JavaScript, and not HTML. This can be done in three ways. The first, and most important, with regard to actually writing scripts in JavaScript, is by placing all the script in the header. We use:

<head>

<script language="JavaScript">

<!-- Hide JavaScript

...Place JavaScript Here ...

// unhide JavaScript -->

</script>

</head>

What's happening here is that inside the header section of the HTML document, we are placing a tag: <script> and </script> between which any non-HTML will go. At the moment, you do not have to put language="JavaScript", as there are no other script languages that are inserted in the same way at the moment. This does not mean that that won't change, though, so it is good form to get used to putting this in.

The next bit that's happening is that you're using an HTML comment opening tag. This is so that a browser that does not understand JavaScript will not see any of the code, and so won't get confused. It will not understand the <script> tag, and thus will ignore it, and will then come across a comment, and not interpret anything between that point, and the comment ending tag, which I shall talk about in a moment. A browser that does understand JavaScript will see the <script> tag, and interpret everything between the start and finish tags as JavaScript. As the <!-- tag is not JavaScript, then the browser will ignore it, and simply interpret the script.

Once the script is finished, the browser will come across the unhide JavaScript tag. The // is a comment in JavaScript, so the browser will ignore that line if it understands JavaScript, and if it doesn't, all it will see is the end comment tag for HTML, and will then continue to read the rest of the HTML document.

The other way to place JavaScript on a page is to put it in the body, in exactly the same way as above. We won't be using this method here, though, so I won't go into it.

Finally, we can place JavaScript commands inside HTML tags. This is OK, because if the browser doesn't understand JavaScript, it will simply ignore the command, and act as if it was not even there. So, for example, you could have:

<a href="location.html" onmouseover="JavaScript function";>Link Object</a>

We'll come onto the workings of the JavaScript function in a moment, but what you need to understand here is that the action "onmouseover" is called, and if the browser doesn't understand it, it will simply ignore it, and treat the above just like any other link, which is fine.


Window Alerts

Now that you know how to put JavaScript into a document, lets have a look at some functions that you may find useful. The first is Window.Alert:

Window.Alert

If you wish to have a popup window that says something like "This page is still under construction", then you can do that using the alert function in JavaScript. The syntax is as follows:

window.alert("Enter Your Text Here");

To enter it into the page, either simply put it inside the <head> section of the page, in the bit where it reads "...Place JavaScript Here .." , where it will be executed when the page opens, or you can put it inside an HTML tag. We'll see how that is done in a minute.


Window Status

The other window function that is useful is the status bar:

Window.Status

At the bottom of most browsers, there is a status bar. This is the bar that tells you where the browser is going, and how quickly things are loading, etc... If you wish to change what appears in this bar, then you can use this function, as follows:

window.status=Status Bar Entry Here";

Again, either enter this at the beginning, in the <head> section, or put it inside the HTML tag. We'll come onto how to call those functions now, with the "On" events:


"On" Events

There are several different types of what we're calling "On" events here. These are events which depend on where your mouse pointer is at any point. Here are the ones that you might find useful at this stage:

There are many more, but they are less often used, and if you want to learn about them, then a JavaScript tutorial would be a far better way to do it. Note also, that I've specifically stated that these events only ocurr in links. At the moment, links are the special places where JavaScript takes most of its input. Bear in mind that this may change in the future.

These "on" events are the commands that will call the JavaScript functions that have been described above, when inserted into an anchor tag. The syntax is as follows:

OnMouseOver="window.status='Text';"

There are several things to be aware of here. First, the OnMouseOver is just one of the events, and you can use any of the ones above here. The same is also true of the window.status function. Secondly, you will note that when we spoke about the syntax for the window functions, we used "Text", in order to define the text that is displayed by the function. Here, we've used 'Text' instead. This is because " and ' are interchangeable in JavaScript, but they must always come in pairs. As we've had to surround the window function with "s, we cannot use them again inside the brackets. If we were to try and use them again, the browser would return a JavaScript Error, so we must use ' instead. Finally, all JavaScript commands end with a ;

So this is what this script would look like inside a link (note that also, these events can only be used inside <a> tags or <area> tags):

<a href="location.html" OnClick="window.alert('Going to location.html');"> Link Text</a>

That is probably all you need to know at the moment about JavaScript.





Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page