Javascript
~ Beyond jQuery() ~
Project: Content.js
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..."];
Functions
// Standard function
function init(title) {
jQuery("body").append(title);
}
// Anonymous function
(function(title) {
jQuery("body").append(title);
})();
Scope
<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>
All of these variables and the function are all in the global namespace, which could cause conflicts.
Scope
<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>
So let's wrap our variables in an anonymous function and namespace our function.
Caching
Caching DOM queries can be a great way to make your code more performant, but be careful!
var $tab = jQuery('.section');
$tab.fadeIn();
$tab.addClass('active');
////////
// vs
////////
jQuery('.section').fadeIn();
jQuery('.section').addClass('active');
Mind Break
Final
<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>
Name
That
Browser!
Debugging
The Console
Use "console.log( ... )" to print things from your script to the browser console.
Breakpoints
Add a break point to the Source in the browser console, or add "debugger;" to your script.
Minified Files
Resources:
- api.jquery.com
- jsperf.com
- developer.mozilla.org
- codecademy.com
- caniuse.com
Tanner Moushey
@tannermoushey
iwitnessdesign.com
tannermoushey.com
Javascript - Beyond jQuery
By Tanner Moushey
Javascript - Beyond jQuery
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.
- 374