The history behind JS + intro to language structure, by Dimitris Michalakos and Elias Niaos.

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

2. 1995

10. Browser Wars: Round 1 –
Fight!

11. Mosaic
Air Mosaic Spyglass MosaicMosaic Netscape
Internet ExplorerNetscape Navigator
Browser genealogy (early days)

12. 97%
68%
9%
0% 0% 0% 0% 0% 0%0%
18%
54%
89.36%
80.45% 81.13%
59.67%
70%
64%
0% 0% 0%
3.76%
12.18% 12.13%
15.13%
22.70%
32.20%
0%
20%
40%
60%
80%
100%
120%
1994 Q1 1994 Q2 1995 Q1 1995 Q2 1996 Q2 1997 Q1 1997 Q2 1998 Q1 1998 Q2
Browser Usage 1994 Q1 – 1998 Q2
Mosaic Netscape Navigator Internet Explorer
SOURCE: WWW USER SURVEY, GRAPHICS, VISUALIZATION & USABILITY CENTER, GEORGIA INSTITUTE OF TECHNOLOGY

14. Java Scheme Self
Mocha
LiveScript
JavaScript
10 days
Licensed by
renamed
renamed

18. European Computer
Manufacturers Association
EcmaScript

19. • Netscape Enterprise
Server
• Microsoft Internet
Information Server (IIS)
• Mozilla Rhino
• Node.js
JavaScript on the server
Dec 1995

21. Why did JavaScript become so popular
imo?
1. It’s everywhere
2. It’s easy (to begin with)
3. It has excellent async features
This is Sparta

23. Values and types
• Dynamic
• Primitives & Object(s)
• var
• typeof

24. 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"

25. Values and types (2)
• Hoisting
• Coercion
• Boxing

26. 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

27. 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!

28. var a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"
var a = new String( "abc" ); // Manually boxing
var 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"

29. Just a few more things
• Function
• Scope
• Closure

30. 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

31. 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