Agenda

• Brief History
• Overview
• Ecosystem
• Features

Brief History

• 1995
  • Netscape recruited Breadan Eich to create:
    • a Java young brother
    • written directly in the HTML
    • prototype made in 10 days

Brief History

• 1995
  • Netscape recruited Breadan Eich to create:
    • a Java young brother
    • written directly in the HTML
    • prototype made in 10 days
• 1996
  • Nestscape submitted Javascript to Ecma International
    • former European Computer Manufacturers Association
• 1997: EcmaScript 1
• 1998: EcmaScript 2
• 1999: EcmaScript 3
• ????: EcmaScript 4

Brief History

• 1995
  • Netscape recruited Breadan Eich to create:
    • a Java young brother
    • written directly in the HTML
    • prototype made in 10 days
• 1996
  • Nestscape submitted Javascript to Ecma International
    • former European Computer Manufacturers Association
• 1997: EcmaScript 1
• 1998: EcmaScript 2
• 1999: EcmaScript 3
• ????: EcmaScript 4
• 2009: EcmaScript 5 (Harmony)
• 2011: EcmaScript 5.1

Brief History

• 1995
  • Netscape recruited Breadan Eich to create:
    • a Java young brother
    • written directly in the HTML
    • prototype made in 10 days
• 1996
  • Nestscape submitted Javascript to Ecma International
    • former European Computer Manufacturers Association
• 1997: EcmaScript 1
• 1998: EcmaScript 2
• 1999: EcmaScript 3
• ????: EcmaScript 4
• 2009: EcmaScript 5 (Harmony)
• 2011: EcmaScript 5.1
• 2015: EcmaScript 2015
• 2016: EcmaScript 2016
• 2017: EcmaScript 2017

ECMAScript proposals

Overview

• (Usually) Interpreted
• Dynamic typing
  • type checking at run time
• Weakly typed
  • operations without defined types for the operands in question
  • implicit type conversions

  "10" + 1 // "101"
  "10" / 1 // 10

• Prototype Based

Ecosystem

• Engines
  • V8
  • Rhino

Ecosystem

• Engines
  • V8
  • Rhino
• Runtimes
  • Browsers
  • Node.js: V8 + event loop + C
    • Ryan Dahl: Node JS

Ecosystem

• Engines
  • V8
  • Rhino
• Runtimes
  • Browsers
  • Node.js: V8 + event loop + C
    • Ryan Dahl: Node JS
• Package Manager
  • npm

Ecosystem

• Engines
  • V8
  • Rhino
• Runtimes
  • Browsers
  • Node.js: V8 + event loop + C
    • Ryan Dahl: Node JS
• Package Manager
  • npm
• Transpilers
  • Babel

Ecosystem

• Engines
  • V8
  • Rhino
• Runtimes
  • Browsers
  • Node.js: V8 + event loop + C
    • Ryan Dahl: Node JS
• Package Manager
  • npm
• Transpilers
  • Babel
• Linters
  • ESLint

Ecosystem

• Engines
  • V8
  • Rhino
• Runtimes
  • Browsers
  • Node.js: V8 + event loop + C
    • Ryan Dahl: Node JS
• Package Manager
  • npm
• Transpilers
  • Babel
• Linters
  • ESLint
• Bundlers
  • Webpack

Language

• Declaring constants/variables
• Data types
• Declaring functions
• Passing functions as argument
• Using Object and Arrays
• Handling Promises

Playground

• Codepen
• JSFiddle
• Console in your browser

Code Structure

alert('Hello'); alert('World');
// Hello World

alert('Hello')
alert('World')
/* Hello World */

Constants and variables

let name
name = 'Tomato'
name = 'Tomato'

const name2 = 'Potato'

Data types

let a // undefined
a = null
a = 2
a = '2'
a = true
alert(typeof a) // "boolean"

Arrays

const animals = ['Giraffe', 'Cat', 22]

Arrays

