Moving Beyond jQuery and into JavaScript

aaron.jorb.in
@aaronjorbin

Javscript: A history

Mocha

jScript, JavaScript

ECMAScript

Basics

Variables
var people = 1526006;
Integers

Variables
var land = 135.1;
Float

Variables
var nickname = 'Philly';
String

Variables
var division= function(a,b){return a / b; };
Functions

Variables
var teams = ['Eagles', '76ers', 'Phillies', 'Flyers'];
Arrays

Variables
var philidelphia ={
   'population' : people, 
   'squareMilesLand': Land,
   'nickname': nickname,
   'teams': teams};
Objects

var density = division( philidelphia.population, philidelphia.squareMilesLand);

density === 11295.38119911177 // true

Now What?

More then objects have methods

var nickname = 'Philly';
nickname.slice(2,6);
illy

var density = 11295.38119911177;
density.toFixed(2);
11295.38

Variables Cascade down

var dogfighting = 'bad';
function vick(){
    alert(dogfighting); // bad
}

var passing = 'decent';
function vick(){
    passing = 'good';
}

vick(); // passing now is good

function vick(){
    var passing = 'good';
}
alert(passing); // Passing isn't defined

Anonomous Self Executing Functions

(function($){
// Fun Stuff Goes Here    
})(jQuery);

WordPress JavaScript API

Current Behavior: esc exits

Desired Behavior: esc saves

Step 1: Get WordPress to output your script

class Jorbin_DFV{
    function __construct(){
        add_action( 'admin_enqueue_scripts', array( $this , 'add_script' ) );
    }

    function add_script($hook){
        if ('post.php' !== $hook && 'post-new.php' !== $hook)
            return;

        wp_enqueue_script( 'distractionFreeVim', plugins_url('dfv.js', __FILE__), array( 'wp-fullscreen' , ));
    }

}

new Jorbin_DFV();

Step 2: encapsilate our code

(function($){
// Fun Stuff Goes Here    
})(jQuery);

$(document).bind( 'wp_CloseOnEscape', function(e, data){ 
    data.cb = function(e) { 
        fullscreen.bounder( 'showToolbar', 'hideToolbar', 10000, e );  
        fullscreen.save();
    };   
});

Pitfalls

Race Conditions

Scope

Browser Differences

Resources

Mozilla Developer Network.

JavaScript Number Example: Using the Number object to assign values to numeric variables

Elequent Javascript

Free Book by Marijn Haverbeke

Design Patterns in JavaScript

Examples from "Head First Design Patterns" in JavaScript

Javscript unit testing

WordCamp San Francisco 2011

Any Questions?

jorb.in/jsintro
aaron.jorb.in
Aaron Jorbin