Having Fun with Javascript

Published: May 6, 2009

by Paul Tuohy

Over the last couple of years I have spent a lot of time playing around with Web pages. You can see the results of my efforts at www.systemideveloper.com. One of the really fun parts of getting to grips with Web pages has been learning about some of the weird and wonderful things that can be done with Javascript.

In this article, I want to share two of my favorite Javascript functions. Hopefully, you might find them useful or they might spark you on to something even better.

Fighting the Spam Bots

When I first set up the System i Developer Web site, there were numerous hyperlinks for contacting us by e-mail. These links were all defined using an anchor with a "mailto" in the referenced URL, e.g., href="mailto:xxx@systemideveloper.com".

Unfortunately, this resulted in a truck load of spam being deposited in each and every one of the referenced e-mail accounts. Apparently there are dreaded spam bots that scour Web pages looking for e-mail addresses they can add to their lists.

So I decided to write a Javascript function to obfuscate e-mail addresses and make them more difficult to find. Since spam bots scan all the text in a Web page (HTML, CSS, and Javascript), it was not enough to simply put an e-mail address in a Javascript function; the function would have to construct the e-mail.

The resulting function (sendEmail) expects one parameter: a pre-defined code that identifies the required e-mail. The function is called through a hyperlink as follows:

<a href="javascript:sendEmail('PPT')">Contact Paul</a>

A cut down version of the function is shown in the next piece of code. (I did not include all the e-mail addresses). The key to the function is the very last line. Setting the window property self.location to the required URL provides the same result as the href described earlier. The required mailto string is provided by concatenating a set of variables together. These variables are set to default values at the start of the function and change as required based on the parameter value passed.

function sendEmail(type) {
   var mailTo = "mailto:";
   var name = "info";
   var at = "@";
   at = at + "systemideveloper.com";
   var subject = "I have a question";
   var body = "My question is";
   if (type == 'CIN') {
   }
   else if (type == 'PSG') {
      name = "susan";
      subject="Hello Susan";
      body="";
   }
   else if (type == 'PJP') {
      name = "jon";
      subject="Hello Jon";
      body="";
   }
   else if (type == 'PPT') {
      name = "paul";
      subject="Hello Paul";
      body="";
   }
   else if (type == 'PSM') {
      name = "skip";
      subject="Hello Skip";
      body="";
   }
   else if (type == 'SRV') {
      name = "services";
      subject="Services Inquiry";
      body="Please contact me in relation to";
   }
   self.location= mailTo + name + at + "?subject=" + subject + 
                  "&body=" + body;
};

The only overhead with this method is that whenever a new e-mail link is added to the Web site, the function has to be updated. But it is a small price to pay to stop most of that spam!

Hide and Seek

Just how much information should you put on a Web page? Too much and the page becomes difficult to read. Too little and you end up with hyperlinks to other pages and having to navigate backward and forward between multiple pages.

On a Web page it is possible to make an element non-display (just like on a 5250 display). A Javascript function can then be used to flip the contents of the element between non-display and display on the simple click of a button.

The next graphic shows an example from the System i Developer Web site of a page that lists the session grid for the upcoming RPG & DB2 Summit in Orlando. Clicking on one of the arrows shows the session grid for that day. Clicking on the arrow a second time hides the content again. Also note how the arrow changes between pointing to the right and pointing down. All of this requires some simple HTML, a naming convention, a Javascript function and the images for the right arrow and the down arrow. (Yes, it is two different images, not one rotating image.)

Hiding and showing content on a Web page.

The next piece of code shows the relevant HTML for the initial display of the page. The two important points are the element of the image for the right arrow and the following division that contains the details of the grid for the day in question. The important points to note are:

• The ID of the arrow image is the same as the ID of the following division with the word "Button" appended to the end. (Note the capital B; remember that names are case sensitive in Javascript). In this example, the ID of the division is Wednesday, so the ID of the arrow image is WednesdayButton.
• The onclick attribute of the image element specifies that the function showIt() is called when the arrow is clicked and that the image object is passed as a parameter. The value 'this' means this element.
• The style attribute of the division specifies that the display property is none, i.e., non-display.

<img src="/images/arrowplus.gif" border="0" id="WednesdayButton" 
 onclick="showIt(this);">   
<b>Wednesday, April 15, 2009 - Conference Day 1</b></p>

<div id="Wednesday" style="display: none;">
   <!-All the grid details here -->
</div>

The following piece of code shows the showIt() function. Briefly, here is what the function does:

• The parameter passed to the function (element) identifies the arrow image that was clicked on the page.
• The variable hideDivId is set to the name of the division to be hidden or displayed. This is done by getting the substring of the ID of the image from the first position up to the position where the word Button starts (as provided by the lastIndexOf method). You must remember that, in Javascript, position counting starts at 0: the lastIndexOf method will return a value of 9 for the ID WednesdayButton (i.e., Button starts in the tenth position). The substring from position 0 for a length of 9 gives us the name of the id of the division: Wednesday.
• The getElementById method is used to set the variable hideDiv to the division to be hidden or displayed.
• The function then performs a simple if/else. If the division is currently hidden then set the display property to block and change the source of the image button to the down arrow image. Otherwise, set the display property to none and change the source of the image button to the right arrow image.

function showIt(element) {
   var hideDivId=element.id.substr(0,element.id.lastIndexOf("Button"));
   var hideDiv=document.getElementById(hideDivId); 
   if (hideDiv.style.display == "none") {
      hideDiv.style.display = "block";
      element.src = "/images/arrowminus.gif";
   }
   else {
      hideDiv.style.display = "none";
      element.src = "/images/arrowplus.gif";
   }
} 	 

When using the showIt() function, it doesn't have to be a division element that is hidden--it can be just about any element. The only requirement is that the ID of the image that is clicked is the same as the ID of the element to be hidden/displayed with the word "Button" appended to the end.

There You Have It. . .

Javascript provides numerous ways to manipulate the contents of a Web page. If you have not yet started experimenting with Javascript, why not make your way to www.w3schools.com and take the Javascript tutorial?

Have fun!

Paul Tuohy is CEO of ComCon, an iSeries consulting company, and is one of the co-founders of System i Developer, which hosts the RPG & DB2 Summit conferences. He is an award-winning speaker who also speaks regularly at COMMON conferences, and is the author of "Re-engineering RPG Legacy Applications," "The Programmers Guide to iSeries Navigator," and the self-study course called "iSeries Navigator for Programmers." Send your questions or comments for Paul to Ted Holt via the IT Jungle Contact page.

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot