Introduction to JavaScript

What is JavaScript?

JavaScript is a new scripting language for Web- pages. Scripts written with JavaScript can be embedded into your HTML- pages. With JavaScript you have very many possibilities for enhancing your HTML- page with interesting elements. For example you are able to respond to user- initiated events quite easily. Some effects that are now possible with JavaScript were some time ago only possible with CGI. So you can create really sophisitcated pages with the help of JavaScript. You can see many examples for JavaScript scripts on the Internet. Best you have a look at some JavaScript enhanced pages. You can find many links at Gamelan (in the JavaScript section). You will find the documentation provided by Netscape at http://home.netscape.com.

What is the difference between Java and JavaScript?

Although the names are almost the same Java is not the same as JavaScript! These are two different techniques for Internet programming. Java is a programming language. JavaScript is a scripting language (as the name implies). The difference is that you can create real programs with Java. But often you just want to make a nice effect without having to bother about real programming. So JavaScript is meant to be easy to understand and easy to use. JavaScript authors should not have to care too much about programming. You could say that JavaSript is rather an extension to HTML than a separate computer language. Of course this is not the 'official' definition but I think this makes it easier to understand the difference between Java and JavaScript. You can find further information about both Java and JavaScript at Gamelan.

For further information about this topic please read the introduction provided by Netscape.

How can JavaScript scripts be run?

The first browser to support JavaScript was the Netscape Navigator 2.0. Of course the higher versions do have JavaScript as well. You might know that Java does not run on all Netscape Navigator 2.0 (or higher) versions. But this is not true for JavaScript - although there are some problems with the different versions. The Mac- version for example seems to have many bugs. In the near future there are going to be some other browsers which support JavaScript. The Microsoft Internet Explorer 3.0 is going to support JavaScript. JavaScript- enabled browsers are going to be wide spread soon - so it is worth learning this new technique now. You might realize that is really easy to write JavaScript scripts. All you have to know is some basic techniques and some work- arounds for problems you might encounter.
Of course you need a basic understanding of HTML before reading this tutorial. You can find many really good online ressources about HTML. Best you make an online search about 'html' at Yahoo if you want to get informed about HTML. (These online- documents are often more up-to-date than books. The Internet is moving quite fast these days...)

Now I want to show some small scripts 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.

<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
  <script language="JavaScript">
    document.write("This is JavaScript!")
  </script>
<br>
Back in HTML again.
</body>
</html>

If you are using a JavaScript - enabled browser at the moment then you will have the possibility to see this script working. If your browser doesn't support JavaScript then this output might be some kind of strange...

This is This is JavaScript!
Back in HTML again.

I must admit that this script is not very useful. You could write that in HTML much faster and shorter. But what I wanted to show is how you have to use the

If you want to test this one immediately and you are using a JavaScript- enabled browser then please go ahead and push the button.

This script will create 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 many different methods which you can call. I will show you some here. You can find a complete description 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 in 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 you how you can read something a user has inserted into a form.






Please enter your name:

Now you can test this script again:

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 when you 'leave' this form element or press 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.

I think the next thing is quite nice as well. We're going to implement a date function into our script. So if you creat a HTML- page you can make the client print the last change of the document. You do not have to write the date to the document though. You simply write a small script program. When you make some changes in the future, the date changes automatically.



This is a simple HTML- page.


Last changes:

At the moment this property seems not to function on every machine. Some servers show only the date 1/1/1970. There seem to be some problems with this function. We have to wait for the next update and hope that it works then properly on every machine. But you have to test this on your own machine - on some it seems to work fine.

As I already said things are moving really fast today. So it would not be amazing if next week there was a major change to JavaScript! So you always have to watch out for further changes as this language is quite young. Please understand that some things told here might change as well. But I think that the basic principles are going to stay the same.

What is JavaScript?

What is the difference between Java and JavaScript?

How can JavaScript scripts be run?

Index - Part 2 - Part 3 - Part 4 - Part 5 - Part 6 - Part 7