Below are ten JavaScript functions that, over the course of several years, I have found to be indispensable, awesome, and at times life-saving.

1. addEvent()

This function takes all the work out of determining the correct way to add an event to an element (depending on the user’s browser).

function addEvent(obj, eventtpye, functn, usecapture) {
    if (obj.addEventListener) {
        obj.addEventListener(eventtype, functn, usecapture);
        return true;
    } else if (obj.attachEvent) {
       return obj.attachEvent('on' + eventtype, functn);
    } else {
        obj['on' + eventtype] = functn;
    }
}

2. addLoadEvent()

This function adds events that trigger after the page has loaded by attaching them to the onload event handler. It first stores the existing onload contents to a variable. Then, if the onload handler is not set to a function, it assigned the given function to the handler. Otherwise, it adds the function to the existing onload contents.

function addLoadEvent(functn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = functn;
    } else {
        window.onload = function() {
            oldonload();
            functn();
        }
    }
}

Note: Another way of adding events to the onload handler is to simply use the addEvent() function, as described above, like so:

addEvent(window, 'load', functn1, false);
addEvent(window, 'load', functn2, false);
// etc.

3. getElementsByClass()

You would think that JavaScript would already have such a function, but surprisingly (or not, depending on your cynicism) it isn’t an original DOM method. We have getElementById(), getElementsByName(), and getElementByTagName()… so why not a getElementsByClass() method? Well, here it is:

function getElementsByClass(findclass, node, tag) {
    var classElems = new Array();
    if (node == null)
        node = document;
    if (tag == null)
        tag = '*';
    var elems = node.getElementsByTagName(tag);
    var pattern = new RegExp('(^|\\\\s)'+finclass+'(\\\\s|$)');
    var j = 0;
    for (i = 0; i < elems.length; i++) {
        if (pattern.test(elems[i].className)) {
            classElems[j] = elems[i];
            j++;
        }
    }
    return classElems;
}

To return an array of all anchor (<a>) elements of the “foo” class, call the following:

var foos = getElementsByClassName('foo', document, 'a');

4. toggle()

The strict definition of “toggling” is hiding or showing an element upon the occurence of an event. This function, which does just that, is short, simple, and to the point.

function toggle(objid) {
    var elem = document.getElementById(objid);
    elem.style['display'] = (elem.style['display'] == 'none') ? '' : 'none';
}

5. insertAfter()

One would think that this would be a DOM core method (like getElementsByClassName()) but, sadly, it is not. Fortunately, it only requires one line of code, though it is hard to remember and is thus suited to having its own function.

function insertAfter(parent, node, refNode) {
    if (refNode.nextSibling)
        parent.insertBefore(node, refNode.nextSibling);
    else
        parent.appendChild(node);
}

6. inArray()

This is yet another simple method that really should already be built into the JavaScript DOM. While not a function, it is a prototype that extends the existing Array object to add this functionality.

Array.prototype.inArray = function(value) {
    for (i = 0; i < this.length; i++) {
        if (this[i] === value) return true;
    }
    return false;
}

7. getCookie(), setCookie(), delCookie()

I included all three of these methods into one entry because they all go together like gears in a machine. PHP’s implementation of cookies is such an easy, painless process, but this is not so for JavaScript. These three will be like Vicodin after the pain of dealing with cookies in JS.

function getCookie(name) {
    var start = document.cookie.indexOf(name + '=');
    var len = start + name.length + 1;
    if (!start && name != document.cookie.substring(0, name.length)) return null;
    if (start == -1) return null;
    var end = document.cookie.indexOf( ';', len );
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len, end));
}

function setCookie(name, value, expires, path, domain, secure) {
    var today = new Date(today.getTime());
    if (expires)
        expires = expires * 1000 * 60 * 60 * 24;
    var expires_date = new Date(today.getTime() + expires);
    document.cookie = name + '=' + escape(value) +
        (expires ? ';expires=' + expires_date.toGMTString() : '') +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        (secure ? ';secure' : '' );
}

