1
00:00:00,360 --> 00:00:01,270
Ben tornato.

2
00:00:01,290 --> 00:00:07,140
In questo video affronteremo l'ultima grande funzionalità rimanente che è la creazione di nuove cose

3
00:00:07,140 --> 00:00:08,140
da fare.

4
00:00:08,670 --> 00:00:14,610
Quindi qui sopra sulla versione completata solo per far scorrere la memoria nel modo in cui funziona è

5
00:00:14,610 --> 00:00:16,400
possibile scriverlo e quindi premere invio.

6
00:00:16,410 --> 00:00:17,610
Quindi non c'è alcun pulsante per fare clic.

7
00:00:17,610 --> 00:00:24,240
Ho appena premuto invio e questo verrà quindi inviato e mi farà fare un nuovo da fare qui che posso

8
00:00:24,240 --> 00:00:25,360
verificare o eliminare.

9
00:00:26,190 --> 00:00:27,510
Quindi iniziamo.

10
00:00:27,510 --> 00:00:33,330
La prima cosa che dobbiamo fare è aggiungere un ascoltatore all'input di testo che si attiva quando premiamo il tasto Invio.

11
00:00:34,350 --> 00:00:36,300
Per farlo abbiamo alcune opzioni.

12
00:00:36,540 --> 00:00:44,880
Possiamo usare la pressione di un tasto o possiamo usarlo, dobbiamo iniziare selezionando l'input e invece di

13
00:00:44,880 --> 00:00:46,530
lasciarlo come input.

14
00:00:46,530 --> 00:00:50,670
Sarò più specifico e dirò che il tipo di input è uguale al testo.

15
00:00:50,790 --> 00:00:58,940
Quindi questo influenzerà tutti gli input o digiterà il testo uguale a quello e poi aggiungerà il nostro DOT e userò

16
00:00:58,940 --> 00:01:04,270
la pressione di un tasto qui tipo di input chiamate text key press.

17
00:01:04,290 --> 00:01:11,760
Ecco la funzione di callback che inizieremo con un registro alt costante e questo registro costante verrà eseguito su

18
00:01:12,450 --> 00:01:15,520
qualsiasi tasto premuto non solo il tasto Invio.

19
00:01:15,540 --> 00:01:24,340
Quindi, per tenere la stampa e salvare e tornare al browser e aggiornare e apriremo questo qui.

20
00:01:24,870 --> 00:01:28,910
E mentre premo il tasto, vedo che ricevo la pressione di un tasto.

21
00:01:29,130 --> 00:01:33,160
Quindi colpirò un'altra chiave che continua a salire.

22
00:01:33,300 --> 00:01:36,590
Quindi non vogliamo davvero fare nulla finché l'utente non preme il tasto Invio.

23
00:01:36,980 --> 00:01:44,090
Quindi abbiamo bisogno di cambiare un po 'il tuo codice nel video in cui abbiamo introdotto il metodo key press.

24
00:01:44,130 --> 00:01:50,940
dell'oggetto key press e corrisponde al tasto premuto o al codice carattere della chiave.

25
00:01:50,940 --> 00:01:53,520
Ho anche parlato della proprietà

26
00:01:53,550 --> 00:01:58,830
Quindi lo useremo qui e controlleremo se il codice del carattere è 13, che è il

27
00:01:58,830 --> 00:02:00,480
codice per il tasto invio.

28
00:02:00,570 --> 00:02:07,260
Quindi dobbiamo lavorare ancora una volta con l'oggetto evento che può essere chiamato tutto ciò che vogliamo

29
00:02:07,260 --> 00:02:17,280
e poi correremo se l'evento che triplica è uguale al numero 13 che è il modo in cui controlliamo il tasto invio ogni singolo personaggio

30
00:02:17,730 --> 00:02:24,870
ha il suo codice e la chiave di invio è 13 quindi faremo solo un registro costante.

31
00:02:25,290 --> 00:02:31,890
Premi Invio e salverà qui.

32
00:02:31,920 --> 00:02:34,470
Ora sto digitando un mazzo di chiavi che non sono inserite.

33
00:02:34,620 --> 00:02:36,900
E ora ho intenzione di colpire invio.

34
00:02:37,000 --> 00:02:39,710
Puoi vedere che riceviamo chiamate sul registro.

35
00:02:39,780 --> 00:02:41,610
Premi Invio.

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

37
00:02:42,240 --> 00:02:48,100
Quindi, piuttosto che cancellare semplicemente il log in quando entriamo in hit, quello che dobbiamo fare

