This is a normal HTML document.

Back in HTML again. At the first glance this looks like a normal HTML-file. The only new thing is the part: This is JavaScript. In order to see this script working save this code as a normal HTML-file and load it into your JavaScript-enabled browser. Here is the output generated by the file (if you are using a JavaScript browser you will see 3 lines of output): This is a normal HTML document. This is JavaScript! Back in HTML again. I must admit that this script isn't very useful - this could have been written in pure HTML more easily. I only wanted to demonstrate the tag is interpreted as JavaScript code. There you see the use of document.write() - one of the most important commands in JavaScript programming. document.write() is used in order to write something to the actual document (in this case this is the HTML-document). So our little JavaScript program writes the text This is JavaScript! to the HTML-document. Non-JavaScript browsers What does our page look like if the browser does not understand JavaScript? A non-JavaScript browser does not know the
Back in HTML again. The output in a non-JavaScript browser will then look like this: This is a normal HTML document. Back in HTML again. Without the HTML-comment the output of the script in a non-JavaScript browser would be: This is a normal HTML document. document.write("This is JavaScript!") Back in HTML again. Please note that you cannot hide the JavaScript source code completely. What we do here is to prevent the output of the code in old browsers - but the user can see the code through 'View document source' nevertheless. There is no way to hinder someone from viewing your source code (in order to see how a certain effect is done). Events Events and event handlers are very important for JavaScript programming. 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. We want our JavaScript program to react to certain events. This can be done with the help of event-handlers. A button might create a popup window when clicked. This means the window should pop up as a reaction to a Click-event. The event-handler we need to use is called onClick. This tells the computer what to do if this event occurs. The following code shows an easy example of the event-handler onClick:

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 tag. As we already said this defines what happens when the button is pushed. So if a Click-event occurs the computer shall execute alert('Yo'). This is JavaScript-code (Please note that we do not use the This will write out the text Welcome to my homepage! This is JavaScript! three times. Look at the source code - writing the code three times brings out the right result. But is this very efficiently? No, we can solve this better. How about this code which does the same: In this script we define a function. This is done through the lines: function myFunction() { document.write("Welcome to my homepage!
"); document.write("This is JavaScript!
"); } The commands inside the {} belong to the function myFunction(). This means that our two document.write() commands are bundled together and can be executed through a function call. In our example we have three function calls. You can see that we write myFunction() three times just below the definition of the function. These are the three function calls. This means that the contents of the function is being executed three times. This is a very easy example of a function. You might wonder why functions are so important. While reading this tutorial you will certainly realize the benefits of functions. Especially variable passing makes our scripts really flexible - we will see what this is later on. Functions can also be used in combination with event-handlers. Please consider this example:

Here you can test 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. [index] [next] ©1996,1997 by Stefan Koch e-mail:skoch@rumms.uni-mannheim.de http://rummelplatz.uni-mannheim.de/~skoch/ My JavaScript-book