Having Fun with Javascript
May 6, 2009 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.)
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 following piece of code shows the showIt() function. Briefly, here is what the function does:
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 = "https://itjungle.wpenginepowered.com/images/arrowminus.gif";
}
else {
hideDiv.style.display = "none";
element.src = "https://itjungle.wpenginepowered.com/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.
|
