I had to write something today in javascript that used for loops. No big deal, but usually I put it into a separate .js file, in this case I had to put it right there in the html. This created a little problem that I thought I would write about to help remind myself and provide a little guidance to others.
Less Than ‘Test’ In HTML
The problem arises when the html parser gets involved and runs into the javascript which was supposed to be ignored. Usually I will put almost all the javascript into a separate .js file so that things are cleaner, but in this case, I just need to do a quick loop right in the html. So, I used a <script tag. Unfortunately for me, the i<n loop invariance test (the end of loop test) uses a symbol (<) which is the start of an html tag open or close. I don’t know if this problem occurs when using a simple html file or not, but I am using xhtml and it really broke things.
Here is the header of my xhtml file.
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Here is my for loop code.
<script type="text/javascript">
for (var i=0; i<10; i++) {
alert("test: " + i);
}
</script>
Well the xhtml parsing freaks out when it sees the ‘i<10′ part, because < is obviously looking similar to a tag opening or closing. So at first I tried to put an html comment around it using <!– XXX –> but then my javascript wasn’t even being executed. So I had to eventually use a CDATA section like this.
<![CDATA[
for (var i=0; i<10; i++) {
alert("test: " + i);
}
]]
This was a good solution that worked for me.
Once I got the loop working, I encountered another problem.
Iterating Over Arrays Can Be Weird
In Java or C or C++ or python etc, we typically iterate over each item in an array and index with a counter. We just stop looking when the index has reached the max number of elements (minus 1) in that array.
In javascript things are different because arrays are really objects with properties. Therefore if you are trying to use the .lenght attribute (like java) you may be surprised. What I found was that
I was getting as the last item in the array an ‘undefined’ element.
for (var i=0; i<all_inputs.length;i++) {
alert("input: " + i + ") " + all_inputs[i]);
}
So, the solution is to do everything the same except for the loop invariance test. Here we just say to loop while the i’th element is not undefined. In other languages, you know that this will generate a array out of bounds type exception, but since this is really checking properties of an object, things are a little different.
for (var i=0;undefined != all_inputs[i];i++) {
alert("input: " + i + ") " + all_inputs[i]);
}
And, those are just some handy things to remember next time you are making for loops in your html code and iterating over array elements.
for (var i=0; i<10; i++) { alert("test: " + i); }
No comments yet.
Leave a comment!
You must be logged in to post a comment.
