WEBVTT 00:00:00.770 --> 00:00:02.612 Jetzt werde ich dir die Grundlagen 00:00:02.612 --> 00:00:05.722 zum Einsatz von jQuery auf einer Webseite zeigen. 00:00:05.722 --> 00:00:09.005 Der erste Schritt besteht darin, die jQuery-Bibliothek mit 00:00:09.005 --> 00:00:11.232 einem '<script>'-Tag einzubinden. 00:00:12.232 --> 00:00:16.122 Vorher haben wir JavaScript innerhalb unseres ''-Tags verwendet, 00:00:16.122 --> 00:00:20.276 aber dieses Mal werde ich ein 'src'-Attribut hinzufügen. 00:00:20.276 --> 00:00:24.391 Und das muss ich auf eine URL setzen. 00:00:24.391 --> 00:00:26.566 Wie soll diese URL lauten? 00:00:26.566 --> 00:00:28.628 Wenn ich an meinem eigenen Computer arbeiten würde 00:00:28.628 --> 00:00:30.093 und jQuery in den gleichen 00:00:30.093 --> 00:00:32.525 Ordner wie meine Webseite heruntergeladen hätte, 00:00:32.525 --> 00:00:36.473 könnte ich hier einfach 'jquery.js' schreiben. 00:00:36.473 --> 00:00:39.408 Aber das funktioniert hier bei Khan Academy nicht. 00:00:39.408 --> 00:00:43.096 Hier brauche ich eine absolute URL von jQuery 00:00:43.096 --> 00:00:45.885 irgendwo auf einem Online-Server. 00:00:45.885 --> 00:00:50.082 Und es gibt eine Liste von diesen URLs unter jquery.com. 00:00:50.622 --> 00:00:52.738 Eine davon werde ich hier einfügen. 00:00:52.738 --> 00:00:54.430 So geht's. 00:00:54.430 --> 00:00:56.119 Jetzt möchte ich auf ein paar Dinge 00:00:56.119 --> 00:00:58.031 über diese URL hinweisen. 00:00:58.031 --> 00:01:01.820 Die erste Sache ist, dass sie mit "https" beginnt. 00:01:01.820 --> 00:01:05.231 Das bedeutet, dass es sich um eine sichere URL handelt. 00:01:05.231 --> 00:01:09.231 Auf Khan Academy-Webseiten erlauben wir dir nur, 00:01:09.231 --> 00:01:11.207 sichere Ressourcen zu verwenden. 00:01:11.207 --> 00:01:15.063 Denn das ist generell eine gute Praxis in der Webentwicklung. 00:01:15.663 --> 00:01:18.862 Okay. Die zweite Sache ist, dass diese Seite 00:01:18.862 --> 00:01:22.751 auf einem Google-Server ist: googleapis.com. 00:01:22.751 --> 00:01:25.385 Dieser Server wird ein CDN genannt, 00:01:25.385 --> 00:01:27.921 ein Content Delivery Network, 00:01:27.921 --> 00:01:29.406 was bedeutet, dass er optimiert ist, 00:01:29.406 --> 00:01:32.625 um statische Dateien wie JavaScript-Bibliotheken 00:01:32.625 --> 00:01:35.388 sehr schnell bereitzustellen. 00:01:35.388 --> 00:01:38.164 Diesem Google-Server vertraue ich 00:01:38.164 --> 00:01:41.301 und generell solltest du immer den Servern vertrauen, 00:01:41.301 --> 00:01:43.002 von denen du Skripte einbindest. 00:01:43.002 --> 00:01:47.240 Denn sie könnten möglicherweise schädliche Dinge mit deiner Seite anstellen. 00:01:47.400 --> 00:01:50.013 Okay. Die dritte Sache ist, dass eine Versionsnummer 00:01:50.013 --> 00:01:53.807 in dieser URL steht: 2.1.4. 00:01:53.807 --> 00:01:56.402 Die jQuery-Bibliothek ist in aktiver Entwicklung 00:01:56.402 --> 00:01:59.015 und es werden häufig neue Versionen veröffentlicht. 00:01:59.015 --> 00:02:00.987 Die Zahlen weiter links 00:02:00.987 --> 00:02:03.279 stehen für größere Versionsänderungen, 00:02:03.279 --> 00:02:05.755 derweil die Zahlen weiter rechts 00:02:05.755 --> 00:02:08.134 die kleineren Versionen darstellen. 00:02:08.134 --> 00:02:10.353 Ich verwende hier jQuery 2, 00:02:10.353 --> 00:02:12.295 das in modernen Browsern, 00:02:12.295 --> 00:02:14.484 aber nicht im IE8 funktioniert. 00:02:14.484 --> 00:02:15.635 Auf deiner eigenen Website 00:02:15.635 --> 00:02:19.627 kannst du entscheiden, welche Version du je nach Bedarf verwenden willst. 00:02:19.627 --> 00:02:22.809 Also gut. Wir haben also jQuery eingebunden. 00:02:22.809 --> 00:02:24.973 Jetzt wollen wir es tatsächlich 00:02:24.973 --> 00:02:28.266 in einem anderen '<script>'-Tag verwenden. 00:02:30.226 --> 00:02:33.309 Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung 00:02:33.309 --> 00:02:35.358 und sie geben ihren Funktionen Namen. 00:02:35.358 --> 00:02:37.010 Wir müssen in der Dokumentation nachsehen, 00:02:37.010 --> 00:02:39.262 wie diese Funktionsnamen lauten 00:02:39.262 --> 00:02:41.761 und was sie tatsächlich tun. 00:02:41.761 --> 00:02:45.444 Nun, die jQuery-Bibliothek stellt eine Hauptfunktion 00:02:45.444 --> 00:02:47.524 mit einem sehr kurzen Namen zur Verfügung. 00:02:47.524 --> 00:02:50.637 Es ist nur ein Dollarzeichen. 00:02:50.637 --> 00:02:52.259 Wir schreiben also 00:02:52.259 --> 00:02:53.556 zuerst einfach Dollar. 00:02:53.556 --> 00:02:56.526 Dann zwei Klammern, weil es eine Funktion ist, 00:02:56.526 --> 00:02:59.412 und natürlich ein Semikolon. 00:02:59.412 --> 00:03:01.928 Es ist schön, dass dieser Funktionsname so kurz ist, 00:03:01.928 --> 00:03:05.756 denn wir werden diese Funktion sehr oft aufrufen. 00:03:06.226 --> 00:03:08.928 Es gibt eine Menge Dinge, die wir an diese Funktion übergeben können, 00:03:08.928 --> 00:03:10.300 aber für dieses erste Beispiel 00:03:10.300 --> 00:03:15.254 werde ich nur 'h1' übergeben. 00:03:16.319 --> 00:03:17.697 Wenn ich das getan habe, 00:03:17.697 --> 00:03:19.724 sagt dies jQuery, dass es 00:03:19.724 --> 00:03:23.095 alle 'h1'-Elemente auf der Seite finden und 00:03:23.095 --> 00:03:28.050 sie als ein jQuery-Objekt zurückgeben soll. 00:03:28.150 --> 00:03:29.311 Jetzt, wo ich das getan habe, 00:03:29.311 --> 00:03:33.233 kann ich andere Methoden auf dem jQuery-Objekt aufrufen, 00:03:33.233 --> 00:03:37.200 um alle gefundenen 'h1'-Elemente zu bearbeiten. 00:03:37.200 --> 00:03:39.939 Wenn ich zum Beispiel den Text aller Elemente ändern möchte, 00:03:39.939 --> 00:03:43.356 kann ich die Funktion 'text' aufrufen 00:03:43.356 --> 00:03:46.044 und ihr einen String übergeben. 00:03:47.244 --> 00:03:48.492 Es funktioniert! 00:03:48.492 --> 00:03:49.792 Ja! 00:03:49.792 --> 00:03:50.804 Und wir sind fertig! 00:03:50.804 --> 00:03:53.029 Das ist unser erstes Stück jQuery. 00:03:53.029 --> 00:03:56.910 Wir haben also die jQuery Bibliothek mit dem 'script'-Tag eingebunden, 00:03:56.910 --> 00:03:59.819 jQuery angewiesen, alle 'H1' auf der Seite zu finden 00:03:59.819 --> 00:04:03.643 und dann jQuery gebeten, den Text von allen zu ändern. 00:04:03.643 --> 00:04:06.332 Bald werden wir noch mehr lernen. 00:04:06.332 --> 00:04:07.653 Wir gehen mehr ins Detail, 00:04:07.653 --> 00:04:11.117 werden mehr Möglichkeiten zur Auswahl haben und auch Elemente manipulieren. 00:04:11.117 --> 00:04:14.353 Wir verwenden jQuery, um auf Benutzerereignisse auf der Seite zu reagieren. Und wir werden auch 00:04:14.353 --> 00:04:18.558 lustige Sachen wie Animationen und Effekte ausprobieren.