WEBVTT 99:59:59.999 --> 99:59:59.999 - Jetzt werde ich dich dich durch die Grundlagen führen 99:59:59.999 --> 99:59:59.999 der Verwendung von jQuery auf deiner Webseite. 99:59:59.999 --> 99:59:59.999 Der erste Schritt besteht darin, die die jQuery-Bibliothek einzubinden 99:59:59.999 --> 99:59:59.999 mit einem '<script>'-Tag 99:59:59.999 --> 99:59:59.999 Vorher haben wir JavaScript innerhalb unseres ''-Tags ein, 99:59:59.999 --> 99:59:59.999 aber dieses Mal werde ich ein "src"-Attribut hinzufügen. 99:59:59.999 --> 99:59:59.999 Und das muss ich auf eine URL setzen. 99:59:59.999 --> 99:59:59.999 Wie soll diese URL lauten? 99:59:59.999 --> 99:59:59.999 Wenn ich an meinem eigenen Computer arbeiten würde 99:59:59.999 --> 99:59:59.999 und habe jQuery heruntergeladen 99:59:59.999 --> 99:59:59.999 in den gleichen Ordner wie meine Webseite heruntergeladen, 99:59:59.999 --> 99:59:59.999 Ich könnte hier einfach "jquery.js" schreiben. 99:59:59.999 --> 99:59:59.999 Aber das wird hier bei Khan Academy nicht funktionieren. 99:59:59.999 --> 99:59:59.999 Hier brauche ich eine absolute URL von jQuery 99:59:59.999 --> 99:59:59.999 irgendwo auf einem Online-Server. 99:59:59.999 --> 99:59:59.999 Und es gibt eine Liste von dieser URLs unter jquery.com, 99:59:59.999 --> 99:59:59.999 und ich habe eine davon ich hier einfach einfügen. 99:59:59.999 --> 99:59:59.999 So geht's. 99:59:59.999 --> 99:59:59.999 So ist es gut. Jetzt möchte ich auf ein paar Dinge hinweisen 99:59:59.999 --> 99:59:59.999 über diese URL. 99:59:59.999 --> 99:59:59.999 Die erste Sache ist, dass sie mit "https" beginnt. 99:59:59.999 --> 99:59:59.999 Das bedeutet, dass es sich um eine sichere URL handelt. 99:59:59.999 --> 99:59:59.999 Wir erlauben dir nur sichere Ressourcen einzubringen 99:59:59.999 --> 99:59:59.999 auf Khan Academy-Webseiten 99:59:59.999 --> 99:59:59.999 und das ist generell eine gute Praxis in der Webentwicklung. 99:59:59.999 --> 99:59:59.999 Okay. Die zweite Sache ist, dass diese Seite 99:59:59.999 --> 99:59:59.999 auf einem Google-Server: googleapis.com. 99:59:59.999 --> 99:59:59.999 Dieser Server wird CDN genannt, 99:59:59.999 --> 99:59:59.999 ein Content Delivery Network, 99:59:59.999 --> 99:59:59.999 was bedeutet, dass er optimiert ist 99:59:59.999 --> 99:59:59.999 für die Bereitstellung statischer Dateien wie JavaScript-Bibliotheken 99:59:59.999 --> 99:59:59.999 und sie sehr schnell bereitzustellen. 99:59:59.999 --> 99:59:59.999 Diesem Google-Server vertraue ich 99:59:59.999 --> 99:59:59.999 und generell solltest du immer den Servern vertrauen 99:59:59.999 --> 99:59:59.999 von denen du Skripte einspielst 99:59:59.999 --> 99:59:59.999 denn sie könnten möglicherweise schädliche Dinge mit deiner Seite anstellen. 99:59:59.999 --> 99:59:59.999 Okay. Die dritte Sache ist dass es eine Versionsnummer gibt 99:59:59.999 --> 99:59:59.999 in dieser URL steht: 2.1.4. 99:59:59.999 --> 99:59:59.999 Die jQuery-Bibliothek ist in aktiver Entwicklung 99:59:59.999 --> 99:59:59.999 und es werden häufig neue Versionen veröffentlicht. 99:59:59.999 --> 99:59:59.999 Die Zahlen weiter links 99:59:59.999 --> 99:59:59.999 stehen für größere Versionsänderungen 99:59:59.999 --> 99:59:59.999 im Vergleich zu den Zahlen weiter rechts, 99:59:59.999 --> 99:59:59.999 die kleinere Versionen darstellen. 99:59:59.999 --> 99:59:59.999 Ich verwende hier jQuery 2, 99:59:59.999 --> 99:59:59.999 das in modernen Browsern funktioniert 99:59:59.999 --> 99:59:59.999 aber im IE8 funktioniert es nicht. 99:59:59.999 --> 99:59:59.999 Auf deiner eigenen Website, 99:59:59.999 --> 99:59:59.999 kannst du entscheiden, welche Version du je nach Bedarf verwenden willst. 99:59:59.999 --> 99:59:59.999 Also gut. Wir haben also jQuery eingebunden. 99:59:59.999 --> 99:59:59.999 Jetzt wollen wir es tatsächlich benutzen 99:59:59.999 --> 99:59:59.999 in einem anderen '<script>'-Tag. 99:59:59.999 --> 99:59:59.999 Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung 99:59:59.999 --> 99:59:59.999 und sie geben ihren Funktionen Namen. 99:59:59.999 --> 99:59:59.999 Wir müssen in der Dokumentation nachsehen 99:59:59.999 --> 99:59:59.999 um herauszufinden, wie diese Funktionsnamen lauten 99:59:59.999 --> 99:59:59.999 und was sie tatsächlich tun. 99:59:59.999 --> 99:59:59.999 Nun, die jQuery-Bibliothek stellt eine Hauptfunktion zur Verfügung 99:59:59.999 --> 99:59:59.999 und sie hat einen sehr kurzen Namen. 99:59:59.999 --> 99:59:59.999 Sie besteht nur aus dem Dollarzeichen. 99:59:59.999 --> 99:59:59.999 Das bedeutet, dass das erste, was wir schreiben 99:59:59.999 --> 99:59:59.999 Dollar ist 99:59:59.999 --> 99:59:59.999 dann zwei Klammern, weil es eine Funktion ist, 99:59:59.999 --> 99:59:59.999 und natürlich ein Semikolon. 99:59:59.999 --> 99:59:59.999 Es ist schön, dass dieser Funktionsname so kurz ist 99:59:59.999 --> 99:59:59.999 denn wir würden diese Funktion diese Funktion sehr oft aufrufen. 99:59:59.999 --> 99:59:59.999 Es gibt eine Menge Dinge, die wir an diese Funktion übergeben können, 99:59:59.999 --> 99:59:59.999 aber für dieses einführende Beispiel, 99:59:59.999 --> 99:59:59.999 werde ich nur die Zeichenkette "h1" übergeben. 99:59:59.999 --> 99:59:59.999 Wenn ich das getan habe, 99:59:59.999 --> 99:59:59.999 sagt dies jQuery, dass es 99:59:59.999 --> 99:59:59.999 alle "h1"-Elemente auf der Seite zu finden 99:59:59.999 --> 99:59:59.999 und sie als ein jQuery-Sammelobjekt zurückzugeben. 99:59:59.999 --> 99:59:59.999 Jetzt, wo ich das getan habe, 99:59:59.999 --> 99:59:59.999 kann ich andere Methoden aufrufen für das jQuery-Objekt aufrufen 99:59:59.999 --> 99:59:59.999 aufrufen, um alle gefundenen h1"-Elemente zu bearbeiten. 99:59:59.999 --> 99:59:59.999 Wenn ich zum Beispiel den inneren Text aller Elemente ändern möchte, 99:59:59.999 --> 99:59:59.999 kann ich die Funktion "text" aufrufen 99:59:59.999 --> 99:59:59.999 aufrufen und ihr einen String übergeben. 99:59:59.999 --> 99:59:59.999 Es passiert. 99:59:59.999 --> 99:59:59.999 Ja! 99:59:59.999 --> 99:59:59.999 Und wir sind fertig! 99:59:59.999 --> 99:59:59.999 Das ist unser erstes Stück jQuery. 99:59:59.999 --> 99:59:59.999 Wir haben also die jQuery Bibliothek mit dem ''-Tag eingebunden, 99:59:59.999 --> 99:59:59.999 jQuery angewiesen, alle h1s" auf der Seite zu finden, 99:59:59.999 --> 99:59:59.999 zu finden und dann jQuery zu bitten den Text von allen zu ändern. 99:59:59.999 --> 99:59:59.999 Wenn du weitermachst, werden wir viel mehr durchgehen 99:59:59.999 --> 99:59:59.999 mehr ins Detail gehen, 99:59:59.999 --> 99:59:59.999 mehr Möglichkeiten zur Auswahl und und Elemente zu manipulieren, 99:59:59.999 --> 99:59:59.999 Verwendung von jQuery zur Reaktion auf Benutzerereignisse auf der Seite zu reagieren, 99:59:59.999 --> 99:59:59.999 sowie lustige Sachen mit Animationen und Effekten.