1
00:00:00,770 --> 00:00:02,612
Je vais maintenant vous initier

2
00:00:02,612 --> 00:00:05,722
à l'utilisation de jQuery dans votre page Web.

3
00:00:05,722 --> 00:00:09,005
La 1ère étape consiste à inclure
la bibliothèque jQuery

4
00:00:09,005 --> 00:00:11,542
en utilisant une balise <script>.

5
00:00:12,232 --> 00:00:16,122
Avant, on plaçait le JavaScript à l'intérieur
d'une balise ,

6
00:00:16,122 --> 00:00:20,276
mais cette fois, je vais ajouter un attribut 'src'.

7
00:00:20,276 --> 00:00:24,391
Et il me faut le définir avec une URL.

8
00:00:24,391 --> 00:00:26,566
Quelle doit être cette URL ?

9
00:00:26,566 --> 00:00:28,628
Si je travaillais sur mon propre ordinateur

10
00:00:28,628 --> 00:00:30,093
et que j'avais téléchargé jQuery

11
00:00:30,093 --> 00:00:32,525
dans le même répertoire que ma page Web,

12
00:00:32,525 --> 00:00:36,473
je pourrais juste écrire 'jquery.js' ici.

13
00:00:36,473 --> 00:00:39,408
Mais ça ne marchera pas, ici, à la Khan Academy.

14
00:00:39,408 --> 00:00:43,096
Ici, il faut une URL absolue de jQuery

15
00:00:43,096 --> 00:00:45,885
pointant sur un serveur en ligne quelque part.

16
00:00:45,885 --> 00:00:50,082
Il y a une liste de ces URL sur jquery.com,

17
00:00:50,622 --> 00:00:52,738
et j'ai l'une d'entre elles ici, que je vais coller.

18
00:00:52,738 --> 00:00:54,430
Et voilà !

19
00:00:54,430 --> 00:00:56,119
Bien. Maintenant, je vais discuter de quelques détails

20
00:00:56,119 --> 00:00:58,031
à propos de cette URL.

21
00:00:58,031 --> 00:01:01,820
Premièrement, elle commence avec 'https'.

22
00:01:01,820 --> 00:01:05,231
Ça signifie que c'est une URL sécurisée.

23
00:01:05,231 --> 00:01:09,231
Nous ne vous permettons que l'inclusion
de ressources sécurisées

24
00:01:09,231 --> 00:01:11,207
dans les pages Web de la Khan Academy

25
00:01:11,207 --> 00:01:15,343
et c'est généralement recommandé
dans le développement Web.

26
00:01:15,663 --> 00:01:18,862
OK. Deuxièmement, elle est située

27
00:01:18,862 --> 00:01:22,751
sur un serveur Google : googleapis.com

28
00:01:22,751 --> 00:01:25,385
Ce serveur est appelé un CDN,

29
00:01:25,385 --> 00:01:27,921
un réseau de diffusion de contenu
(Content Delivery Network),

30
00:01:27,921 --> 00:01:29,406
ce qui veut dire que c'est optimisé

31
00:01:29,406 --> 00:01:32,625
pour servir des fichiers statiques,
comme des bibliothèques JavaScript,

32
00:01:32,625 --> 00:01:35,388
et ce, très rapidement.

33
00:01:35,388 --> 00:01:38,164
Ce serveur Google fait partie de ceux dans
lesquels j'ai confiance,

34
00:01:38,164 --> 00:01:41,301
et généralement, vous devez toujours
faire confiance dans les serveurs

35
00:01:41,301 --> 00:01:43,002
par lesquels vous récupérez des scripts

36
00:01:43,002 --> 00:01:47,240
vu qu'ils pourraient potentiellement
agir de façon malveillante sur votre page.

37
00:01:47,400 --> 00:01:50,013
OK. Troisièmement, il y a un numéro de version

38
00:01:50,013 --> 00:01:53,807
dans cette URL : 2.1.4.

39
00:01:53,807 --> 00:01:56,402
La bibliothèque jQuery est en développement actif

40
00:01:56,402 --> 00:01:59,015
et ils sortent régulièrement de nouvelles versions.

41
00:01:59,015 --> 00:02:00,987
Les nombres les plus à gauche

42
00:02:00,987 --> 00:02:03,279
représentent les modifications majeures de version

43
00:02:03,279 --> 00:02:05,755
alors que les nombres les plus à droite

44
00:02:05,755 --> 00:02:08,134
représentent les versions mineures.