38
00:02:48,420 --> 00:02:57,210
è estrarre il testo da qui, estrarlo, creare un nuovo alleato che aggiungiamo dopo questo e poi vogliamo cancellare questo input in modo

39
00:02:57,210 --> 00:02:58,700
che il testo scompaia.

40
00:02:58,920 --> 00:03:03,780
Quindi inizieremo estraendo il valore e quello è piuttosto semplice.

41
00:03:03,780 --> 00:03:06,270
Useremo il metodo Val.

42
00:03:06,270 --> 00:03:13,750
Quindi vogliamo il valore sull'input che possiamo semplicemente fare con un voto semplice.

43
00:03:14,310 --> 00:03:15,620
Quindi facciamo un poliziotto.

44
00:03:15,660 --> 00:03:23,180
registra questo Darvell ricorda che questo si riferisce all'input che si è verificato durante l'aggiornamento.

45
00:03:23,580 --> 00:03:25,090
Digita tutto ciò che non è inserito.

46
00:03:25,110 --> 00:03:26,280
Non accade nulla.

47
00:03:26,280 --> 00:03:34,990
Ora se premo invio una console che registra il valore come puoi vedere digito talo e premo invio.

48
00:03:35,100 --> 00:03:38,820
Quindi salviamolo su una variabile.

49
00:03:40,020 --> 00:03:45,910
Chiamiamolo per fare il testo è uguale alla vocale iniziale.

50
00:03:45,960 --> 00:03:52,440
Quindi questo è l'acquisizione di nuovo testo dall'input.

51
00:03:52,440 --> 00:04:02,660
E poi quello che vogliamo fare è creare un nuovo alleato e aggiungerti bene per farlo.

52
00:04:02,670 --> 00:04:08,160
Ho intenzione di introdurre un nuovo metodo chiamato append il modo in cui append funziona è che per

53
00:04:08,160 --> 00:04:10,420
prima cosa selezioniamo un elemento da aggiungere a.

54
00:04:10,440 --> 00:04:13,330
Quindi aggiungeremo che le nostre cose devono fare.

55
00:04:13,500 --> 00:04:18,000
Quindi aggiungeremo le nostre quote alla U. N. sulla pagina.

56
00:04:18,000 --> 00:04:22,880
Quindi questo lo farai e gli alleati andranno ad aggiungersi a quel pozzo.

57
00:04:23,190 --> 00:04:29,180
Quindi se lo farai aggiungerai e potrò dargli una stringa di h t m l.

58
00:04:29,220 --> 00:04:35,430
Quindi, se aggiungo alleato qui e ho appena inserito qualcosa di hardcoded.

59
00:04:35,460 --> 00:04:44,040
Quindi questo è un nuovo alleato che abbiamo aggiunto a questo UL proprio come quello che

60
00:04:46,810 --> 00:04:51,900
seleziono l'UL e questo in realtà seleziona tutto il resto.

61
00:04:51,910 --> 00:04:54,500
Ne abbiamo solo uno e poi finiamo le penne.

62
00:04:54,790 --> 00:05:02,030
E prenderà questa corda e la aggiungerà al pozzo come ogni Chimo dentro se vuoi.

63
00:05:02,410 --> 00:05:07,090
Quindi ti mostrerò che quando premiamo invio qui non importa ciò che scriviamo perché

64
00:05:07,090 --> 00:05:08,350
non lo stiamo usando.

65
00:05:08,830 --> 00:05:10,660
Aggiunge in un nuovo alleato.

66
00:05:10,780 --> 00:05:18,370
E ogni volta che premo invio, lo farà e, se guardo, puoi vedere che è un elemento che

67
00:05:18,370 --> 00:05:22,770
è stato aggiunto al pozzo proprio come questi sono come elementi.

68
00:05:22,840 --> 00:05:28,420
Quindi, ciò che vogliamo fare dopo è in realtà utilizzare la variabile di testo do.

69
00:05:28,480 --> 00:05:33,150
Tutto quello che dobbiamo fare è usare il segno più per aggiungere la variabile in.

70
00:05:33,520 --> 00:05:40,630
e useremo un segno più e aggiungiamo per fare testo e questo finirà con una grande stringa

71
00:05:40,780 --> 00:05:47,470
che ha il nostro testo, che è qualsiasi cosa l'utente abbia digitato nell'input più l'alleato di

72
00:05:47,470 --> 00:05:57,270
apertura e di chiusura e noi lo invieremo per aggiornare cane a piedi e io premo invio e otteniamo un nuovo alleato qui.

