1
00:00:00,210 --> 00:00:02,150
D'accord, nous reviendrons.

2
00:00:02,400 --> 00:00:10,520
Retour dans l'introduction à javascript J'ai mentionné que l'une des raisons importantes pour l'apprentissage de JavaScript est que nous pouvons l'utiliser pour rendre nos pages interactives.

3
00:00:10,680 --> 00:00:17,920
C'est comment nous pouvons exécuter le code quand un utilisateur clique sur un bouton ou tapez quelque chose dans ou frappe la touche fléchée ou quoi qu'ils font.

4
00:00:18,090 --> 00:00:24,880
Nous pouvons avoir un code correspondant qui est exécuté à un moment donné et pas seulement exécuté au début de la page.

5
00:00:25,410 --> 00:00:28,290
Donc, pour ce faire, nous devons parler des événements Dom.

6
00:00:28,320 --> 00:00:31,250
Cette vidéo sera donc une introduction aux événements Dom.

7
00:00:31,260 --> 00:00:36,300
Conceptuellement le processus pour les mettre en place et puis aussi la syntaxe.

8
00:00:36,300 --> 00:00:38,660
Donc, comme je l'ai mentionné événements sont partout.

9
00:00:38,670 --> 00:00:47,330
Pensez quand vous interagissez avec la page Web les différentes choses qui se produisent vous pouvez cliquer sur des choses comme un bouton, vous pouvez survoler un lien et quelque chose pourrait apparaître.

10
00:00:47,370 --> 00:00:50,320
Vous pouvez faire glisser et déposer des éléments sur certaines pages.

11
00:00:50,550 --> 00:00:56,650
Vous voudrez peut-être avoir un code qui s'exécute à partir de l'utilisateur double clic ou effectivement cette page Web a quelques exemples.

12
00:00:56,670 --> 00:01:03,550
Cette diapositive dot com est un site Web et je touche les flèches gauche et droite pour changer de diapositives.

13
00:01:03,690 --> 00:01:10,050
Donc, un code est exécuté quand je clique sur la flèche gauche ou la flèche droite ou lorsque je clique ici.

14
00:01:10,590 --> 00:01:16,860
C'est aussi un événement et il est en train de faire quelque chose il est en cours d'exécution un certain code qui change la diapositive actuelle.

15
00:01:16,950 --> 00:01:20,930
Donc, le point est des événements sont partout et ils sont vraiment excitants.

16
00:01:20,920 --> 00:01:35,070
C'est l'un de mes sujets préférés à enseigner parce que maintenant nous pouvons rendre nos pages Web interactives, nous pouvons prendre les trucs de manipulation que nous avons appris sur les changements de couleurs en changeant le texte et puis nous pouvons effectivement le faire quand quelque chose en particulier se produit.

17
00:01:35,070 --> 00:01:38,340
Donc, cela ouvre vraiment le potentiel de manipuler le dortoir.

18
00:01:38,370 --> 00:01:49,050
C'est comment nous allons faire des jeux, c'est comment nous allons faire des validateurs de formulaire, nous allons faire un jeu de sélecteur de couleur vraiment cool et que tout découle de ces événements.

19
00:01:49,050 --> 00:02:07,590
Donc, la façon dont ces événements fonctionnent est que nous les rattachons à des éléments spécifiques de sorte que nous sélectionnons un élément comme le premier bouton ou le second H-1 ou l'entrée où un type est égal au texte et ensuite nous attachons un écouteur d'événement à celui Élément sélectionné.

20
00:02:07,920 --> 00:02:21,990
Par exemple, nous pourrions être à l'écoute d'un clic sur un bouton que nous pourrions écouter pour un événement hover sur un H1, nous pourrions écouter l'événement key press dans une entrée de texte et nous parlerons plus des différences entre ces événements.

21
00:02:21,990 --> 00:02:30,170
Il ya tellement de différents types d'événements en javascript, mais ce qui est important, c'est que nous devons avoir un événement qui est écouté sur un élément donné.

22
00:02:30,180 --> 00:02:34,890
Donc juste comme avant quand je parlerais de sélectionner et puis manipuler qui s'applique toujours.

23
00:02:34,920 --> 00:02:43,740
Nous devons sélectionner quelque chose et alors la manipulation qui se produit est nous ajoutant un écouteur d'événement à cette chose que nous avons sélectionnée.

