WordCamp DC JavaScript Workshop

Slide 1

Slide 1 text

https://github.com/zgordon/wcdc-2017

Slide 2

Slide 2 text

Up & Running w Vanilla JavaScript Zac Gordon @zgordon javascriptforwp.com

Slide 3

Slide 3 text

WordCamp DC 2017 HTML Markup language using tags @zgordon CSS Presentation language using key value pairs JavaScript An actual programming language

Slide 4

Slide 4 text

WordCamp DC 2017 It’s not that JavaScript is a hard or weird language. However, almost everything you do in JavaScript involves an API. That makes things more complicated. @zgordon

Slide 5

Slide 5 text

WordCamp DC 2017 Web APIs Standards made available to allow JavaScript (ECMAScript) to interact with the browser (and more). W3C and WHATWG standards bodies. @zgordon

Slide 6

Slide 6 text

WordCamp DC 2017 JavaScript & APIs Made Simple 1. JS Basics @zgordon 2. The DOM 3. DOM Events

Slide 7

Slide 7 text

WordCamp DC 2017 JavaScript Basics POP QUIZ @zgordon +1 Point for Answer +1 Point for Code Example

Slide 8

Slide 8 text

WordCamp DC 2017 Question 1/8 What is a variable? @zgordon

Slide 9

Slide 9 text

WordCamp DC 2017 Question 2/8 What is an array? @zgordon

Slide 10

Slide 10 text

WordCamp DC 2017 Question 3/8 What is a function? @zgordon

Slide 11

Slide 11 text

WordCamp DC 2017 Question 4/8 What is an object? @zgordon

Slide 12

Slide 12 text

WordCamp DC 2017 Question 5/8 What is a loop? @zgordon

Slide 13

Slide 13 text

WordCamp DC 2017 Question 6/8 What is a conditional? @zgordon

Slide 14

Slide 14 text

WordCamp DC 2017 Question 7/8 How do you include JavaScript in HTML ? @zgordon

Slide 15

Slide 15 text

WordCamp DC 2017 Question 8/8 How do you include JavaScript in a WP Theme? @zgordon

Slide 16

Slide 16 text

WordCamp DC 2017 How Did You Do??? POP QUIZ @zgordon +1 Point for Answer +1 Point for Code Example

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

WordCamp DC 2017 Array A collection of values @zgordon let postIds = [ 1, 2, 3, 5 ]; let usernames = [ 'zgordon', 'admin' ];

Slide 19

Slide 19 text

WordCamp DC 2017 Array A collection of values (zero indexed) @zgordon let postIds = [ 1, 2, 3, 5 ]; postIds[ 0 ] // Equals 1 postIds[ postIds.length - 1 ] // Last item

Slide 20

Slide 20 text

WordCamp DC 2017 Functions Let us write, call and reuse blocks of code @zgordon function getPosts() { let posts = apiMagic(); // Will learn return posts; } getPosts();

Slide 21

Slide 21 text

WordCamp Europe 2017 Function Parameters Can pass data into functions @zgordon function getUser( id = 0 ) { let user = apiMagic( id ); return user; } getUser( 1 );

Slide 22

Slide 22 text

WordCamp DC 2017 Objects Container with properties (values) and methods (functions). @zgordon let post = { 'title more': 'Hello World!', render: function() { console.log( this.title ); } } post.title; post.render();

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WordCamp DC 2017 Conditional Statements Tests to determine what code to run @zgordon let loggedIn = true; if ( true === loggedIn ) { console.log( 'Show dashboard' ); } else { console.log( 'Please login' ); }

Slide 26

Slide 26 text

WordCamp DC 2017 Include JS in HTML @zgordon

Slide 27

Slide 27 text

WordCamp DC 2017 Include JS in WP Theme function theme_scripts() { wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', [ 'jquery' ], time(), true ); } add_action('wp_enqueue_scripts', 'theme_scripts', 999); @zgordon

Slide 28

Slide 28 text

WordCamp DC 2017 JavaScript & APIs Made Simple 1. JS Basics @zgordon 2. The DOM 3. DOM Events

Slide 29

Slide 29 text

WordCamp DC 2017 The DOM  Document Object Model @zgordon

Slide 30

Slide 30 text

WordCamp DC 2017 The DOM is an API For HTML (XML & SVG) @zgordon

Slide 31

Slide 31 text

WordCamp DC 2017 The DOM is NOT Source Code @zgordon

Slide 32

Slide 32 text

WordCamp DC 2017 @zgordon BROWSER DOM HTML JavaScript

Slide 33

Slide 33 text

WordCamp DC 2017 Build documents, navigate their structure, and add, modify, or delete elements and content. @zgordon

Slide 34

Slide 34 text

The DOM API 1. Build 2. Navigate 3. Add, Modify, Delete WordCamp DC 2017 @zgordon

Slide 35

Slide 35 text

The DOM API 1. Build Nodes 2. Navigate Selection, Traversal 3. Add, Modify, Delete Append, Set, Remove WordCamp DC 2017 @zgordon

Slide 36

Slide 36 text

Everything is a Node In the DOM WordCamp DC 2017 @zgordon

Slide 37

Slide 37 text

WordCamp DC 2017 Common Node Types • Document [9] • DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11] @zgordon

Slide 38

Slide 38 text

WordCamp DC 2017 Common Node Types • Document [9] index.html • DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11] @zgordon

