Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Programmierung: Basiswissen

Fehler aufspüren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der erste Schritt bei der Fehlerbehebung besteht darin, den Bereich, in welchem sich der Fehler befindet, herauszufinden. Dafür müssen sämtliche Bereiche schrittweise überprüft werden.

Transkript

Ich möchte Ihnen jetzt ein sehr einfaches Beispiel zeigen, wie Sie mit JavaScript Fehler aufspüren können und das ist so ein einfaches Beispiel, dass es auf jede beliebige Sprache übertragbar ist. Ich gehe mal in mein Script hinein und da werden zunächst einmal ein paar Funktionen definiert. Ich habe diese Funktionen auf Englisch bezeichnet mit "First", "Second", "Third" und "Fourth Function". Die werden zwar definiert aber ja noch nicht aufgerufen, dann hole ich mir mit "document.getElementById" ein Element aus meiner HTML- Seite. Das speichere ich in der Variablen "Headline" ab und dann füge ich einen EventListener hinzu. Ich sage "Headline" und klicke mit einer anonymen Funktion und dann möchte ich die erste Funktion aufrufen. Die erste Funktion ruft die zweite Funktion auf, die zweite ruft die Dritte auf, die Dritte die Vierte und in der vierten Funktion, da steht dann mit Headline "innerHTML": "Sie haben auf die Headline geklickt" und die Überschrift auf meiner Seite wird verändert. Schauen wir uns das Ganze mal draußen im Beispiel an, klicke hier drauf. Ich habe hier zunächst einmal eine tolle Überschrift. Das ist das, was tatsächlich im Quelltext drinsteht und wenn ich jetzt hier drauf klicke, passiert gar nichts. Eigentlich hätte ich erwartet, dass hier die Überschrift verändert wird in "Sie haben auf die Headline geklickt". Ich habe jetzt keine Ahnung, wo der Fehler eigentlich liegt und ich muss jetzt selber Schritt für Schritt durch diese Seite durchgehen. Schauen wir uns mal an, ob ich überhaupt in der richtigen Datei bin, denn wenn man mit großen oder mittelgroßen JavaScript-Projekten arbeitet, dann hat man eine Reihe von JavaScript-Dateien und dann weiß man gar nicht: Bin ich überhaupt in der richtigen Datei? Ich schreibe mal ein einfaches alert(Hallo), speichere die Datei ab und jetzt rufe ich die hier nochmal auf. Und dann sehen Sie hier "Hallo". Schritt eins habe ich erfolgreich hinter mich gebracht, tatsächlich, ich bin in der richtigen Datei. Die Frage ist jetzt: Bin ich denn überhaupt in diesem EventListener tatsächlich drin oder nicht? Also gehen wir hier rein, machen wir hier etwas Ähnliches. "Alert in EventListener", speichere das Ganze wieder ab und rufe die Seite neu auf und jetzt habe ich kein "Hallo" gerade, das habe ich auch hier tatsächlich wieder rausgelöscht, ich möchte jetzt schauen, wenn ich klicke, das ist noch nicht mein EventListener. Wenn ich auf die Überschrift klicke, das ist eigentlich der passende EventListener auf den ich warte, aber dass hier keine Alert Box erscheint, das muss nicht notwendigerweise bedeuten, dass dieser EventListener nicht aufgerufen wird, wir haben das "alert" ja hinter dieses "First Function" geschrieben, D.h. als allererstes, wenn wir in diesen EventListener reingehen, dann möchten wir als ersten Befehl tatsächlich dieses "alert" haben, um zu überprüfen, ob wir wirklich hier sind, also im EventListener. Ich kürze das mal mit "EL" ab, speichere das Ganze und rufe die Seite nochmal neu auf und jetzt habe ich hier das erste im EventListener, okay, das heißt, der Fehler, der liegt irgendwo zwischen diesem ersten "alert" und zwischen diesem zweiten "alert" in dieser "First Function" vielleicht. Also wir gehen in diese "First Function" rein und schreiben: "Alert in 1". Ich mache mir es etwas einfacher und das mache ich jetzt in jeder einzelnen Funktion. Ich rücke das richtig ein und sage ich bin jetzt hier in 2 drin. Dann überprüfe ich das Ganze auch in der 3 und zu guter Letzt auch in der letzten vierten Funktion. Ich speichere das Ganze wieder ab, gehe auf "Neu laden" und jetzt schauen wir mal was passiert. Also, ich bin zuerst im "EL 1", das ist richtig. Dann bin ich in der 1 drin, ich bin in der 2 drin, OK. Ich bin in der 3 drin und da haben wir den Fehler, das heißt, wir sind 1, 2, 3 durchgegangen, aber hier muss irgendwo ein Fehler sein, denn dieses "alert 4", das wird nicht mehr aufgerufen. Diese "Fourth Function" wird in der "Third Function", in der Dritten aufgerufen, bis hierhin ist noch alles richtig, aber hier muss dann irgendwo ein Fehler sein. Und wenn wir uns das Ganze genau anschauen, dann rufen wir hier die "fourth Function" auf mit einem kleinen "f",aber die "Fourth Function" hat ein großes "F". JavaScript ist ja case sensitive, also achtet auf Groß- und Kleinschreibung und dann haben wir hier einen Funktionsaufruf von einer Funktion, die es gar nicht gibt. Ich schreibe mal das große F hier rein, speichere das Ganze wieder ab, lade die Seite neu und dann schauen wir nochmal. Also ich bin im EventListener. In der 1, in der 2, in der 3, in der 4 und jetzt müsste die Überschrift, jawoll: "Sie haben auf die headline geklickt" und jetzt habe ich sogar noch im EventListener hier unten, da steht sogar ein "In EventListener", eigentlich müsste das "Im EventListener" heißen, aber diese Alert Box ist ja auch nur für uns als Entwickler notwendig, das heißt, wenn wir hier mal einen Tippfehler drin haben, ist es auch nicht so schlimm. Ich kann, nachdem ich den Fehler hier gefunden hab, entweder diese ganzen "alerts" wieder löschen, weil ich brauche sie nicht mehr, oder ich kann sagen: "ich bin ja erst am Entwickeln dieses Codes, vielleicht brauche ich den später nochmal." Ich kommentiere ihn einfach aus, das heißt, ich mache zwei Schrägstriche davor, dann kann ich das später sehr einfach an dieser Stelle wieder einbauen, falls ich eben befürchte, dass ich das später nochmal brauche.

Grundlagen der Programmierung: Basiswissen

Steigen Sie ein in die Welt der Computerprogrammierung und verschaffen Sie sich das Grundwissen, um schon bald eigene Lösungen und Anwendungen zu schreiben.

5 Std. 38 min (64 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!