ellak javascript day

ΕΛ/ΛΑΚ JavaScript Day - Jan 29, 2016

JavaScript:The Story behind

Browser Wars: Round 1 – Fight!

Mosaic

Air Mosaic Spyglass MosaicMosaic Netscape

Internet ExplorerNetscape Navigator

Browser genealogy (early days)

1994 Q1 1994 Q2 1995 Q1 1995 Q2 1996 Q2 1997 Q1 1997 Q2 1998 Q1 1998 Q20%

20%

40%

60%

80%

100%

120%

97%

68%

9%

0% 0% 0% 0% 0% 0%0%

18%

54%

89%

80% 81%

60%

70%64%

0% 0% 0%4%

12% 12%15%

23%

32%

Browser Usage 1994 Q1 – 1998 Q2

Mosaic Netscape Navigator Internet ExplorerSOURCE: WWW USER SURVEY, GRAPHICS, VISUALIZATION & USABILITY CENTER, GEORGIA INSTITUTE OF TECHNOLOGY

Java Scheme Self

Mocha

LiveScript

JavaScript

10 days

Licensed by

renamed

renamed

European ComputerManufacturers Association

EcmaScript

• Netscape Enterprise Server

• Microsoft Internet Information Server (IIS)

• Mozilla Rhino• Node.js

JavaScript on the server

Dec 1995

Why did JavaScript become so popular imo?

1. It’s everywhere2. It’s easy (to begin with)3. It has excellent async features

This is Sparta

Values and types

• Dynamic• Primitives & Object(s)

• var• typeof

var a; typeof a; // "undefined"

a = "hello world"; typeof a; // "string"

a = 42; typeof a; // "number"

a = true; typeof a; // "boolean"

a = { a: "hello world", b: 42, c: true };

typeof a; // "object"

a = undefined; typeof a; // "undefined"

a = { b: "c" }; typeof a; // "object"

Values and types (2)

• Hoisting• Coercion

• Boxing

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

var a = "42";

var b = Number( a ); // explicitly coerced here

a; // "42" b; // 42 -- the number!

var a = "42";

var b = a * 1; // "42" implicitly coerced to 42 here

a; // "42" b; // 42 -- the number!

var a = "abc";

a.length; // 3 a.toUpperCase(); // "ABC"

var a = new String( "abc" ); // Manually boxingvar b = new Number( 42 ); var c = new Boolean( true );

a.valueOf(); // "abc" b.valueOf(); // 42 c.valueOf(); // true

b = a + ""; // ‘b’ has the unboxed primitive value "abc"

typeof a; // "object" typeof b; // "string"

Just a few more things

• Function• Scope• Closure

function foo() { return 42; }

foo.bar = "hello world";

typeof foo; // "function" typeof foo(); // "number" typeof foo.bar; // "string“

function foo(a) { console.log( a + b ); }

var b = 2;foo( 2 ); // 4

function makeAdder(x) { return function(y) { return x + y; }; }

var add5 = makeAdder(5); var add10 = makeAdder(10);

console.log(add5(2)); // 7 console.log(add10(2)); // 12

ellak javascript day

Technology