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