1
00:00:00,770 --> 00:00:02,612
Jetzt werde ich dir die Grundlagen

2
00:00:02,612 --> 00:00:05,722
zum Einsatz von jQuery auf 
einer Webseite zeigen.

3
00:00:05,722 --> 00:00:09,005
Der erste Schritt besteht darin,
die jQuery-Bibliothek mit

4
00:00:09,005 --> 00:00:11,232
einem '<script>'-Tag einzubinden.

5
00:00:12,232 --> 00:00:16,122
Vorher haben wir JavaScript innerhalb
unseres ''-Tags verwendet,

6
00:00:16,122 --> 00:00:20,276
aber dieses Mal werde ich
ein 'src'-Attribut hinzufügen.

7
00:00:20,276 --> 00:00:24,391
Und das muss ich auf eine URL setzen.

8
00:00:24,391 --> 00:00:26,566
Wie soll diese URL lauten?

9
00:00:26,566 --> 00:00:28,628
Wenn ich an meinem eigenen 
Computer arbeiten würde

10
00:00:28,628 --> 00:00:30,093
und jQuery in den gleichen

11
00:00:30,093 --> 00:00:32,525
Ordner wie meine Webseite heruntergeladen hätte,

12
00:00:32,525 --> 00:00:36,473
könnte ich hier einfach 'jquery.js' schreiben.

13
00:00:36,473 --> 00:00:39,408
Aber das funktioniert hier bei Khan Academy nicht.

14
00:00:39,408 --> 00:00:43,096
Hier brauche ich eine absolute URL von jQuery

15
00:00:43,096 --> 00:00:45,885
irgendwo auf einem Online-Server.

16
00:00:45,885 --> 00:00:50,082
Und es gibt eine Liste von
diesen URLs unter jquery.com.

17
00:00:50,622 --> 00:00:52,738
Eine davon werde ich hier einfügen.

18
00:00:52,738 --> 00:00:54,430
So geht's.

19
00:00:54,430 --> 00:00:56,119
Jetzt möchte ich auf ein paar Dinge

20
00:00:56,119 --> 00:00:58,031
über diese URL hinweisen.

21
00:00:58,031 --> 00:01:01,820
Die erste Sache ist, dass
sie mit "https" beginnt.

22
00:01:01,820 --> 00:01:05,231
Das bedeutet, dass es sich um eine sichere URL handelt.

23
00:01:05,231 --> 00:01:09,231
Auf Khan Academy-Webseiten
erlauben wir dir nur,

24
00:01:09,231 --> 00:01:11,207
sichere Ressourcen zu verwenden.

25
00:01:11,207 --> 00:01:15,063
Denn das ist generell eine gute
Praxis in der Webentwicklung.

26
00:01:15,663 --> 00:01:18,862
Okay. Die zweite Sache ist,
dass diese Seite

27
00:01:18,862 --> 00:01:22,751
auf einem Google-Server ist: googleapis.com.

28
00:01:22,751 --> 00:01:25,385
Dieser Server wird ein CDN genannt,

29
00:01:25,385 --> 00:01:27,921
ein Content Delivery Network,

30
00:01:27,921 --> 00:01:29,406
was bedeutet, dass er optimiert ist,

31
00:01:29,406 --> 00:01:32,625
um statische Dateien wie JavaScript-Bibliotheken

32
00:01:32,625 --> 00:01:35,388
sehr schnell bereitzustellen.

33
00:01:35,388 --> 00:01:38,164
Diesem Google-Server vertraue ich

34
00:01:38,164 --> 00:01:41,301
und generell solltest du
immer den Servern vertrauen,

35
00:01:41,301 --> 00:01:43,002
von denen du Skripte einbindest.

36
00:01:43,002 --> 00:01:47,240
Denn sie könnten möglicherweise
schädliche Dinge mit deiner Seite anstellen.

37
00:01:47,400 --> 00:01:50,013
Okay. Die dritte Sache ist,
dass eine Versionsnummer

38
00:01:50,013 --> 00:01:53,807
in dieser URL steht: 2.1.4.

39
00:01:53,807 --> 00:01:56,402
Die jQuery-Bibliothek ist
in aktiver Entwicklung

40
00:01:56,402 --> 00:01:59,015
und es werden häufig neue Versionen veröffentlicht.

41
00:01:59,015 --> 00:02:00,987
Die Zahlen weiter links

42
00:02:00,987 --> 00:02:03,279
stehen für größere Versionsänderungen,

43
00:02:03,279 --> 00:02:05,755
derweil die Zahlen weiter rechts

44
00:02:05,755 --> 00:02:08,134
die kleineren Versionen darstellen.

45
00:02:08,134 --> 00:02:10,353
Ich verwende hier jQuery 2,

