1
00:00:00,360 --> 00:00:01,270
Welkom terug.

2
00:00:01,290 --> 00:00:08,140
In deze video zullen we de laatste grote overgebleven stuk van de functionaliteit die de creatie van nieuwe te doen aan te pakken.

3
00:00:08,670 --> 00:00:16,400
Dus hier op de voltooide versie alleen maar om je geheugen te joggen op de manier waarop het werkt is dat ik kan typen om u en dan druk op enter.

4
00:00:16,410 --> 00:00:17,610
Dus er is geen knop te klikken.

5
00:00:17,610 --> 00:00:25,360
Ik raakte gewoon in te voeren en dat zal dan dienen en maak me een nieuwe te doen hier beneden die ik uit kan controleren of te verwijderen.

6
00:00:26,190 --> 00:00:27,510
Dus laten we beginnen.

7
00:00:27,510 --> 00:00:34,350
Het eerste wat we moeten doen is het toevoegen van een luisteraar aan de tekstinvoer dat afgaat wanneer we de enter-toets in te drukken.

8
00:00:34,350 --> 00:00:36,300
Om dat te doen moeten we een paar opties.

9
00:00:36,540 --> 00:00:46,530
We kunnen druk op een toets te gebruiken of we kunnen gebruiken op die we nodig hebben om te beginnen door de input te selecteren en dan laat het gewoon als ingang.

10
00:00:46,530 --> 00:00:50,670
Ik ga meer specifiek te zijn en zeggen: input type is gelijk aan de tekst.

11
00:00:50,790 --> 00:01:04,270
Dus dit zal invloed hebben op alle ingangen of het type is gelijk aan de tekst, net als dat en dan zal onze DOT toe te voegen en ik zal druk op de toets te gebruiken hier input type noemt tekst druk op de toets.

12
00:01:04,290 --> 00:01:15,520
Hier is de callback functie die we zullen gewoon beginnen met een constante alt log en deze constante log zal draaien op een willekeurige toets drukt niet alleen de Enter-toets.

13
00:01:15,540 --> 00:01:24,340
Dus gewoon om druk te houden en op te slaan en terug te gaan naar de browser en verfrissen en we zullen dit hier open te stellen.

14
00:01:24,870 --> 00:01:28,910
En zoals ik op de toets zie je dat ik druk op de toets.

15
00:01:29,130 --> 00:01:33,160
Dus ik zal een andere toets in te drukken en dat houdt omhoog gaan.

16
00:01:33,300 --> 00:01:36,590
Dus we willen niet echt om iets te doen totdat de gebruiker de enter-toets raakt.

17
00:01:36,980 --> 00:01:44,090
Dus moeten we uw code te veranderen een beetje in de video, waar introduceerden we de druk op de toets methode.

18
00:01:44,130 --> 00:01:53,520
Ik heb ook gesproken over de die woning op de toetsaanslag object en dat overeenkomt met de toets die werd ingedrukt of het karakter code van de sleutel.

19
00:01:53,550 --> 00:02:00,480
Dus gaan we dat hier te gebruiken en we gaan om te controleren of het karakter code is 13, dat is de code voor de Enter-toets.

20
00:02:00,570 --> 00:02:24,870
Dus moeten we aan de slag met het evenement object eens te meer dat kan wat we willen worden opgeroepen en dan gaan we lopen als gebeurtenis die triple gelijk aan het aantal 13 dat is hoe we controleren op de enter-toets elk personage heeft zijn eigen code en de Enter-toets is 13 dan zullen we gewoon een constante log.

21
00:02:25,290 --> 00:02:31,890
U druk op enter en bespaart ga hier terug.

22
00:02:31,920 --> 00:02:34,470
Nu ben ik het typen van een bos sleutels die niet worden betreden.

23
00:02:34,620 --> 00:02:36,900
En nu ga ik druk op enter.

24
00:02:37,000 --> 00:02:39,710
U kunt zien we gesprekken over log.

25
00:02:39,780 --> 00:02:41,610
U druk op enter.

26
00:02:41,610 --> 00:02:42,040
OK.

