Introduction

Yesterday

Today
Tommorrow

JS History

Created in Netscape Communications Corporation, by Brendan Eich.
For 10 days in May of 1995, like a NetScape web-browser extension.

Working name – Mocha. First official name – LiveScript, then
renamed to JavaScript (as a marketing ploy).

Originally created as lightweight interpreting language to
complement Java by appealing non-professional developers.

JS History

<h1>Table of Factorials</h1>
<script>
    function factorial(n) {
        if (n <= 1) return 1; 
        else return n * factorial(n - 1);
    }
    document.write("<table>");
    document.write("<tr><th>n</th><th>n!</th></tr>");
    for (var i = 1; i <= 10; i++) {
        document.write("<tr><td>" + i + "</td><td>" + factorial(i) + "</td></tr>");
    }
    document.write("</table>");
    document.write("Generated at " + new Date());
</script>

Browser Wars

Standardization

ECMAScript 1 in 1997

ECMAScript 2 in 1998.

ECMAScript 3 in 1999.

ECMAScript 4 – never released.

ECMAScript 5 in 2009.

ECMAScript 6 in 2015 – CURRENT.

Modern Days

Poularity

Ease of Access
Duck Typing
Functional programming
Prototype-oriented programming
Client-side
Internet connection independence

Pros

Ease of Access
Duck Typing
Lack of standardization
Insecure
Lack of I/O (client-side)

Cons

ECMAScript - 6 (ES2015) Features

const, let, functions block scope, args default values, var-args, spread operator, binary and octal literals, unicode regexp, object updates, array and object matching, export and import, class, extends, static, Symbol, iterator updates, Generator, Set, Map, Weak-Link, typed arrays, Promise, Proxy, Reflection, collation, formatting features, etc...

Enough Talking!

What is your current JS level?

var Hello = new Binding({
  greet: function(who) {
    alert("Hello " + who);
  },
  
  onclick: function() {
    this.greet(Hello.WORLD)
  }
}, {
  WORLD: "World"
});
document.bind("#hello", Hello);

Dynamic by nature!

/**
* For Local Files!
*/
loadAsync('app/src/some-local-script.js');

/**
* Or for some resources from anywhere in internet!
*/
loadAsync('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js');

/**
* Let user full control!
*/
loadAsync(prompt('Please input your url for JavaScript file.'));

function loadAsync(path) {
    var scriptTag = document.createElement('script');
    scriptTag.src = path;
    document.body.appendChild(scriptTag);
}

Asynchronous

(function() {
    'use strict';
    let log = console.log.bind(console),
        playerOneSteps = 0,
        playerTwoSteps = 0;

    var playerOne = setInterval(() => {
        setTimeout(() => {
            playerOneSteps++;
            log('Player 1 turn');
        }, someRandom());
    }, 300);

    var playerTwo = setInterval(() => {
        setTimeout(() => {
            playerTwoSteps++;
            log('Player 2 turn');
        }, someRandom());
    }, 300);

    var second = setInterval(() => {
        log('!!! -Current Score- !!!');
        log('Player One make turns: %d', playerOneSteps);
        log('Player Two make turns: %d', playerTwoSteps);
    }, 1000);

    function someRandom() {
        return Math.round(Math.random() * 5000 + 1000);
    }

    function makeItStop() {
        clearInterval(playerTwo);
        clearInterval(playerOne);
        clearInterval(second);
    }
}());