A Day of JavaScript Workshop from A Day of REST Conference

This talk from Zac Gordon at A Day of REST covers basic programming terms, the Document Object Model, Events in JavaScript and how to work with JSON, HTTP and the WordPress REST API.

Transcript

1. A Day of JavaScript A Day of JavaScript Getting Started Welcome To with Zac Gordon @zgordon
2. A Day of JavaScript Workshop Preperation • Local install of WordPress 4.7+ • Code Editor (I am using Atom) • Node and NPM Installed (node –v and npm –v) • https://github.com/zgordon/a-day-of-javascript Getting Started
3. A Day of JavaScript Oh yes, JavaScript Is Important A Little Context
4. A Day of JavaScript A Little Context JavaScript #1
5. A Day of JavaScript A Little Context
6. A Day of JavaScript A Little Context $72,500 glassdoor.com
7. A Day of JavaScript WordPress Developers Live in a Bubble Getting Started
8. A Day of JavaScript Most Developers Live in a Bubble Getting Started
9. A Day of JavaScript API + JS = Bigger Bubble Getting Started
10. A Day of JavaScript What Do You Need to Know? Getting Started
11. A Day of JavaScript Wait, Do You Know Programming? Getting Started
12. A Day of JavaScript Getting Started 1. The DOM
13. A Day of JavaScript Getting Started 1. The DOM 2. Events
14. A Day of JavaScript Getting Started 1. The DOM 2. Events 3. JSON & HTTP
15. A Day of JavaScript 1. The DOM 2. Events 3. JSON & HTTP Getting Started
16. A Day of JavaScript These 3 Things Let us do a lot Getting Started
17. A Day of JavaScript Use WP API Getting Started
18. A Day of JavaScript Use WP API Build UI/Page w JS Getting Started
19. A Day of JavaScript Use WP API Build UI/Page w JS Track User Actions Getting Started
20. A Day of JavaScript Use WP API Build UI/Page w JS Track User Actions Do Whatever * Getting Started
21. A Day of JavaScript Use WP API JSON/HTTP Build UI/Page w JS DOM Track User Actions Events Do Whatever JavaScript* Getting Started
22. A Day of JavaScript 1. The DOM 2. Events 3. JSON & HTTP Getting Started * Development Tools * Programming Review
23. A Day of JavaScript I Love JavaScript And have for a while For More from Zac
24. A Day of JavaScript javascriptforwp.com/courses javascriptforwp.com/blog For More from Zac
25. A Day of JavaScript Group Up It’s Quiz Time JavaScript Basics
26. A Day of JavaScript What is a variable? Question 1 of 7 Question 1
27. A Day of JavaScript What is an array? Question 2 of 7 Question 2
28. A Day of JavaScript What is a function? Question 3 of 7 Question 3
29. A Day of JavaScript What is an object? Question 4 of 7 Question 4
30. A Day of JavaScript What is a loop? Question 5 of 7 Question 5
31. A Day of JavaScript What is a conditional? Question 6 of 7 Question 6
32. A Day of JavaScript How do you include JavaScript in HTML? Question 7 of 7 Question 7
33. A Day of JavaScript Variable A container for storing values JavaScript Basics Review var username = ‘zgordon’; let username = ‘zgordon’; const siteURL = ‘https://site.com’;
34. A Day of JavaScript Array A collection of values JavaScript Basics Review let postIds = [1,2,3,5]; let usernames =[ 'zgordon', '’admin' ];
35. 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();
36. 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 );
37. 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();
38. 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] ); }
39. 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 ); }
40. 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' ); }
41. A Day of JavaScript Including JavaScript JavaScript Basics Review <html> <head> </head> <body> <script src="index.js"></script> </body> </html>
42. A Day of JavaScript 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
43. A Day of JavaScript JavaScript Basics Review BREAK
44. A Day of JavaScript The DOM 1. Nodes 2. Document Object Methods 3. Traversal (parents, children, siblings) 4. Creating and Appending The Document Object Model
45. A Day of JavaScript The Document Object Model The Document Object Model
46. A Day of JavaScript In the DOM, Everything is a Node The Document Object Model
47. A Day of JavaScript The Document Object Model
48. A Day of JavaScript 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
49. A Day of JavaScript 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
50. A Day of JavaScript DEMO The Document Object Model
51. A Day of JavaScript 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
52. A Day of JavaScript DEMO The Document Object Model
53. A Day of JavaScript Any Node .parentNode .childNodes .firstChild .lastChild .nextSibling .previousSibling The Document Object Model DOM Traversal Element Nodes .parentElement .children .firstElementChild .lastElementChild .nextElementSibling .previousElementSibling
54. A Day of JavaScript DEMO The Document Object Model
55. A Day of JavaScript 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 )
56. A Day of JavaScript DEMO The Document Object Model
57. A Day of JavaScript 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
58. 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
59. 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
60. 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
61. 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
62. 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
63. A Day of JavaScript A Word on jQuery The Document Object Model
64. A Day of JavaScript Events 1. Types of Events 2. Hooking Into Events (inline handlers, event listeners) 3. The Event Object Events with JavaScript
65. A Day of JavaScript Types of Events in JavaScript Events with JavaScript • Mouse events • Keyboard events • Form events • Media events • Drag and Drop events • Window events • Many more….
66. A Day of JavaScript DEMO Events with JavaScript
67. A Day of JavaScript 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 );
68. A Day of JavaScript DEMO Events with JavaScript
69. A Day of JavaScript Events with JavaScript The Event Object link.addEventListener( 'click', sayHi, false ); function sayHi( e ) { // e is the event object console.log( e ); console.log( e.type ); console.log( e.target ); }
70. A Day of JavaScript DEMO Events with JavaScript
71. A Day of JavaScript 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 e = arguments[0] || events e.target e.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!
72. 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
73. 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
74. 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
75. A Day of JavaScript Events in Different Libraries & Frameworks Events with JavaScript
76. A Day of JavaScript JSON & HTTP 1. JSON Overview 2. HTTP Requests with Fetch 3. Pulling in WordPress API Content JSON & HTTP
77. A Day of JavaScript JSON & HTTP JSON { "title": 2, "title": "Hello JSON!", "slug": "hello-json", "content": "Some post content goes here." }
78. A Day of JavaScript JSON & HTTP JSON [ { "title": "Hello JSON!", "content": "Some post content goes here." }, { "title": "Hello API!", "content": "More post content." }, ]
79. A Day of JavaScript DEMO JSON & HTTP
80. A Day of JavaScript JSON & HTTP JSON Into JavaScript let JSONString = '{ "id": 1, "title": "Hello JSON!" }', post = JSON.parse( JSONString ); console.log( post.title );
81. A Day of JavaScript JSON & HTTP JavaScript Into JSON let post = { id: 2, title: "Hello JSON!" }, postJSON = JSON.stringify( post ); console.log( postJSON );
82. A Day of JavaScript DEMO JSON & HTTP
83. A Day of JavaScript 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 ); });
84. A Day of JavaScript 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' ); } });
85. A Day of JavaScript DEMO JSON & HTTP
86. A Day of JavaScript 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
87. A Day of JavaScript JSON Practice 03.01 • Write a valid JSON file for a post • Validate that JSON file online JSON & HTTP
88. A Day of JavaScript JSON Practice 03.02 • Make a fetch call to your JSON file • Display the post on the page JSON & HTTP
89. 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
90. A Day of JavaScript 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
91. A Day of JavaScript A Day of JavaScript Wrap Up Review
92. A Day of JavaScript A Day of JavaScript Review 1. Programming Review: variables, arrays, functions, objects, loops, conditional statements 2. The Document Object Model: WP API + JS in a Theme