Visualization of Few Data Structures and Algo’s using JavaScript.

Hello Readers,

I am currently working on a small fun type project to setup visualization of Few Data Structures and Algo’s using JavaScript. The project is hosted on Github, Feel free to fork and suggest. Thanks stay blessed!!

Link can be found here.

Common DOM methods in Java Script

Below is the lists of few common DOM methods that can be used on most elements in a document. As DOM gives us generic access to the element, their attributes, styles defined in a given document.

1. getElementById(object_id) : This method is used to access a object with its ID, The only thing we should keep in mind that before calling this method the target object should be created on the DOM  tree, Otherwise error will be thrown.

syntax: <div style=”background-color:black”></div>

2 appendChild(node): Inserts the specified node or object at the end of the current container object. A frequently used method for dynamically appending a new element or text to the document.

3 insertBefore(newElement, targetElement): This inserts a node before the target node to the same Parent Node.

syntax : document.getElementById(“myId”).insertBefore(newCild, andTheOldTargetChild)

4 insertAfter(newElement, targetElement): This inserts a node after the target node to the same Parent Node.

syntax: document.getElementById(“myId”).insertBefore(newCild, andTheOldTargetChild)

5 removeChild(childreference) : This method is used to remove a child from a Given Parent Node.

syntax : document.getElementById(“myId”).removeChild(childId);

6 getAttribute(attributeName): Returns the value of the attribute named attribute of the current node.


7 getElementsByClassName: This method is very useful and widely used some of the known JS lib frameworks. This method return the reference of all the objects who has the same CSS class name assigned. It will return an array collection.

var arr[]=document.getElementById(“myId”).getElementsByClassName(“subMenus”)

8 getElementsByTagName(tagName): This method is having same nature of the above with only a difference that it sends the list of collection by TAG name.

var tags[]=document.getElementsByTagName(“a”) //returns all anchor tags list on page

9 hasAttribute(attributename): This method is used to verify the if a particular attribute has been defined for a given Node.

