1
99:59:59,999 --> 99:59:59,999
- Jetzt werde ich dich
dich durch die Grundlagen führen

2
99:59:59,999 --> 99:59:59,999
der Verwendung von jQuery auf deiner Webseite.

3
99:59:59,999 --> 99:59:59,999
Der erste Schritt besteht darin, die
die jQuery-Bibliothek einzubinden

4
99:59:59,999 --> 99:59:59,999
mit einem '<script>'-Tag

5
99:59:59,999 --> 99:59:59,999
Vorher haben wir JavaScript
innerhalb unseres ''-Tags ein,

6
99:59:59,999 --> 99:59:59,999
aber dieses Mal werde ich
ein "src"-Attribut hinzufügen.

7
99:59:59,999 --> 99:59:59,999
Und das muss ich auf eine URL setzen.

8
99:59:59,999 --> 99:59:59,999
Wie soll diese URL lauten?

9
99:59:59,999 --> 99:59:59,999
Wenn ich an meinem eigenen Computer arbeiten würde

10
99:59:59,999 --> 99:59:59,999
und habe jQuery heruntergeladen

11
99:59:59,999 --> 99:59:59,999
in den gleichen Ordner wie meine Webseite heruntergeladen,

12
99:59:59,999 --> 99:59:59,999
Ich könnte hier einfach "jquery.js" schreiben.

13
99:59:59,999 --> 99:59:59,999
Aber das wird hier bei Khan Academy nicht funktionieren.

14
99:59:59,999 --> 99:59:59,999
Hier brauche ich eine absolute URL von jQuery

15
99:59:59,999 --> 99:59:59,999
irgendwo auf einem Online-Server.

16
99:59:59,999 --> 99:59:59,999
Und es gibt eine Liste von
dieser URLs unter jquery.com,

17
99:59:59,999 --> 99:59:59,999
und ich habe eine davon
ich hier einfach einfügen.

18
99:59:59,999 --> 99:59:59,999
So geht's.

19
99:59:59,999 --> 99:59:59,999
So ist es gut. Jetzt möchte ich
auf ein paar Dinge hinweisen

20
99:59:59,999 --> 99:59:59,999
über diese URL.

21
99:59:59,999 --> 99:59:59,999
Die erste Sache ist, dass
sie mit "https" beginnt.

22
99:59:59,999 --> 99:59:59,999
Das bedeutet, dass es sich um eine sichere URL handelt.

23
99:59:59,999 --> 99:59:59,999
Wir erlauben dir nur
sichere Ressourcen einzubringen

24
99:59:59,999 --> 99:59:59,999
auf Khan Academy-Webseiten

25
99:59:59,999 --> 99:59:59,999
und das ist generell eine gute
Praxis in der Webentwicklung.

26
99:59:59,999 --> 99:59:59,999
Okay. Die zweite Sache
ist, dass diese Seite

27
99:59:59,999 --> 99:59:59,999
auf einem Google-Server: googleapis.com.

28
99:59:59,999 --> 99:59:59,999
Dieser Server wird CDN genannt,

29
99:59:59,999 --> 99:59:59,999
ein Content Delivery Network,

30
99:59:59,999 --> 99:59:59,999
was bedeutet, dass er optimiert ist

31
99:59:59,999 --> 99:59:59,999
für die Bereitstellung statischer Dateien
wie JavaScript-Bibliotheken

32
99:59:59,999 --> 99:59:59,999
und sie sehr schnell bereitzustellen.

33
99:59:59,999 --> 99:59:59,999
Diesem Google-Server vertraue ich

34
99:59:59,999 --> 99:59:59,999
und generell solltest du
immer den Servern vertrauen

35
99:59:59,999 --> 99:59:59,999
von denen du Skripte einspielst

36
99:59:59,999 --> 99:59:59,999
denn sie könnten möglicherweise
schädliche Dinge mit deiner Seite anstellen.

37
99:59:59,999 --> 99:59:59,999
Okay. Die dritte Sache ist
dass es eine Versionsnummer gibt

38
99:59:59,999 --> 99:59:59,999
in dieser URL steht: 2.1.4.

39
99:59:59,999 --> 99:59:59,999
Die jQuery-Bibliothek ist
in aktiver Entwicklung

40
99:59:59,999 --> 99:59:59,999
und es werden häufig neue Versionen veröffentlicht.

41
99:59:59,999 --> 99:59:59,999
Die Zahlen weiter links

42
99:59:59,999 --> 99:59:59,999
stehen für größere Versionsänderungen

43
99:59:59,999 --> 99:59:59,999
im Vergleich zu den Zahlen weiter rechts,

44
99:59:59,999 --> 99:59:59,999
die kleinere Versionen darstellen.

45
99:59:59,999 --> 99:59:59,999
Ich verwende hier jQuery 2,

46
99:59:59,999 --> 99:59:59,999
das in modernen Browsern funktioniert