24
00:02:43,740 --> 00:02:49,400
Il ya une méthode en particulier que nous allons utiliser tout le temps qui est appelé add événement écouteur.

25
00:02:49,650 --> 00:03:03,070
Ainsi, lors de l'écoute d'événement est ce que nous utilisons une fois que nous sélectionnons un élément comme le premier bouton ou le type d'entrée parce que le mot de passe et nous avons quelque chose sélectionné alors nous appelons add événement écouteur sur elle et nous donnons deux arguments.

26
00:03:03,330 --> 00:03:06,950
Le premier est le type d'événement que nous voulons écouter.

27
00:03:07,350 --> 00:03:12,790
Et le deuxième argument est le code que nous voulons lancer lorsque cet événement se produit.

28
00:03:13,260 --> 00:03:14,330
Voici donc un exemple.

29
00:03:14,400 --> 00:03:22,060
Je suis en sélectionnant le premier bouton sur une page n'a pas vraiment d'où le bouton est ou comment il regarde ou n'importe quoi n'importe quel bouton.

30
00:03:22,350 --> 00:03:30,540
Et puis je suis bouton d'appel à l'écouteur d'événement cliquez et puis le deuxième argument est une fonction qui va tout le chemin à ici.

31
00:03:30,750 --> 00:03:33,690
Et ce code n'est pas exécuté tout de suite.

32
00:03:33,690 --> 00:03:35,910
Rappelez-vous ceci est appelé un rappel.

33
00:03:35,910 --> 00:03:38,140
Ce code n'est pas exécuté immédiatement.

34
00:03:38,430 --> 00:03:42,000
Il est seulement exécuté une fois que cet événement se déclenche.

35
00:03:42,000 --> 00:03:46,390
Donc, une fois que vous cliquez sur le bouton javascript va dans il rappelle.

36
00:03:46,440 --> 00:03:51,630
Cette fonction dit hey c'est votre moment de briller et de revenir ici prêt, nous vous exécutons.

37
00:03:51,630 --> 00:03:56,040
Et puis ce code est exécuté et nous obtenons des conseils ne pas enregistrer quelqu'un cliquez sur le bouton.

38
00:03:56,250 --> 00:04:05,290
Ainsi, cette fonction s'exécute chaque fois qu'un bouton est rapide à exécuter avec le bouton spécifique que nous avons sélectionné en cliquant.

39
00:04:05,910 --> 00:04:07,540
Voici un autre exemple.

40
00:04:07,830 --> 00:04:26,910
Ce cas, j'ai la marque ici un bouton et un paragraphe et j'ai sélectionné les deux avec le sélecteur Kery et je les sauvegarder tous les deux à des variables et puis tout ce que nous faisons est d'ajouter un écouteur de clic donc bouton ajoute l'écouteur d'événement cliquez et puis le Second argument est que la fonction de rappel.

41
00:04:26,910 --> 00:04:42,260
Et ce que nous allons faire chaque fois que ce bouton est cliqué est modifié le contenu du texte des paragraphes pour être quelqu'un cliquez sur le bouton et vous pouvez voir quand je clique sur ce bouton, il change de personne n'est cliqué sur moi et à quelqu'un a cliquer sur le bouton.

42
00:04:42,930 --> 00:04:50,790
Alors maintenant, je vais faire une démonstration rapide en utilisant notre page de démonstration Dom, commençons par faire de ce H-1 ici.

43
00:04:50,810 --> 00:04:53,700
Modifier la couleur lorsqu'un utilisateur clique dessus.

44
00:04:53,780 --> 00:04:58,310
Pour ce faire, nous devons toujours commencer par sélectionner le H-1.

45
00:04:58,810 --> 00:05:00,510
Nous avons donc un tas d'options là-bas.

46
00:05:00,530 --> 00:05:09,070
Je vais juste utiliser le document selector queery que le sélecteur de requête H-1 assurez-vous que nous l'avons.

47
00:05:09,310 --> 00:05:10,460
D'accord.

48
00:05:10,460 --> 00:05:14,920
Ensuite, nous écrivons juste H-1 qui ajoutent l'écouteur d'événement.

49
00:05:15,010 --> 00:05:16,790
Rappelez-vous qu'il ya deux arguments.

50
00:05:16,940 --> 00:05:19,910
Le premier est l'événement que nous écoutons.