73
00:05:57,280 --> 00:06:01,970
Quindi avremo due tag di apertura e tag di chiusura separati

74
00:06:02,470 --> 00:06:03,710
Quindi ci sono due grandi problemi.

75
00:06:03,760 --> 00:06:08,090
Uno vogliamo cancellare questo input e due non abbiamo lo span.

76
00:06:08,590 --> 00:06:10,870
Iniziamo cancellando l'input.

77
00:06:10,870 --> 00:06:20,710
Tutto ciò che dobbiamo fare è eseguire il simbolo del dollaro con questo voto e dargli una stringa vuota in cui agisce come un setter piuttosto

78
00:06:20,800 --> 00:06:22,460
che solo un getter.

79
00:06:22,870 --> 00:06:29,110
E questo ora dovrebbe darci un input vuoto quando scrivo un nuovo per fare che ogni cosa da fare sia aggiunta e

80
00:06:29,110 --> 00:06:30,120
questo viene cancellato.

81
00:06:30,490 --> 00:06:32,990
Quindi vediamo lo span per mostrare il backup.

82
00:06:33,460 --> 00:06:41,110
Quindi tutto ciò che dobbiamo fare è all'interno del nostro alleato che aggiungeremo in una pila di span e che verrà aggiunto.

83
00:06:42,250 --> 00:06:49,690
E dobbiamo solo assicurarci di avere la X proprio lì e lo spazio giusto in modo che la X abbia uno spazio tra di essa

84
00:06:49,690 --> 00:06:51,320
e rifiuti di fare testo.

85
00:06:51,520 --> 00:06:57,500
E se salviamo, stiamo aggiungendo una nuova stringa con un alleato con una spanna al suo interno.

86
00:06:57,670 --> 00:07:05,030
Quindi dai da mangiare al cane e finiamo con lo span e il nuovo alleato.

87
00:07:05,080 --> 00:07:11,710
Tuttavia abbiamo un problema con questo codice che è quando aggiungo di nuovo per fare come il feed cat

88
00:07:11,710 --> 00:07:13,660
e cerco di spuntare quelli nuovi.

89
00:07:13,660 --> 00:07:18,540
In realtà non effettuano il check-in né cancellano quelli vecchi ancora.

90
00:07:18,670 --> 00:07:21,180
Quindi l'evento dal vivo sta ancora sparando.

91
00:07:21,490 --> 00:07:26,920
Questo evento span continua a sparare ma i nuovi tatuaggi che creano dinamicamente quelli che non

92
00:07:26,920 --> 00:07:30,040
sono presenti quando la pagina si carica non funzionano.

93
00:07:30,040 --> 00:07:36,160
Questo è quello di cui stavo parlando quando ti ho mostrato questa diapositiva e nella maggior parte dei casi ho detto in fretta e

94
00:07:36,210 --> 00:07:38,190
su Quake che entrambi avremo fatto il lavoro.

95
00:07:38,380 --> 00:07:40,500
Tuttavia c'è una differenza fondamentale.

96
00:07:40,570 --> 00:07:47,800
Quick aggiungerà solo listener per elementi esistenti aggiungendo listener per tutti i potenziali elementi futuri.

97
00:07:48,220 --> 00:07:53,920
E questo è quello che dobbiamo fare qui è usare perché vogliamo che gli ascoltatori ascoltino

98
00:07:53,920 --> 00:07:55,310
tutti i potenziali alleati.

99
00:07:55,390 --> 00:08:01,060
Quindi apri la fornitura Sono qui e dimostrerò come possiamo usarlo in modo rapido e non solo veloce.

100
00:08:01,390 --> 00:08:04,800
Quindi non si tratta solo di scambiare per essere su.

101
00:08:05,050 --> 00:08:14,130
Quindi se lo cambio è un alleato in click proprio così e lo lascio così.

102
00:08:14,200 --> 00:08:18,180
Fondamentalmente è la stessa identica cosa tranne che con on piuttosto che veloce.

103
00:08:18,310 --> 00:08:25,780
E se torno indietro e aggiorni i lavori sugli elementi originali e se ne aggiungo di nuovi non funziona.

104
00:08:25,990 --> 00:08:29,450
Quindi non si tratta solo di scambiare velocemente e velocemente.

105
00:08:29,710 --> 00:08:33,250
Beh, in realtà dobbiamo fare è cambiare leggermente il nostro codice.

