Part 1: First steps
names. This is not true though. I think it would go too far at
the moment to show you all the differences - so just memorize that
For further information on this topic please read the introduction provided by Netscape or my book :-)
(since version 2.0) or the Microsoft Internet Explorer (MSIE - since
version 3.0). Since these two browsers are widely spread many people
Of course you need a basic understanding of HTML before reading this tutorial. You can find many really good online ressources covering HTML. Best you make an online search for 'html' at Yahoo in order to get more information on HTML.
see how this works we are going to look at an easy example:
Events are mostly caused by user actions. If the user clicks on a button
a Click-event occurs. If the mousepointer moves across a link a
MouseOver-event occurs. There are several different events.
<form> <input type="button" value="Click me" onClick="alert('Yo')"> </form>
There are a few new things in this code - so let's take it step by step. You
can see that we create a form with a button (this is basically a HTML-problem
so I won't cover it here). The new part is onClick="alert('Yo')" inside
the <input> tag. As we already said this defines what happens when the
button is pushed. So if a Click-event occurs the computer shall execute
<script> tag in this case).
alert() lets you create popup windows. Inside the brackets you have to specify a string. In our case this is 'Yo'. This is the text which shall be shown in the popup window. So our script creates a window with the contents 'Yo' when the user clicks on the button.
One thing might be a little bit confusing: In the document.write() command we used double quotes " and in combination with alert() we use only single quotes ' - why? Basically you can use both. But in the last example we wrote onClick="alert('Yo')" - you can see that we used both double and single quotes. If we wrote onClick="alert("Yo")" the computer would get confused as it isn't clear which part belongs to the onClick event-handler and which not. So you have to alternate with the quotes in this case. It doesn't matter in which order you use the quotes - first double quotes and then single quotes or vice versa. This means you can also write onClick='alert("Yo")'.
There are many different event-handlers you can use. We will get to know some during this tutorial - but not all. So please refer to a reference if you want to know what kind of other event-handlers do exist.
I will talk about this important concept already now.
Basically functions are a way for bundling several commands together. Let's write a script which outputs a certain text three times. Consider the following approach:
Functions can also be used in combination with event-handlers. Please consider this example:
The button calls the function calculation(). You can see that the function does certain calculations. For this we are using the variables x, y and result. We can define a variable with the keyword var. Variables can be used to store different values - like numbers, text strings etc. The line var result= x + y; tells the browser to create a variable result and store in it the result of x + y (i.e. 5 + 12). After this operation the variable result is 17. The command alert(result) is in this case the same as alert(17). This means we get a popup window with the number 17 in it.
©1996-1998 by Stefan Koch