if (document.getElementById(“myId”).hasAttribute(“style”)){

//returns true;


10 setAttribute(attributename, value, [iecaseflag]): As the name said we can use this method to set attribute on a given node. and before assigning use the “hasAttributes” method.

Syntax: document.getElementById(“myId”).setAttribute(“valign”)=”center”

11 removeAttribute(attributename): As a name suggest this is used to remove a attribute.

syntax: document.getElementById(“myId”).removeAttribute(“style”);

12 innerHTML Property : The easiest way to get or modify the content of an element is by using the innerHTML property. innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers. The innerHTML property is useful for returning or replacing the content of HTML elements (including <html> and <body>), it can also be used to view the source of a page that has been dynamically modified.

Hope This helps.

R Vashi

Using eval() method in Java Script

The eval() method accepts a string of JavaScript statements(method, expressions)  and evaluates it as JavaScript source code.
eval() returns the value of the executed JavaScript statement.

WE mainly use eval() method while working with AJAX response which sometime contains some executable java script code to run.
Even many of the Java script lib/framework uses this heavily in their AJAX frameworks.

1. eval(statement) //statement can be any java script method.

2. eval(string) //any raw string containing the java script expressions. e.g eval(“alert(‘hello’)”);
First, eval() determines if the argument is a valid string, then eval() parses the string looking for JavaScript code. If it finds any JavaScript code, it will be executed the same way it execute the other methods defined in script tag.

[NOTE] This method is widely supported by most of the known browsers like IE, Mozilla, OPera, Safari, Chrome.

Hope this helps.

R Vashi

Calling Browser Function for Fullscreen window using Java Script on IE

Hi All,

In this article I will show how to call browser function to full screen the window using Java Script+ActiveX. This example is based on IE. although it is very easy to use method in Java script to achieve the same but sometime we might face the need to use the same behavior which IE browser F11 gives.

function fullScreenWindow()
// Get the ActiveX object from the Window
var acvxObj= new ActiveXObject("");
// Now sends a key to fullscreen


You can use the same function for any toggling full screen effect.

[NOTE] Whenever you call this method you will get a confirmation from IE Browser for ActiveX use.

Hope this helps.

R Vashi.

Detecting Browsers using Java Script

Hi All,

Although it is not a rocket science to get the browser details using any technology script, but i will show a very Object oriented way to display the browser details using java script.

Step 1: Create one JS file, Name it CheckBrowser.js

Step 2: Write the below code in the file.

function IsBrowser(){
var agt=navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.nav  = ((agt.indexOf(‘mozilla’)!=-1) && ((agt.indexOf(‘spoofer’)==-1)  && (agt.indexOf(‘compatible’) == -1))); // FireFox/Mozilla

// add your browsers detection code here.
// e.g


Step 3: Add the js in the Html/JSP/ASP/PHP file.
// <![CDATA[
javascript” >
// ]]>

Step 4: Invoke the function in Object oriented way

var is = new IsBrowser();

R Vashi

Closing browser window or tab in Mozilla/Firefox

Hi All,

Sometime we face the problem in closing a window/tab in Mozilla Firefox. The reason is that Firefox configuration doesn’t allows users to close active tabs or windows which are not opened by the script. The script means here refers to the pop up windows, opened using “” method.

Below I will share a very tricky steps to do that.

–          Open Mozilla
–          Type “about:config” in address bar
–          You will see a list of some configurations
–          Search for “dom.allow_scripts_to_close_windows” and toggle to “true”, by default value will be “false”

Now create one HTML page, and add the below java script method to close the window.


function closeWin(){


R Vashi

Reading query parameters using Java Script


One of the best mechanism passing data between pages is query strings in the URL. As we know server side scripts like JSP,SERVLETS,ASP,PHP supports very easy way to parse query paremeters,

But  Java script being a client side script also supports a very easy way to parse the query parameters in the URL.

Use the below method and see the how easy we achived.


var url = window.location.toString(); // read the URL
var prms = RegExp.$1;

var prms = prms.split(“&”); //SPLIT THE VALUES IN ARRAY
var stringList = {};

for(var i=0;i<prms.length;i++){
var tmpKey = prms[i].split(“=”);
stringList[tmpKey[0]] = unescape(tmpKey[1]);

for(var j in stringList){
document.write(j+” = “+stringList[j]+”<br/>”);


R Vashi

Pagination in Java Script(using prototype.js)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<TITLE> New Document </TITLE>

<script src=”prototype.js” type=”text/javascript”></script>
Configurations for Paging

var maxRecordShow=10;    // assgin from the config files
var totalRecordInDB=53; // get the record count from the backend, and assign here

var totalRecordCount=(totalRecordInDB/maxRecordShow);
var maxTotalPage=Math.ceil(totalRecordCount);

var currentPageSet=1;
var previousPageSet=0;

var nextPointer;
var prevPointer;


Page<div id=”pg” style=”display:inline”> 1</div> out of <span id=”total”></span> <br><br>
Records<br><div id=”rec” style=”display:inline”></div> <br><br>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>
<!– Data Table –>
<table id=”recTbl” name=”recTbl” cellspacing=”4″ cellpadding=”0″ border=”1″>

<!– End Data Table –>

<a href=”#?” id=”prev” onClick=”prevList()”>prev</a>&nbsp;&nbsp;   <a href=”#?” id=”next” onClick=”nextList()”>next</a>




function nextList(){
if(currentPageSet <maxTotalPage){

function prevList(){
if(previousPageSet > 0 && previousPageSet<maxTotalPage){

function showNextPage(start,end){
//hide the current row set
var st=start-1;
var en=st-(maxRecordShow-1);
var id=”row”+i;
//show the next row set
var id=”row”+i;

function showPrevPage(start,end){
//hide the current row set
var id=”row”+i;
//show the previous row set
var id=”row”+i;

//@DummyMethod TO PUT RECORDS IN TABLE [in JSP just load the data from the server in the table dont use this method]
function putDummyRecords(){
var obj1=document.getElementById(“recTbl”);
var obj = obj1.getElementsByTagName(‘tbody’)[0];
var tr=document.createElement(“tr”);
var td1=document.createElement(“td”);
var td2=document.createElement(“td”);
td2.appendChild(document.createTextNode(” LLLLL “));
var td3=document.createElement(“td”);
td3.appendChild(document.createTextNode(” AAAAAA “));
var td4=document.createElement(“td”);
td4.appendChild(document.createTextNode(” ZZZZZZ “));
if(i > maxRecordShow){”none”;

// put dummy records in table

// manage records on load


PS: Include proptype libs(effect.js, scriptaculous.js, prototype.js)

Assign CSS Class using Java Script

To assign class name on the fly is very simple, Create a DIV and give it an ID.
<div id=”myId”> This is test</div>

at the page end, write the below code.




TIP: While accessing element with their ID’s always specify the script at the bottom of the page so that valid object could be found, otheriwse null will be returned by the script.

DOM in Java Script

Introduction to the Document Object Model

The Document Object Model, or DOM, is the interface that allows you to programmatically access and manipulate the contents of a web page (or document). It provides a structured, object-oriented representation of the individual elements and content in a page with methods for retrieving and setting the properties of those objects. It also provides methods for adding and removing such objects, allowing you to create dynamic content.

The DOM also provides an interface for dealing with events, allowing you to capture and respond to user or browser actions. This feature is briefly covered here but the details are saved for another article. For this one, the discussion will be on the DOM representation of a document and the methods it provides to access those objects.

The Document Tree

When a browser loads a page, it creates a hierarchical representation of its contents which closely resembles its HTML structure. This results in a tree-like organization of nodes, each representing an element, an attribute, content or some other object.


Each of these different object types will have their own unique methods and properties. But each also implements the Node interface. This is a common set of methods and properties related to the document tree structure. To understand this interface better, take a look a the diagram below which represents a simple node tree.

The Node object provides several properties to reflect this structure and allow you to traverse the tree. Here are some relationships using the example above:

  • NodeA.firstChild = NodeA1
  • NodeA.lastChild = NodeA3
  • NodeA.childNodes.length = 3
  • NodeA.childNodes[0] = NodeA1
  • NodeA.childNodes[1] = NodeA2
  • NodeA.childNodes[2] = NodeA3
  • NodeA1.parentNode = NodeA
  • NodeA1.nextSibling = NodeA2
  • NodeA3.prevSibling = NodeA2
  • NodeA3.nextSibling = null
  • NodeA.lastChild.firstChild = NodeA3a
  • NodeA3b.parentNode.parentNode = NodeA

The Node interface also provides methods for dynamically adding, updating and removing nodes such as:

  • insertBefore()
  • replaceChild()
  • removeChild()
  • appendChild()
  • cloneNode()

These will be covered later. But for now let’s look how the document tree reflects the contents of a web page.

[in more details