1
00:00:00,360 --> 00:00:01,270
Dar una buena acogida.

2
00:00:01,290 --> 00:00:07,140
En este video abordaremos la última gran pieza de funcionalidad restante, que es la creación de algo

3
00:00:07,140 --> 00:00:08,140
nuevo que hacer.

4
00:00:08,670 --> 00:00:14,610
Así que aquí en la versión completa solo para refrescar tu memoria de la forma en que funciona es que

5
00:00:14,610 --> 00:00:16,400
puedo escribirte y luego presionar enter.

6
00:00:16,410 --> 00:00:17,610
Entonces no hay ningún botón para hacer clic.

7
00:00:17,610 --> 00:00:24,240
Acabo de presionar enter y eso luego se enviará y me hará una nueva que hacer aquí que puedo

8
00:00:24,240 --> 00:00:25,360
marcar o eliminar.

9
00:00:26,190 --> 00:00:27,510
Entonces empecemos.

10
00:00:27,510 --> 00:00:33,330
Lo primero que debemos hacer es agregar un oyente a la entrada de texto que se dispara cuando presionamos la tecla Intro.

11
00:00:34,350 --> 00:00:36,300
Para hacer eso tenemos algunas opciones.

12
00:00:36,540 --> 00:00:44,880
Podemos usar la tecla presionar o podemos usar para comenzar seleccionando la entrada y no dejarla

13
00:00:44,880 --> 00:00:46,530
como solo entrada.

14
00:00:46,530 --> 00:00:50,670
Voy a ser más específico y decir que el tipo de entrada es igual al texto.

15
00:00:50,790 --> 00:00:58,940
Así que esto afectará a todas las entradas o escriba igual a texto así y luego agregará nuestro DOT y

16
00:00:58,940 --> 00:01:04,270
usaré la tecla presionar aquí tipo de entrada llamadas tecla de texto presionar.

17
00:01:04,290 --> 00:01:11,760
Aquí está la función de devolución de llamada que comenzaremos con un registro alt constante y este registro constante se ejecutará con cualquier

18
00:01:12,450 --> 00:01:15,520
pulsación de tecla, no solo con la tecla Intro.

19
00:01:15,540 --> 00:01:24,340
Así que solo para mantener presionada y guardar, volver al navegador y actualizar y abriremos esto aquí.

20
00:01:24,870 --> 00:01:28,910
Y cuando presiono la tecla, verá que presiono la tecla.

21
00:01:29,130 --> 00:01:33,160
Así que presionaré otra tecla y seguirá subiendo.

22
00:01:33,300 --> 00:01:36,590
Entonces, realmente no queremos hacer nada hasta que el usuario presione la tecla Intro.

23
00:01:36,980 --> 00:01:44,090
Necesitamos cambiar su código un poco en el video donde presentamos el método de pulsación de tecla.

24
00:01:44,130 --> 00:01:50,940
objeto de pulsación de tecla y que corresponde a la tecla que se presionó o al código de carácter de la tecla.

25
00:01:50,940 --> 00:01:53,520
También hablé acerca de qué propiedad en el

26
00:01:53,550 --> 00:01:58,830
Así que vamos a usar eso aquí y vamos a verificar si el código de carácter es 13, que es

27
00:01:58,830 --> 00:02:00,480
el código para la tecla Intro.

28
00:02:00,570 --> 00:02:07,260
Así que tenemos que trabajar con el objeto evento una vez más que se puede llamar lo

29
00:02:07,260 --> 00:02:17,280
que queramos y luego vamos a ejecutar si el evento que triple es igual al número 13, que es la forma en que verificamos la tecla

30
00:02:17,730 --> 00:02:24,870
enter cada carácter tiene su propio código y la tecla enter es 13, entonces haremos un registro constante.

31
00:02:25,290 --> 00:02:31,890
Tocas enter y guardarás volver aquí.

32
00:02:31,920 --> 00:02:34,470
Ahora estoy escribiendo un montón de claves que no entran.

33
00:02:34,620 --> 00:02:36,900
Y ahora voy a presionar enter.

34
00:02:37,000 --> 00:02:39,710
Puede ver que recibimos llamadas sobre el registro.

35
00:02:39,780 --> 00:02:41,610
Usted golpea enter.

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