51
00:05:20,060 --> 00:05:24,050
Et nous allons passer plus de temps à parler des différents événements les différentes options.

52
00:05:24,050 --> 00:05:30,050
Pour l'instant, nous faisons simplement un clic et le second est le code que nous voulons lancer lorsque l'utilisateur clique.

53
00:05:30,310 --> 00:05:37,060
Donc, la fonction et tout simplement commencer très simple et juste faire une alerte lorsque l'utilisateur clique.

54
00:05:37,160 --> 00:05:44,330
Nous allons donc faire une alerte chacun a été cliqué juste comme ceci.

55
00:05:44,750 --> 00:05:46,990
Et maintenant, allons entrer.

56
00:05:47,120 --> 00:05:48,700
Rien ne change tout de suite.

57
00:05:49,190 --> 00:05:52,910
Mais maintenant, si je clique sur l'un donc je fermer ce.

58
00:05:52,910 --> 00:05:54,570
Si je clique n'importe où sur la page.

59
00:05:54,590 --> 00:05:56,400
Mis à part le H-1, rien ne se passe.

60
00:05:56,620 --> 00:06:01,150
Dès que je clique sur le H-1, même si cela me dit que H-1 était correcte.

61
00:06:01,430 --> 00:06:02,510
C'est important.

62
00:06:02,500 --> 00:06:15,290
Il ne s'applique qu'à l'H-1, mais cela signifie que je peux aller ici et cliquer parce que rappelez-vous si je l'inspecter le H-1 va tout le chemin à travers l'écran.

63
00:06:15,500 --> 00:06:30,190
Donc, juste quelque chose à garder à l'esprit que c'est bien pour nous dans ce cas, mais il apparaîtra de temps en temps où les choses se comportent un peu différent que vous pourriez vouloir et vous avez besoin de les utiliser CSSA peut-être pour raccourcir la première étape ou vous changez L'auditeur de toute façon.

64
00:06:30,640 --> 00:06:35,130
Alors, plutôt que d'alerter, essayons de faire autre chose.

65
00:06:35,330 --> 00:06:54,260
Et si je viens de frapper la flèche vers le haut d'un écouteur ajouter l'événement écouteur et je change le code ici et je fais quelque chose comme H-1 que l'arrière-plan de style égaux et nous allons faire fond orange orange et j'ai touché entrer.

66
00:06:54,250 --> 00:07:06,030
Encore une fois rien ne change tout de suite, mais quand je clique sur l'attention à ce qui se passe la première chose qui se passe, c'est qu'il dit toujours dans une alerte que H-1 a été cliqué.

67
00:07:06,170 --> 00:07:10,360
Et puis, quand je ferme, il devient orange.

68
00:07:10,730 --> 00:07:14,840
La morale ici est que nous pouvons avoir plus d'un auditeur sur un élément donné.

69
00:07:14,840 --> 00:07:28,890
Lorsque nous avons cliqué sur ce H-1, le premier auditeur que nous avons ajouté était à l'écoute d'un clic et il a couru une alerte et ensuite nous avons ajouté un autre auditeur après qui a également écouté pour un clic, mais il a changé la couleur de fond.

70
00:07:28,910 --> 00:07:31,200
Donc, quand je clique sur les deux courir.

71
00:07:31,390 --> 00:07:42,190
Et ça va toujours arriver pour maintenant si je clique de nouveau, je reçois l'alerte et son changé en orange bien sûr, vous ne voyez pas que parce que c'était déjà orange, mais vous devez me faire confiance.

72
00:07:42,290 --> 00:07:45,000
Il ne cesse de le changer en orange à plusieurs reprises et plus.

73
00:07:45,670 --> 00:07:48,560
OK I Je vais rafraîchir et se débarrasser de tout cela.

74
00:07:48,590 --> 00:07:52,720
Je veux aussi faire une démonstration rapide en ajoutant un auditeur à l'UL.

75
00:07:52,880 --> 00:08:04,300
Donc, permet de faire un document de vidage de requête sélecteur UL et se rappeler que nous avons trois alliés au lieu d'un seul ul.

76
00:08:04,490 --> 00:08:08,500
Donc, je vais vous montrer ce qui se passe quand nous le mettons sur un élément parent comme ça.

