1
00:00:00,360 --> 00:00:01,270
Nous saluons le retour.

2
00:00:01,290 --> 00:00:08,140
Dans cette vidéo, nous allons aborder la dernière grande fonctionnalité restante qui est la création de nouveaux à faire.

3
00:00:08,670 --> 00:00:16,400
Donc, ici, sur la version terminée juste pour faire fonctionner votre mémoire de la façon dont cela fonctionne, je peux taper pour vous et puis appuyez sur Entrée.

4
00:00:16,410 --> 00:00:17,610
Il n'y a donc aucun bouton pour cliquer.

5
00:00:17,610 --> 00:00:25,360
Je viens de frapper entrer et qui va ensuite soumettre et me faire une nouvelle à faire ici que je peux vérifier ou supprimer.

6
00:00:26,190 --> 00:00:27,510
Alors, commençons.

7
00:00:27,510 --> 00:00:34,350
La première chose que nous devons faire est d'ajouter un écouteur à la saisie de texte qui se déclenche lorsque nous frappons la touche Entrée.

8
00:00:34,350 --> 00:00:36,300
Pour ce faire, nous avons quelques options.

9
00:00:36,540 --> 00:00:46,530
Nous pouvons utiliser la pression de touche ou nous pouvons utiliser sur nous devons commencer par sélectionner l'entrée et plutôt que de le laisser comme entrée juste.

10
00:00:46,530 --> 00:00:50,670
Je vais être plus précis et dire que le type d'entrée est égal au texte.

11
00:00:50,790 --> 00:01:04,270
Donc, cela va affecter toutes les entrées ou de type texte égaux tout comme ça, puis ajouterons notre DOT et je vais utiliser la touche appuyez ici type d'entrée des appels texte pression sur les touches.

12
00:01:04,290 --> 00:01:15,520
Voici la fonction de rappel que nous allons commencer avec un journal alt constant et ce journal constant s'exécutera sur n'importe quelle touche, pas seulement la touche enter.

13
00:01:15,540 --> 00:01:24,340
Donc, juste pour garder la presse et enregistrer et revenir au navigateur et actualiser et nous allons ouvrir ce ici.

14
00:01:24,870 --> 00:01:28,910
Et comme j'appuie sur la touche, vous voyez que je reçois la touche presse.

15
00:01:29,130 --> 00:01:33,160
Alors je vais frapper une autre clé et ça continue.

16
00:01:33,300 --> 00:01:36,590
Donc, nous ne voulons vraiment rien faire avant que l'utilisateur n'applique la touche Entrée.

17
00:01:36,980 --> 00:01:44,090
Nous devons donc modifier un peu votre code dans la vidéo où nous avons introduit la méthode de saisie des touches.

18
00:01:44,130 --> 00:01:53,520
J'ai également parlé de la propriété sur l'objet de pression de touche et qui correspond à la touche qui a été appuyé ou le code de caractère de la clé.

19
00:01:53,550 --> 00:02:00,480
Donc, nous allons utiliser cela ici et nous allons vérifier si le code de caractère est 13, qui est le code de la touche entrée.

20
00:02:00,570 --> 00:02:24,870
Donc nous avons besoin de travailler avec l'objet événement encore une fois que l'on peut appeler tout ce que nous voulons et puis nous allons exécuter si l'événement qui triple équivaut au nombre 13 qui est la façon dont nous vérifions pour la touche entrée chaque caractère a son propre Code et la clé d'entrée est 13 alors nous allons juste faire un journal constant.

21
00:02:25,290 --> 00:02:31,890
Vous frappez entrer et sauverez revenir ici.

22
00:02:31,920 --> 00:02:34,470
Maintenant, je tape un tas de clés qui ne sont pas entrer.

23
00:02:34,620 --> 00:02:36,900
Et maintenant je vais frapper entrer.

24
00:02:37,000 --> 00:02:39,710
Vous pouvez voir que nous recevons des appels sur le journal.

25
00:02:39,780 --> 00:02:41,610
Vous frappez entrer.

26
00:02:41,610 --> 00:02:42,040
D'ACCORD.

