Javascript

- Javascript -The Good,

the Bad and the Ugly

Javascript

● Thorsten Suckow-HombergJavascript since 1999Author of conjoon (http://conjoon.com)Trainer and consultant for Javascript and ExtJSSenior Software Developer eyeworkers GmbH,Karlsruhe

@thorstensuckow

Javascript

What is this talk about?

● Javascript● History● The good (a few words)● The Bad (examples)● The Ugly (more examples)

Javascript

„Sometimes language designers make mistakes.“ - Douglas Crockford

http://en.wikipedia.org/wiki/Douglas_Crockford#mediaviewer/File:Douglas_Crockford.jpg

Javascript

History

http://de.wikipedia.org/wiki/Brendan_Eich#mediaviewer/File:BEich.jpg

http://de.wikipedia.org/wiki/Netscape_Communications#mediaviewer/File:Netscape_Logo.svg

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

Javascript

What is Javascript, anyway?

● dynamic computer programming language● prototype based scripting● dynamic typing● first-class functions● Supporting:

object orientedimperativefunctional

programming style

Javascript

Java (Syntax)

Scheme (Functions)

Self(PrototypalInheritance)

Perl(Regular

Expressions)

JavaScript

Javascript

Teasing the Good and the Bad

Goodfunctionsloose typing dynamic objectsexpressive literal object notation

Badprogramming model based on global variables

„Everything is an Object.“ - Javascript

http://edndoc.esri.com

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>

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>

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>

Javascript

var otherText = „oh hai!“;var text = „Hello World!“;

console.log(otherText);console.log(text);

// > Oh hai!// > Hello World!

Imperative Approach

http://www.retro-programming.de

Javascript

function otherText() { console.log(„oh hai!“);}

function text() { console.log(„Hello World!“);}

otherText();text();

// > Oh hai!// > Hello World!

Functional Approach

http://www.excel-live.de

Javascript

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!

Object Oriented Approach

http://www.teachitza.com/delphi/oop.htm

Javascript

… and the DOM, of course.

http://www.technologyuk.net/the_internet/web/document_object_model.shtml

Javascript

Teasing the Good and the Bad

1 + „foo“ // > 1foo

1 - „foo“ // >

Javascript

Teasing the Good and the Bad

1 + „foo“ // > 1foo

1 - „foo“ // > NaN

typeof(NaN)

//>

Javascript

Teasing the Good and the Bad

1 + „foo“ // > 1foo

1 - „foo“ // > NaN

typeof(NaN)

// > „number“

Javascript

Semicolon Insertion

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!“);

;

Javascript

function foo() { return { bar : true };}

var bar = foo();console.log(bar);

// > ?

Semicolons

;

Javascript

function foo() { return { bar : true };}

var bar = foo();console.log(bar);

// > undefined

Semicolons

;

Javascript

function foo() { return { bar : true };}

var bar = foo();console.log(bar);

// > undefined

Semicolons

;;

Javascript

function foo() { return { bar : true };}

var bar = foo();console.log(bar);

// > undefined

Semicolons

;;

;

Javascript

function foo() { return { bar : true };}

var bar = foo();console.log(bar);

// > Object {bar:true}

Semicolons

;

Javascript

function foo() { var a = 1 b = 2;}

foo();console.log(a);console.log(b);

Semicolons

;

Javascript

function foo() { var a = 1 b = 2;}

foo();console.log(a);console.log(b);

// > Reference Error// > 2

Semicolons

;

Javascript

Equality Operators

Javascript

0 == '0'

Equality Operators

=

=====

!=!==

Javascript

0 == '0' // true0 === '0'

Equality Operators

=====

!=!==

Javascript

0 == '0' // true0 === '0' // false

0 == ''

Equality Operators

=====

!=!==

Javascript

0 == '0' // true0 === '0' // false

0 == '' // true'' == '0'

Equality Operators

=====

!=!==

Javascript

0 == '0' // true0 === '0' // false

0 == '' // true'' == '0' // false

false == 'false'

Equality Operators

