JSTF-Workshop
Teil 1
Heute
Web2.0
Browser-Abstraktion
JavaScript wird cool
“World‘s most popular
Programming Language”
              Douglas Crockford
Eigentlich alles feini-fein…
“World‘s most
misunderstood
Programming Language”
              Douglas Crockford
“Lisp in C‘s clothing”
                 Douglas Crockford
Schlechte Vergangenheit
Gestern
JS ist gefährlich!
DHTML
XMLHttpRequest
Alert Debugging
Dilettantentum
Fehlende Literatur
Geheimwissen
Eigentlich Geschichte…
Professionalität
Fachliteratur
Wissensaustausch
Kryptographie
Weg von der Bastellösung
Bausatz für Zeitmaschine?
Zukunft
Google Wave
Editor für die Cloud
JSTF
Good Parts / Professional Grade JS
Werkzeuge
Strategien

Blick für's Ganze
Flexiblere Teams
Workshop

Beispiele aus dem Programmieralltag
Diskussion
Refactoring
JavaScript

‣ functions are first class objects
‣ dynamisch typisierte Sprache
‣ mächtige Objekt-Literal-Syntax
‣ Prototyp-...
Mini-Javascript-

‣ in vielen Anwendungen zu sehen

‣ JavaScript erlaubt vieles, verzeiht wenig
Was passiert hier?

0 == '0'   => ?

'' == '0' => ?

0 == ''    => ?
Das hier

0 == '0' => true

'' == '0' => false

0 == ''   => true
So geht‘s richtig

0 === '0' => false

'' === '0' => false

0 === ''   => false
Best practice für
Vergleich
Verwende standardmäßig immer
=== statt == bzw. !== statt !=
Was passiert hier?

return
{
   status: true
};
Das Semikolon ;-)
‣ Automatisches Einfügen

‣ Keine Warnung

‣ Also immer dran denken ein ;-)
 einzufügen
Was passiert hier?

parseInt("16");

parseInt("16 tons");

parseInt("08");
Na wusstet ihr das?

parseInt("16");      => 16

parseInt("16 tons"); => 16

parseInt("08");      => 0    Hääääääh?!
parseInt und der


parseInt("08") => parseInt("08", 10)
Na, brauchst du einen
Taschenrechner?

0.1 + 0.2 === ?
Bei Geld ist nicht zu
spaßen

 0.1 + 0.2 === 0.30000000000000004
So ist richtig


 ((0.1 * 10) + (0.2 * 10)) / 10 = 0.3
Zahlen für
Fortgeschrittene: NaN
‣ Not a Number
‣ +'0' ist eine Zahl
‣ +'oops' ist NaN
Test auf NaN

typeof NaN === 'number' => ?

NaN === NaN   => ?

NaN !== NaN => ?
Test auf NaN

typeof NaN === 'number' => true

NaN === NaN   => false

NaN !== NaN => true
Test auf NaN richtig
isNaN(NaN)      =>   true
isNaN(0)        =>   false
isNaN('oops')   =>   true
isNaN('0')      =>   f...
Menschen machen
‣ Jeder kann mal ein Semikolon vergessen

‣ Keine JavaScript-Tests (zumindest in
 unseren Projekten)

‣ JS...
JSTF-Workshop Teil 1
JSTF-Workshop Teil 1
JSTF-Workshop Teil 1
Nächste SlideShare
Wird geladen in …5
×

JSTF-Workshop Teil 1

601 Aufrufe

Veröffentlicht am

Der erste Workshop-Teil unserer JavaScript Task Force bei mindmatters in Hamburg.

Es wird zunächst ein etwas weiter gefasster Ausblick geworfen auf die aktuelle Bedeutung von JavaScript in der Webentwicklung.

Die zweite Hälfte der Präsentation steigt in den technischen Aspekt des Workshops ein, indem sie typische Stolpersteine in JavaScript sowie das Code-Quality-Tool JSLint vorstellt.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

