An introduction to Javascript, highlighting some of it's good and bad language design. This talk was part of the webcon 2014.

1. Javascript
- Javascript -
The Good,
the Bad and the Ugly

2. Javascript
● Thorsten Suckow-Homberg
Javascript since 1999
Author of conjoon (http://conjoon.com)
Trainer and consultant for Javascript and ExtJS
Senior Software Developer eyeworkers GmbH,
Karlsruhe
@thorstensuckow

3. Javascript
What is this talk about?
● Javascript
● History
● The good (a few words)
● The Bad (examples)
● The Ugly (more examples)

4. Javascript
„Sometimes language
designers make mistakes.“
- Douglas Crockford
http://en.wikipedia.org/wiki/Douglas_Crockford#mediaviewer/File:Douglas_Crockford.jpg

5. Javascript
History
http://de.wikipedia.org/wiki/Netscape_Communications#mediaviewer/File:Netscape_Logo.svg
http://de.wikipedia.org/wiki/Brendan_Eich#mediaviewer/File:BEich.jpg
http://de.wikipedia.org/wiki/AOL#mediaviewer/File:AOL_Logo.jpg
● created by Brendan Eich,
1995 (in 10 days)
● shipped as „Live Script“ with
Netscape Navigator 2.0
● Java Hype to this time:
Renamed to JavaScript in NN
2.0B3
● Microsoft adopts JS and
introduces it with IE 3.0
● Promotes its usage under the
term „Dynamic HTML“
● Standardized as ECMAScript
in June 1997

6. Javascript
What is Javascript, anyway?
● dynamic computer programming language
● prototype based scripting
● dynamic typing
● first-class functions
● Supporting:
object oriented
imperative
functional
programming style

7. Javascript
Java (Syntax)
Scheme
(Functions)
Self
(Prototypal
Inheritance)
JavaScript
Perl
(Regular
Expressions)

8. Javascript
Teasing the Good and the Bad
Good
functions
loose typing
dynamic objects
expressive literal object
notation
Bad
programming model
based on global variables
„Everything is an
Object.“
- Javascript
http://edndoc.esri.com

9. Javascript
Teasing the Good and the Bad – The Good
<script type =“text/javascript“>
var days = ['monday', 'tuesday',
'wednesday', 'thursday',
'friday', 'saturday', 'sunday'];
function getDayName(dayNum) {
return days[dayNum];
}
</script>

10. Javascript
Teasing the Good and the Bad – The Good
<script type =“text/javascript“>
function getDayName(dayNum) {
var days = ['monday', 'tuesday',
'wednesday', 'thursday',
'friday', 'saturday', 'sunday'];
return days[dayNum];
}
</script>

11. Javascript
Teasing the Good and the Bad – The Good
<script type =“text/javascript“>
var getDayName = function() {
var days = ['monday', 'tuesday',
'wednesday', 'thursday',
'friday', 'saturday', 'sunday'];
return function(dayNum) {
return days[dayNum];
}
}();
GetDayName(0); // > 'monday'
</script>

12. Javascript
Imperative Approach
var otherText = „oh hai!“;
var text = „Hello World!“;
console.log(otherText);
console.log(text);
// > Oh hai!
// > Hello World!
http://www.retro-programming.de

13. Javascript
Functional Approach
function otherText() {
console.log(„oh hai!“);
}
function text() {
console.log(„Hello World!“);
}
otherText();
text();
// > Oh hai!
// > Hello World!
http://www.excel-live.de

14. Javascript
Object Oriented Approach
function Bar(text) {
console.log(this.text);
console.log(text);
}
Bar.prototype = {
text : „oh hai!“
};
var foo = new Bar(„Hello World!“);
// > Oh hai!
// > Hello World!
http://www.teachitza.com/delphi/oop.htm

15. Javascript
… and the DOM, of course.
http://www.technologyuk.net/the_internet/web/document_object_model.shtml

16. Javascript
Teasing the Good and the Bad
1 + „foo“
// > 1foo
1 - „foo“
// >

17. Javascript
Teasing the Good and the Bad
1 + „foo“
// > 1foo
1 - „foo“
// > NaN
typeof(NaN)
//>

18. Javascript
Teasing the Good and the Bad
1 + „foo“
// > 1foo
1 - „foo“
// > NaN
typeof(NaN)
// > „number“

19. Javascript
Semicolon Insertion

20. Javascript
Semicolons
„Humans make mistakes.
Let's try to detect omitted
semicolons and insert them
automatically.“
- Javascript, 1995
console.log(„foo“);
console.log(„bar“)
console.log(„oh hai!“);
;

21. Javascript
function foo() {
return
{
bar : true
};
}
var bar = foo();
console.log(bar);
// > ?
Semicolons
;

22. Javascript
function foo() {
return
{
bar : true
};
}
var bar = foo();
console.log(bar);
// > undefined
Semicolons
;

23. Javascript
function foo() {
return
{
bar : true
};
}
var bar = foo();
console.log(bar);
// > undefined
Semicolons
;
;

24. Javascript
function foo() {
return
{
bar : true
};
}
var bar = foo();
console.log(bar);
// > undefined
Semicolons
;
;
;

25. Javascript
function foo() {
return {
bar : true
};
}
var bar = foo();
console.log(bar);
// > Object {bar:true}
Semicolons
;

26. Javascript
function foo() {
var a = 1
b = 2;
}
foo();
console.log(a);
console.log(b);
Semicolons
;

27. Javascript
function foo() {
var a = 1
b = 2;
}
foo();
console.log(a);
console.log(b);
// > Reference Error
// > 2
Semicolons
;

28. Javascript
Equality Operators

29. Javascript
0 == '0'
Equality Operators
=
==
===
!=
!==

30. Javascript
0 == '0' // true
0 === '0'
Equality Operators
==
===
!=
!==

31. Javascript
0 == '0' // true
0 === '0' // false
0 == ''
Equality Operators
==
===
!=
!==

32. Javascript
0 == '0' // true
0 === '0' // false
0 == '' // true
'' == '0'
Equality Operators
==
===
!=
!==

33. Javascript
0 == '0' // true
0 === '0' // false
0 == '' // true
'' == '0' // false
false == 'false'
Equality Operators
==
===
!=
!==

34. Javascript
0 == '0' // true
0 === '0' // false
0 == '' // true
'' == '0' // false
false == 'false' // false
false == '0'
Equality Operators
==
===
!=
!==

35. Javascript
0 == '0' // true
0 === '0' // false
0 == '' // true
'' == '0' // false
false == 'false' // false
false == '0' // true
Equality Operators
==
===
!=
!==

36. Javascript
'' == false // true
false == '0' // true
'' == '0' // ?
Equality Operators
==
===
!=
!==

37. Javascript
'' == false // true
false == '0' // true
'' == '0' // ?
'' => false => '0'
'' == '0' // ?!?!?
Equality Operators
==
===
!=
!==

38. Javascript
'' == false // true
false == '0' // true
'' == '0' // ?
'' => false =>'0'
'' == '0' // false
Equality Operators
==
===
!=
!==

39. Javascript
Equality Operators
==
!=
===
!==
Expected '===' and instead saw '=='.

40. Javascript
Arrays

41. foo = [1, 2, 3, 4];
bar = new Array(1, 2, 3, 4);
Javascript
Arrays
var foo = [];
var bar = new Array();

42. foo = [1, 2, 3, 4];
bar = new Array(1, 2, 3, 4);
Javascript
foo[0] = 1;
foo[1] = 2;
foo[2] = 3;
foo[3] = 4;
// > foo.length == 4
Arrays
var foo = [];
var bar = new Array();

43. Javascript
foo = [];
foo[11203] = 1;
// > foo.length == ?
Arrays
var foo = [];
var bar = new Array();

44. Javascript
foo = [];
foo[11203] = 1;
// > foo.length == 11204
Arrays
var foo = [];
var bar = new Array();

45. Javascript
foo = new Array(1, 2);
console.log(foo);
// > ?
Arrays
var foo = [];
var bar = new Array();

46. Javascript
foo = new Array(1, 2);
console.log(foo);
// > [1, 2]
Arrays
var foo = [];
var bar = new Array();

47. Javascript
foo = new Array(1, 2);
console.log(foo);
// > [1, 2]
bar = new Array(2);
console.log(bar);
// > ?
Arrays
var foo = [];
var bar = new Array();

48. Javascript
foo = new Array(1, 2);
console.log(foo);
// > [1, 2]
bar = new Array(2);
console.log(bar);
// > [undefined, undefined]
Arrays
var foo = [];
var bar = new Array();

49. Javascript
foo == true // ?
Arrays
var foo = [];
var bar = new Array();

50. Javascript
foo == true // false
Arrays
var foo = [];
var bar = new Array();
var txt = '';
if (foo) {
txt = 1;
} else {
txt = 2;
}
console.log(txt);

51. Javascript
foo == true // false
Arrays
var foo = [];
var bar = new Array();
var txt = '';
if (foo) {
txt = 1;
} else {
txt = 2;
}
console.log(txt);
// > 1

52. Javascript
Prototyping

53. Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;
console.log(wobble.i); // 0
console.log(wobble.bar[0]); // 0
wobble.i = 1;
wobble.bar[0] = 2;
console.log(wobble.i); // 1
console.log(wobble.bar[0]); // 2
var wibble = new Foo;
console.log(wibble.i);
console.log(wibble.bar[0]);
// > ?

54. Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;
console.log(wobble.i); // 0
console.log(wobble.bar[0]); // 0
wobble.i = 1;
wobble.bar[0] = 2;
console.log(wobble.i); // 1
console.log(wobble.bar[0]); // 2
var wibble = new Foo;
console.log(wibble.i, wibble.bar[0]);
// > 0, 2

55. Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
Foo.prototype.bar = new Array(0, 1);
var wobble = new Foo;
console.log(wobble.i); // 0
console.log(wobble.bar[0]); // 0
wobble.i = 1;
wobble.bar[0] = 2;
console.log(wobble.i); // 1
console.log(wobble.bar[0]); // 2
var wibble = new Foo;
console.log(wibble.i, wibble.bar[0]);
// > 0, 2
Foo.prototype.bar
wibble wobble

56. Summary:
In this episode, Sheldon defines a Function
and its prototype. While Leonard invokes the
function and creates a new object of it,
Howard changes the prototype.
In the meantime, Rajesh relies on Howard's
previously created object...
Penny just leans back and watches as all hell
breaks loose...
Will they ever figure out what happened?
Javascript
The BigBang Javascript Theory
Season 08 Episode 15:
The Viktor Paradoxon
Summary:
In this episode, Sheldon defines a Function
and its prototype. While Leonard invokes the
function and creates a new object of it,
Howard changes the prototype.
In the meantime, Rajesh relies on Howard's
previously created object...
Penny just leans back and watches as all hell
breaks loose...
Will they ever figure out what happened?

57. Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
var wobble = new Foo;
console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > ?
// > ?

58. Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
var wobble = new Foo;
console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > 0
// > 2, 2

59. Javascript
WAT?

60. true false
Javascript
Prototyping
var Foo = function() {
};
Foo.prototype.i = 0;
var wobble = new Foo;
console.log(wobble.i);
Foo.prototype.i = 2;
var wibble = new Foo;
console.log(wobble.i, wibble.i);
// > 0
// > 2, 2
wibble.i === undefined
Foo.prototype.i ===
undefined
wibble.i
true false
Object.prototype.i === Foo.prototype.i
undefined
true false
undefined Object.prototype.i

61. Javascript
DOM

62. Javascript
DOM
<html>
<head></head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>
console.log(foo);
// > ?

63. Javascript
DOM
console.log(foo);
// > <div id=“foo“>
<html>
<head></head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>

64. Javascript
DOM
console.log(foo);
// > <div id=“foo“>
foo.innerHTML = 'bar'
// > <div id=“foo“>bar</div>
<html>
<head></head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>

65. Javascript
DOM
console.log(foo);
foo.innerHTML = 'bar'
var foo = 'bar';
// > ?
<html>
<head></head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>

66. Javascript
DOM
console.log(foo);
foo.innerHTML = 'bar'
var foo = 'bar';
// > TypeError: foo is
// undefined
<html>
<head></head>
<body>
<div id="foo"></div>
<div id="bar"></div>
</body>
</html>

67. Javascript
● Building Ext JS 5 apps with Sencha
Architect
● Testing Ext JS 5 applications with
Siesta
● Javascript – The good, the bad and
the ugly & Improving Ext JS app
performance.
● Optimizing your current Ext JS
applications for touch and tablets
● Building Custom UI Components
With Ext JS 5
● Delivering a great user experience
with Ext JS 5
● How to secure your data with
Sencha Space
2014/12/02 Karlsruhe, Germany
http://senchaday.de

68. Javascript
Thank You!