Save 37% off PRO during our Black Friday Sale! »

WordCamp DC JavaScript Workshop

WordCamp DC JavaScript Workshop

These are the slides for my Introduction to JavaScript Workshop for WordCamp DC

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

July 16, 2017
Tweet

Transcript

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

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

  3. WordCamp DC 2017 HTML Markup language using tags @zgordon CSS

    Presentation language using key value pairs JavaScript An actual programming language
  4. 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
  5. 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
  6. WordCamp DC 2017 JavaScript & APIs Made Simple 1. JS

    Basics @zgordon 2. The DOM 3. DOM Events
  7. WordCamp DC 2017 JavaScript Basics POP QUIZ @zgordon +1 Point

    for Answer +1 Point for Code Example
  8. WordCamp DC 2017 Question 1/8 What is a variable? @zgordon

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

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

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

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

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

  14. WordCamp DC 2017 Question 7/8 How do you include JavaScript

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

    in a WP Theme? @zgordon
  16. WordCamp DC 2017 How Did You Do??? POP QUIZ @zgordon

    +1 Point for Answer +1 Point for Code Example
  17. WordCamp Europe 2017 Variable A container for storing values (in

    memory) @zgordon var username = 'zgordon'; let username = 'zgordon'; const siteURL = 'https://site.com';
  18. WordCamp DC 2017 Array A collection of values @zgordon let

    postIds = [ 1, 2, 3, 5 ]; let usernames = [ 'zgordon', 'admin' ];
  19. 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
  20. WordCamp DC 2017 Functions Let us write, call and reuse

    blocks of code @zgordon function getPosts() { let posts = apiMagic(); // Will learn return posts; } getPosts();
  21. WordCamp Europe 2017 Function Parameters Can pass data into functions

    @zgordon function getUser( id = 0 ) { let user = apiMagic( id ); return user; } getUser( 1 );
  22. 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();
  23. 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 ] ); }
  24. 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 ); }
  25. 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' ); }
  26. WordCamp DC 2017 Include JS in HTML @zgordon <html> <head>

    </head> <body> <script src="index.js"></script> </body> </html>
  27. 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
  28. WordCamp DC 2017 JavaScript & APIs Made Simple 1. JS

    Basics @zgordon 2. The DOM 3. DOM Events
  29. WordCamp DC 2017 The DOM
 Document Object Model @zgordon

  30. WordCamp DC 2017 The DOM is an API For HTML

    (XML & SVG) @zgordon
  31. WordCamp DC 2017 The DOM is NOT Source Code @zgordon

  32. WordCamp DC 2017 @zgordon BROWSER DOM HTML JavaScript

  33. WordCamp DC 2017 Build documents, navigate their structure, and add,

    modify, or delete elements and content. @zgordon
  34. The DOM API 1. Build 2. Navigate 3. Add, Modify,

    Delete WordCamp DC 2017 @zgordon
  35. The DOM API 1. Build Nodes 2. Navigate Selection, Traversal

    3. Add, Modify, Delete Append, Set, Remove WordCamp DC 2017 @zgordon
  36. Everything is a Node In the DOM WordCamp DC 2017

    @zgordon
  37. WordCamp DC 2017 Common Node Types • Document [9] •

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

    • DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11] @zgordon
  39. WordCamp DC 2017 @zgordon

  40. 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
  41. Practice 1.1
 Looking up Node Types @zgordon WordCamp DC 2017

  42. WordCamp Miami 2017 Document Object
 Methods @zgordon WordCamp DC 2017

  43. 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
  44. 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
  45. WordCamp Miami 2017 Setting Node Values el.innerText = 'New'; el.innerHTML

    = '<p>New</p>'; input.value = 'zgordon'; @zgordon const el = document.getElementById( 'main' ); WordCamp DC 2017
  46. 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
  47. Practice 1.2 Getting & Setting Values @zgordon WordCamp DC 2017

  48. WordCamp Miami 2017 DOM Traversal @zgordon WordCamp DC 2017

  49. 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
  50. WordCamp Miami 2017 @zgordon p div Text p a Text

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

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

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

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

    Text Children Text Text p WordCamp DC 2017
  55. 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
  56. Practice 1.3 DOM Traversal @zgordon WordCamp DC 2017

  57. WordCamp Miami 2017 Creating & Appending 
 Nodes @zgordon WordCamp

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

    ) document.createDocumentFragment() @zgordon WordCamp DC 2017
  59. WordCamp Miami 2017 Appending Nodes parent.appendChild( newEl ) parent.insertBefore( newEl,

    el ) parent.innerHTML = '<p>Text</p>' @zgordon WordCamp DC 2017
  60. 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
  61. WordCamp Miami 2017 “Fake” Appending Nodes let pEl = document.querySelector(

    'p' ), markup = ''; markup += '<a href="https://site.com">' ); markup += 'Link Text'; markup += '</a>'; pEl.innerHTML = markup; @zgordon WordCamp DC 2017
  62. Practice 1.4 Creating & Appending 
 Nodes @zgordon WordCamp DC

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

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

    Nodes el.remove() el.removeChild() WordCamp DC 2017
  65. 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
  66. Practice 1.5 Cloning & Removing @zgordon WordCamp DC 2017

  67. WordCamp Miami 2017 JavaScript & APIs Made Simple 1. JS

    Basics @zgordon 2. The DOM 3. DOM Events WordCamp DC 2017
  68. WordCamp Miami 2017 DOM Events w
 JavaScript @zgordon WordCamp Europe

    2017
  69. 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
  70. WordCamp Miami 2017 Hooking into Events w JavaScript @zgordon 1.

    Inline in HTML 2. Global 1 Off 3. Listeners Best <a onclick="alert('hi')">Alert</a> a.onclick = sayHi a.addEventListener( 'click’, sayHi, false ) WordCamp DC 2017
  71. 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
  72. 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
  73. Practice 2.1 Event Listener Practice @zgordon WordCamp DC 2017

  74. WordCamp Miami 2017 The Event 
 Object @zgordon WordCamp DC

    2017
  75. 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
  76. Practice 2.2 Checking Out the Event Object @zgordon WordCamp DC

    2017
  77. WordCamp Miami 2017 Event 
 Propagation @zgordon WordCamp DC 2017

  78. WordCamp Miami 2017 Event Propagation How notifications of events spreads

    through the DOM @zgordon javascriptforwp.com/event-propagation WordCamp DC 2017
  79. WordCamp Miami 2017 @zgordon <html> <body> <p> <a> document window

    Event Propagation WordCamp DC 2017
  80. WordCamp Miami 2017 @zgordon <html> <body> <p> <a> document window

    Event Propagation WordCamp DC 2017
  81. WordCamp Miami 2017 @zgordon Event Propagation <html> <body> <p> <a>

    document window Phase 1 - Capturing WordCamp DC 2017
  82. WordCamp Miami 2017 @zgordon Event Propagation <html> <body> <p> <a>

    document window Phase 2 - Target <a> Phase 1 - Capturing WordCamp DC 2017
  83. WordCamp Miami 2017 @zgordon Event Propagation <html> <body> <p> <a>

    document window <a> Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling WordCamp DC 2017
  84. WordCamp Miami 2017 @zgordon Event Propagation <html> <body> <p> <a>

    document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling <a> WordCamp DC 2017
  85. 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
  86. Practice 2.3 Not Going to Practice ;) @zgordon javascriptforwp.com/event-propagation WordCamp

    DC 2017
  87. WordCamp Miami 2017 JavaScript & APIs Made Simple 1. JS

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

    Basics @zgordon 2. The DOM 3. DOM Events
  89. 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
  90. Final Practice / HW Pulling it All Together @zgordon WordCamp

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

    Gordon @zgordon WordCamp DC 2017