77
00:08:08,510 --> 00:08:11,850
Eh bien et je ne vais pas utiliser une variable va juste faire cela ici.

78
00:08:12,130 --> 00:08:14,640
Auditeur adulé.

79
00:08:15,250 --> 00:08:16,140
Cliquez.

80
00:08:16,550 --> 00:08:17,930
C'est donc le premier argument.

81
00:08:17,930 --> 00:08:25,560
La seconde est la fonction que nous voulons exécuter comme ça.

82
00:08:25,880 --> 00:08:27,410
Et je vais commencer.

83
00:08:27,680 --> 00:08:35,720
Faisons juste une console qui log bien a été clics et vous savez quoi.

84
00:08:35,810 --> 00:08:37,210
C'est la voix passive.

85
00:08:37,250 --> 00:08:38,050
Mauvaise idée.

86
00:08:38,300 --> 00:08:39,270
Faisons.

87
00:08:39,460 --> 00:08:43,550
Vous avez cliqué sur l'UL beaucoup mieux.

88
00:08:43,880 --> 00:08:44,520
D'ACCORD.

89
00:08:44,720 --> 00:08:48,430
Alors gardons la console ouverte et allons cliquer sur l'UL.

90
00:08:48,980 --> 00:08:50,420
Mais comment allons-nous cliquer sur l'huile.

91
00:08:50,450 --> 00:08:53,090
Parce que le puits a trois alliés à l'intérieur de celui-ci.

92
00:08:53,120 --> 00:08:55,290
L'UL est tout ça ici.

93
00:08:55,320 --> 00:09:00,890
Donc, tout rapide n'a pas d'importance que je suis allié sur n'importe où dans le puits.

94
00:09:01,040 --> 00:09:02,820
Vous pouvez voir le nombre incrémenter ici.

95
00:09:02,930 --> 00:09:07,150
Tout rapide sur le puits il va exécuter ce log de point de console.

96
00:09:08,120 --> 00:09:14,290
Donc, nous allons rafraîchir une fois de plus et cette fois disons que je veux changer l'allié lui-même.

97
00:09:14,300 --> 00:09:17,540
Quand je clique sur un allié individuel, je veux que quelque chose se produise.

98
00:09:17,960 --> 00:09:19,400
Il y a quelques façons de le faire.

99
00:09:19,420 --> 00:09:26,360
Et nous allons commencer par le plus simple qui est d'attacher un auditeur à chaque allié comme un heads-up.

100
00:09:26,360 --> 00:09:32,940
Ce que nous allons faire finalement est d'attacher un auditeur à l'UL et puis à l'intérieur de cet auditeur.

101
00:09:32,990 --> 00:09:39,250
Nous allons détecter qui se trouvent spécifiquement à l'intérieur de l'UL a été cliqué sur tous avec un Lessner.

102
00:09:39,250 --> 00:09:55,570
Pour l'instant, même si nous allons ajouter un auditeur séparé à chaque mensonge, nous devons donc commencer par sélectionner les Alliés afin que nos alliés égaux document point queery sélecteur tous les alliés s'assure que nous les avons tous.

103
00:09:55,570 --> 00:09:59,040
Très bien, nous devons faire une boucle for.

104
00:09:59,210 --> 00:10:02,190
Donc pour var I est égal à zéro.

105
00:10:02,410 --> 00:10:04,880
Rappelez-vous que j'ai dit que nous allions faire cela tout le temps.

106
00:10:04,880 --> 00:10:14,740
Donc je moins que les alliés que la longueur je plus plus juste comme ça.

107
00:10:15,050 --> 00:10:20,600
Et puis à l'intérieur d'ici nous allons réellement ajouter un auditeur à chaque allié individuel.

108
00:10:20,840 --> 00:10:21,940
Donc, ça ressemble à ça.

109
00:10:21,960 --> 00:10:39,220
Elyse I de sorte que nous donne l'allié spécifique et l'écouteur d'événement la fonction de clic juste comme cela et fait ceci un peu.

110
00:10:39,770 --> 00:10:41,920
Et puis le code que nous voulons exécuter.

111
00:10:42,320 --> 00:10:49,250
Changeons la couleur de l'allié qui a été cliqué et nous allons simplement le changer pour être violet.

112
00:10:49,250 --> 00:10:51,250
Nous avons donc quelques options différentes.

