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
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 (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
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: /mrbobbybryantyoutube: /developwithwpgithub: /mrbobbybryant