Bienvenido de nuevo al último desafío de codificación
de esta sección.
Y este va a ser un poco diferente
de los anteriores.
Entonces, en este, quiero que escribas un programa.
que recibe una lista de nombres de variables,
escrito en guión bajo,
y su programa debería convertirlos
a camello caso como este.
Ahora, la entrada vendrá de un área de texto
que se insertó en el DOM,
usando este código a continuación aquí.
Entonces, este código aquí creó el área de texto,
y este el botón usando la función createElement,
que aprenderá más adelante.
De ahí vendrá la lista de nombres de variables,
y la conversión ocurrirá
cuando se hace clic en este botón aquí.
Y aquí están los datos de prueba.
Esto es lo que tomarás
y péguelo aquí en esta área de texto,
y al hacer clic en el botón,
debe producir esta salida aquí.
Entonces, cinco salidas de registro de puntos de consola separadas.
Esencialmente, cinco resultados diferentes.
Aquí hay un par de consejos para que usted resuelva este problema.
En primer lugar, debes recordar qué personaje
en realidad define una nueva línea en el área de texto.
Espero que puedas recordar eso.
Luego, el segundo,
la solución solo necesita funcionar para una variable
hecho de dos palabras.
Por ejemplo, en este formato, un guión bajo b.
Así que eso es exactamente lo que tenemos aquí, ¿verdad?
Entonces número tres, comienza a resolver este desafío.
sin preocuparnos en absoluto por esto aquí.
Porque esto en realidad es un poco difícil.
Y entonces comience creando solo este nombre de variable
en la notación de caso de camello.
Y por último, también quiero hacerles saber que este desafío
es bastante difícil a propósito.
Entonces, una vez más, realmente quiero que te desafíes a ti mismo,
pero en caso de que estés atascado,
por supuesto, no debes frustrarte.
En su lugar, puede comenzar a ver la solución,
y luego, si eso te ayuda, simplemente haz una pausa y continúa.
Luego, una vez que lo hizo funcionar con estos datos de prueba,
por supuesto, también puedes usar el tuyo propio.
Así que pausa el video ahora y tómate todo el tiempo que necesites,
y te veré de regreso aquí tan pronto como estés listo.
Y comencemos adjuntando un controlador de eventos al botón.
Así que a este botón aquí.
Todo lo que tenemos que hacer es querySelector,
en realidad, document dot querySelector,
y luego simplemente seleccionamos el elemento del botón.
Y luego agregue un detector de eventos para un clic,
y luego una determinada función.
Y lo primero que tenemos que hacer
es sacar el valor del área de texto.
Y para eso, ya les puse este fragmento de código aquí.
Así que tomemos eso y solo para comenzar,
registrémoslo en la consola.
Pega eso aquí y de hecho,
es básicamente una cadena grande que contiene todo esto.
Muy bien, entonces, ¿cómo separamos ahora esto básicamente?
en cinco cuerdas diferentes para empezar?
Bueno, recordamos qué personaje define una nueva línea, ¿verdad?
Porque ese va a ser un gran punto de partida.
para dividir esta cadena en varias partes.
Y eso será, digamos filas,
y eso será división de puntos de texto,
y ese carácter de nueva línea es barra invertida, n.
Entonces, veamos.
Vamos a registrar filas ahora.
Y ahora deberíamos obtener una matriz con cinco elementos.
Y, por supuesto, primero debemos pegarlo aquí,
haga clic en este botón, y de hecho,
ahora tenemos este resultado aquí como se esperaba.
Y ahora simplemente pasemos por encima de esta matriz,
y en cada iteración, registraremos este nombre de variable aquí,
convertido a caja de camello.
Bastante simple.
Para const fila en filas.
En primer lugar, lo primero que vamos a tener que hacer
es para, ahora hice clic aquí, ahora se ha ido.
Pero de todos modos, echemos un vistazo a este caso aquí.
Y de hecho, déjame copiarlo aquí abajo,
para que siempre podamos echarle un vistazo mientras estamos desarrollando.
Bien, entonces tenemos que,
permítanme también escribir result underscoreCase.
Así que debería convertirse en esto.
Para hacer esto, primero tenemos que dividir
este nombre de variable aquí también en sus dos partes,
que están separados por el guión bajo en este momento.
Cada palabra aquí ahora se llama fila, ¿verdad?
Y entonces dividimos eso por este guión bajo.
Pero en realidad, eso no es suficiente porque, como saben,
camel case debe ser todo en minúsculas,
excepto por esta segunda palabra aquí,
que debe comenzar con mayúscula.
Sin embargo, aquí en realidad, tenemos algunas mayúsculas aquí,
y aquí aún peor es palabra entera.
Además, tenemos algunos espacios extraños.
Así que aquí tenemos este espacio, aquí tenemos incluso dos espacios,
y entonces tenemos que deshacernos de ambos.
Y así como antes,
podemos usar toLowercase
y luego también podemos usar el método de recorte en eso.
Y luego podemos incluso encadenar un tercer método,
que es entonces el resultado de dividirlo en palabras.
Entonces terminamos con una matriz con dos palabras,
y entonces vamos a desestructurar eso en dos variables,
la primera y la segunda, ¿de acuerdo?
Y entonces ya estamos bien encaminados
para construir la salida aquí.
Llamémoslo salida y será esta cadena
simplemente con la primera palabra,
porque eso ya es suficiente.
Y ahora solo necesitamos la segunda palabra en mayúscula.
Y ya lo hicimos un par de veces
y déjenme mostrarles la segunda versión que les mostré
que es simplemente bueno,
reemplazo del segundo punto.
Y lo que queremos reemplazar es el segundo cero,
por lo que el primer carácter con el segundo cero a mayúsculas.
Y luego iniciar sesión en la consola,
y creo que eso ya es todo.
Así que escribí esto aquí bastante rápido,
porque ya expliqué todo antes.
Pero por supuesto, puedes seguir pausando el video.
para echar un vistazo a lo que estoy haciendo aún más cerca.
Y tal vez también analice realmente lo que estoy haciendo.
Ahora obtenemos, "No se puede leer la propiedad reemplazar de indefinido".
Entonces, lo que significa es que, en segundo lugar, no está definido.
Y por lo tanto, estamos obteniendo un resultado extraño.
de esto aquí básicamente.
Así que usemos algunos registros de puntos de consola aquí.
Así que registremos la primera y la segunda fila,
sólo para asegurarse o simplemente para ver lo que está pasando.
Y podemos deshacernos de este registro de puntos de la consola,
para que no se interponga en nuestro camino.
Luego péguelo aquí, ejecútelo y obtenemos,
cero, cero indefinido.
Bueno, eso es raro.
Todo parece correcto.
Oh aquí, esto en realidad debería ser de, no de.
Y en realidad hay un ciclo más antiguo llamado for in loop,
que no te mostré porque ya no importa.
Pero es por eso que no recibimos un error.
como escribí aquí.
Así que vamos a ver si ahora funciona.
Y ahora al menos este resultado aquí tiene sentido.
Esta es de hecho la fila, esta es la primera
y este es el segundo,
pero ahora tenemos otro error aquí, entonces toUpperCase.
Y sí, eso está aquí porque en realidad no lo llamé.
Acabo de escribir el nombre del método sin llamarlo.
Ese fue otro error.
Pero esta es una vez más buena para mostrarte
que los errores son en realidad algo común
en el desarrollo de software.
De todos modos, vemos que en realidad, nuestros nombres de variables
ya son correctos.
Todos ellos están convertidos a camel case.
Así que deshagámonos de ese registro de puntos de la consola aquí,
y ahora abordemos esta última parte aquí,
con estos emojis aquí.
Pero, por supuesto, podría usar cualquier otro signo.
Así que dos cosas para notar aquí.
La primera palabra tiene una marca de verificación,
el segundo tiene dos marcas de verificación,
luego tres, cuatro, cinco.
Así que eso es lo primero.
Y lo segundo es que todos empiezan
en la misma posición.
Esto significa que todas estas cadenas aquí básicamente
debe tener la misma longitud.
¿Y cómo hacemos eso?
¿Cómo les damos a todos la misma longitud?
Bueno, podemos usar relleno, ¿verdad?
En este caso, usamos pad end,
y ajústelos todos a una longitud fija.
Hagamos eso aquí primero.
Entonces, padEnd, con una longitud de 20,
y la cadena a rellenar debería ser simplemente una cadena vacía.
Entonces, veamos.
Y se verá igual, pero a medida que seleccionamos,
vemos que efectivamente, ahora la selección continúa.
Lo que significa que de hecho hay algunos espacios vacíos allí.
Y de hecho, cuando queremos solo espacios vacíos,
en realidad podemos omitir este segundo argumento,
y solo llama con 20,
y luego el resultado va a ser el mismo.
Entonces, después de eso, agreguemos la marca de verificación.
Y así aquí, ahora tenemos que volver
o para registrar una cadena de plantilla, que contendrá todo eso.
Así que aquí está el emoji, y sí, está bien, es el camino a seguir aquí.
Y entonces esta debería ser casi ahora la solución correcta.
A ver, vale.
Ahora todos los emojis empiezan en el mismo lugar,
pero ahora, todo lo que tenemos que hacer es agregar aquí,
tres, cuatro y cinco.
Y por eso,
vamos a utilizar el índice actual en cada iteración.
Ahora recuerda cómo podemos obtener acceso
al índice actual en el bucle for of.
Así que estamos recorriendo una matriz aquí,
y así obtener el índice actual,
necesitamos usar las entradas
de la matriz, ¿recuerdas eso?
Así que decimos, entradas, y luego aquí,
la fila ahora es en realidad una matriz con primero el índice,
y luego segundo, el elemento real.
Entonces, desestructuramos eso aquí, de inmediato,
donde I es el índice,
y la fila es entonces el elemento real en sí.
Y luego aquí, podemos usar ese índice
para básicamente repetir esta cadena.
Así que ya ves, esto es mucho trabajo.
y es todo un reto de nuevo.
Así que no esperaba que realmente hicieras esto por tu cuenta,
al menos no de una manera muy rápida.
Tal vez te tomaste un tiempo, y luego lo lograste,
y entonces eso es realmente genial.
Pero de todos modos, es muy bueno desafiarte a ti mismo.
y llévate al límite tú también.
De todos modos, aquí, ahora tomamos esta cadena,
y luego en esa cadena llamamos repetir,
tal como lo hicimos antes con los aviones.
Y luego queremos en la primera iteración,
y ese será tu cero más uno,
porque siempre necesitamos sumar uno porque comienza en cero.
Así que guárdelo, pegue todas las variables aquí.
Y sí, esa es la solución, eso es increíble.
Agreguemos otro aquí.
Mostrándonos SCH, y veamos.
Y de hecho, ahora también es en caso de camello,
y con seis emojis de acuerdo aquí.
Así que este de aquí es de la vez anterior,
así que cada vez que hacemos clic en el botón,
por supuesto, esto se registrará aquí.
Bien, entonces eso es todo aquí.
Asegúrate de que realmente entiendes
cómo funcionan las cadenas en JavaScript.
Puede revisar esta conferencia y las últimas tres conferencias,
y si quieres aún más ejercicios de cuerdas,
puedes avisarme en la sección de preguntas y respuestas,
y luego puedo dártelos.
De todos modos, eso es todo por ahora, te veo en la próxima.