Jax2013 JavaScript für Java-Entwickler

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

Themen
• Hello World
• Grundlagen JavaScript
• Aufklärung gängigerVorurteile
• Tools und Frameworks
• Diskussion

Hello World

Hello World #1
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello World");
</script>
</head>
<body></body>
</html>

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>

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

Hello World #4

Grundlagen

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
• ProtoypischeVererbung

Objekt
var 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]);
}

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]);
}

Funktionen
var f1 = function(p1, p2) {
return p1 + p2;
}
var result1 = f1(1,2);
result1 === 3;
function f2() {
console.log("Called!");
}
var result2 = f2();
result2 === undefined;

Scopes
(function () {
var achso = "Ich bin weg";
})();
console.log(achso); // ReferenceError

Vorurteile

Die gängigstenVorurteile
• 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 globaleVariablen
zu erzeugen
• JavaScript nervt nur und hat keine coolen
Sprachfeatures

Vorurteil: JavaScript
hat keine Typen

Typen
typeof "String" === "string";
typeof 1 === "number";
typeof 1.0 === "number";
typeof true === "boolean";
typeof {} === "object";
typeof function() {} === "function";

Vorurteil: In JavaScript
kann man keine Klassen und
keineVererbung ausdrücken

Klassen: Gebrauch
var olli = new Person("Olli", 42);
olli instanceof Person;
olli.sayHello("Oma");
// => Olli says hello to Oma

Klassen: Deﬁnition
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello =
function(name) {
console.log(
this.name + " says hello to " +
name);
};

Vererbung
function Customer(id, name, age) {
// super constructor
Person.call(this, name, age);
this.id = id;
}
// extends
Customer.prototype =
Object.create(Person.prototype);
Customer.prototype.constructor = Customer;

Vorurteil: Module
und Kapselung sind
nicht möglich

Kapselung
var Module = {};
(function() {
function InternalStuff() {...}
function Person(name, age) {
// uses class InternalStuff
}
Module.Person = Person;
})();
var olli = new Module.Person("Olli", 42);
Module.InternalStuff === undefined;

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

Vorurteil: Es ist sehr
leicht, versehentlich globale
Variablen zu erzeugen

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

Vorurteil: JavaScript
nervt nur und hat keine
coolen Sprachfeatures

Closures seit ES5 vs. Java8
var 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;
});

MehrVorurteile
• 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

Tools und Frameworks

Entwicklungsumgebungen
• WebStorm
• Chrome Dev-Tools
• vi / emacs / TextMate /Sublime Text / etc.
gehen natürlich auch

Live-Demo WebStorm

Frameworks
• jQuery
• Twitter Bootstrap
• Jasmine
• Ext JS
• AngularJS
• TodoMVC

• Standard-JavaScript-Bibliothek
• Fast überall zu ﬁnden
• Adressiert Probleme bei der
Programmierung des DOMs
• Flexible Trennung vonView und Logik
• Auch für Erweiterung klassischer
Webanwendungen
jQuery

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

Testen mit Jasmine
describe("Calculator"
...
it("principle" ....
expect(principle).
toEqual(199990);
);
...
);

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>
...

Business-Anwendungen mit Ext JS

AngularJS
• Motto: HTML enhanced for web apps!
• Wie würde HTML aussehen, wenn es für
Anwendungen entwickelt worden wäre?

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>

TodoMVC
http://todomvc.com/

Bonus-Vorurteil

JavaScript ist nicht gut
geeignet für große,
langlebige Projekte

Hauptgrund: Fehlende
statische Typisierung

Live-Demo TypeScript

Zusammenfassung
• VieleVorurteile 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

Umfrage zum Abschluss
Wer glaubt das nun?
1. JavaScript ist eine schlechte Sprache
2. Es ist gut für meine Karriere, JavaScript zu
beherrschen

Fragen / Diskussion
Oliver Zeigermann
http://zeigermann.eu

Jax2013 JavaScript für Java-Entwickler

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)

Jax2013 JavaScript für Java-Entwickler