Let's get started

Let's get started

Now I want to show some small scripts to you so you can learn how they are implemented into HTML- documents and to show which possibilities you have with the new scripting language. I will begin with a very small script which will only print a text into an HTML-document.

My first JavaScript script!

This is a normal HTML document.

Back in HTML again.

You are just reading the 'offline'- version of this document. I have an online version of this tutorial on my homepage at http://rummelplatz.uni-mannheim.de/~skoch/js/script.htm. There you can see the results of the JavaScript code directly. You can try out the JavaScript examples immediately. I will present the results of the examples here as good as I can. But I recommend that you have a look at the examples online as well - so you get an idea of what is possible in JavaScript.

The output of the first example is just this text:

This is a normal HTML document.

This is JavaScript!

Back in HTML again.

I must admit that this script is not very useful. You could write this in HTML much faster and shorter. But what I wanted to show is how you have to use the tags. You can use these tags in your document wherever you want. I really don't want to bother you with such stupid scripts any longer. So we will procede to functions. This is not hard to understand either but, believe me, it is much more useful! Functions are best declared between the tags of your HTML- page. Functions are often called by user-initiated events. So it seems reasonable to keep the functions between the tags. They are loaded first before a user can do anything that might call a function. Scripts can be placed between inside comment fields to ensure that older browsers do not display the script itself.

This script creates a button and when you press it a window will pop up saying 'Hello!'. Isn't that great? So, what is going on on this script? At first the function is loaded and kept in memory. Then a button is created with the normal

tag (HTML). There is something quite new with the tag. There you can see 'onClick'. This tells the browser which function it has to call when this button is pressed (of course, only if the browser supports JavaScript). The function 'pushbutton()' is declared in the header. When the button is pressed this function is executed. There is another new thing in this script- the 'alert' method. This method is already declared in JavaScript - so you only have to call it. There are several pre-defined functions available in JavaScript. You will learn about many more in this tutorial. You can find a complete description about all functions in JavaScript at the Netscape- Site. I think that this list is getting a lot longer in the near future. But right at the moment there are already some cool things we can do with the given methods. (I don't think the alert- Method is thought to be used this way - but we're only learning. And this way it is quite easy to understand. I hope you will excuse me...)

We got quite far by now. In fact we have a lot of possibilities just by adding functions to our scripts. Now I will show how you can read something a user has inserted into a form.

Please enter your name:

We have some new elements implemented in this script again. At first you have certainly noticed the comment in the script. This way you can hide the script from old browser- which cannot run scripts. You have to keep to the shown order! The beginning of the comment must be just after the first tag. In this HTML- document you have got a form element where a user can enter his name. The 'onBlur' in the tag tells the client which function it has to call when something is entered into the form. The function 'getname(str)' will be called after 'leaving' this form element (for example clicking besides it) or by pressing enter after entering something. The function will get the string you entered through the command 'getname(this.value)'. 'this.value' means the value you entered into this form element.