CSS, HTML und Javascript mit {stil}

Javascript in HTML5

Neues in Javascript: Was können wir nutzen?

HTML5, ECMAScript5 und ECMAScript6 bringen Javascript neue Objekte und Funktionen – von kleinen Helfern wie querySelector, classlist bis hin zu LocalStorage und SessionStorage. Javascript unterstützt Video mit Events von onpause bis onended, für die mobilen Geräte brauchen wir Touch-Events.

Die modernen Browser implementieren bereits einen großen Teil der neuen Funktionen in Harmonie (wenn wir IE8 unter den Tisch fallen lassen).

Die Browser der mobilen Geräte setzen die neuen Funktionen am schnellsten um; Internet Explorer zieht ab Version 10 wirklich mit. Wer alte Browser nicht unterstützen muss, muss nicht mehr auf jQuery setzen, denn für Animationen mit CSS Transitions und Keyframes reicht Vanilla Javascript.

Auf jeden Fall aber ist die Auffrischung durch HTML5 und ECMAScript 5 so umfangreich, dass eine Seite nicht reicht.

multi threading

Mit HTML5 wird Javascript multi threading und kann Aufgaben parallel zum Hauptfenster durchführen. Die parallele Ausführung verhindert, dass die Webseite bzw. das Hauptfenster der Anwendung durch aufwändige Operationen blockiert wird.

Mehrere Dateien hochladen

Ajax kann mehrere Dateien gleichzeitig laden und beim Upload einen Fortschrittsbalken zeigen.

File Reader

Javascript erhält lesenden Zugriff auf die Daten des lokalen Rechners. Informationen wie Dateigröße, Dateityp und Datum der letzten Änderung stehen beim Upload zur Verfügung, insbesondere aber auch der Inhalt der Datei als Text oder als Blob (z.B. bei Bildern).

WebStorage

WebStorage ist der Sammelbegriff für LocalStorage, SessionStorage und Datenbanken beim Browser des Benutzers.

LocalStorage

LocalStorage ist ein Nachfolger der überalterten Cookies. LocalStorage ist persistenter Speicher im Browser des Benutzers, der unbegrenzt haltbar ist und nicht mehr mit jedem HTTP-Request übertragen wird.

SessionStorage

SessionStorage ist wie LocalStorage ein Speicher im Browser des Benutzers, der nicht mehr bei jedem HTTP-Request übertragen werden muss. SessionStorage gilt nur, solange die Seite in einem Browserfenster geöffnet ist.

Kleinere Erweiterungen von Javascript sorgen für einen effizienteren Code – z.B.

Javascript classlist

classlist schaltet CSS-Klassen mit add, remove und toggle – ähnlich wie jQuery

try catch

try catch throw exception soll Abbrüche durch Fehler vermeiden

Geolocation

window.navigator liefert Latitude und Longitude und damit den Standort des Besuchers (wenn der Besucher der Abfrage zustimmt)

requestAnimationFrame

Animationen mit requestAnimationFrame laufen weicher und effizienter als Animationen mit setInterval bzw. setTimeout

querySelector(), classlist

Der query-Selektor ähnelt dem jQuery-Selektor für HTML-Elemente: querySelector() erreicht jeden Selektor direkt. Jeder CSS-Selektor funktioniert als Parameter.

var header = document.querySelector('h3[style="color:blue"]');

querySelector() und querySelectorAll() sind effizienter und schneller und erreichen Elemente mit einer Anweisung, auf die getElementById(id), getElementsByName und getElementsByTagName nicht direkt zugreifen können.

Javascript classList fügt einem HTML-Element Klassen hinzu, entfernt oder toggelt Klassen. Ein einfaches classList.add oder classList.toggle wirft CSS-Animationen an.

.toggle { 
    transition: height 1s ease-in-out; 
    height: 0px; overflow:hidden;
}
.slowdown { height: 160px }
<script>
var icon = document.querySelector('.icon');
icon.addEventListener('click',function () {
    document.querySelector('.toggle').classList.toggle('slowdown');
});
</script>

IE 9 unterstützt classList noch nicht, aber mit einem Polyfill (eligrey) kann u.U. auf das Einbinden von jQuery verzichtet werden.

windows.onerror bekommt zwei neue Attribute: eine Spaltennummer und das Objekt, das den Fehler verursachte. Das erleichtert die Fehlersuche in minifizierten Scripten.

Javascript getElementsByClassName

getElementsByClassName()

getElementsByClassName("meineCSSKlasse andereCSSKlasse") spürt mehrere Klassen getrennt durch Leerzeichen auf.

jQuery und andere Javascript-Librarys bringen diese Funktion bereits mit. Da die modernen Browser (IE ab Version 9) getElementsByClassName unterstützen, kann an der einen oder anderen Stelle auf das Einbinden einer großen Library verzichtet werden.

HTML5-Video play(), pause(), currentTime

Für HTML5 Video bietet Javascript neue Events:

onpause, oncanplay, onplay, oncanplaythrough, onplaying, ondurationchange, onvolumechange, onended

Damit kann eine individuelle Steuerung für Videos mit wenig Aufwand mit Javascript programmiert werden.

Beispiel für Browser mit HTML5-Unterstützung: Die Steuerleiste des Videos ist eine einfache SVG-Grafik, die für ältere Browser ohne HTML5-Unterstützung nicht sichtbar ist … aber diese älteren Browser sehen auch das Video nicht.

<video id="html5video">
<source src="myvideo.m4v" type="video/mp4" />
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogg" type="video/ogg" />
<!-- video-Tag nicht unterstützt -->
<p>Dieser Browser kann HTML5-Video nicht wiedergeben</p>
</video>
var myvideo = document.getElementById('html5video');
myvideo.play();
myvideo.pause();
myvideo.currentTime = 0;

Events für HTML5-Video

Für das HTML5 video-Tag gibt es neue Events:

myvideo.addEventListener ("ended", function() {
    // Javascript-Code, der ausgeführt wird, 
    // wenn das Video zu Ende abgespielt wurde
},false);

Local Storage / Session Storage

Javascript Local Storage bzw. Session Storage und Web SQL bringen lokalen Speicher für Daten im Browser des Benutzers ohne den Overhead von Cookies. Der Speicher im Browser des Benutzers öffnet den Weg für schnellere Programmierung von Web-Anwendungen (»Web-Apps«).

Anders als bei Cookies zum Speichern von Benutzerdaten informiert der Browser den Benutzer, dass Daten gespeichert werden und holt sich die Erlaubnis des Benutzers ein.

naturalWidth / naturalHeight

Javascript Bildgröße feststellen
naturalWidth und naturalHight fragen ab, wie groß das Bild tatsächlich ist.

Wenn Bilder kleiner in Webseiten gesetzt werden als in ihrer natürlichen Größe (z.B. damit sie in das Layout der Seite passen ), dann wird für die Darstellung in der Lightbox ihre richtige Größe gebraucht.

var natWidth = theImage.naturalWidth;
var natHeight = theImage.naturalHeight;

naturalWidth und naturalHeight liefert die tatsächliche Größe des Bildes in den modernen Browsern (IE9, Firefox, Safari, Chrome und Opera).

HTML CSS JAVASCRIPT