Page 1
JavaScript BeyondjQuery
Page 2
JavaScript BeyondjQuery
★ Traversing The DOM★ Element Objects★ Functions★ Native Objects★ Closures★ Manipulating Data★ Prototypal Inheritance★ Revealing Modules★ Function Composition
Page 3
1.TRAVERSING THE DOM
First Let's Start at the Beginning?
Page 4
Why Would you Use jQuery?
▸ Browser Support
Page 5
Why Would you Use jQuery?
▸ Less Typing.▸ Easier to Learn
Page 6
Why Would you Use jQuery?
▸ It already comes packages in WordPress
Page 7
USING VANILLAJSIs Generally a lot Easier Than You Think
Page 10
DOCUMENT OBJECTMODELLet’s Take a Closer Look
Page 11
THE ELEMENT INTERFACE
The Element Interface represents an Object of a Document.
Page 12
2.THEJAVASCRIPTFUNCTION
It’s Where Lots of the Magic Happens
Page 13
Function Definitions
Page 14
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.
Page 15
BUTMOSTOFALL
Every Function in Javascript is a Function Object
Page 16
FUNCTIONOBJECTPROPERTIES & METHODS
Page 17
3.JAVASCRIPTOBJECTS
The Building Blocks of the Language.
Page 18
Primary Javascript Objects
★ Function★ String★ Array★ Number★ Boolean★ TypeError
Page 19
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.
Page 20
Javascript Function have access to variable defined above their internal scope.
Page 21
Javascript Function can also override external variables with their own version with the same name.
Page 22
But Variables defined inside a Javascript Function are not accessible from outside its scope.
Page 23
But this highlights one of the top use cases for Closures in Javascript: Immediately-Invoked Function Expression
Page 24
Practical IFFE Example
Page 26
5.MANIPULATINGDATA
The Javascript Array Object Methods
Page 27
Array.prototype.map( );
The map() method creates a new array with the results of calling a provided function on every element in this array.
Page 28
Array.prototype.map( );
Page 29
Array.prototype.map( );
Page 30
Array.prototype.filter( );
The filter() method creates a new array with values that pass the test implemented by the function provided.
Page 31
Array.prototype.filter( );
Page 32
Array.prototype.filter( );
Page 33
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.
Page 34
Array.prototype.reduce( );
Page 35
Array.prototype.reduce( );
Page 36
Array.prototype.reduce( );
Page 37
6.PROTOTYPALINHERITANCE
Javascript Objects inheriting from other
Objects
Page 38
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.
Page 39
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.
Page 41
Classical Inheritance
Page 42
Classical Inheritance (continued)
Page 44
Factory Function (Continued)
Page 45
Factory Function (Continued)
Page 46
Classical Inheritance (Continued)
Page 47
Composition vs Inheritance
Page 48
7.REVEALINGMODULE PATTERN
Another Way to Build Objects
Page 49
Function + Closure = Revealing Module Pattern
Page 50
Revealing Module Pattern
Page 51
8.FUNCTIONCOMPOSITION
Functions As Ingredients
Page 52
FUNCTIONCOMPOSITION
Page 53
FUNCTIONCOMPOSITION
Page 54
FUNCTIONCOMPOSITION
Page 55
FUNCTIONCOMPOSITION
Page 56
FUNCTIONCOMPOSITION
Page 58
Resources
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Page 59
Resources
http://youmightnotneedjquery.com/
Page 61
Hello my Name is Bobby Bryant. I am A web developer at 10up
twitter: /mrbobbybryantyoutube: /developwithwpgithub: /mrbobbybryant