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