const animals = ['Giraffe', 'Cat', 22]

alert(animals[1]) // 'Cat'

Arrays

const animals = ['Giraffe', 'Cat', 22]

alert(animals[1]) // 'Cat'

Array.isArray('blah') // false
animals.push('Dog')

MDN - Array

Objects

const logins = {
  test: 'test123',
  admin: 'admin'
}

Objects

const logins = {
  test: 'test123',
  admin: 'admin'
}

logins.test // 'test123'
logins['admin']
logins.user = 'changeme'

Objects

const logins = {
  test: 'test123',
  admin: 'admin'
}

logins.test // 'test123'
logins['admin']
logins.user = 'changeme'

Object.keys(logins) // ['test', 'admin', 'user']
logins.hasOwnProperty('root') // false

MDN - Object

Conditionals

if

let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year < 2015) {
  alert( 'Too early...' )
} else if (year > 2015) {
  alert( 'Too late' )
} else {
  alert( 'Exactly!' )
}

Conditionals

if

let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year < 2015) {
  alert( 'Too early...' )
} else if (year > 2015) {
  alert( 'Too late' )
} else {
  alert( 'Exactly!' )
}

0, an empty string "", null, undefined and NaN become false (falsy values)

Ternary operator

let accessAllowed = (age > 18) ? 'content' : 'nope'

Ternary operator

let accessAllowed = (age > 18) ? 'content' : 'nope'

let accessAllowed = age > 18
  ? 'content'
  : 'nope'

Declaring functions

function sum (a, b) {
  return a + b
}

Declaring functions

function sum (a, b) {
  return a + b
}

const sum = (a, b) => {
  return a + b
}

Declaring functions

function sum (a, b) {
  return a + b
}

const sum = (a, b) => {
  return a + b
}

const sum = (a, b) => a + b

Functions as arguments

const print = (operation, a, b) => {
  const result = operation(a, b)
  alert(result)
}

Functions as arguments

const print = (operation, a, b) => {
  const result = operation(a, b)
  alert(result)
}

print(sum, 1, 2)

Functions as arguments

const print = (operation, a, b) => {
  const result = operation(a, b)
  alert(result)
}

print(sum, 1, 2)

print((a, b) => a + b, 1, 2)

Functions as arguments - forEach

[1,2,3,4].forEach(alert)

Functions as arguments - forEach

[1,2,3,4].forEach(alert)

[1,2,3,4].forEach((a) => {
  alert(a + 2)
})

Callbacks

Callbacks

const alertTest = alert('test')
setTimeout(alertTest, 100)

Callbacks

const alertTest = alert('test')
setTimeout(alertTest, 100)

const button = document.getElementById('load-button')
const hello = function (event) {
  alert('clicked')
}
button.addEventListener("click", hello)

Promises

new Promise((resolve, reject) => {
})

Promises

new Promise((resolve, reject) => {
})

const letsParty = () => {
  return new Promise((resolve, reject) => {
    Date.now().getDay() !== 6
      ? reject()
      : setTimeout(resolve, 100)
  }
})

Promises

new Promise((resolve, reject) => {
})

const letsParty = () => {
  return new Promise((resolve, reject) => {
    Date.now().getDay() !== 6
      ? reject()
      : setTimeout(resolve, 100)
  }
})

letsParty().then(() => {
  // ...
})

Promises

new Promise((resolve, reject) => {
})

const letsParty = () => {
  return new Promise((resolve, reject) => {
    Date.now().getDay() !== 6
      ? reject()
      : setTimeout(resolve, 100)
  }
})

letsParty().then(() => {
  // ...
})

letsParty().then((response) => {
  // ...
}).catch((error) => {
  // ...
})

For more

• classes
• scope, bind
• promises

• prototype
• var
• this
• for, while, do/while
• switch
• async/await

Resources

• The Modern JavaScript Tutorial
• Weak And Strong Typing
• You don't know JS
• ES6 Features
• Modern JavaScript cheatsheet