1
00:00:01,380 --> 00:00:04,420
Bienvenido de nuevo al último desafío de codificación

2
00:00:04,420 --> 00:00:05,833
de esta sección.

3
00:00:07,620 --> 00:00:10,530
Y este va a ser un poco diferente

4
00:00:10,530 --> 00:00:12,510
de los anteriores.

5
00:00:12,510 --> 00:00:15,600
Entonces, en este, quiero que escribas un programa.

6
00:00:15,600 --> 00:00:18,610
que recibe una lista de nombres de variables,

7
00:00:18,610 --> 00:00:21,290
escrito en guión bajo,

8
00:00:21,290 --> 00:00:23,700
y su programa debería convertirlos

9
00:00:23,700 --> 00:00:26,113
a camello caso como este.

10
00:00:29,018 --> 00:00:32,090
Ahora, la entrada vendrá de un área de texto

11
00:00:32,090 --> 00:00:34,630
que se insertó en el DOM,

12
00:00:34,630 --> 00:00:36,193
usando este código a continuación aquí.

13
00:00:38,690 --> 00:00:41,750
Entonces, este código aquí creó el área de texto,

14
00:00:41,750 --> 00:00:46,010
y este el botón usando la función createElement,

15
00:00:46,010 --> 00:00:48,253
que aprenderá más adelante.

16
00:00:51,510 --> 00:00:55,180
De ahí vendrá la lista de nombres de variables,

17
00:00:55,180 --> 00:00:56,850
y la conversión ocurrirá

18
00:00:56,850 --> 00:00:59,543
cuando se hace clic en este botón aquí.

19
00:01:01,390 --> 00:01:03,810
Y aquí están los datos de prueba.

20
00:01:03,810 --> 00:01:06,470
Esto es lo que tomarás

21
00:01:06,470 --> 00:01:09,130
y péguelo aquí en esta área de texto,

22
00:01:09,130 --> 00:01:10,260
y al hacer clic en el botón,

23
00:01:10,260 --> 00:01:12,333
debe producir esta salida aquí.

24
00:01:15,100 --> 00:01:18,940
Entonces, cinco salidas de registro de puntos de consola separadas.

25
00:01:18,940 --> 00:01:22,093
Esencialmente, cinco resultados diferentes.

26
00:01:24,032 --> 00:01:29,032
Aquí hay un par de consejos para que usted resuelva este problema.

27
00:01:29,260 --> 00:01:32,370
En primer lugar, debes recordar qué personaje

28
00:01:32,370 --> 00:01:36,860
en realidad define una nueva línea en el área de texto.

29
00:01:36,860 --> 00:01:38,323
Espero que puedas recordar eso.

30
00:01:39,270 --> 00:01:40,900
Luego, el segundo,

31
00:01:40,900 --> 00:01:44,160
la solución solo necesita funcionar para una variable

32
00:01:44,160 --> 00:01:46,510
hecho de dos palabras.

33
00:01:46,510 --> 00:01:50,710
Por ejemplo, en este formato, un guión bajo b.

34
00:01:50,710 --> 00:01:54,473
Así que eso es exactamente lo que tenemos aquí, ¿verdad?

35
00:01:55,570 --> 00:01:59,440
Entonces número tres, comienza a resolver este desafío.

36
00:01:59,440 --> 00:02:02,793
sin preocuparnos en absoluto por esto aquí.

37
00:02:03,910 --> 00:02:07,490
Porque esto en realidad es un poco difícil.

38
00:02:07,490 --> 00:02:11,790
Y entonces comience creando solo este nombre de variable

39
00:02:11,790 --> 00:02:14,120
en la notación de caso de camello.

40
00:02:14,120 --> 00:02:17,530
Y por último, también quiero hacerles saber que este desafío

41
00:02:17,530 --> 00:02:20,003
es bastante difícil a propósito.

42
00:02:20,932 --> 00:02:25,310
Entonces, una vez más, realmente quiero que te desafíes a ti mismo,

43
00:02:25,310 --> 00:02:26,970
pero en caso de que estés atascado,

44
00:02:26,970 --> 00:02:29,460
por supuesto, no debes frustrarte.

