Archive for the 'JavaScript' Category

JavaScript: Serialize JSON object to a query string

JavaScript (of course nested objects would require more efforts)

var data = { one: 'first', two: 'second' };
var result = '';
for(key in data) {
    result += key + '=' + data[key] + '&';
}
result = result.slice(0, result.length - 1); 
console.log(result);

jQuery (api.jquery.com/jQuery.param/)

var data = { one: 'first', two: 'second' };
var result = $.param(data);
console.log(result);

YUI (yuilibrary.com/yui/docs/api/classes/QueryString.html#method_stringify)

var data = { one: 'first', two: 'second' };
var result = Y.QueryString.stringify(data);
console.log(result);

jQuery – YUI 3 Rosetta Stone

This post is basically to point out a great resource on how to make a smooth transition between jQuery and YUI.

jQuery – YUI 3 Rosetta Stone shows each framework code side by side with some comments where necessary. All major components including events, selectors, animations & effects, Ajax are covered.

Kudos to Carlos, Ryan, and Paul!

Top 5 JavaScript Interview Questions

So here we go with the top 5 of JavaScript interview questions based on my experience several months back.

Question #1 is [of course] to explain what closure is. This is almost like a must have question even for a pure back end developer position (though PHP has closures too). It’s really important not just explain what it is (and mention scope) but also be able to give an example.

Question #2 is to talk about OOP in JavaScript. Of course the main thing is about prototype but often it’s not enough. For example additional questions could be about inheritance or private class members.

Question #3 is about cross-domain AJAX calls. The keyword here is “jsonp” but also it is actually a good idea to understand how it works and be prepared to explain the details or even talk about alternatives.

Question #4 is to cover JavaScript debugging and optimization. Especially for debugging besides alert() and console.log() it is really cool to bring up Firebug and its ability to debug with breakpoints (!). Optimization bullet points could include minifying, utilizing CDNs, loading order, caching, local storage etc.

Finally Question #5 is to discuss JavaScript tools, libraries, and frameworks. Backbone.js is obviously a super hot framework but really anything matters. Besides popular frameworks like YUI, jQuery, extJS there are also jQuery UI, Require.js, Underscore.js, Minify.js or even node.js and Jasmine. It is always a bonus point if at least one library is brought to the table.

Bonus recommendation is to stay cautious so that an interviewer would not be able to use a white board trick like below when functions are declared but are NOT called.

// what is the value of a? (it is not 1!)
var a = function () { return 1; }
console.log(a);
 
// what is the value of b? (it is 1!)
b = 1;
function test() {
  b = b + 1;
}
console.log(b);

Other than that it is always good to remember “classic” JavaScript (e.g. getDocumentById or innerHTML and so on).

jQuery Dropdown Check List

The Dropdown Check List is extremely nice and stable jQuery widget developed by Adrian Tosca. It transforms a regular select HTML element into a dropdown checkbox list.

jQuery Dropdown Check List

Check out the demo page or go immediately to the download one.