Controlling the Browser

Site hosted by Angelfire.com: Build your free website today!

The onMouseOver- property

You can see the next feature of JavaScript by moving your mouse pointer over this link. Just look at the statusbar at the bottom of this browser. You can combine this with other 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="" onMouseOver="window.status='Just another stupid link...';
 return true">

The only thing you have to do is to add the onMouseOver- property to 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.
The second example uses JavaScript by calling the alert- function. Here is the code:

<html>
<head>
<script language="JavaScript">
<!-- 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.

More date- functions

Now I want to show another example to you 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:

<script language="JavaScript">
<!-- 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(). If 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 most 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.

I have to tell you that JavaScript does not have a real date type. But as you see you can work with dates quite nice. This works because 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.

Random numbers

A common problem is how you can use random numbers in programming and scripting languages. At the moment the random- function in JavaScript does not work but it soon going to be implemented, I believe. 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 it) as well. As I told you above the time is just a large number. You can use this number and make some calculations 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 risk to get the same number twice (when calculating them fast behind each other). If 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:

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
  today = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;  
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("This is a random number:", RandomNumber());
// -->
</script>
</body>
</html>

Of course the random- function shown here isn't great for all puposes. It is just that you get a basic idea about how they work. Here I will present a function which I got from Maynard Demmon. You just have to set the limits variable to the value you need - 100 for example. And you will get a 'good' random value between 0 and 99. Here is the code:


  function random() {
     today = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
     return num;
  }

Creating windows

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...
Here is the source:

<html>
<head>
<script language="JavaScript">
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>
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>

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 an error message if 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 listed below which you can change. 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:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels

For pixels you have to write the number of pixels. This way you can tell the browser how large your window should be.
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 months ago this was only possible with CGI- Scripts!

Please note this: When writing 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. This happens because the browser only writes out complete lines - and if there is no end of the line it waits for more to come.
Another important thing is this: 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. So always write something like this so you won't get any trouble: