WordCamp Ann Arbor 2017 JavaScript Workshop

Slide 1

Slide 1 text

JavaScript for WordPress Zac Gordon @zgordon https://javascriptforwp.com

Slide 2

Slide 2 text

Go Here to Get Setup javascriptforwp.com/wca2

Slide 3

Slide 3 text

Are We Ready?! 1. Slides and Example Files 2. Code Editor (I’m using Atom) 3. Local WordPress Install (I’m Using Local)

Slide 4

Slide 4 text

Workshop Overview 1. JavaScript [ JS 101, DOM, Events ] 2. The WordPress REST API [ Accessing, Arguments ] 3. JavaScript & WP API in Themes [ Enqueuing, jQuery, API ] 4. Homework!

Slide 5

Slide 5 text

JS 101 Pop Quiz!

Slide 6

Slide 6 text

JS 101 Pop Quiz!!! 1. What is a variable? 2. What is an array? 3. What is a function? 4. What is an Object? 5. What is a Loop? 6. What is a Conditional 7. How do you include JavaScript in HTML? 8. How do you include JavaScript in a WordPress Theme?

Slide 7

Slide 7 text

JS 101

Slide 8

Slide 8 text

Variable A container for storing values (in memory) var username = 'zgordon'; let username = 'zgordon'; const siteURL = 'https://site.com';

Slide 9

Slide 9 text

keyword var let const global scope YES NO NO function scope YES YES YES block scope NO YES YES can be reassigned YES YES NO

Slide 10

Slide 10 text

Variable A container for storing values (in memory) var username = 'zgordon', twitter = '@zgordon', website = 'zacgordon.com';

Slide 11

Slide 11 text

Array A collection of values var postIds = [ 1, 2, 3, 5 ]; var usernames = [ 'zgordon', 'admin' ];

Slide 12

Slide 12 text

Array A collection of values (zero indexed) var postIds = [ 1, 2, 3, 5 ]; postIds[ 0 ] // Equals 1 postIds[ postIds.length - 1 ] // Last item

Slide 13

Slide 13 text

Functions Let us write, call and reuse blocks of code function getPosts() { // Function Declaration var posts = apiMagic(); // Will learn.. return posts; } getPosts(); // Function Call getPosts // Function Reference

Slide 14

Slide 14 text

Function Parameters Can pass data into functions function getUser( id = 0 ) { var user = apiMagic( id ); return user; } getUser( 1 );

Slide 15

Slide 15 text

Objects Container with properties (values) and methods (functions). var post = { title: 'Hello World!', render: function() { console.log( this.title ); } } post.title; post.render();

Slide 16

Slide 16 text

Loops Let us perform an action on a collection of items. var postIds = [ 1, 7, 14, 34, 88, 117 ]; for ( let i = 0, max = postIds.length; i < max; i++ ) { console.log( 'Post #' + postIds[ i ] ); }

Slide 17

Slide 17 text

For Of Loop Lets us loop through an array var postIds = [ 1, 7, 14 ]; for( let id of postIds ) { console.log( id ); }

Slide 18

Slide 18 text

For Each Method Lets us loop through an array var postIds = [ 1, 7, 14 ]; postIds.forEach( id => { console.log( id ) } );

Slide 19

Slide 19 text

Mapping Mapping is a functional alternative to looping var postIds = [ 1, 7, 14 ]; postIds.map( id => { console.log( id ); });

Slide 20

Slide 20 text

Conditional Statements Tests to determine what code to run var loggedIn = true; if ( true === loggedIn ) { console.log( 'Show dashboard' ); } else { console.log( 'Please login' ); }

Slide 21

Slide 21 text

Include JS in HTML console.log( 'JS Running!' );

Slide 22

Slide 22 text

Include JS in HTML

Slide 23

Slide 23 text

Include JS in WP Theme function my_theme_scripts() { wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', [ 'jquery', 'wp-api' ], time(), true ); } add_action( 'wp_enqueue_scripts', ‘my_theme_scripts' );

Slide 24

Slide 24 text

The DOM & Nodes

Slide 25

Slide 25 text

The DOM is an API For HTML (XML & SVG)

Slide 26

Slide 26 text

BROWSER DOM HTML JavaScript

Slide 27

Slide 27 text

Build documents, navigate their structure, and add, modify, or delete elements and content.

Slide 28

Slide 28 text

Everything in the DOM Is a Node

Slide 29

Slide 29 text

Common Node Types • Document [9] • DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11]