45
00:02:29,460 --> 00:02:33,160
En su lugar, puede comenzar a ver la solución,

46
00:02:33,160 --> 00:02:37,110
y luego, si eso te ayuda, simplemente haz una pausa y continúa.

47
00:02:37,110 --> 00:02:40,520
Luego, una vez que lo hizo funcionar con estos datos de prueba,

48
00:02:40,520 --> 00:02:42,453
por supuesto, también puedes usar el tuyo propio.

49
00:02:43,600 --> 00:02:47,170
Así que pausa el video ahora y tómate todo el tiempo que necesites,

50
00:02:47,170 --> 00:02:50,063
y te veré de regreso aquí tan pronto como estés listo.

51
00:02:52,960 --> 00:02:56,483
Y comencemos adjuntando un controlador de eventos al botón.

52
00:02:58,040 --> 00:03:00,160
Así que a este botón aquí.

53
00:03:00,160 --> 00:03:02,510
Todo lo que tenemos que hacer es querySelector,

54
00:03:03,470 --> 00:03:06,023
en realidad, document dot querySelector,

55
00:03:07,490 --> 00:03:09,973
y luego simplemente seleccionamos el elemento del botón.

56
00:03:11,670 --> 00:03:16,313
Y luego agregue un detector de eventos para un clic,

57
00:03:18,090 --> 00:03:20,770
y luego una determinada función.

58
00:03:20,770 --> 00:03:22,470
Y lo primero que tenemos que hacer

59
00:03:22,470 --> 00:03:25,430
es sacar el valor del área de texto.

60
00:03:25,430 --> 00:03:29,810
Y para eso, ya les puse este fragmento de código aquí.

61
00:03:29,810 --> 00:03:34,810
Así que tomemos eso y solo para comenzar,

62
00:03:35,090 --> 00:03:36,823
registrémoslo en la consola.

63
00:03:41,990 --> 00:03:46,240
Pega eso aquí y de hecho,

64
00:03:46,240 --> 00:03:49,973
es básicamente una cadena grande que contiene todo esto.

65
00:03:51,630 --> 00:03:56,630
Muy bien, entonces, ¿cómo separamos ahora esto básicamente?

66
00:03:56,880 --> 00:03:59,863
en cinco cuerdas diferentes para empezar?

67
00:04:00,780 --> 00:04:05,780
Bueno, recordamos qué personaje define una nueva línea, ¿verdad?

68
00:04:06,330 --> 00:04:09,260
Porque ese va a ser un gran punto de partida.

69
00:04:09,260 --> 00:04:13,300
para dividir esta cadena en varias partes.

70
00:04:13,300 --> 00:04:18,300
Y eso será, digamos filas,

71
00:04:19,921 --> 00:04:22,543
y eso será división de puntos de texto,

72
00:04:23,550 --> 00:04:27,853
y ese carácter de nueva línea es barra invertida, n.

73
00:04:29,640 --> 00:04:31,083
Entonces, veamos.

74
00:04:31,940 --> 00:04:33,340
Vamos a registrar filas ahora.

75
00:04:33,340 --> 00:04:37,393
Y ahora deberíamos obtener una matriz con cinco elementos.

76
00:04:38,360 --> 00:04:42,130
Y, por supuesto, primero debemos pegarlo aquí,

77
00:04:42,130 --> 00:04:45,010
haga clic en este botón, y de hecho,

78
00:04:45,010 --> 00:04:48,700
ahora tenemos este resultado aquí como se esperaba.

79
00:04:48,700 --> 00:04:52,100
Y ahora simplemente pasemos por encima de esta matriz,

80
00:04:52,100 --> 00:04:56,400
y en cada iteración, registraremos este nombre de variable aquí,

81
00:04:56,400 --> 00:04:58,203
convertido a caja de camello.

82
00:04:59,220 --> 00:05:01,930
Bastante simple.

83
00:05:01,930 --> 00:05:06,453
Para const fila en filas.

84
00:05:08,080 --> 00:05:12,090
En primer lugar, lo primero que vamos a tener que hacer

