Advanced JavaScript is Fun

—OR—

JavaScript and You: Programming the Interwebs

Daryl Koopersmith

@darylkoop

darylkoop.com

hello at darylkoop.com

Adding your own scripts to your WordPress plugin

wp_enqueue_script( $script_name, $source, $dependencies, $version, $in_footer );

For example…

wp_enqueue_script( 'my-awesome-js', 'my-awesome-js.js', array('jquery'), 2.0, true );

Adding jQuery to your WordPress plugin

wp_enqueue_script('jquery');

Use wp_enqueue_script wherever possible.

Many plugins use jQuery, and you don’t want to include it twice!

*If you want to use jQuery from a CDN, go for it! However, don’t just stick it in a script element. Instead, unregister the WP jQuery script and re-register it with the CDN url.

Declaring functions

function myFn() { return true; }
var fn = function() { return true; };

Functions are objects

Let this one sink in…

var add = function( a, b ) { return a + b; };

add( 5, 3 ); // 8 

Functions create a closure

var fn = function() {
		var a = 'stuck inside the closure.';
	};

a == 'stuck inside the closure.' // Error! a is undefined.

The arguments variable

var add = function() {
		var result = 0;
	
		for ( var i = 0, j = arguments.length; i < j; i++ )
			result += arguments[i];
	
		return result;
	};

add( 1, 2, 3, 4, 5 ); // 15

arguments is not an array

It is array-like, and has a handful of other properties.

var fn = function() {
		return {
			length: arguments.length,
			callee: arguments.callee
		};
	};

fn( 1, 2, 3 );
//	{
//		length: 3,
//		callee: fn
//	}

But we can turn arguments into an array:

var fn = function() {
		var argsArray = Array.prototype.slice( arguments, 0 );
	};

Be careful with this. No, really.

The this keyword represents the context a function was called in.

Be aware of what’s calling your functions!

var dances = {
		move : function() { return "movin"; },
		shake : function() { return "shakin"; },
		groove : function() { return this.move() + " and " + this.shake(); }
	},
	doDance = function( danceFn ) {
		danceFn();
	};

dances.groove(); // movin and shakin
doDance( dances.groove ); // Error!
	// In this case, the context is the global context (the window)
	// instead of the dances object.

fn.call() and fn.apply()

Execute a function using a specific context.

fn.call( thisContext, arg1, arg2 );
fn.apply( thisContext, arguments );

Self-executing functions

Useful for wrapping blocks of code, libraries, etc.

(function(){
	// this is run immediately
})();

Fun trick:

Variables like window, document, and undefined usually can’t be minified.

(function( window, document, undefined ){
	// code code code
})( window, document );

…but now we can save some precious bytes:

(function( w, d, u ){
	// minified code
})( window, document );

Using the new keyword

function User( id ) {
	this.id = id;
};

var u = new User( 10 );
u.id // 10

The Fn.prototype object

Add methods to instances.

var MarbleJar = function() {
		this.marbleCount = 0;
	};

MarbleJar.prototype.addMarbles( n ) {
	this.marbleCount += n;
};

var myMarbles = new MarbleJar();
myMarbles.addMarbles( 20 );
myMarbles.marbleCount == 20 // true

// But what if we don't use new?

var moreMarbles = MarbleJar();
moreMarbles.marbleCount // moreMarbles is undefined
marbleCount == 20 // What? That's not supposed to happen...

Returning the same thing–new or not!

function Person( name ) {
	// Ensure that we return a new Person instance.
	if ( ! (this instanceof Person) )
        return new Person( name );
	
	this.name = name;
}

var p = Person( 'john' );
p.name == 'john' // true
name == undefined // true

Chaining

Returning this can go a long way.

function Fish() {}
Fish.prototype.glub = function() {
	alert('glub');
	return this; // this allows us to chain!
}

var nemo = Fish();
nemo.glub().glub().glub(); // glub glub glub

Putting it all together

function Nacin() {
	// Ensure that we return a new Nacin instance.
	if ( ! (this instanceof Nacin) )
        return new Nacin( name );
	this.slept = 0;
}
Nacin.prototype.sleep = function( hours ) {
	// If the user doesn't include hours, get the time slept.
	if ( typeof hours == "undefined" )
		return this.slept;
	// Otherwise, Nacin got some sleep!
	this.slept += hours;
	return this; // And make the result chainable
};

Putting it all together, continued

Nacin.prototype.commit = function() {
	alert("svn ci -m 'I guess this does something. Oh, what the heck.'");
	return this; // More chaining
};

var nacin = Nacin();

//----Thursday-------------------Friday---
nacin.sleep(2).commit().commit().sleep(2);

nacin.sleep(); // 4 -- nacin got four hours of sleep!

Any questions?

Daryl Koopersmith

@darylkoop

darylkoop.com

hello at darylkoop.com