Slide 30

Slide 30 text

Common Node Types • Document [9] • DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11]

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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 Window

Slide 33

Slide 33 text

WordCamp Miami 2017 Getting DOM Nodes w JS document.getElementById( 'main' ) document.getElementsByTagName( 'a' ) document.getElementsByClassName( 'post' ) document.querySelector( '.entry-title a' ) document.querySelectorAll( '.entry-title a' ) el.querySelector( 'a' )

Slide 34

Slide 34 text

WordCamp Miami 2017 Getting Node Values el.innerText el.innerHTML el.id el.href el.dataset.custom input.value var el = document.getElementById( 'main' );

Slide 35

Slide 35 text

WordCamp Miami 2017 Setting Node Values el.innerText = 'New'; el.innerHTML = '

New

'; input.value = 'zgordon'; @zgordon var el = document.getElementById( 'main' ); WordCamp DC 2017

Slide 36

Slide 36 text

PRACTICE 1.1 Getting & Setting Nodes w JS

Slide 37

Slide 37 text

WordCamp Miami 2017 Creating & Appending   Nodes

Slide 38

Slide 38 text

WordCamp Miami 2017 Creating Nodes document.createElement( 'p' ) document.createTextNode( 'Text' )

Slide 39

Slide 39 text

WordCamp Miami 2017 Appending Nodes parent.appendChild( newEl ); parent.insertBefore( newEl, el );

Slide 40

Slide 40 text

WordCamp Miami 2017 Appending Nodes Example var pEl = document.querySelector( 'p' ), aEl = document.createElement( 'a' ), aText = document.createTextNode( 'Link' ); aEl.appendChild( aText ); aEl.href = 'https://javascriptforwp.com'; pEl.appendChild( aEl );

Slide 41

Slide 41 text

WordCamp Miami 2017 “Hacker Style” Appending Nodes var pEl = document.querySelector( 'p' ), markup = ''; markup += ''; markup += 'Link Text'; markup += ''; pEl.innerHTML = markup;

Slide 42

Slide 42 text

Practice 1.2 + 1.3  Creating & Appending Nodes

Slide 43

Slide 43 text

Events w JavaScript

Slide 44

Slide 44 text

WordCamp Miami 2017 Types of Events • Mouse events • Keyboard events • Form events • Media events • Drag and Drop events • Window events • Many more….

Slide 45

Slide 45 text

