Most developers have some experience with jQuery, but few of them understand the principles of Javascript and how to write and debug Javascript code. This presentation will cover best practices for writing object oriented Javascript, benchmarking, and debugging.

1. Javascript
~ Beyond jQuery() ~

3. Project: Content.js

4. Variables
// string variable
var title = "Content.js Yo!";
// jQuery object
var $body = $("body");
// Global variable
window.$body = $body;
// Initialize an object
var contentSettings = {
titleEl: 'h1',
sectionNameEl: 'h3',
color: "blue"
};
// Initialize an array
var sectionNames = ["Section 1", "Section 2"];
var sectionContent = ["Section 1 content...", "Section 2 content..."];

5. Functions
// Standard function
function init(title) {
jQuery("body").append(title);
}
// Anonymous function
(function(title) {
jQuery("body").append(title);
})();

6. <script>
// string variable
var title = "Content.js Yo!";
// jQuery object
var $body = $("body");
// Global variable
window.$body = $body;
// Initialize an object
var contentSettings = {
titleEl: 'h1',
sectionNameEl: 'h3',
color: "blue"
};
// Initialize an array
var sectionNames = ["Section 1", "Section 2"];
var sectionContent = ["Section 1 content...", "Section 2 content..."];
function init(title) {
jQuery("body").append(title);
};
init(title);
</script>
Scope
All of these variables and the
function are all in the global
namespace, which could cause
conflicts.

7. <script>
(function($) {
// string variable
var title = "Content.js Yo!";
// jQuery object
var $body = $("body");
// Global variable
window.$body = $body;
// Initialize an object
var contentSettings = {
titleEl: 'h1',
sectionNameEl: 'h3',
color: "blue"
};
// Initialize an array
var sectionNames = ["Section 1", "Section 2"];
var sectionContent = ["Section 1 content...", "Section 2 content..."];
wcpdxInit(title);
})(jQuery);
function wcpdxInit(title) {
window.$body.html(title);
}
</script>
Scope
So let's wrap our variables in an
anonymous function and
namespace our function.

8. var $tab = jQuery('.section');
$tab.fadeIn();
$tab.addClass('active');
////////
// vs
////////
jQuery('.section').fadeIn();
jQuery('.section').addClass('active');
Caching
Caching DOM queries can be
a great way to make your
code more performant, but
be careful!

9. Mind Break

10. <script>
(function($) {
// Initialize an object
var contentSettings = {
titleEl: 'h1',
sectionNameEl: 'h3',
color: "blue",
title: 'Content.js Yo!',
sectionNames: ["Section 1", "Section 2"],
sectionContent: ["Section 1 content...", "Section 2 content..."]
};
wcpdxInit(contentSettings, $);
})(jQuery);
function wcpdxInit(settings, $) {
var $heading = $(document.createElement(settings.titleEl));
var $body = $('body');
var i = 0;
// Set the title
$body.html($heading.html(settings.title));
// loop through all of our content
for(i = -1; i < settings.sectionNames.length; i ++) {
// Create our DOM elements
var $sectionHeading = $(document.createElement(settings.sectionNameEl));
var $sectionContent = $(document.createElement('p')).css('color', settings.color);
$sectionHeading.html(settings.sectionNames[i]);
$body.append($sectionHeading);
$body.append($sectionContent.html(settings.sectionContent[i]));
}
}
</script>
Final

11. Name
That
Browser!

17. Debugging

18. The Console
Use "console.log( ... )" to print things from your script to
the browser console.

19. Breakpoints
Add a break point to the Source in the browser console,
or add "debugger;" to your script.

20. Minified Files

21. Resources:
api.jquery.com
jsperf.com
developer.mozilla.org
codecademy.com
caniuse.com

22. Tanner Moushey
@tannermoushey
iwitnessdesign.com
tannermoushey.com