So, did you see the trick? Don't worry, if you didn't we'll get to it in no time. First, let's look at how the script gets started: Detection and Preloading You probably noticed our detection was quite a bit shorter using object detection. Rather than checking for NS3+ or IE4+ browsers, we were able to check for the document.images object: if (document.images) { .. } Once the that has been checked, we preload the images we need for the mouseover. Notice that we only preloaded the images for the second picture. This is the one we want to change, while the first one stays the same: if (document.images) { pic2on= new Image(100,25); pic2on.src="story2.gif"; pic2off= new Image(100,25); pic2off.src="story1.gif"; } Now we are ready for the functions. The Functions Actually, the functions remained unchanged, except that we used an object detection again in place of browser detection. function lightup(imgName) { if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src= imgOn; } } function turnoff(imgName) { if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src= imgOff; } } Everything else is the same, we just need to change one image on the mouseover. The trick to making it change a different image comes in the parameter we are going to send the function when we call it. So, on to the HTML code, where we will call the functions. The HTML: Calling the Functions Now, we get to the point where we call the functions with the onMouseover and onMouseout commands. We do this when the mouse is over the first image, which we will use as a link to "newpage.html". It could link to anything you want, or nothing at all- but you will need the link tag to call the onMouseover and onMouseout commands. Here is the HTML:

Now, notice that the first image is named "pic1", in the name="pic1" attribute of the image tag. The image we want to change is the one below it (the second image tag), which is named "pic2" using name="pic2" in the image tag. Now, look at the link tag that is used for the first image. When it uses the onMouseover command, look at the parameter to the function call: onMouseover="lightup('pic2')" Yes, it is telling the function to change 'pic2', which is the other image below it! So, the function performs the work on the second image, and leaves the first image as merely a link, a link that changes the second image while the mouse is over it. The onMouseout command does the same thing, just in reverse. It changes the second image back to normal. What about a Plain Link? To use a regular link to change the image, just remove the first image tag in the HTML, and replace it with text, like this: New Page

Now, you get something that looks like this: New Page This script could be used to display a graphic with text while the mouse is on another image- the graphic could describe where the link will go when it is followed. You could also make some other nifty effects, try it out and see what you can come up with! Well, how do you go about changing more than one image at a time? Maybe you want the image the mouse is over to change and have another change at the same time. Here is an example below. Move your mouse over the top image, and both images change! This comes from the same script we have been using in the previous rollover tutorials. You will need to be familiar with JS Hover Buttons and JS Hover Buttons 2 before you proceed. Now, this script will also use Object Detection like we did in the previous section. This time, we want to change both images when the mouse is over the top one. Again, I'll start by giving you the complete script for this trick. See if you can catch the changes that make the script change more than one image at a time:

Noise    Yellow    Big Face    Seeing Spots

Just change the urls and text to your own choices. Then, you'll see that all the onMouseout calls are the same. You will want your onMouseout calls to be the same too (not necessarily exactly like this one, but they should all match each other). The onMouseout command calls the default image object you defined while preloading. Ours was named "image_off". The calls made onMouseover only change the second parameter. It is changed to one of the replacement image objects you defined while preloading. Just choose the one that fits with your link. Finally, be sure the name="name" attribute in the IMG tag matches the first parameter you send to the function in each case. Ours was pic1, but you may choose another name-- just be sure to change the function calls to match it. You'll notice that the pic1 parameter didn't change in any of the function calls, so you may wonder why we should bother with the parameter and just use pic1 in the function itself. The reason is so you could use this function for more than one image/link set on the page. Just be sure to give the other image(s) a new name in the IMG tag in the name="name" attribute. For instance, the second one could have name="pic2". You could then call the function by replacing all the pic1 parameters with pic2, and now the first parameter has a use. Then again, the use of it just depends on how many times you want to use the effect on a single page. Do you remember the browser detection script we worked on a while back? Then you probably remember how much trouble it was to detect a specific browser type before we could run certain scripts. Here was how we had to do it: browserName=navigator.appName; browserVer=parseInt(navigator.appVersion); if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4)) version="n3"; else version="n2"; That is a lot of code to run through, and it can be much worse when you create a script that has a lot of browser differences. Well, instead of checking for the browser, we could have checked for the javascript object that we needed for the script to work. Since we know that a hover button script needs the document.images object to work, we could shorten the above code to say: if (document.images) { ...code...} In fact, this object just so happens to exist in the browsers we checked for, and not in the browsers that were excluded. So, using this object detection code, we are checking for Netscape 3 or higher, and MS Internet Explorer 4 or higher! And as a bonus, if any other browser happens to recognize the document.images object, the script will run for them too! (Opera perhaps?) You can also use a couple of the new objects to check for version 4 browsers. If you are looking only for NS4 or better, check for the document.layers object: if (document.layers) { ...code...} If you want only IE4 or better, check for the document.all object. (May change when NS5 arrives): if (document.all) { ...code...} Of course, if you just want it to work for either version 4 browser, check to see if the browser has one object or the other: if (document.all || document.layers) { ...code...} You can find some more uses for this as you are coding, so that you can avoid those pesky javascript errors in older browsers. While you are at it, it will probably keep away those errors with the newer browsers as well. JavaScript and Frames. Frames and JavaScript. Sounds like a mess doesn't it? Well, it does make things a bit more complicated. Let's see if we can figure out how to get those frames to work with our scripts. The first thing you will want to know is "How in the land of JavaScript do I access javascript variables and other things in one frame from another frame? The answer is to use a trick like this: parent.framename.attributes_to_change Replacing framename with the name you gave the frame in your frameset, ie: In this case, you would access something in that frame with: parent.right_frame.attributes_to_change Let's start by changing the value of a text box in a frame on the right from a frame on the left side. First, set up a little frameset. This will require 3 separate html pages. Your frameset, and the html for your 2 frames. Let's begin with the frameset:

Page1, we want the browser to go to "jex6.htm" when the user chooses the option "Page 1". You can change this to any url you wish. The tricky part here is accessing the Select Box in order for a viewer to navigate the site. You see that we can get to the select box itself easily using the name attributes: document.guideform.guidelinks But this doen't give us access to the options inside the select box. It only gives us access to the box itself. To access the options, we must add on the options property: document.guideform.guidelinks.options Now that we can get to the options, we can access each option individually using some special notation. (The options create a numbered array, if you are familiar with arrays). You don't have to know about arrays to get the idea. Just remember that the first option listed is option 0, written as options[0] . You see the square brackets? That is what tells us an array is being used. The second option in the list will be options[1]. Just remember that arrays will start with 0 instead of 1, so you will have to use options[0] to access the first option directly. Well, now we can get to the value attribute of the first option like this: document.guideform.guidelinks.options[0].value The value would be "jex6.htm". This is nice, but if you want to be able to use the selected option each time so the viewer can go to the url of their chosen option, the script will need to know which option the user has selected. Since we can't just guess they will choose options[0] or options[1], we will have to find a way to access the correct one each time the user makes a new selection. This is done by using a new property, selectedIndex. The selectedIndex property tells the script the number of the option the user selected, so that it will not always be the same. So the script will not always be stuck on options[0] or options[1], it will get the one that is selected each time. This gives us a new problem....when we access the value of an option, we were just allowing it to be one option or another....we didn't allow it to change if another option was selected: document.guideform.guidelinks.options[0].value This would give us "jex6.htm" every time.....and we want the value to be changed when the user selects another option. So...we have to alter the value inside the array part of this already long string of words. The selectedIndex property will give us a number....the number of the option the user has selected. So, we will have to put the selectedIndex property inside the array brackets so that we end up with a number inside the brackets.....But this number changes each time a new option is selected. To access the value of the selectedIndex property, we again have to go through the name of the form and the name of the select box: document.guideform.guidelinks.selectedIndex Now, to put it all together, we put the value of the selectedIndex inside the brackets of the full value of the option: document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value What will happen is that you will get one of the following, depeneding on which option was selected: document.guideform.guidelinks.options[0].value OR document.guideform.guidelinks.options[1].value Of course, you can add as many options as you wish, they will just be options[2], options[3], and so on. The beauty of the selectedIndex property is that you won't have to deal with the numbers, you will just be able to add options and let the javascript take care of the rest. You will also notice way back in the script above that we called the javascript commands with the onClick=" " command in the button tag. The button triggers the change of urls by changing the value of the window.location: That is where everything is put together to make the drop down box work. The browser goes to the url that is the value of the option the viewer selected. A little messy, but that is the way javascript is sometimes. Now that you have seen the javascript drop box with the button, you may want to know how to make a drop box change pages without requiring the viewer to click a button. Instead, you want it to change pages as soon as a choice is selected. Well, the code for this is actually shorter than the drop box with the button. All that is new here is that you will need to learn the onChange attribute. The onChange attribute is another way of calling javascript when something happens. It is coded in much the same way as onClick or onMouseover. The difference is that this attribute is used in form elements, select boxes. The onChange attribute will perform javascript statements when something inside your form element is changed. In this case we will be changing a select box. Here is a quick example of the onChange attribute. You can send someone a message when they choose something:

--Choose a Sport-- Football Basketball

You can try it out below. It isn't very useful, but it works.... --Choose a Sport--FootballBasketball Now, we can get to the useful application. You can use the onChange attribute to do the same thing that we did with the onClick in the button in the last section. In other words, the onChange attribute will now load the new url when someone makes a selection. A new sample drop box is below. Give it a try: --Choose--Page 1My Cool Page In the last section, we learned how to access the value of the select box and change the page the person is vieweing. If you haven't seen this yet, go back to the first drop box tutorial. Other than removing the button and moving the window.location code to the onChange attribute in the Select tag, this is the same script:

--Choose-- Page 1 My Cool Page

Notice that the default option selected just tells you to choose something. It won't lead anywhere unless someone tries to change back to it. I used the url of the page it was on for the value of it, so the browser will stay on the same page if it gets selected later. This isn't likely to happen though. I couldn't go back and change back to the default option from another option when I tried. The browsers just went back and loaded the page with the default selection already selected again. Well, there is your drop box with no button. Go change the urls and have some fun with it! Before moving through this, you may want to read through one or more of the tutorials leading up to this one. You should be familiar with JavaScript Drop Boxes, and you may want to read about JavaScript and Frames. Making a javascript drop down box work with frames isn't as bad as it seems. The question is, where do you put in the target information? Well, you can't do this directly, because the script just won't understand something like this: window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value target="right" If you have read the frames with javascript sections, you may have an idea about how to get your target into this code. What we need to do is make an adjustment on the left of the "=" sign. When you change the window.location value, the new page opens in the current window, whether it is in a frame or not. But with frames, you want the page chosen from a drop box to open in another frame, not in your navigation frame. The trick is to change window.location to this: parent.framename.location What you do is change the word framename above with the name of your target frame, or what you would normally write inside the target=" " attribute. So, suppose you had a frameset like the one below, using the left frame for navigation and the right frame for content: Sorry, you can't see this page..

Hosted by www.Geocities.ws

Now, since we want the drop box in the left frame, that is the page we need to modify. Above, the left frame is "jex18.htm", and we want to open our drop box links in the right frame, "jex19.htm". Notice how the FRAME tag uses the name=" " attribute. We will need this when we write the code for the drop box. Now, edit your left frame HTML by adding the dropbox. The thing we need to concentrate on is getting the target frame correct. With our frameset, the right frame is named "right_frame". This is what we use to change our command line when the go button is clicked: parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value Now, everything your viewers choose from the drop box will open in the right frame. The complete drop box code is below:

Page 1 Cool Page  

If you want to see this in action, check out the example below by clicking the View Example link: View Example What if I'm using the no-button Drop Box? You do the same thing with the code, changing only the information to the left of the "=" sign. The code for one of these is below:

Page 1 Cool Page