27
00:02:42,240 --> 00:02:58,700
Dus in plaats van alleen maar te annuleren log in als we druk op enter wat we moeten doen is de tekst hier weg te nemen Pak het maken van een nieuwe bondgenoot die we vervolgens toevoegen nadat deze ene en dan willen we op deze ingang te wissen zodat de tekst verdwijnt.

28
00:02:58,920 --> 00:03:03,780
Dus we beginnen met de waarde uit te extraheren en dat men vrij eenvoudig.

29
00:03:03,780 --> 00:03:06,270
We zullen de Val methode te gebruiken.

30
00:03:06,270 --> 00:03:13,750
Daarom willen we de waarde van de input die we kunnen doen met een simpele deze gelofte.

31
00:03:14,310 --> 00:03:15,620
Dus laten we het doen van een agent.

32
00:03:15,660 --> 00:03:23,180
meld dit Darvell herinneren dat dit verwijst naar de input die de druk op de toets zich in refresh.

33
00:03:23,580 --> 00:03:25,090
Typ iets dat niet in te voeren.

34
00:03:25,110 --> 00:03:26,280
Niks gebeurt.

35
00:03:26,280 --> 00:03:34,990
Nu als ik druk op enter een console die de waarde logs zoals je kunt zien ik typ talo en ik druk op enter.

36
00:03:35,100 --> 00:03:38,820
Dus laten we redden dat voor een variabele.

37
00:03:40,020 --> 00:03:45,910
Laten we het doen tekst is gelijk aan de start klinker.

38
00:03:45,960 --> 00:03:52,440
Dus dat is de nieuwe tekst van input grijpen.

39
00:03:52,440 --> 00:04:02,660
En dan wat we willen nu doen is het creëren van een nieuwe bondgenoot en toe te voegen aan je goed om dat te doen.

40
00:04:02,670 --> 00:04:10,420
Ik ga een nieuwe methode genaamd voegen van de manier waarop de werken te voegen, is dat we voor het eerst een element te voegen om te selecteren te introduceren.

41
00:04:10,440 --> 00:04:13,330
Dus we gaan het toevoegen van onze dingen te doen.

42
00:04:13,500 --> 00:04:18,000
Dus zullen we het toevoegen van onze contributie aan de U.N. op de pagina.

43
00:04:18,000 --> 00:04:22,880
Dus dit zult u en het zal toevoegen van bondgenoten dat ook.

44
00:04:23,190 --> 00:04:29,180
Dus als ik je zal toevoegen en ik kan het geven van een reeks van h t m l.

45
00:04:29,220 --> 00:04:35,430
Dus als ik toe te voegen in bondgenoot hier en ik hardcoded iets in start.

46
00:04:35,460 --> 00:04:51,900
Dus dit is een nieuwe bondgenoot die we als bijlage bij dit UL net als dat ik selecteert u de UL en selecteert dit eigenlijk al het andere.

47
00:04:51,910 --> 00:04:54,500
We hebben slechts één en dan lopen we uit pennen.

48
00:04:54,790 --> 00:05:02,030
En het zal deze string te nemen en toe te voegen aan de alsmede iedere Chimo binnenkant als je wil.

49
00:05:02,410 --> 00:05:08,350
Dus ik zal je laten zien dat als we druk op enter hier het maakt niet uit wat we typen, omdat we het niet gebruikt.

50
00:05:08,830 --> 00:05:10,660
Het voegt een nieuwe bondgenoot.

51
00:05:10,780 --> 00:05:22,770
En elke keer als ik druk op enter zal dat doen en als ik inspecteer je kunt zien dat het een element dat in de put net als deze zijn net als elementen toegevoegd.

52
00:05:22,840 --> 00:05:28,420
Dus wat we willen nu doen is echter daadwerkelijk gebruik maken van het doen tekstvariabele.

53
00:05:28,480 --> 00:05:33,150
Alles wat we moeten doen is gebruik het plusteken om die variabele in te voegen.

54
00:05:33,520 --> 00:06:01,970
Dus zullen we twee aparte opening lijn labels en sluiten tags en we zullen een plusteken te gebruiken en toe te voegen aan om tekst te doen en dit zal eindigen met een grote string die onze do tekst heeft, die is wat de gebruiker heeft ingevoerd in de input plus het openen en sluiten bondgenoot en we verzenden die aan u zal lopen hond verfrissen en ik druk op enter en krijgen we een nieuwe bondgenoot hier.

