Suppose a company is going to hire JavaScript coders. I wonder what question should this company use to properly evaluate them. Even though general programming skills are more important than technology-specifics, they need to be tested on what they are going to work with.
How would you do that? How would you test if they have the proper knowledge?
I would highly suggest questions on debugging code and dealing with "typeless" objects. Also other good questions would hint at the different interpretations of the code amongst browser. You can ask definition questions as filler, however they don't really give a good measure on how good the developer is.
Another good question to ask is scenario based questions. These tend to throw off people with a shallow understanding of a subject on certification exams.
I've had interview questions about requesting files from the client side. I strong disapprove of this type of question, since it is questionable on the users side.
As far as frameworks go... I really don't think detailed questions are necessary unless it is in their job title (i.e. Senior JQuery Developer). As long as the developer knows how to formally develop/design with Javascript then he can learn a framework relatively quickly and produce good to excellent results.
It could be revealing to find out what their favorite JavaScript framework (jQuery, Prototype, etc.) is and, more importantly, why.
If you are looking for some advanced developers then asking them questions that would lead to understanding how they use closures would be helpful.
For example, if you have a for loop and you want to print out the value in a setTimeout, to an alert, how would you do it?
UPDATE: I was thinking about javascript, and WebWorkers and how to use canvas in cross-browser situations is nice, but probably not used much. I think one of the most important things would be to see how they deal with cross-browser issues. For example, how do you use Array.filter cross-browser, since IE doesn't include this function?
This would check on how they determine if a function is supported.
You could also ask how to get the target element if:
var elem = document.createElement('a');
a.onclick = function(e) {
// how to display the href of this element clicked on
}
This would show that they have some understanding on how different browsers handle something so fundamental.
jQuery abstracts this out, but there will be times when you have to do something similar and you can't depend on the library to do everything for you, so you should have some understanding of this issue.
Generic:
(Beginner/Medium) specific questions:
toString method?with statement?Advanced questions:
People questions:
Cross-Browser/DOM API questions:
addEventListener is supported in which browsers?Code snippet questions:
[1]:
<a href="#">text</a><br><a href="#">link</a>
<script>
var as = document.getElementsByTagName('a');
for ( var i = as.length; i--; ) {
as[i].onclick = function() {
alert(i);
return false;
}
}
</script>
Why do the anchors, when clicked on, alert -1 instead of their respective counter inside of the loop? How can you fix the code so that it does alert the right number? ( Hint: closures )
[2]
function User(name) {
this.name = name;
};
var j = User('Jack');
alert(j.name)
Why would this code not work as expected? Is anything missing?
[3]:
Object.prototype.jack = {};
var a = [1,2,3];
for ( var number in a ) {
alert( number )
}
I'm iterating through this array I defined, it has 3 elements in it.. the numbers 1 2 and 3.. Why on earth is jack showing up?
[4]:
people = {
1:'Jack',
2:'Chloe',
3:'Bruce',
}
for ( var person in people ) {
alert( person )
}
Why is this not working in IE?
[5]
<script>
(function() {
var jack = 'Jack';
})();
alert(typeof jack)
</script>
Why does it alert undefined when I declared the jack variable to be 'Jack'?
[6]:
<script src="file.js">alert(2);</script>
Why isnt it alerting 2?
[7]:
array = [1,2]; alert( typeof array )
Why does it say object and not array? How would I detect if its an array?
[8]:
<a id="clickme">click me!</a>
<script>
var a = document.getElementById('clickme');
a.onclick = function() {
alert(this.innerHTML)
setTimeout( function() {
alert( this.innerHTML );
}, 1000);
};
</script>
Why does the second alert say undefined?
[9]:
<p id="test">original</p>
<script>
var test = document.getElementById('test');
test.innerHTML.replace('original', 'FOOBAR');
</script>
How come it doesnt replace the text with FOOBAR??
[10]:
function identity() {
var name = 'Jack';
alert(name);
return
name
};
var who = identity();
alert(who)
Why does it first alert Jack, then undefined?
[11]:
var number = '08',
parsed = parseInt(number);
alert(parsed)
The alert should give me 8.. why doesn't it give me 8?
[12]:
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.google.com", true);
xhr.onreadystatechange = function(){
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText )
} else {
document.body.innerHTML = "ERROR";
}
}
};
xhr.send(null);
</script>
How come I cant retrieve Google's homepage text with XHR from my localhost?
[13]:
<script>
var ticket = true;
if (!ticket)
alert('you need a ticket');
alert('please purchase a ticket.')
</script>
ticket is set to true. Why is it alerting that I need to purchase one?
[14]:
<script>
var blogEntry = 'today i woke up
to the smell of fresh coffee';
alert(blogEntry)
</script>
How come it doesnt alert with the blog entry? Everything seems right.
[15]:
alert( [typeof 'hi' === 'string', typeof new String('hi') === 'string' ] )
I have two strings, but the second evaluation doesnt become true. Is this a potential bug ? How come it's not true?
Best practices:
<a href="#" onclick="javascript:window.open('about.html');">about</a>
Would you change anything in the prior code example? Why?
<a href="site.html" onmouseover="changeImages('button1', 'images/button1over.png'); return true;" onmouseout="changeImages('button1', 'images/button1.png'); return true;">site</a>
Would you change anything in this example? Why?
Other answers here are good. I would also recommend some general programming exercise using JavaScript, for example doing a FizzBuzz implementation. JavaScript is mostly about wring code that runs in the browser, but being able to translate an algorithm into code is an important skill for any working programmer.
Specific:
===
What will this code print?
function Point() {
this.x = 20;
this.getX = function() { return this.x; }
}
var a = new Point();
var f = a.getX;
print(f());
--
What does this code do? Anything unexpected? (Assuming print is a function that prints)
function print20to30() {
for (x=20; x <= 30; x++) {
print(x);
}
}
function print1to10() {
for (x=1; x <= 10; x++) {
print20to30();
print(x);
}
}
Meder has some good points. Here are a few more
var keywordWhat's wrong with the following code?
var allDivs = document.getElementsByTagName('div');
for ( var i = 0; i<allDivs.length; i++ ) {
allDivs[i].appendChild(document.createElement("div"));
}
Answer: infinite loop due to the fact that getElementsByTagName (and the like) returns an HTMLCollection, which is a "live" set or container, meaning that every time you add a div to the document, it gets added to allDivs.
something to do a quick sniff test on security precautions and uses (completely and total contrived example.
var url = window.location.href;
if (url.indexOf("#")>=0) {
var uri = window.location.href.split("#")[1];
var elem = eval('document.getElementById("'+uri+'");');
console.log(elem);
}