Category: javascript

Occasionaly we can manipulate HTML DOM easily by accessing the innerHTML of an element. In IE however, the following elements’ innerHTML are read only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

This code will fail in IE

tBodyEl.innerHTML = '

';


A more IE friendly solution using DOM table functions.

var row = tBodyEl.insertRow(0);
row.setAttribute('height', '24px');
var cell = row.insertCell(0);
cell.setAttribute('colspan', '7');
cell.innerHTML = 'Some Cell Value';



/**
* In JSON curly braket is a sign of a new object ({ or })
* Any variable inside the object, also known as object's attribute, is accessible using a period sign (.) object.attribute
* or you can also acces it using an "associative array" such as object['attribute']
* You'll need a Firefox with Firebug extension to see the result from console.log or IE9 with its built-in Developer Tools
*
*/

var var3 = [{
'var3_1':'value3_1',
'var3_2':'value3_2'
},{
'var3_3':'value3_3',
'var3_4':'value3_4'
}];
console.log(var3);
// The line above will output> [Object { var3_1="value3_1", var3_2="value3_2"}, Object { var3_3="value3_3", var3_4="value3_4"}]
console.log(var3[0].var3_1);
// The line above will output> value3_1


Extending an existing javascript function

This is how you extend an existing javascript function.
Assuming that you want to preserve the existing function and the “added algorithm” is somewhat only needed to be executed based on a certain environment only.

function abc(){
  alert('abc is called');       
}      
var abcOrig = abc;
abc = function(){
  abcOrig();
  alert('abc has been extended!');
}
alert('test 1');
abc();
alert('test 2');
abc();      

Super powerful debugging function in javascript. This function will output your variable in question to firebug console or html page.
With this function you can debug anything from Object, array, string, integer, etc. It is also recursive safe.

/**
 * @author: Ronald Pringadi, 2011
 * @desc: to debug a JavaScript Object
 * @usage: debug(yourObject);  
 * or debug(yourString); 
 * or debug(yourArray);  
 * @param object vTraceObject
 * @param string vPadding
 * @param object vPadding
 * 
 */

function debug(vTraceObject, vPadding, vPreviousTraceObject) {
	'use strict';

	function getObjectClass(vObj) {

		if (vObj && vObj.constructor && vObj.constructor.toString) {
			var arr = vObj.constructor.toString().match(/function\s*(\w+)/);
			if (arr && arr.length === 2) {
				return arr[1];
			}
		}
		return undefined;
	}
	function typeOf(vObj) {

		var vResult = typeof vObj;
		if (vResult === 'object') {
			try {
				if (vObj.length !== undefined) {
					vResult = 'array';
				}
			} catch (e) {
			}
		}

		return vResult;
	}	
	function print(vPadding, vType, vValue) {

		if (vPadding === undefined) {
			vPadding = '';
		}
		if (vType === undefined) {
			vType = '';
		}
		if (vValue === undefined) {
			vValue = '';
		}
		try{
			console.log(vPadding + ' (' + vType + '): ' + vValue + "\n");
		}catch(e){
			document.write(vPadding + ' (' + vType + '): ' + vValue + "\n");
		}
		
	}	

	if (vPadding === '' || vPadding === undefined) {
		vPadding = '';
	}
	if (typeOf(vTraceObject) === 'object'
			&& typeOf(vPreviousTraceObject) === 'object') {
		if (getObjectClass(vPreviousTraceObject) === getObjectClass(vTraceObject)) {
			print(vPadding, 'ERROR', 'RECURSION EXISTING ...');
			return null;
		}
	}

	var vType = typeOf(vTraceObject);
	if (vType === 'object' || vType === 'array') {
		if (vPadding === '') {
			print(vPadding, vType, '...');
			vPadding = '----';

		}
		try {
			var vTempType = '';
			var variable = '';
			for (variable in vTraceObject) {
				vTempType = typeOf(vTraceObject[variable]);
				if (vTempType === 'object' || vTempType === 'array') {
					print(vPadding, vTempType, variable);
					debug(vTraceObject[variable], vPadding + '----',
							vTraceObject);
				} else {
					print(vPadding, vTempType, variable + ' : '
							+ vTraceObject[variable]);
				}
			}
		} catch (e) {
			print(vPadding, 'ERR', 'EXCEPTION');
		}
	} else {
		print(vPadding, vType, vTraceObject);

	}


}

function objA() {
	this.varA1 = 'a1';
	this.varA2 = 'a2';
	this.myCars = new Array();
	this.myCars[0] = "Saab";
	this.myCars[1] = "Volvo";
	this.myCars[2] = "BMW";
}

function objB() {
	this.varB1 = 'b1';
	this.varB2 = 'b2';
	this.varB3 = new objA;

}
instanceB = new objB;

Output

(object): ...
---- (string): varB1 : b1
---- (string): varB2 : b2
---- (object): varB3
-------- (string): varA1 : a1
-------- (string): varA2 : a2
-------- (array): myCars
------------ (string): 0 : Saab
------------ (string): 1 : Volvo
------------ (string): 2 : BMW