55
00:06:02,470 --> 00:06:03,710
Dus er zijn twee grote problemen.

56
00:06:03,760 --> 00:06:08,090
Eén we willen om duidelijk uit deze ingang en twee hebben we niet de overspanning.

57
00:06:08,590 --> 00:06:10,870
Laten we beginnen met het opruimen van de input.

58
00:06:10,870 --> 00:06:22,460
Alles wat we moeten doen is lopen dollarteken deze gelofte en geef het een lege string, waar het fungeert als een setter in plaats van alleen een getter.

59
00:06:22,870 --> 00:06:30,120
En dat moet nu ons een lege ingang wanneer ik typ een nieuwe te doen elke gaan op te doen wordt toegevoegd en dit wordt gewist.

60
00:06:30,490 --> 00:06:32,990
Volgende laten we de overspanning om een ​​back-up te laten zien.

61
00:06:33,460 --> 00:06:41,590
Dus alles wat we moeten doen is er de binnenkant van onze bondgenoot we zullen voegen in een overspanning stack en dat zal worden toegevoegd.

62
00:06:42,250 --> 00:06:51,320
En we hoeven alleen maar om ervoor te zorgen dat we de X daar en de ruimte gewoon zo dat de X heeft een ruimte tussen haar en beroven om tekst te doen.

63
00:06:51,520 --> 00:06:57,500
En als we besparen we nu het toevoegen van een nieuwe string met een bondgenoot met een overspanning binnenkant van het.

64
00:06:57,670 --> 00:07:05,030
Zo voeden de hond en we eindigen met de overspanning en de nieuwe bondgenoot.

65
00:07:05,080 --> 00:07:13,660
Toch hebben we een probleem met deze code die is wanneer ik het toevoegen van nieuwe to do's als voeding kat en ik probeer en afvinken van de nieuwe.

66
00:07:13,660 --> 00:07:18,540
Ze eigenlijk niet afvinken, noch zij schrappen de oude nog steeds doen.

67
00:07:18,670 --> 00:07:21,180
Dus de live-evenement is nog steeds afvuren.

68
00:07:21,490 --> 00:07:30,040
Deze overspanning evenement nog steeds branden, maar de nieuwe tatoeages die zijn dynamisch gemaakte degenen die er niet zijn wanneer de pagina wordt geladen werken niet.

69
00:07:30,040 --> 00:07:38,190
Dit is wat ik het over had toen ik je deze dia liet zien en het zei in de meeste gevallen snel en op Quake we zowel de klus te klaren.

70
00:07:38,380 --> 00:07:40,500
Er is echter één belangrijk verschil.

71
00:07:40,570 --> 00:07:48,050
Snel zal alleen luisteraars toe te voegen voor de bestaande elementen op zullen luisteraars toe te voegen voor alle potentiële toekomstige elementen.

72
00:07:48,220 --> 00:07:55,310
En dat is wat we nodig hebben om hier te doen is te gebruiken op, want we willen dat die luisteraars te luisteren op alle potentiële bondgenoten.

73
00:07:55,390 --> 00:08:01,060
Dus open aanbod dat ik hier ben en ik zal laten zien hoe we kunnen gebruiken op een snelle plaats van alleen snel.

74
00:08:01,390 --> 00:08:04,800
Dus het is niet een kwestie van gewoon omwisselen van aan te staan.

75
00:08:05,050 --> 00:08:14,130
Dus als ik alleen deze te wijzigen in een bondgenoot op klik, net als dat te zijn en ik laat het zo.

76
00:08:14,200 --> 00:08:18,180
Eigenlijk is het precies hetzelfde, behalve met aan in plaats van snel.

77
00:08:18,310 --> 00:08:25,900
En als ik ga terug en de werken op de oorspronkelijke elementen te vernieuwen en als ik nieuwe toe te voegen werkt het niet.

78
00:08:25,990 --> 00:08:29,450
Dus het is niet een kwestie van gewoon omwisselen snel en snel.

79
00:08:29,710 --> 00:08:33,250
Nou we eigenlijk moeten doen is iets te veranderen onze code.

80
00:08:33,250 --> 00:08:40,060
Dus ik ga u eerst tonen de verandering en dan zal ik uitleggen.

