JavaScript

• JavaScript is a high-level, dynamic, untyped, and interpreted programming language.

• It has been standardized in the ECMAScript language specification.

JavaScript

JavaScript

• It has an API for working with text, arrays, dates and regular expressions, but does not include any I/O, such as networking, storage or graphics facilities, relying for these upon the host environment in which it is embedded.

•  Developed under the name Mocha,  officially called LiveScript

• JavaScript was not developed at Sun Microsystems, the home of Java. JavaScript was developed at Netscape. It was originally called LiveScript, but that name wasn't confusing enough.

• The -Script suffix suggests that it is not a real programming language, that a scripting language is less than a programming language. But it is really a matter of specialization. Compared to C, JavaScript trades performance for expressive power and dynamism.

JavaScript

Douglas Crockford

Part 1

• Expressions - Statements
• Operators
• Values & Types
• Variables
• Blocks
• Loops
• Functions

First Look of Javascript

Part 1: First Look of Javascript

Statements - Expressions

var a = b + 2;

• 2 is a literal value expression
• b is a variable expression, which means to retrieve its current value
• b + 2 is an arithmetic expression, which means to do the addition
• a = b + 2 is an assignment expression, which means to assign the result of the b + 2 expression to the variable a

Part 1: First Look of Javascript

Operators

Operator
+        
-        
*        
/        
%        
++        
--        

Description
Addition
Subtraction
Multiplication
Division
Modulus
Increment
Decrement

Arithmetic Operators

Part 1: First Look of Javascript

Operators

Operator
==        
===        
!=        
!==        
>        
<        
>=        
<=        
?        

Description
equal to
equal value and equal type
not equal
not equal value or not equal type
greater than
less than
greater than or equal to
less than or equal to
ternary operator

Logical Operators

Part 1: First Look of Javascript

Value Types

Six data types that are primitives:

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (new in ECMAScript 6)

and Object

Part 1: First Look of Javascript

Variables

var amount = 99.99;

amount = amount * 2;

console.log( amount );      // 199.98

// convert `amount` to a string, and
// add "TL" at the end
amount = String( amount ) + " TL";

console.log( amount );      // "199.98 TL"

Part 1: First Look of Javascript

Blocks

var amount = 99.99;

// a general block
{
    amount = amount * 2;
    console.log( amount );  // 199.98
}

var amount = 99.99;

// is amount big enough?
if (amount > 10) {          // <-- block attached to `if`
    amount = amount * 2;
    console.log( amount );  // 199.98
}

Part 1: First Look of Javascript

Loops

var i = 0;

// a `while..true` loop would run forever, right?
while (true) {
    // stop the loop?
    if ((i <= 9) === false) {
        break;
    }

    console.log( i );
    i = i + 1;
}
// 0 1 2 3 4 5 6 7 8 9

Part 1: First Look of Javascript

Functions

function printAmount(amt) {
    console.log( amt.toFixed( 2 ) );
}

function formatAmount() {
    return amount.toFixed( 2 ) + " TL";
}

var amount = 99.99;

printAmount( amount * 2 );      // "199.98"

amount = formatAmount();
console.log( amount );          // "99.99 TL"

Part 1: First Look of Javascript

Reserved Words

break	        case		class		catch	    const
continue	debugger        default		delete	    do
else		export		extends		finally	    for
function	if 		import		in	    instanceof
new		return		super		switch	    this
throw		try		typeof		var	    void
while		with		yield

Reserved Words in Strict Mode

implements	package	    protected    static	    let	    interface
private    	public

Part 1: First Look of Javascript

Automatic Semicolon Insertion

Part 2

• Scope 
• Hoisting 
• IIFE
• Strict Mode

One Step Forward

Part 2: One Step Forward

Scopes

function outer() {
    var a = 1;

    function inner() {
        var b = 2;

        // we can access both `a` and `b` here
        console.log( a + b );   // 3
    }

    inner();

    // we can only access `a` here
    console.log( a );           // 1
}

outer();

Part 2: One Step Forward

Hoisting

var a = 2;

foo();                  // works because `foo()`
                        // declaration is "hoisted"

function foo() {
    a = 3;

    console.log( a );   // 3

    var a;              // declaration is "hoisted"
                        // to the top of `foo()`
}

console.log( a );   // 2

Part 2: One Step Forward

IIFE

(function foo(i) {
    if (i === 3) {
        return;
    }
    else {
        foo(++i);
    }
}(0));

Part 2: One Step Forward

Strict Mode

function foo() {
    "use strict";   // turn on strict mode
    a = 1;          // `var` missing, ReferenceError
}

foo();


