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