81
00:08:40,150 --> 00:08:44,940
Dus wat ik deed is schreef ik u goed op een snelle komma.

82
00:08:45,180 --> 00:08:46,010
Waarom.

83
00:08:46,060 --> 00:08:54,890
De reden dat ik dit moest doen is dat we alleen een luisteraar kan toevoegen met j query op elementen die bestaan ​​wanneer deze code de eerste keer wordt uitgevoerd.

84
00:08:55,180 --> 00:08:59,190
En wanneer deze code de eerste keer wordt uitgevoerd we niet alle bondgenoten.

85
00:08:59,200 --> 00:09:04,710
We hebben slechts drie, dus als we snel een luisteraar toe te voegen aan bondgenoten het zal alleen maar toe te voegen aan deze drie.

86
00:09:04,720 --> 00:09:09,590
Dus wat we doen in plaats daarvan is het toevoegen van een luisteraar om de hele UL ouder.

87
00:09:09,910 --> 00:09:13,590
Dus wanneer we op dat u deze luisteraar zal bij brand.

88
00:09:13,810 --> 00:09:16,690
Behalve voegen we deze tweede argument.

89
00:09:17,140 --> 00:09:24,470
En wat deze code doet is het zegt wanneer een bondgenoot wordt geklikt binnenkant van een vindt u deze code uitvoert.

90
00:09:24,580 --> 00:09:28,670
Dus een listener toegevoegd we een element dat bestaat wanneer de pagina wordt geladen.

91
00:09:28,900 --> 00:09:33,930
Maar we zijn eigenlijk alleen te luisteren naar de leugens die binnenkant van die worden geklikt.

92
00:09:34,380 --> 00:09:36,300
Dus laat me nu bewijzen dit.

93
00:09:37,000 --> 00:09:40,400
Ik zal vernieuwen en laten we voeg wat nieuwe in hier.

94
00:09:40,930 --> 00:09:44,720
De oude nog steeds werken en de nieuwe kan worden afgevinkt als goed.

95
00:09:45,070 --> 00:09:46,550
Maar de delete werkt niet.

96
00:09:46,840 --> 00:09:50,250
Dus moeten we terug te gaan en exact dezelfde verandering.

97
00:09:50,410 --> 00:10:03,520
Dus we gaan op een gebeurtenis die optreedt wanneer de pagina wordt geladen met aan en klik vervolgens op, maar we willen alleen deze code kan worden uitgevoerd wanneer een overspanning binnenkant van een put wordt geklikt om te luisteren.

98
00:10:04,120 --> 00:10:06,690
En als we het daarbij laten we goed om te gaan zou moeten zijn.

99
00:10:06,700 --> 00:10:08,810
Laten we nu eens testen het uit.

100
00:10:09,040 --> 00:10:14,890
We kunnen de oude en de nieuwe te verwijderen en we kunnen allebei wegstrepen ook.

101
00:10:15,730 --> 00:10:18,620
Oké dus laten we samen te vatten enkele van de nieuwe materiaal hier.

102
00:10:18,640 --> 00:10:27,110
Het eerste wat is de append methode die een string van HMO kan nemen en het zal dan voegt die elementen aan wat we gekozen.

103
00:10:27,340 --> 00:10:34,940
En het tweede ding werd met behulp van op de plaats van snel en het toevoegen in dit UL op een snelle.

104
00:10:34,960 --> 00:10:46,300
En het tweede argument dat bondgenoten die al dan niet op de pagina toen het binnenkant van het goed, dat was zeker op de pagina wanneer de pagina geladen geladen specificeert.

105
00:10:46,450 --> 00:10:53,530
Dus we voegen event luisteraars de elementen die bestaan ​​als pagina wordt geladen, zodat we kunnen goed zijn voor elementen die er nog niet.

106
00:10:53,980 --> 00:10:55,800
Dat is het voor ons de basisfunctionaliteit.

107
00:10:55,810 --> 00:10:57,810
We hebben een complete takenlijst.

108
00:10:57,880 --> 00:11:00,710
Wat zullen we focussen op in de volgende video is de styling.

109
00:11:00,850 --> 00:11:02,350
En we hebben zeker een manieren om er te gaan.