Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Fehler aufspüren

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Fehler aufspüren

“

Ich möchte Ihnen jetzt an einem einfachen Beispiel zeigen, wie Sie mit JavaScript Fehler aufspüren können. Dieses Beispiel ist auch auf andere Sprachen übertragbar. Ich habe hier wieder zwei Dateien, container.html und script.js. Ich schaue mir als Erstes die JavaScript-Datei an. Hier wurden vier Funktionen definiert und mit den englischen Bezeichnungen first, second, third und fourth versehen. Und mit den englischen Bezeichnungen first, second, third und fourthFunction versehen. Die Funktionen werden erst weiter unten aufgerufen. Mit der Funktion document.getElementById() hole ich mir ein Element mit der id "mainHeading" aus der HTML-Seite und speichere es unter der Variable headline ab. Anschließend füge ich einen EventListener hinzu. Dieser soll auf die Variable headline zugreifen. Wenn darauf geklickt wird, soll die erste Funktion ausgeführt werden. Die erste Funktion ruft dann wiederum die zweite Funktion auf. Die zweite ruft die dritte auf, die dritte die vierte. In der vierten Funktion steht headline.innerHTML = "Sie haben auf die Headline geklickt.". D.h., die Überschrift der Webseite soll sich ändern, wenn jemand darauf klickt. Schauen wir uns das Ganze auf der Webseite an. Hier ist die Überschrift "Tolle Überschrift". Und nun klicke ich darauf und es passiert nichts. Da ist also irgendwo ein Fehler in meinem Quellcode. Eigentlich sollte sich die Überschrift ja ändern. Nun muss ich den Fehler finden, habe aber keine Ahnung, wo er liegen könnte. Als Erstes muss ich herausfinden, ob ich überhaupt in der richtigen Datei bin. Es kann nämlich sein, dass ich mehrere JavaScript-Dateien vorliegen habe. Da kann mir eine sog. Alertbox helfen. Ich schreibe hier unter den ganzen Funktionen einfach mal alert("Ja, ich bin in der richtigen Script-Datei") und speichere das Ganze ab. Anschließend rufe ich die Webseite erneut auf bzw. aktualisiere sie. Und wir sehen, hier erscheint diese Box mit der Nachricht "Ja, ich bin in der richtigen Script-Datei.". Ok, super. Damit kann ich jetzt Schritt für Schritt die Skriptdatei untersuchen. Als Nächstes gehe ich zum EventListener und überprüfe, ob dieser funktioniert. Unter firstFunction() schreibe ich wieder eine Alertbox. Diese beinhaltet den Text: "Ich bin im EventListener." Nun speichere ich das Ganze ab und aktualisiere die Webseite. Hier erscheint die erste Box, die ist okay. Nun klicke ich auf die Überschrift und es passiert nichts. Die Alertbox erscheint nicht. Nun setze ich eine Alertbox vor die Funktion. Um die beiden Alertnachrichten unterscheiden zu können, setze ich Nummern davor. Dann speichere ich das Ganze wieder ab und aktualisiere die Webseite. OK, ich klicke auf die Überschrift und es erscheint die Nachricht: "(2) Ich bin im Event Listener." Der Fehler liegt also in der firstFunction(). Deswegen gehe ich in firstFunction() und arbeite hier wieder mit Alertboxen. Ich schreibe in die firstFunction() einfach alert("1"), in die secondFunction einfach alert("2"), in die thirdFunction() einfach alert("3") und in die fourthFunction() einfach alert("4"). Dann speichere ich das Ganze ab und aktualisiere mal die Webseite. Diese Nachricht kennen wir schon, jetzt klicke ich auf die Überschrift, es erscheint "(2) Ich bin im Event Listener", OK. Es erscheint die 1, okay, wir sind in der firstFunction(). Nun sind wir in der secondFunction(), in der thirdFunction(), aber nicht in der fourthFunction(). Also, der Fehler liegt in der fourthFunction(). Schauen wir mal in die fourthFunction(). Wenn ich mir das Ganze genau anschaue, dann sehe ich, dass ich hier in der thirdFunction() die fourthFunction() aufrufe. Und diese fourthFunction() schreibe ich aber hier mit einem kleinen f. Die fourthFunction() hier unten wird aber mit einem großen f geschrieben, also da wo ich die fourthFunction() auch definiere. Und da Java ja case-sensitiv ist und damit empfindlich für Groß- und Kleinschreibung, greife ich hier auf eine Funktion zu, die es hier gar nicht gibt. Ich korrigiere das eben mal und ersetze das kleine durch ein großes F. Dann speichere ich das Ganze ab, aktualisiere die Webseite. Nun erscheinen hier die einzelnen Nachrichten, indem ich auf die Überschrift klicke. Wir sind in der firstFunction(), second, third. Und jetzt in der fourthFunction(). Und jetzt bin ich auch in der ersten Nachricht: "(1) Ich bin im Eventlistener." Und wenn ich jetzt OK klicke, hat sich sogar die Überschrift geändert. Jetzt steht hier: "Sie haben auf die Headline geklickt." Nachdem ich nun den Fehler gefunden habe, kann ich die Alertboxen entweder wieder löschen oder für spätere Überprüfungen auskommentieren. Das könnte ich mit zwei Schrägstrichen oder Slashs machen. So kann ich weiter an dem Code arbeiten und ggf. mithilfe der Alertboxen eventuell eintretende Fehler finden und beheben. In diesem Video haben wir mit der Alertbox die denkbar einfachste Weise genutzt, um Fehler in JavaScript aufzuspüren. Wie Sie aber sicher schon bemerkt haben, ist dies nicht unbedingt die komfortabelste Lösung, und daher setzt man sie in der Praxis meist eher in Ausnahmefällen ein.

Inhalt