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

Why Would you Use jQuery? ▸Less Typing. ▸Easier to Learn

Why Would you Use jQuery? ▸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

Similar to JavaScript Beyond jQuery

Recently uploaded

JavaScript Beyond jQuery

Editor's Notes