JSTF-Workshop Teil 1

  1. 1. JSTF-Workshop Teil 1
  2. 2. Heute
  3. 3. Web2.0
  4. 4. Browser-Abstraktion
  5. 5. JavaScript wird cool
  6. 6. “World‘s most popular Programming Language” Douglas Crockford
  7. 7. Eigentlich alles feini-fein…
  8. 8. “World‘s most misunderstood Programming Language” Douglas Crockford
  9. 9. “Lisp in C‘s clothing” Douglas Crockford
  10. 10. Schlechte Vergangenheit
  11. 11. Gestern
  12. 12. JS ist gefährlich!
  13. 13. DHTML
  14. 14. XMLHttpRequest
  15. 15. Alert Debugging
  16. 16. Dilettantentum
  17. 17. Fehlende Literatur
  18. 18. Geheimwissen
  19. 19. Eigentlich Geschichte…
  20. 20. Professionalität
  21. 21. Fachliteratur
  22. 22. Wissensaustausch
  23. 23. Kryptographie
  24. 24. Weg von der Bastellösung
  25. 25. Bausatz für Zeitmaschine?
  26. 26. Zukunft
  27. 27. Google Wave
  28. 28. Editor für die Cloud
  29. 29. JSTF Good Parts / Professional Grade JS Werkzeuge Strategien Blick für's Ganze Flexiblere Teams
  30. 30. Workshop Beispiele aus dem Programmieralltag Diskussion Refactoring
  31. 31. JavaScript ‣ functions are first class objects ‣ dynamisch typisierte Sprache ‣ mächtige Objekt-Literal-Syntax ‣ Prototyp-basierte Vererbung
  32. 32. Mini-Javascript- ‣ in vielen Anwendungen zu sehen ‣ JavaScript erlaubt vieles, verzeiht wenig
  33. 33. Was passiert hier? 0 == '0' => ? '' == '0' => ? 0 == '' => ?
  34. 34. Das hier 0 == '0' => true '' == '0' => false 0 == '' => true
  35. 35. So geht‘s richtig 0 === '0' => false '' === '0' => false 0 === '' => false
  36. 36. Best practice für Vergleich Verwende standardmäßig immer === statt == bzw. !== statt !=
  37. 37. Was passiert hier? return { status: true };
  38. 38. Das Semikolon ;-) ‣ Automatisches Einfügen ‣ Keine Warnung ‣ Also immer dran denken ein ;-) einzufügen
  39. 39. Was passiert hier? parseInt("16"); parseInt("16 tons"); parseInt("08");
  40. 40. Na wusstet ihr das? parseInt("16"); => 16 parseInt("16 tons"); => 16 parseInt("08"); => 0 Hääääääh?!
  41. 41. parseInt und der parseInt("08") => parseInt("08", 10)
  42. 42. Na, brauchst du einen Taschenrechner? 0.1 + 0.2 === ?
  43. 43. Bei Geld ist nicht zu spaßen 0.1 + 0.2 === 0.30000000000000004
  44. 44. So ist richtig ((0.1 * 10) + (0.2 * 10)) / 10 = 0.3
  45. 45. Zahlen für Fortgeschrittene: NaN ‣ Not a Number ‣ +'0' ist eine Zahl ‣ +'oops' ist NaN
  46. 46. Test auf NaN typeof NaN === 'number' => ? NaN === NaN => ? NaN !== NaN => ?
  47. 47. Test auf NaN typeof NaN === 'number' => true NaN === NaN => false NaN !== NaN => true
  48. 48. Test auf NaN richtig isNaN(NaN) => true isNaN(0) => false isNaN('oops') => true isNaN('0') => false isFinite() noch besser
  49. 49. Menschen machen ‣ Jeder kann mal ein Semikolon vergessen ‣ Keine JavaScript-Tests (zumindest in unseren Projekten) ‣ JSLint for the rescue

×