Java Script Programming

Page 7

Now that we have learned a bit about strings, we can explore some more capabilities. First, I will show you how to make a scrolling message in the status bar. This is example is used all the time with Java Script. It is really very simple conceptually. The other aspect you will learn here is how to use a timer. Let's begin.

Set up an HTML document like so:

<html>
<head>

<Script Language = "JavaScript">

</script>

</head>
<body>

</body>

</html>

Between the comment tags, enter the following lines:
var spacer = "        ";
var message = "This is how to scroll a message in a status bar using Java Script";
var position = 0;

function Marquee()
{
    window.status = message.substring(position, message.length) + spacer + message.substring(0, position);
    position++;
    if (position > message.length) position = 0;
    window.setTimeout("Marquee()", 200);

}

Marquee();

Test this script. If you do not see text scrolling in the status bar of the web browser, the browser may have security settings.

If you are using Mozilla:

Select menu Tools > Options.
Click the globe icon where it says Content beneath it.
Make sure the check box for Enable Java Script is checked.
Click the Advanced button.
Make sure the check box for Change status bar text is checked.
Click OK on both windows.

If you made any changes, you may have to reload the page to see it work. Also note that if there is an error in the script, you can type javascript: in the address bar to load the JavaScript Console. This is a very useful tool for debugging scripts.

If you are using Internet Explorer:

You may get a bar to appear that reads To help protect your security, Internet Explorer has restricted this web page from running scripts... Click this bar.
Choose Allow blocked content from the pop-up menu.
Choose Yes in the security warning about blocked content.

The status bar should show the text now, and the text should be moving. Now to explain the code:

Line 1: Declare string variable spacer and set it to blank space. I used 8 spaces. It seems to work nicely.
Line 2: Declare string variable message and set it to the specified text.
Line 3: Declare variable position and set it to 0.
Line 4: Declare function Marquee().
Line 6: Set the status bar of the browser window to the substring of string message, starting at the position of the value of variable position and ending at the value of the variable's length. The length property is used for strings. It returns an integer value. It is simply the number of characters in a string. Since this property returns an integer value, we can use it in the substring method here to return the entire string. The line continues to add variable spacer to the status bar, then the substring of string message, starting at its first character (0) and ending at the current value of variable position.
Line 7: Increment variable position by 1.
Line 8: Test to see if variable position is greater than the length of string message. When it is, set variable position to 0. Doing this makes the beginning of the message jump to the left of the browser's status bar. It is also important to reset position to 0 because it does not stop incrementing by 1 due to Line 7.
Line 9: This line creates a timer. The number 200 is the amount of milliseconds. The line calls the function in 200/1000s (1/5) of a second intervals. So because variable position keeps incrementing by 1, the message in the status bar does not stop moving. Also note that this function is calling itself within itself.
Line 11 simply calls the function. We need to initiate a function call somewhere in order for it to execute its commands.

I hope you had fun making this marquee. Now that we know how to use a timer, why not make a clock?

In order to make an active working clock, we need to display the time in a non-static element. That is, a place on the web page that can be manipulated on-the-fly. The two simplest places to display an active clock are inside a form (such as a text box), and in the browser's status bar. We cannot simply manipulate a block of text on a web page because the text in the body is not editable. For the sake of simplicity, this example manipulates the browser's status bar.

Set up a new HTML document the same as the way we started. Use example at top of page.
Enter the following lines between the script tags:
var second = 0;
var minute = 0;
var hour = 0;
var mode = "AM";

function Clock()
{
    var today = new Date();

    hour = today.getHours();
    minute = today.getMinutes();
    second = today.getSeconds();

    window.status = hour + ":" + minute + ":" + second + " " + mode;
    window.setTimeout("Clock()", 1000);
}

Clock();

Lines 1 through 4: Declare the variables specified and initialize. These later hold the values of the return value of Java Script's Date() object.
Line 5: Declare function Clock().
Line 7: Set variable today to a reference of the Date() object.