=====

!=!==

Javascript

0 == '0' // true0 === '0' // false

0 == '' // true'' == '0' // false

false == 'false' // falsefalse == '0'

Equality Operators

=====

!=!==

Javascript

0 == '0' // true0 === '0' // false

0 == '' // true'' == '0' // false

false == 'false' // falsefalse == '0' // true

Equality Operators

=====

!=!==

Javascript

'' == false // truefalse == '0' // true'' == '0' // ?

Equality Operators

=====

!=!==

Javascript

'' == false // truefalse == '0' // true'' == '0' // ?

'' => false => '0'

'' == '0' // ?!?!?

Equality Operators

=====

!=!==

Javascript

'' == false // truefalse == '0' // true'' == '0' // ?

'' => false =>'0'

'' == '0' // false

Equality Operators

=====

!=!==

Javascript

Equality Operators

==!=

===!==

Expected '===' and instead saw '=='.

Javascript

Arrays

Javascript

foo = [1, 2, 3, 4];bar = new Array(1, 2, 3, 4);

Arrays

var foo = [];var bar = new Array();

Javascript

foo = [1, 2, 3, 4];bar = new Array(1, 2, 3, 4);

foo[0] = 1;foo[1] = 2;foo[2] = 3;foo[3] = 4;

// > foo.length == 4

Arrays

var foo = [];var bar = new Array();

Javascript

foo = [];

foo[11203] = 1;

// > foo.length == ?

Arrays

var foo = [];var bar = new Array();

Javascript

foo = [];

foo[11203] = 1;

// > foo.length == 11204

Arrays

var foo = [];var bar = new Array();

Javascript

foo = new Array(1, 2);

console.log(foo);

// > ?

Arrays

var foo = [];var bar = new Array();

Javascript

foo = new Array(1, 2);

console.log(foo);

// > [1, 2]

Arrays

var foo = [];var bar = new Array();

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();

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();

Javascript

foo == true // ?

Arrays

var foo = [];var bar = new Array();

Javascript

foo == true // false

Arrays

var foo = [];var bar = new Array();

var txt = '';

if (foo) { txt = 1;} else { txt = 2;}console.log(txt);

Javascript

foo == true // false

Arrays

var foo = [];var bar = new Array();

var txt = '';

if (foo) { txt = 1;} else { txt = 2;}console.log(txt);

// > 1

Javascript

Prototyping

Javascript

var Foo = function() {

};

Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);

var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0

wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2

var wibble = new Foo;console.log(wibble.i); console.log(wibble.bar[0]);

// > ?

Prototyping

Javascript

var Foo = function() {

};

Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);

var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0

wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2

var wibble = new Foo;console.log(wibble.i, wibble.bar[0]);

// > 0, 2

Prototyping

Javascript

var Foo = function() {

};

Foo.prototype.i = 0;Foo.prototype.bar = new Array(0, 1);

var wobble = new Foo;console.log(wobble.i); // 0console.log(wobble.bar[0]); // 0

wobble.i = 1;wobble.bar[0] = 2;console.log(wobble.i); // 1console.log(wobble.bar[0]); // 2

var wibble = new Foo;console.log(wibble.i, wibble.bar[0]);

// > 0, 2

Prototyping

Foo.prototype.bar

wibble wobble

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 hellbreaks loose...Will they ever figure out what happened?

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 hellbreaks loose...Will they ever figure out what happened?

Javascript

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

// > ?// > ?

Prototyping

Javascript

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

Prototyping

Javascript

WAT?

Javascript

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

Prototypingwibble.i === undefined

Foo.prototype.i === undefined

wibble.i

true false

true false

Foo.prototype.iObject.prototype.i === undefined

true false

undefined Object.prototype.i

Javascript

DOM

Javascript

<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>

DOM

console.log(foo);

// > ?

Javascript

DOM

console.log(foo);

// > <div id=“foo“>

<html> <head></head> <body> <div id="foo"></div> <div id="bar"></div> </body></html>

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>

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>

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>

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

Javascript

Thank You!