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

jQuery für Webdesigner

HTML und jQuery-Bibliotheksdatei verbinden

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
So binden Sie das SCRIPT-Tag der jQuery-Bibliothek über externe Anbieter wie jQuery und Google ein. Daneben gibt's noch die Möglichkeit der lokalen Anbindung nach Download der Bibliothek.

Transkript

Um jQuery in Ihrem HTML-Dokument einsetzen zu können, müssen Sie in der Regel die externe JavaScript-Bibliotheksdatei einbinden. Und das geschieht in aller Regel innerhalb des None-Bereiches Ihrer HTML-Programmierung und da gibt es im Wesentlichen drei Möglichkeiten zu. Die möchte ich Ihnen kurz vorstellen. Zunächst einmal ist der None-Befehl relevant und wie Sie hier schön in NetBeans sehen, ich hab also ein Dokument bereits vorbereitet, bekomme ich jetzt die Information, was sich denn hinter diesem None-Befehl alles verbirgt und kann das lesen oder eben auch übergehen. So, und der nächste Befehl, der jetzt kommt, ist eigentlich die Quellangabe. Hier ein kleiner Hinweis: Und zwar finden Sie sehr häufig diesen type-Befehl und dort drin steht dann text/javascript und dergleichen. Diesen Befehl brauchen Sie, wenn Sie mit HTML5 programmieren, nicht mehr. HTML5 verwende ich in allen Beispielskripten dieses Praxisworkshops, also wird auch dieses type="text/javascript" in der Regel nicht mehr auftauchen. Wenn es drin steht, ist es nicht schlimm, Ihr jQuery wird genauso funktionieren, aber Sie benötigen es nicht mehr, denn HTML5 nimmt ECMAScript beziehungsweise JavaScript als Default-Sprache für alle Skripte. Und deswegen braucht man auch keine weitere Angabe mehr. Nur wenn Sie HTML-4-kompatibel arbeiten wollen, müssen Sie die verwendete Skriptsprache in jedem Fall explizit angeben. In HTML 4.01 ist das sogar Pflicht. Daher kommt es auch sehr häufig, gerade wenn man die Skripte aus dem Netz besorgt, dass einfach dieser type da noch mit angegeben wird. Aber auf den können Sie getrost in HTML5 verzichten. Was Sie dann benötigen, ist schlicht die Sourceangabe, also S-R-C. Wo soll denn das Dokument eigentlich herkommen? Nehmen wir mal die externe Einbindung und, – das habe ich vorbereitet, kopiere ich jetzt aus der Zwischenablage – das wäre die externe Einbindung über Google. Ich schließe den None-Befehl und hab dann quasi hier diesen Eintrag. Der Vorteil über die Google-APIs ist einfach, dass Sie immer aktuell eine externe Datei, eine JavaScript-Bibliothek verfügbar haben und dieser Server, also die Ajax-Google-APIs, sicherlich sehr häufig angesurft werden und so die Chance besteht, dass ein Besucher, der auf Ihre Website kommt, zuvor bereits eine Website geöffnet hat, die den gleichen Link in dem Kopf des Dokumentes hat. Und damit auch das Dokument nicht nochmal geladen zu werden. Es ist im Cache und dadurch wird einfach der Ladevorgang beschleunigt. Also, ich kommentiere das mal: None. Und die zweite Möglichkeit ist: Gleiche Vorgehensweise, das mit der Quelle und jetzt lade ich das Ganze aber über "code.jquery.com/" und gebe jetzt die eigentliche jQuery-Datei ein, und zwar ist das "jquery-", dann folgen die Versionsnummern, in diesem Fall "1.11.1", dann möchte ich die komprimierte Version haben, also "min", und die Dateiendung. So, und das ist das Gleiche, was wir oben gemacht haben, nur diesmal eben eingebunden über die jQuery-Server direkt. Ja, None. Jetzt könnte man davon ausgehen, dass das vielleicht die beste Wahl ist. Ich habe eben erklärt: Die Wahrscheinlichkeit, dass eine Webseite zuvor eine Ajax-Einbindung über Google-APIs hatte, ist weitaus größer wie über code.jquery. Und wenn Sie extern einbinden möchten, dann würde ich Ihnen auf jeden Fall diese Variante empfehlen und das im Grunde wieder zu vergessen, aber beides ist möglich und auch mal ganz wichtig zu wissen, wenn vielleicht hier Schwierigkeiten bestehen oder was auch immer. Und der dritte Kandidat im Bunde ist auch wieder None und diesmal aber nur die Einbindung der eigentlichen Datei und das wäre die lokale Einbindung. So, und damit auch die Erklärung: None über ein lokales File -- So, Vorteil hierbei ist, dass Sie keine online Verbindung benötigen und eben auch sicherstellen, dass weder Google- noch jQuery-Server in den Protokolldaten Ihre Seite listen, weil – natürlich –: Bei jedem Aufruf wird das protokolliert und wenn man das nicht möchte, nimmt man die lokale Variante. Es hat noch einen klitzekleinen anderen Vorteil: Die Datei, die Sie auf Ihrem Rechner haben, die verändert Ihnen keiner mehr und entsprechend haben Sie auch immer die volle Kontrolle darüber, was Sie gerade einsetzen, wobei das eigentlich bei den großen Anbietern auch nicht passieren sollte. Ja, und damit hätten Sie die drei Varianten. Voraussetzung ist natürlich hier bei der Einbindung der lokalen Datei, dass Sie sich diese Datei zuvor von jQuery downgeloadet haben, und die sollte dann, wie jetzt hier zu sehen, ich bin also in meinem htdocs-Verzeichnis, die sollte an der gleichen Position sein wie auch das Dokument, das HTML-Dokument, was ich gerade bearbeite. Also, Sie sehen, ich bin hier in dem st-001-Dokument, das ist das hier, und ich verweise auf diese Bibliotheksdatei, auf dieses Skript, und das ist eben dann möglich ohne weitere Quellangabe. Sollten Sie das Skript eine Ebene höher angerichtet haben, also zum Beispiel ein Verzeichnis davor, dann geht das natürlich genauso und ist ebenso lokal. Hier, sehe ich gerade noch, habe ich ein Fehler. Da muss ich zumindestens die zwei Slashes hinsetzen. Auch hier, fällt mir gerade noch auf, auch der Hinweis, ob da nun ein http steht mit einem Doppelpunkt oder nicht, ist vollkommen egal. Beide Varianten funktionieren und da Programmierer grundsätzlich schreibfaul sind, wählt man eigentlich immer die kürzeste Variante, um so etwas zu realisieren. Und damit kennen Sie alle drei Methoden, um die jQuery-Bibliothek in Ihr Dokument einzubinden.

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!