Question

In addition to the explanation, what does the $ mean in javascript? Here is the code:

var ZebraTable = {     bgcolor: '',     classname: '',     stripe: function(el) {         if (!$(el)) return;         var rows = $(el).getElementsByTagName('tr');     for (var i=1,len=rows.length;i<len;i++) {         if (i % 2 == 0) rows[i].className = 'alt';         Event.add(rows[i],'mouseover',function() {  ZebraTable.mouseover(this); });     Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this); });     } }, mouseover: function(row) {     this.bgcolor = row.style.backgroundColor;     this.classname = row.className;     addClassName(row,'over'); }, mouseout: function(row) {     removeClassName(row,'over');     addClassName(row,this.classname);     row.style.backgroundColor = this.bgcolor; } }  window.onload = function() { ZebraTable.stripe('mytable'); } 

Here is a link to where I got the code and you can view a demo on the page. It does not appear to be using any framework. I was actually going through a JQuery tutorial that took this code and used JQuery on it to do the table striping. Here is the link:

http://v3.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way

Answer 1

Can someone explain the following javascript code?

//Shorthand for document.getElementById function $(id) {     return document.getElementById(id); }  var ZebraTable = {     bgcolor: '',     classname: '',      stripe: function(el) {         //if the el cannot be found, return         if (!$(el)) return;          //get all the <tr> elements of the table         var rows = $(el).getElementsByTagName('tr');          //for each <tr> element         for (var i=1,len=rows.length;i<len;i++) {              //for every second row, set the className of the <tr> element to 'alt'             if (i % 2 == 0) rows[i].className = 'alt';              //add a mouseOver event to change the row className when rolling over the <tr> element             Event.add(rows[i],'mouseover',function() {                 ZebraTable.mouseover(this);              });              //add a mouseOut event to revert the row className when rolling out of the <tr> element             Event.add(rows[i],'mouseout',function() {                  ZebraTable.mouseout(this);              });         }     },      //the <tr> mouse over function     mouseover: function(row) {         //save the row's old background color in the ZebraTable.bgcolor variable         this.bgcolor = row.style.backgroundColor;          //save the row's className in the ZebraTable.classname variable         this.classname = row.className;          //add the 'over' class to the className property         //addClassName is some other function that handles this         addClassName(row,'over');     },     mouseout: function(row) {         //remove the 'over' class form the className of the row         removeClassName(row,'over');          //add the previous className that was stored in the ZebraTable.classname variable         addClassName(row,this.classname);          //set the background color back to the value that was stored in the ZebraTable.bgcolor variable         row.style.backgroundColor = this.bgcolor;     } }  window.onload = function() {     //once the page is loaded, 'stripe' the 'mytable' element     ZebraTable.stripe('mytable'); }