Website Design Blog - BlueBolt.net

Essential JavaScript Functions and Tips

There have been countless occasions I have expected a JavaScript function to exist based on its prevalence in other languages, only to find it doesn’t.

Some of the ‘missing’ functions I consider to be fundamental which are part of almost every other scripting or programming language out there, are missing from JavaScript (which seems odd for a language based on C).

This article aims to provide a collection of functions, some of which were created to fill these gaps, and is likely to be updated periodically as new ones are found or recommended. Other arguably invaluable tips and methods will also be included here – and anything else I deem to be helpful.

We’ll start with a simple tip which should increase productivity with pretty much any JavaScript development:

Shorthand document.getElementById()

For such a vital function, getElementById() is certainly long-winded.

A simple wrapper function solves this, and will save many many keystrokes (and time) over the life of any JavaScript project’s development:

function ebi(elemID) {
return document.getElementById(elemID);
}

Couldn’t be much simpler, right? Obviously the name of the function can be named whatever you feel appropriate. I chose ebi() for the reasons it is short, and logical (effectively an acronym of getElementById).

Once included in your script, all that is necessary to grab an element on the page using its ID is this call:

ebi('txtUsername');

The convenience of this is clear when compared with the equivalent default method:

document.getElementById('txtUsername');

The new function can be used in exactly the same way. You do not need to store the resulting element in a variable before it can be used. Therefore, the following statements are functionally identical:

document.getElementById('txtUsername').style.width='100px';

ebi('txtUsername').style.width='100px';

string.split()

I am including this existing JavaScript function because it’s extremely useful, and also for those who primarily use PHP, and are looking for the JavaScript equivalent to PHP’s explode() function.

For those who don’t know, the split() (or explode() in PHP) functions breaks a string (string == text) in to an array, separated by the character or string passed in the first argument/parameter.

This is the prototype for JavaScript’s split() function:

string.split(delimiter[, index_limit])

The arguments break down as follows:

delimiter: the character or string to dissect the string by

index_limit: Optional argument. Indicates the maximum number of items to be added to the resulting array.

Some real world examples:

Script:

// SEPARATE A STRING IN TO WORDS AND LIST THEM ALL
var myString = "Hello. How are you doing?";
var strArray = myString.split(" ");
for(x = 0; x < strArray.length; x++){
document.write("Word #" + x + ": " + strArray[x] + "<br>");
}
Output:

Word #0: Hello.

Word #1: How

Word #2: are

Word #3: you

Word #4: doing?

Script:

// SEPARATE A STRING IN TO A MAXIMUM OF 2 WORDS AND LIST THEM
var myString = "Hello. How are you doing?";
var strArray = myString.split(" ", 2);
for(x = 0; x < strArray.length; x++){
document.write("Word #" + x + ": " + strArray[x] + "<br>");
}

Output:

Word #0: Hello.

Word #1: How

OK, on to a simple function I consider to be an oversight on the developer’s part:

is_numeric()

The name given to this function is taken from the PHP function. It tests if the given argument is a number – or not – and returns true or false, respectively.

Here’s the code:

function is_numeric(value) {
if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
return true;
}

Here’s a couple of examples of how it’s used:

Script:

var myVal = "123";
var myVal2 = "12.3";
var myVal3 = "abc123";
if (is_numeric(myVal)) { document.write("myVal = True<br>"); } else { document.write("myVal = False"); }
if (is_numeric(myVal2)) { document.write("myVal2 = True<br>"); } else { document.write("myVal2 = False"); }
if (is_numeric(myVal3)) { document.write("myVal3 = True"); } else { document.write("myVal3 = False"); }

Output:

myVal = True

myVal = True

myVal = False

Enough for now… Until Part 2.

Posted in: JavaScript, Web Development
Tags: explode, functions, javascript, tips