Post on 26-Jun-2015
description
transcript
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!