Mit Web 2.0 hält auch JavaScript Einzug in den Alltag des Java-Entwicklers. Einerseits glänzt JavaScript mit erlesenen ‚Good Parts’, andererseits warten befremdlichen Spracheigenheiten und puristische Entwicklungsmittel. Mit einem zwinkernden und einem ernsten Auge berichten wir Kurioses und Tückisches aus der Praxis und geben Schützenhilfe für die erfolgreiche Besiedelung dieser neuen Welt.

1. Oliver
Pehnke,
Benjamin
Schmid

2. nasa.org

3. Inhaltsverzeichnis
• Prolog
• Akt I
Sprache
• Akt II
Werkzeuge
• Akt III
Die dunklen Seiten
• Epilog

4. Prolog

6. JavaScript nur im Browser? Weit gefehlt!

7. iPad
Mobiles

8. JSON

9. JavaScript
Java
• Klassen-OO basiert
• statisch und stark
typisiert
• Prototype-OO basiert
• dynamisch und
schwach typisiert

10. Akt I Sprache

13. Akt I

14. var myObject = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}

17. Akt I
 Prototypische
ObjektOrientierung:
(klassenlos)
 First class-Function
 Function Scope

18. Akt I
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(
/^s*(S*(s+S+)*)s*$/, „$1“);
};
}

19. Akt I
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function () {
return this.replace(
/^s*(S*(s+S+)*)s*$/, „$1“);
};
}

21. Akt I
function Person(name, translate) {
this.name = name;
if (translate) {
translate(name);
}
}
var hans = new Person(“Hans”);

22. Akt I

23. Akt I

24. Akt I

25. function makeAdder(a) {
return function(b) {
return a + b;
}
}
var x = makeAdder(5);
var y = makeAdder(20);
x(6);
y(7);

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

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

28. Kein Private
Kein Protected
Kein Public
Allein durch
Struktur möglich.

29. Akt II Werkzeuge

30. Akt II

31. Akt II

32. Akt II

33. • IDE:
– IntelliJ
• Umgebung:
– Mozilla & FireBug
• Profiling:
– Chrome
• Test
– JSUnit, Selenium
Akt II

34. Akt II
(very short)
Hands on Tools

35. Akt II

36. Akt II
1. Sprache lernen
2. Sprachkonstrukte verstehen!
3. Richtige Entwicklungsplattform
4. Vorsicht bei Fertigbackmischungen (Frameworks)
5. Sauber strukturieren

37. Akt III Die dunklen Seiten

38. function playScope(param) {
Akt III
if (param) {
var success = true;
}
return success;
}

39. function playScope(param) {
Akt III
if (param) {
var success = true;
}
return success;
}

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

41. a = 0.1;
b = 0.2;
c = 0.3;
(a + b) + c === a + (b + c)
{false}
Akt III

42. a = 0.1 * 100;
b = 0.2 * 100;
c = 0.3 * 100;
(a + b) + c === a + (b + c)
{true}
Akt III

43. 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.“

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

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

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

47. function addHandler() {
var el = document.getElementById(‚el‘);
el.onclick = function() {
this.style.backgroundColor = ‚red‘;
}
}

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

49. Akt III

51. Epilog

54. wird erwachen!

56. 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)