Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Interesting Things About JavaScript - WC San José 2017

Zac Gordon
September 02, 2017

Interesting Things About JavaScript - WC San José 2017

In this talk I go over various things about JavaScript that I find interesting.

Zac Gordon

September 02, 2017
Tweet

More Decks by Zac Gordon

Other Decks in Technology

Transcript

  1. These Are APIS
 NOT JavaScript:
 AJAX (XMLHttpRequest, fetch) 
 the

    DOM, Shadow DOM, Events, JSON, Canvas, Console Interesting Things About JavaScript w @zgordon
  2. 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
  3. WordCamp Miami 2017 However, JavaScript does work differently than other

    languages. Interesting Things About JavaScript w @zgordon
  4. ‘use strict’ // Applied to entire file function render( post

    ) { ‘use strict’ // Applied to function scope }
  5. var ids = [ 1, 2, 3 ] // Semicolon

    needed in for loop for ( let i = 0; i < ids.length; i++ ) { console.log( ids[ i ] ) }
  6. // 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 ); }
  7. { // 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
  8. // Why can we call render before declaring it? render(

    "Hello World!" ); function render( title ) { console.log( title ); }
  9. 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
  10. ‘use strict’ const post = {}, ids = [ 1,

    2, 3 ], id = 1; post.title = "Hello World!"; // Allowed post = "Hello World!"; // Error ids.push( 4 ); // Allowed id++; // Error
  11. this is determined by how it is called, not where

    it is declared Interesting Things About JavaScript w @zgordon
  12. var post = { id: 1, render: function() { console.log(

    this.id ); } } post.render(); // 1 class Post { constructor( id ) { this.id = id; } render() { console.log( this.id ); } } var myPost = new Post( 1 ); myPost.render(); // 1 var UI = { id: 'UI-999', render: () => { console.log( this.id ); } } post.render(); // undefined
  13. var post = { id: 1, render: function() { console.log(

    this.id ); } } UI.render(); // UI-999 UI.render.call( post ); // 1 UI.render.apply( post ); // 1 var r = UI.render.bind( post ); r(); // 1 var UI = { id: 'UI-999', render: function() { console.log( this.id ); } }
  14. class Post { constructor( id ) { this.id = id;

    } render() { console.log( this.id ); } } var p = new Post( 1 ); typeof p; // 'function'
  15. class Content { constructor( id ) { this.id = id;

    } render() { console.log( this.id ); } } class Post extends Content { constructor( id, tag) { super( id ) this.tag = tag; } }
  16. var newPost = {}; function renderId() { console.log( this.id );

    } function renderTitle() { console.log( this.id ); } Object.assign( newPost, { id: 3, title: 'New Post', renderId: renderId, renderTitle } ); console.log( newPost );
  17. 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
  18. 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
  19. Interesting Things About JavaScript w @zgordon Content: {}, id, title,

    render Post: Content, tag, category Page: Content, template User: {}, id, render Admin: User, template Composition
  20. function render( post ) { var container = document.getElementById( 'main'

    ), article = document.createElement('article'), markup = ''; markup += `<h1><a href="${post.link}">${post.title.rendered}</a></h1>`; markup += `<div class=“entry-content">${post.content.rendered}</div>`; article.innerHTML = markup; container.appendChild( article ); }
  21. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon <html>

    <body> <p> <a> document window Event Propagation
  22. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon <html>

    <body> <p> <a> document window Event Propagation
  23. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window Phase 1 - Capturing
  24. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window Phase 2 - Target <a> Phase 1 - Capturing
  25. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window <a> Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling
  26. WordCamp Miami 2017 Interesting Things About JavaScript w @zgordon Event

    Propagation <html> <body> <p> <a> document window Phase 1 - Capturing Phase 2 - Target Phase 3 - Bubbling <a>
  27. 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