Jax2013 JavaScript für Java-Entwickler

of 49/49
Oliver Zeigermann | http://zeigermann.eu Schmerzfreies JavaScript für Java- Entwickler Donnerstag, 25. April 13
  • date post

    01-Nov-2014
  • Category

    Documents

  • view

    1.531
  • download

    0

Embed Size (px)

description

 

Transcript of Jax2013 JavaScript für Java-Entwickler

  • Oliver Zeigermann | http://zeigermann.eu

    Schmerzfreies JavaScript fr Java-Entwickler

    Donnerstag, 25. April 13

    http://zeigermann.euhttp://zeigermann.eu
  • Umfrage zum Start

    Wer glaubt das?

    1. JavaScript ist eine schlechte Sprache

    2. Es ist gut fr meine Karriere, JavaScript zu beherrschen

    Donnerstag, 25. April 13

  • Themen

    Hello World Grundlagen JavaScript Aufklrung gngiger Vorurteile Tools und Frameworks Diskussion

    Donnerstag, 25. April 13

  • Hello World

    Donnerstag, 25. April 13

  • Hello World #1 alert("Hello World");

    Donnerstag, 25. April 13

  • Hello World #2 var element = document.

    getElementById("log"); element.innerHTML =

    "Hello World";

    Donnerstag, 25. April 13

  • Hello World #3

    node -e "console.log('Hello World');"

    Donnerstag, 25. April 13

  • Hello World #4

    Donnerstag, 25. April 13

  • Grundlagen

    Donnerstag, 25. April 13

  • Sprach-Konzepte Alles (bis auf Primitive) ist ein Objekt Alle Objekte sind "mutable"

    Funktionen sind Brger erster Klasse Sind Objekte Knnen Daten enthalten Machen Scopes und Closures

    Protoypische Vererbung

    Donnerstag, 25. April 13

  • 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

  • Arrays

    var 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

  • 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

  • Scopes

    (function () { var achso = "Ich bin weg";})();

    console.log(achso); // ReferenceError

    Donnerstag, 25. April 13

  • Vorurteile

    Donnerstag, 25. April 13

  • Die gngigsten Vorurteile JavaScript hat keine Typen In JavaScript kann man keine Klassen und keine

    Vererbung ausdrcken

    Module und Kapselung sind nicht mglich Es ist sehr leicht, versehentlich globale Variablen

    zu erzeugen

    JavaScript nervt nur und hat keine coolen Sprachfeatures

    Donnerstag, 25. April 13

  • Vorurteil: JavaScript hat keine Typen

    Donnerstag, 25. April 13

  • Typentypeof "String" === "string";

    typeof 1 === "number";typeof 1.0 === "number";

    typeof true === "boolean";

    typeof {} === "object";

    typeof function() {} === "function";

    Donnerstag, 25. April 13

  • Vorurteil: In JavaScript kann man keine Klassen und keine Vererbung ausdrcken

    Donnerstag, 25. April 13

  • Klassen: Gebrauch

    var olli = new Person("Olli", 42);

    olli instanceof Person;

    olli.sayHello("Oma");// => Olli says hello to Oma

    Donnerstag, 25. April 13

  • 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

  • Vererbungfunction Customer(id, name, age) { // super constructor Person.call(this, name, age); this.id = id;}

    // extendsCustomer.prototype = Object.create(Person.prototype);Customer.prototype.constructor = Customer;

    Donnerstag, 25. April 13

  • Vorurteil: Module und Kapselung sind

    nicht mglich

    Donnerstag, 25. April 13

  • 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

  • Wie die Kapselung funktioniert: Closures

    Closures frei nach Douglas Crockford

    Eine innere Funktion hat immer Zugriff auf alle Variablen und Parameter ihrer ueren Funktion,

    auch wenn diese uere Funktion bereits beendet ist

    Donnerstag, 25. April 13

  • Vorurteil: Es ist sehr leicht, versehentlich globale

    Variablen zu erzeugen

    Donnerstag, 25. April 13

  • Strict Mode

    "use strict";

    (function (param) { var value = 10; // error: no accidental setting of // global variable vaule = value + param; return value;}());

    Donnerstag, 25. April 13

  • Vorurteil: JavaScript nervt nur und hat keine coolen Sprachfeatures

    Donnerstag, 25. April 13

  • 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

  • Mehr Vorurteile

    Es gibt keinen Standard, jeder Browser implementiert seinen eigenen Dialekt

    JavaScript ist langsam JavaScript ist wie CSS und HTML fr

    Designer, nicht fr richtige Entwickler

    Donnerstag, 25. April 13

  • Tools und Frameworks

    Donnerstag, 25. April 13

  • Entwicklungsumgebungen

    WebStorm Chrome Dev-Tools vi / emacs / TextMate /Sublime Text / etc.

    gehen natrlich auch

    Donnerstag, 25. April 13

  • Live-Demo WebStorm

    Donnerstag, 25. April 13

  • Frameworks jQuery Twitter Bootstrap Jasmine Ext JS AngularJS TodoMVC

    Donnerstag, 25. April 13

  • Standard-JavaScript-Bibliothek Fast berall zu finden Adressiert Probleme bei der

    Programmierung des DOMs

    Flexible Trennung von View und Logik Auch fr Erweiterung klassischer

    Webanwendungen

    jQuery

    Donnerstag, 25. April 13

  • jQuery

    $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); }); });

    Donnerstag, 25. April 13

  • Testen mit Jasminedescribe("Calculator"

    ... it("principle" ....expect(principle). toEqual(199990);

    );...);

    Donnerstag, 25. April 13

  • Twitter Bootstrap: Responsive Layout

    Hello, world!

    ...

    Learn more

    Heading

    ...

    Donnerstag, 25. April 13

  • Business-Anwendungen mit Ext JS

    Donnerstag, 25. April 13

  • AngularJS

    Motto: HTML enhanced for web apps! Wie wrde HTML aussehen, wenn es fr

    Anwendungen entwickelt worden wre?

    Donnerstag, 25. April 13

  • Hello World AngularJS

    Hello {{name}}!

    Donnerstag, 25. April 13

    http://code.angularjs.org/1.0.6/angular.min.jshttp://code.angularjs.org/1.0.6/angular.min.js
  • TodoMVC

    http://todomvc.com/Donnerstag, 25. April 13

    http://todomvc.com/http://todomvc.com/
  • Bonus-Vorurteil

    Donnerstag, 25. April 13

  • JavaScript ist nicht gut geeignet fr groe, langlebige Projekte

    Donnerstag, 25. April 13

  • Hauptgrund: Fehlende statische Typisierung

    Donnerstag, 25. April 13

  • Live-Demo TypeScript

    Donnerstag, 25. April 13

  • Zusammenfassung Viele Vorurteile gegenber JavaScript beruhen

    auf Missverstndnissen

    Strukturgebende Elemente (Klassen, Module) sind in JavaScript ber Patterns mglich

    JavaScript hat coole Sprachfeatures Es gibt mchtige Werkzeuge und Frameworks TypeScript erleichtert Entwicklung im groen

    Stil

    Donnerstag, 25. April 13

  • Umfrage zum Abschluss

    Wer glaubt das nun?

    1. JavaScript ist eine schlechte Sprache

    2. Es ist gut fr meine Karriere, JavaScript zu beherrschen

    Donnerstag, 25. April 13

  • Fragen / Diskussion

    Oliver Zeigermannhttp://zeigermann.eu

    Donnerstag, 25. April 13

    http://zeigermann.euhttp://zeigermann.eu