Easy JavaScript Tutorial Volume 2


	The JavaScripts on this page are a bit more complex than those on the first page. We highly recommend you test each script on a test page before deploying on a production page.
Simply cut-and-paste the blue code listings and paste them into your preferred editor and make the suggested changes (usually the green parts) as we discuss certain JavaScript features.

Easy JavaScript Volume 2 Part 1 Drop-Down Menu Link List

You can save a lot of web page space using a drop-down menu list if you have numerous links for viewer selection. If you don't know how to set it up, simply insert a URL where the list value would normally be in the code below. Then you create a function to work with that URL. Then you can create an active drop down menu list, like the one shown at the top of this page.

This code is embedded within the <HEAD> section of the page document
<SCRIPT LANGUAGE="JavaScript">
// This JavaScript code and many more found free online at http://www.designerwiz.com//
// Development Resource & JavaScript Public Archive Center //
function formHandler(){
var URL = document.myform.popsite.options[document.myform.popsite.selectedIndex].value;
window.location.href = URL;
}
</SCRIPT>

Now we create a drop-down menu list and place it within the <BODY> section where needed to be displayed.
<FORM NAME="myform">
<SELECT NAME="popsite" SIZE=1 onChange="formHandler()">
<OPTION VALUE="">These are our selection examples...</option>
<OPTION VALUE="">------------------------------</option>
<OPTION VALUE="http://www.designerwiz.com"> Free Resources </option>
<OPTION VALUE="http://www.designerwiz.com/test/link.htm"> Test Link & Server </option>
<OPTION VALUE="http://www.designerwiz.com/resources/freeban.htm"> Free Banner Maker Software </option>
</SELECT>
</FORM>

A working example of this code is shown below:

Easy JavaScript Volume 2 Part 2 Automatic Current Date Display

With JavaScript you can have the current date automatically displayed where ever you would like it to appear on your web page.

First Step:
We begin by creating 2 arrays: The first is for weekdays and the other is for 12 calendar months. Then we extract the variables. You can copy-and-paste the following code into the <HEAD> section of your page document:

<SCRIPT LANGUAGE="JavaScript">
// Original: The JavaScript Source!! http://javascript.internet.com //
// This JavaScript code and many more found free online at http://www.designerwiz.com//
// Development Resource & JavaScript Public Archive Center //
var days = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var now = new Date();
var daynum = now.getDate();
var dayname = days(now.getDay());
var month = months(now.getMonth());
var year = now.getFullYear();

function giveDate() {
return(dayname + " " + month + " " + daynum + ", " + year);
}
</SCRIPT>

We may now use the created variables in "write statements" within the <BODY> section of document.
Example:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

You may also reference the giveDate() function, as seen below:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

A working example of this code shown below:
The current date is:

Easy JavaScript Volume 2 Part 3 Randomized Message Arrays

To keep your web site fresh with new content it helps to have fresh text content change from viewer entry to re-entry, etc. The following JavaScript displays a (seemingly) random phrase on a page each time it is loaded. Works best with version 4.x browser generation.

First Step: We create a function for making message arrays, we then create each individual message array, then we build the random-number generator to sort them by rotation load. You may copy-and-paste the following code into the <HEAD> section of your document:

<SCRIPT LANGUAGE="JavaScript">
// This JavaScript code and many more found free online at http://www.designerwiz.com//
// Development Resource & JavaScript Public Archive Center //
var messages = new Array();
messages[0] = "Welcome to http://www.DesignerWiz.com";
messages[1] = "You have come to one of the best resource sites on the internet!";
messages[2] = "Development Resource & JavaScript Public Archive Script Code Generators";
messages[3] = "Your absolute free web development resource center with the tools for success!!";
messages[4] = "Your other messages go here .... add as many as you need!!";
// The random number generator.
var rn = Math.round(Math.random(5)) % n;
</SCRIPT>

We now must ensure that the parameters of the random number generator are sufficiently set to cover all the elements=messages[0] of your array. For example, the number 5 above is necessary to cope with the 4 elements of our messages array. So if we had ten elements, the number would have to be 11 to effectively randomize each message array.

Copy-and-Paste the following code anywhere in the <BODY> section you want array message visible:

Our message of the day is:
<FONT COLOR="green">
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
document.write(messages[rn])
// unhide -->
</SCRIPT>
</FONT>

A working example is visibly shown below. Refresh Page for new array message:

Our message of the day is:

Easy JavaScript Volume 2 Part 4 Remote JavaScript Source Code

There may be instances where you want your javascripts to be run remotely for security reasons, or because you want the same script to power several files without having to maintain the script in several files. The following script will allow you to run a javascript located in it's own file in your directory allowing you to effectively call the javascript function without it visibly seen on page. This is a sure fire way to get around the Search Engines dislikes for meeting javascript codes and inability to read some navigation written in the script code.
Note: this script will not work with Netscape 2x, most 3x. It's wise to factor this variable depending on the exact type of audience you have. You may want to consider adding a browser version redirect code in place for 2x & 3x browsers.

<SCRIPT LANGUAGE="JavaScript" SRC="remote.js"></SCRIPT>

The actual script does not need to contain the opening and closing script tags, just the code as you'd write it up. Just save it as a normal text file with a .js extension to it (GPU will work with this particular format). For example:

Easy JavaScript Volume 2 Part 5 Daily Currency Exchange Rate Converter

Currency Converter Provided By: University of Alberta Currency Converter
For pages showing prices for things (such as courses) in Canadian dollars,
it may help to have some commonly-requested currencies just one click away. The code generator below
will make this a very simple procedure.

To use the code generator, please provide a dollar value in the box, then click the Generate Code! button.
Then just follow the instructions in the pop-up window. No editing!

For example, running "390" through the code generator and pasting the code into a file would
provide us with the working dollar example below:

Just click on any of the currencies listed and you will see the same-day exchange rate results.


	Some examples shown are courtesy of internet.com