Introduction to JavaScript
Part 2
Now I want to show you another example using the time and date methods. You
already saw the lastModified property working. Now we are going to
print the local time to our document. This method uses the time and date
of your machine- so if you got the machine- date set to 5/17/1983 you will get the
wrong date by this method as well. So this is not a time and date kept by the
Internet (or something like that).
Here is the code:
I have to tell you that JavaScript does not have a real date type. But as you saw you
can work with dates quite nice. How this works is that dates are represented by the
number of milliseconds since 1/1/1970 0:0h. This sounds quite complicated but this is
a common method for representing dates on computers. But you don't have to bother about this.
You just have to care about the functions and this is not difficult at all. I just wanted to tell
you so you don't think I tell you anything wrong.
I got a nice little function where you can calculate a random number. This will
be implemented by JavaScript soon. But at the moment you have to work with some
tricks. Well, it is not really a trick. This is a really common way almost any compiler
I can think of uses to calculate random numbers. Yes, it calculates it. You
take the time and date of your machine and manipulate it somehow. I believe the final
JavaScript language will use this method (or a kind of) as well. As I told you above the
time is just a large number. You can use this number and calculate with it. For example
you could calculate the sine from it and take the absolute value. This will get a number
between 0 and 1. As the time changes every millisecond you won't risc to get the same number
twice (when you calculate them fast behind each other). When you want to calculate many
random numbers in a short time you should not use sin() alone. Then you would get numbers
following a sine- curve! This is not really random. But if you want to calculate a random
number and let's say in 20 seconds again- this is a great function to do this.
This is a random number:
Here is the code for this example:
Creating windows is a great feature of JavaScript. You can build new windows. Load a
HTML- document. Navigate through the Internet- all with JavaScript. I'm going
to show you how we can open a window and write something to it. If you push this button
you will get to see what I'm going to explain to you next.
Breaking up with traditions I didn't write Hello world! to the page...
toolbar
For pixels you have to write the number of pixels. This way you can tell the browser
how large your window should be.
Please notice this: There seems to be some bugs in JavaScript. When you write something to a window
you should always put a <br> after the last text you write to a window. Otherwise you
probably don't get to see the last row of your text.
I hope you enjoyed this second course of JavaScript. As JavaScript is not finished yet it will
certainly change in the near future. I hope my examples will still work then. I will write
further examples when new features are added to JavaScript or I have a new idea what I could
show to you.
Stefan
The next feature of JavaScript you can see by moving your mouse pointer
over this link. Just look at the statusbar at the bottom of this browser.
You can combine this with JavaScript functions as well. If
you move over this
link a window will pop up. Now I will show you
the source of these two effects:
<a href="tpage.htm" onMouseOver="window.status='Just another stupid link...';
return true">
The only thing you have to do is to add the onMouseOver- method into your <a>- tag.
The window.status will allow you to write things to the statusbar of your web-browser.
As you can see you have to alter with the quotes. You cannot use " all the time,
because otherwise JavaScript is not able to identify the string you want to print to the
statusbar. After the string you have to write ;return true.
Well, this is not really JavaScript. You could think of other browsers interpreting this
feature through HTML- style. The second example uses JavaScript by calling the alert-
function. Here is the code:
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("Hello!");
}
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>
This is quite easy. It uses the onMouseOver- method and the function hello() is
called when this event occurs.
<script language="LiveScript">
<!-- Hiding
today = new Date()
document.write("The time now is: ",today.getHours(),":",today.getMinutes())
document.write("
The date is: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>
At first we are creating a date variable. This is done by today=new Date().
When we do not specify a certain time and date the browser uses the local time and
puts it into the variable today. Notice that we do not have to declare the variable
today anywhere. This is a difference to Java and other programming languages where
you have to specify your types you want to use before you use them. We have created
a time object which keeps the local time and date. Now we can simply write its contents
to the document. You have to write today before each get...- method. Otherwise
the browser would not know which object to refer to. The getMonth method returns a number
between 0 and 11- 0 standing for january and 11 for december. So we have to add 1 to the
number returned to get the right month.
An interesting thing you could think of is to create a date - for example the date
when you created a document Then you could calculate how many days later somebody is
reading your document. And if it is more than 10 days old you could tell him: Hey, this
is really old- don't read it!
For this you will need the date of today as shown in the example above and the creation
date. You can set a date while creating a date object. This would look like this:
docStarted= new Date(96,0,13)
You have to specify the year first, then the month (remember to decrease the month by one!) and
then the day. You can also specify the time:
docStarted= new Date(96,0,13,10,50,0)
The first numbers are still the date. They are followed by the hour, the minutes and the seconds.
<html>
<head>
<script language="LiveScript">
function RandomNumber() {
today = new Date();
num= Math.abs(Math.sin(today.getTime()));
return num;
}
</script>
</head>
<body>
<script language="LiveScript">
<!--
document.write("This is a random number:", RandomNumber());
// -->
</script>
</body>
</html>
Here is the source:
<html>
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>This is really cool!</B></h1></CENTER>
As always you can see the button which calles a function. The function WinOpen() creates a new
window by calling the method open. The first quotes contain the URL of the page. Here you
can put the address of a HTML- document which you want to load. If you leave it blank no page
is loaded and you can write to it with JavaScript! The next quotes specify the name of the window.
Here you can write nearly anything- this has no effect on our examples right know. But you will
get a error message when you write Display Window (with a space between the two words -
Netscape tells you something different in their information- but I sat half an hour because I could
not find an error!) The next quotes specify the properties of the window. This is really interesting.
You can tell if you want a toolbar, scrollbars... If you write toolbar=yes then you will get
a toolbar in your window. There are some different properties you can change listed below. You can
specify every possible property. You have to write them the way shown above. And with no
spaces between! Here is what you can change on your page:
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
After you have opened your window and called it msg (stands in front of the open method), you can
now write to your window. Here you can write normal HTML- code! This is really a great thing.
You could build a HTML- document using the form input a user gave you in the document before.
You could make a page where a user has to write his name to a form and then a new HTML- document
is created containing his name! Some month ago this was only possible with CGI- Scripts!
If you want to insert any images into a new window be sure to put the height and width
properties to the <img> tag. Otherwise you won't see any pictures or your
pages crashes somehow. This may cause some very strange problems where you
don't expect the image to be 'responsible' for.
Last changed: 25.Feb.96
© 1996 by Stefan Koch