function delCookie(name, path, domain) {
    if (getCookie(name))
        document.cookie = name + '=' +
        (path ? ';path=' + path : '') +
        (domain ? ';domain=' + domain : '') +
        ';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

8. $()

The Prototype Dollar Function

In all honesty, this function was new to me as of recently. It never really occurred to me to have a function whose name consists of one character (a dollar sign, no less!), that takes in either strings or objects and any number of arguments, and that returns either one object or an array of objects.

Now I can’t live without it. Here it is:

function $() {
    var elems = new Array();
    for (var i = 0; i < arguments.length; i++) {
        // For each argument passed to $()
        var elem = arguments[i];
        if (typeof elem == 'string')
            elem = document.getElementById(elem);
        if (arguments.length == 1)
            return elem;
        elems.push(elem);
    }
    return elems;
}

It’s only a few lines of code, too! You can use it to call up one object in one way:

var textbox = $('mytextbox');

or many objects in many ways:

var images = $(objImage1, 'myimg', 'badimage', objImagePlaceHolder);

The return value is always an object, or an array of objects.

9. getXMLHttpObject()

If you’re working with AJAX and have to keep checking your notes for the function that returns the XML-HTTP object, this one’s for you. This works for nearly all browsers in existence.

function getXMLHttpObject() {
    var xmlHttp;
    // IE only...
    try {
        xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
        } catch (E) {
            xmlHttp = false;
        }
    }
    // All other browsers...
    if (!xmlHttp && typeof xmlHttpRequest != 'undefined') {
        try {
            xmlHttp = new xmlHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    return xmlHttp;
}

10. randomRange()

Last, but certainly not least, is the ultra-useful randomRange() function, which returns a random integer between two numbers, inclusive.

function randomRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Conclusion

I keep every single one of these functions inside one external JavaScript file called common.js and call it in the header file that I include in all pages of whatever site I’m working on. That way, all the code is available to me no matter what, whenever I need it. And trust me, I’ve needed it plenty of times in the past, and will continue to need them well into the future.

Many sites are starting to add rich text boxes, which are text fields that let you create text and alter formatting in a WYSIWYG environment: “What You See Is What You Get”. This basically means a text box that is like a word processor; if you select text and click on the “Bold” button (such as a bold letter B), the text will actually show up in bold.

If such a concept has eluded you, look no further for a detailed tutorial on how to create one.

If you have been thinking of a rich text field as its own control (like the <textarea> element), then you are thinking about it all wrong. Instead, think of the text field as being its own web page. It makes sense, doesn’t it? You’re applying HTML formatting to the text, after all.

The Structure

The text field itself is an <iframe> element, which (quite conveniently) comes with a JavaScript function called execCommand(). This function will become your colleague and your confidant. Your most trusted ally, and your most intimate friend.

To start off, create a new page with an iframe, a regular button, a submit button, and a hidden text field. The regular button will toggle the bold setting of any selected text within the iframe. The submit button is there for decoration only, and as a reminder that sometimes a form will need to be submitted. As such, the iframe cannot be used as a form input field; instead, we will use the hidden text field to store the HTML code of the iframe element. Its contents will be updated upon submitting the form, as we will see later.

<html>
<head>
	<title>Rich Text Editor</title>
</head>
<body>
<form method="post" name="myform">
	<input type="button" onclick="formatText('bold')" value="Bold" /><br/>
	<iframe id="textbox" style="width: 300px; height: 150px"></iframe><br/>
	<input type="submit" value="Submit" />
	<input type="hidden" id="text" name="text" />
</form>
</body>
/html>

The Backbone

The formatText() function, called by clicking the “Bold” button, is defined below. You can either save it in an external .js file and call it from the HTML page, or add it to the <head> section.

var objEditor;	// Globally define the text box object
unction formatText(action) {
	objEditor.execCommand(action, false, null);
}
window.onload = function() {
	objEditor = document.getElementById('textbox').contentWindow.document;
	objEditor.designMode = 'on';
	document.myform.onsubmit = function() {
		document.getElementById('text').value = objEditor.body.innerHTML;
	}
}

As you can see above, the text editor object (with the ID “textbox”) is set to a global variable, which can then be called by any other functions. The formatText() function calls the omnipotent execCommand() function, which applies only to the <iframe> object and is extremely powerful. There is a complete list of commands below. The command used above is the “bold” command. The second argument determines whether a user interface is displayed. Since this is not needed, it is set to false. The third argument is the value of the command. Since we are toggling the “bold” setting, we set this to null.

Next, we define what will happen when the page loads by setting the document’s onload event handler to do a few things. First, the text editor object variable is set to the object itself. Next, the text editor iframe’s designMode setting is turned on; this makes it so that the HTML within the iframe is editable. This is a huge deal, because this is essentially what turns the iframe into a rich text field.

(Actually, you can even set the entire document’s designMode variable to “on”, rendering the entire document editable. Just imagine the possibilities!)

Finally, we set it so that when the user submits the form, it sets the “text” hidden field’s value to the HTML of the iframe.

The Commands

The following commands are some of the simpler commands that can be used: Bold (<b></b>), Italic (<i></i>), Underline (<u></u>), StrikeThrough (<s></s>), SuperScript (), SubScript (), Cut, Copy, Paste, Undo, Redo, InsertOrderedList (<ol></ol>), InsertUnorderedList (<ul></ul>), Outdent, Indent, JustifyLeft, JustifyCenter, JustifyRight, and JustifyFull.

SuperScript and SubScript raise or lower text, for things such as mathematic variables (like 7² and H₂O). The commands Cut, Copy, Paste, Undo and Redo function the same way they do in word processors. InsertOrderedList inserts a numbered (ordered) list, while InsertUnorderedList inserts a bulleted (unordered) list. Outdent moves a paragraph of text to the left, while Indent moves it inward (to the right). The Justify commands align the text to the direction specified.

Change Font Size

The FontSize command changes the size of the selected text in the iframe, and requires a value from 1 to 7, 1 being the smallest size, 7 being quite large. This command is based on the soon-to-be obsolete <font> tag, which uses the same values for its size attribute.

This function is best used with a drop-down list whose onchange event handler calls a custom function that changes the font size to the selected value. To most accurately show the user what the end result would be, each line should resemble the following.

<option value="X"><font size="X">X</font></option>

Each item’s value is the size number, while the item is shown in that size, displaying the size number.

Change Font Name

There is a certain list of fonts that is safe to assume all users have installed on their systems. Known as the Core Fonts, these include Andale Mono, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings. It is also safe to include a few fonts that are on most users’ systems, but not all: Arial Black, Lucida Console, Lucida Sans Unicode, Tahoma, and Wingdings.

Like we did with the font sizes, if we had a drop-down list of fonts, each displayed in its own font, we could then set the list’s onchange event handler to call up the FontName command, like so:

objEditor.execCommand("FontName", false, "Times New Roman");

It’s pretty straightforward how it works.

Further Inspiration

There are so many possibilities, especially with the sheer number of commands available at your disposal. For example, there is the 2D-Position command, which allows absolutely positioned elements to be moved by dragging. There is also the CreateLink, which adds a hyperlink or changes text into a hyperlink. InsertButton, InsertImage and
SaveAs are just a microscopically small selection of commands also at your disposal. For a full list of commands available, check out http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx.

First off, what is AJAX? AJAX stands for Asynchronous JavaScript And XML. What does that mean? Basically, it means that you can call up other scripts and retrieve dynamically generated content (or perform simple actions) without ever leaving the current page. It’s how a large number of sites let you log in nowadays, and on what Yahoo! Mail Beta is based. It became popular through Google Suggest, where AJAX is the framework behind that little list that pops up below the search bar while you type in your query.

In Google Suggest, AJAX calls up an external script while you type, looking through a list of popular search queries, and return those that start with the text you are typing, providing suggestions for your search. It is quite useful in that it allows the visitor to see a search query that might return more (or better) results than the one the visitor had in mind.

AJAX isn’t a programming language in itself; it is simply a method of combining JavaScript and the dynamic programming language of your choice (ASP, PHP, etc.) to run another page’s server-side script. There are two parts to an AJAX script: the originating page, where the user is located; and the external page, containing the script that AJAX calls.

We’re going to create our own little page with a “name” text field. When somebody types text into that field, the page will call up an external script that returns the current time. (Sure, we can use plain JS to do this, but this is just a demonstration!)

To start off, we will create the HTML page with the form.

<html>
    <head>
        <title>AJAX Test Page</title>
    </head>
    <body>
        <form name="testform">
            Name: <input type="text" name="inputname" /><br />
            Time: <input type="text" name="currtime" />
        </form>
    </body>
</html>

Pretty basic, right? So far we have the text “Name”, followed by a text field in which the user can enter text. Nothing else happens at the moment, as you can see.

We need to call up our script when the user types in text. The best handler to use for this is the onkeyup event handler. Add the event handler and have it call up a function we will then create:

<input type="text" name="inputname" onkeyup="getTime()" />

Different browsers use different methods to create the XML-HTTP Request object we will need. Internet Explorer uses an ActiveX object, while most other browsers use a built-in JavaScript object. We will use try and catch statements to generate the correct object.

Let’s define the function that will return the XMLHttpRequest object. In the <head> section, add some JavaScript:

<script language="javascript" type="text/javascript">
    function getXHObject() {
        var xmlHttp = null;
        try {
            // For Firefox, Opera 8.0+, and Safari:
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer (below 7.0, and 7.0+):
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;
    }
</script>

The above script will attempt to create the built-in JS object, which will work for most non-IE browsers. If that doesn’t work, then it tries to call up one of the IE-supported methods. The first one works with versions of IE from 5.5 to under 7.0. The second one works with IE 7.0+. Finally, it returns the XML-HTTP object.

What if none of them work? In that case, the user’s browser is incredibly obsolete and does not support AJAX at all. Sure, this isn’t 100% compatible with all browsers, but so few people use ancient web browsers that it doesn’t matter much anyway. It comes to the point where they really should upgrade anyway, to be totally honest.

Next, we will create the getTime() function, which will call up the external script and retrieve the needed information.

var xmlHttp;    // This var must be global
function getTime() {
    // If the input mattered, we would check for blank or invalid input here
    // Create XML-HTTP object
    xmlHttp = getXHObject();
    // Check if null - browser is obselete
    if (xmlHttp == null) {
        alert('Your browser does not support AJAX!');
        return;
    }
    // The URL we will call - if input mattered, we would add a query string of some sort.
    var url = 'gettime.php';
    // Required AJAX code
    xmlHttp.onreadystatechange = stateChanged; // Specify function that will output info.
    xmlHttp.open('GET', url, true);            // Open the URL for sending...
    xmlHttp.send(null);                        // ...and send the request.
}

If the input affected the output (such as getting information based on user input), then the above getTime() function would have included the input as a parameter, and we would have checked the input to make sure it was valid. We would also have generated a URL with the input in the query string, such as getusername.php?id=123.

Next, we will define the stateChanged() function, which is called while the XML-HTTP request is working.

function stateChanged() {
    if (xmlHttp.readyState == 4) {
        // Output was received
        document.testform.currtime.value = xmlHttp.responseText;
    } else {
        // Nothing was received yet, but the XML-HTTP request is working.
        // We may want to generate a message that asks the user to wait.
    }
}

The above function will set the currtime text field’s value to the response text — the output received from the gettime.php external script.

Finally, we will set up the gettime.php page itself. Whatever we echo out will be the response text when called via AJAX. In a new file, we will use PHP to get the current time.

<?php
    echo date('g:i:s A');
    // Return something like "1:45:23 AM"
?>

And that’s it!

Basically, here’s how it works: The user types in a value into the “Name” field. After each keystroke, the getTime() function is called and creates an XML-HTTP object. This is then used to communicate silently with gettime.php, which outputs the time. This output triggers a Ready State of 4. The stateChanged() function is then used to take the output and put it into the “Time” text field.

Now you know how to utilize AJAX, and have just increased your web development arsenal. As stated above, you can have output that changes depending on the user input. For example, you could have a text field that receives a User ID as input, and the external script will take that ID, query a database, and return that user’s full name, or some other piece of information.

Furthermore, instead of using onkeyup as the event handler, you could have a button click (onclick) or a click away from the text field (onblur) act as the trigger.

On a side note, I promise that future posts will not be as long as this one. I just wanted to get an AJAX primer out of the way, kind of as our starting big bang.

Happy coding!

Welcome to the blog of Xylot Design!

The purpose of this blog is to share code snippets, functions, programming methods, design ideas, and other innovations with the world. We’ll be posting informational and extremely useful pieces of code. Just wait until we show you what we have in store for you!