Random Thought of the Day:

Don't like my choice of background color? Customize it right here...
There are actually three instances of simple JavaScript routines on this page and one instance of an intrinsic HTML object and one of its methods. I'll try to explain each one...

JavaScript One: Random Quotes

The first step in this simple piece of code creates an array named quotes which contains 10 elements (the number of elements could have been much more but, frankly, I got tired of typing). The syntax to create the array is var quotes= new Array(10) Next, I created a variable named random_int to hold the contents of a randomly generated integer to represent the index of the array using the code snippet var random_int=Math.floor(Math.random()*10);. Finally, each time the page is loaded (or refreshed) the line document.write(quotes[random_int]); calls a different quote based on the index value. Hit the refresh button a few times and notice how the quote changes.

JavaScript Two: The Date Object

This one is going to be difficult to explain quickly. I'll display the code and attempt to make it understandable.

var my_date= new Date(); - This creates a new instance of the Date object called my_date. Now this object can use all of the methods available to the date object.
var weekday= my_date.getDay(); - This creates a variable called weekday to hold the integer returned by the getDay method.
var themonth= my_date.getMonth(); - This creates a variable called themonth to hold the month returned by the getMonth method.
var thedate= my_date.getDate(); - This creates a variable called thedate to hold the day of the month returned by the getDate method.
var theyear= my_date.getYear(); - This creates a variable called theyear to hold the year returned by the getYear method.
// Set the Days of the Week - Just a comment I inserted :-)
var daysWeek= new Array(7) - The lines that follow create a seven element array to hold the names of weekdays since the getDay method returns an integer, not a name.
daysWeek[0]="Sunday";
daysWeek[1]="Monday";
daysWeek[2]="Tuesday";
daysWeek[3]="Wednesday";
daysWeek[4]="Thursday";
daysWeek[5]="Friday";
daysWeek[6]="Saturday";
// Set the Months - Just another comment.
themonth+=1; - Since JavaScript returns months as an integer from 0-11, we have to add 1 to this number in order for it to make any sense.

Finally, the lines of code document.write("Today is "); and document.write(daysWeek[weekday]+", "+themonth+"/"+thedate+"/"+theyear); write the date to the document in the browser. It's not as hard as it sounds at first - if it was, you wouldn't see it on any page of mine.

JavaScript Three: The Date Object revisited for the time

See the neat little clock on the left side of the status bar? It was brought to you courtesy of this JavaScript function...

function my_clock() - This creates a function called my_clock whose only purpose in life is to let you know what time it is.
{
var my_time= new Date(); - The date object in action again. This instance of the Date object is named my_time.
var thehours= my_time.getHours(); - This creates a variable called thehours to hold the hours returned by the getHours method.
var themins= my_time.getMinutes(); - This creates a variable called themins to hold the minutes returned by the getMinutes method.
var theseconds= my_time.getSeconds(); - This creates a variable called theseconds to hold the seconds returned by the getseconds method.
// Format the time - Another world class comment.
if (thehours>12) - Hours are returned in military time. This compensates by subtracting 12 if the hour is larger than 12.
thehours=thehours-12;
if (thehours<10) - This simply adds a 0 in front of the hour if it is less than 10.
thehours="0"+thehours;
if (themins<10) - This does the same thing if the minutes are less than 10.
themins="0"+themins;
if (theseconds<10) - Don't forget to format the seconds too!
theseconds="0"+theseconds;
// Write the time to the status bar - Look! Another comment!
window.status=thehours+":"+themins+":"+theseconds; - This line sets the status bar to the current time.
}
setInterval("my_clock()",1000); - Finally, we have to update the display every second using the setInterval method.

An Intrinsic HTML Object: The SELECT

If you are still with me, you must be as pathetic as I am to still find this interesting. Well, since you're here, I might as well explain it. Objects like buttons, check boxes, text boxes, and (drop down) select boxes can be used outside of JavaScript tags. The only catch is you have to define and name a form in order to use them. There is a heirarchy to the parts of a web page that goes like this...

WINDOW --> DOCUMENT --> FORM --> OBJECT --> OBJECT_METHOD

The window part defaults to the currect window, so it is not often typed out. I created a form called form_one and a SELECT object named color for this page. I'll show the line of HTML later because it would be confusing right now. Next, I set the valid options for the SELECT object as follows...

<OPTION selected value="beige">Beige</OPTION> - This set the first option to Beige and sets it as selected.
<OPTION value="lightblue">Light Blue</OPTION> - Second option is Light Blue.
<OPTION value="red">Red</OPTION> - Third option is Red.
<OPTION value="green">Green</OPTION> - Fourth option is Green.
<OPTION value="white">White</OPTION> - Fifth option is White.
<OPTION value="gray">Gray</OPTION> - Sixth option is Gray.
<OPTION value="yellow">Yellow</OPTION> - Seventh option is Yellow.
<OPTION value="aqua">Aqua</OPTION> - Eighth, and final option is Aqua.

Just before the HTML you just saw came this line. <SELECT name="color" onChange="document.bgColor=document.form_one.color.options[document.form_one.color.selectedIndex].value;">. Here I name my SELECT object and tell the browser what to do when the method onChange (which is activated any time you pick a new color) is called. I tell the browser that in the current document, on a form named form_one, on an object named color, there are some choices. Get the choice and change the background color of the page using the bgColor property. Since my wrist is starting to hurt, if you need more help, go buy a book!

Ricky's Home Page || Some simple JavaScript || Some pictures

Drop me an E-Mail!

Hosted by www.Geocities.ws

1