Change language
Python.Engineering Wiki Javascript-Konsole

Javascript-Konsole

__del__ | __main__ Python module | ast Python module | cmd Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | logging Python module | Lua PHP module | os Python module | PS PHP module | Python Development | Python functions | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | tty Python module | UI PHP module | uu Python module | warnings Python module
Michael Zippo Michael Zippo 04.11.2021

Das Schreiben von Code kann zwar unterhaltsam, aber auch ziemlich muhsam werden.

Es gibt Tage, an denen Sie mit dem Schreiben von Code beginnen, feststellen, dass etwas nicht läuft, und sehr frustriert sind. Noch ärgerlicher ist es, wenn Ihr Code ausgefuhrt wird, Sie aber nicht herausfinden können, warum er nicht richtig funktioniert; wenn etwas in Ihrem Code korrigiert werden muss.

Hier kann die JavaScript-Konsole nutzlich sein. Mit der Konsole können Sie verfolgen, was in Ihrem Code vor sich geht. Auf diese Weise können Sie leicht herausfinden, was in Ihrem Code falsch ist.

In diesem Leitfaden besprechen wir die Verwendung der JavaScript-Konsole. Wir stellen auch ein Beispiel fur eine Anwendung bereit, die die Konsole verwendet, damit Sie die JavaScript-Konsole schnell beherrschen.

Die JavaScript-Konsole

Entwickler, lernen Sie die Konsole kennen. Sie werden während Ihrer Zeit als Entwickler viel Zeit in der Konsole verbringen, also mussen Sie sich damit vertraut machen.

Die Konsole ist ein Ort, an dem Sie können Nachrichten anzeigen, während Ihre Anwendung ausgefuhrt wird und wo Sie den Inhalt einer Webseite bearbeiten können.

Sie können Ihren Code anweisen, Nachrichten in der Konsole zu protokollieren, und diese werden angezeigt, wenn Sie dazu aufgefordert werden Sie zu. Sie können die Konsole auch verwenden, um Variablen und Werte zu ändern und die in einer Variablen gespeicherten Werte zu uberprufen.

Um Ihre Konsole anzuzeigen, mussen Sie Entwicklertools öffnen. In Chrome können Sie dies mit Strg + Umschalt + I auf Windows oder Cmd + Alt + I auf Mac tun. In Firefox können Sie Entwicklertools mit Befehl + Wahl + K öffnen.

Wenn Sie dies tun, a Fenster wie folgt aus öffnet sich:

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> <Eigene Browser-Tools> <"p>Eigener Browser In diesem Tutorial konzentrieren wir uns nur auf die Konsole.

Erste Schritte mit der Konsole

Wir beginnen mit der Anzeige einer Nachricht in der Konsole. Wir können dies tun, ohne dass eine Webseite geöffnet ist. Alles, was Sie tun mussen, ist, zu öffnen Ihre Browserkonsole und schreiben Sie die JavaScript-Anweisungen, die Sie ausfuhren möchten.

Es gibt drei Hauptmethoden, die Sie in der Konsole verwenden werden:

Bevor wir fortfahren, sollten Sie nichts in Ihre Konsole einfugen, ohne vorher zu wissen, was der Code macht. Viele moderne Websites warnen Sie davor, da es Betrugereien gibt, die die Konsole verwenden. um auf sensible Benutzerinformationen zuzugreifen.

Damit können wir beginnen! Um eine Nachricht in der Konsole anzuzeigen, können wir n benutze diesen Code:

Sobald Sie diesen Befehl ausfuhren, wird Folgendes zuruckgegeben:

Sie können auch Fehler und Warnungen in der Konsole anzeigen. Der Unterschied zwischen Fehlern und Warnungen und einer herkömmlichen log()-Anweisung besteht darin, dass Fehler und Warnungen in Orange bzw. Rot angezeigt werden:

Unser Code gibt Folgendes zuruck:

GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1REijuG64gSJJRuc9s5Zhn

-Konsole Verwendung in einer Anwendung

Wir " Ich werde eine App erstellen, die einem Cookie-Clicker nachempfunden ist, um das Konsolenobjekt in Aktion zu präsentieren. Diese App zeigt einen Zähler an, der uns anzeigt, wie oft auf ein Bild einer Tasse Tee geklickt wurde. Wir protokollieren jeden Klick in der Konsole, damit wir verfolgen können, wann er erfolgt.