Slide 39

Slide 39 text

WordCamp DC 2017 @zgordon

Slide 40

Slide 40 text

WordCamp DC 2017 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 @zgordon Window

Slide 41

Slide 41 text

Practice 1.1  Looking up Node Types @zgordon WordCamp DC 2017

Slide 42

Slide 42 text

WordCamp Miami 2017 Document Object  Methods @zgordon WordCamp DC 2017

Slide 43

Slide 43 text

WordCamp Miami 2017 Getting HTML Elements document.getElementById( 'main' ) document.getElementsByTagName( 'a' ) document.getElementsByClassName( 'post' ) document.querySelector( '.entry-title a' ) document.querySelectorAll( '.entry-title a' ) @zgordon WordCamp DC 2017

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

New

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

Slide 46

Slide 46 text

WordCamp Miami 2017 Styling Nodes @zgordon window.getComputedStyle( el ) el.style.backgroundColor = '#f7b733' el.classList.add( 'new' ) el.classList.remove( 'new' ) el.classList.toggle( 'new' ) const el = document.getElementById( 'main' ); WordCamp DC 2017

Slide 47

Slide 47 text

Practice 1.2 Getting & Setting Values @zgordon WordCamp DC 2017

Slide 48

Slide 48 text

WordCamp Miami 2017 DOM Traversal @zgordon WordCamp DC 2017

Slide 49

Slide 49 text

WordCamp Miami 2017 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 @zgordon Window WordCamp DC 2017

Slide 50

Slide 50 text

WordCamp Miami 2017 @zgordon p div Text p a Text Text Text WordCamp DC 2017

Slide 51

Slide 51 text

WordCamp Miami 2017 @zgordon div Text p a Text Text Text Parent p WordCamp DC 2017

Slide 52

Slide 52 text

WordCamp Miami 2017 @zgordon p div Text p a Text Text Text Sibling WordCamp DC 2017

Slide 53

Slide 53 text

WordCamp Miami 2017 @zgordon p div Text p a Text Text Text Child Text WordCamp DC 2017

Slide 54

Slide 54 text

WordCamp Miami 2017 @zgordon div Text p a Text Text Text Children Text Text p WordCamp DC 2017

Slide 55

Slide 55 text

WordCamp Miami 2017 DOM Traversal @zgordon Any Node el.parentNode el.childNodes el.firstChild el.lastChild el.nextSibling el.previousSibling Element Nodes el.parentElement el.children el.firstElementChild el.lastElementChild el.nextElementSibling el.previousElementSibling WordCamp DC 2017

Slide 56

Slide 56 text

Practice 1.3 DOM Traversal @zgordon WordCamp DC 2017

Slide 57

Slide 57 text

WordCamp Miami 2017 Creating & Appending   Nodes @zgordon WordCamp DC 2017

Slide 58

Slide 58 text

WordCamp Miami 2017 Creating Nodes document.createElement( 'p' ) document.createTextNode( 'Text' ) document.createDocumentFragment() @zgordon WordCamp DC 2017

Slide 59

Slide 59 text

WordCamp Miami 2017 Appending Nodes parent.appendChild( newEl ) parent.insertBefore( newEl, el ) parent.innerHTML = '

Text

' @zgordon WordCamp DC 2017

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

WordCamp Miami 2017 “Fake” Appending Nodes let pEl = document.querySelector( 'p' ), markup = ''; markup += '' ); markup += 'Link Text'; markup += ''; pEl.innerHTML = markup; @zgordon WordCamp DC 2017

Slide 62

Slide 62 text

Practice 1.4 Creating & Appending   Nodes @zgordon WordCamp DC 2017

Slide 63

Slide 63 text

WordCamp Miami 2017 Cloning &  Removing Nodes @zgordon WordCamp DC 2017

Slide 64

Slide 64 text

WordCamp Miami 2017 Cloning Nodes el.cloneNode( true/false ) @zgordon Removing Nodes el.remove() el.removeChild() WordCamp DC 2017

Slide 65

Slide 65 text