function foo() {
    arguments.callee; // do something with this function object
    arguments.callee.caller; // and the calling function object
}

function bigLoop() {
    for(var i = 0; i < 100000; i++) {
        foo(); // Would normally be inlined...
    }
}

ES5 Note: undefined in ECMAScript 5 is no longer writable in strict mode, but its name can still be shadowed by for example a function with the name undefined.

Part 3

• Closure 
• Prototypal Inheritance

One Step Backward

Part 3: One Step Backward

Closure

function makeAdder(x) {
    // parameter `x` is an inner variable

    // inner function `add()` uses `x`, so
    // it has a "closure" over it
    function add(y) {
        return y + x;
    };

    return add;
}


var plusOne = makeAdder( 1 );

var plusTen = makeAdder( 10 );

plusOne( 3 );       // 4  <-- 1 + 3
plusOne( 41 );      // 42 <-- 1 + 41

plusTen( 13 );      // 23 <-- 10 + 13

Part 3: One Step Backward

Prototypal Inheritance

function myMethod() {
    return this.value;
}

var object1 = {
    get: myMethod,
    value: 42
};

var object2 = {
    get: myMethod,
    value: 3.14159
};

object1.get(); // 42
object2.get(); // 3.14159
myMethod(); // undefined

Part 3: One Step Backward

Prototypal Inheritance

Part 3: One Step Backward

Prototypal Inheritance

var parent = {
    get: function() {
        return this.value;
    },
    value: 42
};

var child = Object.create(parent);
child.value = 3.14159;

var grandChild = Object.create(child);

parent.get();     //42
child.get();      //3.14159
grandChild.get(); //3.14159

Part 3: One Step Backward

Prototypal Inheritance

Part 3: One Step Backward

Classical Inheritance

function Answer(value) {
    this.value = value;
}

Answer.prototype.get = function() {
    return this.value;
}


function answer1(value) {
    Answer.call(this, value);
}

answer1.prototype = Object.create(Answer.prototype);
answer1.prototype.constructor = answer1;

answer1.prototype.get = function(){
    return Answer.prototype.get.call(this) + "!!";
};

Part 3: One Step Backward

Proto vs Classic

function Answer(value) {
    this.value = value;
}

Answer.prototype.get = function() {
    return this.value;
}

var answer1 = new Answer(3.14159);

answer1.get();

var Answer = {
    get: function() {
        return this.value;
    },
    constructor: function(){
         this.value = value;
    }
};

var answer1 = Object.create(Answer);
answer1.constructor(3.14159);
answer1.get(); // 3.14159!!

Part 4

• Transpilers
• Automation Tools
• Chrome Dev Tools Console
• References

Others

Part 4: Others

Transpilers - Supersets

Part 4: Others

Transpilers - Supersets

Part 4: Others

Automation Tools

Part 4: Others

Scaffolding Tools

Part 4: Others

Dev Tools

console.log(object [, object, …]);

console.log('This is a string', { foo: 'bar' }, { bar: 'foo' });

Part 4: Others

Dev Tools

console.log('%cThis text is styled!', 
'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;');

Part 4: Others

Dev Tools

console.assert(expression, object)

var count = 5;
console.assert(count > 10, 'count is not larger than 10');

Part 4: Others

Dev Tools

console.count(label)

function clickHandler() {
    console.count('Click handler called');
}

Part 4: Others

Dev Tools

console.group(object[, object, …]) & console.groupEnd()

console.group("Getting Data");

console.log("Show Loader");

console.log("Get Data Success");

console.log("Hide Loader");

console.groupEnd();

Part 4: Others

Dev Tools

console.table(data)

var data = [
    {first_name: 'John', last_name: 'Doe'},
    {first_name: 'Jane', last_name: 'Doe'}
];

console.table(data);

Part 4: Others

Dev Tools

console.time(label) & console.timeEnd(label)

console.time('Calculate a');

var a = b + 2;

console.timeEnd('Calculate a');

Part 4: Others

Dev Tools

console.trace()

function foo() {
    console.trace();
}

foo();

At the End

References

• https://en.wikipedia.org/wiki/JavaScript
• http://javascript.crockford.com/javascript.html
• https://developer.mozilla.org/en-US/docs/Web/JavaScript
• https://www.udemy.com/understand-javascript
• http://slides.com/concise/js
• http://bonsaiden.github.io/JavaScript-Garden
• http://davidshariff.com/blog/what-is-the-execution-context-in-javascript
• http://eloquentjavascript.net/
• http://jsforcats.com/
• https://github.com/feross/standard
• http://www.letscodejavascript.com

At the End

Thank you