Please help me understand the "while" loop in this JavaScript snippet

Question

I saw a fragment like this for detecting IE in JavaScript using conditional comments.

var ie = (function(){ var undef, v = 3, div = document.createElement('div'); // the while loop is used without an associated block: {} // so, only the condition within the () is executed. // semicolons arent allowed within the condition, // so a comma is used to stand in for one // basically allowing the two separate statements // to be evaluated sequentially. while ( div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->', div.getElementsByTagName('i')[0] ); // each time it evaluated, v gets incremented and // tossed into the DOM as a conditional comment // the i element is then a child of the div. // the return value of the getEBTN call is used as // the final condition expression // if there is an i element (the IE conditional // succeeded), then getEBTN return is truthy // and the loop continues until there is no // more i elements. // In other words: ** MAGIC** return v > 4 ? v : undef; }()); 

The above documented (and slightly improved) version of Paul Irish by James Padolsey . I am posting a commented version so you know that I might need a simpler explanation if anyone can.

I would really like to know what is going on inside the while loop . I do not understand this.

Answer 1

(Assuming I didn't mess it up badly), the while equivalent to the following:

 var elt; do { v++; div.innerHTML = '<!--[if gt IE ' + v + ']><i></i><![endif]-->' elt = div.getElementsByTagName('i')[0]; } (while elt); 

---

mdc or any good ones cover this while (stmt1, stmt2) thing.

Here the MDC talks about while :

 while (condition) statement 

condition
An expression calculated before each passage through the loop. If this condition evaluates to true , statement is executed. When the condition evaluates to false , execution continues with the statement after the while .

We can know for sure that expression is in JavaScript from the MDC:

An expression is any valid set of literals, variables, operators, and expressions that is evaluated with a single value; the value can be a number, a string, or a boolean.

Conceptually, there are two types of expressions: those that assign a value to a variable, and those that just matter. For example, the expression x = 7 is an expression that assigns x to seven. This expression in itself is estimated to be seven. These expressions use assignment operators. On the other hand, the expression 3 + 4 simply evaluated to seven; he does not complete the task. The operators used in such expressions are simply called operators.

If you feel brave, you can also check the ECMA-262 language specification , in particular the following sections:

• 11 Expressions, especially 11.14 Comma Operator ( , )
• 12.6.2 while statement

_{Sorry, I can’t provide direct links, like everything inside a PDF.}

Answer 2

v stores the version number of IE. It initializes to 3, so the loop at each iteration creates lines like the following:

 // v = 3 <!--[if gt IE 4]><i></i><![endif]--> // v = 4 <!--[if gt IE 5]><i></i><![endif]--> 

If you are confused by this part:

 +(++v)+ 

it just means, in context, concatenate '<!--[if gt IE ' with incremented v and then concatenate the newly formed string with ']><i></i><![endif]-->' Operator The increment ++ acts to return a value with the addition of v , since it precedes v . If it comes after v , the current value of v will be returned before the increment occurs. Mozilla does a better explanation job than me:

This operator increments (adds one of them) its operand and returns a value. If the postfix used, with the operator after the operand (for example, x ++), then it returns the value before the increment. If a prefix is ​​used with the operator before the operand (for example, ++ x), then it returns the value after the increase.

thus, the first conditional comment created is always 4. The loop continues until div.getElementsByTagName('i')[0] DOM element, false and causes the loop to exit.

Answer 3

it

 <div><!--[if gt IE 6]><i></i><![endif]--></div> 

effectively creates a DOM that looks something like

 <div><i></i></div> 

in versions of IE> 6. But in earlier versions and browsers that are not IE at all, it creates

 <div></div> 

So, you added the HTML version of “if gt IE” and depending on whether the i element is part of the DOM, you can find out if you are in an IE version that is larger than v . When you reach the value v where element i exists, you are done!