jQuery für Webdesigner

Vorbereitende Maßnahmen zur jQuery-Verwendung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie lernen Bezugsquellen der jQuery-JavaScript-Bibliothek kennen und erhalten eine Beschreibung der lokalen und externen Einbindung der Bibliotheksdatei.

Transkript

Um jQuery in eigenen Webprojekten einsetzen zu können, benötigen Sie die Bezugsquelle der JavaScript-Bibliothek, wo sämtliche Definitionen drin gespeichert sind. Und da gibt es mehrere Möglichkeiten, wie Sie da vorgehen können. Diese möchte ich Ihnen in dem Video kurz beschreiben. Die Anlaufstelle, die erste, ist auch wieder die Seite von jQuery selber unter jquery.com. Und hier prangert schon ganz groß und sichtbar der Download jQuery-Bereich und man sieht: Hier gibt's zwei Versionen. Wenn Sie diesen Bereich einmal anklicken, also auf diesen Button Download jQuery klicken, dann öffnet sich nicht sofort der Download, sondern Sie kommen hier in so eine erklärende Seite mit hinein. Und da fällt auf, wie gesagt, dass es zwei Versionen gibt. Was verbirgt sich dahinter? Diese beiden Versionen unterscheiden sich darin, dass also die Version 2 viel, viel schlanker und moderner oder komprimierter programmiert werden konnte. Der ganze jQuery- und beziehungsweise der ganze JavaScript-Code konnte verbessert werden, weil jetzt nur noch neuere Browser unterstützt werden. Und das ist genau der Haken: Nämlich man sieht, dass selbst der Explorer 8.0 nicht mehr unterstützt wird. Und da gerade diese Browser eine ja doch immer noch ungeheure Verbreitung im Netz haben, muss man halt überlegen, ob man nicht doch besser die Vorgängerversion verwendet, also die 1.x-Version. Die ist nicht schlechter im Bezug auf das, was Sie vorhaben für Ihre Webprojekte — sie ist halt nur etwas, ja, größer, etwas unstrukturierter von dem Code her. Man würde sagen, sie ist nicht ganz so elegant programmiert. Haben Sie eine geschlossene Umgebung, wo Sie genau wissen, die Browser spielen keine Rolle, dann ist auf jeden Fall die 2.x-Version empfehlenswerter, weil dadurch, dass sie auch kleiner, schlanker ist, ist sie einfach performanter, schneller, und das ist immer gut für Webseiten. Aber haben Sie ein ganz normales Webprojekt, wo auch außerhalb unkontrolliert, also Sie nicht wirklich kontrollieren können, welche Leute greifen dort mit welchen Browsern drauf zu, dann empfehle ich zumindestens noch die Version 1.x. Ja und die verwende ich auch in den Praxisbeispielen, die Version 1.x. Im Moment ist in der aktuellen Version 1.11.1 erhältlich. Man braucht keine Angst zu haben, also beide werden zurzeit noch unabhängig voneinander weiterentwickelt und bislang ist auch noch kein wirkliches Ende in Sicht, also da wird auch noch eine ganze Weile die 1.1er-Variante weitergehen. Ich hab's schon mehrfach ausprobiert. Wenn Sie unsicher sind oder wenn Sie irgendwann sagen: "Ah, ich muss dann alles umstellen" – Das Einzige, was Sie machen müssen, ist tatsächlich nur das Bibliotheks-File neu benennen, sodass das geladen werden kann, und dann funktionieren in vielen, vielen Fällen – also bei mir waren's alle Skripte, die ich probiert habe – auch die alten Skripte weiter mit der neuen Bibliothek. Ja und dann gibt es da auch noch mal zwei weitere Versionen. Und zwar sehen Sie hier Download the uncompressed und Download the compressed, production jQuery. Wenn Sie auf die uncompressed Version klicken, auf den Link, dann sehen Sie, ja, wirklich eine komplette JavaScript-Datei oder mit Ajax-Funktionen und so weiter. Und die ist, wenn man hier mal so runterscrollt und scrollt und scrollt und scrollt, also, es ist schon ein Riesending. Die ist geeignet für eine, ja, Entwicklungsumgebung und vor allen Dingen dann, wenn ich auch mal dort reinschauen möchte, vielleicht auch nur einzelne Funktionen benötige ohne das gesamte Bibliotheks-File. Das können Sie sich ja jederzeit hier herauskopieren. Theoretisch ist das alles möglich, aber wenn Sie sagen: "Ich brauche das jetzt nicht, ich möchte einfach nur die Bibliothek nutzen und was da drin steht, interessiert mich nicht", dann empfehle ich auf jeden Fall die compressed Version und die sieht so aus. Also wie man erkennt, ist das nichts mehr, um zu lesen, und die ist auch – da sind wir schon am Ende – wesentlich kürzer. Der einzige Vorteil ist eben davon, dass es auch hier wieder schneller geladen wird. Um diese Dateien nun downzuloaden, um sie lokal – und das ist die erste Variante, wie Sie Ihre JavaScript-jQuery-Bibliothek in Ihre eigenen Webprojekte einbinden können, ist es, diese Bibliothek lokal in Ihr Webprojektverzeichnis zu legen, also dort, wo auch Ihre HTML-Daten liegen, sodass man von HTML aus auf diese Datei zugreifen kann. Und um diese downzuloaden, klicken Sie also beispielsweise in der compressed Version mit der rechten Maustaste auf den Link und sagen dann zum Beispiel, bei Chrome ist es Link speichern unter, also das heißt, Sie sehen, hier öffnet sich dann auch sofort der Dialog und da wird genau diese Datei jquery-1.11.1.min.js auf Ihrem Rechner abgelegt und die können Sie dann eben entsprechend in Ihr Webverzeichnis hineinkopieren. Das ist die eine Variante. Die andere Variante ist, dass man die jQuery-Bibliotheksdatei von einem externen Server in der Webseite einbindet. Was hat das für einen Vorteil? Der Vorteil liegt darin, dass also die Datei, wenn man Glück hat, bereits durch eine vorherige Webseite schon mal geladen wurde und dann befindet sie sich im Cache und kann eben entsprechend viel, viel schneller durchgeladen werden. Eine ganz übliche Quelle, wo man sich eben neben jQuery diese Bibliothek bedenkenlos beziehen kann, ist Google. Und ich gebe die Adresse mal ein und Sie sehen hier ajax.googleapis.com dann gefolgt von /ajax/libs/jquery/1.11.1/jquery.min.js und das rufe ich jetzt mal auf und Sie sehen, das Ding sieht genauso aus wie hier die Compressed-Version an der Stelle. Also genau das Gleiche. So, der Vorteil ist: Wenn Sie das über die Google-API einbinden, also über Google selber, dann haben Sie ja bei dem Server viel größere Variante an Datenbandbreite, wie hier bei der Seite von jQuery, also hier an dieser Stelle. Google stellt einfach größere Rechenressourcen zur Verfügung und deswegen würde ich, wenn Sie den externen Weg gehen, den empfehlen, wenn es Ihnen um Performanz geht. Nachteil ist natürlich: Sie haben immer einen Zugriff auf die Google-Server oder in dem Falle auf die jQuery-Server und damit hinterlassen Sie Spuren. Das ist Punkt Nummer eins. Punkt Nummer zwei ist: Sie brauchen immer eine Online-Verbindung für Ihre Webprojekte. Also wenn Sie ein internes Projekt haben, wo Sie gar nicht online sein müssen, dann würde ich das auf keinen Fall machen und auch nicht, wenn Sie sicherstellen wollen, dass Ihre Daten nicht irgendwo anders auch mitprotokolliert werden. Wenn Sie auch von der Google-API die vollständige Version bekommen wollen, dann gehen Sie einfach hin und löschen hier dieses "min" in dem Namen oben und Sie sehen: Dann bekommen Sie entsprechend die auch lesbarer und das ist genau die gleiche. Also da braucht man sich keine Gedanken machen. Ich rufe noch mal die uncompressed auf. Wie man sieht, wenn ich die jetzt hin und her springe, dann ändert sich da gar nichts, also einschließlich das Erstellungsdatum. Die sind also immer vollkommen identisch und können von beiden Sourcen bedenkenlos eingesetzt werden. Für das Praxisbeispiel verwende ich eine lokale Datei, um eben auch sicherzustellen, dass wenn keine Online-Verbindung besteht, die Beispiele funktionieren. Und damit wissen Sie, woher Sie sich jQuery als Bezugsquelle, ja, beziehen können oder besser gesagt auch die Bibliothek und welche Unterschiede es gibt mit der Online-Einbindung oder der lokalen Einbindung.

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!