JavaScript Made Simple - WordCamp Miami 2017

JavaScript Made Simple Zac Gordon @zgordon javascriptforwp.com

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

JavaScript Made Simple 1. Language Basics 2. The DOM API
3. DOM Events WordCamp Miami 2017 @zgordon

The JavaScript Language WordCamp Miami 2017 @zgordon

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

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

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

Function Parameters Can pass data into functions WordCamp Miami 2017
@zgordon function getUser( userId ) { let user= apiMagic… // Will learn return user; } getUsers( 1 );

Objects Container with properties (values) and methods (functions). WordCamp Miami
2017 @zgordon let post = { id: 1, title: ‘Hello Object’, displayTitle: function() { console.log( this.title ); } } post.id; post.title; post.displayTitle();

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

For Of Loop Lets us loop through an array WordCamp
Miami 2017 @zgordon let postIds = [ 1, 2, 34, 55, 77 ]; for( let id of postIds ) { console.log( id ); }

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

Including JavaScript in Your Site WordCamp Miami 2017 @zgordon

Include JS in HTML WordCamp Miami 2017 @zgordon <html> <head>
</head> <body> <script src="index.js"></script> </body> </html>

Include JS in WP Theme WordCamp Miami 2017 @zgordon function
theme_scripts() { wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.1', true ); } add_action('wp_enqueue_scripts', ’theme_scripts', 999);

The DOM Document Object Model WordCamp Miami 2017 @zgordon

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

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

WordCamp Miami 2017 @zgordon BROWSER DOM HTML JavaScript

WordCamp Miami 2017 The DOM is NOT Source Code @zgordon

What to Know About the DOM 1. Nodes 2. Document
Object Methods 3. Traversal (parents, children, siblings) 4. Creating, Appending (Cloning, Deleting) WordCamp Miami 2017 @zgordon

Everything in the DOM is a Node WordCamp Miami 2017
@zgordon

Some of the Types of DOM Nodes • Document [9]
• DocumentType [10] • Element [1] • Text [3] • Comments [8] • DocumentFragments [11] WordPress REST API

WordCamp Miami 2017 @zgordon

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

Document Object Methods WordCamp Miami 2017 @zgordon

Things the Document Object Can Do WordCamp Miami 2017 @zgordon

Document Object Methods document.getElementById('main') document.getElementsByTagName('a') document.getElementsByClassName('post') document.querySelector('.entry-title a') document.querySelectorAll('.entry-title a')
WordCamp Miami 2017 @zgordon DOM functions for getting HTML elements

Getting Node Values el.innerText el.innerHTML input.value WordCamp Miami 2017 @zgordon
el.id el.href el.dataset.custom

Setting Node Values el.innerText = 'New'; el.innerHTML = '<p>New</p>'; input.value
= 'zgordon'; WordCamp Miami 2017 @zgordon

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

DOM Traversal WordCamp Miami 2017 @zgordon

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

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

Text Text Sibling

Text Text Child Text

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

DOM Traversal WordCamp Miami 2017 @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 el = document.querySelector('p');

Creating & Appending Nodes WordCamp Miami 2017 @zgordon

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

Appending Nodes WordCamp Miami 2017 @zgordon let p = document.querySelector('p');
let a = document.createElement('a'); let text = document.createTextNode('Link text'); a.appendChild( text ); a.href = "https://link.com" p.appendChild( a );

“Fake” Appending Nodes WordCamp Miami 2017 @zgordon let p =
document.querySelector('p'); let markup = ''; markup += '<a href="https://site.com">'; markup += 'Link Text'; markup += '</a>'; p.innerHTML = markup;

Cloning & Removing Nodes WordCamp Miami 2017 @zgordon

Cloning Nodes WordCamp Miami 2017 @zgordon let ul = document.querySelector('ul');
let li = document.querySelector('li'); let newLi = li.cloneNode( true ); ul.appendChild( li );

Removing Nodes WordCamp Miami 2017 @zgordon let el = document.querySelector('.remove');
el.remove();

Events w JavaScript WordCamp Miami 2017 @zgordon

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

Hook JavaScript into Events WordCamp Miami 2017 @zgordon 1.Inline 2.Global
3.Listeners <a script="alert('hi')">Alert</a> a.onclick = sayHi a.addEventListener( 'click’, sayHi, false )

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

The Event Object WordCamp Miami 2017 @zgordon

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

Event Propagation WordCamp Miami 2017 @zgordon

Event Propagation How notifications of events spreads through the DOM

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

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

document window Phase 2 - Target <a> Phase 1 - Capturing

document window <a> Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling

document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling <a>

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

javascriptforwp.com WordCamp Miami 2017 @zgordon Learn JavaScript Deeply with Zac
Gordon

JavaScript Made Simple - WordCamp Miami 2017

JavaScript Made Simple - WordCamp Miami 2017

More Decks by Zac Gordon

Other Decks in Technology

Featured

Transcript