JavaScript Beyond jQuery

JavaScript
Beyond
jQuery
★ Traversing The DOM
★ Element Objects
★ Functions
★ Native Objects
★ Closures
★ Manipulating Data
★ Prototypal Inheritance
★ Revealing Modules
★ Function Composition

1.
TRAVERSING
THE
DOM
First Let's Start at the
Beginning?

Why Would you Use jQuery?
▸Browser Support

▸Less Typing.
▸Easier to Learn

▸It already comes packages in
WordPress

USING
VANILLA
JS
Is Generally a lot Easier Than You Think

THE
ELEMENT
INTERFACE
The Element Interface represents an Object of a
Document.

2.
JAVASCRIPT
OBJECTS
The Building Blocks
of the Language.

Primary Javascript Objects
★ Function
★ String
★ Array
★ Number
★ Boolean
★ TypeError

3.
THE
JAVASCRIPT
FUNCTION
It’s Where Lots of the
Magic Happens

JavaScript Functions are First
Class Citizens
★ Functions can be assigned to variables and
Passed Around.
★ Functions can accept other Functions as
arguments.
★ Functions can return other functions.

BUT
MOST
OF
ALL
Every Function
in Javascript is
a Function Object

FUNCTION
OBJECT
PROPERTIES
& METHODS

4.
JAVASCRIPT
CLOSURES
A Function that can be
stored as a variable, and
that has the special ability
to access other variables
local to the scope it was
created in.

Javascript Function have access to variable defined above
their internal scope.

Javascript Function can also override external variables with
their own version with the same name.

But Variables defined inside a Javascript Function are not
accessible from outside its scope.

But this highlights one of the top use cases for Closures in
Javascript: Immediately-Invoked Function Expression

5.
MANIPULATING
DATA
The Javascript Array
Object Methods

Array.prototype.map( );
The map() method creates a new array with
the results of calling a provided function on
every element in this array.

Array.prototype.filter( );
The filter() method creates a new array
with values that pass the test implemented by
the function provided.

Array.prototype.reduce( );
The reduce() method applies a function
against an accumulator and each value of an
array (from left to right) to reduce it to a single
value.

6.
PROTOTYPAL
INHERITANCE
Javascript Objects
inheriting from other
Objects

Class Based Inheritance
In a class based system you can define a Class, which will act as
a blueprint for each new Object.
Classes can inherit from other classes to create a hierarchy.
When you create a new object from the class it is considered an
Instance of that class.

Prototype Based Inheritance
Prototype Languages such as Javascript to not have this
distinction.
Languages like Javascript simply have Objects, which can inherit
from other objects.
Javascript’s Prototypal Inheritance is so hard to understand,
because it gives us this new keyword, and tries to mimic class
based inheritances.

Prototypal Inheritance (continued)

Prototypal Inheritance (Continued)

7.
REVEALING
MODULE
PATTERN
Another Way to Build
Objects

Function + Closure = Revealing Module
Pattern

8.
FUNCTION
COMPOSITION
Functions As
Ingredients

Resources
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Resources
http://youmightnotneedjquery.com/

Hello my Name is Bobby Bryant. I am A
web developer at 10up
twitter: /mrbobbybryant
youtube: /developwithwp
github: /mrbobbybryant

JavaScript Beyond jQuery

More Related Content

What's hot (19)

Similar to JavaScript Beyond jQuery (20)

Recently uploaded (20)

JavaScript Beyond jQuery

Editor's Notes