SlideShare ist ein Scribd-Unternehmen logo
Oliver
Pehnke,

Benjamin
Schmid
nasa.org
Inhaltsverzeichnis

• Prolog
• Akt I

Sprache

• Akt II

Werkzeuge

• Akt III

Die dunklen Seiten

• Epilog
Prolog
Das lustige Überlebenshandbuch für JavaScript
JavaScript nur im Browser? Weit gefehlt!
iPad
Mobiles
JSON
JavaScript

Java
• Klassen-OO basiert
• statisch und stark
typisiert

• Prototype-OO basiert
• dynamisch und
schwach typisiert
Akt I Sprache
Das lustige Überlebenshandbuch für JavaScript
Das lustige Überlebenshandbuch für JavaScript
Akt I
var myObject = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}
Das lustige Überlebenshandbuch für JavaScript
Das lustige Überlebenshandbuch für JavaScript
Akt I
 Prototypische
ObjektOrientierung:
(klassenlos)
 First class-Function
 Function Scope
Akt I
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(
/^s*(S*(s+S+)*)s*$/, „$1“);
};
}
Akt I
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(
/^s*(S*(s+S+)*)s*$/, „$1“);
};
}
Das lustige Überlebenshandbuch für JavaScript
Akt I
function Person(name, translate) {
this.name = name;
if (translate) {
translate(name);
}
}
var hans = new Person(“Hans”);
Akt I
Akt I
Akt I
function makeAdder(a) {
return function(b) {
return a + b;
}
}
var x = makeAdder(5);
var y = makeAdder(20);
x(6);
y(7);
function makeAdder(a) {
return function(b) {
return a + b;
}
}
var x = makeAdder(5);
var y = makeAdder(20);
x(6); // returns 11
y(7); // returns 27
Akt I

In Javascript ist der Wert von „this“
abhängig von der Art des Aufrufs.
Aufruf

this

function

global object
undefined
object (Eigner der Methode)
Das „new“ object
argument

method

constructor
apply
Kein Private
Kein Protected
Kein Public

Allein durch
Struktur möglich.
Akt II Werkzeuge
Akt II
Akt II
Akt II
• IDE:
– IntelliJ

• Umgebung:
– Mozilla & FireBug

• Profiling:
– Chrome

• Test
– JSUnit, Selenium

Akt II
Akt II

(very short)

Hands on Tools
Akt II
Akt II
1. Sprache lernen
2. Sprachkonstrukte verstehen!
3. Richtige Entwicklungsplattform
4. Vorsicht bei Fertigbackmischungen (Frameworks)
5. Sauber strukturieren
Akt III Die dunklen Seiten
function playScope(param) {
Akt III
if (param) {
var success = true;
}
return success;
}
function playScope(param) {
Akt III
if (param) {
var success = true;
}
return success;
}
a = 0.1;
b = 0.2;
c = 0.3;
(a + b) + c === a + (b + c)

?

Akt III
a = 0.1;
b = 0.2;
c = 0.3;
(a + b) + c === a + (b + c)

{false}

Akt III
a = 0.1 * 100;
b = 0.2 * 100;
c = 0.3 * 100;
(a + b) + c === a + (b + c)

{true}

Akt III
null ist ein object‚

Akt III

Warum:
Microsofts JScript Reverse Engineering
Wurde Standard, weil:
„ If we fix that, it could break an program – and at
Microsoft we can not tolerate that.“
var value = „0“;
if (value) {
magic();
}

?

Akt III
var value = „0“;
if (value) {
magic();
}

{true}

Akt III
Vergleich
'' == '0'

Ergebnis
False

0 == ''
0 == „0“
false == „false“
false == '0'
false == undefined
false == null
null == undefined
„ trn == 0

True
True
False
True
False
False
True
True

Akt III
function addHandler() {
var el = document.getElementById(‚el‘);
el.onclick = function() {
this.style.backgroundColor = ‚red‘;
}
}
Don't use closures unless you
really need closure semantics.
In most cases, non-nested
functions are the right way to go.
Eric Lippert, Microsoft

Akt III
Akt III
Das lustige Überlebenshandbuch für JavaScript
Epilog
Das lustige Überlebenshandbuch für JavaScript
Das lustige Überlebenshandbuch für JavaScript
wird erwachen!
Das lustige Überlebenshandbuch für JavaScript
Referenzen:
Mozilla Documentation Center (MDC) on Javascript
Secrets of Closures, Fronteers 2008, Stuart Langridge
ServerSide Javascript, Steve Yegge
YUI Theater,
Douglas Crockford on Javascript (Google Video)
Buch: „Javascript – The Good Parts“, Douglas Crockford

Kontakt:
eXXcellent solutions GmbH
Beim Alten Fritz 2
D-89075 Ulm
http://www.exxcellent.de/

Oliver Pehnke
(O.Pehnke@exxcellent.de)
Benjamin Schmid
(B.Schmid@exxcllent.de)

Weitere ähnliche Inhalte

Andere mochten auch

Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren CodeDer 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
Benjamin Schmid
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit Selenium
Benjamin Schmid
 
Datenbank-Refactoring mit LiquiBase
Datenbank-Refactoring mit LiquiBaseDatenbank-Refactoring mit LiquiBase
Datenbank-Refactoring mit LiquiBase
Benjamin Schmid
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Benjamin Schmid
 
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-EntwicklungVielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
Benjamin Schmid
 

Andere mochten auch (6)

Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren CodeDer 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
Der 10-Punkte Plan für den sicheren Weg zum nicht-wartbaren Code
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit Selenium
 
Datenbank-Refactoring mit LiquiBase
Datenbank-Refactoring mit LiquiBaseDatenbank-Refactoring mit LiquiBase
Datenbank-Refactoring mit LiquiBase
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
 
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-EntwicklungVielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
Vielfalt vs. Abstraktion - Der Jakobsweg der modellbasierten GUI-Entwicklung
 

Das lustige Überlebenshandbuch für JavaScript