JavaScript & WP API Workshop - WordCamp Orange County 2017

In this workshop we went over some JS 101, fundamentals of the DOM and Events and began to look at the WordPress REST API.

Transcript

1. Learning JavaScript Workshop Oh yes, JavaScript Is Important A Little Context
2. Learning JavaScript Workshop Workshop Preparation • https://github.com/zgordon/a-day-of-javascript • WIFI cove :: sandy.toes • Local install of WordPress 4.7+ (DesktopServer) • Code Editor (I am using Atom) • Node and NPM Installed (node –v and npm –v) Getting Started
3. Learning JavaScript Workshop Learning JavaScript Getting Started Welcome To with Zac Gordon @zgordon
4. Learning JavaScript Workshop Oh yes, JavaScript Is Important A Little Context
5. Learning JavaScript Workshop A Little Context JavaScript #1
6. Learning JavaScript Workshop A Little Context
7. Learning JavaScript Workshop A Little Context $72,500 glassdoor.com
8. Learning JavaScript Workshop WordPress Developers
 Live in a Bubble Getting Started
9. Learning JavaScript Workshop Most Developers
 Live in a Bubble Getting Started
10. Learning JavaScript Workshop API + JS = 
 Bigger Bubble Getting Started
11. Learning JavaScript Workshop What 
 Do You Need 
 to Know? Getting Started
12. Learning JavaScript Workshop Wait, Do You Know Programming? Getting Started
13. Learning JavaScript Workshop Getting Started 1. The DOM

14. Learning JavaScript Workshop Getting Started 1. The DOM
 2. Events

15. Learning JavaScript Workshop Getting Started 1. The DOM
 2. Events
 3. JSON & HTTP
16. Learning JavaScript Workshop 1. The DOM
 2. Events
 3. JSON & HTTP Getting Started
17. Learning JavaScript Workshop These 3 Things 
 Let us do a lot Getting Started
18. Learning JavaScript Workshop Use WP API
 
 
 Getting Started
19. Learning JavaScript Workshop Use WP API
 Build UI/Page w JS
 
 Getting Started
20. Learning JavaScript Workshop Use WP API
 Build UI/Page w JS
 Track User Actions
 Getting Started
21. Learning JavaScript Workshop Use WP API
 Build UI/Page w JS
 Track User Actions
 Do Whatever * Getting Started
22. Learning JavaScript Workshop Use WP API JSON/HTTP
 Build UI/Page w JS DOM
 Track User Actions Events
 Do Whatever JavaScript* Getting Started
23. Learning JavaScript Workshop 1. The DOM
 2. Events
 3. JSON & HTTP
 Getting Started * Development Tools * Programming Review
24. Learning JavaScript Workshop I Love JavaScript
 And have for a while For More from Zac
25. Learning JavaScript Workshop javascriptforwp.com javascriptforwp.com/show javascriptforwp.com/blog For More from Zac
26. Learning JavaScript Workshop Group Up
 It’s Quiz Time JavaScript Basics
