A company named Meebo was looking for a "Javascript Ninja".
Being the Javascript Ninja Master that I am (and a humble one , too), I was sought out by a headhunter to interview for the role. I checked them out and thought they were doing some cool DHTML things, so I agreed to interview with them.
Meebo gives a set of "puzzler" questions to candidates to test their Javascript acumen before speaking with them.
A couple of the questions were pretty good ones that made me go "hmmmmmm...?".
I believe I answered them as close to correctly as possible. The interview went well but it became apparent that Meebo was really interested in a Full-Time Employee (FTE) rather than a contractor, which is what I was looking for at the time (due to the whole circumnavigation thing).
Anyway, the puzzler questions, and my answers are presented here.
My apologies to Meebo if they have to come up with fresh ones due to this posting!
Shannon Norrell
Puzzlers
(1.) When does div.setAttribute(”###”) not equal div.###?
Having never found much use for setAttribute() - I always use direct assignment (div.foo=###) - I put together a "test harness" of sorts to test the behavior of setAttribute() so I could answer this question intelligently. Here is the code:
//////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#sampleDiv, #sampleDiv2 { background-color: #FF0000; height: 40px; }
button { background-color: #CCCCCC;}
.comparison { float:left; border:solid 1px green; width:48%; top:0px; margin:5px;}
</style>
<script type="text/javascript">
function doSetup() {
var div = document.getElementById("sampleDiv");
var aStr = "sampleDiv<br/>DIV.Property= example DIV <br/>";
div.innerHTML = aStr;
div.arbitraryProperty="Hello";
div.arbitraryFunction= function() { alert('This is a test'); }
div.onclick = function() { alert('sampleDiv onClick'); }
div.style.backgroundColor='#00FF00';
var div2 = document.getElementById("sampleDiv2");
var aStr = "sampleDiv2<br/>DIV.SetAttribute() example DIV <br/>";
div2.innerHTML = aStr;
if ( navigator.userAgent.toLowerCase().indexOf("firefox") != -1 ) {
div2.createAttribute('arbitraryProperty');
div2.createAttribute('arbitraryFunction');
div2.createAttribute('onclick');
div2.style.createAttribute('backgroundColor');
}
div2.setAttribute('arbitraryProperty',"Hello");
div2.setAttribute('arbitraryFunction', function() { alert('This is a test'); });
div2.setAttribute('onclick', function() { alert('sampleDiv2 onClick'); });
div2.style.setAttribute('backgroundColor','#00FF00');
}
function doEnumeration( anHTMLElement, anOutputContainer ) {
var div = document.getElementById( anHTMLElement );
var aStr = "Enumerated Properties of " + anHTMLElement + "<br/>";
for (property in div) {
aStr += anHTMLElement + '.' + property + ' = '+ div[property] + '<br/>';
}
document.getElementById( anOutputContainer ).innerHTML = aStr;
}
function showDiv2Stuff() {
var div = document.getElementById('sampleDiv2');
alert(div.arbitraryProperty);
}
</script>
</head>
<body onload="doSetup()">
<div class="comparison">
<button onclick="doEnumeration('sampleDiv', 'valuesProperty')">Click to Enumerate</button>
<div id="sampleDiv"></div>
<div id="valuesProperty">Property Values</div>
</div>
<div class="comparison">
<button onclick="doEnumeration('sampleDiv2', 'valuesSetAttribute')">Click to Enumerate</button>
<div id="sampleDiv2"></div>
<div id="valuesSetAttribute">Property Values</div>
</div>
<button onclick="showDiv2Stuff()">
show sampleDiv2 stuff</div>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////
I tested in IE7 and in Firefox 2 and my findings were that using setAttribute() does not work at all as expected in Firefox (even after adding conditional code to use createAttribute() before calling setAttribute() for FF).
So the short answer for this question would be:
div.setAttribute(”###”) does not equal div.### when running under Firefox
It is also interesting to note that arbitrary property assignments appear at the top of the DOM stack for Firefox and at the bottom in IE. Not sure what the implication of this is, as the assignment values resolve identically for either browser.
(2.) What’s the difference between these two statements:
a. var x = 3;
b. x = 3;
a. has local scope, b. has global scope
(3.) What’s the difference between:
a. !!(obj1 && obj2)
b. (obj1 && obj2)
a. will always evaluate to true (why you would have this line of code I can't imagine)
(4.) Write a one-line piece of JavaScript code that concatenates all strings passed into a function:
function concatenate(/*any number of strings*/) {
var string = ""; for (var i=0; i < arguments.length; i++) { string+=arguments[i]; };return string;}
Note - if there were a way to cast the Arguments object into a String object, one could then use .join("")
(5.) What do these two examples have in common?
Example 1:
var obj = document.getElementById(’adiv’);
document.getElementById(’adiv’).ptr = obj;
Example 2:
function assignClick() {
var el = document.createElement(’div’);
function handleClick() {
el.innerHTML = ‘clicked!’;
}
el.attachEvent(”onclick”, handleClick);
}
They both append values to the DOM
They both have potential for leaking memory
They both create closures
(actually Example 2 is a true closure - if it were this.innerHTML = 'clicked' it would be better)
(Example 1 might be called a quasi closure, although I have never seen it named as such)
Shannon Norrell 08/17/2007
Tuesday, October 23, 2007
Subscribe to:
Posts (Atom)