37
00:02:42,240 --> 00:02:48,100
Entonces, en lugar de cancelar el inicio de sesión cuando presionamos Enter, lo que tenemos que

38
00:02:48,420 --> 00:02:57,210
hacer es sacar el texto de aquí extraerlo, hacer un nuevo aliado que luego agreguemos después de este y luego queremos borrar esta entrada para

39
00:02:57,210 --> 00:02:58,700
que el texto desaparezca.

40
00:02:58,920 --> 00:03:03,780
Comenzaremos extrayendo el valor y ese es bastante simple.

41
00:03:03,780 --> 00:03:06,270
Usaremos el método Val.

42
00:03:06,270 --> 00:03:13,750
Entonces queremos que el valor en la entrada que podemos hacer con un voto simple.

43
00:03:14,310 --> 00:03:15,620
Entonces hagamos un agente.

44
00:03:15,660 --> 00:03:23,180
registre esto Darvell recuerde que esto se refiere a la entrada que presionó la tecla al refrescar.

45
00:03:23,580 --> 00:03:25,090
Escriba cualquier cosa que no sea enter.

46
00:03:25,110 --> 00:03:26,280
No pasa nada.

47
00:03:26,280 --> 00:03:34,990
Ahora si presiono ingresar una consola que registra el valor como puede ver, escribo talo y presiono enter.

48
00:03:35,100 --> 00:03:38,820
Así que vamos a guardar eso en una variable.

49
00:03:40,020 --> 00:03:45,910
Vamos a llamarlo para hacer que el texto sea igual a la vocal inicial.

50
00:03:45,960 --> 00:03:52,440
Así que eso es tomar nuevo texto de entrada.

51
00:03:52,440 --> 00:04:02,660
Y luego lo que queremos hacer a continuación es crear un nuevo aliado y agregarlo bien para hacer eso.

52
00:04:02,670 --> 00:04:08,160
Voy a presentar un nuevo método llamado append. La manera en que append funciona es que

53
00:04:08,160 --> 00:04:10,420
primero seleccionamos un elemento para agregar.

54
00:04:10,440 --> 00:04:13,330
Entonces agregaremos que nuestras cosas son para hacer.

55
00:04:13,500 --> 00:04:18,000
Así que agregaremos nuestras deudas a la U. NORTE. en la pagina.

56
00:04:18,000 --> 00:04:22,880
Así que esto lo harás y se agregarán aliados a ese pozo.

57
00:04:23,190 --> 00:04:29,180
Entonces, si lo hago, lo agregaré y puedo darle una cadena de h t m l.

58
00:04:29,220 --> 00:04:35,430
Así que si agrego aliado aquí y acabo de codificar algo para empezar.

59
00:04:35,460 --> 00:04:44,040
Así que este es un nuevo aliado que adjuntamos a esta UL al igual que seleccioné

60
00:04:46,810 --> 00:04:51,900
la UL y esto realmente selecciona todo lo demás.

61
00:04:51,910 --> 00:04:54,500
Solo tenemos uno y luego nos quedamos sin plumas.

62
00:04:54,790 --> 00:05:02,030
Y tomará esta cadena y la agregará al pozo como cada Chimo adentro si así lo desea.

63
00:05:02,410 --> 00:05:07,090
Entonces te mostraré que cuando pulses enter aquí no importa lo que escribimos porque

64
00:05:07,090 --> 00:05:08,350
no lo estamos usando.

65
00:05:08,830 --> 00:05:10,660
Agrega un nuevo aliado.

66
00:05:10,780 --> 00:05:18,370
Y cada vez que presiono enter lo haré y si inspecciono puede ver que es un elemento que

67
00:05:18,370 --> 00:05:22,770
se agregó dentro del pozo, así como estos son elementos similares.

68
00:05:22,840 --> 00:05:28,420
Entonces, lo que queremos hacer a continuación es utilizar la variable do text.

69
00:05:28,480 --> 00:05:33,150
Todo lo que tenemos que hacer es usar el signo más para agregar esa variable.

70
00:05:33,520 --> 00:05:40,630
cierre separadas y usaremos un signo más y agregaremos para hacer texto y esto terminará con una gran cadena

71
00:05:40,780 --> 00:05:47,470
que tiene nuestro texto do, que es lo que el usuario escribió en la entrada más el aliado

