Interesting Things
About JavaScript
Zac Gordon @zgordon
https://javascriptforwp.com
Slide 2
Slide 2 text
These Are APIS
NOT JavaScript:
AJAX (XMLHttpRequest, fetch)
the DOM, Shadow DOM, Events,
JSON, Canvas, Console
Interesting Things About JavaScript w @zgordon
Slide 3
Slide 3 text
WordCamp Miami 2017
JavaScript is not a hard language.
Almost everything you do in JavaScript
involves an API. That makes things
more complicated.
Interesting Things About JavaScript w @zgordon
Slide 4
Slide 4 text
WordCamp Miami 2017
However, JavaScript does work
differently than other languages.
Interesting Things About JavaScript w @zgordon
Slide 5
Slide 5 text
JavaScript is a compiled language
Interesting Things About JavaScript w @zgordon
Slide 6
Slide 6 text
‘use strict’;
Interesting Things About JavaScript w @zgordon
Slide 7
Slide 7 text
‘use strict’ // Applied to entire file
function render( post ) {
‘use strict’ // Applied to function scope
}
Slide 8
Slide 8 text
‘use strict’
// Need var, let or const
postIds = [ 1, 2, 3, 4 ]; // Error
Slide 9
Slide 9 text
semicolons;
Interesting Things About JavaScript w @zgordon
Slide 10
Slide 10 text
The cool kids don’t use semicolons,
but sometimes they are necessary.
Slide 11
Slide 11 text
var string = 'This works';
var another = 'So does this'
Slide 12
Slide 12 text
var ids = [ 1, 2, 3 ]
// Semicolon needed in for loop
for ( let i = 0; i < ids.length; i++ ) {
console.log( ids[ i ] )
}
Slide 13
Slide 13 text
3 Types of Scope:
Global, Function, Block
Interesting Things About JavaScript w @zgordon
Slide 14
Slide 14 text
// Global Scope: postId
var postIds = [ 1, 2, 3 ];
// Global Scope: render
function render( postId ) {
// Function Scope: postId
console.log( postId );
}
for( let postId of postIds ) {
// Block Scope: postId
console.log( postId );
}
Slide 15
Slide 15 text
{
// var is NOT Block Scoped
var post1 = 1;
}
console.log( post1 ); // Logs 1
{
// let IS Block Scoped
let post2 = 2;
}
console.log( post2 ); // Returns error
Slide 16
Slide 16 text
function hoisting
Interesting Things About JavaScript w @zgordon
Slide 17
Slide 17 text
Why can we call a function
before we declare it?
Slide 18
Slide 18 text
// Why can we call render before declaring it?
render( "Hello World!" );
function render( title ) {
console.log( title );
}
Slide 19
Slide 19 text
var testUI = new UI(); // Reference Error
class UI {
}
Slide 20
Slide 20 text
ES6 Classes are
NOT Hoisted
Slide 21
Slide 21 text
var, let, const
Interesting Things About JavaScript w @zgordon
Slide 22
Slide 22 text
keyword var let const
global scope YES YES YES
function scope YES YES YES
block scope NO YES YES
can be
reassigned
YES YES NO
Interesting Things About JavaScript w @zgordon
Class: Content
- id
- title
- render
Sub Class: Post
- tag
- category
Sub Class: Page
- template
Class: User
- id
- render
Sub Class: Admin
- category
- template
Class Inheritance
Slide 42
Slide 42 text
Interesting Things About JavaScript w @zgordon
Class: Content
- id
- title
- render
Sub Class: Post
- tag
- category
Sub Class: Page
- template
Class: User
- id
- render
Sub Class: Admin
- category
- template
Class Inheritance
Slide 43
Slide 43 text
Interesting Things About JavaScript w @zgordon
Content: {}, id, title, render
Post: Content, tag, category
Page: Content, template
User: {}, id, render
Admin: User, template
Composition
Slide 44
Slide 44 text
Template Strings
Interesting Things About JavaScript w @zgordon
Slide 45
Slide 45 text
function render( post ) {
var container = document.getElementById( 'main' ),
article = document.createElement('article'),
markup = '';
markup += `
WordCamp Miami 2017
Event Propagation
Bubbling
el.addEventListener( 'click', sayHi, false );
Capturing
el.addEventListener( 'click', sayHi, true );
Stopping Propagation
event.stopPropagation();
Interesting Things About JavaScript w @zgordon
Slide 54
Slide 54 text
webpack & HTTP/2
Interesting Things About JavaScript w @zgordon
https://medium.com/webpack/webpack-http-2-7083ec3f3ce6
Slide 55
Slide 55 text
WordCamp Miami 2017
javascriptforwp.com/category/free-videos
Interesting Things About JavaScript w @zgordon
Learn JavaScript Deeply with Zac Gordon
@zgordon