WordCamp Miami 2017 Cloning and Removing let ul = document.querySelector( 'ul' ), li = ul.firstElementChild.cloneNode( true ); ul.appendChild( li ); ul.firstElementChild.remove(); @zgordon WordCamp DC 2017

Slide 66

Slide 66 text

Practice 1.5 Cloning & Removing @zgordon WordCamp DC 2017

Slide 67

Slide 67 text

WordCamp Miami 2017 JavaScript & APIs Made Simple 1. JS Basics @zgordon 2. The DOM 3. DOM Events WordCamp DC 2017

Slide 68

Slide 68 text

WordCamp Miami 2017 DOM Events w  JavaScript @zgordon WordCamp Europe 2017

Slide 69

Slide 69 text

WordCamp Miami 2017 Types of Events @zgordon • Mouse events • Keyboard events • Form events • Media events • Drag and Drop events • Window events • Many more…. https://javascriptforwp.com/intro-to-events/ WordCamp DC 2017

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

WordCamp Miami 2017 Event Listeners const linkEl = document.querySelector( 'a' ); function displayLinkInfo( event ) { event.preventDefault(); console.log( event.target.innerHTML ); } linkEl.addEventListener( 'click', displayLinkInfo, false ); @zgordon WordCamp DC 2017

Slide 72

Slide 72 text

WordCamp Miami 2017 Removing Event Listeners linkEl.addEventListener( 'click', func, false ); linkEl.removeEventListener( 'click', func, false ); linkEl.addEventListener( 'click', function( event ) { console.log( event ); }, false ); @zgordon WordCamp DC 2017

Slide 73

Slide 73 text

Practice 2.1 Event Listener Practice @zgordon WordCamp DC 2017

Slide 74

Slide 74 text

WordCamp Miami 2017 The Event   Object @zgordon WordCamp DC 2017

Slide 75

Slide 75 text

WordCamp Miami 2017 Event Listeners link.addEventListener( 'click', sayHi, false ); function sayHi( event ) { // event is the event object console.log( event ); console.log( event.type ); console.log( event.target ); } @zgordon WordCamp DC 2017

Slide 76

Slide 76 text

Practice 2.2 Checking Out the Event Object @zgordon WordCamp DC 2017

Slide 77

Slide 77 text

WordCamp Miami 2017 Event   Propagation @zgordon WordCamp DC 2017

Slide 78

Slide 78 text

WordCamp Miami 2017 Event Propagation How notifications of events spreads through the DOM @zgordon javascriptforwp.com/event-propagation WordCamp DC 2017

Slide 79

Slide 79 text

WordCamp Miami 2017 @zgordon

document window Event Propagation WordCamp DC 2017

Slide 80

Slide 80 text

WordCamp Miami 2017 @zgordon

document window Event Propagation WordCamp DC 2017

Slide 81

Slide 81 text

WordCamp Miami 2017 @zgordon Event Propagation

document window Phase 1 - Capturing WordCamp DC 2017

Slide 82

Slide 82 text

WordCamp Miami 2017 @zgordon Event Propagation

document window Phase 2 - Target Phase 1 - Capturing WordCamp DC 2017

Slide 83

Slide 83 text

WordCamp Miami 2017 @zgordon Event Propagation

document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling WordCamp DC 2017

Slide 84

Slide 84 text

WordCamp Miami 2017 @zgordon Event Propagation

document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling WordCamp DC 2017

Slide 85

Slide 85 text

WordCamp Miami 2017 Event Propagation Bubbling el.addEventListener( 'click', sayHi, false ); Capturing el.addEventListener( 'click', sayHi, true ); Stopping Propagation event.stopPropagation(); @zgordon WordCamp DC 2017

Slide 86

Slide 86 text

Practice 2.3 Not Going to Practice ;) @zgordon javascriptforwp.com/event-propagation WordCamp DC 2017

Slide 87

Slide 87 text

WordCamp Miami 2017 JavaScript & APIs Made Simple 1. JS Basics @zgordon 2. The DOM 3. DOM Events WordCamp DC 2017

Slide 88

Slide 88 text

WordCamp DC 2017 JavaScript & APIs Made Simple 1. JS Basics @zgordon 2. The DOM 3. DOM Events

Slide 89

Slide 89 text

WordCamp Miami 2017 It’s not that JavaScript is a hard or weird language. However, almost everything you do in JavaScript involves an API. That makes things more complicated. @zgordon WordCamp DC 2017

Slide 90

Slide 90 text

Final Practice / HW Pulling it All Together @zgordon WordCamp DC 2017

Slide 91

Slide 91 text

WordCamp Miami 2017 javascriptforwp.com/category/free-videos @zgordon Learn JavaScript Deeply with Zac Gordon @zgordon WordCamp DC 2017