STRUKTUR
• HTML (Templates)
• CSS
• LESS/SASS Quellen
• JavaScript (Libraries und eigener Code)
• Tests
• Medien wie Bilder, Fonts, Audio, Video usw.
Slide 11
Slide 11 text
Hallo, Berlin
Hallo, Berlin
Slide 12
Slide 12 text
Hallo, Berlin
Hallo, Berlin
Slide 13
Slide 13 text
Hallo, Berlin
Hallo, Berlin
Slide 14
Slide 14 text
Hallo, Berlin
Hallo, Berlin
Slide 15
Slide 15 text
Hallo, Berlin
Hallo, Berlin
Slide 16
Slide 16 text
Hallo, Berlin
Hallo, Berlin
Slide 17
Slide 17 text
Hallo, Berlin
Hallo, Berlin
Slide 18
Slide 18 text
Slide 19
Slide 19 text
Hallo, Berlin
Hallo, Berlin
Slide 20
Slide 20 text
JAVASCRIPT API
• FullScreen API
• Forms
• Webworkers
• Geolocation
• Storage
• Offline Application
Slide 21
Slide 21 text
FULL SCREEN
Slide 22
Slide 22 text
FULL SCREEN
var elem = $('#content')[0];
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
go FullScreen
FULL SCREEN
• Bitte mit Vorsicht verwenden
• Styling für z.B. Hintergrund:
• -webkit-full-screen
• -moz-full-screen
Slide 25
Slide 25 text
FORMS
Slide 26
Slide 26 text
ELEMENTE
Slide 27
Slide 27 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 28
Slide 28 text
METER
$('meter').val(100);
Keine Progress-Bar!
Zur Anzeige von Werten in einem bestimmten Wertebereich
Slide 29
Slide 29 text
DATALIST
Angela Merkel
Gerhard Schröder
...
Slide 30
Slide 30 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 31
Slide 31 text
Slide 32
Slide 32 text
INPUT TYPES
• Viele Aufgaben, die bisher mit JavaScript erledigt wurden,
funktionieren jetzt mit HTML5 nativ
• Können kaum angepasst werden
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
INPUT TYPES
• tel
• search
• url
• email
• date
• month
• week
• time
• number
• range
• color
Slide 35
Slide 35 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 42
Slide 42 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 43
Slide 43 text
No content
Slide 44
Slide 44 text
WEBSOCKETS
Slide 45
Slide 45 text
WEBSOCKETS
• Bidirektionale Kommunikation zwischen Client und Server
• Protokoll auf TCP-Basis
• Eventbasiert
• Sichere Variante wss://
Slide 46
Slide 46 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 47
Slide 47 text
WEBSOCKETS
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 48
Slide 48 text
WEBSOCKETS
Slide 49
Slide 49 text
GEOLOCATION
Slide 50
Slide 50 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 57
Slide 57 text
STORAGE
Slide 58
Slide 58 text
STORAGE
• Local Storage - zeitlich unbegrenzt
• Session Storage - nur für eine Browser-Session
• IndexedDB
• Web SQL
Slide 59
Slide 59 text
Items in Storage:
keyvalue
key:
value:
OK
Slide 60
Slide 60 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 61
Slide 61 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 62
Slide 62 text
No content
Slide 63
Slide 63 text
OFFLINE APPLICATION
Slide 64
Slide 64 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 86
Slide 86 text
SELECTORS LEVEL3
• input:enabled
Jedes aktive Element
• input:disabled
Jedes nicht aktive Element
• input:checked
Jedes „ge-checkte“ Element (Checkbox)
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 97
Slide 97 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
Slide 98
Slide 98 text
JSLINT
JSLint will hurt your feelings
Slide 99
Slide 99 text
JSLINT
• „The JavaScript Quality Tool“
• http://www.jslint.com/
• Integriert in
• CLI
• IDE
Slide 100
Slide 100 text
“USE STRICT”
Slide 101
Slide 101 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 102
Slide 102 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 103
Slide 103 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 104
Slide 104 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 105
Slide 105 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 106
Slide 106 text
STRICT MODE
• Reservierte Wörter: implements, interface, let, package,
private, protected, public, static, und yield
• Keine Funktionsdefinition in Bedingungen und Schleifen
MIDDLEWARE
var dir = __dirname + ‘/images’
app.use(‘/images’, express.static(dir));
express.logger() Access Log auf der Konsole
express.bodyParser() Zugriff auf req.body
express.cookieParser() Cookies in Node.js
express.cookieSession({secret:
'mySecret'})
Cookiebasierte Session
req.session
SOCKET.IO
var http = require('http');
var server = http.createServer(app);
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket)
{
socket.on('msg', function(message) {
console.log(message);
});
});
Slide 123
Slide 123 text
script(src="http://localhost:8080/
socket.io/socket.io.js")
var socket = io.connect('http://localhost:
8080');
$('#chat').on('submit', function (e) {
e.preventDefault();
var value = $('#message').val();
$('#message').val('');
$('#message').focus();
$('#messages').append(value + ' ');
socket.emit('msg', value);
return false;
});
FRAMEWORKS
• Bootstrap
• Foundation v3
• Foundation v4
• Skeleton
• 960.gs
• http://responsive.vermilion.com/compare.php
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
MOZILLA DEVELOPER
NETWORK
Slide 160
Slide 160 text
No content
Slide 161
Slide 161 text
FRAGEN?
Slide 162
Slide 162 text
KONTAKT
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti_springer
https://github.com/sspringer82
Thorsten Rinne
[email protected]
Yatego GmbH
Kobellstr. 15
80336 München
Deutschland
@ThorstenRinne
https://github.com/thorsten