JavaScript Beyond jQuery

Slide 1

Slide 1 text

JavaScript Beyond $(document).ready()

Slide 2

Slide 2 text

speakerdeck.com/ evansolomon/ javascript-beyond-jquery

Slide 3

Slide 3 text

var name = 'Evan Solomon', twitter = name .replace(/ /g, '') .replace(/^/, '@') .toLowerCase();

Slide 4

Slide 4 text

JavaScript != jQuery

Slide 5

Slide 5 text

1.Scope 2.Functions 3.Context 4.Inheritance 5.Control Flow

Slide 6

Slide 6 text

1. Scope

Slide 7

Slide 7 text

Always use the var keyword in declarations

Slide 8

Slide 8 text

var place = 'Milwaukee'; console.log(place); // 'Milwaukee'

Slide 9

Slide 9 text

Variables are implicitly global

Slide 10

Slide 10 text

var place = 'Milwaukee'; place === window.place; // true place === this.place; // true

Slide 11

Slide 11 text

Variable access flows down

Slide 12

Slide 12 text

var place = 'Milwaukee'; function where() { return place; } where(); // 'Milwaukee'

Slide 13

Slide 13 text

2. Functions

Slide 14

Slide 14 text

Functions are closures

Slide 15

Slide 15 text

function quiet() { var whisper = 'Boom!'; } console.log(whisper); // Undefined

Slide 16

Slide 16 text

But don’t forget var

Slide 17

Slide 17 text

function noisy() { oops = 'Boom!'; } console.log(oops); // 'Boom!'

Slide 18

Slide 18 text

Functions can be anonymous

Slide 19

Slide 19 text

jQuery(function() { return 'Ready!'; });

Slide 20

Slide 20 text

jQuery(function($) { $('.header').hide(); }); // We can use the $ to access jQuery in WordPress

Slide 21

Slide 21 text

Functions can execute themselves

Slide 22

Slide 22 text

(function() { return 'See?'; })(); // 'See?'

Slide 23

Slide 23 text

3. Context

Slide 24

Slide 24 text

Everything is an object Well, almost everything

Slide 25

Slide 25 text

var talk = function() { console.log('Hello!'); }; talk instanceof Object // true

Slide 26

Slide 26 text

'Evan'.length // 4

Slide 27

Slide 27 text

var people = [ 'Evan', 'Alison' ]; people.join(', '); // 'Evan, Alison'

Slide 28

Slide 28 text

The this keyword gives context

Slide 29

Slide 29 text

this === window; // true

Slide 30

Slide 30 text

var context = 'global'; (function() { return this.context; })(); // 'global'

Slide 31

Slide 31 text

var context = 'global', stuff = { context: 'object', show: function() { return this.context; } }; stuff.show(); // object

Slide 32

Slide 32 text

var Thing = function() { this.context = 'instance'; this.show = function() { return this.context; }; }; thing = new Thing; thing.show(); // instance

Slide 33

Slide 33 text

Context is tricky

Slide 34

Slide 34 text

var context = 'global', stuff = { context: 'object', show: function() { return this.context; } }, ohnoes = stuff.show; ohnoes(); // global

Slide 35

Slide 35 text

Context is controllable

Slide 36

Slide 36 text

var context = 'the window', show = function() { return this.context; }; show.call(); // 'the window' show.call({context:'anything'}); // 'anything'

Slide 37

Slide 37 text

Context can be bound

Slide 38

Slide 38 text

var that = {context: 'safe'}, show = function() { return this.context; }, bound = function() { return show.apply(that); }; show(); // undefined bound(); // 'safe'

Slide 39

Slide 39 text

4. Inheritance

Slide 40

Slide 40 text

Inheritance comes from prototypes

Slide 41

Slide 41 text

var nums = [1, 2]; nums.slice === Array.prototype.slice // true nums.slice === nums.constructor.prototype.slice // true nums.constructor === Array // true

Slide 42

Slide 42 text

String.prototype.canadianize = function() { return this + ', eh!'; }; 'Hello'.canadianize(); // 'Hello, eh!'

Slide 43

Slide 43 text

var evan = new Person('Evan'), john = new Person('Alison'); Person.prototype.sayHi = function() { return 'I am ' + this.name; }; evan.sayHi(); // 'I am Evan' john.sayHi(); // 'I am Alison'

Slide 44

Slide 44 text

5. Control Flow

Slide 45

Slide 45 text

JavaScript is often asynchronous

Slide 46

Slide 46 text

$content = wp_remote_get($url); // $content is ready to use

Slide 47

Slide 47 text

var content = $.get(url); // content is *not* the body of the remote response

Slide 48

Slide 48 text

$.get(url, { success: function(content) { // Now you can use content } });

Slide 49

Slide 49 text

$(document).ready(function() { // Now the DOM is loaded });

Slide 50

Slide 50 text

$(function() { // Now the DOM is loaded }); https://github.com/jquery/ jquery/blob/2.0.2/src/ core.js#L162-L166

Slide 51

Slide 51 text

$('.thing').on('click', function() { // Now the element has been clicked });

Slide 52

Slide 52 text

var request = $.get(url); request.done(function(content) { // Now the content is available });

Slide 53

Slide 53 text

Thanks

Slide 54

Slide 54 text

Underscore is a utility library

Slide 55

Slide 55 text

var wordcamps = [ {place: 'Milwauke', when: 'today'}, {place: 'San Francisco', when: 'later'}, ]; _.pluck(wordcamps, 'when'); // ['today', 'later']

Slide 56

Slide 56 text

var people = [ 'Evan', 'John', 'Alison', 'John' ]; _.uniq(people); // ['Evan', 'John', 'Alison']

Slide 57

Slide 57 text

var go = function() { return 'Be patient'; }, notYet = _.after(2, go); notYet(); // Undefined notYet(); // 'Be patient'

Slide 58

Slide 58 text

Underscore has great docs underscorejs.org

Slide 59

Slide 59 text

CoffeeScript compiles to JavaScript

Slide 60

Slide 60 text

var notYet = _.after(2, function() { return 'Be patient'; } ); notYet(); // Undefined notYet(); // 'Be patient'

Slide 61

Slide 61 text

notYet = _.after 2, -> 'Be patient' notYet() // Undefined notYet() // 'Be patient'

Slide 62

Slide 62 text

easyObject = key: 'val' more: 'No problem' var easyObject; easyObject = { key: 'val', more: 'No problem' };

Slide 63

Slide 63 text

implicitReturns = -> 'This is fun' implicitReturns() // 'This is fun'

Slide 64

Slide 64 text

coffeescript.org & codeschool.com

Slide 65

Slide 65 text

Node.js is JavaScript on the server

Slide 66

Slide 66 text

var fs = require('fs'); fs.readFile('./stuff.txt', function(err, data) { console.log(data.toString()); });

Slide 67

Slide 67 text

var http = require('http'), server = function (req, res) { res.end('Hello World!\n'); }; http.createServer(server) .listen(8080);