27
00:02:42,240 --> 00:02:58,700
Donc, plutôt que d'annuler l'ouverture de session lorsque nous touchons saisir ce que nous devons faire est de prendre le texte hors d'ici extraire il faire un nouvel allié que nous ajoutons après celui-ci et puis nous voulons effacer cette entrée afin que le texte disparaît.

28
00:02:58,920 --> 00:03:03,780
Donc, nous allons commencer par extraire la valeur et que l'on est assez simple.

29
00:03:03,780 --> 00:03:06,270
Nous allons utiliser la méthode Val.

30
00:03:06,270 --> 00:03:13,750
Donc nous voulons la valeur sur l'entrée que nous pouvons simplement faire avec un simple ce vœu.

31
00:03:14,310 --> 00:03:15,620
Alors, faisons un connétable.

32
00:03:15,660 --> 00:03:23,180
Notez ceci Darvell rappelez-vous que cela fait référence à l'entrée que la touche de presse s'est produite lors de l'actualisation.

33
00:03:23,580 --> 00:03:25,090
Tapez tout ce qui n'est pas entrer.

34
00:03:25,110 --> 00:03:26,280
Rien ne se passe.

35
00:03:26,280 --> 00:03:34,990
Maintenant, si je frappe entrez une console qui enregistre la valeur que vous pouvez voir, je tape talo et je touche entrer.

36
00:03:35,100 --> 00:03:38,820
So let's save that à une variable.

37
00:03:40,020 --> 00:03:45,910
Appelons-le pour faire que le texte soit égal à la voyelle de départ.

38
00:03:45,960 --> 00:03:52,440
C'est donc saisir un nouveau texte à partir de l'entrée.

39
00:03:52,440 --> 00:04:02,660
Et puis ce que nous voulons faire ensuite est de créer un nouvel allié et de vous ajouter à bien de le faire.

40
00:04:02,670 --> 00:04:10,420
Je vais introduire une nouvelle méthode appelée append la façon dont append fonctionne, c'est que nous avons d'abord sélectionner un élément à ajouter.

41
00:04:10,440 --> 00:04:13,330
Nous allons donc ajouter que nos choses sont à faire.

42
00:04:13,500 --> 00:04:18,000
Nous ajouterons donc nos cotisations à l'U.N. à la page.

43
00:04:18,000 --> 00:04:22,880
Donc, ce que vous allez et il sera appendant alliés à ce puits.

44
00:04:23,190 --> 00:04:29,180
Donc, si vous le faites, vous allez ajouter et je peux lui donner une série de h t m l.

45
00:04:29,220 --> 00:04:35,430
Donc, si j'ajoute en allié ici et je viens de hardcoded quelque chose en début.

46
00:04:35,460 --> 00:04:51,900
Donc, c'est un nouvel allié que nous avons ajouté à cette UL juste comme ça, je sélectionne l'UL et ce fait sélectionne tout le reste.

47
00:04:51,910 --> 00:04:54,500
Nous n'en avons qu'un et puis nous manquons de stylos.

48
00:04:54,790 --> 00:05:02,030
Et il faudra cette corde et l'ajouter au puits comme chaque Chimo à l'intérieur si vous voulez.

49
00:05:02,410 --> 00:05:08,350
Donc je vais vous montrer que quand nous frappons entrez ici, peu importe ce que nous tapons parce que nous ne l'utilisons pas.

50
00:05:08,830 --> 00:05:10,660
Il ajoute un nouvel allié.

51
00:05:10,780 --> 00:05:22,770
Et chaque fois que je frappe entrer, il fera cela et si je l'inspecte, vous pouvez voir c'est un élément qui a été ajouté à l'intérieur du puits tout comme ceux-ci sont comme des éléments.

52
00:05:22,840 --> 00:05:28,420
Donc, ce que nous voulons faire ensuite est en fait utiliser la variable de texte do.

53
00:05:28,480 --> 00:05:33,150
Tout ce que nous devons faire est d'utiliser le signe plus pour ajouter cette variable dans.

54
00:05:33,520 --> 00:06:01,970
Nous aurons donc deux balises de ligne d'ouverture distinctes et des balises de fermeture et nous allons utiliser un signe plus et ajouter dans pour faire du texte et cela se terminera par une grosse chaîne qui a notre texte faire qui est quel que soit l'utilisateur tapé dans l'entrée plus L'allié d'ouverture et de fermeture et nous vous envoyons que vous rafraîchir le chien de marche et je frappe entrer et nous obtenons un nouvel allié ici.

