jQuery Beyond JavaScript - 2016 WordCamp DaytonWhy Would you Use jQuery? It already comes packages in WordPress. USING VANILLA JS Is Generally a lot Easier Than You Think. Events.

JavaScript BeyondjQuery

JavaScript BeyondjQuery

★ 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

Why Would you Use jQuery?

▸ Less Typing.▸ Easier to Learn

Why Would you Use jQuery?

▸ It already comes packages in WordPress

USING VANILLAJSIs Generally a lot Easier Than You Think

Events

Classes

DOCUMENT OBJECTMODELLet’s Take a Closer Look

THE ELEMENT INTERFACE

The Element Interface represents an Object of a Document.

2.THEJAVASCRIPTFUNCTION

It’s Where Lots of the Magic Happens

Function Definitions

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.

BUTMOSTOFALL

Every Function in Javascript is a Function Object

FUNCTIONOBJECTPROPERTIES & METHODS

3.JAVASCRIPTOBJECTS

The Building Blocks of the Language.

Primary Javascript Objects

★ Function★ String★ Array★ Number★ Boolean★ TypeError

4.JAVASCRIPTCLOSURES

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

Practical IFFE Example

5.MANIPULATINGDATA

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.map( );

Array.prototype.map( );

Array.prototype.filter( );

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

Array.prototype.filter( );

Array.prototype.filter( );

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.

Array.prototype.reduce( );

Array.prototype.reduce( );

Array.prototype.reduce( );

6.PROTOTYPALINHERITANCE

Javascript Objects inheriting from other

Objects

Class Based Inheritance

In a class based system you can define a Class, which will act asa 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.

Classical Inheritance

Classical Inheritance (continued)

Factory Function

Factory Function (Continued)

Factory Function (Continued)

Classical Inheritance (Continued)

Composition vs Inheritance

7.REVEALINGMODULE PATTERN

Another Way to Build Objects

Function + Closure = Revealing Module Pattern

Revealing Module Pattern

8.FUNCTIONCOMPOSITION

Functions As Ingredients

FUNCTIONCOMPOSITION

FUNCTIONCOMPOSITION

FUNCTIONCOMPOSITION

FUNCTIONCOMPOSITION

FUNCTIONCOMPOSITION

Resources

Resources

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

Resources

http://youmightnotneedjquery.com/

Develop With WP

Hello my Name is Bobby Bryant. I am A web developer at 10up

twitter: /mrbobbybryantyoutube: /developwithwpgithub: /mrbobbybryant