47
99:59:59,999 --> 99:59:59,999
aber im IE8 funktioniert es nicht.

48
99:59:59,999 --> 99:59:59,999
Auf deiner eigenen Website,

49
99:59:59,999 --> 99:59:59,999
kannst du entscheiden, welche Version
du je nach Bedarf verwenden willst.

50
99:59:59,999 --> 99:59:59,999
Also gut. Wir haben also jQuery eingebunden.

51
99:59:59,999 --> 99:59:59,999
Jetzt wollen wir es tatsächlich benutzen

52
99:59:59,999 --> 99:59:59,999
in einem anderen '<script>'-Tag.

53
99:59:59,999 --> 99:59:59,999
Jede JavaScript-Bibliothek stellt Funktionen zur Verfügung

54
99:59:59,999 --> 99:59:59,999
und sie geben ihren Funktionen Namen.

55
99:59:59,999 --> 99:59:59,999
Wir müssen in der Dokumentation nachsehen

56
99:59:59,999 --> 99:59:59,999
um herauszufinden, wie diese Funktionsnamen lauten

57
99:59:59,999 --> 99:59:59,999
und was sie tatsächlich tun.

58
99:59:59,999 --> 99:59:59,999
Nun, die jQuery-Bibliothek
stellt eine Hauptfunktion zur Verfügung

59
99:59:59,999 --> 99:59:59,999
und sie hat einen sehr kurzen Namen.

60
99:59:59,999 --> 99:59:59,999
Sie besteht nur aus dem Dollarzeichen.

61
99:59:59,999 --> 99:59:59,999
Das bedeutet, dass das erste, was wir schreiben

62
99:59:59,999 --> 99:59:59,999
Dollar ist

63
99:59:59,999 --> 99:59:59,999
dann zwei Klammern,
weil es eine Funktion ist,

64
99:59:59,999 --> 99:59:59,999
und natürlich ein Semikolon.

65
99:59:59,999 --> 99:59:59,999
Es ist schön, dass dieser
Funktionsname so kurz ist

66
99:59:59,999 --> 99:59:59,999
denn wir würden diese Funktion
diese Funktion sehr oft aufrufen.

67
99:59:59,999 --> 99:59:59,999
Es gibt eine Menge Dinge, die wir
an diese Funktion übergeben können,

68
99:59:59,999 --> 99:59:59,999
aber für dieses einführende Beispiel,

69
99:59:59,999 --> 99:59:59,999
werde ich nur die Zeichenkette "h1" übergeben.

70
99:59:59,999 --> 99:59:59,999
Wenn ich das getan habe,

71
99:59:59,999 --> 99:59:59,999
sagt dies jQuery, dass es

72
99:59:59,999 --> 99:59:59,999
alle "h1"-Elemente auf der Seite zu finden

73
99:59:59,999 --> 99:59:59,999
und sie als ein
jQuery-Sammelobjekt zurückzugeben.

74
99:59:59,999 --> 99:59:59,999
Jetzt, wo ich das getan habe,

75
99:59:59,999 --> 99:59:59,999
kann ich andere Methoden aufrufen
für das jQuery-Objekt aufrufen

76
99:59:59,999 --> 99:59:59,999
aufrufen, um alle gefundenen
h1"-Elemente zu bearbeiten.

77
99:59:59,999 --> 99:59:59,999
Wenn ich zum Beispiel den
inneren Text aller Elemente ändern möchte,

78
99:59:59,999 --> 99:59:59,999
kann ich die Funktion "text" aufrufen

79
99:59:59,999 --> 99:59:59,999
aufrufen und ihr einen String übergeben.

80
99:59:59,999 --> 99:59:59,999
Es passiert.

81
99:59:59,999 --> 99:59:59,999
Ja!

82
99:59:59,999 --> 99:59:59,999
Und wir sind fertig!

83
99:59:59,999 --> 99:59:59,999
Das ist unser erstes Stück jQuery.

84
99:59:59,999 --> 99:59:59,999
Wir haben also die jQuery
Bibliothek mit dem ''-Tag eingebunden,

85
99:59:59,999 --> 99:59:59,999
jQuery angewiesen, alle
h1s" auf der Seite zu finden,

86
99:59:59,999 --> 99:59:59,999
zu finden und dann jQuery zu bitten
den Text von allen zu ändern.

87
99:59:59,999 --> 99:59:59,999
Wenn du weitermachst, werden wir
viel mehr durchgehen

88
99:59:59,999 --> 99:59:59,999
mehr ins Detail gehen,

89
99:59:59,999 --> 99:59:59,999
mehr Möglichkeiten zur Auswahl und
und Elemente zu manipulieren,

90
99:59:59,999 --> 99:59:59,999
Verwendung von jQuery zur Reaktion auf
Benutzerereignisse auf der Seite zu reagieren,

91
99:59:59,999 --> 99:59:59,999
sowie lustige Sachen mit Animationen und Effekten.