Ein oft nachgeschlagenes Thema ist die Auswertung von HTML-Formularen mit jQuery. Um zu zeigen, wie bequem Daten eines Formulars mit jQuery empfangen und übermittelt werden können, habe ich ein paar Code-Beispiele vorbereitet.
Formulareingaben mit jQuery übertragen weiterlesen
Schlagwort: js
Event-Handler mit JavaScript hinzufügen und entfernen
Event-Handler (dt. Ereignisbehandler) können in JavaScript über verschiedene Wege hinzugefügt werden. In den folgenden Code-Beispielen zeige ich die Vor- und Nachteile der jeweiligen Lösungen mit reinem JavaScript und jQuery.
Event-Handler mit JavaScript hinzufügen und entfernen weiterlesen
JavaScript Variablen vernünftig auf Existenz prüfen
Der Aufruf von JavaScript-Variablen kann, wenn die gewünschten Variablen nicht definiert sind, zu schweren Fehlern führen. Es gibt jedoch gute Methoden, um Ausnahmefehler zu verhindern. Als Basis für die folgenden Techniken dient dieses Beispiel:
var person = { name: 'Benny' }; if(person){ console.log('Hello '+person.name+'!'); } |
Wird die Variable person
nicht definiert, kommt es bei der if
-Abfrage zu folgendem Fehler: ReferenceError: person is not defined
.
Dem Problem lässt sich entgegen wirken, wenn die Variable über das Elternelement window
abgefragt wird:
1 2 3 | if(window.person){ console.log('Hello '+person.name+'!'); } |
Diese Art von Abfragen funktioniert allerdings nur für die erste Stufe. Eine Abfrage auf window.person.name
oder gar window.person.name.surname
würde zu einem TypeError
führen.
In einem solchen Fall muss schrittweise mit der logischen „UND“ Verknüpfung gearbeiten werden:
1 2 3 | if(window.person && window.person.name){ console.log('Hello '+person.name+'!'); } |
Das Logische „UND“ sorgt dafür, dass nicht direkt auf window.person.name
geprüft wird (was zum Fehlerfall führen würde) sondern zuerst auf window.person
. Wenn window.person
nicht vorhanden ist, dann kann die logische Verknüpfung überhaupt nicht mehr „wahr“ werden, so dass die Abfrage sofort (ohne Überprüfung auf window.person.name
) beendet wird.
Eine noch tiefere Verschachtelung kann wie folgt gestaltet werden:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var person = { name: { prename: 'Benny', surname: 'Neugebauer' } }; if(window.person && window.person.name && window.person.name.surname){ // Hello Benny Neugebauer! console.log('Hello' +' ' +person.name.prename +' ' +person.name.surname +''+'!'); } |
Selbstverständlich funktioniert auch:
1 2 3 4 5 6 7 8 9 10 | try{ // Hello Benny Neugebauer! console.log('Hello' +' ' +person.name.prename +' ' +person.name.surname +''+'!'); } catch(error){} |
Alle Konsolenfunktionen überschreiben
Benutzt man console.log
oder console.debug
für das Logging in JavaScript, so kann es zu Problemen kommen, wenn der ausführende Browser diese Konsolenfunktionen nicht kennt. Daher sollte man in diesem Fall die Konsolenfunktionen überschreiben:
if(!(window.console&&console.log)){ (function(){ var console = window.console = {}; var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn']; var length = methods.length; while (length--){ console[methods[length]] = function(){}; } }()); } |
Toast Notifications mit JavaScript in Windows Store-Apps anzeigen
Toast Notifications (dt. Kachelbenachrichtigungen) sind Popupbenachrichtigungen, die in der rechten oberen Ecke einer Windows Store-App angezeigt werden können. Hier ein Beispiel einer solchen Benachrichtigung:
Möchte man für die eigene Windows Store-App mit JavaScript ebenfalls eine solche Toast-Benachrichtigung erstellen, muss man folgende Schritte beachten.
Toast Notifications mit JavaScript in Windows Store-Apps anzeigen weiterlesen
Bemerken ob Browser-Tab geöffnet ist oder nicht
Mit JavaScript lässt sich feststellen, ob das aktuelle Browserfenster (oder der aktuelle Browser-Tab) geöffnet ist oder nicht. Dafür gibt es den sog. „visibility state“ (dt. Sichtbarkeitsstatus). Dieser Status ist bereits in vielen Browsern implementiert und lässt sich wie folgt nutzen:
function onVisibilityChange(){ var visibilityState; // IE10 if(typeof document.visibilityState == "string") visibilityState = document.visibilityState; // Firefox else if(typeof document.mozVisibilityState == "string") visibilityState = document.mozVisibilityState; // Chrome else if(typeof document.webkitVisibilityState == "string") visibilityState = document.webkitVisibilityState; console.log("Visibility State: "+visibilityState); if(visibilityState == "visible"){ console.log("Browser tab is active."); }else if(visibilityState == "hidden"){ console.log("Browser tab is inactive"); } } // IE10 if(typeof document.visibilityState == "string") document.addEventListener("visibilitychange", onVisibilityChange, false); // Firefox else if(typeof document.mozVisibilityState == "string") document.addEventListener("mozvisibilitychange", onVisibilityChange, false); // Chrome else if(typeof document.webkitVisibilityState == "string") document.addEventListener("webkitvisibilitychange", onVisibilityChange, false); |