Entwicklung des Front-Ends

Unser erster Schritt ist die Entwicklung des Front-Ends unserer Anwendung. Erstellen Sie eine Datei mit dem Namen "index.html‚" und fugen Sie den folgenden Code ein:

Dieser Code zeigt vier Elemente auf unserer Webseite an: einen Titel, eine Beschreibung des Spiels, ein Bild einer Tasse Tee und eine Nachricht, die den Benutzer uber die Anzahl informiert Mal haben sie auf die Tasse Tee geklickt.

Lassen Sie uns auch einige Stile zu unserem Code hinzufugen, damit er attraktiv aussieht. Erstellen Sie eine Datei namens "styles.css‚" und fugen Sie diesen Code ein:

Diese Stile erstellen eine Box fur unser Tea-Clicker-Spiel, setzen die Farbe des Klickzählers auf Gelb und erstellen abgerundete Ecken fur unser Bild. So sieht unsere Webseite jetzt aus:

T5 Hj ZcpMbx8o CMhBJCxX1CE76C2XWBL4o1 Lo0U FaQ2ahJ VFrLo hf8UuMQdJUgMu1lg A1njeVWMndLb88CHdD7VFZSCUNFrYnZ9d GXD8y1XQQ6EYTBoUpqsH1Gfe3unA

Wenn Sie auf die Teetasse klicken, passiert nichts. Das liegt daran, dass wir unseren JavaScript-Code noch nicht hinzugefugt haben. Schreiben wir den JavaScript-Code fur unsere Anwendung.

Hinzufugen von Funktionen mit JavaScript

Wenn der Benutzer auf die Tasse Tee klickt, sollte der Zähler um eins erhöht werden. Bevor wir unseren Zähler erhöhen können, mussen wir die DOM-Elemente auswählen, mit denen wir arbeiten werden: das Bild und der Zähler. DOM- oder Document Object Model-Elemente sind Tags auf unserer Webseite.

Wir werden auch eine Variable einrichten, die verfolgt, wie oft auf die Tasse Tee geklickt wurde:

Unser nächster Schritt besteht darin, eine Funktion zu erstellen, die protokolliert wenn unsere Schaltfläche angeklickt wurde und unseren Zähler um eins erhöht. Wir können dies mit dem folgenden Code tun:

In der ersten Zeile wird die Konsolenmeldung "Die Schaltfl√§che wurde angeklickt" zur Konsole. Als N√§chstes fugen wir 1 zu unseren "Klicks‚" Schalter. Wir √§ndern dann den Inhalt des Textes in unserem Tag, um die aktualisierte Klickzahl mit der Methode innerText wiederzugeben.

Sehen Sie sich unsere Webseite an und klicken Sie auf das Bild der Tasse Tee:

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

Wie zu sehen, wenn wir die Tasse Tee durch einen unserer Zählerinkrementierungen klicken. Zusätzlich , die in unserem Code angegebene Nachricht wird an die Konsole ausgegeben. Dies hilft uns zu verstehen, wenn der Benutzer auf die Tasse Tee klickt.

Dies ist zwar eine sehr grundlegende Implementierung des console.log()-Anweisung können Sie in einer größeren Anwendung feststellen, dass Protokollierung weit verbreitet ist. Meistens sind Protokolle nur in Entwicklungsversionen von Anwendungen gespeichert. Dies liegt daran, dass Benutzer nicht sehen mussen, was hinter den Kulissen vor sich geht. Trotzdem ist das Logging immer noch ein unglaublich wertvolles Werkzeug fur Entwickler.

Schlussfolgerung

Die Konsole ist ein Werkzeug, mit dem Sie lernen können, wie Ihr Code funktioniert. Sie können damit während der Codeausfuhrung Debugging-Meldungen anzeigen oder Warnungen und Fehler verfolgen.

Sie sollten Protokollierungsanweisungen nur verwenden, wenn Sie Ihre Anwendung entwickeln oder erstellen möchten benutzerdefinierte Fehlermeldungen fur Ihren Code, die Sie zum Debuggen verwenden können. Sie sollten nicht zu viele Protokolle in einer Webanwendung speichern, die online verfugbar ist.