Curso intensivo de Javascript: notas de IA línea por línea

1. ¡Te damos la bienvenida al curso!: Hola ahí. Bienvenido a mi curso cruzado Java Script. Y esta clase cubrirá los conceptos básicos de JavaScript, incluyendo variables, funciones, matrices, objetos y manipulación de presas. Este curso es perfecto para principiantes o cualquier persona que busque refrescar sus habilidades. No se necesita experiencia previa en Javascript, solo una comprensión básica de HTMO medida que avanzamos por cada línea de código, también obtendrás explicaciones detalladas a través de diapositivas que generé que desglosan todo lo que necesitas saber sobre cada línea de código y el curso. Al final de este curso, podrás construir una sencilla aplicación web interactiva y mostrar tus nuevas habilidades con confianza. Listo para sumergirse. Empecemos. Nos vemos en la primera lección. 2. Introducción y configuración: T. Bienvenido a este video de introducción, donde voy a presentarte JavaScript. Vamos a aprender a declarar variables, funciones, trabajar con objetos, encuestas, y al final, vamos a tener un ejemplo sencillo de manipulación dom. Entonces, después de pasar por todos estos temas, necesitamos configurar el entorno de desarrollo. Primero, hay que descargar el código VS, el editor de código, llamado VSCode Puedes ir a tu navegador y navegar a esta UDL. Código dosual study.com, descarga de barra diagonal. Y luego puedes descargar código VS basado en tu sistema operativo. Después de descargar e instalar el código vis en su sistema, puede abrirlo, y antes de escribir cualquier código, necesitamos instalar una extensión que nos ayude en nuestro viaje de desarrollo. Entonces puedes ir aquí a la sección de extensiones. Y busca extensión de servidor en vivo. Todo bien. Esta es la extensión que estoy buscando. Ya lo tengo instalado, así lo puedes instalar. Y una vez que hagas eso, puedo tener este botón aquí mismo que dice ir a vivir No lo hagas clic ahora mismo. Antes de hacer eso e ir en vivo y ejecutar el servidor, usando esta extensión, es necesario crear un archivo HTML de punto índice. Puede hacer clic en este botón aquí mismo y crear un nuevo archivo HTML de punto índice. Ya lo tengo ahí. 3. Javascript: variables, funciones, matrices, objetos y manipulación de DOM: Ahora al lado del índice al archivo HTML, es necesario crear la estructura HTML básica de una página web. Después de eso, puedes ejecutar el servidor. Empecemos con nuestro código. Lo primero que necesitamos tener en una página HML es el elemento dog type, escribir dog type, y luego configurarlo en HTML Así. Tengo tipo por allá. Perro tipo HML. Si quieres conocer más sobre este elemento, puedes consultar esta diapositiva aquí mismo. Como dije, al principio, cada línea de código tiene una diapositiva de información que contiene información sobre esa línea de código en particular. Entonces después de esa línea o después de ese elemento HTML, vamos a tener el elemento HTML aquí, Escribe la etiqueta de apertura. Esto se llama etiqueta abierta, y esta es la etiqueta de cierre de un elemento. Y aquí dentro de los signos mayores y menos, vas a tener el nombre de ese elemento. En este caso es HTML. Nuevamente, puedes conocer más sobre este elemento en las diapositivas aquí mismo. Ahora, dentro de este elemento, lateral la apertura o entre las etiquetas de apertura y cierre, va a tener nuestros elementos de página o nuestra estructura de página. Entonces en cada página, vamos a tener un elemento head dentro de la cabeza, podemos poner información sobre la página como add title, title element, el title de la página. Voy a decir algo como introducción a Javascript, introducción. Después de la cabeza, vamos a tener el elemento cuerpo. Nuevamente, abriendo y cerrando etiquetas. Todo bien. Ahora vamos a presentarte los fundamentos de Javascript. Ahora, para escribir código JavaScript, necesitamos un elemento HML que se llame script like cell Dentro de las etiquetas de apertura y cierre de este elemento script, puede tener nuestro código script Java. Lo primero que vamos a aprender es a declarar variables. Podemos declarar variable constante está usando la palabra clave constant así. Por ejemplo, declaremos una variable Pi y fijemos su valor 3.14 o sin ninguna unidad, 3.14 Esta es una constante, lo que significa que no puede cambiar. La variable constante no puede cambiar. Ahora bien, si quieres tener una variable que se pueda cambiar, y lo que quiero decir se puede cambiar es que, por ejemplo, aquí, puedo tener Pi, y luego restablecer su valor a, por ejemplo, cinco. Esto no está permitido, y no va a funcionar. Actualmente, aquí nada sale mal. No tenemos ningún error, pero en realidad, Javascript no te permitirá hacer esto. Para hacer eso para una variable, hay que usar la palabra clave let y declarar la variable, por ejemplo, aquí, la variable mess message. El masaje se puede cambiar, así que usamos la palabra clave let y vamos a establecer su valor inicial en, por ejemplo, hola JavaScript. Ahora, como dije, esta variable se puede cambiar. Puedes ir aquí y cambiar su valor a por ejemplo, Cómo hay. Ahora bien, esto es para variables. A continuación, vamos a tener información de registro o registro a la consola. La consola, si no sabes cuál es la consola, es nuestra consola de navegador. Actualmente, no ejecutamos el servidor, así que voy a hacer eso. Así que haga clic en presionar el botón aquí, Go Live, y se iniciará un servidor, servidor en vivo en su sistema local. Y una vez que estés aquí, asegúrate de abrir el inspector, Y entonces, este es el abogado. Ahora, lado aquí, ¿puedo tener un lugar donde podamos imprimir información? Por lo general, este consejo se utiliza con fines de depuración, ya sabes, para abordar algunos errores o para encontrar información sobre el código que estamos ejecutando Así que sólo voy a mostrarte en vez de hablar. Voy a consolar las variables que hemos declarado. Puede consolar la variable Pi. Así que usa el objeto console, y luego dentro de este tema, tenemos muchos métodos útiles. Y uno de ellos es el método log. Aquí puedes registrar cualquier variable o cualquier dato que desees. Se puede registrar la variable Pi. Y entonces voy a salvar esto. Ahora bien, si voy a nuestro navegador lado la consola, se puede ver que tenemos el valor de la variable Pi. Ahora sigamos adelante y veamos el valor de nuestra variable de mensaje. Como puedes ver aquí, declaramos que el valor inicial de la variable message es hola Javascript, pero luego lo reasignamos con otro valor, hola ahí Entonces nuevamente veo ahora es valor final. Como puedes ver, es hola ahí. Entonces, al cambiar el valor de una variable lead, estás reemplazando realmente el valor de la variable. Esto es para el registro de consola. Ahora pasemos a ver las funciones. Ahora, son funciones alar. Vamos a usar la palabra clave function. Vamos a nombrar a esta función saludar. Y esta función va a recibir un argumento. Los argumentos se pueden colocar dentro de dos paréntesis de la función después de la función name allí mismo Estos son dos paréntesis. Y este es el nombre del argumento. Entonces esta función get va a saludar a una persona usando su nombre. Por eso tenemos ahí un nombre de argumento. Dentro de esta función, use el registro de la consola así, y la consola registre el nombre. Todo bien. Ahora bien, si guardo esto, no pasará nada. Porque tenemos que ejecutar la función. Para ello, llamamos a la función, y agregamos dos paréntesis como S. Ahora, pasando el argumento name Por ejemplo, James, vuelve a guardar, ya ves que tenemos a James. En realidad, esta función así saludar a James en este caso. Voy a quitar el registro de la consola de ahí. Y reemplazarlo por la palabra clave return, agregando una cadena literal, que nos ayudará a inyectar algún código javascript. G para verlo en tan solo un minuto. G para saludar. Vamos entonces va a inyectar unas variables avascr usando el signo de dólar y dos llaves así, y aún dentro de la Ahora dentro de aquí, podemos pasar las variables que queramos. En este caso, voy a pasar en el argumento name, que también es una variable. Ahora, voy a guardar esto porque quitamos el registro de la consola de aquí. Ahora no podemos ver el resultado de la función de Creta. Entonces necesitamos poner la función crit dentro de un registro de consola. Así que escribe el registro de la consola, y luego ejecuta la función Crete, córtala desde ahí y ejecútala dentro los dos paréntesis de la función log, así Si guardo esto, van a ver el resultado de llamar a la función de saludo, que es hola James. Eso es todo para funciones en JavaScript. Ahora pasemos a otro tema. Después de funciones. Trabajemos o aprendamos a trabajar con objetos. Ahora, para declarar un objeto, mientras que los objetos se pueden asignar como valores para variables. Podemos declarar una variable, una variable constante usando la constante Qard Por ejemplo, nombra a esta persona variable. Ahora, podemos asignar el valor de esta variable constante a un objeto. Los objetos son una excelente manera organizar información o datos. si quieres conocer más sobre los objetos, puedes consultar las diapositivas aquí mismo. Antes de guardar esto, voy a comentarlo diciendo declarando un objeto ¿Correcto? Voy a salvar esto. Ahora dentro de este objeto, va a tener propiedades. La primera propiedad es la propiedad de primer nombre. Estas son propiedades personalizadas, por lo que puedes nombrarlas como quieras. Ahora, en lugar de establecer el valor de esta propiedad usando un signo igual como tal, usamos collins para establecer un valor en una propiedad de objeto. Ahora, después de la col, vamos a tener el valor de la propiedad de primer nombre, establecido en James. Entonces podemos agregar tantas propiedades como queramos a este objeto, pero tenemos que separar entre propiedades usando una coma, así Entonces vamos a tener propiedad de apellido, y vamos a establecer su apellido en Wilson. Otra coma ahí mismo y establecer la propiedad H en 13, Todo bien. E incluso los objetos pueden tener propiedades establecidas en una función. Entonces las propiedades son como variables, pero, ya sabes, la declaración de estas propiedades difiere de las variables habituales en el script Java. Entonces para declarar una función o un método dentro de este objeto, Primero, escribes el nombre de esa función, por ejemplo, nombre completo, igual que cualquier otra propiedad. Pero el valor de esta propiedad va a ser una declaración de función. Podemos declarar una función usando la palabra clave function, así. O en realidad, incluso podemos usar forma más avanzada de declarar funciones. En lugar de usar la palabra clave function, podemos usar la estructura de la función arrow. Entonces solo escribes dos paréntesis así, abriendo y cerrando, y luego agregas una flecha creada por un signo igual en un signo mayor y asegúrate de que no haya espacios entre ellos. Esta es una función de flecha. Luego agrega dos llaves donde se va a ejecutar el código de esta función Sitio esta función, va a usar la palabra clave return, va a devolver una cadena literal y va a inyectar este nombre. Esta palabra clave se refiere a esta persona objeto. Si quieres que la consola registre esta palabra clave, vas a tener todo este objeto impreso en la consola. Entonces, estamos seleccionando este objeto actual usando esta palabra clave dot first name, así que estamos accediendo al nombre de propiedad del objeto person. Entonces voy a tener el nombre de pila, y luego voy a acceder también al apellido. Entonces este punto apellido, va a agregar rizo ahí. Todo bien. Ahora voy a salvarla. Y ahora veamos estas propiedades impresas en la consola. Voy a acceder a nuestras propiedades y métodos de objetos, y voy a imprimirlos usando el método de registro de consola. Por lo tanto, el registro de la consola puede seleccionar el objeto persona y va a acceder a la propiedad de primer nombre. Ahora dentro del navegador, se puede ver aquí mismo dice James. Entonces la última salida allí se refiere a la línea número 35, que es nuestra línea de orientación donde existe este registro de consola. Todo bien. Vamos a tener otro registro de consola, donde vamos a ejecutar nuestra función de nombre completo. Podemos hacerlo simplemente, tal como llamamos una propiedad. Así que ve a propiedad de nombre completo. Pero esta vez, vamos a agregar dos paréntesis, así como ejecutamos una función y segura Y la última salida, dice indefinido definido. Ahora bien, por qué conseguimos esto. Esto es lógico y debería ser así porque estamos usando la sintaxis de la función aro. Y la función o no tiene esta palabra clave. Así que regresa a nuestra declaración de función básica usando la palabra clave function. Retire el oral de ahí, y eso es todo. Voy a salvar esto. Y eso es todo. Así que asegúrate de cambiar eso a la declaración de función, así. Ahora si vemos los resultados, ¿puedo ver a James Wilson sacarlo ahí mismo en el navegador de la consola? Todo bien. Ahora, continuemos. Después de trabajar con los objetos, sigamos adelante y trabajemos con matrices. Entonces, ¿cómo declarar una matriz? Nuevamente, declaramos una variable primero, y vamos a nombrarla frutas en conjunto igual a una matriz vacía. Es así como podemos declarar una matriz con corchetes, abriendo y cerrando corchetes. Entonces esta es una matriz vacía en este momento. Para que no esté vacío o para agregar algunos datos a esta matriz. Podemos agregar los datos a esta matriz en forma de elementos, elementos separados usando una coma, ahí mismo Puedes agregar cadenas, números, lo que quieras. Aquí voy a agregar cadenas, nombres de frutas como manzana, plátano y cereza. Todo bien. ¿Puedo guardar esto? Y ahora, sigamos adelante y accedamos a los elementos o elementos de la matriz. ¿Puedo usar el registro de puntos de la consola para ver el elemento de la matriz en la consola? Y voy a seleccionar el primer elemento de esta matriz. Entonces agrega el nombre de la matriz, y luego agrega corchetes, así como así, dentro del corchete, tienes que ingresar el índice del elemento. En arrays, comenzamos con cero como índice del primer elemento. Entonces empezamos a contar en la programación en general, empezamos a contar desde cero, cero, uno, dos, 34. Apple tiene el índice cero. Entonces si guardo esto, vamos a ver que tenemos a Apple rentado en la consola. Derecha. Si quieres conseguir plátano, puedes pasar en el índice número uno. Y ahí tienes. Plátano. Ahora, continuemos. También podemos consolar el registro de toda la variedad de frutas. Así que pasa en frutas así, voy a tener matriz ahí mismo. Con los tres elementos. Gas. Estos son el índice índice número cero, se refieren al elemento manzana número uno al plátano a la cereza. Tienes aquí la propiedad de longitud, igual a tres. También puede imprimir la longitud de una matriz usando Well, usando la propiedad o contras a lo largo de longitud de la propiedad, tan simple como eso Ahí dentro, vas a tener tres. Y esta es la longitud de la matriz de frutos. Todo bien. Continuemos ahora, y vamos a trabajar con algunos métodos de matriz. Permítanme agregar un nivel de comentario digamos usando métodos de matriz, usando métodos de matriz. Vamos a comenzar con el primer método. Primero, vamos a tener que usar la matriz de frutas. Y vamos a llamar, como puedes ver aquí, VSCode nos ha dado pistas o sí pistas sobre todos los métodos de array que se pueden llamar o usar en una Cada matriz tiene el mismo conjunto de métodos. Esta vez, voy a usar el método pop. El método pop elimina el último elemento. En este caso, va a quitar este elemento aquí mismo. Entonces si llamo al método pop, así, Muy bien. Y para ver el resultado, voy a usar el registro de consola. Déjame desplazarme hacia arriba, y voy a consolar registrar la matriz de frutas. Entonces este método pop, sobrescribirá la matriz Así podremos consolar log la matriz de frutas, y podemos ver que solo tiene dos elementos, manzana y plátano. Por lo que se ha eliminado el último elemento. Entonces, ya sabes, ten cuidado de usar este método porque anulará el valor inicial de la matriz. Ahora, el segundo método es un método que nos ayudará a mirar a través de cada elemento de la matriz. Este método es llamado para cada uno. Ahora bien, esta función, aceptará una función callback como argumento Entonces puedes pasar en declaración de función, puedes declarar función así aquí, pero sin nombre. Asegúrate de no usar para no nombrarlo porque es solo una función de devolución de llamada de un método Se ejecutará cuando ejecutemos el código. Aquí, puedes usar la palabra clave function, o creo que es el momento de usar el Aerosyntax Ahora bien, este método, obtendrá dos argumentos, el ítem de la matriz, por lo que recorrerá su ítem aquí, lo nombro fruta. Y cada vez que lo hará, ya sabes, el argumento de la fruta va a tener el valor de uno de estos elementos, va a mirar a través de cada uno de ellos en orden. Entonces el segundo argumento es el índice de ese elemento dentro de la matriz. Ahora, dentro de aquí, podemos contras registrar el índice del elemento. Eso es un colon. Por cierto, puedes usar el signo más para concatenar cadenas y números juntos Después de la llamada, vamos a tener el nombre fruit fruit o el elemento fruit array. Ahora, voy a salvar esto. En el navegador, puedes ver que imprimieron los elementos de nuestro array. El índice cero se refiere al elemento manzana. Tenemos aquí Indexar un plátano. Espero que hayas visto como funciona la función d f d. L et me acaba de verificar si el navegador está en su lugar. Todo bien. Bien, ahora vamos a continuar. Para aprender para cada uno aquí, vamos a aprender a crear una matriz de objetos. Entonces eso es muy útil para organizar nuestros datos. Voy a usar la variable lead aquí, y voy a declarar una constante o variable lead con el nombre students, can para establecer su valor en una matriz así como esta, y decidir esta matriz vamos a tener un objeto. Este objeto va a tener una propiedad. El primer nombre, el nombre del primer alumno es Alice, también puede tener una propiedad de edad establecida en 20. Ahora puede agregar más objetos. Permítanme ajustar esta matriz para hacerla más visible. Va a separar entre elementos de matriz o elementos usando una coma Es lo mismo incluso con elementos objeto. Agrega la coma ahí en el segundo objeto, el mismo nombre de propiedades para este va a ser Bob Va a tener una S 22. Y el último objeto, va a tener el mismo nombre de propiedades para éste, va a ser Charlie, y va a establecer la edad 223. Derecha. Esta es una matriz de objetos. Ahora, podemos mirar a través cada objeto nuevamente usando el método for, pero en la matriz students. Entonces escribe estudiantes F. Voy a imprimir el nombre de cada alumno y H. Así que si crees que eres capaz de hacer esto por tu cuenta, puedes seguir adelante y probarlo. Entonces F, va a agregar una función de flecha como una función de retroceso. Y esta función negra va a conseguir al alumno. Y puedes agregar el índice o simplemente, ya sabes, no necesitas agregarlo ahí mismo. Entonces tenemos a los alumnos. Eso es lo que nos importa. Y lado aquí, va a usar de nuevo el registro de la consola. Lo siento por eso, Consol dot log. Y voy a tomar el argumento estudiantil. Y no olvides que el argumento estudiantil aquí mismo representa un objeto. Así que estamos recorriendo cada objeto en esta matriz. Y cada objeto tiene propiedades, nombre y edad. Entonces voy a consel registrar la propiedad name, como pueden ver, código VS nos dio las propiedades de este objeto estudiante Nombre. Y luego lo voy a concatenar con una cadena que dice es con el espacio aquí en el espacio frente a él, luego agregar otra información sobre el alumno, que es la edad Y después de la edad, voy a decir años. Bien. Ahora en el navegador, como puedes ver, imprimirá toda la información sobre nuestro pero no lo hizo. No sé por qué dice que 823 no está definido. Yo hice un tipo de ahí, perdón. Entonces necesitas agregar una columna ahí. Bueno, tengo que hacer eso. Ahora puedes ver el resultado. Tenemos tres elementos o tres estudiantes dentro de esta matriz, y hemos impreso tres cadenas o tres frases sobre estos estudiantes o la introducción de estos estudiantes. Todo bien. Ahora sigamos adelante. Y esta vez, vamos a aprender a usar métodos de objeto con arrays. Entonces después del método cuatro. Voy a declarar otra variable lead, ponerle nombres, y vamos a tomar el array student y usar otro método llamado map. El método map es igual que el método four H, pero con una diferencia simple, que es que la función map va a devolver una matriz y va a ser asignada al valor de esta variable. Entonces sigamos adelante y veamos eso en acción. Paso en una devolución de llamada usando la sintaxis aro. Este también va a obtener el alumno o el elemento array y el índice. Voy a poner ahí el índice, pero no lo vamos a usar. Dentro de esta co parte posterior de la función de mapa. Vamos a regresar, y estamos obligados a usar la declaración de devolución aquí mismo Voy a devolver el nombre del punto del estudiante. Esto creará un Uwara con sólo los nombres de los alumnos. Y se puede ver eso apenas un segundo. Voy a decir esto y fuera de la función map, voy a usar Csle dot log y Csle log la variable names Ahora, en el navegador, se puede ver claramente la matriz con solo Alice Bob, Charlie, que son los nombres de nuestros alumnos. Así que hemos creado una matriz completamente nueva con solo el nombre del alumno. Así es como puedes modificar arrays, y en realidad, la función map es muy importante en Java Script, y puedes hacer muchas cosas con ella. Entonces ahora llegamos a la parte final de esta lección, que es la manipulación dom. Entonces voy a agregar un comentario aquí y decir, manipulación Dm. ¿Puedo comenzar seleccionando elementos de nuestra página HTML? Sigamos adelante y agreguemos algunos elementos HTML dentro de nuestro cuerpo. Fuera del guión se pueden añadir algunos elementos como un título o nuestra página. Uh, podemos agregar el título usando H un Elemento. Voy a darle un argumento o atributo ID, voy a poner su ID a título. Voy a decir aquí, un script Java de ley. Todo bien. Después de la H un elemento, va a tener un elemento botón con etiquetas de apertura y cierre. No se olvide de eso. Vamos a tener un ID en este ID, por ejemplo, cambiar el botón Título. Este botón va a ser el encargado de cambiar el título. Aquí, puedo decir cambio de título. Todo bien. Ahora les estamos dando ID porque queremos seleccionarlos usando JavaScript y seleccionar un elemento específico dentro de nuestro cuerpo. Necesitamos un identificador único. Por eso estamos usando el atributo ID. Entonces, ¿puedo tener un elemento DIF? Nuevamente, puedes conocer más sobre estos elementos dentro de estas diapositivas. Entonces, ¿puedo agregar un ID para este contenido dF? Eso es. Puede tener solo tres elementos, H uno, un botón, un botón y un desarrollo. Ahora, debajo de aquí, ¿puedo empezar a manipular nuestra cúpula? ¿Puedo seleccionar ahora el elemento title, una constante particular, y nombrarlo elemento title? Y vamos a acceder al documento de la página o al documento de la página, y vamos a utilizar un método llamado get element by ID. Y va a conseguir el título, que tiene el título de identificación. Bueno, va a pasar en el título de identificación. Todo bien. Después del título, ¿puedo seleccionar nuestro elemento de botón? Documentar, obtener elemento por ID, y el ID de nuestro botón es contenido. Por último, seleccione en realidad, no. El botón no tiene el ID de contenido, pero tiene el botón ID cambiar título. Está escrito de la misma manera. Puedo copiarlo de aquí y pegarlo solo para asegurarme de no obtener ningún error. Ahora, después del elemento button, va a seleccionar el elemento content. Voy a usar document dot get element by ID, el ID del elemento content es content. Ahora después de seleccionar nuestro elemento. Ahora, queremos cambiar el contenido de texto del elemento title. En realidad, tenemos que cambiar el título. Seleccione el elemento title y acceda al contenido de texto de ese elemento y cámbielo para darle la bienvenida a Java Script. Script Java. Si guardo esto. Ahora, sí, me olvidé de cerrar la consola. Puede ver aquí que ha cambiado para dar la bienvenida a Java Script. Si elimino esta línea y vuelvo a guardar, para volver a su valor inicial, que es hola Javascript. Ahora bien, si devuelvo la línea de código, volverá a cambiar para darle la bienvenida a Java Script. Ahora, continuemos. Incluso podemos agregar un oyente de eventos a cualquier elemento, pero en este caso, vas a agregar un oyente de eventos al elemento button Entonces voy a seleccionar el elemento button y agregarle el oyente de eventos. Este método de escucha de eventos aceptará el nombre del evento Este caso es click. Vamos a escuchar el evento click. Voy a cerrar eso. Y vas a tener una devolución de llamada. Dentro de esta devolución de llamada, vamos a cambiar el contenido del elemento title De nuevo, sec título elemento texto contenido propiedad establecer en título cambiado. Título cambiado con un signo de exclamación. Todo bien. Ahora, puedo probar esto en el navegador. Si hago clic en cambiar título, cambiará a Cambio de título . Todo bien. Voy a agregar más funcionalidad a este evento click. Va a seleccionar el elemento de contenido que hemos declarado aquí. Y voy a cambiar el valor interior de la propiedad HML Este HML interno aceptará elementos HML. No es como el contenido del texto. Entonces te voy a mostrar en acción. Va a agregar una cadena literal. Dentro de esto, déjame guardarlo. Lado aquí, va a tener elementos AML, el elemento P, que hacen referencia al elemento párrafo Y vamos a agregar el párrafo, y vamos a llamar a la función grite que aquí mismo hemos declarado Sí, ahí mismo. Tenemos la función grite, que acepta un argumento name y devuelve el saludo Todo bien. Ir a pasar en el nombre. Por ejemplo, estudiante, por ejemplo. Sí. Pongamos a tu alumno. Diré, por ejemplo, o en realidad, va a decir exactamente hola estudiante. Vamos a salvar esto. Y si vuelvo aquí, clic en cambiar título, se puede ver que el título ha cambiado, y tenemos aquí hola estudiante sobre el desarrollo de contenidos. Todo bien. Podemos agregar más a este código. Podemos tener un párrafo y otro párrafo, si queremos. ¿Puedo decir algunas de tus frutas favoritas y podemos pasar o podemos usar la variedad de frutas Y vamos a usar el método join. Entonces el método join va a unir todos los elementos del array, y aceptará el separador entre estos elementos. Así podemos separarlos usando un coma. Los unirá a todos como una cadena. Devolverá todos ellos como una cuerda. Entonces voy a salvar esto. Antes de que estés corriendo o viendo los resultados, vamos a agregar el párrafo final. Nuevamente, si no estoy explicando las cosas lo suficientemente bien, puedes revisar las diapositivas ahí mismo. Así que va a sumar estudiantes coreanos. Alumnos y van a ir a la matriz de nombres y unir todos los objetos y separarlos con una coma Todo bien. Ahora, dentro de nuestro navegador. Podemos dar click aquí, cambiar título, y podrás ver los tres párrafos o tres frases. Primero dice, Hola estudiantes. Aquí, algunas de tus frutas favoritas son la manzana y el plátano. Tenemos sólo tres porque hemos utilizado el método pop, que sobrescribe el valor de la matriz ¿Correcto? Ahora, también tenemos esta frase que dice estudiantes coreanos, Alice, Bob y Charlie. La matriz de nombres que hemos declarado aquí mismo, usando el método map.