Welche Versionen?
• Chrome latest (derzeit Version 32)
• Chromium latest (derzeit Version 34)
• Firefox latest (derzeit Version 27)
• Firefox Nightly latest (derzeit Version 30)
• Safari latest (derzeit Version 6.1 bzw 7)
• Opera kann man sich sparen, da wie Chrome
Slide 13
Slide 13 text
Fehlt da nicht jemand?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Welche IE Versionen?
Slide 16
Slide 16 text
• Internet Explorer 7 (??)
• Internet Explorer 8 (?)
• Internet Explorer 9
• Internet Explorer 10 (?)
• Internet Explorer 11
The JavaScript Task Runner
$ npm install grunt-cli -g
Slide 22
Slide 22 text
The JavaScript Task Runner
• aufgabenbasiertes Kommandozeilen-Tool
• ähnlich make / rake / ant / phing
• Konfiguration in JavaScript
• Große Community
• Hunderte Plugins
• Linting, Concat, Watcher, Testing out of the box
Slide 23
Slide 23 text
Grunt installieren
$ cd /path/to/project
$ npm install grunt --save-dev
LiveReload
• Plugin
• Chrome
• Firefox
• Safari
• Triggert Seitenreload via grunt watch
• Browser Extensions auf http://livereload.com/
Slide 30
Slide 30 text
Package Manager für das
Web
• Installieren und Entfernen von Paketen
• Keine Abhängigkeiten
• keine sudo Rechte nötig
• Schnell installiert:
$ npm install bower -g
Paket-Quellen
• Registrierte Bower-Pakete wie z.B. jQuery
• Git-Repositories
• Lokale Ordner
• URLs mit .zip/.tar.gz Dateien
• Werden normal nach bower_components installiert
Struktur
• Frontend
• JavaScript
• LESS / CSS
• Media
• Tests
• Backend
• MVC
• Templates
• Routes
• Tests
Slide 50
Slide 50 text
Hallo, München
Hallo, München
Slide 51
Slide 51 text
Hallo, München
Hallo, München
Slide 52
Slide 52 text
Hallo, München
Hallo, München
Slide 53
Slide 53 text
Hallo, München
Hallo, München
Slide 54
Slide 54 text
Hallo, München
Hallo, München
Slide 55
Slide 55 text
Hallo, München
Hallo, München
Slide 56
Slide 56 text
Hallo, München
Hallo, München
Slide 57
Slide 57 text
Slide 58
Slide 58 text
Hallo, München
Hallo, München
Slide 59
Slide 59 text
JavaScript API
• FullScreen API
• Forms
• Webworkers
• Geolocation
• Storage
• Offline Application
Slide 60
Slide 60 text
Full Screen
Slide 61
Slide 61 text
var elem = $('#content')[0];
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Full Screen
• Bitte mit Vorsicht verwenden
• Styling für z.B. Hintergrund:
• -webkit-full-screen
• -moz-full-screen
Full Screen
Slide 64
Slide 64 text
Forms
Slide 65
Slide 65 text
Progress
var interval = setInterval(function () {
var progress = $('progress');
!
if (progress.val() < progress.attr('max')) {
progress.val(progress.val() + 1);
} else {
clearInterval(interval);
}
}, 10);
Slide 66
Slide 66 text
Meter
$('meter').val(100);
Keine Progress-Bar!
Zur Anzeige von Werten in einem bestimmten Wertebereich
Slide 67
Slide 67 text
Datalist
!
Angela Merkel
Gerhard Schröder
...
Slide 68
Slide 68 text
output
$('#output').on('input', function () {
var nr1 = parseInt($('#nr1').val());
var nr2 = parseInt($('#nr2').val());
$('output').val(nr1 + nr2);
});
Element zur Ausgabe von Berechnungen
Slide 69
Slide 69 text
Slide 70
Slide 70 text
Input Types
• Viele Aufgaben, die bisher mit JavaScript erledigt
wurden, funktionieren jetzt mit HTML5 nativ
• Können (kaum) angepasst werden
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Input types
• tel
• search
• url
• email
• date
• month
• week
• time
• number
• range
• color
Slide 73
Slide 73 text
HINWEIS
datetime und datetime-local sind deprecated!
Webworker
var worker = new Worker('/js/
webworker.js');
worker.onmessage = function (msg) {
$('#result').html(msg.data);
};
Slide 79
Slide 79 text
Webworker
var i, n = 1, results = 1;
outerLoop: while (true) {
n += 1;
for (i = 2; i <= Math.sqrt(n); i += 1) {
if (n % i === 0) {
continue outerLoop;
}
}
self.postMessage(n);
results += 1;
if (results >= 1000) {
self.close();
}
}
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Websockets
Slide 82
Slide 82 text
Websockets
• Bidirektionale Kommunikation zwischen Client und
Server
• Protokoll auf TCP-Basis
• Eventbasiert
• Sichere Variante wss://
Slide 83
Slide 83 text
Websockets
var addr = 'ws://localhost:8181/';
var socket = new WebSocket(addr, 'myapp');
!
$('#sayHello').on('click', function () {
socket.send('Hello Server');
});
!
socket.onmessage = function (msg) {
$('#response').html(msg.data);
};
!
Slide 84
Slide 84 text
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer().listen(8181);
wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false
});
wsServer.on('request', function(req) {
var connection = req.accept('myapp',
req.origin);
!
connection.on('message', function(message) {
connection.sendUTF("Hello Client!");
console.log(message.utf8Data);
});
});
Slide 85
Slide 85 text
Websockets
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
Geolocation
• Aktuelle Position des Clients
• WLAN-Position
• GPS-Position
function initialize() {
!
navigator.geolocation.getCurrentPosition(function (pos) {
var myLatlng = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new
google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
!
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
});
}
!
google.maps.event.addDomListener(window, 'load', initialize);
Slide 93
Slide 93 text
Storage
Slide 94
Slide 94 text
Storage
• Local Storage - zeitlich unbegrenzt
• Session Storage - nur für eine Browser-Session
• IndexedDB
• Web SQL
Slide 95
Slide 95 text
Items in Storage:
keyvalue
key:
value:
OK
Slide 96
Slide 96 text
var writeLine = function (k, v) {
var line = '' + k + '' +
v + 'delete' + '';
!
$('#content tbody').append(line);
writeStorageLength();
};
!
!
for (var i = 0; i < localStorage.length; i++)
{
k = localStorage.key(i);
v = localStorage.getItem(k);
writeLine(k, v);
}
Slide 97
Slide 97 text
var writeStorageLength = function () {
$('#itemCount').html(localStorage.length);
};
$('#save').on('click', function () {
var k = $('#storageKey').val();
var v = $('#storageVal').val();
localStorage.setItem(k, v);
writeLine(k, v);
});
!
$('#content').on('click', function (e) {
localStorage.removeItem((e.target).
data('value'));
$(e.target).closest('tr').remove();
writeStorageLength();
});
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
Offline Application
Slide 100
Slide 100 text
Offline Application
• Dateien werden nur einmalig vom Server geholt
• Manifestdatei enthält die Konfiguration
Element seines Elternelements
• :root
Das Rootelement eines Dokuments
• :empty
Jedes Element ohne Kindelemente
Slide 123
Slide 123 text
Selektoren Level 3
• input:enabled
Jedes aktive Element
• input:disabled
Jedes nicht aktive Element
• input:checked
Jedes „ge-checkte“ Element (Checkbox)
JSLINT
• „The JavaScript Quality Tool“
• http://www.jslint.com/
• Integriert in
• CLI
• IDE
Slide 136
Slide 136 text
“use strict”
Slide 137
Slide 137 text
Strict Mode - Mehr Fehler
• Keine versehentlichen globals (ReferenceError)
• Schärfere Regeln bei Zuweisungen
• Non-writable, getter-only, neue Properties bei non-extensible
Objekten
• Kein Löschen von nicht löschbaren Eigenschaften (prototype)
• Eindeutige Propertynamen
• Eindeutige Namen für Argumente (function (a, a, b)...)
• Keine Oktalnotation (z.B. 012 - SyntaxError)
Slide 138
Slide 138 text
Strict Mode
Einfachere Benutzung
• “with” ist verboten
• (var x = 1; with (obj) { x};)
• Keine neuen Variablen mit “eval”
• eval(“var x”);
• Keine Variablen löschen
• var x = 123; delete x;
Slide 139
Slide 139 text
Strict Mode
Eval & Arguments
• eval und arguments können nicht mehr mit
anderen Werten belegt oder an einen Kontext
gebunden werden
• arguments kann nicht mehr durch Aliases
verändert werden
• function func(arg) { var arg = 15; return [arg,
arguments[0]]};
• arguments.callee existiert nicht mehr - TypeError
Slide 140
Slide 140 text
Strict Mode
Sicherheit
• Kein Zugriff mehr auf das globale Objekt aus
Funktionen
• function f() { return this; } - undefined
• Kein Zugriff auf func.arguments und func.caller von
außerhalb
• Kein Zugriff auf Variablen in einer Funktion von
außerhalb
Slide 141
Slide 141 text
Strict Mode
• Reservierte Wörter: implements, interface, let,
package, private, protected, public, static, und
yield
• Keine Funktionsdefinition in Bedingungen und
Schleifen
Object.*
• Object.seal(obj)/Object.isSealed(obj)
• Keine Änderungen mehr an Eigenschaften
• Object.freeze(obj)/Object.isFrozen(obj)
• Keine Schreibzugriffe mehr auf Eigenschaften +
seal
Slide 145
Slide 145 text
Object.*
• Object.defineProperty
• set: magic setter function
• get: magic getter function
• value: default value
• configurable: can be deleted
• enumerable: can be iterated
• writable: can be changed
Performance-Messung
• Übersicht des Speicherverbrauchs
• Hilft bei Suche nach Performanceproblemen
• Layout oder Skripte
• Ziel: 60 Frames pro Sekunde :-)
Slide 180
Slide 180 text
Memory und DOM Leaks
Slide 181
Slide 181 text
Memory und DOM Leaks
• JavaScript CPU Profiling
• Heap Snapshot für
• JavaScript Objekte
• DOM Knoten
• Suche nach potentiellen Memory und DOM Leaks
Slide 182
Slide 182 text
Mobile Testing
Slide 183
Slide 183 text
Mobile Testing
• User Agent
• Verschiedene Endgeräte
• Android
• iOS
• Windows Phone
• Simulation von Touch Events
• Ändern der Geolocation und des Accelerometers