45
00:02:08,134 --> 00:02:10,353
J'utiliser jQuery 2 ici,

46
00:02:10,353 --> 00:02:12,295
qui fonctionne sur les navigateurs modernes

47
00:02:12,295 --> 00:02:14,484
mais pas sur IE8.

48
00:02:14,484 --> 00:02:15,635
Sur votre propre site,

49
00:02:15,635 --> 00:02:19,627
vous pouvez décider quelle version utiliser
en vous basant sur vos besoins.

50
00:02:19,627 --> 00:02:22,809
Bien. Donc, jQuery est incluse.

51
00:02:22,809 --> 00:02:24,973
Maintenant, utilisons-la

52
00:02:24,973 --> 00:02:28,266
dans une autre balise <script>.

53
00:02:30,226 --> 00:02:33,309
Toutes les bibliothèques JavaScript fournissent
des fonctions

54
00:02:33,309 --> 00:02:35,358
et elles donnent les noms de ces fonctions.

55
00:02:35,358 --> 00:02:37,010
On doit regarder dans la documentation

56
00:02:37,010 --> 00:02:39,262
pour découvrir les noms de ces fonctions

57
00:02:39,262 --> 00:02:41,761
et ce qu'elles font réellement.

58
00:02:41,761 --> 00:02:45,444
Bien, la bibliothèque jQuery
fournit une fonction principale

59
00:02:45,444 --> 00:02:47,524
qui possède un nom très court.

60
00:02:47,524 --> 00:02:50,637
C'est juste le signe '$'.

61
00:02:50,637 --> 00:02:52,259
Ça signifie que la 1ère chose que j'écris

62
00:02:52,259 --> 00:02:53,556
est '$',

63
00:02:53,556 --> 00:02:56,526
puis 2 parenthèses, car c'est une fonction,

64
00:02:56,526 --> 00:02:59,412
et bien sûr, un point-virgule.

65
00:02:59,412 --> 00:03:01,928
C'est vraiment bien que le nom de cette fonction
soit si court

66
00:03:01,928 --> 00:03:05,756
car on appellera cette fonction sacrément souvent.

67
00:03:06,226 --> 00:03:08,928
Il y a plein de choses qu'on peut passer à cette fonction,

68
00:03:08,928 --> 00:03:10,300
mais pour cette exemple introductif,

69
00:03:10,300 --> 00:03:15,254
je vais juste passer une chaîne de caractères "h1".

70
00:03:16,319 --> 00:03:17,697
Quand je fais ça,

71
00:03:17,697 --> 00:03:19,724
ça demande à jQuery de trouver

72
00:03:19,724 --> 00:03:23,095
tous les éléments <h1> sur la page

73
00:03:23,095 --> 00:03:28,050
pour les retourner sous forme
d'objet collection jQuery.

74
00:03:28,150 --> 00:03:29,311
Maintenant que j'ai fait ça,

75
00:03:29,311 --> 00:03:33,233
je peux appeler d'autres méthodes sur l'objet jQuery

76
00:03:33,233 --> 00:03:37,200
dans le but de manipuler les élements <h1>
qui ont été trouvés.

77
00:03:37,200 --> 00:03:39,939
Si je souhaite modifier leur texte interne à toutes,

78
00:03:39,939 --> 00:03:43,356
je peux appeler la fonction 'text'

79
00:03:43,356 --> 00:03:46,044
et lui passer une chaîne de caractères.

80
00:03:47,244 --> 00:03:48,492
Ça passe !

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

82
00:03:49,792 --> 00:03:50,804
Et on a fini !

83
00:03:50,804 --> 00:03:53,029
C'est notre premier morceau de jQuery.

84
00:03:53,029 --> 00:03:56,910
On a donc inclus la bibliothèque jQuery
avec la balise ,

85
00:03:56,910 --> 00:03:59,819
dit à jQuery de chercher toutes les <h1>
sur la page,

86
00:03:59,819 --> 00:04:03,643
puis demandé à jQuery de modifier, à toutes, leur texte.

87
00:04:03,643 --> 00:04:06,332
Si vous continuez, on en verra plus,

88
00:04:06,332 --> 00:04:07,653
plus en détail,

89
00:04:07,653 --> 00:04:11,117
avec plus de techniques pour sélectionner
et manipuler les éléments,

90
00:04:11,117 --> 00:04:14,353
en utilisant jQuery pour répondre à des événements
utilisateur sur la page,

91
00:04:14,353 --> 00:04:18,558
plus des trucs cools avec les animations et les effets.