72
00:05:47,470 --> 00:05:57,270
de apertura y cierre y te lo estamos enviando a refrescar a tu perro a pie y yo presiono enter y tenemos un nuevo aliado aquí.

73
00:05:57,280 --> 00:06:01,970
Así que tendremos dos etiquetas de línea de apertura y etiquetas de

74
00:06:02,470 --> 00:06:03,710
Entonces hay dos grandes problemas.

75
00:06:03,760 --> 00:06:08,090
Una queremos eliminar esta entrada y dos no tenemos el lapso.

76
00:06:08,590 --> 00:06:10,870
Comencemos limpiando la entrada.

77
00:06:10,870 --> 00:06:20,710
Todo lo que tenemos que hacer es ejecutar el signo de dólar este voto y darle una cadena vacía donde actúa como un setter en lugar

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

79
00:06:22,870 --> 00:06:29,110
Y eso ahora debería darnos una entrada vacía cuando escribo una nueva para hacer todo lo que haga falta para hacer y

80
00:06:29,110 --> 00:06:30,120
esto se borra.

81
00:06:30,490 --> 00:06:32,990
A continuación, obtengamos el lapso para mostrar una copia de seguridad.

82
00:06:33,460 --> 00:06:41,110
Entonces, todo lo que tenemos que hacer allí dentro de nuestro aliado lo agregaremos en una pila de tramos y se agregará.

83
00:06:42,250 --> 00:06:49,690
Y solo debemos asegurarnos de que tenemos la X ahí y el espacio justo para que la X tenga un espacio entre ella

84
00:06:49,690 --> 00:06:51,320
y desnudo para hacer texto.

85
00:06:51,520 --> 00:06:57,500
Y si salvamos, ahora estamos agregando una nueva cadena con un aliado con un lapso dentro de ella.

86
00:06:57,670 --> 00:07:05,030
Así que alimenta al perro y terminamos con el lapso y el nuevo aliado.

87
00:07:05,080 --> 00:07:11,710
Sin embargo, tenemos un problema con este código, que es cuando agrego algo nuevo para hacer como feed cat

88
00:07:11,710 --> 00:07:13,660
y trato de marcar los nuevos.

89
00:07:13,660 --> 00:07:18,540
En realidad no marcan ni eliminan los viejos que todavía tienen.

90
00:07:18,670 --> 00:07:21,180
Entonces el evento en vivo todavía está encendiendo.

91
00:07:21,490 --> 00:07:26,920
Este evento span todavía se activa, pero los nuevos tatuajes que se crean dinámicamente son aquellos que no

92
00:07:26,920 --> 00:07:30,040
están allí cuando la carga de la página no funciona.

93
00:07:30,040 --> 00:07:36,160
De esto es de lo que estaba hablando cuando te mostré esta diapositiva y en la mayoría de los casos dijo rápido

94
00:07:36,210 --> 00:07:38,190
y en Quake ambos haremos el trabajo.

95
00:07:38,380 --> 00:07:40,500
Sin embargo, hay una diferencia clave.

96
00:07:40,570 --> 00:07:47,800
Quick solo agregará oyentes para elementos existentes en agregará oyentes para todos los elementos futuros potenciales.

97
00:07:48,220 --> 00:07:53,920
Y eso es lo que tenemos que hacer aquí es usar porque queremos que esos oyentes estén escuchando

98
00:07:53,920 --> 00:07:55,310
a todos los aliados potenciales.

99
00:07:55,390 --> 00:08:01,060
Así que abre el suministro. Estoy aquí y demostraré cómo podemos usarlo en lugar de rápido.

100
00:08:01,390 --> 00:08:04,800
Por lo tanto, no se trata de cambiar para estar encendido.

101
00:08:05,050 --> 00:08:14,130
Entonces, si solo cambio esto para ser un aliado al hacer clic, simplemente así y lo dejo así.

102
00:08:14,200 --> 00:08:18,180
Básicamente es exactamente lo mismo, excepto con en lugar de rápido.

103
00:08:18,310 --> 00:08:25,780
Y si vuelvo atrás y actualizo los trabajos en los elementos originales y si agrego nuevos, no funciona.

104
00:08:25,990 --> 00:08:29,450
Por lo tanto, no se trata solo de cambiar de forma rápida y rápida.