113
00:10:51,290 --> 00:10:54,600
Ce que je dois faire est de se référer à l'allié sur lequel on a cliqué.

114
00:10:54,800 --> 00:11:05,320
Donc, je pourrais faire cette alliés, je bien que ce n'est pas vraiment une grande solution, car il ya une façon beaucoup plus facile de faire ce qui est d'utiliser ce mot-clé.

115
00:11:05,680 --> 00:11:23,100
Donc, à l'intérieur d'un écouteur, le mot-clé se réfère à l'élément sur lequel on a cliqué ou à l'élément sur lequel on a survolé ou à l'élément sur lequel l'appui de touche a eu lieu, où l'élément qui va juste avant l'événement fait référence à.

116
00:11:23,140 --> 00:11:30,640
Donc je peux écrire ce style de point que la couleur est égale au violet.

117
00:11:31,000 --> 00:11:33,140
Et en fait c'est quelque chose de plus évident.

118
00:11:33,230 --> 00:11:34,150
C'est une petite police.

119
00:11:34,150 --> 00:11:36,670
Alors faisons rose juste comme ça.

120
00:11:37,040 --> 00:11:38,500
Je touche entrer.

121
00:11:38,500 --> 00:11:46,020
Rien ne se passe immédiatement, mais si je clique sur un allié, vous pouvez voir qu'il change pour être rose.

122
00:11:47,410 --> 00:11:53,960
Et si je continue à cliquer de changer en rose Vous ne pouvez pas dire.

123
00:11:54,080 --> 00:12:03,670
Donc, ce modèle ici de sélectionner un tas de choses en boucle par eux individuellement et en ajoutant un écouteur d'événement à chacun d'eux est vraiment très commun.

124
00:12:03,710 --> 00:12:11,170
Nous allons le voir tout le temps dans les prochains projets que nous ferons.

125
00:12:11,270 --> 00:12:20,830
La dernière chose que je vais mentionner ici est que vous n'avez pas toujours à utiliser une fonction anonyme comme nous l'avons fait ici où vous écrivez la fonction avec des parenthèses et vous ne lui donnez pas un nom.

126
00:12:20,990 --> 00:12:22,330
Vous n'avez pas à le faire.

127
00:12:22,370 --> 00:12:25,790
Vous pouvez déclarer une fonction nommée séparément comme je l'ai fait ici.

128
00:12:26,090 --> 00:12:33,890
Fonction de changement de texte et puis tout ce que nous avons à faire est de dire le bouton qui ajoutent l'écouteur d'événement ou cliquez et puis nous lui donner le changement de texte.

129
00:12:34,070 --> 00:12:39,890
Notez que nous n'avons pas de parenthèses par la suite car j'exécuterais immédiatement la fonction qui n'est pas ce que nous voulons.

130
00:12:40,180 --> 00:12:51,100
Donc, nous ne faisons que passer la valeur de cette fonction, nous passons le contenu essentiellement à cet auditeur rapide et dire ici est la fonction que je veux que vous exécuter lorsque l'utilisateur clique sur ce bouton.

131
00:12:51,190 --> 00:12:52,810
Mais ne l'exécutez pas encore.

132
00:12:52,820 --> 00:12:55,350
Donc, ces deux vont fonctionner exactement la même chose.

133
00:12:55,370 --> 00:12:57,030
C'est juste une question de préférence.

134
00:12:57,190 --> 00:13:00,830
Pour la plupart, il ya des différences que nous pouvons rencontrer plus tard.

135
00:13:00,880 --> 00:13:02,980
Je préférerais beaucoup utiliser cela.

136
00:13:03,230 --> 00:13:10,160
Le seul moment où je ne voudrais pas utiliser une fonction anonyme est si je devais utiliser ce code à nouveau ailleurs en dehors de l'écouteur d'horloge.

137
00:13:10,150 --> 00:13:22,600
Donc, si je voulais le faire moi-même individuellement ou je voulais l'exécuter au lieu d'un autre écouteur rapide plutôt que de dupliquer cette fonction, je lui donnerais un nom, puis dupliquer juste le nom où je l'utilise deux fois.

138
00:13:23,060 --> 00:13:30,650
OK pour la prochaine fois que vous allez avoir la chance de faire quelques exercices rapides en utilisant Wisner rapide et certaines des choses que nous avons appris dans les dernières vidéos.