106
00:08:33,250 --> 00:08:40,060
Quindi ti mostrerò prima il cambiamento e poi lo spiegherò.

107
00:08:40,150 --> 00:08:44,940
Quindi quello che ho fatto è che ti ho scritto bene con una virgola veloce.

108
00:08:45,180 --> 00:08:46,010
Perché.

109
00:08:46,060 --> 00:08:52,630
Il motivo per cui ho dovuto farlo è che possiamo aggiungere un listener usando jquery sugli elementi che esistono quando questo

110
00:08:52,810 --> 00:08:54,890
codice viene eseguito la prima volta.

111
00:08:55,180 --> 00:08:59,190
E quando questo codice viene eseguito la prima volta non abbiamo tutti gli alleati.

112
00:08:59,200 --> 00:09:04,710
Ne abbiamo solo tre quindi se aggiungiamo un ascoltatore veloce agli alleati si aggiungeranno solo a questi tre.

113
00:09:04,720 --> 00:09:09,590
Quindi ciò che facciamo è aggiungere un listener all'intero genitore UL.

114
00:09:09,910 --> 00:09:13,590
Quindi ogni volta che clicchiamo a questo ascoltatore questo sparerà.

115
00:09:13,810 --> 00:09:16,690
Tranne che aggiungiamo questo secondo argomento.

116
00:09:17,140 --> 00:09:24,470
E ciò che questo codice fa è che quando si fa clic su un alleato all'interno di un codice si eseguirà questo codice.

117
00:09:24,580 --> 00:09:28,670
Quindi abbiamo aggiunto un listener a un elemento esistente al caricamento della pagina.

118
00:09:28,900 --> 00:09:33,930
Ma stiamo solo ascoltando le bugie su cui si fa clic dentro.

119
00:09:34,380 --> 00:09:36,300
Quindi fammi dimostrare questo ora.

120
00:09:37,000 --> 00:09:40,400
Mi aggiornerò e aggiungiamo alcuni nuovi qui.

121
00:09:40,930 --> 00:09:44,720
I vecchi funzionano ancora e anche quelli nuovi possono essere controllati.

122
00:09:45,070 --> 00:09:46,550
Ma l'eliminazione non funziona.

123
00:09:46,840 --> 00:09:50,250
Quindi dobbiamo tornare indietro e fare lo stesso esatto cambiamento.

124
00:09:50,410 --> 00:09:58,450
Quindi ascolteremo un evento che esiste quando la pagina viene caricata con on e quindi fai clic, ma vogliamo solo che questo

125
00:09:58,450 --> 00:10:03,520
codice venga eseguito quando si fa clic su una span all'interno di un pozzo.

126
00:10:04,120 --> 00:10:06,690
E se lo lasciamo, dovremmo essere pronti.

127
00:10:06,700 --> 00:10:08,810
Ora proviamo.

128
00:10:09,040 --> 00:10:14,890
Possiamo cancellare quelli vecchi e nuovi e possiamo anche incrociare entrambi.

129
00:10:15,730 --> 00:10:18,620
Va bene riassumiamo un po 'del nuovo materiale qui.

130
00:10:18,640 --> 00:10:24,850
La prima cosa è il metodo append che può prendere una stringa di HMO e quindi aggiungerà quegli

131
00:10:25,090 --> 00:10:27,110
elementi a qualsiasi cosa abbiamo selezionato.

132
00:10:27,340 --> 00:10:34,940
E la seconda cosa stava usando piuttosto che veloce e aggiungendo in questo UL alla svelta.

133
00:10:34,960 --> 00:10:41,200
E il secondo argomento che specifica gli alleati che potrebbero essere o non essere stati nella pagina quando è stato caricato

134
00:10:41,990 --> 00:10:46,300
all'interno del pozzo che era sicuramente nella pagina quando la pagina è stata caricata.

135
00:10:46,450 --> 00:10:51,850
Quindi stiamo aggiungendo listener di eventi agli elementi esistenti al momento del caricamento della pagina in modo che possiamo tenere conto

136
00:10:51,850 --> 00:10:53,530
di elementi che non esistono ancora.

137
00:10:53,980 --> 00:10:55,800
Questo è tutto per la nostra funzionalità di base.

138
00:10:55,810 --> 00:10:57,810
Abbiamo una lista completa delle cose da fare.

139
00:10:57,880 --> 00:11:00,710
Quello su cui ci concentreremo nel prossimo video è lo styling.

140
00:11:00,850 --> 00:11:02,350
E sicuramente abbiamo un modo per andare lì.