85
00:05:12,090 --> 00:05:15,203
es para, ahora hice clic aquí, ahora se ha ido.

86
00:05:16,810 --> 00:05:21,810
Pero de todos modos, echemos un vistazo a este caso aquí.

87
00:05:22,110 --> 00:05:24,230
Y de hecho, déjame copiarlo aquí abajo,

88
00:05:24,230 --> 00:05:28,133
para que siempre podamos echarle un vistazo mientras estamos desarrollando.

89
00:05:30,460 --> 00:05:33,343
Bien, entonces tenemos que,

90
00:05:34,210 --> 00:05:37,593
permítanme también escribir result underscoreCase.

91
00:05:40,472 --> 00:05:41,722
Así que debería convertirse en esto.

92
00:05:42,610 --> 00:05:47,180
Para hacer esto, primero tenemos que dividir

93
00:05:47,180 --> 00:05:50,170
este nombre de variable aquí también en sus dos partes,

94
00:05:50,170 --> 00:05:54,620
que están separados por el guión bajo en este momento.

95
00:05:54,620 --> 00:05:58,720
Cada palabra aquí ahora se llama fila, ¿verdad?

96
00:05:58,720 --> 00:06:03,720
Y entonces dividimos eso por este guión bajo.

97
00:06:05,370 --> 00:06:08,700
Pero en realidad, eso no es suficiente porque, como saben,

98
00:06:08,700 --> 00:06:11,570
camel case debe ser todo en minúsculas,

99
00:06:11,570 --> 00:06:14,830
excepto por esta segunda palabra aquí,

100
00:06:14,830 --> 00:06:17,900
que debe comenzar con mayúscula.

101
00:06:17,900 --> 00:06:22,310
Sin embargo, aquí en realidad, tenemos algunas mayúsculas aquí,

102
00:06:22,310 --> 00:06:24,843
y aquí aún peor es palabra entera.

103
00:06:25,820 --> 00:06:28,940
Además, tenemos algunos espacios extraños.

104
00:06:28,940 --> 00:06:33,690
Así que aquí tenemos este espacio, aquí tenemos incluso dos espacios,

105
00:06:33,690 --> 00:06:36,733
y entonces tenemos que deshacernos de ambos.

106
00:06:37,830 --> 00:06:39,950
Y así como antes,

107
00:06:39,950 --> 00:06:41,680
podemos usar toLowercase

108
00:06:45,050 --> 00:06:48,823
y luego también podemos usar el método de recorte en eso.

109
00:06:49,870 --> 00:06:52,810
Y luego podemos incluso encadenar un tercer método,

110
00:06:52,810 --> 00:06:56,823
que es entonces el resultado de dividirlo en palabras.

111
00:06:59,610 --> 00:07:03,370
Entonces terminamos con una matriz con dos palabras,

112
00:07:03,370 --> 00:07:06,193
y entonces vamos a desestructurar eso en dos variables,

113
00:07:07,270 --> 00:07:11,730
la primera y la segunda, ¿de acuerdo?

114
00:07:11,730 --> 00:07:14,140
Y entonces ya estamos bien encaminados

115
00:07:14,140 --> 00:07:15,883
para construir la salida aquí.

116
00:07:18,360 --> 00:07:22,330
Llamémoslo salida y será esta cadena

117
00:07:22,330 --> 00:07:24,640
simplemente con la primera palabra,

118
00:07:24,640 --> 00:07:27,090
porque eso ya es suficiente.

119
00:07:27,090 --> 00:07:30,660
Y ahora solo necesitamos la segunda palabra en mayúscula.

120
00:07:30,660 --> 00:07:33,400
Y ya lo hicimos un par de veces

121
00:07:33,400 --> 00:07:37,030
y déjenme mostrarles la segunda versión que les mostré

122
00:07:37,030 --> 00:07:40,040
que es simplemente bueno,

123
00:07:40,040 --> 00:07:44,423
reemplazo del segundo punto.

124
00:07:46,830 --> 00:07:50,900
Y lo que queremos reemplazar es el segundo cero,

125
00:07:50,900 --> 00:07:55,900
por lo que el primer carácter con el segundo cero a mayúsculas.