27. Learning JavaScript Workshop What is a variable? Question 1 of 7 Question 1
28. Learning JavaScript Workshop What is an array? Question 2 of 7 Question 2
29. Learning JavaScript Workshop What is a function? Question 3 of 7 Question 3
30. Learning JavaScript Workshop What is an object? Question 4 of 7 Question 4
31. Learning JavaScript Workshop What is a loop? Question 5 of 7 Question 5
32. Learning JavaScript Workshop What is a conditional? Question 6 of 7 Question 6
33. Learning JavaScript Workshop How do you include JavaScript in HTML? Question 7 of 7 Question 7
34. A Day of JavaScript Variable A container for storing values JavaScript Basics Review var username = ‘zgordon’; let username = ‘zgordon’; const siteURL = ‘https://site.com’;
35. A Day of JavaScript Array A collection of values JavaScript Basics Review let postIds = [1,2,3,5]; let usernames =[ 'zgordon', '’admin' ];
36. A Day of JavaScript Functions Let us write, call and reuse blocks of code JavaScript Basics Review function getPosts() { let posts = apiMagic… // Will learn return posts; } getPosts();
37. A Day of JavaScript Function Parameters Can pass data into functions JavaScript Basics Review function getUser( userId ) { let user= apiMagic… // Will learn return user; } getUsers( 1 );
38. A Day of JavaScript Objects Container with properties (values) and methods (functions). JavaScript Basics Review let post = { id: 1, title: ‘Hello Object’, displayTitle: function() { console.log( this.title ); } } post.id; post.title; post.displayTitle();
39. A Day of JavaScript Loops Let us perform an action on a collection of items. JavaScript Basics Review var postIds = [ 1, 7, 14, 34, 88, 117 ]; for ( let i = 0, max = postIds.length; i < max; i++ ) { console.log( 'Display post #' + postIds[i] ); }
40. A Day of JavaScript For Of Loop Lets us loop through an array JavaScript Basics Review let postIds = [ 1, 2, 34, 55, 77 ]; for( let id of postIds ) { console.log( id ); }
41. A Day of JavaScript Conditional Statements Tests to determine what code to run JavaScript Basics Review var loggedIn = true; if ( true === loggedIn ) { console.log( 'Show dashboard' ); } else { console.log( 'Please login' ); }
42. A Day of JavaScript Including JavaScript JavaScript Basics Review <html> <head> </head> <body> <script src="index.js"></script> </body> </html>
43. Learning JavaScript Workshop Review - How’d you do? 1. Variable 2. Array 3. Function 4. Object (properties, methods) 5. Loops 6. Conditionals 7. Including JavaScript in HTML JavaScript Basics Review
44. Learning JavaScript Workshop JavaScript Basics Review BREAK
45. Learning JavaScript Workshop The DOM 1. Nodes 2. Document Object Methods 3. Traversal (parents, children, siblings) 4. Creating and Appending The Document Object Model
46. Learning JavaScript Workshop The 
 Document
 Object
 Model The Document Object Model
47. Learning JavaScript Workshop In the DOM, Everything is a Node The Document Object Model
48. Learning JavaScript Workshop The Document Object Model
49. Learning JavaScript Workshop The Document Object Model 10 Doctype Root / HTML 1 Body 1 Head 1 1 Title 3 Title Text 1 Header 1 Paragraph 3 Header Text 3 Text 1 Link 3 3 Link Text 9 Document
50. Learning JavaScript Workshop document.getElementById('main') document.getElementsByTagName('a') document.getElementsByClassName('post') document.querySelector('.entry-title a') document.querySelectorAll('.entry-title a') The Document Object Model Document Object Methods
51. Learning JavaScript Workshop DEMO The Document Object Model
52. Learning JavaScript Workshop el.innerText el.innerHTML el.id el.href input.value el.classList.add(‘new’) el.classList.remove(‘new’) el.classList.toggle(‘new’) The Document Object Model Getting Node Values
53. Learning JavaScript Workshop DEMO The Document Object Model
54. Learning JavaScript Workshop Any Node .parentNode .childNodes .firstChild .lastChild .nextSibling .previousSibling The Document Object Model DOM Traversal Element Nodes .parentElement .children .firstElementChild .lastElementChild .nextElementSibling .previousElementSibling
55. Learning JavaScript Workshop DEMO The Document Object Model
56. Learning JavaScript Workshop The Document Object Model Node Creating, Appending document.createElement('p') document.createTextNode('Text') document.createDocumentFragment() el.appendChild( child ) parent.insertBefore( childEl, el ) el.innerHTML = '<p>Text</p>'; el.cloneNode( true )
57. Learning JavaScript Workshop DEMO The Document Object Model
58. Learning JavaScript Workshop The Document Object Model Document Methods document.getElementById() document.getElementsByTagName() document.getElementsByClassName() document.querySelector() document.querySelectorAll() Working with Attributes el.innerText el.id el.innerHTML el.href input.value el.attribute el.classList.add(‘new’) Traversal - Any Node Type .parentNode .lastChild .childNodes .nextSibling .firstChild .previousSibling Traversal – Element Nodes .parentElement .lastElementChild .children .nextElementSibling .firstElementChild .previousElementSibling 
 Creating & Appending Nodes document.createElement('article') el.appendChild( childEl ) DOM Cheat Sheet
59. A Day of JavaScript DOM Practice 01.01 Practice selecting following elements and logging to console • Main content container • First post title • First post content • All post titles
60. A Day of JavaScript DOM Practice 01.02 1. Select the parent element for the first post title 2. Select the first post, then log out next sibling post 3. Select the main post container and log out it’s children
61. A Day of JavaScript DOM Practice 01.03 1. Create a post with markup using JavaScript 2. Append post to the list of other posts on the page
62. A Day of JavaScript DOM Practice ** 1. Write a function to append post content to the page 2. Create a post object with a title and content 3. Call the function to append posts and pass it the post you created
63. A Day of JavaScript DOM Practice ** 1. Create a form with preset values 2. Get the values from the form and log them in the console
64. Learning JavaScript Workshop A Word on jQuery The Document Object Model
65. Learning JavaScript Workshop Events 1. Types of Events 2. Hooking Into Events (inline handlers, event listeners) 3. The Event Object Events with JavaScript
66. Learning JavaScript Workshop Types of Events in JavaScript Events with JavaScript • Mouse events • Keyboard events • Form events • Media events • Drag and Drop events • Window events • Many more….
67. Learning JavaScript Workshop DEMO Events with JavaScript
68. Learning JavaScript Workshop Events with JavaScript Hooking Into Events Inline Event Handler in HTML <a href="#" onclick="console.log('Clicked');">Link</a> Event Listener in JS link.addEventListener( 'click', myFunction, false );
69. Learning JavaScript Workshop DEMO Events with JavaScript
70. Learning JavaScript Workshop Events with JavaScript The Event Object link.addEventListener( 'click', sayHi, false ); function sayHi() { e = arguments[0] || event; console.log( e ); console.log( e.type ); console.log( e.target ); }
71. Learning JavaScript Workshop Events with JavaScript The Event Object link.addEventListener( 'click', sayHi, false ); function sayHi( event ) { console.log( event ); console.log( event.type ); console.log( event.target ); }
72. Learning JavaScript Workshop DEMO Events with JavaScript
73. Learning JavaScript Workshop Events with JavaScript Inline Event Handler <a href="#” onclick=”//JS here;">Link</a> Event Listener el.addEventListener( ‘event’, function, false) el.removeEventListener( ‘event’, function, false) Event Object event = arguments[0] || event event.target event.type Events Cheat Sheet Event Types load, offline, online, focus, blur, animationstart, animationend, transitionstart, transitionend, submit, resize, scroll, keypress, mousemove, mouseenter, mouseleave, click, dragstart, dragenter, dragend, dragover, drop, timeupdate, hashchange, more!
74. A Day of JavaScript Events Practice 02.01 • Write an inline click event on a link that logs out a message when clicked • Add an event listener to a link that logs out a message when clicked
75. A Day of JavaScript Events Practice 02.02 • Select all post title links on the page • Add an event listener to each link that logs the title of that post when clicked
76. A Day of JavaScript Events Practice 02.03 • Get the values from the form when submitted • Append the new post values as a new post on the page • Clear form values once post is loaded
77. Learning JavaScript Workshop Events in Different 
 Libraries & Frameworks Events with JavaScript
78. Learning JavaScript Workshop JSON & HTTP 1. JSON Overview 2. HTTP Requests with Fetch 3. Pulling in WordPress API Content JSON & HTTP
79. Learning JavaScript Workshop JSON & HTTP JSON { "title": 2, "title": "Hello JSON!", "slug": "hello-json", "content": "Some post content goes here." }
80. Learning JavaScript Workshop JSON & HTTP JSON [ { "title": "Hello JSON!", "content": "Some post content goes here." }, { "title": "Hello API!", "content": "More post content." }, ]
81. Learning JavaScript Workshop DEMO JSON & HTTP
82. Learning JavaScript Workshop JSON & HTTP JSON Into JavaScript let JSONString = '{ "id": 1, "title": "Hello JSON!" }', post = JSON.parse( JSONString ); console.log( post.title );
83. Learning JavaScript Workshop JSON & HTTP JavaScript Into JSON let post = { id: 2, title: "Hello JSON!" }, postJSON = JSON.stringify( post ); console.log( postJSON );
84. Learning JavaScript Workshop DEMO JSON & HTTP
85. Learning JavaScript Workshop JSON & HTTP Making HTTP Get Requests with Fetch fetch( ‘https://site.com/wp-json/wp/v2/posts’ ) .then( response => { response.json().then( posts => { console.log( posts ); }); }) .catch( err => { console.log( err ); });
86. Learning JavaScript Workshop JSON & HTTP Making HTTP Post Requests with Fetch fetch( 'https://site.com/wp-json/wp/v2/posts', { method: 'POST', body: JSON.stringify( post ), headers: new Headers({ 'Content-Type' : 'application/json', 'Authorization' : 'Bearer ' + token }), credentials: 'include' }) .then( function( response ) { if( 201 === response.status ) { console.log( 'Post Update' ); } });
87. Learning JavaScript Workshop DEMO JSON & HTTP
88. Learning JavaScript Workshop JSON & HTTP JSON Example [{ “title” : “Hello” }, { “title” : “JSON” }] JS JSON Conversion let posts = JSON.parse( postsJSON ); let postJSON = JSON.stringify( posts ); Fetch with Promises fetch( ‘https://site.com/posts.json’ ) .then( response => { response.json().then( posts=> { console.log( posts ); }); }) .catch( err => { console.log( err ); }); JSON & HTTP Cheat Sheet
89. A Day of JavaScript JSON Practice 03.01 • Write a valid JSON file for a post • Validate that JSON file online JSON & HTTP
90. A Day of JavaScript JSON Practice 03.02 • Make a fetch call to your JSON file • Display the post on the page JSON & HTTP
91. A Day of JavaScript JSON Practice 03.03 • Make a fetch call to a WP site for posts (5 max) • Display the posts on the page JSON & HTTP
92. Learning JavaScript Workshop WP API + JS in a Theme 1. Add the apidemo.zip theme to your WP site 2. Functions.php enqueue main.js with dependency of wp- api and jquery 3. Use new wp.api.collections.Posts() and .fetch to get posts from WP Site 4. Use JavaScript (and jQuery) to add the posts to the page WP API + JS in a Theme
93. Learning JavaScript Workshop A Day of JavaScript Wrap Up Review
94. Learning JavaScript Workshop Learning Review 1. Programming Review: variables, arrays, functions, objects, loops, conditional statements 2. The Document Object Model 3. Events 4. HTTP & JSON WP API + JS in a Theme