A Quick Quiz using jQuery .data()

Given this markup:

<div id="special" data-timeOut="3">
    
</div>

And this script code:

$(function() {
    var special = $("#special");
    var specialData = special.data();

    for (var p in specialData) {
        if (specialData.hasOwnProperty(p)) {
            special.text(p);
        }
    }
});

Answer the following questions:

Question #1

What output will appear when executing the code on Chrome or IE10?

a) timeOut

b) timeout

c)    (nothing)

d) ice cream

Question #2

What output will appear when executing the code on IE9?

a) timeOut

b) timeout

c)  (nothing)

d) yellow pencil

Let's change data-timeOut to data-time-out:

<div id="special" data-time-out="3">
    
</div>

Question #3

What output will appear when executing the code on IE 10, IE9, or Chrome?

a) timeOut

b) timeout

c)    (nothing)

d) whale teeth

Answers

1: B

2: C

3: A

Moral of the Quiz

Always use the data-some-name style, which gives you camel cased names in JavaScript (someName).

Never use camel case in the data- attribute itself.

RTFM, particularly the section titled "The algorithm for getting the list of name-value pairs".