126
00:08:00,922 --> 00:08:04,050
Y luego iniciar sesión en la consola,

127
00:08:04,050 --> 00:08:05,673
y creo que eso ya es todo.

128
00:08:08,490 --> 00:08:10,830
Así que escribí esto aquí bastante rápido,

129
00:08:10,830 --> 00:08:13,740
porque ya expliqué todo antes.

130
00:08:13,740 --> 00:08:16,340
Pero por supuesto, puedes seguir pausando el video.

131
00:08:16,340 --> 00:08:21,340
para echar un vistazo a lo que estoy haciendo aún más cerca.

132
00:08:21,430 --> 00:08:23,883
Y tal vez también analice realmente lo que estoy haciendo.

133
00:08:27,020 --> 00:08:32,020
Ahora obtenemos, "No se puede leer la propiedad reemplazar de indefinido".

134
00:08:32,630 --> 00:08:36,460
Entonces, lo que significa es que, en segundo lugar, no está definido.

135
00:08:36,460 --> 00:08:40,940
Y por lo tanto, estamos obteniendo un resultado extraño.

136
00:08:40,940 --> 00:08:43,543
de esto aquí básicamente.

137
00:08:44,470 --> 00:08:47,753
Así que usemos algunos registros de puntos de consola aquí.

138
00:08:49,590 --> 00:08:54,590
Así que registremos la primera y la segunda fila,

139
00:08:54,810 --> 00:08:59,670
sólo para asegurarse o simplemente para ver lo que está pasando.

140
00:08:59,670 --> 00:09:01,750
Y podemos deshacernos de este registro de puntos de la consola,

141
00:09:01,750 --> 00:09:03,223
para que no se interponga en nuestro camino.

142
00:09:04,220 --> 00:09:07,950
Luego péguelo aquí, ejecútelo y obtenemos,

143
00:09:07,950 --> 00:09:10,330
cero, cero indefinido.

144
00:09:10,330 --> 00:09:11,443
Bueno, eso es raro.

145
00:09:13,770 --> 00:09:15,113
Todo parece correcto.

146
00:09:16,140 --> 00:09:19,513
Oh aquí, esto en realidad debería ser de, no de.

147
00:09:20,350 --> 00:09:24,330
Y en realidad hay un ciclo más antiguo llamado for in loop,

148
00:09:24,330 --> 00:09:27,570
que no te mostré porque ya no importa.

149
00:09:27,570 --> 00:09:30,120
Pero es por eso que no recibimos un error.

150
00:09:30,120 --> 00:09:32,490
como escribí aquí.

151
00:09:32,490 --> 00:09:34,423
Así que vamos a ver si ahora funciona.

152
00:09:35,780 --> 00:09:39,003
Y ahora al menos este resultado aquí tiene sentido.

153
00:09:39,870 --> 00:09:42,190
Esta es de hecho la fila, esta es la primera

154
00:09:42,190 --> 00:09:43,890
y este es el segundo,

155
00:09:43,890 --> 00:09:48,890
pero ahora tenemos otro error aquí, entonces toUpperCase.

156
00:09:49,110 --> 00:09:54,110
Y sí, eso está aquí porque en realidad no lo llamé.

157
00:09:54,270 --> 00:09:57,253
Acabo de escribir el nombre del método sin llamarlo.

158
00:09:58,810 --> 00:10:00,490
Ese fue otro error.

159
00:10:00,490 --> 00:10:02,840
Pero esta es una vez más buena para mostrarte

160
00:10:02,840 --> 00:10:05,130
que los errores son en realidad algo común

161
00:10:05,130 --> 00:10:06,763
en el desarrollo de software.

162
00:10:08,230 --> 00:10:11,280
De todos modos, vemos que en realidad, nuestros nombres de variables

163
00:10:11,280 --> 00:10:12,643
ya son correctos.

164
00:10:14,320 --> 00:10:17,963
Todos ellos están convertidos a camel case.

165
00:10:19,350 --> 00:10:22,070
Así que deshagámonos de ese registro de puntos de la consola aquí,

166
00:10:22,070 --> 00:10:25,020
y ahora abordemos esta última parte aquí,

