Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Beyond jQuery
Search
Evan Solomon
June 08, 2013
Technology
1
530
JavaScript Beyond jQuery
WordCamp Milwaukee
Evan Solomon
June 08, 2013
Tweet
Share
More Decks by Evan Solomon
See All by Evan Solomon
Demystifying the Black Box of WordPress Core
evansolomon
1
3.4k
WordCamp Las Vegas -- Make stuff that people want
evansolomon
2
2.9k
You Have No Idea What Your Users Want
evansolomon
1
520
You Don't Know People
evansolomon
2
850
Other Decks in Technology
See All in Technology
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.9k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
7
4.2k
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
390
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
140
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
120
Kubernetes self-healing of your workload
hwchiu
0
310
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
130
事業開発におけるDify活用事例
kentarofujii
4
1.2k
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
220
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
0
1.1k
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
260
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
550
BBQ
matthewcrist
89
9.8k
How GitHub (no longer) Works
holman
315
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The Cult of Friendly URLs
andyhume
79
6.6k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Balancing Empowerment & Direction
lara
5
700
Transcript
JavaScript Beyond $(document).ready()
speakerdeck.com/ evansolomon/ javascript-beyond-jquery
var name = 'Evan Solomon', twitter = name .replace(/ /g,
'') .replace(/^/, '@') .toLowerCase();
JavaScript != jQuery
1.Scope 2.Functions 3.Context 4.Inheritance 5.Control Flow
1. Scope
Always use the var keyword in declarations
var place = 'Milwaukee'; console.log(place); // 'Milwaukee'
Variables are implicitly global
var place = 'Milwaukee'; place === window.place; // true place
=== this.place; // true
Variable access flows down
var place = 'Milwaukee'; function where() { return place; }
where(); // 'Milwaukee'
2. Functions
Functions are closures
function quiet() { var whisper = 'Boom!'; } console.log(whisper); //
Undefined
But don’t forget var
function noisy() { oops = 'Boom!'; } console.log(oops); // 'Boom!'
Functions can be anonymous
jQuery(function() { return 'Ready!'; });
jQuery(function($) { $('.header').hide(); }); // We can use the $
to access jQuery in WordPress
Functions can execute themselves
(function() { return 'See?'; })(); // 'See?'
3. Context
Everything is an object Well, almost everything
var talk = function() { console.log('Hello!'); }; talk instanceof Object
// true
'Evan'.length // 4
var people = [ 'Evan', 'Alison' ]; people.join(', '); //
'Evan, Alison'
The this keyword gives context
this === window; // true
var context = 'global'; (function() { return this.context; })(); //
'global'
var context = 'global', stuff = { context: 'object', show:
function() { return this.context; } }; stuff.show(); // object
var Thing = function() { this.context = 'instance'; this.show =
function() { return this.context; }; }; thing = new Thing; thing.show(); // instance
Context is tricky
var context = 'global', stuff = { context: 'object', show:
function() { return this.context; } }, ohnoes = stuff.show; ohnoes(); // global
Context is controllable
var context = 'the window', show = function() { return
this.context; }; show.call(); // 'the window' show.call({context:'anything'}); // 'anything'
Context can be bound
var that = {context: 'safe'}, show = function() { return
this.context; }, bound = function() { return show.apply(that); }; show(); // undefined bound(); // 'safe'
4. Inheritance
Inheritance comes from prototypes
var nums = [1, 2]; nums.slice === Array.prototype.slice // true
nums.slice === nums.constructor.prototype.slice // true nums.constructor === Array // true
String.prototype.canadianize = function() { return this + ', eh!'; };
'Hello'.canadianize(); // 'Hello, eh!'
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'
5. Control Flow
JavaScript is often asynchronous
$content = wp_remote_get($url); // $content is ready to use
var content = $.get(url); // content is *not* the body
of the remote response
$.get(url, { success: function(content) { // Now you can use
content } });
$(document).ready(function() { // Now the DOM is loaded });
$(function() { // Now the DOM is loaded }); https://github.com/jquery/
jquery/blob/2.0.2/src/ core.js#L162-L166
$('.thing').on('click', function() { // Now the element has been clicked
});
var request = $.get(url); request.done(function(content) { // Now the content
is available });
Thanks
Underscore is a utility library
var wordcamps = [ {place: 'Milwauke', when: 'today'}, {place: 'San
Francisco', when: 'later'}, ]; _.pluck(wordcamps, 'when'); // ['today', 'later']
var people = [ 'Evan', 'John', 'Alison', 'John' ]; _.uniq(people);
// ['Evan', 'John', 'Alison']
var go = function() { return 'Be patient'; }, notYet
= _.after(2, go); notYet(); // Undefined notYet(); // 'Be patient'
Underscore has great docs underscorejs.org
CoffeeScript compiles to JavaScript
var notYet = _.after(2, function() { return 'Be patient'; }
); notYet(); // Undefined notYet(); // 'Be patient'
notYet = _.after 2, -> 'Be patient' notYet() // Undefined
notYet() // 'Be patient'
easyObject = key: 'val' more: 'No problem' var easyObject; easyObject
= { key: 'val', more: 'No problem' };
implicitReturns = -> 'This is fun' implicitReturns() // 'This is
fun'
coffeescript.org & codeschool.com
Node.js is JavaScript on the server
var fs = require('fs'); fs.readFile('./stuff.txt', function(err, data) { console.log(data.toString()); });
var http = require('http'), server = function (req, res) {
res.end('Hello World!\n'); }; http.createServer(server) .listen(8080);