jax2013 javascript für java-entwickler
Post on 01-Nov-2014
1.570 Views
Preview:
DESCRIPTION
TRANSCRIPT
Oliver Zeigermann | http://zeigermann.eu
Schmerzfreies JavaScript für Java-Entwickler
Donnerstag, 25. April 13
Umfrage zum Start
Wer glaubt das?
1. JavaScript ist eine schlechte Sprache
2. Es ist gut für meine Karriere, JavaScript zu beherrschen
Donnerstag, 25. April 13
Themen
• Hello World
• Grundlagen JavaScript
• Aufklärung gängiger Vorurteile
• Tools und Frameworks
• Diskussion
Donnerstag, 25. April 13
Hello World
Donnerstag, 25. April 13
Hello World #1<!DOCTYPE html><html><head> <script> alert("Hello World"); </script></head><body></body></html>
Donnerstag, 25. April 13
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
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 Bürger erster Klasse
• Sind Objekte
• Können 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 gängigsten Vorurteile• JavaScript hat keine Typen
• In JavaScript kann man keine Klassen und keine Vererbung ausdrücken
• Module und Kapselung sind nicht möglich
• 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 ausdrücken
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 möglich
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 äußeren Funktion,
auch wenn diese äußere 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 für Designer, nicht für 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 natürlich 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 für 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
<div class="container">
<div class="hero-unit">
<h1>Hello, world!</h1>
...
<a class="btn btn-primary">Learn more »</a>
</div>
<div class="row">
<div class="span4">
<h2>Heading</h2>
...
Donnerstag, 25. April 13
Business-Anwendungen mit Ext JS
Donnerstag, 25. April 13
AngularJS
• Motto: HTML enhanced for web apps!
• Wie würde HTML aussehen, wenn es für Anwendungen entwickelt worden wäre?
Donnerstag, 25. April 13
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
Bonus-Vorurteil
Donnerstag, 25. April 13
JavaScript ist nicht gut geeignet für große, langlebige Projekte
Donnerstag, 25. April 13
Hauptgrund: Fehlende statische Typisierung
Donnerstag, 25. April 13
Live-Demo TypeScript
Donnerstag, 25. April 13
Zusammenfassung• Viele Vorurteile gegenüber JavaScript beruhen
auf 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ßen Stil
Donnerstag, 25. April 13
Umfrage zum Abschluss
Wer glaubt das nun?
1. JavaScript ist eine schlechte Sprache
2. Es ist gut für meine Karriere, JavaScript zu beherrschen
Donnerstag, 25. April 13
Fragen / Diskussion
Oliver Zeigermannhttp://zeigermann.eu
Donnerstag, 25. April 13
top related