105
00:08:29,710 --> 00:08:33,250
Bueno, lo que realmente necesitamos hacer es cambiar nuestro código levemente.

106
00:08:33,250 --> 00:08:40,060
Así que primero te mostraré el cambio y luego lo explicaré.

107
00:08:40,150 --> 00:08:44,940
Entonces lo que hice es que te escribí bien en coma rápida.

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

109
00:08:46,060 --> 00:08:52,630
La razón por la que tuve que hacer esto es que solo podemos agregar un oyente que utiliza la consulta j en los elementos que existen

110
00:08:52,810 --> 00:08:54,890
cuando este código se ejecuta la primera vez.

111
00:08:55,180 --> 00:08:59,190
Y cuando este código se ejecuta la primera vez, no tenemos todos los aliados.

112
00:08:59,200 --> 00:09:04,710
Solo tenemos tres, así que si agregamos un oyente rápido a los aliados, solo se agregará a esos tres.

113
00:09:04,720 --> 00:09:09,590
Entonces, lo que hacemos es agregar un oyente a todo el padre de UL.

114
00:09:09,910 --> 00:09:13,590
Entonces, cada vez que hagamos clic en eso, este oyente disparará.

115
00:09:13,810 --> 00:09:16,690
Excepto que agregamos este segundo argumento.

116
00:09:17,140 --> 00:09:24,470
Y lo que hace este código es que cuando se hace clic en un aliado dentro de a, se ejecutará este código.

117
00:09:24,580 --> 00:09:28,670
Entonces, agregamos un oyente a un elemento que existe cuando se carga la página.

118
00:09:28,900 --> 00:09:33,930
Pero en realidad solo estamos escuchando las mentiras que se hacen clic dentro de eso.

119
00:09:34,380 --> 00:09:36,300
Así que déjame demostrar esto ahora.

120
00:09:37,000 --> 00:09:40,400
Actualizaré y agreguemos algunos nuevos aquí.

121
00:09:40,930 --> 00:09:44,720
Los viejos todavía funcionan y los nuevos también se pueden marcar.

122
00:09:45,070 --> 00:09:46,550
Pero la eliminación no funciona.

123
00:09:46,840 --> 00:09:50,250
Entonces tenemos que regresar y hacer el mismo cambio exacto.

124
00:09:50,410 --> 00:09:58,450
Así que vamos a escuchar un evento que existe cuando la página se carga y luego hacemos clic, pero solo queremos

125
00:09:58,450 --> 00:10:03,520
que este código se ejecute cuando se hace clic dentro de un pozo.

126
00:10:04,120 --> 00:10:06,690
Y si lo dejamos así, deberíamos estar listos para irnos.

127
00:10:06,700 --> 00:10:08,810
Ahora vamos a probarlo.

128
00:10:09,040 --> 00:10:14,890
Podemos eliminar los viejos y los nuevos y también podemos eliminar los dos.

129
00:10:15,730 --> 00:10:18,620
Está bien, así que vamos a resumir algunos de los nuevos materiales aquí.

130
00:10:18,640 --> 00:10:24,850
Lo primero es el método de agregar que puede tomar una cadena de HMO y luego agregará

131
00:10:25,090 --> 00:10:27,110
esos elementos a lo que seleccionamos.

132
00:10:27,340 --> 00:10:34,940
Y lo segundo fue usar encendido en lugar de rápido y agregar esta UL rápidamente.

133
00:10:34,960 --> 00:10:41,200
Y el segundo argumento que especifica los aliados que pueden o no haber estado en la página cuando se cargó

134
00:10:41,990 --> 00:10:46,300
dentro del pozo que definitivamente estaba en la página cuando se cargó la página.

135
00:10:46,450 --> 00:10:51,850
Así que estamos agregando detectores de eventos a los elementos que existen cuando la página se carga para que podamos dar cuenta de

136
00:10:51,850 --> 00:10:53,530
los elementos que aún no están allí.

137
00:10:53,980 --> 00:10:55,800
Eso es todo por nuestra funcionalidad básica.

138
00:10:55,810 --> 00:10:57,810
Tenemos una lista completa de tareas pendientes.

139
00:10:57,880 --> 00:11:00,710
En lo que nos enfocaremos en el siguiente video es el estilo.

140
00:11:00,850 --> 00:11:02,350
Y definitivamente tenemos maneras de llegar allí.