Jax2013 JavaScript für Java-Entwickler

Oliver Zeigermann | http://zeigermann.eu

Schmerzfreies JavaScript für Java-Entwickler

Donnerstag, 25. April 13

http://zeigermann.eu


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ängiger Vorurteile

• 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

• Protoypische Vererbung


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


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


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;


Scopes

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

console.log(achso); // ReferenceError


Vorurteile


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


Vorurteil: JavaScript hat keine Typen


Typentypeof "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 keine Vererbung ausdrücken


Klassen: Gebrauch

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

olli instanceof Person;

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


Klassen: Definitionfunction Person(name, age) { this.name = name; this.age = age;}

Person.prototype.sayHello = function(name) {

console.log( this.name + " says hello to " + name);

};


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;


Vorurteil: Module und Kapselung sind

nicht möglich


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;


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


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


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 finden

• Adressiert Probleme bei der Programmierung des DOMs

• Flexible Trennung von View und Logik

• Auch für Erweiterung klassischer Webanwendungen

jQuery


jQuery

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


Testen mit Jasminedescribe("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>


http://code.angularjs.org/1.0.6/angular.min.js

http://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


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


Hauptgrund: Fehlende statische Typisierung


Live-Demo TypeScript


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


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 Zeigermannhttp://zeigermann.eu




Date post:	01-Nov-2014
Category:	Documents
Upload:	oliver-zeigermann
View:	1,555 times
Download:	0 times

Jax2013 JavaScript für Java-Entwickler

Documents