[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.77,0:00:02.61,Default,,0000,0000,0000,,Jetzt werde ich dir die Grundlagen
Dialogue: 0,0:00:02.61,0:00:05.72,Default,,0000,0000,0000,,zum Einsatz von jQuery auf \Neiner Webseite zeigen.
Dialogue: 0,0:00:05.72,0:00:09.00,Default,,0000,0000,0000,,Der erste Schritt besteht darin,\Ndie jQuery-Bibliothek mit
Dialogue: 0,0:00:09.00,0:00:11.23,Default,,0000,0000,0000,,einem '<script>'-Tag einzubinden.
Dialogue: 0,0:00:12.23,0:00:16.12,Default,,0000,0000,0000,,Vorher haben wir JavaScript innerhalb\Nunseres ''-Tags verwendet,
Dialogue: 0,0:00:16.12,0:00:20.28,Default,,0000,0000,0000,,aber dieses Mal werde ich\Nein 'src'-Attribut hinzufügen.
Dialogue: 0,0:00:20.28,0:00:24.39,Default,,0000,0000,0000,,Und das muss ich auf eine URL setzen.
Dialogue: 0,0:00:24.39,0:00:26.57,Default,,0000,0000,0000,,Wie soll diese URL lauten?
Dialogue: 0,0:00:26.57,0:00:28.63,Default,,0000,0000,0000,,Wenn ich an meinem eigenen \NComputer arbeiten würde
Dialogue: 0,0:00:28.63,0:00:30.09,Default,,0000,0000,0000,,und jQuery in den gleichen
Dialogue: 0,0:00:30.09,0:00:32.52,Default,,0000,0000,0000,,Ordner wie meine Webseite heruntergeladen hätte,
Dialogue: 0,0:00:32.52,0:00:36.47,Default,,0000,0000,0000,,könnte ich hier einfach 'jquery.js' schreiben.
Dialogue: 0,0:00:36.47,0:00:39.41,Default,,0000,0000,0000,,Aber das funktioniert hier bei Khan Academy nicht.
Dialogue: 0,0:00:39.41,0:00:43.10,Default,,0000,0000,0000,,Hier brauche ich eine absolute URL von jQuery
Dialogue: 0,0:00:43.10,0:00:45.88,Default,,0000,0000,0000,,irgendwo auf einem Online-Server.
Dialogue: 0,0:00:45.88,0:00:50.08,Default,,0000,0000,0000,,Und es gibt eine Liste von\Ndiesen URLs unter jquery.com.
Dialogue: 0,0:00:50.62,0:00:52.74,Default,,0000,0000,0000,,Eine davon werde ich hier einfügen.
Dialogue: 0,0:00:52.74,0:00:54.43,Default,,0000,0000,0000,,So geht's.
Dialogue: 0,0:00:54.43,0:00:56.12,Default,,0000,0000,0000,,Jetzt möchte ich auf ein paar Dinge
Dialogue: 0,0:00:56.12,0:00:58.03,Default,,0000,0000,0000,,über diese URL hinweisen.
Dialogue: 0,0:00:58.03,0:01:01.82,Default,,0000,0000,0000,,Die erste Sache ist, dass\Nsie mit "https" beginnt.
Dialogue: 0,0:01:01.82,0:01:05.23,Default,,0000,0000,0000,,Das bedeutet, dass es sich um eine sichere URL handelt.
Dialogue: 0,0:01:05.23,0:01:09.23,Default,,0000,0000,0000,,Auf Khan Academy-Webseiten\Nerlauben wir dir nur,
Dialogue: 0,0:01:09.23,0:01:11.21,Default,,0000,0000,0000,,sichere Ressourcen zu verwenden.
Dialogue: 0,0:01:11.21,0:01:15.06,Default,,0000,0000,0000,,Denn das ist generell eine gute\NPraxis in der Webentwicklung.
Dialogue: 0,0:01:15.66,0:01:18.86,Default,,0000,0000,0000,,Okay. Die zweite Sache ist,\Ndass diese Seite
Dialogue: 0,0:01:18.86,0:01:22.75,Default,,0000,0000,0000,,auf einem Google-Server ist: googleapis.com.
Dialogue: 0,0:01:22.75,0:01:25.38,Default,,0000,0000,0000,,Dieser Server wird ein CDN genannt,
Dialogue: 0,0:01:25.38,0:01:27.92,Default,,0000,0000,0000,,ein Content Delivery Network,
Dialogue: 0,0:01:27.92,0:01:29.41,Default,,0000,0000,0000,,was bedeutet, dass er optimiert ist,
Dialogue: 0,0:01:29.41,0:01:32.62,Default,,0000,0000,0000,,um statische Dateien wie JavaScript-Bibliotheken
Dialogue: 0,0:01:32.62,0:01:35.39,Default,,0000,0000,0000,,sehr schnell bereitzustellen.
Dialogue: 0,0:01:35.39,0:01:38.16,Default,,0000,0000,0000,,Diesem Google-Server vertraue ich
Dialogue: 0,0:01:38.16,0:01:41.30,Default,,0000,0000,0000,,und generell solltest du\Nimmer den Servern vertrauen,
Dialogue: 0,0:01:41.30,0:01:43.00,Default,,0000,0000,0000,,von denen du Skripte einbindest.
Dialogue: 0,0:01:43.00,0:01:47.24,Default,,0000,0000,0000,,Denn sie könnten möglicherweise\Nschädliche Dinge mit deiner Seite anstellen.
Dialogue: 0,0:01:47.40,0:01:50.01,Default,,0000,0000,0000,,Okay. Die dritte Sache ist,\Ndass eine Versionsnummer
Dialogue: 0,0:01:50.01,0:01:53.81,Default,,0000,0000,0000,,in dieser URL steht: 2.1.4.
Dialogue: 0,0:01:53.81,0:01:56.40,Default,,0000,0000,0000,,Die jQuery-Bibliothek ist\Nin aktiver Entwicklung
Dialogue: 0,0:01:56.40,0:01:59.02,Default,,0000,0000,0000,,und es werden häufig neue Versionen veröffentlicht.
Dialogue: 0,0:01:59.02,0:02:00.99,Default,,0000,0000,0000,,Die Zahlen weiter links
Dialogue: 0,0:02:00.99,0:02:03.28,Default,,0000,0000,0000,,stehen für größere Versionsänderungen,
Dialogue: 0,0:02:03.28,0:02:05.76,Default,,0000,0000,0000,,derweil die Zahlen weiter rechts
Dialogue: 0,0:02:05.76,0:02:08.13,Default,,0000,0000,0000,,die kleineren Versionen darstellen.
Dialogue: 0,0:02:08.13,0:02:10.35,Default,,0000,0000,0000,,Ich verwende hier jQuery 2,
Dialogue: 0,0:02:10.35,0:02:12.30,Default,,0000,0000,0000,,das in modernen Browsern,
Dialogue: 0,0:02:12.30,0:02:14.48,Default,,0000,0000,0000,,aber nicht im IE8 funktioniert.
Dialogue: 0,0:02:14.48,0:02:15.64,Default,,0000,0000,0000,,Auf deiner eigenen Website
Dialogue: 0,0:02:15.64,0:02:19.63,Default,,0000,0000,0000,,kannst du entscheiden, welche Version\Ndu je nach Bedarf verwenden willst.
Dialogue: 0,0:02:19.63,0:02:22.81,Default,,0000,0000,0000,,Also gut. Wir haben also jQuery eingebunden.
Dialogue: 0,0:02:22.81,0:02:24.97,Default,,0000,0000,0000,,Jetzt wollen wir es tatsächlich
Dialogue: 0,0:02:24.97,0:02:28.27,Default,,0000,0000,0000,,in einem anderen '<script>'-Tag verwenden.
Dialogue: 0,0:02:30.23,0:02:33.31,Default,,0000,0000,0000,,Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung
Dialogue: 0,0:02:33.31,0:02:35.36,Default,,0000,0000,0000,,und sie geben ihren Funktionen Namen.
Dialogue: 0,0:02:35.36,0:02:37.01,Default,,0000,0000,0000,,Wir müssen in der Dokumentation nachsehen,
Dialogue: 0,0:02:37.01,0:02:39.26,Default,,0000,0000,0000,,wie diese Funktionsnamen lauten
Dialogue: 0,0:02:39.26,0:02:41.76,Default,,0000,0000,0000,,und was sie tatsächlich tun.
Dialogue: 0,0:02:41.76,0:02:45.44,Default,,0000,0000,0000,,Nun, die jQuery-Bibliothek\Nstellt eine Hauptfunktion
Dialogue: 0,0:02:45.44,0:02:47.52,Default,,0000,0000,0000,,mit einem sehr kurzen Namen zur Verfügung.
Dialogue: 0,0:02:47.52,0:02:50.64,Default,,0000,0000,0000,,Es ist nur ein Dollarzeichen.
Dialogue: 0,0:02:50.64,0:02:52.26,Default,,0000,0000,0000,,Wir schreiben also
Dialogue: 0,0:02:52.26,0:02:53.56,Default,,0000,0000,0000,,zuerst einfach Dollar.
Dialogue: 0,0:02:53.56,0:02:56.53,Default,,0000,0000,0000,,Dann zwei Klammern,\Nweil es eine Funktion ist,
Dialogue: 0,0:02:56.53,0:02:59.41,Default,,0000,0000,0000,,und natürlich ein Semikolon.
Dialogue: 0,0:02:59.41,0:03:01.93,Default,,0000,0000,0000,,Es ist schön, dass dieser\NFunktionsname so kurz ist,
Dialogue: 0,0:03:01.93,0:03:05.76,Default,,0000,0000,0000,,denn wir werden diese Funktion\Nsehr oft aufrufen.
Dialogue: 0,0:03:06.23,0:03:08.93,Default,,0000,0000,0000,,Es gibt eine Menge Dinge, die wir\Nan diese Funktion übergeben können,
Dialogue: 0,0:03:08.93,0:03:10.30,Default,,0000,0000,0000,,aber für dieses erste Beispiel
Dialogue: 0,0:03:10.30,0:03:15.25,Default,,0000,0000,0000,,werde ich nur 'h1' übergeben.
Dialogue: 0,0:03:16.32,0:03:17.70,Default,,0000,0000,0000,,Wenn ich das getan habe,
Dialogue: 0,0:03:17.70,0:03:19.72,Default,,0000,0000,0000,,sagt dies jQuery, dass es
Dialogue: 0,0:03:19.72,0:03:23.10,Default,,0000,0000,0000,,alle 'h1'-Elemente auf der Seite finden und
Dialogue: 0,0:03:23.10,0:03:28.05,Default,,0000,0000,0000,,sie als ein jQuery-Objekt zurückgeben soll.
Dialogue: 0,0:03:28.15,0:03:29.31,Default,,0000,0000,0000,,Jetzt, wo ich das getan habe,
Dialogue: 0,0:03:29.31,0:03:33.23,Default,,0000,0000,0000,,kann ich andere Methoden auf\Ndem jQuery-Objekt aufrufen,
Dialogue: 0,0:03:33.23,0:03:37.20,Default,,0000,0000,0000,,um alle gefundenen\N'h1'-Elemente zu bearbeiten.
Dialogue: 0,0:03:37.20,0:03:39.94,Default,,0000,0000,0000,,Wenn ich zum Beispiel den\NText aller Elemente ändern möchte,
Dialogue: 0,0:03:39.94,0:03:43.36,Default,,0000,0000,0000,,kann ich die Funktion 'text' aufrufen
Dialogue: 0,0:03:43.36,0:03:46.04,Default,,0000,0000,0000,,und ihr einen String übergeben.
Dialogue: 0,0:03:47.24,0:03:48.49,Default,,0000,0000,0000,,Es funktioniert!
Dialogue: 0,0:03:48.49,0:03:49.79,Default,,0000,0000,0000,,Ja!
Dialogue: 0,0:03:49.79,0:03:50.80,Default,,0000,0000,0000,,Und wir sind fertig!
Dialogue: 0,0:03:50.80,0:03:53.03,Default,,0000,0000,0000,,Das ist unser erstes Stück jQuery.
Dialogue: 0,0:03:53.03,0:03:56.91,Default,,0000,0000,0000,,Wir haben also die jQuery\NBibliothek mit dem 'script'-Tag eingebunden,
Dialogue: 0,0:03:56.91,0:03:59.82,Default,,0000,0000,0000,,jQuery angewiesen, alle\N'H1' auf der Seite zu finden
Dialogue: 0,0:03:59.82,0:04:03.64,Default,,0000,0000,0000,,und dann jQuery gebeten,\Nden Text von allen zu ändern.
Dialogue: 0,0:04:03.64,0:04:06.33,Default,,0000,0000,0000,,Bald werden wir noch mehr lernen.
Dialogue: 0,0:04:06.33,0:04:07.65,Default,,0000,0000,0000,,Wir gehen mehr ins Detail,
Dialogue: 0,0:04:07.65,0:04:11.12,Default,,0000,0000,0000,,werden mehr Möglichkeiten zur Auswahl haben\Nund auch Elemente manipulieren.
Dialogue: 0,0:04:11.12,0:04:14.35,Default,,0000,0000,0000,,Wir verwenden jQuery, um auf Benutzerereignisse\Nauf der Seite zu reagieren. Und wir werden auch
Dialogue: 0,0:04:14.35,0:04:18.56,Default,,0000,0000,0000,,lustige Sachen wie Animationen \Nund Effekte ausprobieren.