Friday, January 14, 2011

JavaScript Implementation In Different Browsers

In Hebrew, when counting or describing objects, it matters whether the object is considered as male or female. A table is male, while a television is female. As far as I know, this rule applies to Russian and other languages as well.
What's nice about humans is that if they use the wrong form, like a female form for a table, people around them would still understand what they're talking about. Although some might think that the language is ruined. That's OK.

When it comes to programming languages, things are different. Computer languages are supposed to be considered as an exact science, thus, if one not using the syntax correctly, the code won't execute.

Or so we'd like to think.

Consider this loop in JavaScript:
var i = 0;
do {
i++;
} while(i<2);
alert("done:"+i);


As you might expect, it would popup an alert box with "done:2" as the message. This would work on any JavaScript implementation I'm aware of.
Now, let's make a tiny difference (like using the female form in Hebrew, which is only a bit different than the male form):
var i = 0;
do {
i++;
}; while(i<2);
alert("done:"+i);

What was changed? Notice the semicolon (;) before the "while" statement. Try this using your favorite browser. If you get "done:2" as before, I urge you to replace your favorite browser immediately.
This piece of code shouldn't work. It has a syntax error. The semicolon is "unexpected".

Internet Explorer ignores that, and the code works as before. Other browsers (Firefox, Chrome) would halt the script execution.

I'm willing to forgive when people don't follow the Hebrew syntax down to the last rule, but when it comes to code - I'm unforgiving. Moreover, I'm unforgiving to the guys that implemented a "fuzzy" interpreter for a programming languages. This is supposed to be an exact science.

Let me give you another example. In this case, I'm not sure with which implementation I agree:
alert([1, 2, 3, ].length);
alert([1, , 2, 3].length);

Firefox and Chrome would print "3" and then "4", while Internet Explorer would print "4" twice. Basically, each array has an "empty" (undefined) element, so their length is supposed to be the same. But it appears that Firefox and Chrome would drop that element if it is the last one in the array.

Sunday, January 9, 2011

The Difference Between DIV and SPAN

Every now and then I see people wonder about the difference between the DIV HTML tag, and SPAN. Sometimes, people do some trial and error with the two before deciding which fits better for the problem at hand.

So I decided it would be a good idea to clarify this issue.
The DIV element is a "block" element. This means it occupies a full block when rendered, which also means that by default the browser will render a new line before and after rendering the DIV element. SPAN, on the other hand, is rendered inline. This makes SPAN perfect for formatting text which is part of a paragraph.

Want to see the difference? Create an HTML file containing the below code, and run it in a browser:
<html>
<body>
<p>Here goes for span: <span style="color:red" >hello</span> world</p>
<p>Here goes for div: <div style="color:red">hello</div> world</p>
</body>
</html>

And if you're lazy, this is how it looks like:

Here goes for span: hello world


Here goes for div:

hello
world



Makes sense, right?