167
00:10:25,020 --> 00:10:28,580
con estos emojis aquí.

168
00:10:28,580 --> 00:10:31,500
Pero, por supuesto, podría usar cualquier otro signo.

169
00:10:31,500 --> 00:10:33,700
Así que dos cosas para notar aquí.

170
00:10:33,700 --> 00:10:37,430
La primera palabra tiene una marca de verificación,

171
00:10:37,430 --> 00:10:39,300
el segundo tiene dos marcas de verificación,

172
00:10:39,300 --> 00:10:41,810
luego tres, cuatro, cinco.

173
00:10:41,810 --> 00:10:43,400
Así que eso es lo primero.

174
00:10:43,400 --> 00:10:46,210
Y lo segundo es que todos empiezan

175
00:10:46,210 --> 00:10:47,443
en la misma posición.

176
00:10:48,380 --> 00:10:53,310
Esto significa que todas estas cadenas aquí básicamente

177
00:10:53,310 --> 00:10:54,773
debe tener la misma longitud.

178
00:10:56,400 --> 00:10:58,040
¿Y cómo hacemos eso?

179
00:10:58,040 --> 00:11:00,970
¿Cómo les damos a todos la misma longitud?

180
00:11:00,970 --> 00:11:04,300
Bueno, podemos usar relleno, ¿verdad?

181
00:11:04,300 --> 00:11:06,740
En este caso, usamos pad end,

182
00:11:06,740 --> 00:11:09,093
y ajústelos todos a una longitud fija.

183
00:11:14,270 --> 00:11:16,363
Hagamos eso aquí primero.

184
00:11:17,500 --> 00:11:22,493
Entonces, padEnd, con una longitud de 20,

185
00:11:23,420 --> 00:11:27,643
y la cadena a rellenar debería ser simplemente una cadena vacía.

186
00:11:28,970 --> 00:11:29,950
Entonces, veamos.

187
00:11:29,950 --> 00:11:32,970
Y se verá igual, pero a medida que seleccionamos,

188
00:11:32,970 --> 00:11:37,080
vemos que efectivamente, ahora la selección continúa.

189
00:11:37,080 --> 00:11:40,433
Lo que significa que de hecho hay algunos espacios vacíos allí.

190
00:11:41,460 --> 00:11:45,420
Y de hecho, cuando queremos solo espacios vacíos,

191
00:11:45,420 --> 00:11:49,540
en realidad podemos omitir este segundo argumento,

192
00:11:49,540 --> 00:11:51,210
y solo llama con 20,

193
00:11:51,210 --> 00:11:54,180
y luego el resultado va a ser el mismo.

194
00:11:54,180 --> 00:11:57,433
Entonces, después de eso, agreguemos la marca de verificación.

195
00:11:58,600 --> 00:12:00,820
Y así aquí, ahora tenemos que volver

196
00:12:00,820 --> 00:12:05,703
o para registrar una cadena de plantilla, que contendrá todo eso.

197
00:12:06,660 --> 00:12:11,660
Así que aquí está el emoji, y sí, está bien, es el camino a seguir aquí.

198
00:12:13,830 --> 00:12:18,253
Y entonces esta debería ser casi ahora la solución correcta.

199
00:12:19,560 --> 00:12:22,440
A ver, vale.

200
00:12:22,440 --> 00:12:27,090
Ahora todos los emojis empiezan en el mismo lugar,

201
00:12:27,090 --> 00:12:30,050
pero ahora, todo lo que tenemos que hacer es agregar aquí,

202
00:12:30,050 --> 00:12:32,840
tres, cuatro y cinco.

203
00:12:32,840 --> 00:12:33,700
Y por eso,

204
00:12:33,700 --> 00:12:37,253
vamos a utilizar el índice actual en cada iteración.

205
00:12:39,300 --> 00:12:41,610
Ahora recuerda cómo podemos obtener acceso

206
00:12:41,610 --> 00:12:45,110
al índice actual en el bucle for of.

207
00:12:45,110 --> 00:12:47,960
Así que estamos recorriendo una matriz aquí,

208
00:12:47,960 --> 00:12:49,890
y así obtener el índice actual,