55
00:06:02,470 --> 00:06:03,710
Il ya donc deux grands problèmes.

56
00:06:03,760 --> 00:06:08,090
Un que nous voulons effacer cette entrée et deux, nous n'avons pas la portée.

57
00:06:08,590 --> 00:06:10,870
Commençons par effacer l'entrée.

58
00:06:10,870 --> 00:06:22,460
Tout ce que nous devons faire est d'exécuter le dollar signer ce vœu et lui donner une chaîne vide où il agit comme un setter plutôt que juste un getter.

59
00:06:22,870 --> 00:06:30,120
Et cela devrait maintenant nous donner une entrée vide lorsque je tape un nouveau pour faire tout ce que je vais faire est ajouté et cela est effacé.

60
00:06:30,490 --> 00:06:32,990
Ensuite, nous allons obtenir le span pour montrer la sauvegarde.

61
00:06:33,460 --> 00:06:41,590
Donc, tout ce que nous devons faire là-bas est à l'intérieur de notre allié, nous allons ajouter dans une pile de portée et qui sera ajouté.

62
00:06:42,250 --> 00:06:51,320
Et nous avons juste besoin de s'assurer que nous avons le X juste là et l'espace juste pour que le X a un espace entre elle et denude pour faire du texte.

63
00:06:51,520 --> 00:06:57,500
Et si nous économisons, nous ajoutons maintenant une nouvelle chaîne avec un allié avec une portée à l'intérieur de celle-ci.

64
00:06:57,670 --> 00:07:05,030
Donc nourrir le chien et nous nous retrouvons avec la portée et le nouvel allié.

65
00:07:05,080 --> 00:07:13,660
Cependant nous avons un problème avec ce code qui est quand j'ajoute nouveau pour faire est comme le chat d'alimentation et j'essaye et cocher outre les nouveaux.

66
00:07:13,660 --> 00:07:18,540
Ils ne vérifient pas réellement et ils ne suppriment pas les anciens encore faire.

67
00:07:18,670 --> 00:07:21,180
Donc, l'événement en direct est toujours tir.

68
00:07:21,490 --> 00:07:30,040
Cet événement span se déclenche encore, mais les nouveaux tatouages ​​qui sont créés dynamiquement ceux qui ne sont pas là quand les charges de page ne fonctionnent pas.

69
00:07:30,040 --> 00:07:38,190
C'est ce dont je parlais lorsque je vous ai montré cette diapositive et il a dit dans la plupart des cas rapide et sur Quake nous allons tous les deux faire le travail.

70
00:07:38,380 --> 00:07:40,500
Cependant, il ya une différence clé.

71
00:07:40,570 --> 00:07:48,050
Quick n'ajouter que des écouteurs pour les éléments existants ajoutera des auditeurs pour tous les futurs éléments potentiels.

72
00:07:48,220 --> 00:07:55,310
Et c'est ce que nous devons faire ici est l'utilisation sur parce que nous voulons que ces auditeurs d'être à l'écoute de tous les alliés potentiels.

73
00:07:55,390 --> 00:08:01,060
Donc, ouvrir l'offre Je suis ici et je vais démontrer comment nous pouvons utiliser sur rapide plutôt que juste rapide.

74
00:08:01,390 --> 00:08:04,800
Ce n'est donc pas une question d'échange.

75
00:08:05,050 --> 00:08:14,130
Donc si je viens de changer cela pour être un allié sur un clic comme ça et je le laisse comme ça.

76
00:08:14,200 --> 00:08:18,180
Fondamentalement, c'est exactement la même chose sauf avec sur plutôt que rapide.

77
00:08:18,310 --> 00:08:25,900
Et si je retourne et rafraîchir les travaux sur les éléments d'origine et si j'ajoute de nouveaux, il ne fonctionne pas.

78
00:08:25,990 --> 00:08:29,450
Il ne s'agit donc pas seulement d'échanger rapidement et rapidement.

79
00:08:29,710 --> 00:08:33,250
Eh bien, nous devons réellement faire est de changer notre code légèrement.

80
00:08:33,250 --> 00:08:40,060
Donc je vais vous montrer le changement d'abord et puis je vais l'expliquer.

