Recently, I began experimenting with Javascript (mostly to see what the fuss was all about.) I'm making a web page form to help students computer their current grade in a class, based on the grading (weighting) system outlined in the syllabus and the known scores on assignments. (Pretty simple, but hopefully useful.) More on that in a future post.
As I was working, I stumbled on some rather bizzare behavior (at least to me, Javascript neophyte) that I figured was worth remarking on, in case someone else (or my future self) encounters a similar problem.
In part of my code, I wanted to be able to search the array by matching against member variables of its elements. After hunting around online a bit, I was led to the conclusion that extending the Array class was the accepted (and clever?) thing to do here:
Array.prototype.getNdx = function(id) {
for (i in this) {
if (this[i].id == id) {
return parseInt(i);
}
}
return -1;
}
I got busy with other things, and weeks went by. Tonight, I resumed work on the code. I was trying to generalize the task of dynamically adding rows to tables, since this was going to happen in several places on the page. This task involves appending children to a node, so I wrote the row adding code to iterate over an array of cell objects and add each of them to the node. Seemed simple enough.
for (col in cells) {
var cell = row.insertCell(col);
...
cell.appendChile(node);
}
However, the alignment was off. After poking around a bit with
Firebug (a lifesaver, by the way; I see us becoming close friends), I determined that an extra node was being added to the beginning of the row.
After assuring myself that my indexes all started where I intended them to, I decided to add an "alert('col = ' + col)" line to the each phase of the adding process, to show me what was going on (a variant of the classic "print("x = " + x)" line for debugging purposes.) The alerts showed me the indexes as:
0...1...2...3...*etc*...getNdx...wtf?
I didn't research this in depth (this entry was mostly for future reference in case I hit this problem again...sometimes school/work makes me go a while between pet projects). However, my theory is that my custom "getNdx" function was picked up as another element of cells by the "for" iterator. Which...sort of...makes sense. I guess. In a free-form, loosely typed, Javascripty sort of way.
At any rate, maybe that will clear this up if anyone else hits this issue. Simplified code to show this behavior:
Array.prototype.getNdx = function(id) {
for (i in this) {
if (this[i].id == id) {
return parseInt(i);
}
}
return -1;
}
var col = 0;
var cells = new Array();
cells[col++] = "asdf"
cells[col++] = "fdsa"
for (j in cells) {
alert(j);
}