The Date() object contains several functions and/or methods, such as second, minute, hour, day, date etc. When we create a variable and set it equal to an object, we call the variable a reference. Within Java Script's library is a class called Date(). Within this class are several methods (or functions if you prefer). When we enter the code for line 7, the variable today becomes a Date object. In Java Script, we need to use the keyword new in order to create a new object. Since the object Date is not a function, we cannot use the methods and functions in the Date object without first creating a reference to it.

Line 9: Uses object reference today (the variable we just created on line 7) to find the value of the current hour.

A note about the getHours() method. This method return a value range of 0 to 23 (24 different values for 24 hours). Therefore, the time is displayed in the status bar on Line 13 as military time. I will show you how to change this shortly.

Lines 10 and 11 do the same thing as line 9, but instead they get the minutes (getMinutes()) and the seconds (getSeconds()).

The way these methods work (the methods being getSeconds(), getMinutes(), and getHours()) is as mentioned in the Line 7 explanation, the Date() object contains several methods. These methods mentioned are part of the Date() object. Each of them returns a value. In this case, the current second, minute, or hour. We did not need to store the value these method return in a variable, but it makes the code much cleaner and easier to read. Also, when the code reads in a way that makes sense in English, it becomes easier to understand.

Line 13: Display in the status bar of the window the value of hour, minute, and second, then the value of mode (the variable we declared as AM earlier).
Line 14: This line creates a timer the same as we used in the marquee example. The interval we use in this example is 1000 milliseconds (1 second). This line calls the function Clock() in 1 second intervals.

Line 16 simply calls the function to activate its commands.

Test and run this script. Hopefully, you should see in the status bar the current time and it should be updating. Remember the time is in 24 hour mode at the moment, so why don't we change that. I had you enter the variable mode and had it set to AM already, but now we can get it to make some sense.

Position the cursor between the following lines where you see the message:
second = today.getSeconds();

**(CURSOR HERE FOR MORE CODE)**

window.status = hour + ":" + minute + ":" + second + " " + mode;

Enter the following lines in this space:
if (hour < 12)
{
    mode = "AM";

    if (hour == 0)
    {
        hour = 12;
        mode = "AM";
    }

} else {

    if (hour > 12)
    {
        hour = hour - 12;
        mode = "PM";

    } else {

        mode = "PM";
    }
}

if (minute < 10)
{
    minute = "0" + minute;
}

if (second < 10)
{
    second = "0" + second;
}

Line 1: Test when hour is less than 12
Line 3 then sets the mode to AM when the hour is less than 12 (the time between midnight and noon)

We then need to test if the hour is 0. In this case, set hour to 12 and the mode to AM. If the time is 12:00 AM, then the current hour is 0. We display time in the status bar using variables, not the time. However, the variables are set through getHour(), getMinute(), and getSecond(). Testing the values allows us to determine midnight as well as the mode (AM/PM). This is tested on lines 5 to 9.

Line 11: Execute code below when false (hour is greater than 12.
Line 13: Because we need to test if the hour is less than 12 on line 1, we also need to test when hour is 12. This line tests if hour is greater than 12.
Line 15: Subtract 12 from hour when line 13 is true.
Line 16: Set string variable mode to PM.

Line 18: As I was explaining on line 13, we need to test when the hour is 12. This else block executes when hour is NOT less than 12 AND when hour is NOT greater that 12. It only gets to that point when the hour is not less than 12 as tested on line 1.

Line 19: Set mode to PM when the hour is 12.

Lines 23 through 31 test the minute and second. When either the minute or the second is less than 10, place a zero in front of the value. Otherwise, the time 10:05:03 PM reads in the status bar 10:5:3 PM.

Test your page. Hopefully, all works well and you see an active clock in sync with your system's time displayed in the browser window's status bar.

Now you may move on to Page 8.

Return Home