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

jQuery für Webdesigner

Einleitung und Wissenswertes zu jQuery

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video bietet eine kurze Einleitung und beschreibt die Begriffe von jQuery, JavaScript und AJAX samt einiger Einsatzbeispiele von jQuery auf Webseiten.

Transkript

In diesem Video möchte ich Ihnen kurz beschreiben, was man unter jQuery überhaupt verstehen kann. Und die, ja, erste Anlaufstelle natürlich, um sich über jQuery zu informieren, ist die Seite von jQuery direkt. Die erreichen Sie unter jquery.com. jQuery—write less, do more. Da steht schon eigentlich drin, was jQuery so besonders macht. Schreibe weniger und erreiche mehr. Jetzt können Sie vielleicht auch über Google weitere Informationen über jQuery sich suchen, aber eine weitere sehr gute Anlaufstelle ist Wikipedia. Und die Beschreibung hier ist schon sehr, sehr umfangreich. Also, wenn man sich das anschaut: Verbreitung, Funktionen, Benutzung und so weiter. Also, da kommt man schon ganz gut ins Thema mit hinein. Hier tauchen aber weitere Begriffe auf. Da haben wir zum Beispiel JavaScript-Bibliothek. Moment, jQuery – was hat jetzt jQuery wieder mit JavaScript zu tun? Und ein weiterer Begriff taucht hier unten auf: Ajax. Und genau um diese drei Begriffe dreht sich im Prinzip jQuery. Zunächst einmal: Was ist Ajax? Ajax bedeutet nichts anderes als Asynchronous JavaScript and XML. Und dabei handelt es sich im Wesentlichen um ein Konzept, das es erlaubt, Daten zwischen dem Browser und dem Server asynchron zu übertragen. Will heißen, wenn Sie auf herkömmliche Art und Weise etwas auf einer normalen HTML-Seite verändern und, ja, quasi die Webseite wieder neu laden müssen, dann wird die komplette Webseite vom Server erneut angefordert. Und das ist natürlich, wenn man nur Teile davon verändern möchte, wenig sinnvoll und kostet Zeit. Und hier setzt eben diese asynchrone JavaScript-und-XML-Schiene ein. Es hat was mit der D-O-M zu tun, oder kurz DOM. Hier drüber kann ich also Teile vom Ladeprozess ausklammern und somit tatsächlich über JavaScript und eben über Ajax nur Teile einer Webseite verändern, ohne die gesamte Webseite erneut laden zu müssen. Und das macht es eben so besonders und das ist auch der kleine Unterschied zu normalen JavaScript-Funktionen und eben, ja, diese Kombination von Ajax mit JavaScript oder, anders ausgedrückt, eben das asynchrone JavaScript. Und was ist nun jQuery? jQuery ist nichts anderes wie eine frei erhältliche JavaScript-Bibliothek, die diese ganzen Ajax-Funktionen, die tolle Effekte ermöglichen und eben nur Teile einer Webseite verändern können, ohne sie neu laden zu müssen – diese Bibliothek beinhaltet diese ganzen Ajax-Funktionen. Und damit kommt man über jQuery viel leichter an diese ganzen Ajax-Funktionen heran in Form eben von einfachen Befehlen und Bibliotheksaufrufen und muss nicht jedes Mal komplett alle grundlegenden Ajax-Funktionen oder, ja, programmierten Effekte, ja, hinein kopieren oder sogar selber programmieren. Und damit ist dann eben entsprechend so etwas Schönes möglich wie zum Beispiel auch hier direkt auf der jQuery-Seite selbst: Wenn ich hier zum Beispiel einfach auf ein Symbol gehe, dann bekomme ich eine Animation, und in dem Falle ist es tatsächlich auch eine jQuery-Animation. Ich möchte Ihnen noch eine weitere zeigen. Und zwar ist das die Seite von Google. Das ist wohl mit die bekannteste, ja, Ajax-Funktionalität, die fast alle kennen. Nämlich, wenn Sie hier einen Suchbegriff eingeben, dann bekommen Sie hier vorgeschlagene weitere Einträge. So, und entsprechend dieser Vorschlag, der jetzt hier aufpoppt, das ist eine Ajax-Funktionalität, weil: Er muss ja gleichzeitig laden, sehen, vergleichen, und dabei wird auf jeden Fall nicht die Webseite komplett neu geladen, wie man ja auch sehr schön sehen kann. Ich hab noch ein weiteres Seitenbeispiel und zwar ganz was anderes, von einer Naturkosmetikfirma. Das ist navora-kosmetik.de. Ich rufe die Seite mal auf. So, und was wir jetzt hier sehen, ist ebenfalls jQuery-Funktionalität – das typische Arbeiten mit einem Slider. Und wenn wir weiter runterscrollen, dann sehen wir hier zum Beispiel einen, ja, Seiteninhalt. Und wenn ich auf einen Link klicke, zum Beispiel Naturkosmetik, dann sieht man, wird die Seite nicht erneut neu geladen, sondern nur entsprechend der Teil, der verändert werden soll. Und das macht das Ganze eben so interessant in dieser Form, was Ajax und, ja, damit auch jQuery angeht. Ich möchte Ihnen noch ein weiteres Beispiel zeigen, und zwar finden Sie das über die jQuery-Seite selbst. Und es wird auch für viele, viele weitere Projekte ein ganz wichtiger Anlaufpunkt sein. Und zwar rede ich von diesem Menüpunkt Plugins. Wenn Sie den auf der jQuery-Seite einmal auswählen, dann kommen Sie in das jQuery Plugin Registry, und das ist unglaublich umfangreich. Also, wir sehen, was es hier alles für Plugins gibt: Allein für Grafikbearbeitung 180 Plugins. Das ist also schon eine ganze Menge. Was ich Ihnen zeigen möchte, ist das jQuery JUI Tabs. Falls Sie das so nicht finden, dann geben Sie es einfach hier oben ein, also jQuery JUI Tabs, und lassen danach suchen. Und Sie sehen, dann taucht das auch hier an der Stelle auf. So, und wenn wir das mal anklicken, dann, ja, bekommen Sie in der Regel so eine Infoseite über dieses Plugin. Und was aber auch bei den meisten Plugins angeboten wird, ist eine Demo-Seite, die man aufrufen kann, um sich das einfach mal anzuschauen. So, das mache ich und dann sind wir hier. Und Sie sehen, das ist im Prinzip hier mit solchen Tabs, also solchen Reitern, genau das Gleiche wie bei der Seite, die ich zuvor gezeigt habe, ja, wo ich hier drauf klicke. Also genau das gleiche Prinzip, nur eben entsprechend über jetzt solche Tabs, also solche Reiter in einer Website gelöst. Und da sieht man eigentlich, wie leistungsfähig jQuery wirklich ist und was es einem für Möglichkeiten gibt, eigene Websites grafisch aufzupeppen und auch mit Funktionalitäten zu versehen, die sonst nur durch große Bibliotheken oder durch lange Ladezeiten möglich sind. Also, der Funktionsumfang ist unglaublich vielfältig und das macht das Arbeiten mit jQuery so interessant und, ja, bereitet obendrein sehr viel Spaß.

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!