Introduction to JavaScript
JavaScript is a new scripting language. Scripts written in JavaScript can be
embedded into your HTML- Pages. With JavaScript you are able to respond to
user-initiaded events (for example a form input). This happens without any
network transmission. So when a user writes something into a form it is not
necessary that it is transmitted to the Server, verified and sent back. The
input is verified by the client application and can be transmitted after that.
You can also think of a program which can be run on the client. By now there
are a lot of calculators out there on the Internet. Some are provided by
Netscape. Just look at the
JavaScript
section.
Though JavaScript resembles Java it is not the same! Java is a programming
language which is more complex than JavaScript. Javascript is meant to be an
easy to understand language. The JavaScript authors should not have to care
too much about programming. Therefore some elements of Java are not supported
in JavaScript.
For further information about this topic please read the introduction
provided by Netscape.
You can run JavaScript scripts with Netscape Navigator 2.0. By now Netscape is
out of beta. So you can grab your final version now.
If you don't have Netscape Navigator 2.0
get it. At
the moment there is no other browser which can run JavaScript scripts, I think.
If you are using Netscape 2.0 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 a normal HTML document.
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
<script> tags. You can use these tags in your document wherever you want.
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 <form> tag (HTML). There is something quite new with the <input>
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.
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 <script> tag.
The comment ends just before the </script> tag. In this HTML- document you
have got a form element where a user can enter his name. The 'onBlur' in the
<input> 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.
At the moment this property seems not to function on every machine. Compuserve shows
only the date 1/1/1970. Well, I can tell you this is not quite true. This property works
fine on my PC though. So you have to test it on your machine. I have to delete it for the
moment.
There are many more things you can do. Just have a look into the documents
which are kept by
Netscape. I
will complete this small course in the near future. 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!
Stefan Koch
How can JavaScript scripts be run?
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="LiveScript">
document.write("This is JavaScript!")
</script>
<br>
Back in HTML again.
</body>
</html>
Back in HTML again.
I don't want to bother you with such stupid scripts. 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 <head> tags of your HTML-
page. Functions are called by user-initiated events. So it seems reasonable
to keep the functions between the <head> 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.
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
If you want to test this one immediately and you are using Netscape 2.0 then
please go ahead and push the button.
(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.
<html>
<head>
<script language="LiveScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Now you can test this script again:
Please enter your name:
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.
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
In my first release of this
introduction I have written lastmodified. This was the style Netscape 2.0 beta2
wanted. Now I got Netscape 2.0 beta4. And this has changed to lastModified.
So please notice that JavaScript is case sensitive. lastmodified and lastModified are
something different. This is the reason why the first release had no date at the end
of the page when viewed with some versions of Netscape.
Last changed: 25.Feb.96
© 1996 by Stefan Koch