Multifunction JS Files

Ray's Test Pages - Multifunction JavaScript Files

It is possible to put several functions inside a single separate JS files and call them individually. The JS file that controls almost all the content for this entire page is called multifnctn.js. This is a single plain text JavaScript file that contains several functions.

To let the browser know where the functions are when they are called the line <script type="text/javascript" src="multifnctn.js"></script> is added to the HEAD section of the HTML file. This needs to be added to each page that uses the functions contained in multifnctn.js.

Here's the function btnmenu that is in the JS script file. This function uses two other functions also called contained in the multifnctn.js file, inbmenu and outbmenu. The btnmenu function is called by adding the line <script>btnmenu()</script> where the menu buttons are needed.

Here's another function, dropmenu, that is in the JS script file. The dropmenu function is called by adding the line <script>dropmenu()</script> where the drop-down menu is needed.

Almost any code can be added using JavaScript. Here's another function, flags, that is in the JS script file. The flags function is called by adding the line <script>flags()</script> where the flags are displayed.

There is one thing to be wary of when using JS to write HTML code. The delimiter characters " and ' can get very confusing. It is important that these are added correctly.

Consider this line of HTML code ...

Notice that it contains both the " and ' characters to separate one value from another.

Now consider this. The JS code for writing text and HTML code to the current document is document.write("........."); or document.write('.........'); Can you see what the problem is going to be?

As I've said, the " and ' are delimiters and are used in pairs. When JS meets the first delimiter it starts looking for the second one. When it finds it, it thinks that it's met the end of a piece of code and thinks everything else is a separate piece. Whichever version of document.write we use we're going to meet the second delimiter character sooner than expected and the rest of the code will not be processed correctly.

To get around this we need to tell the JS processor to ignore one set of delimiters, and this is done using the \ character. To illustrate this here's part of the code above inside a document.write statement ...

document.write('onClick="location.href='http://brisray.com/index.html'"');

There is no way the code above is going to work. This is because the first delimiter is '. Instead of finding the second delimiter at the last part of the code '); it is found at 'http. To tell JS to ignore this second ' delimiter place a \ in front of it. In the example above the code now becomes ...

document.write('onClick="location.href=\'http://brisray.com/index.html\'"');

Taking the entire piece of code that appears in the JS file above, it now becomes ...

document.write('<input type="button" value="Home" ID="bmenu1" name="B1" onClick="location.href=\'http://brisray.com/index.html\'" onMouseOver=inbmenu("bmenu1") onMouseOut=outbmenu("bmenu1") style="background-image:url(\'tile079.jpg\'); font-weight: bold; color: 0000FF";>');

To make the above code work properly, four \ characters have had to be added to the code.

Confused? Don't worry! It looks confusing, but when you've used it a few times you'll wonder what all the fuss was about.

This page created 15th July 2004

GoStats stats counter