My Custom JavaScript Functions

Dustin Diaz have recently written an article on Top 10 custom JavaScript functions of all time. So I thought that I would write about all the functions on my common.js file.

addEvent()

The competition for addEvent was just over - so I was not able to include this function in any of the projects I do - but all my future projects will have this.

getElementsByClassName()

A very important function for me. If multiple elements in a html document must be processed, I always use this. I have spoken about my getElementsByClassName() function earlier, but I will include the code here...

//Get all the elements of the given classname of the given tag.
function getElementsByClassName(classname,tag) {
 if(!tag) tag = "*";
 var anchs =  document.getElementsByTagName(tag);
 var total_anchs = anchs.length;
 var regexp = new RegExp("(^|\\s)"+classname+"(\\s|$)");
 var class_items = new Array()
 
 for(var i=0;i<total_anchs;i++) { //Go thru all the links seaching for the class name
  var this_item = anchs[i];
  if(regexp.test(this_item.className)) {
   class_items.push(this_item);
  }
 }
 return class_items;
}

Update : The regular expression have been chaged from var regexp = new RegExp("\\b"+classname+"\\b"); to var regexp = new RegExp("(^|\\s)"+classname+"(\\s|$)");. Thanks to Dustin Diaz for pointing it out(see comments for more information.)

Function $()

My dollar function is very simple. Just call it like this $("id"); and it will return the element with that id. The code is.

function $(id) {
 return document.getElementById(id);
}

Dump Function - for debugging.

The dump function will output an array - with a better formatting so that humans could understat what is in the array.

function dump(arr,level) {
 var dumped_text = "";
 if(!level) level = 0;
 
 //The padding given at the beginning of the line.
 var level_padding = "";
 for(var j=0;j<level+1;j++) level_padding += "    ";
 
 if(typeof(arr) == 'object') { //Array/Hashes/Objects
  for(var item in arr) {
   var value = arr[item];
   
   if(typeof(value) == 'object') { //If it is an array,
    dumped_text += level_padding + "'" + item + "' ...\n";
    dumped_text += dump(value,level+1);
   } else {
    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
   }
  }
 } else { //Stings/Chars/Numbers etc.
  dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
 }
 return dumped_text;
}

This is how the function is called. In this example we will use a complex associative and list combination array as the argument.

//Calling the function...
var arra = new Array("Hloo",'s',23,23.1,"Hello World");
var assoc = {
 "val"  : "New",
 "number" : 14,
 "theting" : arra
};
alert(dump(assoc));

The result will be shown in the following format.

    'val' => "New"
  'number' => "14"
  'theting' ...
      '0' => "Hloo"
      '1' => "s"
      '2' => "23"
      '3' => "23.1"
      '4' => "Hello World"

Filed Under...

Categories : javascript functions Technorati Tags: javascript functions