• Like
  • Save
Das lustige Überlebenshandbuch für JavaScript
Upcoming SlideShare
Loading in...5
×

Das lustige Überlebenshandbuch für JavaScript

  • 65 views
Uploaded on

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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
65
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 5. JavaScript nur im Browser? Weit gefehlt!
  • 6. iPad Mobiles
  • 7. JSON
  • 8. JavaScript Java • Klassen-OO basiert • statisch und stark typisiert • Prototype-OO basiert • dynamisch und schwach typisiert
  • 9. Akt I Sprache
  • 10. Akt I
  • 11. var myObject = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 } }
  • 12. Akt I  Prototypische ObjektOrientierung: (klassenlos)  First class-Function  Function Scope
  • 13. Akt I if (typeof String.prototype.trim !== 'function') { String.prototype.trim = function () { return this.replace( /^s*(S*(s+S+)*)s*$/, „$1“); }; }
  • 14. Akt I if (typeof String.prototype.trim !== 'function') { String.prototype.trim = function () { return this.replace( /^s*(S*(s+S+)*)s*$/, „$1“); }; }
  • 15. Akt I function Person(name, translate) { this.name = name; if (translate) { translate(name); } } var hans = new Person(“Hans”);
  • 16. Akt I
  • 17. Akt I
  • 18. Akt I
  • 19. function makeAdder(a) { return function(b) { return a + b; } } var x = makeAdder(5); var y = makeAdder(20); x(6); y(7);
  • 20. 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
  • 21. 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
  • 22. Kein Private Kein Protected Kein Public Allein durch Struktur möglich.
  • 23. Akt II Werkzeuge
  • 24. Akt II
  • 25. Akt II
  • 26. Akt II
  • 27. • IDE: – IntelliJ • Umgebung: – Mozilla & FireBug • Profiling: – Chrome • Test – JSUnit, Selenium Akt II
  • 28. Akt II (very short) Hands on Tools
  • 29. Akt II
  • 30. Akt II 1. Sprache lernen 2. Sprachkonstrukte verstehen! 3. Richtige Entwicklungsplattform 4. Vorsicht bei Fertigbackmischungen (Frameworks) 5. Sauber strukturieren
  • 31. Akt III Die dunklen Seiten
  • 32. function playScope(param) { Akt III if (param) { var success = true; } return success; }
  • 33. function playScope(param) { Akt III if (param) { var success = true; } return success; }
  • 34. a = 0.1; b = 0.2; c = 0.3; (a + b) + c === a + (b + c) ? Akt III
  • 35. a = 0.1; b = 0.2; c = 0.3; (a + b) + c === a + (b + c) {false} Akt III
  • 36. a = 0.1 * 100; b = 0.2 * 100; c = 0.3 * 100; (a + b) + c === a + (b + c) {true} Akt III
  • 37. 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.“
  • 38. var value = „0“; if (value) { magic(); } ? Akt III
  • 39. var value = „0“; if (value) { magic(); } {true} Akt III
  • 40. 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
  • 41. function addHandler() { var el = document.getElementById(‚el‘); el.onclick = function() { this.style.backgroundColor = ‚red‘; } }
  • 42. 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
  • 43. Akt III
  • 44. Epilog
  • 45. wird erwachen!
  • 46. 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)