Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/Console API

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Console API[1] ist ein windows.object mit Methoden, die das Analysieren der Codes ermöglichen. Fehler werden mit Datei- und Zeilenangabe angezeigt; ein Klick auf die Meldung bringt Sie in den JavaScript-Code, den sie live verändern können, um so direkt Alternativen ausprobieren zu können!

Wir stellen ihnen hier einige der am häufigsten verwendeten Methoden vor; weitere Methoden können Sie im firebug Wiki finden.[2]

Beachten Sie: Für die Console API gibt es keinen verbindlichen Standard. Das Verhalten der Konsole in den einzelnen Browsern weicht stark voneinander ab, sodass Sie auf einen ständigen Einsatz in fertigen Webseiten verzichten sollten.


Die Konsole öffnen[Bearbeiten]

Die Konsole öffnet sich unterschiedlich, je nach Browser. Das kann zum einen über die jeweiligen Menüs, über die Funktionstaste F12, oder aber durch eine der folgenden Tastenkombinationen geöffnet werden:

  • Mozilla Firefox: unter Windows und Linux mit Strg + Umschalt + I, unter Mac mit Cmd + Opt + I
  • Google Chrome: unter Windows und Linux mit Strg + Umschalt + J, unter Mac mit Cmd + Opt + J
  • Microsoft Edge und Internet Explorer: F12 anschließend Strg + 2

Screenshot

(Ansicht der Firebug-Konsole im Firefox Version 40)

console.log()[Bearbeiten]

Die häufigste Methode ist console.log, die Meldungen in der Konsole ausgibt.

Sie kann folgende Parameter enthalten:

  • eine Variable oder Zeichenkette
  • eine kommagetrennte Liste aus Variablen oder Zeichenketten
Beispiel ansehen …
a = 2;
console.log(a);
b = 3;
console.log(b);
c = a*a + b*b;
console.log(c);
Die Variablen werden mit console.log unten in der Konsole mit Zeilenangabe ausgegeben. Sie können Sie ebenfalls unter Skripte und rechts unter Überwachen sehen.

String Substitution[Bearbeiten]

Sie können anstelle Ihrer auszugebenden Werte auch einen Platzhalter in die Zeichenkette einfügen. Die Variablen werden dann anschließend in einer kommagetrennten Liste angehängt:

Platzhalter Beschreibung
 %o fügt einem JavaScript Objekt einen Link hinzu. Anklicken öffnet einen Inspektor.
%d or %i gibt eine Ganzzahl heraus, (keine Formatierung möglich)
%s gibt eine Zeichenkette heraus.
%f gibt einen Fließkommawert (Dezimalzahl) heraus (keine Formatierung möglich)
Beispiel ansehen …
var name = prompt('Bitte geben Sie Ihren Namen ein!', '');
for (var i=0; i<9; i++) {
  console.log("Hallo, %s. Das ist der %d. Schleifendurchlauf.", name, i+1);
}
console.log("%cAnzahl Durchläufe :", "background: blue; color: yellow; font-weight: bold", i);
Bei jedem Durchlauf wird eine Meldung in der Konsole ausgegeben. Die Meldung besteht aus einer Zeichenkette, in der Platzhalter für den Namen des Benutzers und die Anzahl des Durchlaufs sind.

Styling von Meldungen[Bearbeiten]

Ist Ihnen aufgefallen, das die letzte Meldung im oberen Beispiel anders gestaltet war?

Sie können mittels des Platzhalters eine CSS-Angabe an ihre Meldung anfügen.

Beispiel ansehen …
console.log("%cAnzahl Durchläufe :", "background: blue; color: yellow; font-weight: bold", i);
Beachten Sie: Diese Möglichkeit ist auf das Styling von Zeichenketten beschränkt. Die Formatierung von Ganz- und Dezimalzahlen ist (noch) nicht möglich.


console.info()[Bearbeiten]

Mit console.info() können Sie auch einen besonderen Hinweis ausgeben. Es gelten die gleichen Regeln wie für console.log():

Beispiel ansehen …
a = 2;
b = 3;
console.info('Variable a =', a ,' Variable b =', b );
c = a*a + b*b;
console.log(c);

Screenshot


console.error()[Bearbeiten]

Fehlermeldungen werden wie console.error() besonders gekennzeichnet. Neben der Zeilenangabe gibt die Konsole die Art des Fehlers aus, was das Debuggen erleichert.

Beispiel ansehen …
a = 2;
console.log(a);
b = 3;
console.log(b);
c = a*a + b*b;
console.log(c);
window.alert(ergebnis);
In diesem Beispiel sollte das Ergebnis ausgegeben werden. Allerdings wurde die Variable ergebnis nicht deklariert. Anstelle eines unerklärlichen Abbruchs gibt die Konsole die Art des Fehlers (reference error) und die nicht deklarierte Variable (ergebnis) aus.

Screenshot

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  1. MDN: console API
  2. Firebug Wiki: Console API