Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Ausgabe-Konsole zur Analyse von Handler-Funktionen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Firefox-Browser bietet eine Web-Konsole für Entwickler. Hier können Ausgaben zur besseren Überprüfung der Programmzustände ausgegeben werden. Das Beispiel nutzt die Ladefunktionen "window.load()" und "document.ready()".

Transkript

In diesem Video möchte ich etwas genauer auf die beiden Funktionen $(document).ready() und $(window).load() eingehen und Ihnen gleichzeitig anhand eines Webbrowsers, Firefox, zeigen, welcher tolle Konsolenbefehl Ihnen in Zukunft auch zur Verfügung steht, um insbesondere fremde Skripte nachvollziehen zu können, besser nachvollziehen zu können. Ich gehe jetzt in NetBeans wie folgt vor: Aus der vorherigen Demonstration habe ich das Dokument st-002.html und im Wesentlichen brauche ich ja kaum was Neues schreiben. Ich möchte das so übernehmen und da gibt's eine schicke Funktion: rechte Maustaste hier oben auf den Reiter. Dann können Sie anschließend hier auf den Punkt Clone gehen. Bevor man da jetzt was überschreibt, am besten direkt abspeichern in das Projektverzeichnis. Ich speichere unter htdocs und nenne das Ganze Nummer 3. Dann kurz noch schnell anpassen: Das ist Nummer 3 und hier geht's um console und lade-funktion. Ja, ungefähr, kann man so nennen. Okay. Den alert()-Befehl, den brauche ich nicht mehr. Den Rest kann ich aber zunächst einmal drin lassen. Das wäre jetzt die Ausgangssituation: Ich habe also Step 3, den Titel geändert, ich habe mein Skript eingebunden und jetzt möchte ich Folgendes machen um Ihnen auch die Unterschiede zwischen den zwei Funktionen zu demonstrieren. Ich hab einmal gesagt, den Aufruf $(document).ready() und im Wesentlichen sind $(window).load() identisch. Das stimmt nicht ganz. Man kann beides einigermaßen identisch verwenden, aber es gibt schon einen kleinen Unterschied. Und das zeige ich Ihnen jetzt wie folgt: Ich binde in dem None-Bereich ein None ein und in dem None lade ich einfach mal eine andere Website. Ich nehm dafür mal einfach meine eigene. So, .de. Das None schließe ich und kann das Ganze auch noch beenden mit dem schließenden None-Tag. Jetzt passiert nichts anderes, wenn das HTML-Dokument hier in den Webbrowser geladen wird, dann wird in dem eigentlichen Dokument noch mal eine Webseite nachgeladen. Ich mach das so umständlich jetzt, weil – das braucht seine Zeit und deswegen kann man sehr schön auch die Reihenfolge demonstrieren, wann etwas fertig ist. Jetzt überprüfe ich hier mit $(document).ready() den ersten Prozess und jetzt könnten Sie natürlich mit alert() entsprechend eine Infomeldung ausgeben. Das Problem bei alert() ist aber, dass im Grunde das Dokument stoppt und auch immer mit OK alles zu bestätigen, wenn Sie sich vorstellen, Sie haben da 20, 30, 100 Ausgaben, dann ist das nicht mehr spaßig und auch nicht mehr praktikabel. Es gibt einen sehr schönen Befehl, der nennt sich console.log(). Und über diesen Befehl können Sie Textausgaben, Variablenausgaben et cetera an eine bestimmte Browserkonsole schicken. Da schreibe ich jetzt einfach mal rein: Das HTML-Dokument wurde vollständig geladen! Das passiert, wenn eben $(document).ready() arbeitet. Und jetzt nehmen wir das Ganze nochmal weiter unten mit der $(window).load()-Funktion. So, Vorgehensweise ist identisch. Auch hier kommt eine function hinein, runde Klammer auf, geschweifte Klammer auf. So, hier mache ich das Gleiche: console.log(). Hier muss man jetzt eine Unterscheidung treffen. also hier müsste ich jetzt reinschreiben: Die Website innerhalb des iFrames wurde geladen! So, und das ist, wie man jetzt auch schon sehen kann, sicherlich ein Unterschied. Natürlich braucht der Inhalt des iFrames länger wie die eigentliche Seite. Schauen wir uns das aber zunächst einmal an. Starten Sie das ganz normal im Chrome oder in einem Safari oder Internet Explorer, dann werden Sie keine Ausgabe von console.log() wahrnehmen. Und das ist das Schöne: Dass man also auch durchaus bei einem laufenden System oder bei Seiten, wo man einfach nicht will, dass das bei normalem Webaufruf deutlich wird, sich Konsolenausgaben anzeigen lassen möchte. Es gibt einen Browser, der besonders geeignet ist dafür. Sollte auf keinem Entwicklungssystem fehlen, das ist der Mozilla Firefox. Den ruf ich jetzt mal auf, gehe wieder in den Bereich localhost/jquery/ hinein. Bevor ich jetzt aber das neue Dokument st-003 starte, schalte ich hier rechts über den Bereich Menü die Entwickler-Werkzeuge einmal ein. Und da gibt es hier einen Eintrag, der nennt sich Web-Konsole. Kann man alternativ auch mit Strg+Umschalt+K ein- und ausschalten. So, das rufe ich mal auf. Ja, und wie man sieht: Die Konsole ist natürlich noch leer. Und achten Sie dabei insbesondere auf den zeitlichen Ablauf innerhalb der Konsole, wenn ich diese Datei jetzt im Webbrowser lade. Haben Sie es gesehen? Erst kam die Information Das HTML-Dokument wurde vollständig geladen! und dann hat es eine kurze Weile gedauert und dann wurde die Info ausgegeben Die Website innerhalb des iFrames wurde geladen! Schauen wir uns das hier im Dokument noch einmal an. Im Grunde ist es auch nicht der Inhalt der Webseite, sondern es ist dieses Objekt. Und das ist der kleine, aber feine Unterschied. Zunächst einmal ist es wichtig, zu wissen: mit $(document).ready() wird alles, was jetzt hier steht, vom Webbrowser geladen und interpretiert. Ist das fertig, ist es quasi im Speicher auch verfügbar? Weil nur dann kann ich an jeden auch HTML-Befehl insbesondere heran. Dabei ist es mir in der Regel aber egal, ob das eigentliche Objekt bereits fertig ist. Ein iFrame ist eine schöne Möglichkeit mit einer Webseite. Man könnte das auch demonstrieren mit einer sehr großen Grafik. Und bei einer Grafik ist es so: Wenn man die mit dem None-Befehl einbindet und gibt insbesondere im Webbrowser Breite und Höhe dieser Grafik an, dann kann der Webbrowser dieses Objekt interpretieren und weiter gehen, das heißt, er kann weiter laden, ohne dass die Grafik schon vollständig geladen ist. Das fällt insbesondere dann auf, wenn man solche Interlaced-Grafiken hat, die wie so ein Jalousien-Effekt sich langsam bilden. Und da ist genau der Unterschied. Da würde $(document).ready() sagen: Alles klar, das gesamte HTML-Dokument ist durch, du kannst weiter damit arbeiten. Und bei $(window).load() wartet er, bis alle Objekte geladen wurden. Und deswegen verwendet man $(window).load() sehr gerne, wenn es um Grafiken geht. Wie zum Beispiel auch bei Slidern taucht das sehr häufig auf oder eben auch bei sehr ladeträchtigen Objekten wie beispielsweise eben solch einer Website oder eines Videos et cetera. Und das ist der kleine, aber feine Unterschied. Und der Mozilla Firefox bietet mit seiner Web-Konsole wunderbare Möglichkeiten, nicht nur solche Skripte, wie wir sie jetzt gesehen haben, zu interpretieren, sondern auch Fremdskripte einzuladen und dort dann eben genauestens zu testen. Es gibt noch eine schöne weitere Info: Wenn ich jetzt unter diesem Punkt auf Logfiles klicke, dann sieht man noch mal, was hier eigentlich genau passiert: Zunächst einmal wird von dem Webserver mit GET die eigentliche Webdatei angefragt und dann kommt der Ausgabebefehl. Anschließend fragt er verschiedene Daten an, die jetzt in meiner Webseite stehen, und erst dann wird er diese Meldung ausgeben, dass die Website innerhalb des iFrames geladen wurde. Also: Hier sieht man, da passiert eine ganze Menge im Hintergrund. Und das kann man sehr schön eben über die Firefox-Konsolenausgabe interpretieren.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 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!