Jax2013 JavaScript für Java-Entwickler

1,487 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,487
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Jax2013 JavaScript für Java-Entwickler

  1. 1. Oliver Zeigermann | http://zeigermann.euSchmerzfreies JavaScript für Java-EntwicklerDonnerstag, 25. April 13
  2. 2. Umfrage zum StartWer glaubt das?1. JavaScript ist eine schlechte Sprache2. Es ist gut für meine Karriere, JavaScript zubeherrschenDonnerstag, 25. April 13
  3. 3. Themen• Hello World• Grundlagen JavaScript• Aufklärung gängigerVorurteile• Tools und Frameworks• DiskussionDonnerstag, 25. April 13
  4. 4. Hello WorldDonnerstag, 25. April 13
  5. 5. Hello World #1<!DOCTYPE html><html><head><script>alert("Hello World");</script></head><body></body></html>Donnerstag, 25. April 13
  6. 6. Hello World #2<!DOCTYPE html><html><body><div id="log"></div><script>var element = document.getElementById("log");element.innerHTML ="<h1>Hello World</h1>";</script></body></html>Donnerstag, 25. April 13
  7. 7. Hello World #3node -e "console.log(Hello World);"Donnerstag, 25. April 13
  8. 8. Hello World #4Donnerstag, 25. April 13
  9. 9. GrundlagenDonnerstag, 25. April 13
  10. 10. Sprach-Konzepte• Alles (bis auf Primitive) ist ein Objekt• Alle Objekte sind "mutable"• Funktionen sind Bürger erster Klasse• Sind Objekte• Können Daten enthalten• Machen Scopes und Closures• ProtoypischeVererbungDonnerstag, 25. April 13
  11. 11. Objektvar map = {olli: Huhu, zweites$Feld: 1,$: "Auch sowas geht!"};map.$;map["zweites$Feld"];map.hund = "Ganz neu geht auch";map.f = function() { return "Aha!" };for (var entry in map) {console.log(entry + ":" + map[entry]);}Donnerstag, 25. April 13
  12. 12. Arraysvar array = ["a", "b", "c"];array[1] = 20;array instanceof Object;array.push(4);array.splice(1, 2);for (var entry in array) {console.log(entry + ":" + array[entry]);}Donnerstag, 25. April 13
  13. 13. Funktionenvar f1 = function(p1, p2) {return p1 + p2;}var result1 = f1(1,2);result1 === 3;function f2() {console.log("Called!");}var result2 = f2();result2 === undefined;Donnerstag, 25. April 13
  14. 14. Scopes(function () {var achso = "Ich bin weg";})();console.log(achso); // ReferenceErrorDonnerstag, 25. April 13
  15. 15. VorurteileDonnerstag, 25. April 13
  16. 16. Die gängigstenVorurteile• JavaScript hat keine Typen• In JavaScript kann man keine Klassen und keineVererbung ausdrücken• Module und Kapselung sind nicht möglich• Es ist sehr leicht, versehentlich globaleVariablenzu erzeugen• JavaScript nervt nur und hat keine coolenSprachfeaturesDonnerstag, 25. April 13
  17. 17. Vorurteil: JavaScripthat keine TypenDonnerstag, 25. April 13
  18. 18. Typentypeof "String" === "string";typeof 1 === "number";typeof 1.0 === "number";typeof true === "boolean";typeof {} === "object";typeof function() {} === "function";Donnerstag, 25. April 13
  19. 19. Vorurteil: In JavaScriptkann man keine Klassen undkeineVererbung ausdrückenDonnerstag, 25. April 13
  20. 20. Klassen: Gebrauchvar olli = new Person("Olli", 42);olli instanceof Person;olli.sayHello("Oma");// => Olli says hello to OmaDonnerstag, 25. April 13
  21. 21. Klassen: Definitionfunction Person(name, age) {this.name = name;this.age = age;}Person.prototype.sayHello =function(name) {console.log(this.name + " says hello to " +name);};Donnerstag, 25. April 13
  22. 22. Vererbungfunction Customer(id, name, age) {// super constructorPerson.call(this, name, age);this.id = id;}// extendsCustomer.prototype =Object.create(Person.prototype);Customer.prototype.constructor = Customer;Donnerstag, 25. April 13
  23. 23. Vorurteil: Moduleund Kapselung sindnicht möglichDonnerstag, 25. April 13
  24. 24. Kapselungvar Module = {};(function() {function InternalStuff() {...}function Person(name, age) {// uses class InternalStuff}Module.Person = Person;})();var olli = new Module.Person("Olli", 42);Module.InternalStuff === undefined;Donnerstag, 25. April 13
  25. 25. Wie die Kapselung funktioniert: ClosuresClosures frei nach Douglas CrockfordEine innere Funktion hat immer Zugriff auf alleVariablen und Parameter ihrer äußeren Funktion,auch wenn diese äußere Funktion bereits beendet istDonnerstag, 25. April 13
  26. 26. Vorurteil: Es ist sehrleicht, versehentlich globaleVariablen zu erzeugenDonnerstag, 25. April 13
  27. 27. Strict Mode"use strict";(function (param) {var value = 10;// error: no accidental setting of// global variablevaule = value + param;return value;}());Donnerstag, 25. April 13
  28. 28. Vorurteil: JavaScriptnervt nur und hat keinecoolen SprachfeaturesDonnerstag, 25. April 13
  29. 29. Closures seit ES5 vs. Java8var array = [1, 2, 3];array.forEach(function(e){console.log(e);});array.filter(function(e){return e > 2;});array.map(function(e){return e + 100;});Donnerstag, 25. April 13
  30. 30. MehrVorurteile• Es gibt keinen Standard, jeder Browserimplementiert seinen eigenen Dialekt• JavaScript ist langsam• JavaScript ist wie CSS und HTML fürDesigner, nicht für richtige EntwicklerDonnerstag, 25. April 13
  31. 31. Tools und FrameworksDonnerstag, 25. April 13
  32. 32. Entwicklungsumgebungen• WebStorm• Chrome Dev-Tools• vi / emacs / TextMate /Sublime Text / etc.gehen natürlich auchDonnerstag, 25. April 13
  33. 33. Live-Demo WebStormDonnerstag, 25. April 13
  34. 34. Frameworks• jQuery• Twitter Bootstrap• Jasmine• Ext JS• AngularJS• TodoMVCDonnerstag, 25. April 13
  35. 35. • Standard-JavaScript-Bibliothek• Fast überall zu finden• Adressiert Probleme bei derProgrammierung des DOMs• Flexible Trennung vonView und Logik• Auch für Erweiterung klassischerWebanwendungenjQueryDonnerstag, 25. April 13
  36. 36. jQuery$(document).ready(function(){$("a").click(function(event){alert("Thanks for visiting!");});});Donnerstag, 25. April 13
  37. 37. Testen mit Jasminedescribe("Calculator"...it("principle" ....expect(principle).toEqual(199990););...);Donnerstag, 25. April 13
  38. 38. Twitter Bootstrap: Responsive Layout<div class="container"><div class="hero-unit"><h1>Hello, world!</h1>...<a class="btn btn-primary">Learn more &raquo;</a></div><div class="row"><div class="span4"><h2>Heading</h2>...Donnerstag, 25. April 13
  39. 39. Business-Anwendungen mit Ext JSDonnerstag, 25. April 13
  40. 40. AngularJS• Motto: HTML enhanced for web apps!• Wie würde HTML aussehen, wenn es fürAnwendungen entwickelt worden wäre?Donnerstag, 25. April 13
  41. 41. Hello World AngularJS<!doctype html><html ng-app><head><script src="lib/angular.min.js"></script></head><body><input ng-model="name"><p>Hello {{name}}!</p></body></html>Donnerstag, 25. April 13
  42. 42. TodoMVChttp://todomvc.com/Donnerstag, 25. April 13
  43. 43. Bonus-VorurteilDonnerstag, 25. April 13
  44. 44. JavaScript ist nicht gutgeeignet für große,langlebige ProjekteDonnerstag, 25. April 13
  45. 45. Hauptgrund: Fehlendestatische TypisierungDonnerstag, 25. April 13
  46. 46. Live-Demo TypeScriptDonnerstag, 25. April 13
  47. 47. Zusammenfassung• VieleVorurteile gegenüber JavaScript beruhenauf Missverständnissen• Strukturgebende Elemente (Klassen, Module)sind in JavaScript über Patterns möglich• JavaScript hat coole Sprachfeatures• Es gibt mächtige Werkzeuge und Frameworks• TypeScript erleichtert Entwicklung im großenStilDonnerstag, 25. April 13
  48. 48. Umfrage zum AbschlussWer glaubt das nun?1. JavaScript ist eine schlechte Sprache2. Es ist gut für meine Karriere, JavaScript zubeherrschenDonnerstag, 25. April 13
  49. 49. Fragen / DiskussionOliver Zeigermannhttp://zeigermann.euDonnerstag, 25. April 13

×