209
00:12:49,890 --> 00:12:52,090
necesitamos usar las entradas

210
00:12:52,090 --> 00:12:54,863
de la matriz, ¿recuerdas eso?

211
00:12:56,010 --> 00:12:58,920
Así que decimos, entradas, y luego aquí,

212
00:12:58,920 --> 00:13:03,250
la fila ahora es en realidad una matriz con primero el índice,

213
00:13:03,250 --> 00:13:06,060
y luego segundo, el elemento real.

214
00:13:06,060 --> 00:13:09,620
Entonces, desestructuramos eso aquí, de inmediato,

215
00:13:09,620 --> 00:13:11,600
donde I es el índice,

216
00:13:11,600 --> 00:13:15,510
y la fila es entonces el elemento real en sí.

217
00:13:15,510 --> 00:13:18,480
Y luego aquí, podemos usar ese índice

218
00:13:18,480 --> 00:13:20,823
para básicamente repetir esta cadena.

219
00:13:22,670 --> 00:13:25,130
Así que ya ves, esto es mucho trabajo.

220
00:13:25,130 --> 00:13:27,920
y es todo un reto de nuevo.

221
00:13:27,920 --> 00:13:31,513
Así que no esperaba que realmente hicieras esto por tu cuenta,

222
00:13:33,410 --> 00:13:36,110
al menos no de una manera muy rápida.

223
00:13:36,110 --> 00:13:38,340
Tal vez te tomaste un tiempo, y luego lo lograste,

224
00:13:38,340 --> 00:13:40,893
y entonces eso es realmente genial.

225
00:13:42,640 --> 00:13:45,200
Pero de todos modos, es muy bueno desafiarte a ti mismo.

226
00:13:45,200 --> 00:13:47,423
y llévate al límite tú también.

227
00:13:49,280 --> 00:13:52,200
De todos modos, aquí, ahora tomamos esta cadena,

228
00:13:52,200 --> 00:13:54,630
y luego en esa cadena llamamos repetir,

229
00:13:54,630 --> 00:13:57,460
tal como lo hicimos antes con los aviones.

230
00:13:57,460 --> 00:14:01,980
Y luego queremos en la primera iteración,

231
00:14:01,980 --> 00:14:04,733
y ese será tu cero más uno,

232
00:14:05,690 --> 00:14:09,433
porque siempre necesitamos sumar uno porque comienza en cero.

233
00:14:10,390 --> 00:14:15,390
Así que guárdelo, pegue todas las variables aquí.

234
00:14:16,600 --> 00:14:20,933
Y sí, esa es la solución, eso es increíble.

235
00:14:21,770 --> 00:14:23,423
Agreguemos otro aquí.

236
00:14:24,870 --> 00:14:29,870
Mostrándonos SCH, y veamos.

237
00:14:30,830 --> 00:14:34,350
Y de hecho, ahora también es en caso de camello,

238
00:14:34,350 --> 00:14:39,043
y con seis emojis de acuerdo aquí.

239
00:14:40,344 --> 00:14:42,600
Así que este de aquí es de la vez anterior,

240
00:14:42,600 --> 00:14:44,690
así que cada vez que hacemos clic en el botón,

241
00:14:44,690 --> 00:14:46,663
por supuesto, esto se registrará aquí.

242
00:14:48,400 --> 00:14:51,323
Bien, entonces eso es todo aquí.

243
00:14:52,750 --> 00:14:54,770
Asegúrate de que realmente entiendes

244
00:14:54,770 --> 00:14:57,620
cómo funcionan las cadenas en JavaScript.

245
00:14:57,620 --> 00:15:01,250
Puede revisar esta conferencia y las últimas tres conferencias,

246
00:15:01,250 --> 00:15:04,150
y si quieres aún más ejercicios de cuerdas,

247
00:15:04,150 --> 00:15:06,850
puedes avisarme en la sección de preguntas y respuestas,

248
00:15:06,850 --> 00:15:08,910
y luego puedo dártelos.

249
00:15:08,910 --> 00:15:12,423
De todos modos, eso es todo por ahora, te veo en la próxima.