81
00:08:40,150 --> 00:08:44,940
Donc, ce que j'ai fait, c'est que je vous ai bien écrit sur virgule rapide.

82
00:08:45,180 --> 00:08:46,010
Pourquoi.

83
00:08:46,060 --> 00:08:54,890
La raison pour laquelle je devais faire ceci est que nous pouvons seulement ajouter un auditeur en utilisant la requête de j sur les éléments qui existent quand ce code est exécuté la première fois.

84
00:08:55,180 --> 00:08:59,190
Et quand ce code est exécuté la première fois, nous n'avons pas tous les alliés.

85
00:08:59,200 --> 00:09:04,710
Nous n'en avons que trois, si nous ajoutons un auditeur rapide aux alliés, cela ne fera qu'ajouter à ces trois.

86
00:09:04,720 --> 00:09:09,590
Donc ce que nous faisons à la place est d'ajouter un écouteur à l'ensemble de l'UL parent.

87
00:09:09,910 --> 00:09:13,590
Donc, chaque fois que nous cliquons sur que vous allez cet auditeur feu.

88
00:09:13,810 --> 00:09:16,690
Sauf que nous ajoutons ce deuxième argument.

89
00:09:17,140 --> 00:09:24,470
Et ce que ce code fait est dit quand un allié est cliqué à l'intérieur d'un vous exécuterez ce code.

90
00:09:24,580 --> 00:09:28,670
Nous avons donc ajouté un écouteur à un élément qui existe lorsque la page est chargée.

91
00:09:28,900 --> 00:09:33,930
Mais nous écoutons uniquement les mensonges qui sont cliqués à l'intérieur.

92
00:09:34,380 --> 00:09:36,300
Permettez-moi de le démontrer maintenant.

93
00:09:37,000 --> 00:09:40,400
Je vais rafraîchir et ajouter quelques nouveaux ici.

94
00:09:40,930 --> 00:09:44,720
Les anciens fonctionnent toujours et les nouveaux peuvent être cochés aussi bien.

95
00:09:45,070 --> 00:09:46,550
Mais la suppression ne fonctionne pas.

96
00:09:46,840 --> 00:09:50,250
Nous devons donc revenir en arrière et faire le même changement exact.

97
00:09:50,410 --> 00:10:03,520
Nous allons donc écouter un événement qui existe quand la page est chargée avec on, puis cliquez sur, mais nous voulons seulement que ce code s'exécute lorsqu'un span est cliqué à l'intérieur d'un puits.

98
00:10:04,120 --> 00:10:06,690
Et si nous laissons cela à cela, nous devrions être prêts à partir.

99
00:10:06,700 --> 00:10:08,810
Maintenant, testons-le.

100
00:10:09,040 --> 00:10:14,890
Nous pouvons supprimer les anciens et les nouveaux et nous pouvons traverser les deux ainsi.

101
00:10:15,730 --> 00:10:18,620
Très bien, nous allons résumer quelques-uns des nouveaux documents ici.

102
00:10:18,640 --> 00:10:27,110
La première chose est la méthode append qui peut prendre une chaîne de HMO et il va ensuite ajouter ces éléments à tout ce que nous avons sélectionné.

103
00:10:27,340 --> 00:10:34,940
Et la deuxième chose était d'utiliser sur plutôt que rapide et l'ajout de cette UL sur rapide.

104
00:10:34,960 --> 00:10:46,300
Et le deuxième argument qui spécifie des alliés qui peuvent ou non avoir été sur la page quand il a chargé à l'intérieur du puits qui était définitivement sur la page lorsque la page chargée.

105
00:10:46,450 --> 00:10:53,530
Nous ajoutons donc aux écouteurs d'événements les éléments qui existent lorsque la page est chargée afin que nous puissions rendre compte des éléments qui ne sont pas encore présents.

106
00:10:53,980 --> 00:10:55,800
C'est pour nos fonctionnalités de base.

107
00:10:55,810 --> 00:10:57,810
Nous avons une liste complète des tâches.

108
00:10:57,880 --> 00:11:00,710
Nous allons nous concentrer sur la prochaine vidéo est le style.

109
00:11:00,850 --> 00:11:02,350
Et nous avons certainement des moyens d'y aller.