WordCamp Miami 2017 Hooking into Events w JavaScript 1. Inline in HTML 2. Global 1 Off 3. Listeners Best Alert a.onclick = sayHi a.addEventListener( 'click’, sayHi, false )

Slide 46

Slide 46 text

WordCamp Miami 2017 Event Listeners var linkEl = document.querySelector( 'a' ); function displayLinkInfo( event ) { event.preventDefault(); console.log( event ); } linkEl.addEventListener( 'click', displayLinkInfo, false );

Slide 47

Slide 47 text

WordCamp Miami 2017 The Event Object link.addEventListener( 'click', sayHi ); function sayHi( event ) { console.log( event ); console.log( event.type ); console.log( event.target ); }

Slide 48

Slide 48 text

WordCamp Miami 2017 Removing Event Listeners var el = document.querySelector( 'a' ); el.addEventListener( 'click', sayHi, false ); el.removeEventListener( 'click', sayHi, false );

Slide 49

Slide 49 text

WordCamp Miami 2017 Removing Event Listeners var el = document.querySelector( 'a' ); el.addEventListener( 'click', sayHi, false ); el.remove(); // Listener still exists el = null; // Listener does NOT exist

Slide 50

Slide 50 text

Practice 1.4 Event Listeners Practice

Slide 51

Slide 51 text

Workshop Overview 1. JavaScript [ JS 101, DOM, Events ] 2. The WordPress REST API [ Accessing, Arguments ] 3. JavaScript & WP API in Themes [ Enqueuing, jQuery, API ] 4. Homework!

Slide 52

Slide 52 text

The WordPress   REST API

Slide 53

Slide 53 text

The WP REST API Allows us to get, save, edit, and remove content from WordPress using JavaScript.

Slide 54

Slide 54 text

The WordPress REST API /wp-json/wp/v2/posts /wp-json/wp/v2/revisions /wp-json/wp/v2/categories /wp-json/wp/v2/tags /wp-json/wp/v2/pages /wp-json/wp/v2/comments /wp-json/wp/v2/taxonomies /wp-json/wp/v2/media /wp-json/wp/v2/users /wp-json/wp/v2/types /wp-json/wp/v2/statuses /wp-json/wp/v2/settings /wp-json/custom/v1/something /wp-json/another/v3/else

Slide 55

Slide 55 text

The WordPress REST API To access all of the posts for your site: https://yoursite.com/wp-json/wp/v2/posts To access a post with an ID of “1” for your site: https://yoursite.com/wp-json/wp/v2/posts/1

Slide 56

Slide 56 text

The WordPress REST API To access all of the pages for your site: https://yoursite.com/wp-json/wp/v2/pages To access a page with an ID of “5” for your site: https://yoursite.com/wp-json/wp/v2/pages/5

Slide 57

Slide 57 text

You can pass arguments to API URLs to customize what you get back.

Slide 58

Slide 58 text

The WordPress REST API https://yoursite.com/wp-json/wp/v2/posts ? per_page=10  &_embed  &search=hello%20world  &orderby=title  &order=asc https://developer.wordpress.org/rest-api/reference/posts/#arguments

Slide 59

Slide 59 text

Practice 2.1  WP API in the Browser

Slide 60

Slide 60 text

WordPress API w AJAX + JS

Slide 61

Slide 61 text

AJAX Allows for us to make calls to the WP REST API and get back content in a format JavaScript can understand. (Can also save, edit and delete)

Slide 62

Slide 62 text

Ways to Make JS AJAX Calls • XMLHttpRequests() • fetch() • jQuery • Axios • API Clients (Backbone, Node)

Slide 63

Slide 63 text

AJAX Behind the Scenes 1. Request a URL 2. Get JSON in return 3. Parse JSON into Native JavaScript 4. Use Native JavaScript

Slide 64

Slide 64 text

Pseudo AJAX var postsJSON = fetch('https://wp.dev/wp-json/wp/v2/posts'), posts = JSON.parse( postsJSON ); for( let post of posts ) { renderPost( post ); }

Slide 65

Slide 65 text

AJAX with Axios axios({ method: 'get', url: 'https://example.dev/wp-json/wp/v2/posts', params: { per_page: 3 } }) .then( function( response ) { for( let post of response.data ) { renderPost( post ); } });

Slide 66

Slide 66 text

Practice 2.2 + 2.3  WP API with Axios Ajax

Slide 67

Slide 67 text

Workshop Overview 1. JavaScript [ JS 101, DOM, Events ] 2. The WordPress REST API [ Accessing, Arguments ] 3. JavaScript & WP API in Themes [ Enqueuing, jQuery, API ] 4. Homework!

Slide 68

Slide 68 text

JS + API Inside of WP

Slide 69

Slide 69 text

Enqueuing JavaScript The process of loading JavaScript into a theme or the admin area via PHP functions. wp_enqueue_script() wp_localize_script()

Slide 70

Slide 70 text

function my_theme_scripts() { wp_enqueue_script( 'main-js', // Unique name get_template_directory_uri() . '/js/main.js', // Path [ 'jquery', 'wp-api' ], // Dependencies time(), // Version true ); // Include in footer (v header) } add_action('wp_enqueue_scripts', 'my_theme_scripts', 999); wp_enqueue_script()

Slide 71

Slide 71 text

function my_theme_scripts() { wp_enqueue_script( 'main-js', ... ); wp_localize_script( 'main-js', 'myGlobalVars', [ 'siteUrl' => esc_url( home_url() ), 'siteName'=> get_bloginfo( 'name' ) ] ); } add_action('wp_enqueue_scripts', 'my_theme_scripts', 999); wp_localize_script()

Slide 72

Slide 72 text

functions.php function my_theme_scripts() { wp_enqueue_script( 'main-js', ... ); wp_localize_script( 'main-js', 'myGlobalVars', ... ); } add_action('wp_enqueue_scripts', 'my_theme_scripts', 999); main.js console.log( myGlobalVars.siteUrl ); wp_localize_script()

Slide 73

Slide 73 text

function my_theme_scripts() { wp_enqueue_script( 'main-js', ... ); wp_localize_script( 'main-js', 'myGlobalVars', ... ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 999); add_action( 'admin_enqueue_scripts', 'my_theme_scripts', 999 ); Enqueuing JS in Admin Area

Slide 74

Slide 74 text

function my_admin_scripts( $hook ) { global $main_menu_url; if( $hook != 'toplevel_page_' . $main_menu_url ) return; wp_enqueue_script( 'my-admin-js', plugins_url( '/assets/js/ admin.js', __FILE__ ), [ 'wp-api' ], time(), true ); } add_action( 'admin_enqueue_scripts', 'my_admin_scripts', 999); Enqueuing JS in Admin Area

Slide 75

Slide 75 text

Practice 3.1  Enqueuing JavaScript in a Theme

Slide 76

Slide 76 text

jQuery + WordPress

Slide 77

Slide 77 text

WordPress comes with Several JS Libraries Available to Us

Slide 78

Slide 78 text

function my_theme_scripts() { wp_enqueue_script( 'main-js', // Unique name get_template_directory_uri() . '/js/main.js', // Path [ 'jquery' ], // Dependencies time(), // Version true ); // Include in footer (v header) } add_action('wp_enqueue_scripts', 'my_theme_scripts', 999); jQuery Dependency

Slide 79

Slide 79 text

The $ in jQuery is NOT available by default

Slide 80

Slide 80 text

jQuery( ‘.this-works' ).show();

Slide 81

Slide 81 text

(function( $ ) { $('.this-works').show(); })( jQuery ); Immediately Evoked Function Expression (IEFE)

Slide 82

Slide 82 text

Practice 3.2  Using jQuery for AJAX

Slide 83

Slide 83 text

The Backbone WP API Client

Slide 84

Slide 84 text

Backbone API Client Allows us to easily use the WP REST API in a theme or plugin without writing AJAX or authentication. No knowledge of Backbone necessary*

Slide 85

Slide 85 text

function my_theme_scripts() { wp_enqueue_script( 'main-js', // Unique name get_template_directory_uri() . '/js/main.js', // Path [ ‘wp-api’ ], // Dependencies time(), // Version true ); // Include in footer (v header) } add_action('wp_enqueue_scripts', 'my_theme_scripts', 999); Backbone API Client Dependency

Slide 86

Slide 86 text

var posts = new wp.api.collections.Posts(); posts.fetch({ data: { per_page: 3 } }) .done( () => { posts.each( post => renderPost( post.attributes ); ); Backbone Client - Get Posts

Slide 87

Slide 87 text

var post = new wp.api.models.Post( { id } ); post.fetch() .done( () => renderPost( post.attributes ) ); Backbone Client - Get Post By ID

Slide 88

Slide 88 text

Practice 3.3  Using the Backbone API Client

Slide 89

Slide 89 text

Workshop Overview 1. JavaScript [ JS 101, DOM, Events ] 2. The WordPress REST API [ Accessing, Arguments ] 3. JavaScript & WP API in Themes [ Enqueuing, jQuery, API ] 4. Homework!

Slide 90

Slide 90 text

WordCamp Miami 2017 javascriptforwp.com/wca2 Learn JavaScript Deeply with Zac Gordon @zgordon Thanks!