So, now you have the drop box working with your frames, rather than against them- or maybe that should be the other way around? If your browser is a version 4 or better, click on the image below. It works in the same way as a form button, but we can use the mouseover effect and customize the color. Give it a try: Now how in the world is that done? Well, version 4 browsers allow us to use a few more mouse events. This button uses the onMouseover and onMouseout, and two new ones: onMouseDown and onMouseUp. These work in much the same way, they are just call when a viewer clicks or lets go of the mouse button: onMouseDown The viewer clicked the mouse button. onMouseUp The viewer let go of the mouse button. How is this different than onClick? With these events, we are able to separate the click into its two parts: The button going down, and the button going back up. In this way, we are able to change the image to act like a form button. When you press the mouse button down, you get the "down button" image. When you let go, you get the "up button" image. Let's look at the HTML first this time (the reverse of my normal routine!). You will see that we can call a function on each event: Also, you'll notice that I made the image do nothing when clicked. I used a javascript link, but a special one. I linked to the void() function, which does nothing when you send it zero! So you could simply link to nothing like this: Click Here! The link would do nothing, but sometimes it comes in handy. Now, back to the script. To get this image to do all of these things, we have to have the functions. So, here is the script for your HEAD tags: -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- You'll notice this is the same script I used for the hover buttons, but with a couple of modifications. I updated the code to use object detection, and I added a new function called clickdown() to be used on the onMouseDown event. The object detection simply checks to see if the browser can support the script. Here, we can check for the document.images object. This is an object that allows for javascript to access the images in a document. If it exists, the browser moves on with the script. If not, it ignores what follows the check. Also, when you use the script be sure you have the third image. The "down button" image will be needed for our clickdown() function. So, this script uses three images: upbutlav.gif This is the image used when nothing is going on. upbutblue.gif This is the image used when the viewer moves the mouse over the image, and when the mouse button is let go (onMouseUp). dbutblue.gif This is the image used when the viewer presses the mouse button (onMOuseDown). The new function does the same thing the old ones did, it changes the image. If we look at the HTML code again, you will see that we call our new clickdown() function with the onMOuseDown event. This makes the image change when the viewer presses the mouse button, so we get the "down button". As for the onMouseUp, we reuse the lightup() function, since this holds the image for the "up button". Now, in your HTML, you can use a live link instead of the void(0) link: Now, you would get a live button, like this one: Have you been looking for a way to use one page of javascript code on multiple pages, without needing to paste the code into page after page? Well, this is where an external javascript can help! You can call functions from an external javascript on any page that you put the special tags on. So, what do these special tags look like? They look like a plain script tag, but they use an extra attribute: The SRC="http://someplace.com/script_name.js" attribute. Here is an example of one of these tags: The SRC attribute names a source for the javascript to be used. The script must be saved with the extension .js as a plain text file. So, let's give it a try. Open a new document in your text editor, and write the following code into it: function a_message() { alert('I came from an external script! Ha, Ha, Ha!!!!'); } Now, save the file as "jxt1.js". You can now use this script on any page you place the special script tags on. Place the script tags inside your tags. Be sure the SRC attribute points to your .js file. If you are working in one directory, just use the tag this way: If not, try an absolute url. Be sure to change this to your domain and the correct directory: Now, you can call your message function from the page that you placed the tags on. I will use a link as an example: Click for a message.. I used the same script for this example, clicking on the link will bring up our message from the external script. (If you are not familiar with this kind of link tag, see the JS link tutorial for details. Click for a message.. This script is not very useful, it will just give you one alert message to use on every page (Yuck!). However, it shows you how to call a function from an external script (just like a normal function). I'm sure you can think of some better scripts to use with this. (Actually, I can too, but I'm too lazy to type out a long script here...). This is a handy way to use one script on multiple pages. By adding the script tags to each page you need the script on, you can reuse a script over and over without typing the entire script on every page. Now, get out there and find some more useful scripts to use for your own external javascripts! Now, you would like to have a clock for your web page- but how do you go about coding such a clock with JavaScript? Using the date object and some of its methods, you can create your own javascript clock customized to your needs. Our script here will create a fairly simple clock, but we will also discuss some of the other methods of the date object you may wish to use to create and customize your own clock. To begin, we must discuss the javascript date object. This works a bit differently than the pre-defined functions we have used in past scripts. To use the method functions of the date object, we must create what is called an instance of the date object. Think of an instance of the date object as a variable or placeholder that allows us access to the member functions of the date object. Why think of it as a variable? Well, to create an instance of the date object, you define it as a new variable- but with a lttle twist: var thetime=new Date(); As you can see, we are not assigning the new variable a direct value. Instead, the code above defines the variable as a new instance of the date object. This means we can use this variable in order to access the method functions of the date object. What are the method functions? Well, here a list of some of them: Method Function What the Function Does getHours() Returns the current number of hours into the day: (0-23) getMinutes() Returns the current number of minutes into the hour: (0-59) getSeconds() Returns the current number of seconds into the minute: (0-59) getDay() Returns the number of days into the week: (0-6) getMonth() Returns the number of months into the year: (0-11) getYear() Returns the number of years into the century: (0-99) These are not all of the method functions, but they are enough to create a decent clock. Our example clock for this tutorial will only use the first three, but the rest my be useful to you to customize your clock. Now, suppose we want to get the number of hours into the day. We could do this by defining a variable and giving it the value of the getHours() method function. However, the following line will give you an error: var nhours=getHours(); Why? Well, remember that the getHours() function is a method function of the date object. In order to get that value for our variable, we have to use our instance of the date object we created earlier: var thetime=new Date(); var nhours=thetime.getHours(); This is part of object-oriented programming. Once we have created an object, we are able to access its member functions with what is called "the dot operator". By placing the dot between our object name (thetime) and its member function, we are able to execute the member function. In this case, the function simply returns a value (the number of hours into the day). We are using this value as the value of our new variable, nhours. We have used the dot operator in the past, when we used the document.write() function. The write() function is a member function of the document object, and the function writes text to the screen. An advantage of using objects is that objects can hold multiple values, where variables can only keep one value at a time. An object can also use any member functions it may have, like we did above. So, our date object named thetime can use all of the member functions. Now we can start getting the rest of the values for our clock. Let's get the hours, minutes, and seconds: var thetime=new Date(); var nhours=thetime.getHours(); var nmins=thetime.getMinutes(); var nsecn=thetime.getSeconds(); See how we were able to use our object named thetime to grab three different values? It's almost fun, then again...yes, a bit more complicated than having a pre-defined object to use. With these values and a bit of extra coding, we can create a clock like the one below: Current Time: Not bad, but now we must get into the extra coding we need to get the clock running smoothly. Remember, thetime.getHours() returns the number of hours into the day. This value is a number between 0 and 23. What can we do if we do not want a 24 hour clock, if we don't want 11:24 P.M. to be 23:24? To get around that, we need some code that will change any number over 12 back to 1,2,3,4, and so on. We can do this by subtracting 12 from our variable nhours when it has a value greater than 12: if (nhours>=13) nhours-=12; nhours-=12; is shorthand for: nhours=nhours-12; Also, if the hour is 0, we know that is 12 A.M., so we need to make the zero into a 12. if (nhours==0) nhours=12; Now, when the number of hours is 14, the script changes it to 14-12=2. Just what we needed. We don't have the same problem for the minutes and seconds, but they present a problem of their own. Suppose the number of minutes into the hour is 32. This value is fine, the script will display a 32. However, what if the value is 2? The script would display something like this: 11:2 What? Yes, we need a way to get a zero in there so the clock is readable. We want it to say 11:02. So now we need something to add in a zero before the 2 if the number of minutes (nmins) is less than 10. Let's try this: if (nmins<10) nmins="0"+nmins; This code will add in the character 0 in front of the 2 if the number of minutes is less than ten. Another little problem out of the way, but we will also need to do this for the seconds: if (nsecn<10) nsecn="0"+nsecn; if (nmins<10) nmins="0"+nmins; Had enough? Me too, but this clock still has another value we need to get. The clock displays A.M. or P.M. for morning and evening hours. This isn't to terrible. We can define another variable, let's call it AorP. We need the value to be "P.M." if the hour is greater than 12, and "A.M." otherwise. Here we go: if (nhours>=12) AorP="P.M."; else AorP="A.M."; One problem though. You need to place this section of code before our code that changes the clock to a twelve hour system. Otherwise, the hours will never get past 12, and it will always read A.M. Why? This is because when we change the clock to the twelve hour system, we change the value of nhours so that it is 0-12 in all cases. So, we must get our AorP value before we change the time system. Now, I'll give you the code for the script:

Current Time:

You may have noticed we are accessing a form value and changing it in this line: document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn+" "+AorP; So, you now know we need a form in the body of the document. Here is the one that goes with the script:

Current Time:

Also, you can see that we use the setTimeout() function to run our startclock() function again after one second. In this way, the clock will refresh every second so that you get a constantly running clock with the seconds ticking away. Of course, how do we get the thing started to begin with? The browser won't just run the startclock() function on its own. It needs some kind of event to happen. Well, how about when the page loads? Excellent choice, let's use the onLoad event. The onLoad command is used as an attribute in the body tag, much like defining a text color: I'm not sure I could handle that text color for long, but now we can see how the onLoad command will be put to work: Nice, isn't it? The command works like the other event handlers, we are able to use it to call our javascript function. This is what gets the clock ticking. Now, you can go make use of this clock if you need one. Otherwise, you have gotten a rather unorthodox introduction to objects and object-oriented programming. Well, maybe I'll add a more orthodox tutorial on the subject sometime, if I can stop saying the word orthodox. You know, I think the last half of this paragraph has been extremely unorthodox. Oops, I think I had better get going now.. Now, maybe you want your clock to include the day of the week and the date as well. This clock will iclude these features. Also, we will start the clock by calling the function inside the body section, so that the entire page does not have to load before the clock starts. Let's take a look at what the new clock will look like: Current Time: Yes, more information. This requires a few more things in the script to make it work the way we want it to. Be sure you have read the first clock tutorial before you proceed. It will cover some things you will want to know before going through this section. Now, let's take a look at the script. You will notice we called more member functions of the date object to get the extra information. See what other differences you can find before we get to the details. Here is the script:

Current Time:

Yipes! This is pretty long, isn't it? Actually, it is most of the script is getting the numbers to do what we require for our clock to look like the one above. Let's take a closer look at what we have added. More Member Function Calls We are calling more of the member functions in order to get the extra information. The ones we have added are calls to getDay() for the number of days into the week, getMonth() for the number of months into the year, getDate() for the actual day of the month, and getYear() for the number of years into the century. We assigned them all to variables so we could manipulate the numbers to display what we want. Here are the variable declarations: var nday=thetime.getDay(); var nmonth=thetime.getMonth(); var ntoday=thetime.getDate(); var nyear=thetime.getYear(); Now we have variables with our new information, but some of them are not quite in the form we want them to be. The only one we do not have to change is "ntoday", which gives us the day of the month- a number such as 1, 2 ,15, 30, etc. So, we know whether it is the first, second, 15th, or 30th of the month. The other variables have values that need changing though. Adjusting the Variable Values Let's look at the variable "nday". This holds our value for the day of the week. However, the value is a number. Not only that, the numbers are 0-6 rather than 1-7. Changing this to the actual day of the week isn't so bad, we just have to check what the number is, and change the value to "Sunday" if the number is zero, "Monday" if the number is 1, and so on. Here is the portion of the code that does this, using if conditions: if (nday==0) nday="Sunday"; if (nday==1) nday="Monday"; if (nday==2) nday="Tuesday"; if (nday==3) nday="Wednesday"; if (nday==4) nday="Thursday"; if (nday==5) nday="Friday"; if (nday==6) nday="Saturday"; Now, let's look at nmonth. It is the number of months into the current year. However, instead of starting at 1 and going to 12- it starts at zero and goes to 11. To make it display the traditional number for the month (1 for Jan., 2 for Feb., etc.), we will need to add one to this value: nmonth+=1; Remember, the += operator adds one to the value of nmonth. We could have written it as: nmonth= nmonth+1; Now, we have to get the year. Our variable nyear gives us the number of years into the current century- the last two numbers of the year such as 98 or 99. One problem- the dreaded Y2K problem. In IE5+, the date actually goes to 4 numbers, to 2000. In NS 4.6 the date flips to 100- not zero! I found the code below works for these two browsers, though I did not check it with older versions- but those may have other Y2K bugs to worry about. So, if the year comes back as 99, I added a 19 in front. If it is between 99 and 2000, I added 1900 to it (100+1900=2000) so NS would work with it. IE just gives back 2000 so if it is more than 2000 it can be left alone. if (nyear<=99) nyear= "19"+nyear; if ((nyear>99) && (nyear<2000)) nyear+=1900; End the Script All that is left in the main script is to output our values to the text box. This clock used the code below: document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear; Now, end the function by calling it again after one second: setTimeout('startclock()',1000); The HTML, Call the Script The HTML to display the clock is the same as before. The only additions are the SCRIPT tags and the call to the startclock() function. This is so the clock starts right when the browser knows the text box exists and has the names in the name=" " attributes:

Current Time:

Now you do not need to wait for the rest of the page to load in order to see the clock run. Great, isn't it? Well, that takes care of the clock for now. Go have fun with it, maybe make some adjustments of your own. Oh, if you see any problems with the Y2K code, or have something that will solve the problem for longer than my code did, or know some code for older browsers, let me know. The Math object of JavaScript allows you to perform certain calculations by using method functions of the Math object. Also, it provides a few constants such as pi. The easiest way to get a value is to define a variable and set its value to a property or function of the Math Object. If you want to use a property, which returns a constant value (such as pi), you would write something like this: var my_car=Math.property; You would replace the word "property" with the property you want to use. So, if you want to use the value of pi in a variable, you would use the PI property of the Math object. You would write: var my_pie=Math.PI; This returns the pi constant, a number with lots of decimals, or 3.14..... If you want to use a member function, which performs a calculation, you would write something like this: var my_house=Math.function(x); Most of the member functions have one or more parameters, which is what the "x" is for. You can replace x with a number or variable. You would replace the word "function" with the function you want to use. For instance, if you want the square root of a number, you can call the square root member function of the Math object with the number as the parameter: var my_money=Math.sqrt(2); This gives back the square root of 2, which is another number with lots of decimals, around 1.41..... Now that you have seen how little money I have, be sure to take notice that the "M" in Math is always capitalized. The word Math is followed by the dot operator (.), and then the property or member function you want to use. These are not too difficult to use now that you know how to get to them. Here are some of the properties you can use, these return the constant values: Math.PI Returns the constant pi Math.SQRT2 Returns the square root of 2 Math.SQRT1_2 Returns the square root of 1/2 Below is a table of some of the commonly used member functions of the Math object. These functions calculate values based on the parameters you send to them (except the random function): Method Function What it Does abs(x) Returns the absolute value of the variable x. cos(x) Returns the cosine of the variable x. log(x) Returns the natural log of the variable x. max(x,z) Returns the larger of the two variables x and z. min(x,z) Returns the smaller of the two variables x and z. pow(x,z) Returns the value of the variable x to the zth power. random() Returns a random number between 0 and 1. round(x) Returns the variable x rounded to the nearest integer. sin(x) Returns the sine of the variable x. sqrt(x) Returns the square root of the variable x. tan(x) Returns the tangent of the variable x. Hopefully, you will find some of these useful in your scripts. We may start using some of these in future tutorials, so be on the lookout! The random() method function of the Math object allows you to get random numbers for various uses in your scripts. You can make a random quote generator or have another type of random script. The only trick is knowing how to get a random number within the boundary you want, and making it a random integer. By default, the random function returns a random number between zero and 1. This by itself isn't very useful. Click the button below, and notice that the number in the alert is a long random number after the decimal point: In that state, you can't really do anything with the number. We want to have an integer between zero and a set number. The first step to fixing this is using multiplication. If you want a number between zero and 4 (5 random numbers), multiply the result of the Math.random() function by 4: var ran_number= Math.random()*4; Now, the numbers you get will be between zero and 4- but they still will not be integers. Try the button below and see: We need these to be integers so we can have just the five random numbers between zero and 4. The next step will finish the job of getting the random number. To clean up those decimals and get just the integers, we use the Math.round() function for the result. The quickest way to implement this is to place the Math.random()*4 inside the Math.round() function as its parameter: var ran_number=Math.round(Math.random()*4); You can also use two steps if it seems to make more sense: var ran_unrounded=Math.random()*4; var ran_number=Math.round(ran_unrounded); Now, try this button. You'll see a nice looking integer between zero and 4: Now, you may be wondering why we want the number between 0 and 4, rather than 1 and 5. When we are ready to make a script that uses this, an array is a handy way of getting to a value. Arrays start counting with an index number of 0, such as: array_name[0]; Keeping the random numbers in line with the array numbers will save some headaches as to when you should add or subtract the number one to get it working. Now, let's build a little random quote script that will give the viewer an alert with a random quote on a button click. We already know how to get the random number, we just need to use an array to store some quotes- and make use of them with the random numbers. We'll use 5 random quotes, so we need 5 random numbers. This will keep us with our "between zero and 4" theme. Let's begin by creating a function, and setting up a variable to get a random number: function get_random() { var ranNum= Math.round(Math.random()*4); return ranNum; } This function will simply return a random number between zero and 4. Our next function will call this function and assign the returned number to a variable named whichQuote: this will be the variable we use to get the proper quote from the array we will define. So, let's also define an array here, and set it up with five quotes: function getaQuote() { var whichQuote=get_random(); var quote=new Array(5) quote[0]="I love JavaScript..sometimes."; quote[1]="Why are you pushing my button?"; quote[2]="The button you pushed can\'t push you back. You bully, you!"; quote[3]="This alert is here to inform you that alerts are annoying."; quote[4]="Which came first, the button or the alert?"; alert(quote[whichQuote]); } As you can see, the last line of the function gives the user the alert. The value of the alert is the quote stored in the quote array: quote[whichQuote] Remember, the whichQuote variable was assigned a random number between zero and 4 from the get_random() function. So, if the value of whichQuote is 3, you get an alert with the quote from the array at quote[3]. Each time the button is clicked, it is all run again and will assign it another random number. As for the button, here is how to code it into the body section:

Notice that it calls the getaQuote() function when it is clicked. This gets everything started. To put it all together, here is the entire script. We can now see how it all works within the document:

Now, if you want to try out the script go ahead and click the button below: You can also use more quotes by making the array larger and adjusting the number you multiply with the Math.random() function. You can turn the random quote script into a script with many more quotes. Just remember that if you want 10 random numbers, multiply by 9. If you want 20: multiply by 19. This will keep your arrays happy, and it will probably keep you happy as well! To get started with advanced string handling in JavaScript, we will begin by looking at two of the JavaScript methods for strings. These two methods, charAt and indexOf, are used to find out what character is at a certain position in a string and to find out where a character or a smaller string begins within a string, respectively. Before we get to those, we will also want to look at the length method. This gives us the length of a string, which may be helpful when we use the other methods. So, let's go in and take a look at these methods, starting with length. length The length method returns the length of a particular string as a number. For instance, if a string is 5 characters long, the length method would return the number 5. To use the method, you will want your string to be placed in a variable. For this example, we will simply assign a string to a variable: var my_car="Ferrari"; Now, to use the length method, we use the dot operator (.) as the connection. First, we use the variable name. Then, we follow the dot operator with the word "length", which will return the length of the string: my_car.length Of course, if we want to use the value it returns, we can assign it to a variable: var how_long=my_car.length; In this case, the variable how_long will have a value of 7, since the word "Ferrari" has seven characters. The length method is even more useful if you are using a value entered by a viewer at a prompt or another input area and do not know what the string is. Using this, you can find the length and use it for other purposes, such as showing an error message for strings that are longer than what you want them to be- for example: Give it a try with the link below. If you enter a name longer than 10 characters you get an error alert. Otherwise, you get a greeting alert! Example: Give me your name! charAt Using the charAt method, you can find out what character is filling a designated position within a string. Basically, it allows you to find out what character is first, second, third, and so on. The important thing to remember is that when dealing with the position of a character, the count starts at zero, not one. So the first character is actually at position zero. As with the length method, we assign the string to a variable, and then use the dot operator to call the charAt method. The charAt method takes an argument, which is the position number for the character it should return. So, if we want to find the first character in our "Ferrari" string, we would do it this way: var my_car="Ferrari"; var the_char=my_car.charAt(0); alert('The 1st character is '+the_char+'.'); This would give us an alert telling us that "The first character is F." We can do the same by sending the number 1 as the argument to get the second character, or sending the number 2 to get the third character, and so on. As for the last character, we can use the length method from above to find out what character is in the last position in the string. Remember, though, that the length function returns the number of characters. The positions start with 0, but length starts counting at 1. So, to get the position of the last character we must use length-1. "Ferrari" has a length of 7, but the last position (count up from 0) is actually 6. That is why length-1 will get you the number for the last position! Here is a little sample: var my_car="Ferrari"; var the_length=my_car.length; var last_char=my_car.charAt(the_length-1); alert('The last character is '+the_char+'.'); This time, you will get an alert telling you that "The last character is i." This is fun, isn't it? indexOf Now we get to the really fun method of indexOf. This method lets you check for a character or even a small string within the current string, and returns the position at which your character or string begins. Again, remember that the position starts counting at 0, so if indexOf returns zero, it means your character or string begins at the 1st character. Also, indexOf has a useful return value of -1 if the character or string you searched for is not contained within the string. And finally, if the character or string you search for occurs more than once, indexOf returns only the first appearance of your character or string. First, let's find the 'a'. No problem, again we use the dot operator. IndexOf also takes an argument like charAt does, but this time the argument is the character or string we are looking for: var my_car="Ferrari"; var where_is_a=my_car.indexOf('a'); alert('The a is at position '+where_is_a+'.'); Notice the quote marks around the argument of a. This tells the browser to look for that string, which is the type of argument you must send for indexOf to function properly. This code will send back the position of the letter a. The alert will say "The a is at position 4." Look out letter a, you have been found! Let's now look for the letter 'r' in "Ferrari". As you can see, 'r' is in the string three times. However, only the first appearance will be returned, at position 2. var my_car="Ferrari"; var where_is_r=my_car.indexOf('r'); alert('The r is at position '+where_is_r+'.'); Now the alert says "The r is at position 2." The other r's at positions 3 and 5 are not the first, so they are not returned. What about if we search for something that is not there? Well, indexOf will return a -1. We can use this -1 to tell us that what we are looking for is not there. This can be helpful when you ask a viewer for information, but the viewer does not type the information with a required character or set of characters. For instance: function get_url() { var your_url=prompt('Enter your web page URL!',''); var is_protocol_ok=your_url.indexOf('http://'); if (is_protocol_ok==-1) { alert('Error: Your url should begin with http://'); get_url(); } else alert('Thanks!'); } This one checks to be sure the viewer entered the http:// part of the address. If not, it shows the error alert and gives the viewer a chance to enter the url again. Of course, you can cut down on the number of forgotten http:// beginnings by using http:// as the default value for the prompt instead of nothing: var your_url=prompt('Enter your web page URL!','http://'); Of course, the viewer could delete it by accident (or even on purpose), so the check would still be worthwhile. You could even go a step further and be sure that there is at least one dot (.) in the address as well. This way, the viewer would need to have a string plus a dot and hopefully a com or net afterward ( like http://pageresource.com ). We can also check for the http:// as well, here is a sample: function get_url() { var your_url=prompt('Enter your web page URL!','http://'); var is_protocol_ok=your_url.indexOf('http://'); var is_dot_ok=your_url.indexOf('.'); if ((is_protocol_ok==-1) || (is_dot_ok==-1)) { alert('Error: Your url should begin with http:// and have at least one dot (.)!'); get_url(); } else alert('Thanks!'); } You can try out the script below, type some url and see what it does! Example Of course, it is still not going to totally eliminate mistakes or bad urls, (someone could just enter http://.) but it helps a little bit. As you can see, these methods can be quite useful when dealing with strings. Hopefully you will find a great way to use them for your site! The split method is a handy way to "split" a string into two or more parts based on a character that divides the parts. The character that divides the parts could be many things-- a comma, a slash, a pipe symbol ( | ), or another of your choice. For example, look at the string below: var where_is_mytool="home/mytool/mytool.cgi"; Notice that the slashes coud be used as a way to divide the string into three parts. You could separate the home directory, the file directory, and the file name for the program. To actually do this, we can use the split method. As we did with the charAt and indexOf methods, we take the variable name of the string and add a dot-- and then call the split method: var where_is_mytool="home/mytool/mytool.cgi"; var mytool_array=where_is_mytool.split("/"); As you can see the split method takes a parameter, which is the character we wish to use to divide the original string. In this case, it is the "/" character. You will also notice that what we get back will be an array (notice the variable we hold the result in is called mytool_array). This array holds the three parts, with the first part held in a variable called mytool_array[0]. So, the first element is zero for the arrays you create with split, just like many others we have seen. Knowing this, we can now use the parts which we get from the split in some way:

This one will just give us an alert with the three parts when we click a button. You can see it in action using the button below: Another thing to remember is that there are times when you will not know how many parts the array will have once it is split (for example, if a viewer enters the information in a prompt). To be sure you get them all, you can use a loop and the length method to get all of them. For example:

Notice that the length method returns the number of elements in the array, which is one greater than the index number for the last element in the array. This is why we use < instead of <=, because part_num will not have an element with the index number equal to the array length, it will only have them up to one less than the array length. So, if you entered 3 colors, the array length is 3, but the index numbers within the array start at zero and are 0, 1, and 2. The example is below, give it a try: This validates to some degree, but it doesn't keep a viewer from using a space once and then doing something else. It could still not be quite right if someone types in "red greenorange,blue". This would give back one alert with "red" and another with "greenorange,blue". Still, it will do the job for the most part, and uses some of the things we learned in earlier sections. Well, that is how to use the split method, I'm sure you can create a more useful script with it. You could use it to grab parts of urls, email addresses, and so on. This will also come in handy in other areas, such as in the use of cookies and form validation.

Hosted by www.Geocities.ws