WordCamp Dayton 2016

1. JavaScript
Beyond
jQuery

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

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

4. Why Would you Use jQuery?
▸Browser Support

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

6. Why Would you Use jQuery?
▸It already comes packages in
WordPress

7. USING
VANILLA
JS
Is Generally a lot Easier Than You Think

8. Events

9. Classes

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

11. 2.
JAVASCRIPT
OBJECTS
The Building Blocks
of the Language.

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

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

14. Function
Definitions

15. 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.

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

17. FUNCTION
OBJECT
PROPERTIES
& METHODS

18. 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.

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

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

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

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

23. Practical IFFE Example

25. 5.
MANIPULATING
DATA
The Javascript Array
Object Methods

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

27. Array.prototype.map( );

28. Array.prototype.map( );

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

30. Array.prototype.filter( );

31. Array.prototype.filter( );

32. Array.prototype.filter( );

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.

34. Array.prototype.reduce( );

35. Array.prototype.reduce( );

36. Array.prototype.reduce( );

37. Array.prototype.reduce( );

38. 6.
PROTOTYPAL
INHERITANCE
Javascript Objects
inheriting from other
Objects

39. 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.

41. 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.

42. Prototypal Inheritance

43. Prototypal Inheritance

44. Prototypal Inheritance (continued)

45. Factory Function

46. Factory Function (Continued)

47. Factory Function (Continued)

48. Prototypal Inheritance (Continued)

49. Composition vs Inheritance

50. 7.
REVEALING
MODULE
PATTERN
Another Way to Build
Objects

51. Function + Closure = Revealing Module
Pattern

52. Revealing Module Pattern

53. 8.
FUNCTION
COMPOSITION
Functions As
Ingredients

54. FUNCTION
COMPOSITION

55. FUNCTION
COMPOSITION

56. FUNCTION
COMPOSITION

57. FUNCTION
COMPOSITION

58. FUNCTION
COMPOSITION

59. Resources

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

61. Resources
http://youmightnotneedjquery.com/

62. Develop With WP

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