46
00:02:10,353 --> 00:02:12,295
das in modernen Browsern,

47
00:02:12,295 --> 00:02:14,484
aber nicht im IE8 funktioniert.

48
00:02:14,484 --> 00:02:15,635
Auf deiner eigenen Website

49
00:02:15,635 --> 00:02:19,627
kannst du entscheiden, welche Version
du je nach Bedarf verwenden willst.

50
00:02:19,627 --> 00:02:22,809
Also gut. Wir haben also jQuery eingebunden.

51
00:02:22,809 --> 00:02:24,973
Jetzt wollen wir es tatsächlich

52
00:02:24,973 --> 00:02:28,266
in einem anderen '<script>'-Tag verwenden.

53
00:02:30,226 --> 00:02:33,309
Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung

54
00:02:33,309 --> 00:02:35,358
und sie geben ihren Funktionen Namen.

55
00:02:35,358 --> 00:02:37,010
Wir müssen in der Dokumentation nachsehen,

56
00:02:37,010 --> 00:02:39,262
wie diese Funktionsnamen lauten

57
00:02:39,262 --> 00:02:41,761
und was sie tatsächlich tun.

58
00:02:41,761 --> 00:02:45,444
Nun, die jQuery-Bibliothek
stellt eine Hauptfunktion

59
00:02:45,444 --> 00:02:47,524
mit einem sehr kurzen Namen zur Verfügung.

60
00:02:47,524 --> 00:02:50,637
Es ist nur ein Dollarzeichen.

61
00:02:50,637 --> 00:02:52,259
Wir schreiben also

62
00:02:52,259 --> 00:02:53,556
zuerst einfach Dollar.

63
00:02:53,556 --> 00:02:56,526
Dann zwei Klammern,
weil es eine Funktion ist,

64
00:02:56,526 --> 00:02:59,412
und natürlich ein Semikolon.

65
00:02:59,412 --> 00:03:01,928
Es ist schön, dass dieser
Funktionsname so kurz ist,

66
00:03:01,928 --> 00:03:05,756
denn wir werden diese Funktion
sehr oft aufrufen.

67
00:03:06,226 --> 00:03:08,928
Es gibt eine Menge Dinge, die wir
an diese Funktion übergeben können,

68
00:03:08,928 --> 00:03:10,300
aber für dieses erste Beispiel

69
00:03:10,300 --> 00:03:15,254
werde ich nur 'h1' übergeben.

70
00:03:16,319 --> 00:03:17,697
Wenn ich das getan habe,

71
00:03:17,697 --> 00:03:19,724
sagt dies jQuery, dass es

72
00:03:19,724 --> 00:03:23,095
alle 'h1'-Elemente auf der Seite finden und

73
00:03:23,095 --> 00:03:28,050
sie als ein jQuery-Objekt zurückgeben soll.

74
00:03:28,150 --> 00:03:29,311
Jetzt, wo ich das getan habe,

75
00:03:29,311 --> 00:03:33,233
kann ich andere Methoden auf
dem jQuery-Objekt aufrufen,

76
00:03:33,233 --> 00:03:37,200
um alle gefundenen
'h1'-Elemente zu bearbeiten.

77
00:03:37,200 --> 00:03:39,939
Wenn ich zum Beispiel den
Text aller Elemente ändern möchte,

78
00:03:39,939 --> 00:03:43,356
kann ich die Funktion 'text' aufrufen

79
00:03:43,356 --> 00:03:46,044
und ihr einen String übergeben.

80
00:03:47,244 --> 00:03:48,492
Es funktioniert!

81
00:03:48,492 --> 00:03:49,792
Ja!

82
00:03:49,792 --> 00:03:50,804
Und wir sind fertig!

83
00:03:50,804 --> 00:03:53,029
Das ist unser erstes Stück jQuery.

84
00:03:53,029 --> 00:03:56,910
Wir haben also die jQuery
Bibliothek mit dem 'script'-Tag eingebunden,

85
00:03:56,910 --> 00:03:59,819
jQuery angewiesen, alle
'H1' auf der Seite zu finden

86
00:03:59,819 --> 00:04:03,643
und dann jQuery gebeten,
den Text von allen zu ändern.

87
00:04:03,643 --> 00:04:06,332
Bald werden wir noch mehr lernen.

88
00:04:06,332 --> 00:04:07,653
Wir gehen mehr ins Detail,

89
00:04:07,653 --> 00:04:11,117
werden mehr Möglichkeiten zur Auswahl haben
und auch Elemente manipulieren.

90
00:04:11,117 --> 00:04:14,353
Wir verwenden jQuery, um auf Benutzerereignisse
auf der Seite zu reagieren. Und wir werden auch

91
00:04:14,353 --> 00:04:18,558
lustige Sachen wie Animationen 
und Effekte ausprobieren.