Formulareingaben mit jQuery übertragen

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

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