Javascript para principiantes: una guía práctica para dominar los conceptos básicos con proyectos

1. Introducción al curso: Oye, ahí. Bienvenido a las partituras en JavaScript para Absolute Bgners Y estoy encantado de guiarte a través del viaje al mundo de JavaScript, que es uno de los lenguajes de programación más esenciales y populares cuando se trata de desarrollo web Ahora, hablando de JavaScript, JavaScript está en todas partes. Impulsa sitios web dinámicos, aplicaciones interactivas e incluso backend hoy Ya sea que seas nuevo en la programación o estés buscando mejorar tus habilidades, este curso está diseñado para brindar una experiencia de aprendizaje práctica bigna amigable para ayudarte a dominar Javascript desde cero ¿Quién soy yo? Soy facil, un emprendedor experimentado y un educador que está dispuesto a compartir contigo los conocimientos que he adquirido en todas mis carreras Entonces comencemos a hablar de lo que vamos a cubrir. Entonces cubriremos primero los conceptos básicos de JavaScript, donde entenderemos qué es Jascript, dónde se usa, cómo se puede usar y configurando el entorno y todo Después descubriremos los fundamentos de JavaScript, donde hablaremos de variables, operadores, expresiones, arrays, objetos, y todo Entonces aquí es donde aprenderemos sobre los bloques de construcción de JavaScript. Y luego haremos proyectos prácticos en que reforzaremos todos los aprendizajes que hemos tenido hasta ahora y construiremos un par de proyectos para entender cómo funcionan las cosas cuando pasas del ambiente de aprendizaje al del entorno basado en proyectos Al final de este curso, tendrás una base sólida de JavaScript, lo que te permitirá crear con confianza aplicaciones web interactivas y páginas web y continuar tu viaje de codificación Ahora bien, este curso es perfecto para desarrolladores de todos los niveles. Entonces si eres un principiante, que está buscando simplemente explorar JavaScript y que está buscando aprenderlo de una manera muy estructurada paso a paso, y también es para desarrollador de nivel intermedio y avanzado que busca obtener un repaso de algunos de los conceptos básicos de JavaScript. Entonces puedes seguir este curso porque no hacemos mucho uso de diapositivas en este curso. Me encanta enseñar en el ID en sí, y creo que a los ingenieros de software les encanta trabajar en IDE y hacer las cosas lo que están aprendiendo. Entonces, ¿estás listo para dar tu primer paso en el mundo de JavaScript? Yo soy. Vamos a sumergirnos y empecemos a codificar juntos, y te veré dentro del curso. 2. JavaScript en acción: Entonces ahora lo que vamos a hacer es que vamos a ver JavaScript en acción. Entonces lo que recomendaría es abrir el navegador de su elección. Estoy aquí en Google Chrome. Incluso puedes hacer uso de Frefox si así lo deseas. Simplemente haga clic derecho, diríjase a inspeccionar. Y aquí tendrás la opción de abrir la consola. ¿Bien? Puedes redimensionarlo de la manera que quieras Ahora, esta consola es la consola del navegador, que está incorporada, y aquí es donde podemos ejecutar nuestras sentencias JavaScript. Entonces, por supuesto, la primera declaración que vamos a ejecutar por aquí es el registro de puntos de consola. Se puede ver el Auto sugerir, y voy a decir hola mundo. Bien. Algo como esto. Bien, voy a hacer W caps y por aquí, voy a presionar a Endo. Puedes ver que Hello World se está imprimiendo en la Consola. ¿Bien? Entonces, si quieres imprimir cualquier cosa en la consola, puedes hacer uso de esta instrucción console dot log, y es una parte de Ja Script. Incluso podemos imprimir más por aquí. Entonces puedo decir Console dot Log, y puedo decir, me encanta Jascript Bien, algo como esto. Entonces esto me va a dar esta salida, que es que me encanta. Bien. Debería haberlo cerrado con un solo código, y verás la salida. Me encanta JavaScript, ¿de acuerdo? Entonces lo abrí con código único e intenté cerrarlo con código doble. Por eso el error, ¿de acuerdo? Pero el tratamiento funciona absolutamente bien. Me encanta el guión de jar. ¿Bien? Incluso puedes hacer uso de esta consola como calculadora. Entonces puedes decir dos más cuatro y verás seis salidas ST 16 más 16. Verás salida 32 SE. Por lo que se puede utilizar como calculadora. Incluso puedes hacer uso de la consola para mostrar cajas de alerta o cajas desplegables. Y debes haber visto muchas cajas pop up de alerta al hacer uso de estas aplicaciones web. Entonces déjame mostrarte cómo puedes desencadenar eso. Primero borraré la consola de mi navegador usando esta función clear. ¿Bien? Todo está despejado, o incluso puedes hacer clic derecho y decir claro Consola. Bien, eso también debería hacer el trabajo. Ahora aquí, voy a traer una caja de alerta. Entonces puedo decir alerta por aquí. Bien. Y puedo decir que esta es una caja de alerta. Bien. Ahora necesito cerrar esto y si presiono Enter, verás que este es un cuadro de alerta. Ahora, sea cual sea el mensaje que escribas o el mensaje que añadas por aquí. Se trata de una nueva caja de alerta. Déjame ver. Bien Déjame hacer nuevas tapas finales. Bien. Verás que esto entra como. Aquí en el Pop. Entonces, cualquier mensaje que estés pasando por aquí, viene por aquí. Entonces sí, así es como puedes ejecutar algún código Jascript en tu navegador web, y estas fueron algunas de las declaraciones Jascript que tenemos 3. Obtén las herramientas de software: Oigan, ahí, todos. Entonces, para ejecutar JavaScript, vamos a hacer alguna configuración en nuestra máquina local, ¿verdad? Ahora, por supuesto, puedes ejecutar JavaScript haciendo clic derecho así en el navegador y dirigiéndote a la consola y escribiendo tratamientos JavaScript por aquí. Pero esto no es lo ideal si quieres escribir scripts largos y grandes para aplicaciones web de grado de producción. Ahora, aquí es donde necesita una configuración en su máquina local. Entonces lo que vamos a hacer es que vamos a hacer uso de un IDE. Si no estás al tanto de este término IDE, significa entorno de desarrollo integrado, que te da el conjunto de herramientas para escribir código y ejecutarlo. Entonces voy a buscar código de Visual Studio porque eso es lo que vamos a hacer uso. Ahora bien, si ya tienes un código de Visual Studio instalado en tu sistema, o si eres consciente de cómo instalarlo, bueno y bueno. Pero voy a suponer que no lo tienes instalado en tu sistema para beneficiar a los alumnos que no están al tanto de este proceso. Así que voy a dirigirme a este sitio web en particular, code.visualstudio.com ¿Bien? Un poco de Zoom in. Ahora, aquí, la captura de pantalla que ves es cómo se ve el código de Visual Studio, ¿de acuerdo? Y puedes ver, hay un resaltado de sintaxis que puedes ver. Por lo que la interfaz se está resaltando en un color diferente. Los apoyos de botón se están resaltando en un color diferente. Entonces estos son todos los beneficios del IDE, ¿de acuerdo? Se puede ver la bonita estructura de la carpeta en el lado izquierdo. Debajo hay un terminal con toda la codificación de colores y todo eso. Ofrece una gran cantidad de beneficios al desarrollador. Entonces, si te desplazas hacia abajo, puedes ver los soportes de código de Visual Studio. Como estoy grabando este video, soporta tantos lenguajes de programación, ¿de acuerdo? Incluso puedes agregar extensiones. Ahora bien, ¿qué son las extensiones? Las extensiones básicamente extienden o extienden la capacidad que el código de Visual Studio tiene por defecto en él. ¿Bien? Entonces, si quieres agregar algo de soporte para Python, ¿bien? Así que más soporte para Python. Para que puedas agregar esta extensión. Si quieres agregar soporte para GeucPiloto quieres hacer uso de IA mientras programas, puedes agregar Get up Copilot CC Puedes ver que hay toneladas de extensiones, y hay un mercado de extensiones desde donde puedes descargar e instalar todo esto, y es gratis. Se puede ver Git up copiloto, un poco de. Entonces todo está resaltando diferentes características. Puedes personalizar los temas de color, ajustes, perfiles. Hay muchas cosas, ¿de acuerdo? Tiene muy buena integración con el sistema de control de oción y todo eso ¿Bien? Así que puedes echar un vistazo a este sitio web y puedes navegar a través de lo que tiene para ofrecer. Pero si te desplazas hacia arriba en la parte superior, aquí vas a ver este botón de descarga para Windows, ¿bien? Ahora, si estás en Mac o Linux, vas a ver la opción de descarga para tu sistema operativo apropiado. O si no estás viendo por alguna razón, puedes ir a otras plataformas y puedes ver qué plataformas son soportadas aquí. ¿Bien? Entonces ya tengo el código de Visual Studio instalado en mi sistema, así que no lo voy a instalar, pero la instalación es muy sencilla. Es como cualquier aplicación que instales en el sistema. No hay una configuración compleja que tengas que hacer incluso para Mac, es más fácil, y puedes ver por aquí, hay múltiples versiones como si estás haciendo uso del chip Intel, puedes instalar esta. Apple Silicon, tienes esta de aquí. Y también para los sistemas basados en Linux Ubuntu por aquí, tienes opción de descargar e instalar. ¿Bien? Ahora definitivamente tengo esto instalado en mi sistema, ¿de acuerdo? Entonces aquí, lo tengo instalado como pueden ver. ¿Bien? Entonces, si lo instalas y lo abres por primera vez, esto es lo que vas a ver. Así es como te va a mostrar. Tu opinión puede diferir un poco porque ya soy usuario de código de Visual Studio, así que estoy viendo los proyectos recientes que he usado. Así que voy a cerrar esto, ¿de acuerdo? Y aquí me está preguntando eso, Oye, aún no has abierto ninguna carpeta. Sí, puedes abrir carpetas aquí en la barra lateral izquierda, y te va a mostrar la estructura del árbol. Puedes crear archivos y administrarlos desde aquí mismo, o incluso puedes clonar un repositorio. Y como dije, tiene una muy buena integración con los sistemas de control Git of Ocean. Para que puedas hacer uso de eso también. ¿Bien? Ahora bien, lo que les pediría a todos es simplemente dirigirse a su estructura de carpetas y crear una carpeta, cuando vayan a practicar Jascript ¿Bien? Entonces esta es mi carpeta donde voy a practicar Ja Script, ¿de acuerdo? Y solo abre esta carpeta por aquí en el código de Visual Studio. Abre la carpeta, puedes decir carpeta abierta y puedes navegar hasta la carpeta que acabas de crear. O alternativamente, estás en Windows, tienes una opción. Puede hacer clic con el botón derecho. Se puede decir mostrar más opción, y se puede decir abrir con código de Visual Studio por aquí. Abre con código por aquí. Esto es lo que es. Entonces esto es Visual Studio, que no es código de Visual Studio, es diferente. Entonces hay que echar un vistazo a este logo. ¿Bien? Éste. ¿Bien? Y si dices abrir, verás la carpeta abierta por aquí. Bien. Maximízala. ¿Bien? Se puede ver. Ahora tengo dos instancias o dos ventanas o código de Visual Studio por aquí. ¿Bien? Esta es mi carpeta que había creado llamada JavaScript. Y aquí es donde voy a crear todos mis archivos relacionados con el script Ja y todo lo que voy a aprender. Entonces eso es todo. Espero que también hayas podido hacer esta configuración con éxito en tu sistema. 4. Nuestro primer programa en JavaScript: Entonces ahora es el momento de que comencemos a escribir algún código en JAscript Entonces espero que en Visual Studio code open hayas podido abrir esta carpeta de tu elección, bien, donde quieras escribir los programas Ja Script. Entonces tengo esta carpeta abierta, y al lado de este nombre de carpeta, verás este icono llamado Nuevo Archivo. El primer archivo que vamos a crear sería un archivo HTML. ¿Bien? Entonces voy a llamar a esto como índice punto HTML. Ahora bien, ¿por qué estoy creando un archivo HTML? Es porque vamos a estar haciendo uso de HTML para cargar Ja Script y ejecutarlo en el navegador. Sí, vamos a ejecutar Ja Script en el navegador y ver la salida. Bien. Entonces aquí puedes ver este índice punto HTML y también hacer una nota que aquí en código de visual studio, también ves esta etiqueta apa, este icono de etiqueta, que representa el tipo de archivo que estás creando. ¿Bien? Ahora, se crea este archivo. Lo que voy a hacer es que voy a decir exclamación. ¿Bien? Entonces, en el momento en que dices exclamación, código de Visual Studio tiene un buen soporte para HTML, He estado viendo esto constantemente. Entonces nos va a ayudar a generar algún código repetitivo, y para eso, hay que presionar exclamación y hay que Entonces verás que se está generando algún código estándar. Se puede ver esto, bien. Entonces simplemente colapsaré esto haciendo clic en este icono. Y aquí puedes personalizar esto. Entonces voy a llamar a este título por aquí como Jascript Curso por aquí, algo así Y por aquí, puedo escribir en algún código. Ahora bien, este archivo no se guarda. ¿Cómo lo sabes? Entonces aquí puedes ver aparecer este punto. Si has terminado en esto, aparecerá una cruz, pero puedes ver aparecer este punto blanco al lado del carril del archivo. Significa que el archivo no se guarda, asegúrate de guardar los cambios que estés haciendo en el código de Visual Studio. Si estás viendo este icono, significa que no está guardado y no verás los cambios que has hecho en el archivo, seguirías actualizando y viendo por qué no estás obteniendo el resultado deseado. Pero en realidad, no has guardado el código. ¿Todo bien? Entonces esto pasa bastantes veces, así que solo tienes que decir Control y verás que me puedo ir, ahora mismo, lo que haría es dentro del cuerpo, voy a agregar H uno, ¿bien? Y voy a decir JavaScript. Curso por aquí. Bien. También voy a agregar registro de consola por aquí. ¿Bien? Ahora, el registro de la consola es un tratamiento JavaScript. Entonces, ¿cómo voy a hacer eso? Entonces no puedo escribirlo en etiqueta HTML, ¿de acuerdo? Entonces para eso, tendré que hacer uso de una etiqueta especial llamada etiqueta script. ¿Bien? Entonces aquí, después del cuerpo, diré guión. Bien. Y aquí, voy a decir consola dot log. Y aquí, voy a decir hola mundo, algo así. ¿Bien? Entonces esta es Ja Script, y la he guardado. Entonces básicamente, cómo escribes JavaScript dentro HTML es con la ayuda de etiquetas de script, ¿verdad? Ahora bien, lo que tenemos que hacer es que necesitamos ver la salida, si somos capaces de ejecutar esto correctamente. Así que voy a hacer click derecho por aquí y voy a decir Reveal en el Explorador de Archivos. Bien, entonces esto abrirá el Explorador de archivos. En Mac, verás Reveal en Finder. Entonces esto abre el Explorador de archivos. Puedes ver este índice punto HTML creado. Lo que puedes hacer es que puedes abrir esto en el navegador. Así que asegúrate de tener un navegador, tu navegador favorito o tu navegador preferido de tu elección, abre por aquí, y la carpeta también abierta. Y lo que puedes hacer es arrastrar y soltar este archivo por aquí en el navegador. Bien. Entonces, lo que esto va a hacer es abrir este archivo por aquí. Puedes ver que esta es una ruta del archivo y puedes ver el curso de Ja Script que se muestra aquí. Ahora bien, ¿por qué viene aquí? Es porque has agregado esto en el headrotax. Puedes hacer clic derecho, digamos inspeccionar, y puedes ir a Consola y verás Hola mundo uppe, ¿verdad Entonces este es el registro de la consola que hemos mostrado por aquí, ¿de acuerdo? Voy a minimizar esto por aquí, y lo que haría es que en realidad tendría esta vista lado a lado, bien que es algo que prefiero cuando estoy codificando o cuando estoy haciendo desarrollo web, ¿bien? Entonces esta vista lado a lado es lo que voy a usar, y también tendrás una buena claridad cuanto a qué salida estás obteniendo y qué cambio estamos haciendo y ¿por qué estás viendo esta salida? Bien. Entonces, sea cual sea el cambio que hagas si agregas un par de exclamaciones más, si presionas guardar, y si refrescas por aquí, verás que la salida se refleja ¿Bien? Pero asegúrese de guardar el archivo. ¿Bien? No debería ser como si no lo hubieras guardado, y no vas a ver la salida, solo seguirás refrescando y dirás, ¿por qué no estoy obteniendo la salida? ¿Bien? Además, asegúrate de hacer uso de la sintaxis exacta que estoy escribiendo aquí. Puedes ver Consola. Todo es en pequeño. Registro también todo está en pequeño. Si intentas escribir mira mayúsculas por aquí, si guardo esto y si refrescas, verás que no está definido. Esto no está definido. No va a funcionar. También te está diciendo dónde está el error, ¿de acuerdo? Entonces también te voy a mostrar cómo puedes leer los errores por aquí. Se puede ver error de referencia, consola no definida, y el error está en 12. ¿Bien? Entonces esta es la línea número 12, aquí, ¿verdad? Y es la quinta posición es lo que te está diciendo. La quinta posición. Si cambio esto a C pequeño, y si digo repaso, debería mostrarme la salida Bien. Además, estamos agregando punto y coma al final porque eso marca el final de la instrucción del script Ja. Bien. Entonces sí, ese es tu primer programa Jascript que has escrito y lo has cargado con la ayuda de HTML Entonces espero que esto haya sido útil. 5. Estructura de archivos JavaScript: Así que déjame hablar un poco más sobre Ja Script por aquí. Entonces aquí, si echas un vistazo a este archivo en particular, este es un archivo TreML que tiene el script Ja en él, ¿verdad Ahora bien, estas cosas de aquí se conocen como etiquetas y para JavaScript, esto se conoce como declaración. Jascript no tiene algo llamado como etiquetas. Las etiquetas están ahí en HTML, pero Jascript tendrá algo llamado como declaraciones, y Statement es solo una sola línea de código que se puede ejecutar Ahora también, notarás que código Jascript está escrito dentro de la etiqueta script Esto lo hemos agregado al final del expediente. Ahora, me gustaría destacar una cosa por aquí. Puedes deshacerte de esto desde aquí y también puedes agregarlo en la parte superior dentro de la cabeza. Eso también es posible si guardas esto y si atropellas esto por aquí. Bien. Si lo ves funcionando, verás que la salida es la misma. ¿Bien? Si trato de hacer algún tipo de cambio, bien, así y si me refresco, verás que la salida entra así. ¿Bien? Entonces no hay problema como tal, pero siempre es una buena práctica tener esta etiqueta de script al final, lo que significa que debes cargar Jascript al final después de que se hayan cargado todos los elementos HTML Ahora bien, hay razones para ello. La razón número uno es evitar cualquier tipo de error desconocido. Entonces Ja script, como sabemos, agrega comportamiento a nuestras páginas web, lo que significa que funciona con los elementos definidos en la página HTML. Ahora bien, existe la posibilidad de que el guión Ja pueda incluso intentar alterar los elementos dependiendo del estado, ¿verdad? Si haces clic en un botón, es posible que desee mostrar alguna información, o puede que quiera hacer algo con los elementos de la página. Ahora bien, si agrega este script en la cabeza por aquí dentro de las etiquetas de cabeza. El problema es que este script podría ejecutarse incluso antes de que se carguen todas las etiquetas del HTML. Entonces existe la posibilidad de que Ja Script no pueda encontrar las etiquetas que quiere, y podría ser por error. Por lo que podría provocar un error, y esa es la razón por la que siempre se recomienda que la etiqueta script esté al final del archivo HTML. Y el motivo es bastante claro para que se hayan cargado todas las etiquetas HTML. ¿Bien? La única razón. Otra razón es acelerar el sitio web. Entonces, si la etiqueta script se agrega en la parte superior en la sección head, lo que pasaría es si hay mucho script, ahora mismo, tenemos solo una línea de código, ¿verdad? Entonces está bien. Pero si hay mucho script que está escrito, entonces el script podría tardar un tiempo en ejecutarse o cargarse. ¿Bien? Y los elementos HTML debajo del script o después de la etiqueta head se cargarían solo una vez que el script se haya cargado completamente, lo que podría llevar a un tiempo de respuesta lento en la página web. Y esto no es bueno desde el punto de vista de la experiencia del usuario, y por eso siempre es una buena práctica cargar el script Ja al final de la página para que se eviten estos problemas Los programas Ja Script también pueden tener múltiples declaraciones, por supuesto. Puedo agregar una línea más de código por aquí y puedo decir refrescar, y verás la salida por aquí. Todo bien. Entonces sí, eso es eso es más información sobre el programa Jascript 6. Mejora tu entorno de desarrollo: Entonces ahora hablemos de cómo puedes mejorar tu entorno de desarrollo. ¿Todo bien? Ahora bien, lo que está sucediendo a partir de ahora es que tenemos este archivo HTML. Dentro de esto, estamos cargando Jascript y tenemos este código Jascript disponible en el navegador Ahora lo que hemos hecho es que en realidad hemos abierto este archivo HTML para ver la salida aquí en la consola del navegador, ¿verdad? Ahora, hay mejores formas. Ahora lo que pasa es si estás haciendo algún tipo de cambio por aquí. Por ejemplo, estoy agregando una parada completa más por aquí. ¿Bien? Si guardo el archivo, este cambio no se reflejará aquí. Tengo que hacer un refresco para ver el cambio, ¿de acuerdo? Si constantemente estás haciendo cambios y probándolo constantemente, esto podría ser un poco engorroso, y si estás trabajando en proyectos grandes, esto podría irritarlo, esto podría irritarlo Entonces las cosas pueden ser mucho más simples, y hay algún buen tipo de herramientas que puedes configurar dentro del código de Visual Studio que pueden hacerte la vida como desarrollador o programador más fácil. Ahora, déjame guiarte a través de algunos pasos por aquí que puedes hacer para mejorar tu entorno de desarrollo. Así que aquí en la barra lateral izquierda aquí verás esta opción llamada extensiones. Ahora, en el código de Visual Studio, puedes agregar o instalar algo llamado como extensiones que pueden extender la capacidad predeterminada que tiene el código de Visual Studio. ¿Bien? Entonces sí tengo bastantes extensiones ya instaladas. ¿Bien? Voy a hablar de los que recomiendo para Ja Script HTML o desarrollo web, ¿bien Ahora, puedes ver por aquí, tengo esta extensión para dev containers, ¿de acuerdo? Así que también trabajo mucho con Docker. ¿Bien? Entonces tengo esta extensión instalada, pero esta no es necesaria para el desarrollo web, ¿de acuerdo? Entonces solo voy a hablar de los que son. Así que esta primera extensión que estás viendo auto renombrar etiqueta por aquí. ¿Bien? Ahora bien, si ves este archivo TML, consiste en etiqueta, ¿de acuerdo? Una es la etiqueta de apertura, otra es la etiqueta de cierre. Entonces, si quieres renombrar la etiqueta. Entonces digamos si este H uno, quiero que este sea H dos. Entonces si hago H dos por aquí, se puede ver que la etiqueta de cierre también fue renombrada automáticamente. ¿Cómo se maneja esto? Esto se está manejando por esta extensión. Entonces, si inhabilito esto por aquí, ¿de acuerdo? Y si vengo por aquí, ahora si le renombro, así que permítanme colapsar un poco esto. Si renombro esto a H uno de aquí ahora, sigue funcionando, creo que los cambios no se tomaron efecto. Bien. Pero déjame cambiar el nombre de este H dos. Bien. Entonces ahora después de reiniciar las extensiones, si ves, si renombro esto a H dos, esto no se está renombrando ¿Bien? Entonces, si estás trabajando en un archivo HTML grande, y digamos que si cambiaste el nombre de esta etiqueta, entonces también tienes que cambiar el nombre de la etiqueta coincidente, lo contrario, vas a obtener un error Entonces si refresco esto Bien. No hay error que se esté lanzando, bien, pero la salida no es lo que desearías. Bien. Entonces probablemente esto podría mostrarse en H dos o H uno. ¿Bien? Entonces esto no es lo que desearías. Idealmente, una etiqueta de apertura también debe tener una etiqueta de cierre A. Entonces eso es lo que te ayuda esta etiqueta de cambio de nombre automático. Bien, me di cuenta de que no he guardado el archivo, así que solo guardaré el archivo y haré una actualización. Bien. Entonces esto es lo que esta etiqueta de cambio de nombre automático le permite hacer. Entonces tengo esto instalado para mayor comodidad por aquí. Bien, entonces he habilitado esto ahora mismo, y si renombro esto a H one, simplemente lo guardaré. ¿Bien? Eso es en lo que te ayuda esta etiqueta de autor nim ¿Bien? Hay una descripción por aquí por la que puedes pasar. ¿Bien? Entonces esta es una etiqueta, coloración de pares de corchetes Entonces, ¿qué hace esta extensión? Entonces, si estás trabajando en un archivo grande, bien, entonces podrías tener estas llaves para segregar un bloque de código, Ahora, es posible que desee ver la codificación de colores. Entonces esto te ayuda a darte la codificación de colores del par de apertura y cierre. Se puede ver por aquí en el icono mismo. Entonces eso es lo que hace esto. ¿Bien? Tengo algunas otras extensiones como DV container, jango, talker, algunas relacionadas con Python, cuadernos Jupiter, bien Luego está esta otra extensión, que se llama como Live Server. Esto también está instalado en mi sistema. Así que puedes buscar extensión por aquí. Entonces todas estas extensiones olvidé mencionar si te falta alguna de las extensiones, puedes buscar por aquí en el mercado. Puedes seleccionarlos y decir instalar. Eso es. Es bastante simple. ¿Bien? Por lo tanto, el servidor en vivo es una extensión que permite que un servidor pequeño o liviano ingrese a su entorno de desarrollo. Bien. Entonces, instalando esta extensión, obtienes esta cosa por aquí. Puedes ver esto en la parte inferior, ve a vivir este botón. Si deshabilito esto y si reinicio, ese botón se va. Bien, si habilito esto, verás ese botón aquí arriba. Entonces si digo ir a vivir, lo que pasaría es que esto me va a dar un servidor en vivo. Se puede ver el puerto 50 50. Entonces esto me ha dado un servidor ligero en 5500. No son 50 50. Es 5500. Bien, esto es un puerto. Y si puedes ejecutar esto en tu máquina local, si intentas acceder a esto, entonces el archivo que tengas se ejecutará en el servidor Local. Puedes ver esto.Esto ahora ejecutándose en el servidor local. Y ahora si trato de hacer algún tipo de cambio por aquí, ¿de acuerdo? Entonces si agrego, digamos, signo de interrogación par de cuatro signos de interrogación. Bien. Y voy a abrir la consola antes de guardar el archivo para que todos puedan ver lo que está pasando. Bien, está fallando a fabricon grosero. Si guardo esto, verás que justo después de guardar los cambios, estás viendo que los cambios se reflejan en vivo. Entonces es muy útil. Es muy conveniente. Para que no tengas que presionar el botón de refrescar una y otra vez. Se encargará de mostrarte la salida sin que tengas que hacer una actualización. Entonces vuelve a cargar automáticamente los cambios que haces. ¿Bien? Así que es realmente útil este servidor de extensión en vivo , sí, lo uso todo el tiempo. Más bonita. Entonces este es un formato de código que te ayudará a formatear tu código. Entonces eso es lo que hace. Lo tengo instalado aquí. Entonces eso es todo. Eso es todo para código HTML y JaScript. Estas son las extensiones. muchas más extensiones como tailwind, Python Bien, entonces hago todo tipo de programación. Entonces encontrarás muchas extensiones en mi código de Visual Studio, y sigo borrándolas, reinstalándolas o instalando las nuevas, probando otras nuevas, todas esas cosas que hago. Todo bien. Entonces sí, se trata las extensiones que pueden ayudarte a mejorar tu entorno de desarrollo. Entonces te recomendaría que cambies a un servidor en vivo si estás haciendo uso de un archivo HTML para ver tu código Jascript porque puede ayudarte a ver tus cambios en tiempo real 7. JS en el mismo archivo vs. en uno separado: Entonces ahora es el momento de que entendamos ¿cómo se puede escribir JavaScript de manera escalable? Ahora bien, lo que quiero decir con forma escalable es ahora mismo, lo que estamos haciendo es que estamos escribiendo JavaScript dentro de las etiquetas de script, ¿verdad? Ahora, siempre que estés trabajando en un escenario del mundo real o en aplicaciones de grado de producción, no tendrás JavaScript de dos líneas, ¿verdad? Sería que los archivos son muy largos, como si hubiera mucho Javascript involucrado en algunos proyectos. Entonces en ese caso, no es bueno escribir tu JavaScript de esta manera. Es mejor si pudieras separar el código JavaScript del HTML. Entonces eso es lo que te voy a mostrar. Entonces lo que puedes hacer es lo que vamos a hacer aquí es que voy a crear un nuevo archivo Ja Script, y voy a llamar a esto como punto índice Gs. Para que puedas ver el momento en que escribí punto JS, puedes ver el ícono del archivo por aquí Este es un archivo JS, y este es un archivo HTML. Entonces esta es una representación por código de Visual Studio que te ayuda a identificar cuál es el tipo de archivo. ¿Bien? Entonces lo que voy a hacer es cortar estas dos líneas de código. Lo voy a mover por aquí. Bien. Y ahora mismo, si guardo esto, no verán ningún resultado. Bien, porque no hay ningún script Ja por aquí que esté escrito dentro del archivo EstiML o ni siquiera enlazado por aquí Entonces, si no estás escribiendo JavaScript en el archivo EstiML, realidad puedes vincularlo y escribirlo en un archivo externo, que es el archivo E tot JS, que significa Ja script Entonces lo que puedo hacer es que básicamente puedo tomar esto en la misma línea y agregar aquí un atributo. Entonces hay un atributo llamado SRC para la etiqueta script, que le permite especificar el nombre del archivo ¿Bien? Entonces puedo decir index, y puedes ver el auto suggest por aquí, index dot Q. Entonces esto es auto sugerir desde el código de Visual Studio. Y puedo decir Guardar. Y en el momento en que dices Guardar, puedes ver por aquí, infierno hola Viejo, y viene desde el índice JS Y en realidad puedes hacer cambios por aquí si lo deseas y ver los cambios reflejados aquí. ¿Bien? Entonces sí, eso es todo. Ahora, una cosa que quiero mencionar aquí es sobre servidor en vivo. Entonces, si quieres cerrar el servidor, necesitas hacer clic en este botón. Entonces eso va a desechar este servidor. Y si lo refrescas, entonces bien, simplemente no se recargará. Se puede ver. Y si quieres volver a vivir, puedes iniciarlo y lo abrirá. ¿Verdad? Entonces, sí, así es como puedes separar el código JS del HTML. 8. Comentarios en JavaScript: Ahora hablemos de los bienes comunes. ¿Qué son los comunes? Entonces los commments son como nodos en tu código. Ahora bien, estos son el conjunto de sentencias que no se ejecutan y se ignoran, y son solo como referencia para usted. Entonces, si vienes de cualquier otro lenguaje de programación como Java, Python, es probable que estés al tanto de este concepto de comunes y sepas cuáles son. Ahora, en JavaScript, hay dos tipos de comentarios que se soportan. Uno es un comentario de una sola línea y otro es un comentario de varias líneas. Entonces puedo tener dos slash forward por aquí y puedo decir, este es un comentario de una sola línea, algo así ¿Bien? Ahora bien, si guardo esto, literalmente no hay impacto en la salida porque esto nunca se ejecuta. Incluso puedo comentar esta línea de código. Y si guardo esto, esa línea es comentada y no se ejecuta. Así que sí, así es como puedes hacer uso del comentario de una sola línea. Además, puedes venir aquí en código de Visual Studio en Editar por aquí. Verás el comentario de toggle line. Entonces este es un atajo por aquí. Entonces el atajo para mí es Control más slash delantero. Bien. Ya que estoy en Windows, así puedo mantener mi cursor en esta línea, y puedo decir Control y slash hacia adelante, y ya pueden ver, puedo alternar entre el comentario de una sola línea Bien, incluso puedo seleccionar todo este bloque de código y puedo ver Control y reenviar slash Ahora bien, si estás en Mac o Linux, este atajo puede diferir, pero solo te estoy mostrando el camino en cuanto a cómo puedes obtener el atajo por ti mismo. Todo bien. Además, hay algo llamado como comentario de bloque, como puedes ver por aquí. Ahora, te dije que este es comentario de una sola línea o también se conoce como comentario de línea. Ahora, hay algo llamado como comentario de bloque o también conocido como comentario multilínea. ¿Bien? Entonces puedes comentar múltiples líneas de código de esta manera, al tener estas dos barras hacia adelante en cada línea Pero habría situaciones en las que sí quieres ir por este camino. Entonces ahí es cuando se puede hacer uso del comentario multilínea. Entonces para hacer comentario multilínea, echaremos un vistazo a la captura de pantalla o lo siento, no captura de pantalla, el atajo Para que puedas ver el turno lt y A, o incluso puedes seleccionar esta opción por aquí. Entonces puedes ver estas dos líneas de código que había seleccionado ahora están en esta sintaxis, que es para comentario multilínea, y no se ejecutarán Entonces, si guardo este archivo, se puede ver literalmente ninguna salida en la consola. ¿Bien? Entonces este es comentario multilínea Bien, y puedo alternar esto. Entonces fueron Control Shift y E por aquí. Vaya, cometí un error. ¿Qué era un atajo? Entonces fue turno Viejo y E. Lo siento. Bien, así puedo seleccionar esto y puedo decir turno viejo y E en mi sistema. Uy. Bien, no me está funcionando. Turno viejo y A. Debería trabajar idealmente. Pero sí, no lo sé. El atajo no funciona por alguna razón. Déjame intentarlo una vez más, turno viejo y A. Bien, funcionó. Probablemente no lo estaba haciendo de la manera correcta en el teclado. ¿Bien? Funcionó. Y voy a guardar esto para que veas que las líneas están empacadas. ¿Bien? Entonces este es un comentario de una sola línea, y si llevo esto a una nueva línea y si veo algo como esto por aquí, ¿de acuerdo? Se trata de comentarios multilínea. Entonces voy a añadir esta línea por aquí. ¿Bien? Entonces este es comentario de varias líneas. Bien. Ahora bien, hay una forma más de mejorar la forma en que comentas, que se conoce como comentarios doc, ¿bien? Por lo que también se le llama como comentarios de documentación o comentarios doc, y consiste en anotaciones ¿Bien? Ahora bien, lo que sucede es que normalmente tendrías mucho código como funciones, clases, objetos creados en el código, y querrías tener una descripción de qué tipo de parámetros se supone que debe pasar cualquiera que use esta función en particular y por qué estos parámetros son necesarios y todo eso. ¿Bien? Entonces básicamente con la ayuda de los comentarios doc, puedes hacer uso de anotaciones y especificar toda esta información Entonces solo voy a agregar un ejemplo sencillo comentarios de plática por aquí, ¿de acuerdo? Así que aquí, puedes ver que tenemos una función, ¿de acuerdo? Si no eres consciente de este concepto de función, métodos, no te estreses. Pero si vienes de cualquier otro lenguaje de programación, debes estar al tanto de cosas como funciones, métodos, y todo, ¿verdad? Entonces solo estoy usando esto para mostrar este ejemplo. Ahora, aquí puedes ver esto es hacer comentario. Esta es la sintaxis, ¿de acuerdo? Y puedes ver por aquí, lo que esta función hace esencialmente es que agrega dos números, y también he especificado el parámetro. Entonces estoy haciendo uso de a la tasa para anotación por aquí La anotación es algo que comienza con la reducción de anuncios. ¿Bien? Entonces eso es lo que es la anotación. Y estoy especificando que este es un número y el nombre es A, y este es el primer número. Y nuevamente, estoy describiendo el segundo parámetro y luego cuál es el tipo de retorno de esta función. Ahora bien, si pasas el cursor sobre esto, si pasas el cursor sobre esta función, verás que en realidad se está mostrando esta documentación, puedes ver en esta ventana emergente Así que cualquiera que intente hacer uso de esta función en algún otro archivo, podrá ver lo que todo lo que ha escrito o mucha más información sobre esta función en particular. Eso es lo que significa, ¿de acuerdo? Ahora la pregunta es, si estás mirando la sintaxis, te vas a preocupar un poco, dirás, Oye, tengo que añadir estas marcas de astérix en cada línea. Entonces la respuesta es no. Eso es auto generado para ti. Entonces lo que puedes hacer es que puedes tener slash hacia adelante, y puedes tener dos veces astérix Entonces, si agregas dos veces asterix, el IDE sabe que quieres agregar los comentarios de estilo doc y en realidad puedes agregar cosas que necesites. ¿Bien? Y puedes hacer uso de puedes hacer uso de la anotación de aquí Se puede ver. ¿Bien? Ahora, cada vez que presionas Enter, se agrega un nuevo asterix Bien, para que no tengas que preocuparte por agregarlo en cada línea. Bien. Entonces esa es la razón por la gente usa ID. Esa es otra razón. Bien. También puedes hacer todo esto que estamos haciendo en el Bloc de Notas, pero no vas a tener acceso a todas estas funciones, ya sabes, estas sugerencias y generación automática de asteriscos y todo eso no sucederá en el bloc de notas, y es por eso que la gente hace uso de ID, ¿ pero no vas a tener acceso a todas estas funciones, ya sabes, estas sugerencias y generación automática de asteriscos y todo eso no sucederá en el bloc de notas, y es por eso que la gente hace uso de ID, de acuerdo Entonces otro otro caso de uso de documentar código de esta manera es mañana si quieres generar una documentación EPA Entonces digamos que has escrito un EPI en JavaScript o alguna biblioteca en JavaScript, y quieres generar una documentación para el mismo Para que puedas hacer uso de herramientas disponibles. Hay herramientas externas como una herramienta es Jstok tres. ¿Bien? Y puedes hacer uso de eso y puedes generar la documentación. Y la documentación se genera utilizando esto. Entonces, si has agregado esto alrededor como todas las funciones y todos los EPI, lo que sea que tengas que encontrar, te va a dar la documentación que puedes compartir con tus desarrolladores front-end o con quien quieras compartirla, ¿bien? Ahora, también te preguntaría si te interesa saber más sobre este estilo de documentar las cosas Yo solicitaría que se refiera a este sitio web jsto dot app Bien. Y esto es estándar, esencialmente, diría yo, o estilo para documentar su código Jascrit Y aquí, si ves, verás una lista de múltiples anotaciones o múltiples etiquetas por aquí puede ver que estábamos haciendo uso de Param que debería ver en algún lugar por aquí ¿Bien? Se puede ver param. Todo bien. Y hay muchas cosas de las que puedes hacer uso. Si haces clic en ellos, tendrás acceso a más detalles sobre cómo se puede usar. ¿Bien? Y, si, esto es lo que es. Puedes hacer clic aquí en el lado derecho, arriba, y también puedes dirigirte a su repositorio Github para saber más. ¿Bien? Entonces sí, se trata acciones de GS que puedes explorar más si te interesa esto, ¿de acuerdo? Pero sí, se trata de comentarios, y voy a deshacerme de esto de aquí por ahora. Todo bien. Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 9. JavaScript con Nodejs: Oigan, qué pasa, todos. Así que déjame mostrar cómo puedes hacer uso del nodo Gus para ejecutar tu código Jar Script. Hasta ahora, lo que hemos estado haciendo es que hemos estado ejecutando nuestro script Jar directamente desde el propio navegador, y aquí estoy haciendo uso de código VS con extensión de servidor en vivo, y en realidad no necesito extensión excepto para recargas en vivo, pero sí, recargas en vivo solo me hacen la vida conveniente, ya sabes, como desarrollador, incluso puedes abrir este archivo de estimación directamente en el navegador y ver la salida en la consola. Pero tendrás que refrescarte por cada cambio que hagas cada vez, lo cual no es conveniente en mi opinión. Entonces, ¿qué es NodeJS? NodeJS proporciona un entorno de tiempo de ejecución para JavaScript Entonces, si solo buscas en Google NodeJS, te acercarás, o verás este enlace nogs.org, que es el enlace de la página web oficial Ahora, cómo entró en imagen NodeJS. Entonces lo que pasó es un ingeniero llamado Ryan Dahl, lo que hizo es que se llevó el motor V ocho De Google que permite que Ja Script se ejecute en Google Chrome. Entonces en Google Chrome, ves que se está ejecutando Ja Script, cómo se está ejecutando con la ayuda de ocho motores. Entonces Ryan acaba de tomar este motor Vet y creó NodeJS. Entonces NodeJS esencialmente es este ocho motor que le permite ejecutar Ja Script en cualquier lugar. ¿Todo bien? Ahora, para conseguir esto o para ejecutar NodeJS sin la ayuda de Oh, perdón, Nod Entonces, si quieres ejecutar Ja Script sin la ayuda de navegadores, necesitas instalar Nojs en tu sistema Derecha. Y simplemente puedes venir a este sitio web. Puedes ir a Descargar o verás este enlace de descarga aquí en la página principal. ¿Bien? Simplemente presione este botón de descarga y se descargará en su sistema. O alternativamente, puedes ir a Descargar y puedes seleccionar la versión. Asegúrese de seleccionar el último. En qué sistema operativo estás, bien, y solo consíguelo en tu sistema. Así que incluso puedes instalarlo usando estas utilidades de línea de comandos, ¿de acuerdo? O también puedes tener un instalador preconstruido. Bien, entonces hay diferentes opciones de instalación. Yo recomendaría el instalador. Deberías hacer uso del instalador, así que solo descárgalo y ejecútalo. Entonces es bastante sencillo de instalar. Es como cualquier otro software que normalmente instalarías en tu sistema. ¿Todo bien? Ahora, una vez que hayas terminado de instalar, no te voy a mostrar los pasos de instalación. Es bastante estándar. Así que simplemente dirígete a la terminal o cualquier terminal fuera del código de Visual Studio si deseas preferir tu terminal de sistema operativo nativo. Tú también puedes hacer eso. Pero como estoy haciendo uso del código de Visual Studio, tiene una funcionalidad de terminal incorporada, lo que me ayudará a abrir esta terminal por aquí. ¿Bien? Ahora, en la terminal, puedes ejecutar este guión de nodo de comando, que en realidad va a imprimir en la versión de nodo que tengas en tu sistema Así que es muy probable que veas un número de hijo diferente siendo impreso por aquí dependiendo de cuándo estés viendo este video. Pero si tienes algún número de hijo impreso, está completamente bien, siempre y cuando se esté imprimiendo. Bien, debería imprimirse. De lo contrario, hay algún problema con la instalación de nodejs en su sistema O no se instaló correctamente o no está instalado en absoluto. ¿Bien? Entonces antes de la instalación o antes de descargar esto, también te recomendaría que ejecutes este comando y verifiques si existe nodo en tu sistema, ¿verdad? Entonces existe en mi sistema. Sé que lo instalé desde el principio. Ahora bien, una vez que exista el nodo, lo que haría es aclarar esto voy a decir NP o diré nodo por aquí. Entonces este es un comando, y pasaría nombre del archivo para el archivo Ja Script. Este índice punto chg. Pero antes de ejecutar este comando, asegúrate de estar en el directorio correcto. Entonces voy a revisar mi directorio por aquí. Entonces ahora mismo estoy en este directorio, y este es un directorio donde también reside mi archivo Ja Script. ¿Bien? Entonces voy a decir nodo por aquí. Y voy a decir punto índice Gs. Y si digo Enter, verás la salida que viene por aquí, ¿de acuerdo? Entonces con este enfoque, puedes hacer uso de terminal y no necesitas la consola del navegador por aquí, ¿de acuerdo? Y ni siquiera necesitas el servidor en vivo, ¿verdad? Entonces básicamente, escribes algo de código por aquí, que es JavaScript simple y ves que se ejecuta en la consola así. ¿Bien? No hay necesidad de ningún archivo TML, ningún servidor en vivo, o ninguno El navegador también, ¿bien? Porque ahora estás ejecutando Ja Script fuera del navegador. Le expliqué qué es el nodo JS y cómo entró en imagen. ¿Bien? Entonces estás haciendo uso de NodeJS por aquí. Pero solo deseo mostrarles esta metodología a todos ustedes, ¿de acuerdo? No voy a estar usando esto personalmente, bien, porque quiero mostrarte cómo funciona Ja Script con HTML. Entonces nos apegaremos a este método. Pero, sí, deseaba que también conocieras los otros métodos. Y por eso decidí mostrártelo. Bien, espero que hayas podido seguirlo, y espero que esto haya sido útil 10. Manipulación del DOM con JavaScript: Hablemos de la manipulación de Dom. Ahora bien, ¿qué quiere decir con manipulación de la fatalidad? Ahora bien, si estás hablando de JavaScript, debes haber oído hablar de este término llamado Dom. Ahora, Dom significa modelo de objeto de documento. Ahora, cada vez que se muestra una página web en el navegador, se convierte en una estructura, derecha, que muestra la página web. Y esta estructura es lo que se conoce como modelo de objeto de documento o ¿bien hacer? Ahora, JavaScript puede interactuar con este Dom e incluso puede alterarlo. Ese es el poder de JavaScript. Cuando decimos Ja Script agregar comportamientos a las páginas web, esta es la habilidad que aporta a la mesa Entonces puede interactuar con el Dom e incluso puede alterarlo. Ahora, solo voy a mostrarte algunas capacidades sobre cómo puede alterar las cosas del propio Ja Script, ¿de acuerdo? Entonces aquí tenemos este título JAscript curso, ¿de acuerdo? Por aquí, estás viendo H one Jascript Cure. Entonces lo que voy a hacer es agregar probablemente un PTAC por aquí Bien, digamos, es una etiqueta P. No voy a añadir nada. Voy a añadir una identificación, ¿de acuerdo? Y voy a decir que este es el nombre de aquí, ¿de acuerdo? Así que agregué una etiqueta P, y le he dado un atributo llamado ID, que es el que tiene un valor de nombre. ¿Bien? Ahora bien, ¿por qué le he dado una identificación? Debido a que queremos acceder a esta etiqueta P desde Ja Script y acceder a cualquier etiqueta desde HTML, Jascript debe recogerla usando un identificador Y ID es ese identificador único. Entonces, si pasas el cursor sobre esto, verás define un identificador único, que debe ser único en todo el documento Entonces este es el documento completo, y esto debería ser único para que Ja Script lo recoja de la manera correcta. ¿Bien? Ahora aquí, lo que voy a hacer es que voy a hacerlo antes que nada, si refrescas esto, estás viendo que aquí no hay salida porque literalmente no hemos agregado nada, ¿verdad? Esta es una etiqueta MTP. Entonces aquí, puedo decir documento punto obtener elemento por ID. ¿Bien? Entonces estamos viendo desde el documento, obtener este elemento por ID. Ahora bien, ¿qué elemento estamos pidiendo? ¿Bien? Entonces estamos pidiendo nombre. Ese es el nombre de nuestro elemento de aquí. ¿Bien? Ahora, usando desde aquí, puedo acceder a él su propiedad. Entonces puedo decir que el texto interno es igual a, puedo agregar en hola por aquí, algo así. Bien. Y voy a añadir un punto y coma y voy a guardar esto Ahora verás hola aquí arriba por aquí. ¿Bien? Entonces este hola se está agregando al documento HTML o al código HTML con la ayuda de ChaVScript se puede ver que esta es la línea de código que hace eso ¿Bien? Y también es bastante sencillo. Estamos diciendo documento, o del documento, obtener este elemento por ID, que es el elemento. Así que hay que introducir nombre por aquí. Bien y puedes ver por aquí. Este elemento get por ID devuelve o hace referencia al primer objeto con el valor especificado del atributo ID. Eso es lo que pasa. Y entonces estamos viendo texto interno, ¿de acuerdo? Entonces estamos modificando el texto interno por aquí y estamos agregando hola por allá. ¿Bien? Entonces eso es lo que estamos haciendo, bien. Ahora, te voy a mostrar algunos ejemplos más. Entonces lo que voy a hacer es aquí así que dentro de este HTML, lo que puedo hacer es que pueda venir aquí. Tengo esta etiqueta P. Puedo cambiar esta etiqueta P a H one, para que sea mejor visible. ¿Bien? El tamaño es más grande. Ahora por aquí, lo que voy a hacer es mostrar hola por aquí. Bien. Puedo volver a decir documento punto obtener elemento por ID, ¿de acuerdo? Voy a conseguir este elemento, que es el nombre de aquí, ¿de acuerdo? Y entonces puedo decir tot On click o puedo decir tout texto interno, tot On click o puedo decir tout texto interno, ¿bien? O 1 segundo. Permítanme añadir también un botón por aquí. ¿Bien? Me perdí el botón de agregar, así que voy a agregar un botón por aquí. Entonces lo que vamos a hacer es lo que estoy tratando mostrar es al click de este botón, voy a cambiar el texto, cambiar texto. Botón. Bien. Y esto es sólo un botón con el cambio de texto por aquí. Se puede ver. Voy a minimizar esto un poco. Bien. Entonces, en vez de nombre, voy a conseguir cambio. Entonces cual era el ID, es cambiar el botón de texto. Yo sólo lo voy a dar por aquí. ¿Bien? Y luego por aquí, voy a decir punto a clic sobre clic de este botón. Bien. Puedes ver esto en click aquí. Al hacer clic en este botón, lo que necesito hacer es que voy a tener una función. ¿Bien? Esta es una función y el estado de la función. Uy. Bien, así que lo aclaré y por aquí, dentro de un par de alabanzas rizadas, Bien, voy a contar lo que debería pasar al hacer clic en este botón ¿Bien? Entonces al hacer clic en este botón, este texto debería cambiar. Entonces voy a copiar esta línea por aquí porque esta es la línea que nos ayuda a cambiar el texto, y puedo decir, hola, puedo saludar de nuevo por aquí, algo así. Bien. Entonces espero que esto tenga sentido. Lo que estamos tratando de hacer por aquí. Todo bien. En realidad estamos diciendo documento punto obtener elemento por ID. Estamos consiguiendo este elemento. Esto es un botón. Y al hacer click de este botón, estamos diciendo ejecutar esta función. Qué son las funciones, por si no eres consciente, las funciones no son más que bloque de código que están diseñadas para hacer una tarea en particular. Y la tarea que estamos tratando de hacer aquí es simplemente cambiar el texto de particular este elemento en particular de aquí, y este elemento en particular es una etiqueta H one, ¿de acuerdo? Entonces estamos consiguiendo esa etiqueta H one, y estamos cambiando el texto interno a hola otra vez. Alinea esto con punto y coma. Voy a guardar esto. Y ahora si dices cambio, volverás a ver hola. ¿Bien? Entonces esto es un poder de JavaScript, ¿de acuerdo? Se puede ver lo poderoso que es. Acabamos de agregar un oyente onclick, y con la ayuda de la función realmente somos capaces de actualizar el nombre O esencialmente, debería decir, simplemente no estamos actualizando el nombre. En realidad estamos alterando un elemento preexistente o una etiqueta en la página. ¿Bien? Entonces ese es un poder de JavaScript aquí que puedes sentir. Entonces simplemente no se trata de cambiar el texto, sino que incluso puedes actualizar los estilos sobre la marcha. ¿Bien? Y para demostrar eso, digamos que si hago clic en cambiar yo al hacer clic en cambiar deseo cambiar el color de fondo de un elemento a otra cosa, incluso puedo hacerlo con JavaScript. Así que voy a duplicar esta línea de aquí. Y por aquí, digamos que quiero cambiar el estilo de este elemento en particular al del rojo, digamos, por ejemplo. Entonces puedo decir, después de obtener este elemento en particular, en lugar de texto interno, puedo ver estilo, tout, puedo ver fondo Puedes ver que hay tantas que hay tantas propiedades a las que tienes acceso, ¿de acuerdo? También tienes acceso al color del texto por aquí. Bien. Sin color de texto. Perdón por eso. Es sólo el color. ¿Bien? Entonces estamos hablando de color de fondo, así que voy a obtener el color de fondo por aquí, y aquí puedo decir rojo. Y voy a ver si esto. Ahora al hacer clic de cambio, verás el texto también cambiado y el color de fondo ahora es rojo. Si quieres, incluso puedes cambiar el color, el color del texto al del blanco. Simplemente puedo duplicar esta línea y puedo decir que color puede ser blanco. Bien. Y se puede decir, por aquí, ¿no? Tan blanco porque en rojo, negro no me veía tan bien. Bien, mi preferencia. Pero esto es algo que es posible con JavaScript. Puedes ver cómo puede agregar mucho comportamiento a los elementos HTML, y una página HTML estática ahora tiene comportamientos y cosas que se están actualizando dinámicamente en los eventos que estás realizando en la página web, ¿de acuerdo? Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 11. Variables en JavaScript: Empecemos a hablar de lo que es una variable. Ahora bien, si vienes de algún otro lenguaje de programación, es muy probable que estés al tanto de las variables como concepto. Una variable es como una caja de almacenamiento donde puedes guardar una pieza de información para usarla más tarde. Ahora bien, ¿qué significa eso? Ahora bien, si estás construyendo algunos programas grandes en cualquier tipo de lenguaje de programación, es muy probable que quieras almacenar algún tipo de información. Por ejemplo, si está construyendo una calculadora, es posible que desee almacenar números y el resultado para que pueda mostrarlo al usuario. También es posible que desee almacenar números. La razón es que quieres hacer cálculos sobre esos números, ¿verdad? Entonces es posible que desee almacenarlo en algún lugar, y esos números tienen que ser accesibles a la derecha? Entonces aquí es donde entra en juego el concepto de variable. Permite almacenar la información durante la ejecución del programa. Entonces eso es lo que dice la definición. Una variable es como una caja de almacenamiento. Una caja de almacenamiento porque te permite almacenar información, ¿verdad? Entonces la siguiente parte dice donde puedes guardar la pieza de información para que puedan usar más adelante, ¿verdad? Puedes pensarlo como una etiqueta que te pegas en algo que quieras recordar. Así que imagina esta caja de aquí y digamos que tienes una caja con nombre o nombre etiquetado por aquí. En lugar de etiqueta, estás viendo el nombre por aquí. Y dentro de la caja, pones el nombre Alice. Ahora, siempre que quieras usar el nombre Alice, solo puedes hacer referencia al cuadro de nombre y puedes usarlo en lugar de escribir Alice cada vez. Ahora bien, este es un ejemplo muy sencillo. Por supuesto, las variables también pueden almacenar muchas cosas complejas, como oraciones y todo, o, que puedes usar durante el transcurso de la ejecución del programa, ¿verdad? Ahora, crear una variable en JavaScript es bastante sencillo. Así que vamos a crear nuestra primera variable, bien, y vamos a ver cómo podemos hacer uso de ahora vamos a empezar a crear una primera variable. Diré que es como creas variables en JavaScript y agregas el nombre de la variable que quieres tener. Digamos que quiero guardar el conteo para contar algo. He creado esta variable llamada count. Ahora, después de esta declaración, si guardo el programa, en realidad he creado una variable, pero en realidad no la estoy usando. Entonces por eso no veo nada en la salida, ¿verdad? Ahora, puedo decir consola punto, iniciar sesión por aquí, y puedo imprimir de inmediato o usar Entonces lo estoy usando significa que simplemente lo estoy imprimiendo ahora mismo. Bien, no estoy realizando ningún tipo de operaciones sobre las variables. Así que voy a guardar esto y verás que indefinido se está imprimiendo por aquí. Entonces esta variable no tiene nada en ella. Entonces se te ocurre que la caja que tienes con la etiqueta en ella no tiene ningún tipo de información. ¿Por qué? Porque no le has asignado ninguna información. Entonces puedes asignar información de esta manera, así puedes decir que el conteo es igual a cero por aquí. Y si guardas esto, verás que cero se imprime en la consola, ¿verdad? Puedes hacer que este código sea mucho más conciso combinando estas dos declaraciones. Entonces esta es la declaración, y esta es la parte de inicialización de la creación de variables Entonces lo que puedo hacer es que realmente puedo combinar estos dos, ¿de acuerdo? Entonces déjame presionar Retrocesos y déjame combinar esto, bien, algo como esto Ahora bien, si guardo esto, la salida será la misma. No voy a cambiar. Pero ahora mismo en vez de tres líneas de código, tengo dos líneas. Entonces así es como puedes crear y hacer uso de la variable. Por supuesto, el uso que he mostrado aquí es bastante básico. Sólo estoy imprimiendo la variable. ¿Bien? Y puedes usarlo como número de veces que quieras durante el curso de ejecución del programa. Depende totalmente de ti. Así que puedes ver por aquí, ¿verdad? E incluso se puede hacer uso de ella en operaciones aritméticas. Entonces puedo decir consola punto log por aquí, y puedo decir contar más diez por aquí. Se puede ver la salida de diez ase. Bien. Ahora bien, si el conteo es diez, verás 1010, diez siendo impresos y podrás ver salida de 20 ase. Incluso se puede cambiar el valor de la variable. Entonces aquí en algún lugar en medio de los ttments puedo decir que el conteo es igual a 40, por ejemplo Bien. Y puedo guardar esto y se puede ver por tres veces el conteo es diez por aquí, y luego el conteo es 40 40, 50, ¿verdad? 50 porque le estoy sumando diez. Entonces esta es la explicación más simple para las variables. Entonces, para quitarle algunos puntos, una variable es como una caja de almacenamiento donde puedes guardar o almacenar la pieza de información que quieres hacer uso más adelante. Puedes pensarlo como una etiqueta que estás pegando en algo que quieras recordar, ¿verdad? Entonces aquí estoy recordando contar. Estoy almacenando el valor del conteo, y en realidad estoy haciendo uso de él durante el transcurso de la ejecución del programa. La creación de variables implica dos pasos. Primero es la parte de declaración, y luego la parte de inicialización, ¿verdad? Ahora aquí, estoy combinando inicialización y declaración juntas en una sola, ¿de acuerdo? Y puedes hacer uso de, uh, variables el número de veces que quieras durante la ejecución del programa, incluso puedes reasignar el valor a una variable el número de veces que quieras Así que incluso puedo reasignar esto otra vez. En vez de 40, puedo hacer esto, digamos, 80 y puedo salvarlo. Verás el cambio en la salida. ¿Bien? Entonces eso son variables para ti, y espero que esto haya sido bastante claro y la explicación más simple posible. 12. Nombres de variables: Ahora no es que solo puedas crear una variable en un programa. Puedes crear tantas variables como quieras en un programa. Entonces si quiero, digamos, almacenar un mostrador por aquí, contador es cinco, puedo hacer eso y puedo hacer uso de él en cualquier parte del programa. Al final del programa, puedo decir consola dot log, y puedo imprimir el valor. ¡Uy! Lo siento. Puedes imprimir el valor del contador aquí. Bien. Y verás que cinco se están imprimiendo. Ahora bien, si hay algo que se permite crear mucho porque las variables, puedes crear mucho en los programas tantas como quieras, ¿de acuerdo? Entonces, si hay algo así, entonces es esencial que la creación de estas cosas se rija por reglas, ¿verdad? Así que de manera similar para las variables, tiene algún conjunto de reglas que hay que seguir a la hora de crear y nombrar variables Entonces ahora hay bastantes reglas, no muchas, sino algunas reglas que debes tener en cuenta a la hora de hacer uso de variables. Ahora bien, no se supone que de memoria estas reglas, pero generalmente con la práctica, las conseguirás, ¿verdad? Y los ID, si estás haciendo uso de cualquier ID moderno, como el código de Visual Studio, los ID también se aseguran de que señalen cualquier tipo de error que estés cometiendo o desviándote de la regla ¿Bien? Entonces, si estás tratando de nombrar una variable que no está permitida, entonces ID también ayuda ahí resaltando el problema. ¿Todo bien? Entonces hablaremos de reglas una por una. Entonces la regla número uno que tengo aquí en la pantalla es que los nombres de variables deben comenzar con una letra, dólar o un guion bajo Bien. Para que puedas tener un nombre de variable. Así que déjame aclarar esto un poco, bien. Así que me desharé de todo esto, ¿de acuerdo? Yo sólo mantendré las cosas limpias. Entonces aquí, esta variable en realidad comienza con una letra, ¿de acuerdo? Se puede tener una variable comenzando con algo como esto. ¿Bien? Este es un nombre de variable válido. ¿Bien? Puede tener variable llamada subrayado nombre por aquí es igual a, se puede decir alto Bien. Esto también es válido. Entonces estos son todos nombres de variables válidos. Ahora bien, no se puede tener nombre de variable usando comenzando con una letra. Entonces puedes decir un nombre por aquí. Esto no es válido, ¿de acuerdo? Si intentas hacer esto, obtendrás un error. Puedes ver, como resalté que las identificaciones te ayudan. Puedes ver que es como decir identificar que no es capaz de conseguir lo que intentas hacer. ¿Bien? Ahora bien, ¿por qué querrías nombrar a la variable de esta manera? Un nombre no tiene ningún sentido, ¿verdad? Entonces esto no está permitido. Voy a comentar esto, ¿de acuerdo? Entonces esta es una de las reglas que se supone que debes tener en cuenta. Y, claro, si no lo recuerdas, no te estreses porque las identificaciones modernas, como dije, si estás haciendo uso de cualquier tipo de identificación moderna, las identificaciones te ayudarán a precisar cualquier tipo de desviación de las reglas, ¿verdad Entonces esta es la regla número uno. Ahora la regla número dos dice que puede contener letras, dígitos, dólar y subrayado después del primer carácter. ¿Bien? Para que puedas tener variable. Por lo que no se puede tener variable llamada usuario. Esto no está permitido. ¡Uy! Por lo que recogió la activación del usuario. Bien. No se puede tener variable llamada usuario, algo así, ¿verdad? Esto no está permitido porque está comenzando con un número. Pero puedes tener una variable llamada user one. Esto está permitido porque aquí, el número viene al final o después del primer carácter. También puedes tener número después del primer personaje. ¿Bien? Eso también está permitido. Ahora incluso puedes tener dólar, así puedes tener dólar por aquí o también puedes tener un subrayado Ahora, el subrayado es útil si quieres separar dos palabras Entonces, si quiero tener el primer nombre de subrayado, aquí es donde se puede usar el subrayado ¿Bien? Entonces sí, esta es la segunda regla que menciona que los nombres de las variables, no tú, los nombres de las variables pueden contener letras, dígito, dólar y subrayado después del primer carácter Ahora la tercera regla dice que los nombres de las variables son sensibles a las claves, ¿de acuerdo? Entonces lo que esto significa es, si tienes dos nombres de variables, entonces déjame decirte si es nombre por aquí, bien, el nombre es, digamos, Alice por aquí. ¡Uy! Si es Alice por aquí, y digamos que tienes un nombre de variable más que es nombre por aquí. Bien y es Tom, digamos. Entonces estos son dos nombres de variables diferentes, y puedo mostrártelo. Entonces puedes decir Console dot log, y puedes imprimir el nombre aquí. Bien. Y puedes decir Consola, registro de puntos, y puedes decir nombre por aquí, algo así. Bien. Si ves la salida, verás a Alice y Tom como salida. Bien, entonces esta es la regla número tres en la que los nombres de variables distinguen entre mayúsculas y minúsculas. La siguiente regla dice que los nombres de variables no pueden hacer uso de una palabra clave reservada. Ahora bien, ¿qué son las palabras clave reservadas? Ahora bien, en los lenguajes de programación, generalmente, hay palabras con un significado predefinido. Por ejemplo, let es una palabra clave. Tiene un significado predefinido, y se usa para crear variables, ¿verdad? Entonces, si intentas crear una variable con el nombre let over here, bien, eso no está permitido. Se puede ver. Entonces, si pasas el cursor sobre esto, dirá let no está permitido ser usado en un nombre en declaraciones let o cons Bien, entonces esto no está permitido, bien, así que solo voy a comentar esto. Por lo que no se puede hacer uso de palabras clave reservadas. ¿Bien? Ahora, vas a estar como, Oh, tengo que memorizar todas las palabras clave reservadas, para nada, porque con la práctica, a medida que empieces a construir programas, sabrás qué son las palabras clave reservadas Bien, try es una palabra clave reservada, catch es una palabra clave reservada. Todo esto lo sabrás a medida que aprendes nuevos conceptos, y en realidad viene con la práctica. Incluso no tengo de memoria la lista de palabras clave reservadas. ¿Bien? A medida que sigas practicando, aprenderás, como, estas son todas las palabras clave reservadas, y en lugares donde te olvidas o no recuerdas, identificaciones te ayudarán, ¿verdad? Pero esta es una regla a tener en cuenta. Siguiente regla dice que los nombres de variables no deben tener especies. Si intenta agregar un espacio entre nombre de variable, eso no está permitido. Si trato de agregar un nombre de variable como nombre de pila es igual a digamos diez, se puede ver, esto no está permitido. Esto no está permitido. Hay que combinarlos. Es una sola palabra. Hay que combinarlo de esta manera. Nombre de pila. Esta convención por aquí donde tienes dos palabras en un solo nombre de variable y la segunda palabra tiene mayúscula se conoce como camello case. Bien. Entonces aquí estamos convirtiendo N en capital, poniendo N como capital aquí para que sea legible. Hay dos palabras. Eso es lo que estamos resaltando. Primero es una palabra y el nombre es una palabra. Esta es una buena práctica de nomenclatura por aquí. No debe tener espacio en un nombre de variable. Por lo que no se permiten espacios. Lo último por aquí es usar nombres descriptivos. Esto en realidad no es una regla, sino una buena práctica para tener nombres de variables como descriptivos. Por ejemplo, digamos si tengo un nombre de variable, si quiero almacenar, digamos H por aquí. Y si creo una variable nombre A por aquí y estoy almacenando H como digamos 22. No tengo 22 años, pero sólo le estoy dando un ejemplo a esto ¿Bien? Entonces digamos que estoy tratando de almacenar H y he creado este nombre de variable. Ahora bien, para cualquiera que lea este código no sabe A, qué valor tiene A. Por supuesto, está aguantando 22, pero ¿qué es? En realidad es una H, ¿verdad? Entonces, una mejor práctica aquí es tener un nombre de variable apropiado donde el nombre de la variable en sí mismo transmita qué tipo de valor tiene la variable. Entonces aquí, está bastante claro que esta variable se crea para almacenar la edad de un usuario. ¿Correcto? Entonces, si estás construyendo un proyecto de gestión de empleados o algo así, ¿de acuerdo? Y si alguien que lee tu código se encuentra con esta variable de edad, sabe que, oye, esto representa la edad del empleado, ¿de acuerdo? Entonces siempre es mejor tener variables nombres descriptivos de variables, yo diría, a diferencia y es mejor práctica tener descriptivos porque tener nombres de variables como X, A, B, C, X uno, X dos, esto no es una buena práctica en absoluto, ¿bien? Estoy totalmente en contra . Así que sí, esta es la regla de aquí o esta no es en realidad una regla. No obtendrás ningún tipo de error si lo declaras como A o X, pero esta es una buena práctica a seguir. Todo bien. Pocas cosas más que quería destacar sobre la creación de variables aquí es que también puedes declarar múltiples variables en una sola línea. Para que pueda tener A one. Bien. Un dos, y puedo tener A tres. Entonces estas son tres variables que se están creando en una sola línea, ¿de acuerdo? Y los has separado por comas. Incluso puedes inicializarlos por aquí. Entonces puedo inicializarles diferentes valores, cinco, diez, y no he inicializado A tres por aquí Incluso puedo inicializar A tres como 15, ¿de acuerdo? Y puedo agregar registro de consola por aquí. Así que déjame agregar rápidamente registro de la consola y mostrarte la salida. ¿Bien? Este es A uno. Bien. Esto es un dos, y esto es para un tres. Bien. Y si guardo esto, verán cinco, diez y 15. Ahora si me deshago de A dos valor por aquí. ¿Bien? Y si guardo esto, A dos no está definido, ¿de acuerdo? Entonces estoy trayendo de vuelta el valor A dos, que es diez por aquí. Así que absolutamente puedes tener múltiples variables creadas, declaradas e inicializadas en una sola línea Pero normalmente, no es así como lo hace la gente, ¿de acuerdo? Con JavaScript, la convención general es ir por esta vía. Entonces querrías tener A one, algo así. ¿Bien? Y luego tener A dos en una línea separada y luego tener A tres en una línea separada, algo así. Entonces esto es lo que se prefiere sobre este tipo de sintaxis porque esto es mucho más claro y fácil de leer, ¿de acuerdo? Ahora, estás viendo todas las marcas rojas por aquí. ¿Por qué? Porque los nombres de variables en un solo programa tienen que ser únicos, o al menos en un ámbito. Bien. Entonces dentro de un alcance, el nombre de la variable tiene que ser único. Entonces puedes ver aquí, estoy tratando de crear una variable nombre A uno, y puedes ver aquí A uno ya existe, ¿verdad? Entonces si agrego A 11 o e22e3, se me permite crear. Bien. Así que sí, asegúrate de tener nombres de variables únicos. Y esto también es una convención o una cosa, una regla, debería decir que debes estar al tanto de las variables. Incluso puedes encadenar asignaciones, así puedo crear variables como X, Y y Zt por aquí. Bien y puedo tener X es igual a Y es igual a Z es igual a 30, por ejemplo. Bien. Y todos ellos tendrán el valor de 30. Entonces, si quieres, te lo puedo mostrar. ¿Bien? Entonces es X. Bien. Y entonces aquí está Y, y aquí está s. Bien, yo guardo esto, ya verás 30, 30, 30. ¿Bien? Todos ellos tienen el mismo valor. ¿Bien? Entonces sí, eso es sobre las variables y cómo puedes nombrarlas y las reglas que se supone que debes tener en cuenta. Así que ten en cuenta estas reglas generales como tales, no es necesario por duro ellas. Está completamente bien. No te estreses al respecto. Pero una vez que comienzas a programar, bien, no quiero sorprenderme eso, oye, no me está permitiendo crear variables con este nombre. Por supuesto, no lo hará porque esa es una regla que debes tener en cuenta. ¿Todo bien? Y las identificaciones modernas, como dije, siempre te ayudan y están ahí para darte mensajes de error pormenorizados Entonces espero que esto haya sido útil. 13. var vs. let vs. const: Entonces ahora es el momento de que hablemos diferentes formas de crear variables en JavaScript. Entonces en JavaScript, puedes crear variables usando estas palabras clave. Has dejado const y estuviste por aquí, ¿de acuerdo? O también se pronuncia como Guerra. Así que la guerra por aquí es una forma más antigua de crear variables, ¿de acuerdo? Así puedes hacer uso de Guerra y puedes decir contador es igual a 100 y puedes decir Consola o Iniciar sesión por aquí y puedes ver contador por aquí. Bien, voy a agregar el punto y coma. Ahora puedes ver esto siendo impreso. Pero esta es una forma más antigua de crear variables. Por lo general, a partir de hoy, ahora sólo hacemos uso del let over here. Entonces, si quieres hacer uso de si quieres almacenar el mostrador por aquí, puedes decir 100 y puedes decir Consola, registro de puntos y un nuevo contador. ¿Bien? Entonces así es como se crean variables hoy en día. Ahora, ¿qué es const Entonces, si vienes de algún lenguaje de programación diferente, estarás al tanto de las constantes Entonces const es la palabra clave que permite declarar o crear constantes Ahora, constante es algo cuyo valor nunca cambia. Por ejemplo, aquí, para nuevo contador, puedo reasignar un valor, ¿verdad? Puedo decir contador es igual a 200. ¿Bien? Y si vuelvo a imprimir contador, voy a ver 200 como salida. Se puede ver por aquí. Bien. Pero habrá momentos o escenarios a los que te enfrentarás cuando no quieras que cambie el valor de una variable. ¿Bien? Y en ese caso particular, se puede hacer uso de const Entonces puedes decir const por aquí y digamos un valor de Pi Entonces se puede decir 3.14. Eso es lo que es el valor de Pi, ¿verdad? Ahora, sólo voy a copiar esto. Y se puede imprimir en el valor de Pi. Se puede ver 3.14. Ahora bien, si trato de cambiar este valor por aquí, si digo Pi es igual a 400. Bien. Y si trato de guardar esto, verás que obtienes un error de que no se permite la asignación a una variable constante, ¿de acuerdo? Y no ves la salida. Y tú también estás viendo. Entonces aquí también puedes ver cómo puedes depurar tu error. Entonces estás viendo el punto índice tiene la Línea número 17. Y esta es la línea número 17, se puede ver en el código de Visual Studio, está resaltando su número de línea. Alternativamente, incluso puedes hacer clic en esto, así puedes hacer clic en este es un enlace. Si haces clic en esto, serás llevado al código de aquí. Se puede ver esta es la línea donde está el error. Y si pasas el cursor sobre esto, verás que esta es una línea que está causando el error Asignación de error de tipo no capturado a una variable constante. Todo bien. Así que volvamos a Console por aquí. Entonces, si te deshaces de esta línea, sí. Y si ahorras, obtienes la salida como se esperaba. Todo bien. Tan constante es donde no quieres que se cambie el valor de la variable. Y hay muchos escenarios en los que las constantes necesitarás crear constantes Por ejemplo, si está trabajando en una aplicación bancaria, es posible que desee crear una variable o que desee almacenar un valor de tasa de interés. Ahora bien, la tasa de interés no cambia, ¿verdad? Está arreglado. Entonces siempre que sea fijo para tu banco, todo o el proyecto en el que estés trabajando. Si es fijo, entonces es posible que quieras tener una constante porque no quieres que tú mismo o cambies accidentalmente el valor de la tasa de interés en el programa más adelante. Y además, si estás trabajando en un equipo, no quieres que nadie más modifique ese valor. Entonces por eso estás mencionando explícitamente const por ahí, ¿de acuerdo? Y eso les dice a todos los demás que, oye, esto es constante y no se debe modificar. También una convención por aquí es siempre que estés declarando constante, normalmente lo es, verás que las constantes se declaran en mayúsculas Bien. Entonces, por ejemplo, Pi de aquí está en mayúsculas. ¿Bien? Entonces sí, eso es sobre let const y dónde ¿Bien? Así que recuerda, puedes crear variables usando todas estas tres palabras clave. Debes usar let cuando quieras crear una variable normal cuyo valor puedas cambiar. R es una forma más antigua de crear variables. No se usa hoy en día. ¿Bien? No vi desarrolladores usándolos a mi alrededor, ¿verdad? Es una forma más antigua. Así que olvídalo. Pero es bueno saberlo porque si estás trabajando en base de código heredado, si te unes a una empresa, si estás trabajando en bit de código heredado, lo mejor es saberlo, bien, que puedas actualizar, ¿verdad? Const, claro, si no quieres que el valor cambie para quedarte igual, quiero decir, bien, deberías hacer uso de este guardián Entonces espero que esto haya sido útil. 14. Tipos de datos: Oye, hay bienvenida, y ahora es el momento de que comencemos a hablar de tipos de datos en JavaScript Entonces tipo de datos no es más que tipos de datos define el tipo de valor que una variable en particular está sosteniendo. Ahora bien, si vienes de algún otro fondo de programación como Java, Python o algo así, entonces debes estar al tanto de qué tipos de datos son, ¿verdad? Y para los que no están conscientes, esta es una definición. Simplemente define el tipo de valor que tiene una variable. Ahora, los tipos de datos en JavaScript se clasifican ampliamente en dos tipos. Uno son los tipos primitivos, y luego tenemos tipos de referencia. Entonces comencemos primero a hablar de tipos primitivos. Ahora bien, estos son los tipos primitivos de tipos de datos en JavaScript. Entonces tienes número, tienes cadena, booleano, indefinido. Sí, undefined también es un tipo de datos, y tienes null. Entonces Número, como dice, representa tanto enteros como números de punto flotante ¿Bien? Entonces si quieres números, somos todos ellos, uno, dos, tres, e incluso números de punto flotante, los números con decimales como 1.1, 1.2, todos estos caen dentro de la categoría de número. Entonces tienes cuerdas. Ahora cadena no es más que la secuencia de caracteres como tu nombre y todo ese nombre de ciudad, nombre de país, todo esto viene bajo cadena. Booleano, que tiene solo dos valores, true o false, entonces tenemos undefined, lo que significa que no se asigna ningún valor, y luego tienes null Ahora null representa que el valor está ausente intencionalmente. Ahora déjenme demostrar el número por aquí. Entonces aquí, lo que puedo hacer es crear una variable llamada H. le puedo asignar un número. ¿Bien? Digamos que H es o digamos que H es 70 por aquí, cualquier tipo de número. Y puedes hacer registro de consola aquí, o, y puedes imprimir en cada uno. Bien. Y verás la salida por aquí. Se puede ver 70 es la salida. ¿Bien? Ahora bien, si quieres imprimir en qué tipo de variable es esta, entonces puedes hacer uso de type off. Entonces puedo decir tipo off. Se puede ver el para sugerir. Y agrega un espacio, y luego haces clic en Guardar. Entonces puedes ver que el tipo de esta variable es un número. ¿Bien? Ahora bien, si cambio esto a decimal, así que si digo 70.5 por aquí, claro, H no puede ir en decimal, pero seguiré haciendo esto con fines de demostración, verán que el tipo de H sigue siendo un número, ¿bien? Entonces, a diferencia de otros lenguajes de programación como Java, en Java, tienes tipos de datos separados para valores de punto flotante así como valores enteros. Pero en JavaScript, no existe tal cosa, ¿de acuerdo? Dependiendo de qué tipo de valor tenga, bien, puede ser un número, no un número puede ser un valor decimal o incluso un número entero. Entonces aquí, todo este número, este también será un número como vimos. ¿Bien? Entonces esto es lo que es el número. Y luego tenemos cadenas. Entonces aquí, si te desplazas hacia abajo, o, te mostraré qué son las cadenas. Entonces puedes decir let name por aquí y puedes agregar, digamos, John o Alice, lo que sea, y luego puedes decir Console, Tot og por aquí, y yo puedo decir nombre por aquí Bien. Ahora, claro, esto va a imprimir en John, pero puedes decir tipo de y puedes guardar esto y verás que se está imprimiendo la cadena. Y eso es porque el tipo de John no es más que una cuerda. ¿Bien? Ahora, voy a crear una variable más por aquí. Bien. Puedo crear una ciudad por aquí y también puedes asignar o incluso puedes crear una cadena usando un solo código. Entonces aquí estoy haciendo uso del doble de, ya verás. Incluso puedes hacer uso de un solo código por aquí. Ahora, la ciudad está diciendo José por aquí, bien. Y sólo voy a copiar esto por aquí, esta parte. Y en vez de nombre, puedes tener ciudad y puedes guardarla, verás todavía, estás teniendo una cadena siendo creada. ¿Bien? Así que la cadena se puede crear de múltiples maneras, ¿de acuerdo? Se puede ver usando códigos dobles y también usando código único. Ahora incluso puedes concatenar una cadena, ¿de acuerdo? Entonces se puede decir Consola. Lo siento, es confirmar el registro de puntos de la consola por aquí, y puedes decir que puedes decir nombre, bien. Y voy a decir más, y se puede ver mucho espacio en el medio, y se puede decir ciudad así. Verás a John San José. ¿Bien? Ahora bien, John Sin José no tiene sentido, pero si tienes variables separadas para nombre y apellido, puedes, por supuesto, concatenarlo de esta manera para obtener un nombre completo Ahora muchos desarrolladores, veo que prefieren códigos únicos para crear cadenas cuando se trabaja con JavaScript. El siguiente tipo de datos que tenemos es Booleano. ¿Bien? Ahora, Booleano simplemente representa dos valores, verdadero o falso Así que puedo crear un Booleano por aquí es o puedo decir que se ha graduado por aquí, y puede ser cierto por aquí y puedo decir Consola, punto, registro, y puedo decir que escribe apagado y puedo decir que se ha Ahora, verás a Booleano como la salida por aquí, ¿de acuerdo? Solo puedes escribir como graduado también, y verás una verdadera salida AE. ¿Todo bien? Ahora, los tipos de datos booleanos en realidad se usan mucho cuando estás tomando decisiones, decisiones es decir, si un estudiante se ha graduado, entonces probablemente puedas emitirle un certificado, ¿verdad? O puedes dejar de calcular la asistencia. Si el usuario es admin, así puedes tener un Booleano llamado I Si un usuario es administrador, entonces concédele acceso a ciertas funciones de la aplicación. Si no es administrador, entonces restringirlo de todas estas cosas. Entonces dependiendo del valor de la variable es admin se ha graduado, se toman las decisiones, y esto se está utilizando mucho en la toma de decisiones. ¿Todo bien? Entonces ese es un caso de uso para booleano. Simplemente representa verdadero o falso. Entonces tienes indefinido. Entonces undefined significa que la variable ha sido declarada pero aún no se le ha asignado un valor, ¿bien? Entonces puedes decir consola dot log por aquí. Y permítanme crear primero una variable. Bien. Entonces voy a tener una variable, vamos área. Y digamos que no tengo ningún valor para esto. ¿Bien? Voy a agregar área por aquí, bien y verás que se está imprimiendo undefined. ¿Bien? Ahora bien, si digo tipo de, entonces verás que se está imprimiendo undefined. ¿Bien? Entonces esto es indefinido en donde no se asigna ningún valor a la variable que se ha creado. Ahora el siguiente que tenemos es nulo que representa la ausencia intencional de un valor. Entonces digamos que tienes una variable que has creado y aún no quieres asignarle un valor. Así puedo crear una variable llamada valor vacío. Llamémoslo valor vacío en sí mismo. Bien. Y voy a tener nulo asignado a ello. Ahora bien, si digo consola dot log, y si digo Empty value, voy a ver null siendo impreso en la consola. ¿Bien? Ahora, puedo decir tipo de y guardar esto y verás que el tipo de esto es objeto. Entonces null es en realidad del tipo de objeto, ¿de acuerdo? Pero esto es en realidad un tipo de datos tipo en JavaScript. ¿Bien? Entonces sí, eso es sobre Null por aquí. ¿Bien? Voy a deshacerme de esto y vamos a tener esto impreso. Ahora antes de pasar al tipo de referencia, solo quiero destacar una pequeña cosa por aquí. Cuando dijimos tipo de valor vacío por aquí, que es nulo, vimos que el objeto se estaba imprimiendo. Pero en realidad, esta cosa está teniendo nulo dentro de ella, ¿verdad? Por lo que idealmente debería estar imprimiendo null si null es un tipo de datos. Bien. Ahora, solo quiero resaltar un artículo de desbordamiento de pila por aquí, o que dice, ¿Por qué es el tipo de objeto nulo, verdad? Ahora aquí, esto se propuso idealmente. Entonces, si vas a este enlace de aquí, esto se propuso cambiarlo tardó 1 segundo, no este, pero este es el indicado. Bien. Entonces esto se propuso cambiarlo a null por aquí. ¿Bien? Entonces este es el artículo completo de aquí, y esto es lo del desbordamiento de pila. Bien. Entonces esto se propuso cambiar, pero en realidad fue rechazado. Entonces, si ejecutas este código por aquí, seguirás viendo el objeto o, como salida. Pero eso no importa, ¿bien? Solo recuerda, puedes tener valores nulos en JavaScript. Se pueden tener variables con valores nulos. Eso es lo que importa. Ahora pasemos a los tipos de referencia. Entonces hablaremos de dos. Uno es objeto, y entonces tenemos algo llamado como Rs. Ahora, ¿qué es un objeto? Ahora, el objeto se usa realmente para almacenar datos complejos en forma de pares de valores clave. ¿Bien? Ahora bien, ¿por qué necesitamos almacenar datos complejos? Digamos que estoy construyendo una aplicación, y en mi aplicación, deseo hacer seguimiento de un usuario. Todo bien. Ahora, voy a decir dejar usuario. Entonces digamos que deseo hacer un seguimiento de los usuarios H. Digamos que los usuarios H es 22, y también deseo hacer un seguimiento del nombre de usuario por aquí. ¿Bien? Y digamos que el nombre es John, digamos, por ejemplo, bien. Ahora tengo dos variables que está representando a un solo usuario. Ahora, digamos que si mi aplicación escala y tengo cientos y miles de usuarios, ¿qué harías en ese caso? ¿Crearías esas tantas variables? Absolutamente no. ¿Bien? Entonces algo bueno es agrupar esto. Entonces estas dos propiedades o estas dos variables pertenecen a un solo usuario, ¿verdad? Entonces, ¿por qué no agruparlos y almacenarlos como objeto? Entonces lo que puedes hacer aquí es un mejor enfoque es tener persona, porque en vez de persona, voy a tener usuario porque estamos hablando de usuario por aquí, ¿bien? Voy a tener igual a ahora por aquí, lo que voy a hacer es que voy a tener un par de lugares rizados, algo así. Y dentro de esto, voy a tener pares de valores clave, que serán los atributos de este usuario en particular. ¿Bien? Entonces puedo decir el nombre, bien. El nombre es John por aquí. Bien. Y entonces puedo tener H y H es digamos 22. Todo bien. Ahora lo que puedo hacer es que si te desplazas hacia abajo, puedo decir que realmente puedo acceder a propiedades individuales. ¿Bien? Puedo decir usuario punto, y se puede ver nombre y H. tengo acceso a nombre y H, así puedo acceder a él de esta manera. ¿Bien? Un error que cometí por aquí, dije que es un par de valor clave, pero en realidad estoy teniendo igual a ser usado por allá. Eso no está bien. Así que voy a cambiar eso a Colin y ya verás por aquí, bien, Consola También me perdí DotLog. ¿Qué estoy haciendo? Así que ahora se puede ver que 22 se imprimen en la Consola, ¿verdad? Usuario punto H. También puede imprimir y acceder a nombre por aquí. Este es el nombre, ¿verdad? Si deseas cambiar el nombre, puedes cambiarlo nombre de punto de usuario y puedes cambiarlo a, digamos, Alice. Bien. Y entonces si intentas acceder de nuevo a esto, verás a Alice como nuevo nombre. Se puede ver aquí, ¿verdad? Ahora bien, esto es lo que puedes hacer con el objeto. Puede agrupar atributos relacionados. Ahora bien, esto es ligeramente diferente de lenguajes de programación como Java. En Java, no se puede crear un objeto directamente. Primero necesitas tener una clase, ¿verdad? Entonces primero define una clase que actúa como una plantilla, y luego instancias la clase y creas un objeto, y luego puedes tener variables o miembros de clase dentro de esa clase en particular Pero no es así como funciona en Ja Script. En Javascript, puedes crear directamente objetos como estos, y pueden tener pares de valores clave, y esto es realmente conveniente. ¿Verdad? Ahora, veamos qué pasa si intentas imprimir en, así que yo haré el control. Y voy a intentar imprimir en usuario por aquí. Bien. Ahora bien, si intentas imprimir en usuario, verás que estás viendo todo el objeto que se está imprimiendo. Nombre es Alice la edad es 22. ¿Bien? E incluso se puede acceder a las propiedades individuales. Ahora, una cosa más que quiero destacar por aquí es, dije, puede acceder a propiedades individuales como esta, ¿verdad? Esto es lo que vimos. Ahora bien, esta forma de acceder a propiedades individuales se conoce como notación de puntos porque estás haciendo uso del punto por aquí, un punto por aquí, el símbolo, ¿de acuerdo? Y lo estás usando con el objeto, y estás intentando acceder a su atributo. Entonces eso es lo que intentas hacer, ¿verdad? Y esta sintaxis sólo se conoce como notación de puntos. Todo bien. Entonces hay algo que puedes tener en mente, derecho. Pero sí, el quid sigue siendo que puedes crear objetos como este en Ja Script También puedes tener más atributos, como yo puedo tener atributo como ciudad por aquí, puedo decir San Francisco. Bien, algo como esto. Bien. Y se puede ver por aquí, esta siendo impresa. Y puedo acceder a la ciudad también usando notación de puntos. ¿Bien? Entonces eso es objetos en JavaScript. Pasemos a hablar de arreglos. Matrices Nowata. Ahora, arrays es un tipo de referencia en JavaScript que se utiliza para contener múltiples valores. Entonces digamos que estás construyendo un programa y quieres almacenar una lista de valores, o múltiples valores, digamos. Ahora bien, si estás dispuesto a guardar una lista de frutas, por ejemplo, sólo estoy tomando un ejemplo. Entonces, ¿cómo lo haces con las variables? Tendrás una variable, una frutal. Y lo vas a asignar a valor aquí, ¿verdad? Si quieres almacenar diez frutas, crearás diez variables. Pero no es así como se supone que debe ser. Eso no es conveniente, ¿verdad? Gestionar diez variables. En cambio, si quieres almacenar diez valores o múltiples valores, más de uno, entonces puedes crear una sola variable. Se le puede llamar una matriz. Puedes llamarlo como quieras, fruta, y será de tipo array. Entonces aquí, voy a hacer uso de corchetes por aquí. Y entre corchetes, voy a tener la lista de valores uno por uno. Entonces primero es, digamos manzana, puedo tener oops Puedo tomar plátano por aquí. Bien, y puedo tener, digamos, fresa Bien, algo como esto. Así que esto es una matriz por aquí, ¿de acuerdo? Y puedo decir consola dot log por aquí. Puedo decir fruta. Y si imprimo esto, verás manzana, plátano, fresa. Bien. Y echemos un vistazo al tipo de fruta. Bien. Verás que es un objeto por aquí. ¿Bien? Así que sí, así es como puedes crear y hacer uso de matrices en JavaScript. 15. Tipografía estática o dinámica: Ahora hablemos del lenguaje de programación de tipo estático y mecanografiado dinámicamente Ahora, primero, hablaremos de mecanografiado estáticamente. Entonces, ¿qué es el lenguaje de programación estáticamente mecanografiado? Entonces en este tipo de lenguaje de programación, es necesario declarar explícitamente el tipo de cada variable. Y una vez que hayas declarado el tipo de la variable, entonces el tipo de variables no se puede cambiar durante el curso de ejecución del programa. Y un muy buen ejemplo de esto es Java. Entonces, si has programado en Java, lo sabrás o incluso si no lo has programado, solo te voy a dar un ejemplo muy sencillo. Digamos si quieres almacenar cada uno de un usuario. ¿Bien? Entonces, 30 años, este es un código Java que estoy tratando de escribir, ¿de acuerdo? Ahora, por aquí, no se puede simplemente declarar las variables de esta manera. Es necesario especificar el tipo aquí. ¿Bien? Entonces dirás entero, cada uno es igual a 30. Ahora bien, no se puede asignar una cadena, a esta variable en particular. Todo bien. Esto simplemente no es aceptable en Java. ¿Bien? De inmediato te dará un error que, Hey, H ha sido declarado como entero y está esperando lo que durante el transcurso de la ejecución del programa, no se puede cambiar el tipo. Esto no está permitido. Incluso si hay algún tipo de cadena, bien, si agregas Java por aquí así, esto no está permitido porque esto sigue siendo una cadena. Entonces este es un ejemplo de cómo se comportan los lenguajes de programación estáticamente mecanografiados Si intentas hacer algo como esto, te darían un error de tiempo compilado. ¿Todo bien? Ahora, cuando se habla de JavaScript, JavaScript se escribe dinámicamente en lenguaje de programación Ahora, ¿qué significa esto? Entonces, en JavaScript, las variables pueden cambiar el tipo durante la ejecución del programa. ¿Todo bien? Ahora, antes que nada, reconozcamos que en JavaScript, no es necesario declarar el tipo de la variable que estás creando. Entonces digamos que si tengo una variable llamada mi variable y déjame decir, bien, voy a decir ahora mismo que no le he asignado ningún tipo de valor, ¿bien? Entonces voy a decir consola punto log por aquí. Diré mi variable, podemos verla impresa. Es indefinido, ¿verdad? Ahora bien, si hago uso del tipo de operador, y si intento imprimir el tipo de esta variable, verás que type es undefined. ¿Todo bien? Ahora, permítanme asignar esta variable en particular. Así que espera un minuto. Simplemente duplicaré esto, o. Ahora permítanme asignar esta variable particular A integer. ¿Bien? Entonces me desplazaré hacia abajo para una mejor visibilidad, y digamos asignarle uno, ahora el tipo de esta variable es número porque está sosteniendo un número en ella, ¿verdad? Entonces el tipo ha cambiado a número. Ahora déjame mostrarte una magia más. Si cambio esto por aquí, o, y si lo modifico para que sea una cadena, verás que el tipo ahora es cadena, lo que significa que está sosteniendo ahora una secuencia de caracteres. Y la cuerda puede ser cualquier cosa. Puede ser cadena como Jascript por aquí. Bien. Y ya verás esto. Y si duplico esta línea, déjenme duplicar esta también. Bien. Entonces, si me deshago de esto, bien. Y si guardo esto, verás que se está imprimiendo a Ja Script. Bien. Y también va a imprimir número, como algo normal. ¿Bien? Entonces puedes ver cómo el tipo de mi variable, que es una variable que hemos creado, está cambiando dinámicamente durante el transcurso de la ejecución del programa, ¿verdad? Y esta es una característica del lenguaje mecanografiado dinámicamente, ¿verdad? Y JavaScript se clasifica como lenguaje mecanografiado dinámicamente Y este es el ejemplo o una evidencia de cómo se comporta. Ahora aquí, déjame darte un ejemplo más en lugar de string y number, si trato de asignarle un booleano, digamos, Si lo guardo, verás que es booleano y es verdad. Ahora, un punto a tener en cuenta aquí es que no estoy creando nuevas variables. Es la misma variable, que se ha creado una vez, y se está reutilizando y se le asignan diferentes tipos de valores, ¿verdad? Entonces está cambiando sobre la marcha durante el transcurso de la ejecución. Entonces eso es Javascript. Entonces hay que recordar que en JavaScript las variables pueden cambiar el tipo durante la ejecución del programa, ¿de acuerdo? Y al declarar una variable en JavaScript, no es necesario especificar el tipo Entonces es un lenguaje mecanografiado dinámicamente. Ahora, hemos utilizado este tipo de operadores. Es un operador, en primer lugar. Bien, hemos usado este tipo de palabras clave, yo diría, bastantes veces. Y el uso del tipo de palabra clave, ya sabes, como se usa para obtener el tipo de una variable por aquí. Para eso lo estamos usando, ¿verdad? Una cosa que me gustaría destacar por aquí, este tipo de es un operador. Dentro de Ja guión, ¿de acuerdo? Entonces es un operador. He usado este término como vamos a hacer uso del tipo de operador y todo. No quiero que los alumnos se confundan. Entonces por eso estoy mencionando explícitamente que se trata de un operador en JavaScript, ¿verdad? Y espero que este ejemplo sea bastante claro en cuanto a cómo Ja Script es un lenguaje de programación mecanografiado dinámicamente, y espero que esto sea útil 16. Expresiones y operadores: Entonces ahora es el momento de que hablemos de algunos conceptos más como expresiones, literales y operadores en JavaScript. Ahora, ¿qué son las expresiones? Ahora, expresión es cualquier unidad válida de código que produce un solo valor. Por ejemplo, por aquí, si escribo en la consola, si digo tres más tres, obtengo salida como seis. Ahora bien, esta es una expresión, por esta afirmación, produjo un solo valor, ¿verdad? Entonces esta es una expresión. ¿Qué es un literal? Un literal es un valor fijo que estás escribiendo directamente en el código. Entonces aquí, tres es un literal. ¿Bien? Entonces cuando digo let A es igual a 30, por ejemplo, 30 por aquí es un literal, y todo esto es una expresión, ¿verdad? Porque esto es una tarea por aquí. ¿Bien? Entonces lo que está sucediendo aquí es que el valor en el lado derecho se está asignando a la variable en el lado izquierdo. ¿Bien? Entonces eso es lo que es un literal. Ahora bien, hay múltiples tipos de literales. Por ejemplo, hay algo llamado como puedo decir hay algo llamado como si me acercara por aquí. Hay literal numérico, por lo que este es un literal numérico. Hay un literal basado en cadenas, así que puedo decir JavaScript por aquí. Esto es cadena por aquí, ¿verdad? Incluso puedes tener literales booleanos. ¿Bien? Entonces puedo decir verdad por aquí. Este es un literal booleano Bien. Entonces los literales pueden ser de muchos tipos, literal numérico literal literal, literal booleano, y depende del tipo de valor que estés agregando en el código Ahora, estoy agregando esto en la consola, pero en realidad, estarías usando esto en el código. Entonces, si dices let A es igual a true, así que cierto aquí es Un literal booleano Espero que esto tenga sentido, ¿verdad? Entonces eso es lo que es A literal. Ahora bien, tenemos claro la expresión, la expresión es cualquier cosa que se evalúe a un solo valor Entonces, por ejemplo, si estás haciendo algún tipo de cálculo aritmético o si estás inicializando algo, cualquier tipo de cálculo o inicialización que te esté dando un valor, eso es lo que es una expresión Ahora bien, ¿qué son los operadores? Ahora, los operadores en JavaScript son símbolos que realizarían operaciones en las operaciones. Bien. Entonces un par de terminologías por aquí Así que además es un operador por aquí, ¿de acuerdo? La división es un operador menos es un operador. La multiplicación, que se representa de esta manera como un símbolo de asterisco también es un operador Entonces estos son todos los operadores que también estamos usando en la vida real para hacer adiciones, abstracción, división y multiplicación, ¿verdad Entonces estos también son operadores en lenguajes de programación como JavaScript. Ahora, siempre que quieras hacer uso de estos operadores, lo que harías es decir tres más tres, ¿verdad? O podrías hacer uso de variable, ¿verdad? Entonces se podría decir A más B, donde A y B tienen algunos valores respectivamente. Bien. Entonces aquí, lo que está sucediendo es que estás haciendo uso de este operador, entonces tu plus es el operador. Pero estos dos valores sobre los que se está realizando la operación se conoce como Opernt Bien, repito por aquí. Entonces aquí, plus es un operador. Es un símbolo. trata del tipo de operación que quieres hacer. Quieres agregar dos cosas, ¿verdad? Ahora bien, las dos cosas que estás agregando tres por aquí, tres, tres, y por aquí, A y B, estas son oprints porque la operación de suma se está realizando en estos dos valores Espero que esto tenga sentido. Todo bien. Entonces por aquí, si ves tres más tres produjeron seis. Entonces tres y tres son oprints y plus es un operador. ¿Verdad? Entonces eso es lo que dice esto. Los operadores en JavaScript son símbolos que realizan la operación. ¿Cuál es la operación que se realiza? Adición. Realiza la operación en opernos. ¿Cuáles son los opernos? Tres por aquí en este caso, y A y B en este caso, ¿verdad? Y son símbolos, dice. Entonces es un símbolo más división menos multiplicación. Todos estos son símbolos, ¿verdad? Ahora bien, esto es lo que son los operadores, ¿verdad? Y dependiendo del lenguaje de programación que estés aprendiendo, los operadores tendrán clasificación. Entonces hay tipos de operadores en JavaScript. ¿Bien? El primer tipo son los operadores aritméticos Ahora, claro, operador, los operadores básicamente se utilizan para realizar cálculos aritméticos, ¿verdad? Como suma, resta, multiplicación, división, tienes módulo, tienes incremento, decremento. Todos estos son operadores aritméticos, ¿de acuerdo? Operadores de asignación, ¿de acuerdo? Entonces los operadores de asignación son iguales a. Si estás asignando algo, estás haciendo una asignación de suma, estás haciendo una asignación de resta, asignación multiplicación o asignación basada en división Ahora, después de los operadores de asignación vienen los operadores de comparación, ¿verdad? Ahora bien, qué son los operadores de comparación. Operadores de comparación como su nombre indica, se usa para comparar dos cosas, ¿ verdad? O comparar opernos. Entonces se tiene igualdad, igualdad estricta, desigualdad, entonces desigualdad estricta, mayor que menor que, mayor que igual a, menor que igual a. ¿Bien? Estos son los pocos operadores de comparación que existen, ¿verdad? Operadores lógicos. Ahora bien, estos se utilizan para realizar operaciones lógicas, y o nudo, ¿verdad? Tiene operadores uniarios, que es incremento, decremento tipo de nudo lógico, y así sucesivamente Y entonces tienes operadores ternarios, o, que tiene este tipo de sintaxis ¿Bien? Entonces, si vienes de algún otro lenguaje de programación como Java, estarías al tanto de lo que es el operador ternario, y tienes uno similar en Ja Script Pero si no estás al tanto de ningún otro lenguaje de programación, eso está absolutamente bien. Estaremos cubriendo todo esto. Todo bien. Ahora bien, estas son la clasificación, derecha, y esto es lo que era el concepto de expresión, literal y operadores. Entonces espero que hayas podido seguirlo hasta ahora, y espero que esto haya sido útil. 17. Operadores aritméticos: Entonces ahora es el momento de que pasemos por los operadores aritméticos en JavaScript. Entonces esta es una lista de operadores que se clasifican como operadores aritméticos Por supuesto, debes estar familiarizado con bastantes de ellos resta de gradación, división de multiplicación Como si también hubiéramos estado usando esto en nuestra vida real. Entonces voy a pegar un ejemplo por aquí, bien, eso nos dará una idea de cómo la suma, la resta, la multiplicación y la división pueden dar el resultado Entonces, si guardo esto, ya verás por aquí. Bien, déjame alejarme un poco. Bien, para que puedas ver el resultado correctamente. Así se puede ver que el resultado de la suma es restar resultados siete, multiplicar 24, y la división es cinco. ¿Bien? Ahora bien, si cambio esto a así claro, esto es claro, resultado de suma, cinco más tres. Bien, diez menos tres, está dando siete. ¿Bien? Si cambio esto a 13, verás que la salida va a negativa. Entonces eso también es posible. ¿Bien? Si te desplazas hacia abajo por aquí, resultado de la multiplicación es sencillo, bien, será un número positivo a menos que y hasta que estés tratando de multiplicar por cero, la salida sería cero ¿Bien? Si te desplazas hacia abajo el resultado de la división, estás obteniendo un número por aquí, ¿de acuerdo? B 20 es divisible por cuatro. Ahora bien, si cambio esto a siete, digamos, mira el resultado de la división aquí está en decimales. Bien. Entonces, si no es un número entero, obtendrás un resultado decimal como resultado de la división. Bien. Ahora bien, se trata de multiplicar, restar, sumar. Estas son las operaciones aritméticas estándar que también hacemos en nuestro día a día. ¿Qué es el módulo? Entonces, si vienes de un lenguaje de programación como Java, debes estar al tanto del módulo. Pero por si acaso no eres consciente de lo que es el módulo, solo te voy a dar una demo, Bien, entonces voy a tener módulo por aquí. Bien. Y el operador de módulo se representa con la ayuda de un símbolo porcentual por aquí. Bien. Y aquí, voy a tener módulo escrito. Bien, algo así. Ahora, veamos qué es el módulo, ¿de acuerdo? Entonces Módulo por aquí y voy a imprimir en la salida como resultado de módulo. Ahora en vez de división, voy a cambiar esto a porcentaje. Bien, porque estamos haciendo uso del operador de módulo por aquí. También a veces algunas personas lo pronuncian como módulo módulo, o Hay diferentes formas de decir esto. Así se puede ver que el resultado del módulo es cero en este momento. ¿Bien? Entonces lo que hará el módulo es que te dará el resto después de realizar la división. División hace es, divide y te da el resultado. Pero el módulo realizará la división y te dará el resto. Eso es lo que encomia. Entonces digamos que si dices 20 es claramente divisible por cuatro, entonces la salida será cero También es divisible por cinco, por lo que la salida será cero, se puede ver Pero con seis, obtendrás la salida como dos, ¿de acuerdo? Porque 18 es divisible por seis, ¿verdad? Seis tres son 18, y luego dos es el resto. Entonces vas a conseguir el resto como resultado, dos por aquí. ¿Bien? Si intentas dividir esto por siete, deberías obtener seis como salida. Se puede ver seis porque 14 es divisible por 772 14, ¿verdad? Y entonces seis es el resto, ¿verdad? Entonces seis es lo que estás obteniendo como salida. Entonces básicamente lo que hace Módulo es que te da el resto después de realizar la división. Bien. Ahora, me preguntaría por qué querría un operador así. Como por qué quieres un resto después de realizar el di Bien, hay múltiples casos de uso y escenarios o requisitos en los que te gustaría realizar o quieres obtener el resto del resultado. Un ejemplo que te puedo dar aquí es identificar el número par e impar. ¿Bien? Entonces digamos si estás escribiendo algún código o un programa donde quieras identificar si el número dado es par o impar. Lo que harías normalmente es que harías uso de este operador de resto de aquí, módulo, ¿de acuerdo? Entonces siete módulo y lo harás con dos. Bien. Entonces obtendrás la salida como una sola. Entonces este es un número impar. ¿Bien? Seis módulo dos, obtendrás cero como el resto. Bien. Entonces lo que esto significa es, significa que seis es un número par. ¿Bien? Así que de esta manera puedes hacer uso del módulo, y podrás obtener el resultado. Entonces se trata de módulo. También tienes algo llamado incremento, ¿de acuerdo? Entonces me desharé de esto. ¿Bien? Esto es incorrecto ahora. Bien. Ahora te voy a mostrar algo llamado como incremento. Ahora el operador de incremento se usa o se representa algo así, más más ¿Bien? Entonces déjame desplazarme hacia abajo. Y digamos, si tienes un valor, digamos, tengo una variable X es igual a cinco, ¿bien? Y puedo decir consola dot log por aquí, puedo imprimir la salida de X, o el valor de X. Verás cinco como salida. ¿Bien? Ahora, déjenme también conseguir esto por aquí. ¿Bien? Voy a conseguir esto y puedo decir en resultado incrementado. ¿Bien? Ahora bien, esto aún no se incrementa. Estás asignando cinco y estás obteniendo cinco como salida ¿Bien? Pero lo que puedes hacer es aumentar el valor de digamos si quieres aumentar el valor de X en uno. Entonces hay dos enfoques que puedes decir que X es igual a X más uno. ¿Bien? Esto es factible. Si guardas esto, obtendrás salida como seis, ¿de acuerdo? Pero hay una forma alternativa en la que simplemente puedes hacer uso de este operador de incremento y puedes obtener el mismo resultado de manera taquigráfica Entonces esta es una versión taquigráfica de esta afirmación de aquí Estás diciendo que X es igual a X más uno, pero en realidad solo estás incrementando el valor de X. Entonces, ¿por qué no hacerlo de esta manera? Bien. Y puedes incrementarlo tantas veces como quieras. Así puedo incrementarlo uno más, y verán la salida como siete. Bien. Entonces esto es lo que es el operador de incremento. Es una versión abreviada de incrementar el valor de una variable ¿Todo bien? Se trata de incremento, entonces tienes algo llamado decremento Ahora el decremento también funciona de manera similar, ¿bien? Entonces aquí, si me dejo simplemente copiar esto. Bien. Entonces en vez de X, lo que voy a hacer es que voy a tomar un ejemplo de Y por aquí. ¿Bien? Y déjame darte la versión larga de esto. ¿Bien? Entonces lo que haría es deshacerme de esto y diría, Y es igual a Y menos uno. ¿Bien? Entonces esta no es una versión taquigráfica, ¿de acuerdo? Y aquí, voy a decir resultado decrementado. Bien Y estoy imprimiendo el valor como Y. Bien. Ahora bien, si guardo esto, verás que el resultado decrementado es cuatro, ¿verdad Ahora, puedo hacer uso del operador decremento por aquí. Bien, y puedo decir por aquí, y menos menos. Me va a dar el mismo resultado. Puedo hacer esto dos veces o tantas veces como quiera, bien. Entonces esencialmente, es similar al operador de incremento, bien, pero se usa para decrementar el valor. Bien. Ahora, el operador de incremento se usa para incrementar el valor de una manera taquigráfica, como vimos, y el operador de decremento se usa para decrementar el valor de manera taquigráfica, como estamos viendo aquí. Bien. Entonces estos son los operadores aritméticos que existen en JavaScript. Bien. Espero que esto quede claro, y de todo esto es importante, entiendes. Entonces el resto de los operadores son simples pero yo diría es importante que entiendas cómo funciona este modelo. Y te recomendaría probar también algunos ejemplos en la consola del navegador. Puedes escribir directamente. No necesitas código de Visual Studio para eso. Entonces puedes escribir directamente por aquí y puedes ver cómo se comporta este operador con diferentes conjuntos de valores ¿Bien? Entonces espero que esto sea útil y hayas podido seguirlo. 18. Operadores de asignaciones: Estos son los operadores de asignación que tenemos en Ja Script, y comencemos a hablar de cada uno de ellos. Entonces esta primera es algo que hemos visto bastantes veces hasta ahora. Se utiliza para asignar el valor del lado derecho a la variable en el lado izquierdo. Ahora he añadido un ejemplo muy sencillo que ilustra lo que es esta tarea. Bien, debería ser muy fácil y para nada difícil de entender para ti. ¿Bien? Entonces solo estoy asignando un valor de cinco a esta variable A, y solo estamos imprimiendo este valor ¿Todo bien? Entonces tenemos asignación de adición. ¿Bien? Entonces lo que esto hace es que también realiza la adición junto con la asignación. Entonces déjame darte un ejemplo de esto. Entonces voy a agregar algo de código aquí. Puedes ver la asignación adicional aquí en la práctica. He creado una nueva variable, llamándola B. Y lo que estoy haciendo aquí es que quiero agregar tres a B. Así que una forma es que voy a hacer algo como esto. ¿Bien? Entonces déjame mostrarte esto primero. Bien. Y voy a comentar esto. Ahora bien, si guardo esto, verás la salida como 13. Se inicializó a diez, pero la salida es ahora de 13. Todo bien. Ahora bien, si comento esto, y si descomento esto, esto es lo mismo que escribir esto. El resultado sería el mismo. Entonces lo que esto hace es que es equivalente a B es igual a B más tres. ¿Correcto? Entonces agrega tres a B primero, y luego asigna el valor total o el resultado a la variable B. ¿Bien? Y luego lo estamos imprimiendo para ver la salida. Entonces así es como funcionan juntas la suma y la asignación. Esto es esencialmente una taquigrafía o una manera conveniente debería decir, para realizar la adición o agregar un número a una variable en particular Ahora como tenemos asignación de suma, también tenemos asignación de resta Lo que esto hace es que esencialmente hace el mismo trabajo de lo que hizo la asignación de suma. Digamos si tenemos esta variable 15 y si quieres restarle cinco. O puedes tener un testimonio así, bien. Voy a guardar esto y verás diez por aquí, bien, o puedes comentar esto, y verás el mismo resultado por aquí usando esta asignación de sustracción taquigráfica Entonces es esencialmente realizar la resta primero de la variable y luego está asignando el valor a la variable, y luego la estamos imprimiendo, ¿verdad Entonces eso es lo que es la asignación de sustracción. A continuación viene la asignación de multiplicación. Bien. como una versión taquigráfica de multiplicar un valor en sí mismo También es una versión similar, como una versión taquigráfica de multiplicar un valor en sí mismo, ¿de acuerdo? O no en sí mismo. Esencialmente, en realidad estás multiplicando un valor a una variable y luego estás asignando ese valor a la ¿Bien? Ahora esto equivale a, como pueden ver aquí en los comentarios que he escrito, D es igual a D en dos, así que solo voy a demostrar esto primero. Bien. Verás que la respuesta es 12. ¿Bien? Pero si comento esto y si descomento esto, volverás a ver la salida como 12 en sí Entonces lo que esto está haciendo es que se expande a D es igual a D en dos. Bien. Y esta es solo otra versión taquigráfica de realizar lo mismo, pero de manera breve y concisa Tienes algo llamado como asignación de división, si ves por aquí. ¿Bien? Es una manera similar en la que permite dividir un valor o dividir una variable o valor en una variable por algo, y luego asignar el resultado a la propia variable. ¿Bien? Entonces, si guardo esto, verás la salida como cinco, ¿de acuerdo? Entonces estos son todos los operadores de asignación que existen en JavaScript. 19. Operadores de comparación: Entonces ahora es el momento de que hablemos de los operadores de comparación en JavaScript y veamos qué significa cada operador. Entonces vamos a repasar la lista y veremos algunos ejemplos. Entonces primero, hablaremos del operador de igualdad. Ahora, ¿qué es operador de igualdad? Por supuesto, el operador de igualdad compara dos opernos y devuelve una salida Pollan Ahora bien, una cosa que quiero destacar por aquí, todos los operadores de comparación te darán booleano como resultado porque están acostumbrados a hacer comparación, ¿verdad? Eso es lo que dice la categoría, operadores de comparación. Entonces, ya sea que la comparación sea verdadera o falsa. Eso es lo que va a ser la salida. Ahora, como ejemplo, puedo decir consola punto log por aquí, ¿de acuerdo? Y puedo decir que cinco es igual a cinco aquí. Se puede ver que el valor es verdadero. Ahora bien, si hago esto con seis, claro, me va a dar falso. Ahora bien, esto incluso puede funcionar con variables. Entonces digamos si tenemos A y si tenemos B por aquí, y P tiene seis. ¿Bien? Y si duplico esta línea, esto también puede funcionar con las variables de aquí. Entonces puedo decir P por aquí, y esto puede ser A. Entonces verán que la salida es falsa. ¿Bien? Pero si cambio esto a Pi, claro, la salida va a ser cierta. ¿Bien? Ahora bien, así es como funciona un operador de comparación. Ahora, ¿qué pasa si tienes una cadena en comparación? Digamos que si estoy haciendo Console dot log, cinco es igual a seis. Si convierto esto en una cadena, digamos que esto no es un entero, pero en realidad esto es cadena, ¿verdad? Ahora, déjame mostrarte también que también es una cuerda. Así que Consola punto registro por aquí. Voy a hacer uso de tipo de ella. Puedes ver que esto es una cuerda, ¿verdad? Entonces si hago una comparación de esta manera, verás que me cae por aquí. Bien. Ahora bien, ¿qué pasa si convierto esto esencialmente a cinco así? Esto me va a dar verdad. ¿Bien? Sólo voy a mover esto hasta el final. Entonces eso es más fácil de ver en la consola. Entonces el resultado es cierto por aquí. Ahora bien, ¿por qué es verdad? Porque aquí estás haciendo uso del número Ups. Aquí estás haciendo uso del número, y aquí esta es una cadena. ¿Por qué es verdad? Porque lo que sucede es internamente, hay una conversión que está pasando de una cadena a un número, y así es como se está manejando esta cosa. ¿Todo bien? Entonces esa sería la salida, ¿verdad? Espero que esto tenga sentido. Entonces se trata de igualdad, bien. Ahora tienes algo que se llama una estricta igualdad. Ahora bien, esto es diferente de otros lenguajes de programación como Java. Si vienes después de aprender Java, hay algo que será nuevo para ti. ¿Bien? Entonces lo que pasa es, dijimos que si Phi es igual a la versión string de cinco, está imprimiendo como verdadero, ¿verdad? Ahora bien, qué pasa si hago uso de estricto operador de igualdad, lo que significa igual a tres veces. ¿Todo bien? Ahora bien, si guardo esto, vas a obtener una salida SE falsa. Bien. Entonces lo que pasa es lo estricto que funciona la igualdad es que también comprobará que comparará el valor, y también comprobará el tipo, lo que significa que no hay conversión de tipo que se realice. Y si los valores son de diferentes tipos, la comparación devolverá inmediatamente false. ¿Bien? Porque a pesar de que los valores son iguales, el tipo es diferente. Entonces eso va a fallar. ¿Todo bien? Ahora bien, si esto es seis, por alguna razón, esto también te va a dar falso. Para que esto sea cierto, si esto es, para que esto sea cierto, esto tiene que ser del mismo tipo, y ahí es cuando te vuelves verdad por aquí. Todo bien. Ahora, ten esto en mente, bien, esta igualdad, estricta igualdad como esta cosa de aquí, la conversión implícita por aquí o la conversión automática por aquí de cadena a número Bien, ten en cuenta estas cosas porque cuando estás haciendo cada vez que escribes programas Jascript reales, código de script Ja real, entonces estarás haciendo mucho uso de estos operadores de comparación dentro de las condiciones, y ahí es donde esto importaría, ¿verdad Entonces esto es una igualdad estricta. Recuerden, la igualdad estricta es estricta. ¿Todo bien? El nombre dice que es estricto, y comprueba tanto el tipo como el valor. Entonces si el tipo es el mismo por aquí porque ambos son string, si cambio el valor, mira esto es falso ahora. ¿Bien? Entonces espero que esto tenga sentido. Bien, ¿qué es la igualdad estricta? Y la igualdad no es estricta, ¿de acuerdo? Porque no hay estricto en su nombre. Entonces en realidad va a ver el valor. Y si los valores de diferente tipo, se convertirá. Voy a hacer una conversión, y luego se mostrará el resultado, ¿verdad? Entonces esa es la diferencia entre dos. Entonces tienes desigualdad. Ahora bien, la desigualdad es bastante sencilla. Bien. Entonces te voy a dar un ejemplo. ¿Bien? No voy a crear variables, pero de inmediato te voy a dar un ejemplo por aquí Entonces, ¿cinco es igual a tres? ¿Cuál crees que sería la salida? Cinco es igual a tres. La salida sería falsa, claro, ya ves cae por aquí. Cinco no es igual a tres. No es igual a tres, no a tres. Lo siento. Entonces, si conviertes esto en desigualdad por aquí, o y si guardas esto, obtendrás dos como salida porque esto es solo lo contrario de la igualdad. ¿Bien? Entonces aquí estamos comprobando si los valores ambos no son iguales entre sí. Si son iguales entre sí, entonces esto va a resultar en caídas por aquí. Derecha. Espero que esto tenga sentido ahora, ¿de acuerdo? Entonces esto es desigualdad. Entonces tienes algo llamado como desigualdad estricta. Ahora, ¿qué es la desigualdad estricta? Por supuesto, vimos una versión estricta de la igualdad. Esto es una estricta aversión a la desigualdad. Sencillo. Bien. Así que aquí, si ves, bien, déjame duplicar esta línea, ¿de acuerdo? Entonces si duplico esta línea, ahora, esto nos va a dar falsas, claro. Bien. Pero si esto es una cadena, entonces también, esto nos va a dar una falsa. ¿Bien? Porque ambos no son iguales entre sí. ¿Bien? Ahora bien, ¿qué pasa si cambio a una desigualdad estricta, bien? Si hago algo como esto, verás que esto vuelve verdad. Todo bien. Ahora aquí, claro, cuando estábamos haciendo de la manera normal de la desigualdad, sin usar estricto. Bien. Entonces aquí lo que estaba pasando es que solo se estaba comparando el valor y no el tipo. Pero aquí, también se está comparando el tipo. Entonces el valor es el mismo, pero el tipo no es igual, así que por eso está volviendo verdadero. Así es como funciona. Espero que esto tenga sentido, ¿o? Y si duplico esto justo por aquí, entonces van a ver si cambio esto a cinco, claro. Bien, volverás a ver la verdad, ¿de acuerdo? Pero si esto es cinco ahora, bien, si cambio esto a cinco, algo así, verás que cae por aquí. Bien. Así que esto es una desigualdad estricta, ¿de acuerdo? Esta es la versión estricta, y esta es una versión suelta. Entonces normalmente en Internet, verás que diferentes términos utilizados con esto pierden la igualdad, pierden la desigualdad, la igualdad estricta, la desigualdad estricta. ¿Todo bien? Entonces tienes mayor que disminuir. ¿Bien? Así que mayores que la lección son bastante sencillos. Déjame copiar estos lúpulos. Déjame copiar estos dos. Bien. Vendré por aquí y agregaré un Voy a convertir esto en comentarios, ¿de acuerdo? Ahora, echemos un vistazo a esto, ¿de acuerdo? Así que este es un registro de puntos de consola bastante sencillo. Bien. Yo cinco mayor que tres. ¿Lo es? Entonces después de la comparación, lo que este operador mayor que hará es que devolverá unos resultados booleanos Entonces es cinco mayor que tres, sí. Entonces volvería verdad, ¿verdad? Se puede ver la verdad por aquí. Bien. Ahora bien, si agrego un número mayor en el lado derecho. ¿Bien? Entonces digamos que aquí tenemos siete. Y si guardo esto, va a devolver pliegues porque cinco ya no es mayor que siete. Esto es mayor que. Por supuesto, menos de lo que es exactamente lo contrario de esto, ¿de acuerdo? Y sólo voy a añadir menos y por aquí. Bien, ya se puede ver que la condición está invertida. Entonces la condición anterior es falsa, y entonces es verdad porque siete es mayor que cinco. ¿Tres es mayor que cinco? No. Perdón, ¿yo tres mayor que cinco? Sí, entonces no lo es, en realidad, ¿verdad? Entonces es menos que de hecho. Entonces es por eso que está dando salida falsa SE. Todo bien. Entonces espero que esto tenga sentido. Ahora por aquí, esta es una versión de mayor que y menor que, ¿de acuerdo? Entonces esto en realidad es tener igual a símbolo en él. También voy a comparar para la igualdad de ción. Si tomas este ejemplo por aquí, si tienes cinco en ambos lados. ¿Bien? ¿Cuál es la salida que puedes esperar? Puedes ver aquí que estás obteniendo salida como falsa por aquí. ¿Bien? Falso porque ambos son realmente iguales. Por lo que esta condición no coincide. Pero si actualizas esto igual a por aquí, o menor o igual a. Esto va a volver cierto. Se puede ver. Bien. Incluso puedes hacer uso de esto por aquí, puedes ver que esto está volviendo verdad. Bien. Entonces espero que esto tenga sentido en cuanto a cómo funciona esta cosa, y espero que tengan claro los operadores de comparación. Así que ten en cuenta, los operadores de comparación devolverán un valor booleano después realizar la comparación de los Ahora, hay múltiples operadores de comparación como la igualdad, la desigualdad. Tenemos una versión más estricta de estos, que también toman en consideración el tipo porque la versión normal no toma en consideración el tipo, ¿verdad Entonces tienes mayor que menor que mayor que igual o menor que igual a. ¿Bien? Entonces espero que esto tenga sentido, y espero que esto haya sido útil. 20. Operadores lógicos: Entonces ahora es el momento de que comencemos a hablar de los operadores lógicos. Ahora, hay tres operadores lógicos que existen, y eso es lo que vamos a explorar. Entonces, ¿qué son los operadores lógicos, en primer lugar? Entonces los operadores lógicos se utilizan para trabajar con valores Pollan, que es verdadero y falso, y permiten combinar o invocar estos valores, Entonces hay tres de ellos. Se puede ver lógico y cuál se representa usando este símbolo en particular. Tienes lógico o, que se representa de esta manera, nada lógico, que se representa usando una exclamación Todo bien. Entonces hablemos de lógica y operador. Ahora, ¿qué es lógico y operador? Nueve comentarios, he agregado algunos puntos sobre lógica y así el lógico y operador comprueba si ambas condiciones son verdaderas. ¿Bien? Funciona en dos condiciones antes que nada, así que eso es lo que hay que anotar aquí. Tanto las condiciones, es decir, está trabajando en dos condiciones, y si ambas son verdaderas, entonces la salida es verdadera. ¿Bien? Así se puede ver que devuelve verdadero sólo si ambos son ciertos. De lo contrario, devolverá falso. ¿Bien? Ahora bien, si tengo que demostrar esto en forma de ejemplo, voy a decir consola dot log por aquí. ¿Bien? Cierto. Y puedes hacer uso de lógica y por aquí y simplemente puedes codificar los valores booleanos Bien. Puedo ver la verdad como el resultado. ¿Bien? Ahora bien, si duplico esta línea y si uno es falso por aquí, en este caso, verá falso como salida. Entonces, para sacar la verdad de esto, ambos tienen que ser ciertos. ¿Bien? Ahora bien, cualquiera de ellos es falso, va a resultar en, como, falso como salida. ¿Bien? Entonces si digo falso por aquí, verás que se pone falso porque ambos son falsos, ¿verdad? Ahora bien, si el primero es falso, pesar de que obtendrá una salida de SA falsa. Entonces nos estamos haciendo realidad sólo en un caso cuando ambos son ciertos. ¿Bien? Ahora bien, esto es muy útil si quieres evaluar dos condiciones, ¿bien? Ahora bien, estos dos valores o dos operantes en los que estamos operando pueden ser cualquier tipo de expresión que se evalúe como un valor booleano ¿Bien? Ahora, déjenme darles un ejemplo. Digamos que estás construyendo un programa, y digamos que es un sitio web que es para gestionar un concierto. ¿Bien? Así que imagina para iniciar sesión en el concierto, necesitas tener tanto tus boletos como la identificación. ¿Bien? Entonces lo que voy a hacer es por aquí, voy a tener ejemplo escrito por aquí. Bien. Ejemplo. Bien. Ahora, digamos que tenemos tiene tickets como una de las variables booleanas Bien. Digamos que su valor inicial es cierto. Bien. Y digamos que tengo una variable más que es tiene ID. Entonces, si el usuario tiene ID o no, y si el usuario tiene boletos o no, eso es lo que esto nos está ayudando a hacer un seguimiento, ¿verdad? Ahora, voy a decir consola punto log por aquí. Bien. Quiero tener un mandato que el usuario debe tener ambos. Entonces, si hay un mandato, ambas condiciones deben ser ciertas o si ambas cosas deben existir para que la expresión se valore a verdadera, es decir cuando haces uso y operas por aquí. Entonces voy a decir que tiene boletos, y tiene identificación. Y voy a salvar esto. Ahora vas a ver true como salida C por aquí porque ambos son verdaderos. Ahora bien, si alguno de ellos es falso, entonces déjame actualizar tiene ID a la de cae por aquí. ¿Bien? Diré que no tiene identificación, digamos, y volveré a imprimir el resultado. Entonces verás a amigos por aquí. ¿Bien? Entonces así es como funciona. Ahora aquí estamos haciendo uso de variables, ¿de acuerdo? Ahora bien, esto puede ser cualquier tipo de expresión por aquí. ¿Bien? Esto puede ser cualquier tipo de expresión que evalúe, por supuesto, al valor de A Pollan. ¿Bien? Si tengo que darte un ejemplo, Bien, digamos aquí en vez de tener esto tiene boletos, digamos que tengo cinco, más que tres. Bien. ¿Cinco es mayor que tres? Sí. Bien. Y digamos si tengo un ejemplo más por aquí o una expresión más por aquí, cinco mayores que seis. ¿Cinco es mayor que seis? Absolutamente no. ¿Bien? Entonces esto va a dar false como salida A porque esta segunda expresión está devolviendo false. Y si guardo esto, verás falso como salida A. ¿Bien? Entonces así es como es lógico y se puede utilizar en expresiones y en la toma de decisiones complejas. Todo bien. Ahora, cuando empieces a escribir programas complejos , por supuesto, estarás haciendo mucho uso de estos operadores lógicos. ¿Bien? Entonces lo mejor es entender el concepto. Lógico y estamos hechos, lo que es lógico y para resumir lógico y comprobaremos si ambas condiciones son verdaderas, opera sobre dos valores booleanos como los opera, y esos valores booleanos también se pueden derivar de ¿Bien? Ahora bien, se trata de una lógica. Ahora, hablemos de lógica. Ahora bien, ¿qué es lógico o? Voy a agregar algún comentario para aquí como la definición de lógico o así el operador lógico u operador, bien, el lógico u operador dice que comprobará si al menos una condición es verdadera, ¿bien? Entonces la opera en la que está trabajando, al menos una debería ser cierta para que vuelva verdadera. Entonces y fue muy estricto, bien, y dijo que ambos deberían ser ciertos. Pero O es un poco indulgente. Dice que al menos una condición debería ser cierta, y eso me parece bien, ¿de acuerdo? Por lo que devuelve true si al menos una de las condiciones es verdadera. Si ambos son falsos, devuelve falso. Todo bien. Ahora para demostrarlo, voy a copiar este ejemplo por aquí, esta mecanografía que he hecho. Bien, y vamos a reemplazar todo con o por aquí. Ahora, es esencialmente dos símbolos de tubería. Se pueden ver los símbolos de esta pipa. Voy a agregar esto Ups Bien, y esto está hecho. Ahora bien, esto primero, esto va a dar verdad. Esto también regalará verdad. Esto también regalará verdad. Ahora bien, estas tres afirmaciones nos van a dar verdad porque al menos uno de los oprint es cierto aquí en este Y esto nos va a dar falsos porque ambos son falsos. ¿Bien? Entonces si guardo esto, ya verás, verdadero, verdadero, verdadero, y luego nos está dando falso. Ahora bien, ¿cómo se puede usar esto? Así que imagina que estás construyendo un programa, que te está ayudando a decidir si debes jugar afuera o no. ¿Bien? Y digamos que irás a jugar afuera ya sea si hace sol o si tienes un impermeable. Un ejemplo muy sencillo. ¿Bien? Ahora bien, estamos haciendo uso u operamos por aquí porque esta declaración dice que puedo jugar afuera si es soleado o si tengo un impermeable, ¿verdad? No es decir si el clima es soleado y tengo un chubasquero Si dice y, sólo entonces haremos uso de un operador. Pero ahora mismo está diciendo tampoco. Entonces claro, la elección es el operador lógico. Entonces voy a decir que vamos a pasar por aquí es soleado. Bien. ¿Hace sol afuera? Voy a decir falso, y lo siento, no es tiene chubasquero Bien. Entonces voy a decir verdad por aquí, algo así. Bien. Y voy a hacer un registro de puntos de consola por aquí. Bien. Y voy a decir que es soleado y como chubasquero Bien, bastante simple. ¿Cuál sería la salida? La salida debe ser verdadera. Puedo ir a jugar porque la condición era o tiene que estar soleado o bien necesito tener el impermeable Entonces la salida es verdadera. Bien, aquí, puedo ver si cambio el valor de tiene impermeable, digamos, al de falso Entonces ahora no tengo ahora no hay chubasquero y ni siquiera hace sol En ese caso, va a devolver falso. ¿Bien? Entonces, en caso de tomar decisiones, esto va a ser usado mucho, ¿verdad? Espero que esto sea divertido. El tercer operador lógico del que tenemos que hablar no es lógico nada. Ahora, el operador lógico nada invierte el valor de un booleano de un booleano, esencialmente Entonces, si es verdad, lo cambiará a falso, y si es falso, lo cambiará a verdadero, como dice el enunciado. ¿Bien? Vamos a probar esto. Entonces si digo consola punto log por aquí. Bien. Ahora bien, si digo verdad por aquí, va a imprimirse en verdad, como pueden ver, ¿verdad? Se va a imprimir en verdad. Pero digamos que quiero imprimir quiero invertir esto usando operador lógico, así que esto va a decir falso por aquí, ¿de acuerdo? Otra pregunta es ¿por qué querrías hacer uso de este no operador? ¿Cuáles son los casos de uso? Te voy a dar un ejemplo, ¿verdad? Hay un montón de escenarios en los que se puede utilizar este operador. Entonces digamos que quieres quedarte dentro si no está lloviendo, o y quieres salir si está lloviendo Digamos que hay algo que es una decisión que quieres tomar, ¿de acuerdo? Y voy a haber dejado está lloviendo porque todo depende de la lluvia, ¿verdad? Mi decisión. Entonces voy a crear una variable. Lo asignaré al valor booleano. ¿Bien? Y voy a decir que debemos quedarnos dentro. Bien, algo como esto. Ahora bien, el valor de esto sería que no está lloviendo. Algo así. Bien. Y puedo tener consola dot log, y debería quedarme dentro. ¿Bien? Entonces, ¿está lloviendo? No, no es porque este valor sea falso. Entonces, ¿debería quedarme adentro? Sí, deberías. Se puede ver. Ahora, si está lloviendo por aquí. ¿Deberías quedarte adentro? No. Se puede ver. Entonces así es como booleano nought nudo lógico, debería decir El operador de nudo lógico funciona, correcto, y funciona de una manera que le ayuda a revertir una condición particular. Esto también se usa mucho en la toma de decisiones, y a medida que comienzas a escribir código Ja Script, verás múltiples casos de uso de este. ¿Bien? Ahora bien, se trata de operador de nudo. También quiero destacar un concepto más por aquí. Ahora bien, el concepto trata sobre expresiones booleanas. Entonces, ¿qué son las expresiones booleanas? Una expresión booleana es una expresión que se evalúa como un ¿Bien? Entonces, si te desplazas hacia arriba por aquí. Bien, esta es una expresión booleana. Bien. Tienes esto como una expresión booleana, como una expresión booleana Todo esto es una expresión booleana porque está valorando a un solo valor booleano Entonces todas estas son expresiones booleanas que se construyen usando operadores lógicos y o y no Todo bien. Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 21. Operadores ternarios: Entonces ahora es el momento de que empecemos a hablar de operador ternario Ahora, ¿qué es el operador ternario? Para que puedas ver por aquí operador condicional. Entonces es una forma muy taquigráfica de tomar decisiones rápidas o elegir entre dos valores, ¿de acuerdo? Y aquí puedes ver esta es su sintaxis. Entonces déjame demostrarlo con la ayuda de un ejemplo, ¿ok? Entonces digamos que tengo una variable. Digamos, llamémoslo X, bien. Entonces X tiene un valor de diez. ¿Bien? Y digamos que tengo una expresión Pullen. ¿Bien? Entonces puedo decir polen por aquí y no dejarme crear una expresión Pollan Enseguida tendré un mensaje por aquí. ¿Bien? Entonces digamos si X es mayor que cinco, quiero imprimir, X es mayor que cinco, se, quiero imprimir X no es mayor que cinco, ¿verdad? Entonces lo que haría es que tendría una condición por aquí, ¿de acuerdo? Seguiremos la misma sintaxis. ¿Bien? Voy a copiar esto. Bien, ¿cuál es la condición? La condición es X mayor que cinco. Eso es lo que estamos comprobando, ¿verdad? Entonces, si X es mayor a cinco, dice esta parte, si esta condición es cierta, entonces ésta será evaluada o ésta será utilizada. Si esta condición es falsa, entonces se trabajará en esto. O esto será utilizado. ¿Bien? Sea lo que sea que hay por aquí. ¿Bien? Entonces condición es algo que hemos agregado aquí. Se agrega condición. ¿Qué es el valor uno? Si X es mayor que cinco, quería imprimir un mensaje. X es mayor que cinco, bien por ahora. Y si es falso, voy a tener X es menos de cinco, algo así. Uy. Así que sí. Bien. Y lo que voy a hacer es decir consola dot log y voy a imprimir en mensaje por aquí. Bien. Ahora, ¿cuál crees que sería la salida? X es diez, por lo que debería ser X es mayor que cinco. Si guardo esto, verás que X es mayor que cinco. ¿Bien? Ahora bien, si el valor de X se reduce al de cuatro, verás que X es menor que cinco. ¿Bien? Así que estamos tomando decisiones por aquí, ¿de acuerdo? Somos Altstspace por aquí. Estamos tomando decisiones aquí con la ayuda del operador ternario. Bien. Ahora aquí, en toda esta expresión, no necesito que esto esté encerrado dentro de un par de tirantes redondos Entonces puedes ver por aquí, esto también está bien. Pero normalmente es una buena práctica tener la condición de que estás escribiendo entre paréntesis o debería decir, corchetes por aquí ¿Bien? Si guarda esto, verá que esta es la salida y la salida no se ve afectada. Todo bien. Ahora aquí, en lugar de una expresión una expresión booleana, incluso se puede tener un valor que sea Bien. Así que simplemente puedo escribir true por aquí y se puede ver que esto es X es mayor que cinco. Y si digo falso por aquí, ya ves que X es menos de cinco. ¿Bien? Yo solo haré Control set y traeremos de vuelta nuestra expresión de polen que teníamos. ¿Bien? Entonces esto es lo que es el operador ternario Entonces, si la condición es verdadera, valor se devuelve el valor verdadero. Esto es verdadero valor. Y si la condición es falsa, entonces ésta se devuelve. ¿Bien? Y todo esto reside entre un signo de interrogación y un dos puntos. Puedes ver la sintaxis por aquí. Bien. Entonces sí, esto es lo que es un operador ternario Ahora, déjenme darles un ejemplo. Bien. Escribamos un programa sencillo que comprobará si el valor es booleano o no o lo siento, no un O el valor es par o no, o un número es par o no. Todo bien. Entonces ahí es donde podemos hacer uso del operador ternario. Entonces digamos que tengo este número cuatro. Bien. Y lo que haría es que tendría resultado por aquí. Ahora bien, ¿qué es el resultado? Bien, entonces resultado en realidad tendrá el resto después de la división por dos. ¿Bien? Entonces, ¿qué es un número par? El número par es un número que es divisible por dos, ¿verdad? Así que simplemente voy a decir número por aquí. ¿Bien? El porcentaje dos es igual a cero. Y estoy haciendo uso de la estricta igualdad. ¿Bien? Entonces esto se convierte ahora en un booleano por aquí. ¿Bien? No voy a almacenar el resto por aquí ahora. Solo estoy almacenando un valor booleano, que es el resultado de esta expresión ¿Bien? Y 1 segundo. Entonces aquí, puedo decir que deje que EX P por aquí. ¿Bien? Esto es lo que es. Bien. Y ahora, lo que puedo hacer es que puedo decir si EXP es cierto, entonces puedes dar la salida como par, o puedes dar la salida como impar, algo así. Y se puede guardar esto y el debe regresar. Bien, no estamos imprimiendo el resultado por aquí, así que necesito imprimir el resultado también. Vaya, necesito tomar esto en una nueva línea, bien, y necesito traer en resultado Ahora la salida es par, y si esto es cinco por aquí, por ejemplo, la salida sería impar. ¿Bien? Ahora, en lugar de tener EXP como variable, en realidad puedes cortar toda esta expresión por aquí y realmente puedes traerla aquí. Bien, esto también es factible. Voy a deshacerme de esto. Bien. Ahora esto es factible. Todo bien. Se puede ver cómo esta salida de salida está funcionando bien. ¿Bien? Entonces sí, esto es lo que es el programa. En realidad estamos evaluando si el número es cierto o no. ¿Bien? Por lo que la toma de decisiones es una parte muy importante del programa. Ya sabes, digamos si estás construyendo una tienda de comercio electrónico y si quieres que un descuento sea aplicable solo a algunos miembros privilegiados. Para que puedas tener este tipo de toma de decisiones. Si en miembro es privilegiado, entonces este es un valor de descuento. Si no lo es, entonces este es un valor de descuento. Entonces todo este tipo de toma de decisiones forman una gran parte de tu programación JaScript, y no solo jaw script, cualquier programación Bien, la toma de decisiones se trata de esto, ¿de acuerdo? Entonces espero que tengas claro operador condicional o el operador ternario, debería decir, también se le conoce como operador condicional, por cierto, bien, en algunos lugares, pero prefiero llamarlo ternario ¿Bien? Ahora, una cosa más de la que quiero hablar aquí respecto al ternario es que incluso puedes tener un operador ternario anidado Entonces, ¿qué es el operador ternario anidado, bien? Entonces voy a añadir un ejemplo por aquí. Entonces digamos si estamos construyendo una aplicación y queremos evaluar la edad en múltiples niveles. ¿Bien? Entonces si la edad es menor de 13, bien, decimos que la persona es un niño. ¿Bien? Si la edad es menor de 20, Bien, entonces decimos que la persona es un adolescente, o. y si la edad es menor de lo que se puede decir o mayor a 20. Bien, decimos que es un adulto. Bien. Entonces aquí, en realidad, esto no será menos de 20, pero esto será 13-20. ¿Bien? Entonces, si la edad es de 13 a 20 años, es un adolescente, y si la edad es mayor de 20, es un adulto ¿Cómo harías esto con la ayuda del operador Turnario? Déjame mostrarte. ¿Bien? Entonces primero, voy a decir que la edad es igual a, voy a tener un valor de edad. Digamos que son 16. ¿Bien? Ahora bien, ¿cuál es la sintaxis del operador ternario Esta es una sintaxis. Voy a obtener la sintaxis, ¿de acuerdo? Y voy a tener así que llamaremos a esto como categorización, niño, adolescente, adulto ¿Bien? Entonces voy a decir categoría de aquí es igual a, y esto es sintaxis. Entonces la primera condición es la edad menor de 13 años, ¿verdad? Entonces la edad es menor a 13, es mejor tener esto entre paréntesis. Yo voy a hacer eso. Si la edad es menor de 13, ¿qué decimos? A esto lo llamamos de niño por aquí. Bien. Entonces esto es un niño, ¿verdad? Ahora, voy a darle la vuelta a estas brechas y esta es T. ¿Bien? Ahora bien, ¿qué es el valor dos? ¿Bien? Valor dos, en lugar del valor dos, en realidad puedes iniciar otro operador ternario por aquí Bien. Déjame mostrarte cómo. Entonces aquí, se puede decir, otra condición por aquí, tengo menos de 20 años. Entonces una cosa se confirma que si estás ejecutando esta parte del código, no tiene menos de 13, ¿verdad? Esa parte está confirmada, ¿correcto? Si esta parte es ejecutada, entonces es menor de 13, ¿verdad? Entonces lo que harías es que vendrías por aquí, cae si su edad es mayor a 13, comprobarías si es menor a 20. ¿Es menos de 20? Si son menos de 20, entonces dices que es un adolescente. Algo así. Y si no lo es, dirías que es un adulto. Entendido. Esto tiene sentido, déjame ver si puedo traer esto en una nueva línea. Entonces esto ahora es legible en una sola co. Déjame mostrarte la categoría por aquí. Bien. Bien, entonces voy a agregar la categoría aquí. ¿Bien? Ahora, la edad es de 16 años, así se puede ver que es un adolescente. Bien. Déjame hacer la edad como diez. Es un niño. Déjame hacer la edad como 22. Es un adulto. ¿Cómo funciona esto? Entonces primero estamos comprobando la edad por aquí. Si la edad es menor a 13, ¿bien? Es un niño. ¿Bien? Y si esto es falso, si la edad es mayor de 13, entonces estamos comprobando ¿es la edad menor de 20 o mayor de 20? ¿Bien? Porque ahora esta condición está hecha, ¿ verdad? Esto es falso. Entonces, si viene en el paréntesis de caídas, estamos comprobando si es mayor que 20 o menor que 20. Si tiene menos de 20, decimos adolescente, si no lo es, estamos diciendo que es un adulto. Así es como funciona. Y este ejemplo de aquí es un ejemplo de operador ternario anidado Se puede ir a anidar por aquí también. También puedes agregar un operador ternario más, y puedes seguir haciéndolo bien Pero no es una buena práctica anidar a muchos operadores ternarios Uno o dos está bien, ¿de acuerdo? Uno está bien. De hecho, yo diría que esto está bien. Todo bien. Pero más allá de esto, yo diría que no es legible y no es una buena práctica. Todo bien. Pero sí, se trata de operadores ternarios u operadores condicionales, y espero que tenga claro Los operadores ternarios nos ayudan a evaluar las condiciones y realizar algunas acciones en nuestro código Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 22. Matrices en JavaScript: Todo bien. Entonces ahora es el momento de que hablemos de uno de los temas interesantes llamados arrays. Ahora, habrá escenarios cuando estés escribiendo programas en los que simplemente no quieras almacenar un solo valor, sino que quieres almacenar múltiples valores de cosa similar, ¿de acuerdo? Ahora, déjenme darles un ejemplo. Se puede crear una variable para almacenar la información de un estudiante. Por ejemplo, puede crear una variable llamada número de rollo para almacenar el número de rol de un estudiante. ¿Y si quieres almacenar el número de rol de mil alumnos? ¿Vas a crear 1,000 variables? Absolutamente no. Y ahí es cuando se pueden crear matrices. Entonces, las matrices le permiten almacenar múltiples valores en una sola variable, ¿de acuerdo? Y puedes crear arrays con la ayuda de corchetes como este. Así que vamos a hablar mucho más sobre arrays. Así que déjame crear una matriz para ti. Voy a crear matriz llamada número. Números por aquí y voy a tener uno, dos, tres y cuatro por aquí. Bien. Y puedes imprimirlo de esta manera. Bien. Se pueden decir números. Bien. Esto te va a dar la salida como uno, dos, tres, cuatro. Ahora, incluso puedes crear arreglos en la consola directamente. Esta es una consola de JavaScript. Entonces se puede decir num es igual a yo puedo agregar esto. Bien. Y puedes imprimir en Num por aquí, algo así, ya lo ves, ¿verdad? Entonces esta también es una manera de hacerlo, bien, pero nos ceñimos al código de Visual Studio. Ahora bien, así es como puedes crear números Bien, matriz de números. E incluso se puede crear una matriz de cadenas. Entonces puedo decir que dejemos frutas. Tomemos un ejemplo de frutas, y puedes tomar manzanas, o puedes tomar un plátano. Puedes tener naranja. Bien. Y puedes elegir el Candado de Consola por aquí. Bien. Entonces haré Console Log e imprimiré frutas. Uy. Y voy a guardar esto, ya pueden ver, como la salida de aquí. Ahora bien, la cosa es que has creado matrices, y crear matrices es relativamente simple, ¿verdad? Ahora bien, ¿cómo se accede a los elementos de una matriz? ¿Todo bien? Ahora bien, si estás teniendo tantos elementos, ¿de acuerdo? Esta es una lista de elementos en la matriz. Ahora, quiero mencionar por aquí que se puede acceder a los elementos en arrays con la ayuda de algo llamado como índice. ¿Bien? Así índice, es decir, la posición del elemento. Entonces uno está en la posición cero, porque los índices empiezan desde cero siempre. ¿Bien? Entonces tienes cero, uno, dos, y luego tienes tres en matriz. ¿Bien? Ahora bien, ¿cómo puedes hacer uso de estos índices o posición? En realidad es posición, derecha, eso empieza desde cero Bien, son cero sigue cero La indexación de Bestia es lo que llaman, bien. Pero la pregunta es, bien, esta es la posición, este es el índice que tengo, ¿de acuerdo? ¿Cómo hago uso de ella? Entonces puedes decir Console dot log por aquí. ¿Bien? Y digamos si quiero acceder a números, y quiero acceder al número en la posición o índice tres, ¿ok? Así se puede ver que cuatro se están imprimiendo. ¿Bien? Puedo tener frutos. Yo puedo salvarla. Bien, entonces no hay fruta en la posición número tres porque 01 y dos. Bien, entonces por eso nos estamos poniendo indefinidos, pero puedes tener uno por aquí y verás panana por aquí ¿Bien? Entonces JavaScript tiene una indexación basada en cero, y esto es común para muchos lenguajes de programación por ahí. Si vienes de Java, estarás al tanto de la indexación por aquí Bien. Incluso puede modificar los elementos de la matriz usando índices. ¿Bien? Entonces, por ejemplo, como te mostré, puedes acceder a los elementos de la matriz usando índices. Entonces se puede decir frutas y digamos la fruta en el índice uno, deseo tener en lugar de plátano, deseo tener cereza, digamos, por ejemplo. Bien. Y entonces si intentas imprimirlo por aquí, vas a ver la cereza como salida. Se puede ver. Así que hemos modificado el elemento en el primer índice de aquí, que es la segunda posición en la matriz. ¿Bien? Entonces esto se trata de array. Incluso puede tener una lata incluso tener matriz dentro de una matriz. Así que puedes crear una especie de matriz por aquí. Entonces puedo decir matriz. Llamémoslo matriz misma. Se crea una matriz con la parte superior de corchetes, derecha. Ahora dentro de esto, vas a volver a tener corchetes y puedes decir uno, dos, tres. Puedes tener uno más cuatro lo siento, cuatro, cinco, seis, bien. Y puedes tener seis o siete, perdón, no seis. Deberían ser siete, ocho y nueve. Bien. Y puedes imprimir esto. Bien, estamos recibiendo un error, no puedo leer, ¿de acuerdo? Bien, probablemente sea porque me he perdido una coma, así que esto tiene que ser separado por comas, y se puede ver que el problema se fue Así que no olvides la coma si estás tratando de crear una matriz inestd y puedes imprimir en matriz por aquí, algo así Y verás la salida aquí. ¿Bien? Entonces puedes ver, es una matriz de matrices. Para que puedas imprimirlo de esta manera, cero. Y ya verás, como la matriz en el primer índice que se está imprimiendo. Incluso puedes imprimir el primer elemento. Entonces puedes usar algo como esto, doble indexación, y puedes obtener uno por aquí. Bien. Si dices uno, vaya, no Q uno, verás que se imprimen dos ¿Bien? Entonces esto es 00, cero coma uno, cero coma dos ¿Bien? Entonces este cero primero representa la fila, y esto representa la columna. Todo bien. Entonces esto será dos coma dos Todo bien. Espero que esto tenga sentido. Todo bien. Entonces así es como puedes hacer uso de matrices anidadas o esto también se conoce como matrices multidimensionales Ahora, hablemos de algunos métodos que se nos proporcionan cuando estamos trabajando con arrays. Ahora, hablemos de algunos de los métodos que están disponibles para desarrolladores como nosotros para hacer un mejor uso de las matrices en JavaScript, ¿verdad? Entonces puedes ver que hay múltiples métodos como push que se usa para agregar un elemento al final de la matriz, pop, que se usa para eliminar el último elemento, shift, que se usa para eliminar el elemento forzado, y shift, que se puede usar para agregar elemento al comienzo de la matriz. Slice que copia una porción de una matriz, y luego tenemos slice que puede agregar o eliminar los elementos en el índice específico. Entonces echemos un vistazo a cada uno de ellos individualmente, ¿verdad? Entonces comenzaremos con empujar por aquí. Bien, así que empuja. Bien. Ahora, ¿qué es el empuje? Dice que agrega un elemento al final. Todo bien. Ahora, antes de hablar de push, permítame también recordarles una propiedad interesante por aquí que tiene esa matriz, que es de longitud. ¿Bien? Así que puedes obtener una longitud de la matriz y el script Ja por aquí así. Se puede ver que tres se imprimen, lo que significa que las frutas tienen tres elementos en ella. ¿Bien? Se puede ver que tiene tres elementos. Bien. Entonces ahora, si quieres empujar un elemento en una matriz, lo que puedes hacer es decir frutas, punto, empujar, Bien puedo empujar cualquier elemento por aquí. Bien, puedo decir naranja, probablemente. Bien, así. Bien. Y puedo decir consola dot log por aquí, y puedo decir frutas. Bien. Ahora bien, si imprimes esto, verás manzana, cereza, naranja, naranja. Naranja se ha añadido dos veces por aquí. ¿Bien? Si agrego plátano por aquí, verás manzana, cereza, naranja, plátano. Eso es lo que es. Bien. Entonces estás empujando un elemento al final de la matriz. Y si tomas la longitud por aquí de la matriz, después de empujar el elemento, la longitud ahora es de cuatro. Antes, eran tres. Todo bien. Entonces esto nos dice que las matrices en JavaScript son dinámicas, ¿verdad? Puede agregar y eliminar elementos y tamaño de la matriz puede cambiar dinámicamente. ¿Bien? Y la longitud es una propiedad increíble que puede ayudarnos a obtener la longitud de la matriz. ¿Bien? Entonces se trata de empujar. Es bastante simple. Se utiliza para empujar un elemento al final de la matriz. ¿Todo bien? Eso es lo que dice esto. Entonces tenemos pop. Ahora, ¿qué es el pop? Todo bien. Entonces la definición dice quita el último elemento, derecho. Entonces ahora veamos cómo nos ayuda a eliminar el último elemento. ¿Bien? Entonces puedo decir, voy a copiar este registro de puntos de consola por aquí. Y antes de consola dot log, voy a decir frutas, punto, puedo decir pop por aquí. Bien. Y antes, tenía cuatro elementos. Ahora va a tener tres. Para que puedas ver manzana, cereza y naranja. ¿Bien? Incluso se puede obtener este elemento que se hace saltar en una variable, así se puede decir último fruto, por ejemplo. Bien. Y hasta puedes imprimir la última fruta que conseguiste, ¿de acuerdo? Eso también es posible. Por lo que es posible atrapar el último elemento. Puedes ver manzana, cereza, naranja, y tienes plátano como último fruto por aquí. Puedes ver la definición por aquí, elimina el último elemento de la matriz y lo devuelve. ¿Bien? Por lo que también está regresando. Si la matriz está vacía, se devuelve undefined y la matriz no se modifica. ¿Bien? Entonces se trata del pop, y lo siguiente que tienes es el turno. Ahora, ¿qué es el turno? ¿Todo bien? Entonces shift elimina el elemento forzado. ¿Bien? Entonces como pop elimina el último elemento, elimina el elemento forzado. Así que voy a conseguir esto por aquí. Bien, o voy a conseguir esta parte por aquí. Bien. Y esta cosa voy a comentar por ahora y se puede decir turno por aquí. Ahora bien, si ejecutas esto, verás que Apple fue lo primero. Ahora solo tienes dos cerezas y naranja. ¿Bien? Incluso puedes obtener la primera fruta por aquí. Como si tuviéramos la última fruta, dejemos que la primera fruta por aquí. Bien, algo como esto. Y déjame imprimir el primer fruto, bien, por aquí. Ver manzana es el primer fruto. Todo bien. Entonces como pop returns, el último elemento, shift si colocas el cursor sobre esto, elimina el primer elemento y también lo devuelve Eso es lo que hace el turno. Bien. Entonces tienes algo llamado como unshift away, que se usa para agregar un elemento al principio ¿Bien? Entonces déjame obtener este método aquí. Bien. Vamos a cambiar. Vienes por aquí y déjanos experimentar unhefto aquí. ¿Bien? Entonces lo que puedo hacer es digamos que tengo frutos. Ahora bien, esto es lo que contienen las frutas, ¿de acuerdo? Lo que puedo hacer es decir frutas punto y cambio, y puedo agregar, digamos, puedo agregar Apple. Apple otra vez, algo así. Bien. Y vamos a imprimir. Hagamos un registro de consola. Se puede ver de nuevo la manzana siendo agregada. ¿Bien? Así que antes, teníamos manzana que se quitó, ¿bien? Y luego tenemos de nuevo a Apple. ¿Puedes ver? Por aquí. ¿Bien? Entonces esto se agrega sin cambiar ha agregado este elemento en particular al principio por aquí, ¿de acuerdo? Y se puede ver inserta un nuevo elemento en el inicio de la matriz y devuelve la nueva longitud de la matriz. Así que en realidad está devolviendo la nueva longitud de la matriz. ¿Bien? Si quieres, puedes decir nuevo largo por aquí. Bien. Y se puede decir Consola, punto de registro por aquí, y se puede imprimir en nueva longitud, algo así. Bien. Verás la nueva longitud de la matriz. Bien, por aquí. Antes, era una longitud de dos. Ahora tiene una longitud de tres. Todo bien. Entonces esto es unshift. Ahora lo siguiente que tenemos es rebanada. Ahora slice copia una parte de la matriz. Echemos un vistazo a lo que esto significa, ¿de acuerdo? Entonces esto es rebanada para nosotros, bien. Ahora, digamos que tenemos una matriz. Bien, entonces esta es la matriz de cuatro elementos. Todo bien. Déjame rebanar esto, ¿de acuerdo? Entonces digamos que si quiero rebanar los elementos del índice uno a dos, así que de cereza a naranja, ¿de acuerdo? Porque hay tres elementos, no cuatro, ¿de acuerdo? Así que déjame obtener una matriz de cuatro elementos por aquí. ¿Bien? Así que en realidad puedo volver a declarar esta matriz por aquí, recrear o dejarme ver Bien, tu naranja, puedo ver cereza o fresa, algo así. Bien. Así que ahora tenemos elementos una matriz con cuatro elementos. Todo bien. Lo que puedo hacer es que en realidad puedo haber dejado, puedo tener una matriz en rodajas, y puedo decir frutos puntitos. Puedo decir, así que aquí se puede ver, S. Si escribe en S, tiene rebanada. Haremos uso de rebanada una coma tres. Bien. Y se puede decir consola punto log por aquí y se puede decir matriz en rodajas. Uy. Entonces está diciendo, Bien, esto ya ha sido declarado y no podemos volver a usarlo. Entonces puedo decir nuevos frutos por aquí. Bien. Debería haber usado el nuevo nombre, bien. Frutas nuevas, frutas nuevas, y voy a guardar esto y se puede ver plátano naranja. Todo bien. Entonces este es el índice uno, y luego este es el índice dos, y se puede ver cómo se corta a partir de aquí. ¿Bien? Entonces esto es copiar el elemento del índice uno a dos. Eso es lo que está pasando. ¿Bien? Entonces estamos viendo una coma tres Entonces, lo que hace es 1-2 por aquí, ¿de acuerdo? Estos dos están siendo cortados en rodajas. Todo bien. Y si pasas el cursor sobre esto, verás que devuelve una copia de una sección de una matriz tanto para inicio como para fin Y el índice negativo se puede utilizar para indicar un desplazamiento desde el final de la matriz. Entonces menos dos, si dices menos dos, se refiere al segundo al último elemento de la matriz. ¿Bien? Lo que significa segundo a último. Entonces menos dos serán naranjas por aquí. ¿Bien? Es un segundo último. Todo bien. Entonces así es como se puede usar slice. Se utiliza para rebanar una matriz esencialmente. Y luego tienes slice por aquí, que puede ser usado para eliminar o agregar un elemento en un índice específico. ¿Bien? Así que déjame probar esta porción de aquí. Bien. Ahora tienes frutas por aquí. Entonces lo que voy a hacer es voy a decir frutas punto, empalmar por aquí. Bien. Y lo que vamos a hacer es que vamos a eliminar un elemento en el índice uno. ¿Bien? Entonces se puede decir un elemento. ¿Bien? Entonces, si pasas el cursor sobre esto, verás alguna documentación. Bien. Por lo que acepta algunos parámetros. Comienza cuántos valores quieres eliminar, Bien, y cadena por aquí. Para que pueda ver start significa la ubicación base cero en una matriz desde la que desea comenzar a eliminar elementos. Eliminar recuentos significa cuántos elementos desea eliminar de este número. Entonces, si dices desde la posición uno, quiero quitar dos, así que necesitas agregar una coma dos por aquí, algo así Voy a quitar dos elementos de la posición uno, ¿ok? Y lo tercero, devuelve un elemento que contiene esto es lo que está regresando. Devuelve la matriz que contiene los elementos que fueron eliminados. ¿Bien? Entonces probemos esto por aquí. Entonces lo que haría es aquí, yo diría consola dot log por aquí primero, y voy a imprimir en frutas. ¿Bien? Ahora, estamos quitando dos elementos, empezando por la posición uno, ¿de acuerdo? Entonces, si guardo esto, verás que Apple nuevamente solo se imprime. ¿Bien? Entonces esta es la matriz que teníamos. Entonces estamos quitando dos elementos, comenzando desde la posición uno. Bien, para que veas que volvió a tener Apple y cereza y naranja. Entonces solo queda Apple nuevamente porque dos elementos de la posición uno significa que ambos elementos se eliminan al final. ¿Bien? Ahora, la documentación decía que devuelve una matriz que contiene los elementos que fueron eliminados. ¿Bien? Así que en realidad puedes conseguirlos. Se puede decir dejar que los elementos eliminados por aquí. Bien. Y puedo imprimir elementos borrados, esencialmente por aquí. ¿Bien? Entonces puedo decir elementos eliminados. Vaya por aquí, y puedo guardar esto y ya pueden ver, estos fueron los artículos que se eliminaron por aquí. ¿Bien? Ahora, qué magia es después eliminar hemos usado slice para eliminar el elemento. Bien. Ahora, esto también se puede usar para eliminar así como agregar elementos al mismo tiempo. Ahora si especifico un elemento por aquí. Bien, puedes ver artículos. Entonces estos son elementos para insertar en la matriz en lugar de elementos eliminados. Se puede ver que esto aparece automáticamente. Entonces empiezas tenías recuento de eliminación, y ahora tienes una lista de artículos. Entonces puedo decir nuevo artículo por aquí, y puedo guardar esto y verás nuevo artículo agregado. Bien. Permítanme agregar un artículo más por aquí. Bien. Puedo agregar nuevo artículo nuevamente. Y verás en lugar de los elementos eliminados, incluso puedes agregar nuevos elementos con la ayuda de slice. Se puede ver. Así es como funciona, empalmar básicamente, y es útil esencialmente modificar la matriz según sus requisitos. ¿Todo bien? Estos son algunos de los métodos a los que tienes acceso. Espero que hayas podido seguirlo y espero que esto haya sido útil. 23. Objetos en JavaScript: Ahora es el momento de que comencemos a hablar de objetos. Ahora bien, ¿qué son los objetos? Así que los objetos en JavaScript permiten agrupar datos relacionados e incluso funciones juntas. Sí, estamos llegando a funciones parte. Pero por ahora, vamos a estar hablando de la parte de datos. Por lo tanto, los objetos permiten agrupar datos y funciones relacionados. Un objeto se crea usando un par de brisas rizadas. Entonces, si tienes que crear un objeto, crearías algo como esto. Dirías que vamos, digamos, si quiero almacenar algunos datos relacionados con una persona, ¿verdad? Entonces puedo decir persona por aquí, puedo tener un par de brisas rizadas como esta, y luego podría tener pares de valores clave en ella, donde cada clave también se conoce como propiedad y tiene un valor asociado a Todo bien. Entonces puedo decir ¿qué tendría una persona? Entonces una persona puede tener mucha información, ¿de acuerdo? Entonces digamos que estoy construyendo un programa y quiero almacenar la información de la persona. Entonces o puedo crear múltiples variables, como puedo decir dejar persona uno, y puedo decir edad persona un nombre. Entonces para la persona dos, puedo decir persona dos, cada una, y así sucesivamente, pero esta no es la forma ideal de hacerlo, ¿verdad? Entonces, en cambio, lo que querrías hacer es que te gustaría tener un objeto donde puedas agrupar datos relacionados con una persona en particular. Entonces para la persona uno, podría decir nombre, y podría tener nombre como Alice, por ejemplo, o, podría tener H y cada uno puede ser 25. ¿Bien? Ahora, haz una nota por aquí. Esto es una cuerda por aquí, ¿ verdad? Esto es una cadena. Esto no es un número. Este es un número por aquí, y también puedo tener a Booleano por aquí Entonces puedo decir que es persona estudiante y puedo decir que la verdad cae por aquí. Bien. Así que toma nota de que puedes tener datos de múltiples tipos por aquí. Bien. Así que volviendo por aquí, se crea un objeto usando un par de frases de consulta como las que estamos haciendo por aquí, contiene pares de valores clave. Entonces esta es una clave, y esto es un valor. ¿Bien? Nosotros cada clave también se llama propiedad. Entonces esto también es una propiedad del objeto. Por lo que la persona tiene tres propiedades, que es nombre. Puedes ver si pasas el cursor sobre esto, dice propiedad por aquí, ¿de acuerdo? Y se llama nombre y el tipo de datos es cadena. Si pasas el cursor sobre esto, si me cierro sobre esto, es propiedad H y el tipo es número Si pasas el cursor por aquí, la propiedad es estudiante y es booleana Y si pasas el cursor sobre esto, puedes ver toda la definición de persona, ¿verdad Y verías tipo de datos por aquí en lugar de los valores. Todo bien. Entonces cada clave se llama propiedad y tiene un valor asociado con ella, ¿verdad? Entonces esto es lo que hemos hecho al crear una persona. Y claro, para imprimirlo por aquí, puedes imprimirlo algo así. ¿Bien? Y verás que esto se imprime en la consola. ¿Todo bien? Ahora, hay múltiples formas en las que se puede acceder a las propiedades del objeto. Todo bien. Entonces aquí estamos imprimiendo todo el objeto por aquí, ¿verdad? Pero si quieres acceder a una propiedad específica, incluso puedes hacerlo, y hay múltiples formas de hacerlo. Digamos que puedo decir consola dot log. Ahora puedes hacer uso de algo llamado como notación de puntos. Así que la persona punteó la edad por aquí. Entonces estamos imprimiendo H como 25. Esta es una forma de hacer las cosas. Otra forma es que duplicaré esto de otra manera es que hagas uso de este tipo de sintaxis. Al igual que tienes corchetes, y dentro de esto, tienes el nombre del inmueble. Se puede ver. Y luego incluso puedes acceder a él de esta manera y verás la salida en la consola. Todo bien. Entonces estas son las dos formas en las que se puede acceder a las propiedades de los objetos en JavaScript. Ahora la cosa es, si echas un vistazo al código fuente en línea, verás la mayor parte del tiempo, esto es lo que se está usando, ¿de acuerdo? Como en cualquier parte de tu aplicación de grado de producción, en tu lugar de trabajo o cualquier lugar de cualquier tipo de código fuente sobre el que leas en línea, verás que esta es la convención que se está utilizando en múltiples lugares. Esto es muy raro, y la razón obvia de esto es que esto no es tan fácil de mirar e incluso de escribir, ¿verdad? Entonces esto es mucho más fácil la notación de punto uno, y es por eso que esto se está utilizando comúnmente. ¿Todo bien? Ahora, hablamos de crear un objeto. Hablamos sobre el acceso a las propiedades. Incluso puedes agregar o actualizar las propiedades. ¿Bien? Ahora, hablemos primero de actualización. Entonces primero, actualizaremos la edad. Así se puede ver persona punto H es igual a digamos 66 por aquí. ¿Bien? Y luego si imprimes en esto por aquí, y si ahorras, verás que edad de la persona se está actualizando a 66. Y aunque imprima en todo el objeto, verás que tiene 66 como valor que sostiene. ¿Todo bien? Ahora bien, se trata de actualizar. Así es como actualizas. Es bastante simple. Usted hace uso de la notación de puntos o incluso puede hacer uso de este tipo de sintaxis por aquí con los corchetes, y puede actualizar la propiedad asignándola en nuevo valor Ahora bien, ¿cómo agregarías en nueva propiedad? Digamos que quiero agregar en propiedad nueva donde deseo guardar el trabajo de la persona. Entonces puedo decir persona punto trabajo por aquí, y puedo decir ingeniero. Algo como esto. Todo bien. Y puedo imprimir en este objeto por aquí. Y ahora si imprimes en, verás que tiene una nueva propiedad en ella llamada JOB. Entonces esta propiedad, en primer lugar, no existía cuando creamos persona, se puede ver. No existía. Tenía sólo tres propiedades, nombre, edad, y estudiante, se puede ver, ¿verdad? Pero luego más adelante, lo que hicimos es que agregamos una propiedad la cual decía persona punto JOB. Y le asignamos un valor llamado ingeniero. Agregar una nueva propiedad es tan fácil como acceder a esa nueva propiedad usando notación de puntos. Entonces, si agrega algún nombre de propiedad nuevo usando notación de puntos, puede asignarlo a valor y eso se agregará al objeto de aquí. ¿Bien? Incluso puedes acceder a él usando la notación de puntos si lo deseas por aquí, como si estuvieras accediendo a las otras propiedades. Se puede ver el motor por aquí. Todo bien. Entonces todo esto es la posibilidad por aquí con o cuando quieras crear o cuando quieras agregar o actualizar las propiedades. ¿Todo bien? Ahora, puede agregar una propiedad a un objeto. Incluso puedes eliminar una propiedad. ¿Cómo harías eso? Entonces echemos un vistazo a la eliminación de propiedades. ¿Bien? Digamos que deseo borrar, deseo borrar es estudiante por aquí. ¿Bien? Entonces ahora mismo, puedo hacer uso de la palabra clave de Dell, eliminar palabra clave, lo siento, no decir. Es eliminar la palabra clave. Puedes ver en orden sugerir, puedes ver persona enseñada y tendrás la lista de propiedades por aquí. ¿Cuál quieres eliminar? Quiero eliminar es estudiante? Bien. Y entonces si intentas acceder es estudiante por aquí, y si lo guardas, verás que se pone indefinido. Todo bien. Y si solo imprimes en la persona, no verás que es estudiante como parte de esto. Se puede ver antes es estudiante estaba ahí en este objeto en particular, pero luego más tarde, no tienes a su persona por aquí. Por lo que esa propiedad en realidad se está eliminando con la ayuda de la palabra clave delete. Todo bien. Por lo que es posible agregar propiedades dinámicamente después de crear el objeto, y también puede eliminar las propiedades después de que el objeto haya sido creado. Así que todo es posible, ¿de acuerdo? Ahora, también es posible verificar si una propiedad en particular realmente existe en un objeto dado, ¿de acuerdo? Ahora, habrá escenarios, por supuesto, en los que es posible que desee actualizar una propiedad si esa propiedad existe. Entonces digamos que si existe trabajo en esta persona, entonces tal vez quieras actualizar el trabajo. Si no agregas ese cheque, entonces lo que pasaría es si trabajo no existe en persona, se agregaría, sería recién creado, y no quieres que eso suceda. Se quiere actualizar sólo si existe. ¿Bien? Entonces, lo primero que podemos hacer es, bien, marcar 1 segundo. Comprobaremos si la propiedad existe. ¿Bien? ¿Cómo lo haces? Así que me desplazaré hacia abajo por aquí. Bien. Y yo diría, consola dot log, y puedo ver nombre en persona. ¿Bien? Ahora bien, esto va a resultar en un valor booleano Se puede ver la verdad por aquí. ¿Por qué está dando verdad? Porque el nombre realmente existe en persona. Puedes ver que hemos agregado nombre por aquí. Si echas un vistazo a las sentencias anteriores del registro de puntos de la consola, encontrarás que el nombre está presente. ¿Bien? Esta es una forma de comprobarlo. Hay una forma más, así que puedes decir consola dot log por aquí. Bien. Y se puede decir persona, punto y se puede decir que tiene propiedad propia, algo así, y entonces se puede decir edad por aquí. Bien. Otra vez te volverás a hacer verdad por aquí, ¿de acuerdo? Entonces esto ha poseído la propiedad determina, se puede ver la documentación por aquí, determina si un objeto tiene una propiedad con el nombre especificado, ¿de acuerdo? Ahora bien, si cambio esto a la edad uno, si cambio esto por nombrar uno por aquí. Por supuesto, estos dos no existen. Entonces, si guardo esto, vas a ser falso por aquí, ¿verdad? Porque estos dos no existen. Yo solo haré Control Z por aquí y lo guardaré para que me imprima verdad en la consola. ¿Todo bien? Ahora bien, esto es realmente útil. Como dije, si quieres realizar updation de propiedades, dependiendo de si la propiedad existe o no en un objeto, puedes hacer uso de cualquiera de estas sintaxis, ¿bien? Y normalmente usas esto con declaraciones condicionales, y si es cierto, entonces probablemente actualizarías la propiedad. ¿Correcto? Y esto en lo de aquí que estás viendo es un operador por aquí. ¿Bien? Y con la ayuda de esto, te permite comprobar, esencialmente, estás viendo cuál es el caso de uso de aquí. Todo bien. Entonces sí, se trata de verificar si la propiedad existe. Ahora bien, hay algo llamado un objeto anidado, ¿de acuerdo? Lo que significa que un objeto puede contener otro objeto también u otros objetos también. Ahora por aquí, la definición de objeto que vimos, objeto tiene pares de valores clave, ¿verdad? No tiene algo anidado en él. Entonces habrá escenarios en los que es posible que desee almacenar algún tipo de datos complejos, en los que es posible que desee tener un objeto dentro de un objeto, ¿verdad? Ahora, déjenme darles un ejemplo. Digamos que estás creando objetos para hacer un seguimiento de los estudiantes, y digamos que tienes una academia en línea que estás construyendo en la que un estudiante se inscribe en cursos Entonces lo que harías es que tendrías estudiante por aquí. ¿Bien? Tendría un objeto para almacenar información del estudiante, y tendría el nombre del alumno. ¿Cuál es el nombre? El nombre es digamos pop por aquí. Bien. Ahora quiero tener una lista de cursos en los que el estudiante se ha matriculado. Entonces puedo decir cursos por aquí. Bien. Y dentro de esto, este curso es un objeto porque va a ser una lista, ¿verdad? Así que puedes tener tapete por aquí. Bien. Ahora, aquí se puede decir verdad Bien. Puedes tener señales. Puedes tener caídas por aquí y así sucesivamente. Todo bien. Ahora, si deseas imprimir en esto, así puedes decir Console dot Log, y puedes ver al estudiante por aquí. Algo como esto. Para que puedas ver el nombre y luego los cursos se anidan de nuevo por aquí, que puedes expandir nombre y firmar Lo siento, las matemáticas y la ciencia por aquí. Todo bien. Ahora la pregunta es, tienes un objeto dentro de un objeto. Es objeto anidado, ¿verdad? ¿Cómo accedería a las matemáticas de la propiedad? Entonces déjame mostrarte eso también. Todo bien. Entonces por aquí, tienes estudiante. Se puede decir punto estudiante, y se puede ver sugerencia. Así que nombra si quieres acceder a la edad, claro, puedes hacer uso del punto por aquí. Bien, la edad no existe. Así que puedo hacer uso del nombre por aquí y tendrás acceso al pop. Bien. Ahora, si quieres acceder a los cursos, puedes decir cursos por aquí, de inmediato, y tendrás acceso a este Jason, que es el objeto anidado aquí. Se puede ver matemáticas, verdad. La ciencia es falsa. Todo bien. Y si quieres tener acceso a alguna de estas propiedades, puedes ir puedes hacer uso de la notación de puntos más allá y puedes decir matemáticas por aquí y serás verdad. ¿Bien? Entonces puedes encadenar estas notaciones de puntos de esta manera Se puede decir estudiante punto cursos dot math. ¿Bien? Entonces estás diciendo cursos de punto para estudiantes, dot math por aquí. Todo bien. Y te está dando la salida como verdadera. ¿Todo bien? Ahora, al igual que el objeto externo, objeto interno también puede tener propiedades con diferentes tipos de datos. En este momento estamos haciendo uso del booleano. Por supuesto, puedes almacenar cadenas. Puedes tener números. Todo bien. Depende totalmente de ti como lo que quieras almacenar, y también está totalmente basado en tus requisitos . Todo bien. Entonces espero que esto tenga sentido. Entonces eso se trata de objetos. Y antes de cerrar, quiero mostrarte una cosa interesante cuando estás trabajando con objeto, que se conoce como estructuración del objeto D. Estructuración. Todo bien. Entonces, ¿qué es la estructuración del objeto D? Ahora bien, la estructuración del objeto D es un concepto o una forma conveniente, debería decir, de extraer múltiples propiedades de un objeto y asignarlas en variables. Ahora, échale un vistazo a este objeto de aquí. Tiene múltiples propiedades, ¿verdad? Cualquier objeto que crees en JavaScript va a tener múltiples propiedades. Entonces habrá momentos en los que tal vez quieras extraer estas propiedades y asignarlas a variables individuales. Ahora, eso es posible usando la desestructuración de objetos. Entonces tenemos un objeto por aquí. Vamos a probarlo en esto. Entonces tienes dos propiedades como nombre y cursos. Todo bien. Lo que voy a hacer es que quiero nombre Quiero tener una variable llamada name por aquí, que tendrá el valor name por aquí para este objeto, y los cursos tendrán el valor de los cursos. ¿Bien? Entonces lo que voy a hacer es que voy a decir vamos. Voy a hacer uso de este tipo de sintaxis por aquí. Voy a decir nombre y cursos por aquí. ¿Bien? Y luego voy a asignarle estudiante. Todo bien. ¿Qué crees que pasaría? Esto es absolutamente válido por aquí. Bien. Pero lo que realmente está sucediendo aquí es este objeto está realmente desglosado y se están asignando las propiedades. El valor de las propiedades se están asignando a estas variables. Todo bien. Así que si quiero imprimir en Consola punto registro por aquí, y puedo decir nombre. Verás que el nombre está impreso como Bob por aquí. Bien, que en realidad es el nombre que tienes asignado, y luego puedes tener en lugar de nombre, puedes tener cursos y puedes guardar esto, verás la salida por aquí. Bien. Entonces espero que esto tenga sentido. Ahora bien, si cambias el nombre de la variable de nombre a nombre dos por aquí, digamos, por ejemplo, si guardas esto, verás que el nombre no está definido. Ahora. ¿Por qué no está definido? Porque para que la desestructuración funcione perfectamente, entonces nombre debe ser asignado a nombre por aquí, entonces este nombre tiene que ser realmente coincidir con el nombre del nombre dentro esta propiedad dentro de este objeto, lo siento Bien. Entonces, por ejemplo, si cambio el nombre de los cursos a cursos también, por ejemplo, verás que no está definido. Bien, entonces el nombre tiene que ser similar al del inmueble. El nombre de la variable tiene que ser mismo que el de la propiedad para desestructurar para funcionar Si te saltas alguna de las variables de aquí, si me omito cursos, verás que los cursos no están desestructurados. Todo bien. Entonces, sí, eso es lo que es la desestructuración de objetos. Y todo esto se trata de objetos en Jascripto. Y espero que este video te ayude a entender cualquier código que veas, que está haciendo uso de objetos Jascripto en el futuro. Buena suerte. 24. Conversión de tipo: Entonces ahora es el momento de que hablemos conversión de tipos en JavaScript. Ahora, ¿qué es la conversión de tipo, en primer lugar? Así que cada vez que creas una variable, almacenas valores en ella. La variable tiene un tipo, ¿verdad? Entonces, o podrías almacenar una cadena, un booleano o un número, Ahora, la conversión de tipo es un proceso en el que convierte un valor de un tipo a otro. ¿Bien? Entonces, si estás convirtiendo cadena a números, números a cadena, eso es lo que se conoce como conversión de tipo. Ahora bien, una cosa que debes saber es cuál ya sabes, claro, JavaScript es un lenguaje vagamente mecanografiado, lo que significa que no necesitas declarar el tipo de una variable, Y el tipo de la variable puede cambiar dinámicamente dependiendo de qué valores estés almacenando. Bien. Otra cosa es que JavaScript soporta conversión implícita y explícita Entonces, lo que significa implícito es la conversión implícita es un tipo donde en JavaScript mismo convierte automáticamente el valor de un tipo a otro Un explícito es donde tú como programador estás instruyendo para convertir un valor de un tipo a otro ¿Todo bien? Entonces echemos un vistazo a la conversión de tipos. Ahora, déjeme darle un ejemplo por aquí. Entonces digamos que voy a tener X, o y digamos que voy a tener cinco más uno. Bien. Ahora voy a hacer registro de puntos de consola por aquí. Bien. E imprimiré el valor de X. Bien. También voy a hacer Console dot log por aquí. Bien, y voy a decir tipo off. Diré X por aquí. Si guardo esto, verás que la salida es seis, por supuesto, y la salida también es número porque esto está sosteniendo el valor del tipo número. Ahora, déjame experimentar un poco, ¿verdad? Ahora, digamos que convierto este valor cinco en el de una cadena agregando un solo código. Incluso puedes agregar códigos dobles. Eso está absolutamente bien. ¿Cuál crees que será la salida? ¿Serán seis? Y si crees que son seis, entonces ¿qué crees que esto nos dará una salida? ¿Cuál será la salida del tipo de operador aquí? Si guardo esto, verás que la salida es 51, y luego tienes cadena por aquí. ¿Bien? Entonces lo que está pasando por aquí es que tienes cinco, que es una cadena, tienes operador plus. Estás haciendo uso del operador plus en dos opernts. Entonces un opernt es una cadena, y otro opernt está en número Entonces lo que pasa es, esta no es una adición válida, ¿verdad? Entonces, lo que hace JavaScript implícita o internamente es, convierte uno en una cadena ¿Bien? Entonces entonces se vuelve así esta ecuación se convierte en p, esencialmente. Tengo cinco por aquí más uno por aquí en esta forma. ¿Bien? Entonces, ¿qué es cinco más uno por aquí? En este caso? Se convierte en 51 porque ambos son de cuerda, ¿verdad? Y se está realizando una concatenación de cadenas. Entonces si has dejado o si digo consola punto registro por aquí, y si digo hola, bien por aquí, además hola. Así que voy a obtener la salida como hola alto porque se está realizando una concatenación de cadenas por aquí ¿Bien? Así se comporta el operador plus con cuerdas Y con respecto a los números, va a sumar esos dos números. ¿Bien? Entonces este es un ejemplo de conversión implícita de tipo ¿Todo bien? Yo solo comentaré esto. ¿Bien? Ahora, déjeme darle otro ejemplo, ¿de acuerdo? Entonces digamos que tengo el ejemplo dos por aquí, ¿de acuerdo? Y déjenme llamar a esto como ejemplo uno por aquí, ¿de acuerdo? Entonces, algo así. ¿Bien? Uy, algo. Bien, entonces esta afirmación aún no está completa. Por eso me sale un error. ¿Bien? Entonces digamos ejemplo dos. Lo que es el ejemplo dos, en lugar de tener cinco como cadena más uno. ¿Bien? Entonces déjame tener esto como un entero primero. Entonces tendré menos cinco menos uno. Bien. Voy a copiar estas dos líneas de declaración. voy a hacer pedazos por aquí. Y esto se convierte en el ejemplo dos, claro. ¿Bien? Esto también es dos. Ahora bien, si guardo esto, verás que la salida es cuatro porque cinco menos uno es, por supuesto, cuatro, y la salida es número por aquí, como resultado del tipo de operador. ¿Bien? Eso es lo que ves. Entonces ahora permítanme cambiar estos dos. Una cadena. Ahora bien, ¿cuál crees que sería el resultado? ¿Bien? Porque aquí, si cambias esta cadena, ésta se convirtió en 51, ¿verdad? Se puede ver que está imprimiendo 51. ¿Cuál crees que será la salida por aquí, bien? ¿Alguna conjetura? Entonces si guardo esto, la salida sigue siendo cuatro y el tipo de ejemplo dos sigue siendo un número. Ahora, ¿por qué es así? Entonces aquí, si estás haciendo uso del operador plus, bien, esto se convirtió. Esto era ASIS, y esto se convirtió en una cadena, realidad, y la salida como resultado fue una cadena. Se puede ver la salida por aquí. Pero en caso de menos, esto cambió, ¿verdad? Esto no es, no es como se comporta cuando usabas plus con los orprins de mar Entonces el comportamiento, la respuesta a esto es el comportamiento de los operadores más y menos con cadenas y los números son diferentes, y es por eso que estás viendo un cambio de comportamiento en la salida. Entonces déjame explicarte esto. Cuando haces uso de operadores plus con cadenas, ¿de acuerdo? Con cadenas, hay una opción para que JavaScript haga concatenación ¿Bien? JavaScript puede hacer concatenación con cadenas y JavaScript puede hacer adición cuando se usa el operador plus con números ¿Bien? Entonces, si estás usando esto con números, ya sabe, bien, tengo que realizar una adición. Si estás usando esto con cadenas, sabe que tengo que realizar una concatenación Pero cuando estás haciendo uso del tipo mixto, lo que hará es convertir el número en cadena. ¿Bien? Ahora, en este caso, menos no tiene un rol o un comportamiento cuando se usa con cadenas. ¿Se puede imprimir en alto menos hola? ¿Bien? Eso no tiene ningún sentido, ¿verdad? Entonces aquí, ya que esta conversión de uno a cadena no tenía ningún sentido, lo que hizo Ja Script es convertir cinco a número, ¿verdad? Y le dio como resultado la operación aritmética, que es cuatro, y el tipo de salida final también fue de cuatro sobre Bien. Y esto es algo parecido. Y así es como funcionará si también estás haciendo uso de la multiplicación , ¿verdad Entonces déjame mostrarte eso también. ¿Bien? Así que voy a simplemente duplicar esto por aquí. Este es nuestro ejemplo tres, el ejemplo tres, y el ejemplo tres, y tengo cinco en uno. ¿Cuál crees que será la salida? ¿Tiene sentido una cadena como cinco en cadena multiplicada por una en cadena? No. Entonces claro, esto va a ser número. Bien. Entonces sí, así es como funcionan las cosas. Y como se puede imaginar, internamente, JavaScript está haciendo una conversión implícita por aquí en este caso, donde está convirtiendo automáticamente el valor de cinco por aquí, que es una representación de cadena a numerar por aquí. ¿Bien? Y como puedes ver, estás obteniendo una salida por aquí. Ahora, claro, si duplicas esto, déjame duplicar esto y déjame mostrarte un ejemplo más. Si me desplazo hacia abajo, si cambio esto al ejemplo cuatro, lo siento, no cinco. Esto es cuatro. Esto también es cuatro, y esto también es cuatro. Bien. Ahora, en vez de cinco por aquí, digamos que tienes, déjame deshacerme de esto. Digamos que tienes una verdad. Bien. Y se puede decir verdadero más uno. Bien. ¿Cuál crees que será la salida? Entonces la salida sería dos aquí porque true se considera como uno solo. Entonces si guardo esto, verás dos y la salida es número. ¿Bien? Si digo que esto es falso, verás que la salida es una porque false es cero. Bien. Así que voy a ceñirme a la verdad por aquí. Bien, y se puede ver la salida. Bien, así es como funcionan las cosas, y puedes ver muy bien cómo se está comportando la conversión implícita por aquí Todo bien. Ahora, hablemos de conversiones explícitas. Todo bien. Entonces voy a venir aquí. Bien. Y hablaremos de convertir valores explícitamente. Todo bien. Ahora, habrá escenarios antes que nada, bien. Habrá escenarios en los que la conversión implícita no será suficiente y quieres hacer las cosas explícitamente, ¿verdad Entonces digamos, le estás pidiendo al usuario que ingrese una H, por ejemplo, o ingrese marcas. Ahora bien, estas cosas siempre se ingresan como números, ¿verdad? Y tu programa de script de trabajo está obteniendo esto de HTML. ¿Bien? Entonces lo que harías es que querrías hacer uso de esto para ciertos cálculos. Ahora, digamos si tienes NUM por aquí, ¿de acuerdo? Uno, dos, tres, ¿de acuerdo? Entonces en mi ejemplo del que estaba hablando, donde estás aceptando cosas como la edad y las marcas, o, tal vez quieras hacer una conversión explícita donde ya sabes, el número que se ingresa es un número en realidad, pero podría ser que podría ser dado como entrada a tu programa como una cadena. Entonces tal vez quieras convertirlo explícitamente, ¿verdad? Entonces déjame darte un ejemplo. Digamos que tienes número por aquí y digamos que tienes piscina por aquí. Esto. Tengo dos variables. Bien. Ahora para hacer alguna conversión de tipo explícitamente, Ja Script ofrece un conjunto de funciones por aquí que puedes ver. Entonces, cuando estás trabajando con cadenas, estas son las funciones. Tienes dos cuerdas y cuerdas por aquí. También tienes número, parsent y parse float si estás trabajando con números Y si quieres trabajar con tipo de datos booleanos, entonces puedes hacer uso de Boolean Entonces, exploremos cómo puedes hacer uso de ellos individualmente. Entonces primero, hablaremos de cuerdas por aquí, ¿de acuerdo? Ahora, ya tengo un par de cadenas creadas. Entonces lo que haría es simplemente moverlos dentro de esta cuadra por aquí, no bloquear después de los comentarios. ¿Bien? Ahora, déjame convertir o déjame mostrarte cómo hacer uso de la función de cadena. Entonces puedo decir let num a string por aquí, y puedo decir cadena así, y puedo decir Num. ¿Bien? Así que solo pasa el parámetro por aquí, ¿de acuerdo? Y puedo decir consola dot log por aquí. Puede ver entumecido a la cadena. Puedo añadir un coma. Y entonces aquí puedo decir tipo de y vamos a imprimir tipo de num a string. Bien. Si guardo esto, verás uno, dos, tres y cadena como salida. ¿Bien? Entonces sí, esto realidad está en número y se está convirtiendo en una cadena. Ahora, el valor es el mismo, uno, dos, tres, pero ahora mismo está en formato de cadena. ¿Bien? Ahora bien, esto es una cosa. ¿Cómo puedes hacer uso del booleano por aquí? Entonces booleano también puedes convertir, ¿de acuerdo? Así que déjame crear una nueva variable por aquí. Digamos Bool para encadenar por aquí, y puedo decir cadena Bien, puedo decir bool por aquí, algo así. Y déjame copiar esto. Y se puede decir bool para encordar y tirar a cadena tipo de Se puede ver verdadero y ahora se está representando como cadena. Entonces así es como funciona esta cadena por aquí. Se puede ver, ¿verdad? Entonces se trata de cadena. Ahora también tienes dos cuerdas que estás viendo por aquí. Así que en realidad se puede decir let. Entonces déjame decir entumecido a la cadena o déjame copiar esto en realidad Todo bien. Simplemente voy a copiar todo esto de hecho. Bien. Y por aquí, voy a llamar a esto como uno. Esto también tiene uno por aquí. Este también tiene uno. Voy a añadir uno al final. Bien. Y en vez de cadena por aquí, puedo decir entumecido, tot, a Bien. Así. Y para Bool también, voy a decir bool, tot, para encadenar Y voy a ver si esto. Para que veas que la salida es la misma. Bien. Entonces, o puedes hacer uso de dos cadenas por aquí o simplemente una cadena de esta manera. ¿Todo bien? Ahora, hablemos de números, ¿de acuerdo? Entonces si tienes un valor en cadena, digamos, SDR num Bien, no se puede usar para los cálculos. Entonces digamos que tienes cuatro, cinco, seis por aquí. ¿Bien? No se puede usar esto para los cálculos. Es posible que desee convertir esto explícitamente en número para que pueda hacer uso de él. Todo bien. Y digamos que también tienes valores de ocho tartas decimales. Diré que SDR flotan por aquí. Bien, o puedes decir, llámalo decimal, como quieras. Y digamos que esto es 12.55, por ejemplo. Todo bien. Puedes tomar cualquier número aleatorio. Bien. Entonces echemos un vistazo al número antes que nada. ¿Bien? Entonces se puede decir vamos SDR a num por aquí. ¿Bien? Se puede decir número. Puedes ver número, y puedes pasar en SDR num Lo sentimos, no flotar, STR, num Bien. Así. Bien. Ahora, permítanme imprimir en el valor de aquí y también el tipo. Bien. Entonces voy a copiar esto y pegarlo por aquí. Y si guardo esto, verás 456 es la salida, y este es de tipo número ahora. Todo bien. Entonces esto se ha convertido en un número, como se puede ver. ¿Bien? Ahora, puedo duplicar esta línea, vamos a duplicar esta línea y veamos un ejemplo con parse int por aquí. Entonces si hago uso de parse int, puede decir int por aquí, bien, STR a int y voy a reemplazar esto con parsint y voy a guardar Ahora puedes ver que esto es de nuevo un número, ¿de acuerdo? Así que esto es en realidad convertirlo cadena en un entero. ¿Bien? Ahora, ¿qué pasa si agregas SDR, flotan por aquí Bien. Si agrega flotador STR, verá que está truncando esta parte decimal Se puede ver que solo se está imprimiendo 12. 12.55 no se está imprimiendo. ¿Bien? Entonces esto es útil si quieres un número entero, ¿verdad? Pero, ¿cómo se verían las cosas si también quieres mantener decimales y también quieres tener conversión a número y también quieres mantener decimal para mayor precisión ¿Bien? Porque hay una pérdida de datos, ¿verdad? Se pierde el valor decimal. Entonces ahí es donde entra en imagen el flotador escaso. Entonces lo que puedes hacer es dejarme como duplicar esto por aquí, STR a flotar. Por aquí. Y voy a repartir esto por aquí, y voy a ver si esto. En lugar de analizar fin, voy a decir parse, flotar. Si guardo esto, verás 12.55. Entonces el valor decimal también se está conservando y este se está imprimiendo como un número. ¿Bien? Entonces hay tres cosas para recordar número, que se usa para convertir una cadena a número, parse int, que se usa para convertir cualquier valor que tenga en un entero. Entonces tienes el float de análisis, que puede ayudarte a obtener el valor completo o almacenar el valor completo junto con el decimal. Bien. Ahora, una cosa que quiero mencionar aquí, si intentas convertir una cadena en un número, eso no va a funcionar. Entonces se puede decir SDR o inválido o num inválido. No válido, num. Digamos, porque esto va a ser inválido, lo sé. Digamos que digo número. No voy a crear una variable aquí, pero voy a tener directamente número y puedo saludar. Bien. Ahora bien, esto no es válido para nada, ¿de acuerdo? Así que puedes tomar esto y puedes imprimirlo por aquí. Pero esto no es válido, ¿de acuerdo? Si guardo esto, verás que no es un número, NN significa no un número, NN, y el tipo es número, Pero el valor se pierde. Es NAN. Todo bien. Entonces sí, si estás haciendo un encasillado o una conversión de tipo a número, asegúrate de que la fuente realmente tenga un número válido ¿Bien? Si agrego caracteres a esto en cuatro, cinco, seis, digo cuatro, cinco, un seis, entonces volvería a ser NN porque no es un número válido, ¿verdad Espero que esto tenga sentido. ¿Bien? Ahora, hablemos de booleano por aquí. Entonces crearemos cero Bien. Y también voy a haber dejado cadena booleana no vacía por aquí o déjame quitar booleano de aquí. Se está haciendo más largo. Bien. Y entonces voy a tener hola. Bien. Y veamos cómo puedes hacer uso del booleano Se puede decir dejar cero a booleano. Entonces, primero convertiremos cero a booleano. Diré Booleano por aquí, y diré cero. Bien. ¿Cuál crees que será la salida? Déjame obtener esta declaración aquí, Cerradura de consola. Voy a reemplazar Voy a reemplazar este entumecido inválido con cero booleano, y verás false Así que cero en realidad se está traduciendo a falso cuando se convierte a booleano Y ahora bien, agregué cero accidentalmente, esto debería ser cero. ¿Bien? La salida será la misma. Pero si conviertes el cero en uno, ahí te va a dar verdad. ¿Bien? Si dices uno, cinco, seis, cualquier número aleatorio, seguirá siendo cierto. Por lo que es cae solo 40 por aquí. Bien. Espero que esto tenga sentido. Todo bien. Ahora bien, si tienes esta cadena por aquí, ¿qué pasa si intentas convertir esto a Poulin, bien? Entonces déjame copiar esto por aquí. Bien. Iré a la siguiente línea. Y en lugar de cero a booleano, voy a decir cadena a cadena booleana a booleana Y aquí, voy a tener cadena no vacía. Bien. Y voy a copiar la cadena a booleana y la voy a añadir por aquí Veamos cuál es la salida. Verás verdad. ¿Bien? Entonces cualquier cadena no vacía que tengas y si intentas convertirla a booleana, vas a ver true como la salida ¿Bien? Entonces valores como cero o cadena vacía, null , undefined y NN son falsos, lo que significa que se convierten en false Así que incluso en lugar de cero, si tienes una cadena vacía, cadena vacía. Bien, será falso. Se puede ver. Si es algún final, digamos, un final. Y si guardo esto, será falso. ¿Bien? Si es nulo, volverá a ser falso. Bien. Pero me quedaré a cero. Bien. Y todo lo demás, aparte de cero, cadena vacía, nulo, NN indefinido, todos estos son valores falsos Si estos se convierten, se traducirán en falso en Bolin, y todo lo demás aparte de esto es cierto, ¿verdad Entonces espero que esto tenga sentido en cuanto a cómo funcionan explícitamente las conversiones de tipo en Jascript Bien. Bien. Esto fue un error aquí. Espero que esto sea útil. 25. Proyecto: crea un generador de color: Así que vamos a construir un generador de color usando JavaScript en HTML, ¿verdad? Así que aquí estoy en index dot HTML, así que tengo este archivo index dot HTML y index dot Hs. Este es un archivo JavaScript donde residirá nuestro código Ja Script. Voy a añadir un archivo más, y voy a llamar a esto astyles punto CSS Así que vamos a hacer un poco de embellecimiento, no mucho un poquito, pero vamos a hacer que nuestra página web se vea un poco decente, ¿verdad Entonces ahora aquí en índice punto HTML, lo que voy a hacer es que voy a escribir exclamación, y solo voy a obtener el código para una página HTML Todo bien. Ahora, pueden ver que tengo dispositivo y todo aquí, bien. Y aquí, voy a agregar el título del documento o el título de la página web, ¿verdad? Y este título será generador de color aleatorio. Algo así. Todo bien. Ahora, por aquí debajo del cuerpo, voy a tener H una etiqueta porque aquí es donde voy a empezar a escribir en el código. Entonces voy a decir generador de color aleatorio. Y en realidad, en lugar de escribir, puedo obtener esto directamente. Bien. Esto está hecho, y cómo funcionará esta app es, tendremos un botón que generará colores aleatorios cada vez que hagas clic en el botón. Todo bien. Entonces necesitamos ese botón. Entonces voy a añadir un botón por aquí. Se puede ver este elemento de botón. Todo bien. Voy a cerrar esto y voy a llamar a este botón como generar color. Bien. Bien. Esto está hecho. Y entonces tenemos que mostrar también los códigos de color, derecho. Ahora el color que se está generando que estará en código xassimol Ese será un código Exad assimil que podremos mostrar también al usuario. Todo bien. Entonces mostraremos el código de color. Diré Ptag por aquí. Bien. Y vamos a tener algún código de color impreso por aquí. Esto está hecho, ¿verdad? Ahora, tenemos que cargar el JavaScript también. Entonces lo que puedo hacer aquí es que puedo cargar el archivo JavaScript. Entonces tenemos el archivo Ja Script creado como index dot qs. Así que voy a salir de la etiqueta corporal por aquí y voy a decir script SRC, y voy a decir punto índice s por aquí Y voy a cerrar la pila. Todo bien. Todavía no tenemos ningún enlace hecho para CSS, pero lo veremos en breve. Todo bien. Voy a cerrar esta Consola. Ya no necesitamos ver la consola, ¿verdad? Ahora, por aquí, si veo esto, bien, esto realmente debería mostrar este HTML en particular por aquí. Se puede ver generador de color aleatorio y generar color. Todo bien. Ahora, vamos a ir al punto índice JS, a la derecha. Y aquí es donde vamos a escribir el script Java que trabajará con estos elementos HTML y le agregará vida. Entonces, si haces clic en Generar color como dije, debería generar un nuevo código de color y el fondo de toda esta página web debería estar configurado a ese código de color en particular, y también debemos mostrar el código de color por aquí al usuario. Todo bien. Entonces lo que voy a hacer es aquí si vienes. Aquí tenemos tenemos este PTAC. Tenemos algunos elementos y también necesitamos mostrar el código de color por aquí, o lo que voy a hacer es que le voy a asignar ID a esto, porque necesito hacer referencia a esto desde el JavaScript. ¿Bien? Así que voy a codificar esto como código de color por aquí. Algo así. Bien, y lo guardaré. Bien. Y permítanme simplemente quitar este código de aquí. ¿Bien? Sólo voy a tener color. Voy a venir aquí. Bien. Y lo que voy a hacer es decir documento. Entonces necesito obtener esta etiqueta P donde queremos mostrar el color. Entonces voy a decir documento punto obtener elemento por ID. Entonces estoy obteniendo el elemento por ID del documento. Ahora aquí, voy a mencionar la idea del elemento. Entonces la idea del elemento es el código de guión de color o color, lo que sea que hayas agregado ahí ¿Bien? Y podemos asignarle esto a una variable, ¿bien? Entonces puedo decir color y puedo decir párrafo, bien, párr. Y voy a guardar esto. ¿Bien? Así que ahora tenemos acceso a la etiqueta P, ¿de acuerdo? Y si lo desea, puede optar la consola de registro de puntos por aquí. O en lugar de hacer el registro de puntos de consola, lo que yo diría es que puedes decir Color para Tot contenido de texto, y puedes agregar test por aquí. Bien. Y si guardas esto, deberías ver se agrega prueba por aquí, ¿de acuerdo? Lo que significa que puedes acceder a la etiqueta de párrafo, que es una etiqueta P usando este ID, ¿de acuerdo? Y si colocas el cursor sobre este documento punto get element by ID, podrás ver devoluciones de referencia al primer objeto con el valor especificado del atributo ID Entonces el atributo ID es color en este caso. ¿Bien? Y somos capaces de acceder al elemento D. Ahora, puede tener un código de color predeterminado que también se muestra aquí. ¿Bien? Así puedo agregar un código de color como hash. Entonces los códigos de color comienzan con hash, y puedo decir FF FF, FF. Bien. Por lo tanto, puede agregar un código de color predeterminado que realmente se muestra cuando se carga la página. Todo bien. Ahora, una vez que hayas hecho esto, lo que debes hacer es hacer clic en este botón. Entonces al hacer clic en este botón, lo que debería pasar es que se debe generar el código de color, y la forma en que lo vamos a generar es que vamos a tener una generación aleatoria. Todo bien. Entonces lo que voy a hacer es que voy a venir por aquí y necesitamos tener acceso al botón porque al hacer clic en este botón, algún código debería correr, ¿verdad? Entonces lo que voy a hacer aquí es que voy a decir, voy a asignarle a esto un ID por aquí, y se puede generar ID. Bien. E no va a estar ahí. Bien. Esto está ahí y aquí voy a venir. Voy a copiar esto y voy a ver documento punto Obtener elemento por ID generar por aquí. Bien. Ahora, una vez que tengamos acceso al botón, voy a decir al hacer clic de este botón. Bien. Por lo que necesitamos instruir sobre el clic de este botón Necesito agregar la función A por aquí. Bien. Ahora bien, esta es la sintaxis para definir una función en JavaScript. Bien. Y vamos a definir una función. Ahora, dentro de esto, lo que sucede es este bloque de código. Lo que significa esta función es este bloque de código que aquí estamos definiendo se ejecuta cuando se hace clic en el botón ¿Bien? Bastante simple. Diré let y voy a tener un color aleatorio siendo generado. Ahora bien, ¿cómo vamos a generar un color aleatorio? Porque este es un color aleatorio que también estaríamos mostrando. Ahora para generar este color aleatorio, vamos a hacer uso de una fórmula. Ahora, siempre que estés representando códigos de color, empieza con hash, y luego tienes un valor hexadecimal como FF, CC, FF, algo así. ¿Bien? Entonces necesitamos obtener este valor hexodeimal Aleatoriamente, hash, puedes anexar manualmente, ¿verdad? Entonces lo que haría es que vendría por aquí. Vamos a hacer uso de la fórmula, ¿de acuerdo? Y vamos a hacer uso de algo llamado como objeto matemático. ¿Bien? Así que voy a decir matemáticas por aquí y voy a decir punto ahora dentro matemáticas o objeto matemático en JavaScript da acceso a muchas funciones dentro de JavaScript. Una de las funciones es aleatoria. Ahora usando esta función, puedes generar números aleatorios. ¿Bien? Entonces, si pasas el cursor sobre esto, verás que devuelve un número pseudo aleatorio 0-1 ¿Bien? Ahora, cada vez que se ejecuta esto, genera un número aleatorio. Entonces déjame mostrarte esto por aquí. ¿Bien? Entonces Alco a Console, puedes ver matemáticas tensas, aleatorias por aquí Vaya, Mt tenso, aleatorio, algo así, y puedes generar un número aleatorio Entonces cada vez que ejecutes esto, va a generar un número aleatorio. ¿Bien? Ahora, lo que vamos a hacer es que vamos a hacer uso de esto y vamos a generar un número hexadecimal. ¿Cómo? Entonces voy a generar este número aleatorio generado, ¿de acuerdo? Entonces déjame copiar este número aleatorio que se está generando. Entonces este es un número aleatorio que se está generando. Despejaré la consola, y multiplicaré este número aleatorio por un número. Ahora, este número es del 1627 al 15. Ahora, ¿por qué lo estoy multiplicando con este número? La razón por la que lo estoy multiplicando con este número es porque este es el valor máximo ¿Bien? Este número representa el valor más alto posible o el máximo para un color de 24 bits, o en hexadecimal. Entonces eso es con lo que voy a multiplicarlo. Bien. Y luego una vez que terminamos con la multiplicación, obtenemos un resultado Entonces voy a conseguir voy a hacer uso de matemáticas punto piso. Ahora, ¿qué es el piso de puntos matemáticos? Entonces he copiado este valor después de la multiplicación. ¿Qué es el piso de matemáticas? Piso mate es una función de piso que te dará así que si tengo un valor decimal de uno, cuatro, cinco, seis, entonces la salida sería uno. ¿Bien? Ahora bien, si tienes uno, cualquier número que tengas, te dará el valor más bajo en el decimal. ¿Bien? Entonces si tienes 1.4 4636, va a erradicar o ignorar este valor de aquí. Entonces una es la salida. Ahora si pego esto por aquí, es, claro, me va a dar ocho dobles dos, 8937 por aquí ¿Bien? Y luego voy a tomar este valor, este valor por aquí y lo voy a convertir a representación hexadecimal de cadena. A cadena hexadecimal es lo que puedo decir. Todo bien. Entonces voy a decir este número punto dos cadenas, y voy a pasar 16 como argumento, lo que significa que necesito exa valor decimal de esto ¿Bien? Entonces me ha dado un error por aquí. Bien. Déjame ver. Bien, entonces esto tiene que ser para que esto funcione, tiene que estar en forma de cadena. Entonces voy a copiar esto de nuevo. Diré hash por aquí. Voy a repartir esto. Bien. Y luego voy a decir a la cuerda y déjame probar este 16 de aquí. A ver. Bien, token inválido o inesperado. 1 segundo. Déjame intentarlo de nuevo. Entonces esto debería funcionar idealmente. Bien, entonces esto funciona. Se puede ver así por alguna razón, no está funcionando en la consola, bien. Pero déjame mostrarte esto en la propia identificación, ¿verdad? Entonces aquí dijimos que vamos a obtener un número aleatorio. Voy a multiplicarlo con 16777, Bien, a uno, cinco Vaya, esto tiene que ser cinco. Todo bien. Y todo esto, todo esto tiene que estar en un par de tirantes redondos, y luego voy a pasar esta cosa al piso por aquí. Bien. Entonces obtenemos el valor fluido. Todo bien. Ahora déjame a la consola punto de registro por aquí. En lugar de registro de consola, lo que realmente podemos hacer es que realmente podemos mostrar en carbón para. El color para el contenido del texto es igual al color aleatorio. ¿Bien? Entonces podemos ver la salida aquí mismo. Todo bien. Ahora, si me refresco, déjame ver qué está pasando por aquí. Por lo que se activará si haces clic en Generar color. Para que veas que se están generando estos números. Bien. Pero ahora mismo, esta no es la representación exadimal Entonces lo que haría aquí es que vendría aquí. Yo diría que enseñé a encordar por aquí, y yo diría un valor de 16, algo así. Y yo lo guardaría. ¿Bien? Yo diría generar color. Ahora se puede ver que estos valores se están generando. Se pueden ver estos valores exaimales. ¿Bien? Necesitas anteponer esto con hash ¿Bien? Entonces voy a decir tiene por aquí, algo como esto, y voy a decir más Bien. Entonces ahora tienes códigos de color que se están generando por aquí. No estoy seguro de que el blanco no esté trabajando en la consola. Si lo sabe, por favor házmelo saber. Todo bien. Pero aquí está funcionando perfectamente bien, como puedes ver, bien. Ahora esto está hecho, ¿de acuerdo? Y lo que tenemos que hacer es que en realidad estamos mostrando el color aleatorio. Lo que también tenemos que hacer es que podamos cambiar el fondo al color que se está generando. Entonces puedo decir documento, tot body, y puedo decir tot style, tot, y puedo obtener el Uy. Color de fondo por aquí. Y el color de fondo será color aleatorio. Y si guardo esto, puedes ver Diversión, ¿verdad? Entonces con JavaScript simple, como ¿cuántas líneas de script Java has escrito? Ni siquiera una, dos, tres, cuatro, cinco, cinco, seis líneas de código, eres capaz de generar tanta magia. Bien, ya puedes ver. Entonces con esta fórmula, estamos generando un código de color que estamos mostrando al usuario, y también lo estamos configurando como un color de fondo. Ahora viene dstyle punto CSS, ¿verdad? Entonces lo que voy a hacer es que vamos a venir aquí. Bien, y empieza a peinar por aquí. Bien. Entonces voy a decir familia de fuentes por aquí. Y voy a añadir fond familia como Aéreo. Bien. Y podemos decir texto alinear. Haré que el texto se alinee al centro. Bien, margen por aquí, margen, podemos ponernos a cero. Uy. Y luego por aquí, voy a tener relleno. Voy a tener relleno a 20 píxeles. Bien, y tengo color de fondo. Puedo tener color de fondo para picar por aquí e iFifi algo como Bien. Entonces sí, esto es primero CSS. Bien, pero también necesitamos vincular el CSS al archivo HTML. Sólo entonces va a reflexionar, bien, lo que no hemos hecho. Entonces lo que puedo hacer es que puedo decir link por aquí. RL es igual a hojas de estilo. Bien. Hoja de Estilo por aquí, y puedo tener HRF Y esto va a ser estilos punto css, y lo voy a cerrar. Algo así. ¿Bien? Entonces ahora verás que CSS se está aplicando aquí, ¿de acuerdo? Ahora, el cuerpo está hecho, bien. Podemos darle estilo un poco más. Bien. H una etiqueta. Lo que puedo hacer es que puedo añadir color por aquí. El color puede ser, bien, en vez de esto, puedo agregar 333 por aquí. Bien. Entonces necesitamos darle estilo al botón. Entonces, ¿qué estilo le podemos dar al botón? Bien. Entonces vamos a darle un color azulado Entonces tengo un código de color en mente, así puedo decir que puedo tener azul por aquí, azul tipo de color, ya ves. Bien. Ahora desplázate hacia abajo. Color Vaya. El color es blanco, 55. Bien. Y frontera, no puedo decir nada por aquí. Bien, Boter se ha ido. Podemos agregar relleno ahora para que se vea decente, así puedo decir diez px y 20 px, guárdalo. ¿Bien? Con aspecto decente. O puedes reducir el acolchado si quieres. Bien. Margen. Puedo tener diez pixeles de margen. Bien. Y puedo tener el tamaño de fuente como el de, digamos, 16. Bien. O podemos tener Cursor, puntero por aquí. Bien, radio fronterizo. Bien, el radio del borde puede ser de cinco píxeles por aquí. Bien. Y entonces puedo tener transición por aquí, transición de color de fondo. 0.3 segundos. Bien. Bien. Entonces, esto es todo. Se puede ver el CSS que se está aplicando, ¿de acuerdo? Y si haces zoom un poco. Entonces tendrás que acercarte un poco, bien. Entonces este es el botón CSS. O también puedes tener botón hover, ¿de acuerdo? Entonces botón. Bien, H. Bien. Y aquí puedes decir color de fondo, y puedes agregar azul oscuro. Bien. Se puede ver que el CS está en acción. Todo bien. Entonces esto está hecho. Incluso puedes tener la pantalla donde estás mostrando el que realmente estás mostrando este código de color, ¿verdad? Para que puedas conseguir ese estilo también. Entonces, accidentalmente presiono algo más. Bien, así que lo estamos exhibiendo por aquí, color. Bien. Entonces lo que haría es que vendría aquí. Color Asta. Voy a conseguir esto me referiré a este ID, y voy a decir tamaño de fuente de ustedes puede decir 24 por aquí. Bien, el peso de la fuente está en negrita por aquí. Tienes acceso a negrita. Bien. Y se puede decir color por aquí. Color, puedes agregar, Bien. Sólo puedes quedarte con 333. Se puede ver por aquí. Bien. Y entonces puedes tener margen y margen de 20 píxeles y 100. Bien. Esto está hecho. Ahora, sí, esto es lo que es. No creo que debamos agregar, Bien, entonces esto está hecho, y podemos tener más si así lo desea. Pero por ahora, vamos a parar por aquí, ¿de acuerdo? Esto es más o menos así, ¿verdad? Y es un generador de color muy sencillo. Se puede ver como con la ayuda de JavaScript simple, apenas cinco, seis líneas de código, hemos podido agregar tanta vida a nuestra página web estática, derecho. Entonces sí, incluso puedes optar usar viento de cola si así lo deseas Pero sí, solo elijo escribir un poco de CSS crudo, bien Entonces espero que esto te dé algunas ideas sobre cómo puedes hacer uso de los selectores de aquí Y cómo puedes agregar oyentes a los botones y cómo puedes obtener un fragmento de código ejecutado después de agregar oyente a tu código JavaScript. Todo bien. Entonces sí, espero que esto sea útil, y espero que hayas podido seguirlo. 26. Proyecto: crea un convertidor de temperatura: Así que vamos a echar un vistazo a cómo se puede construir una aplicación de conversión de divisas. Todo bien. Así que vamos a trabajar alrededor de tres archivos por aquí como index dot has, index dot HTML y style dot CSS. Todo bien. Entonces comenzaremos a escribir el código en el archivo HTML. Ahora lo que toda esta aplicación va a tener es que va a tener un desplegable, que va a ayudar a los usuarios a seleccionar de donde desee o en qué unidad desea convertir la temperatura, ¿verdad Y luego también tendremos un cuadro de texto donde el usuario podrá introducir la temperatura que desea convertir. Y junto con eso, tendremos un botón de conversión, que el usuario puede hacer clic y obtener la temperatura convertida. Así que vamos. Voy a tener exclamación por aquí y voy a tener un código de texto listo por aquí Todo bien. Ahora, una vez que tengamos el código repetido, voy a actualizar el título, así que voy a decir temperatura Convertidor por aquí. Bien. Y luego dentro del cuerpo, volveré a tener la etiqueta H one. Así que voy a copiar esto por completo, y voy a cambiar el nombre de esto a H one. Todo bien. Entonces tienes convertidor de temperatura. Bien. Sí, ya puedes ver. Entonces ahora lo que tenemos que hacer es agregar una entrada. ¿Bien? Entonces la entrada es de tipo texto por aquí. Bien, entonces escribe texto, y también tendré un marcador de Diré que entre temperatura. Bien. Y vamos a cerrar esto. Agreguemos un elemento ID también por aquí. Entonces el ID para esto puede ser Ups por aquí así que este es para que el ID para esto pueda ser temp o temperatura, lo que quieras Sólo voy a mantenerlo corto para temp. Bien. Si ves tienes este campo de texto entre temperaturas por aquí. Todo bien. Ahora esto está hecho. Ahora necesitamos tener un selecto, que es un desplegable. Voy a llamar a esto. Voy a asignar esta identificación de unidad. Y dentro de esto, voy a tener opción. Por aquí. Bien. Ahora la opción será de tipo valor y el valor es C. Ahora la pantalla es Celsius. Algo como esto. Y si vienes por aquí, vas a ver Celsius aquí arriba. Me va a gustar duplicar esto por aquí. En vez de C, voy a tener F por aquí y voy a tener Farin Fahrenheit, algo así ¿Bien? Entonces, si vienes por aquí ahora, vas a ver Celsius y Fahrenheit, lo cual es bastante bueno Todo bien. Ahora, dependiendo de la selección, C y F se pasarán a la aplicación o a cualquier selector o donde quiera que esté pasando el valor. Ahora por aquí, puedes tener un botón. Bien. Voy a añadir botón como convertir por aquí, el ID es convertir y Aad texto como convertir por aquí ¿Bien? Y luego también necesitamos mostrar el valor convertido, así que voy a decir temperatura convertida por aquí. Entonces, ¿cuál es la temperatura convertida? Voy a añadir un lapso para mostrar la temperatura. ¿Bien? Entonces voy a decir span por aquí y tendremos cero inicialmente, y puedo agregar un ID convertir algo así. Bien. Esto está hecho, así se puede ver por aquí. Así es como se ve la interfaz en estos momentos. Todo bien. Ahora podemos vincularlo rápidamente a nuestra aplicación, así que voy a decir script por aquí. Diré SRC y diré índice s, y lo cerraré. También enlazaremos la parte CSS. Entonces diré Link RL y diré hoja de estilo. Bien. Y voy a decir que voy a añadir HRF por aquí como estilos dot CSS y LCloss. ¿Bien? Entonces esto se hace hasta el momento tan bien, se puede ver la aplicación. Ahora tenemos que comenzar con la parte de JavaScript, bien. Entonces ahora lo que tenemos que hacer es primero lo primero así que primero en el click de esto se debe ejecutar el código, ¿verdad? Entonces tenemos que conseguir ese botón. ¿Bien? Entonces podemos decir documento punto obtener elemento por ID porque estamos haciendo uso de ID por aquí. ¿Bien? Y puedo decir convertir por aquí, ¿verdad? ¿Y qué debería pasar? Entonces al click de esto, queremos ejecutar algo. Entonces voy a decir al hacer clic por aquí y ejecutaré una función. Una función no tiene nombre, no tiene ningún tipo de parámetros, y lo alineo primero con punto y coma Y ahora dentro de esta función, podemos agregar lo que queramos o cualquier código que queramos mostrar o cualquier código que queramos ejecutar básicamente en el clic del botón. Así que primero voy a crear un par de variables por aquí, temperatura y voy a conseguir la unidad también. Ahora, primero necesitamos obtener la temperatura así como la unidad. Bien. Entonces voy a decir documento, tenso, obtener elemento por ID, y necesitamos obtener valor temp tenso Ahora, por qué valor de punto Temp. Entonces aquí, esto es Temp. Entonces estamos obteniendo primero el valor que el usuario ha ingresado. Y entonces también necesitamos obtener la unidad que el usuario ha seleccionado, ¿verdad? Entonces lo que haría es copiar esto por aquí o esperar un minuto, tenemos que completar esto. El valor que estamos consiguiendo aquí será en formato string. No quiero hacer uso de cadena, así que necesitamos preservar los valores decimales también. Entonces, ¿cuál es la elección correcta aquí? Sí, como pueden ver, estoy haciendo uso del flotador de análisis. ¿Por qué estoy usando parse float? Porque el usuario podría ingresar un valor decimal. También necesito obtener el valor decimal. Para mayor precisión. Todo bien. Voy a conseguir este documento punto Obtener Element ID por aquí, y voy a conseguir la unidad por aquí. Bien, entonces esto tiene que estar en Esto tiene que ser como una cadena. Entonces voy a decir unidad, algo así. Bien. Esto está hecho, hasta ahora bien. Bien. Y una vez que tenemos la unidad y la temperatura, lo que podemos hacer es que en realidad podamos escribir algún código sobre la base del cual ocurrirá la conversión, ¿verdad? Ahora bien, ¿cuál debería ser ese código? Entonces tendremos que hacer uso de la toma de decisiones por aquí, ¿verdad? Entonces, si el usuario selecciona farenhight. Se aplica una fórmula. Si el usuario selecciona Celsius y hace clic en convertir, se aplica otra fórmula. Entonces, dependiendo de lo que se seleccione aquí, la aplicación de la fórmula cambia. Todo bien. Entonces déjame mostrarte la fórmula primero, ¿de acuerdo? Entonces la fórmula es convertir Celsius a Fahrenheit, diremos temperatura en 9/5 por aquí más 32 Esta es una fórmula que vamos a hacer uso de esto va a convertir C a F. Y luego para convertir Fahrenheit a Celsius, vamos a decir temp -32, y vamos a decir en 9/5. Todo bien. Estas dos son las fórmulas. Permítanme mencionar también esto por aquí. Esto convertirá F a la de C. ¿De acuerdo? Ahora bien, ¿cómo sabemos qué fórmula queremos ejecutar, verdad? Entonces voy a decir. Entonces lo que voy a hacer es decir si unidad es igual a C. Entonces yo unidad es C, ¿verdad? Entonces, si el usuario ha seleccionado Celsius por aquí en la parte superior hacia abajo, lo que debería pasar es que deberíamos convertir C a F, ¿verdad? Porque entonces deberíamos ejecutar esto, ¿no? O si no es cierto, entonces podemos ejecutar esto. Todo bien. Y podemos tener esta parte en el par de tirantes redondos e incluso esta parte en el par de tirantes redondos para mayor claridad. ¿Todo bien? Algo como esto. Bien. Y entonces puedo asignar la salida de esta para convertir. Temp por aquí, que es una variable. Bien. Y si vengo por aquí. Uy. Entonces si vengo por aquí, puedo así que tenemos esta temperatura convertida. Podemos mostrar esta temperatura convertida. Entonces, ¿cómo lo mostraré? Voy a copiar este texto, y necesitamos mostrarlo en ID convertido, ¿verdad? ¿Esa es la identificación que damos? Bien, entonces el ID se convierte, sí, necesitamos mostrarlo en el span, ¿ verdad? Así convertido punto. Diré contenido de texto, y diré punto temp convertido. Sólo puedo mostrar la temperatura convertida. Veamos cuál es el valor que vemos. Entonces digamos que la temperatura es de 100, selecciono Celsius. Esto es Celsius, ¿verdad? Entonces necesito convertirlo a Fahrenit. Entonces esto es 21, dos. Bien. Ahora bien, si quieres verificar esto, solo puedes Google Celsius a fahrenit y te encontrarás esta calculadora en la propia Google, la búsqueda de Google Entonces puedes ingresar 100 y puedes ver la salida como a uno, dos. Todo bien. Podemos hacer lo mismo para fahrenit si seleccionas fahrenit y dices convertir. La temperatura en Celsius es de 122.4, y puedes verificar esto por aquí Tengo Google ahora fahrenit a Celsius. Entonces esto es Celsius a fahrenit. Esto es farenit a Celsius. Entonces si digo 100, me sale, bien, entonces hay algo 1 segundo. Entonces hay 100 fahrenit y estoy convirtiendo Bien, entonces mi conversión, parece que está mal, entonces debería ser en realidad 37 grados Celsius, Pero estoy recibiendo 122. Entonces, si vienes por aquí, tal vez algo está mal en la fórmula. Bien, así que esto no puede ser. Bien, entonces esto no debería ser nueve por cinco, esto debería ser cinco por nueve aquí. Ahora si vienes, encuentras 100 Fahrenheit convertidos, puedes ver 37.77 Bien. Entonces ahora es apropiado. Todo bien. Hubo un error en la fórmula, así que asegúrate de hacer uso de esta fórmula, ¿verdad? Entonces ahora, esto no se ve bien, ¿verdad? Son 7777, mucho siete, y luego ocho. Entonces me gustaría moverlo a decimales fijos o posición fija de dos lugares Entonces lo que puedo hacer aquí es que puedo decir convertir un temp, tenso, a fijo, y puedo decir dos encima Se puede ver, número de dígitos. Entonces esto permite mencionar el número de dígitos después del punto decimal y debe estar en el rango de 020 a 20, lo siento, inclusive Entonces si guardo esto, y si vienes aquí, si entro a 100 Celsius está bien. Bien. Voy a dar cero, cero. Si agregas Fahrenheit, verás 37.78. Todo bien. Entonces así es como el convertidor de temperatura está funcionando bastante bastante simple, bien. Pero con la ayuda de JavaScript, somos capaces de hacer mucho, ¿verdad? Ahora, echemos un vistazo al estilo de aquí. Bien. Mantendremos el estilo como realmente simple por aquí. Sólo voy a escribir unos pocos. Simplemente escribiré algunos estilos bien, como estilo solo escribiré algunos elementos de estilo. Así que solo voy a agregar algunos elementos de estilo por aquí. Entonces para la familia, digamos como esta de aquí. Bien, línea de texto. Voy a mantener el centro y el margen como cero. Y voy a decir relleno como 20. Probablemente. Bien. Y voy a añadir color de fondo como probablemente. Podemos agregar fondo como, digamos, Azure. Veamos cómo se ve. Bien. ¿Se ve bien? Está bien. Azure se ve decente. Mensajero también se ve decente, ¿de acuerdo? O puedes actualizar la familia de fuentes si no te gusta esto, ¿de acuerdo? Así familia de fuentes puede ser se puede seleccionar sensor Alvita aérea Se puede ver. Esto también está bien. Dependiendo de su elección, puede elegir la familia de fuentes. Ven a H uno por aquí. Bien. Ahora para H uno, voy a ver color. ¿Cuál es el color? Puedes seleccionar probablemente bajar y puedes tener negruzco. Yo también lo puedo actualizar, para que puedas actualizarlo a algo como esto. Totalmente depende de ti o puedes pegarte al negro por aquí. Yo sólo me desharé de esto. Yo sólo voy a mantener el negro simple. Bien. Bien. Esto está hecho. Ahora por aquí, podemos ver seleccionar y la entrada. Entonces puedo decir entrada para tipo como texto. Bien. Y para seleccionar aquí. Esto es un CSS. Ahora por aquí, puedo decir relleno de cero píxeles. Bien. Puedo decir tamaño de fuente por aquí de 16. Bien. Entonces puedes tener un margen por aquí para diez pixeles, ¿de acuerdo? Se puede tener un radio de poder de cinco píxeles. Todo bien. Puedes tener poder por aquí de un píxel, sólido, y voy a decir hashtg entonces puedes tener ancho por aquí de 200 píxeles Déjanos ahorrar y ver, ya puedes ver. Esto ha cambiado un poco, ¿verdad? Se ve bastante decente, ¿verdad? Puedes agregar más relleno si lo deseas. Bien. Puedo aumentar el relleno a digamos diez. Bien. El acolchado no se veía tan bien, pero ahora se ve decente, ya ves. Bien. Y ahora pasemos a así sobre esto, el siguiente es el patrón por aquí. Entonces echemos un vistazo al patrón a lo que todo lo que podemos agregar. ¿Bien? Entonces para botón, voy a decir patrón por aquí y desplazarme un poco hacia abajo. Bien. Entonces para botón, podemos decir color de fondo de, uh déjame agregar azul. Bien. Puedo decir color de blanco, y el borde no es ninguno. Y puedo agregar relleno por aquí, diez pixeles, 20 pixeles, algo así. Y se puede decir fuente, bien, no fuente, tamaño de fuente. El tamaño de la fuente puede ser 16 debería verse decente. Vamos a modificar esto si no lo hace, Bien, puntero del cursor por aquí. Puedo decir que el radio del polvo es de cinco pixeles, algo así. Y si, creo que esto es todo. Si vienes aquí, bien, se ve bastante decente. Puedes agregar un efecto hover si lo deseas, ¿de acuerdo? Entonces puedo decir hover on botón. Bien, entonces botón hover puede ser color de fondo, y puedo decir azul oscuro Ven aquí. Se puede ver este efecto, ¿verdad? Más o menos eso. Todo bien. Y ahora puedes agregar un estilo para PTAC. ¿Bien? Puedo decir tamaño de fuente y píxeles din un poco más grandes que el botón. Y el peso de la fuente es negrita. Y entonces el color es 333. Margen de puedo decir 20 pixeles y cero. Si vienes aquí, ¿de acuerdo? Ahora, agreguemos así esta cosa que tenemos, que se convierte, le agregaremos algo a esto. Bien. Voy a venir aquí y aquí, convertirlo. Entonces para esto, voy a decir color. Color de podemos decir que puedo un azul. Bien. Dependiendo de tu preferencia, puedes decir tamaño de fuente. Diré grande y encontró peso, negrita. Veamos cómo se ve. Así se puede ver bastante decente, bien, sobresaliendo. Se puede convertir. Bien. Entonces este es nuestro convertidor de temperatura, y cómo funcionó es que construimos o escribimos algo de HTML, HTML simple, etiquetas simples que usamos, nos vinculamos como JavaScript y CSS. Dentro de JavaScript, estamos obteniendo el botón de convertir, y lo estamos agregando al hacer clic en Lissner, que se activa cuando haces clic en él, y luego tienes estos valores que estás obteniendo porque sobre la base de esto, vas a realizar Asegúrate de ello, obtén el valor de temperatura como flotador. Ocho. Entonces estamos convirtiendo la temperatura con la ayuda de ustedes pueden ver por aquí con la ayuda de operador ternario, ¿verdad Entonces primero estás comprobando. Esta es una condición. Bien, primero estás comprobando si la unidad es igual a Celsius. Si es igual a Celsius, entonces necesitas convertir Celsius a ferrenit Si la unidad actual no es Celsius, si es ferrenit, es necesario convertir de ferrenit a Celsius, y estas son Y entonces estás mostrando el resultado convertido bytrncating los decimales a upti Y luego tienes algo de estilo básico agregado para embellecimiento Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 27. Literales de plantilla: Ahora es el momento de que comencemos a hablar los literales de plantilla y entendamos cuáles son Así que cada vez que trabajas con cadenas, bien, ¿cómo se crea una cadena, correcto? Perdón por las gorras. Puedes crear cadena de esta manera así puedes decir, et name es igual a W códigos dobles, puedes asignar un nombre por aquí. ¿Bien? Ahora en lugar de códigos dobles, incluso se puede hacer uso de código único. Bien puedo seleccionar el texto y puedo escribir un solo código. Entonces esta también es una cadena válida por aquí, ¿de acuerdo? Ahora bien, esta es una forma de crear cadenas y otra forma es con la ayuda de literales de plantilla Ahora, ¿qué son los literales de plantilla? Por lo que te permiten trabajar con cuerdas de una manera más flexible y más legible. Ahora, ¿qué significa más flexible y más legible? Esto también es flexible, ¿verdad? Pero esto es bueno con casos de uso simples. Ahora, habrá casos de uso en los que quizás quieras hacer, digamos, tendrás que crear una variable más. ¿Bien? Quiero crear una variable más, y quiero saludar. ¿Bien? Y deseo tener nombre por aquí, ¿verdad? Entonces voy a tener que decir algo como esto. Bien. Bien. Ahora bien, si hago consola punto log por aquí, puedo decir saludo. Bien. Entonces verás a Hola Alice por aquí. Todo bien. Entonces, si quieres concatenar dos cadenas, vas a hacer uso de plus por aquí, Ahora bien esta es una manera, pero si quieres hacer múltiples tipo de si quieres crear cadena sobre la marcha y si quieres hacer uso de múltiples variables a la hora de construir una cadena, porque aquí estamos haciendo uso de una sola variable, ¿verdad? No estamos haciendo uso de múltiples variables. Entonces esto sigue bien. Pero si tienes múltiples variables en las que estás usando múltiples variables para construir una cadena dinámicamente, entonces este enfoque no es nada fácil y no es para nada flexible o legible. Todo bien. Entonces en ese caso, se puede hacer uso de la plantilla literal. Entonces te voy a mostrar qué son las camadas de plantilla. Entonces aquí estamos haciendo uso de una sola cotización, ¿de acuerdo? Y estábamos haciendo uso de plus por aquí para agregar la variable al final. Pero por aquí, cuando usas sintaxis literal de plantilla, puedes decir, hola, y voy a hacer uso de más alto por aquí porque quiero agregar nombre por aquí, ¿verdad? Y voy a decir nombre. Bien. Así que el literal de la plantilla es esencialmente una sintaxis que estás haciendo uso para crear cadenas sobre la marcha. ¿Todo bien? Ahora bien, esto no va a funcionar. No he guardado el archivo. Esto no va a funcionar porque todavía está en códigos únicos. Entonces, para que el literal de la plantilla funcione. Bien, déjame hacer set de control. Déjame tener esta misma sintaxis. ¿Bien? Si guardo esto, verás hola nombre del dólar. Por lo que este valor no está siendo sustituido. Para conseguir este valor sustituido, tendré que añadir Bates en lugar de hacer uso de código único Se pueden ver backticks. Ahora tienes algún tipo de resaltado de sintaxis por aquí, y puedes ver el nombre por aquí. ¿Bien? Ahora bien, esto funciona con cualquier tipo de variable. Si tengo una variable llamada nombre de estudiante, bien, puedo tener nombre de estudiante por aquí, y aquí puedo decir let cada uno es igual a 17. Digamos, por ejemplo. Hola estudiante, ¿de acuerdo? Y puedo decir que lo eres. Puedo hacer uso de Así que quiero imprimir en edad ahora, ¿verdad? Entonces puedo decir dólar, edad. Bien. Y tú eres Eres viejo. Bien. Así que aquí ya verás. Hola, Alice, tienes 17 años. ¿Puedes ver esto? Bien. Si me alejo un poco del editor, verás que esto se está imprimiendo. Todo bien. Entonces así es como los literales de plantilla pueden ser útiles. Ahora imagina hacer esto con la ayuda del operador de concatenación, el operador plus del que estábamos haciendo uso ¿Bien? No es bueno si la cadena es un poco compleja. Está construido de una manera un poco compleja. ¿Bien? Y no es sencillo. Si estás haciendo uso de múltiples variables, entonces no es conveniente crear cadenas sin la ayuda de literales de plantilla ¿Bien? Para que puedas ver lo conveniente que es la sintaxis. También es legible. Entonces la definición de aquí dice que es legible, ¿verdad? Y es legible. Así que cualquiera que lea tu código sabrá lo que intentas hacer por aquí. ¿Bien? Y ID también hace un gran trabajo al hacer resaltado de sintaxis por aquí. Entonces, en el momento en que se agrega dólar y estas llaves, esto se resalta en una sintaxis diferente ¿Todo bien? Entonces plantilla ¿qué son los literales de plantilla Los literales de plantilla es una sintaxis mediante la cual se pueden construir cadenas y trabajar con ella de una manera más flexible y yo diría, una manera más legible Y ¿qué es una sintaxis? Entonces normalmente, puedes crear una cadena usando códigos simples o comillas dobles, ¿verdad? Y se puede concatenar usando el operador plus, ¿verdad? Pero por aquí, estás haciendo uso de batexs. Entonces, cuando haces uso de textos traseros, le estás diciendo a JaSbit. que, Oye, estoy queriendo hacer uso de literales de plantilla y esta cadena podría tener expresiones en ella ¿Correcto? Ahora bien, esta es una expresión en la que el valor está siendo sustituido por aquí. ¿Todo bien? Entonces esta es una cadena de una sola línea. Ahora, también habrá escenarios en los que desea crear una cadena que sea multilínea Bien. Entonces déjame darte otro ejemplo. Bien. Voy a añadir un comentario aquí. Echemos un vistazo a la multilínea. Cadena por aquí. ¿Bien? Entonces voy a tener multilínea y bien, 1 segundo. Voy a tener cadena multilínea, así. Bien. Y puedo decir que esta es una cadena multilínea. Bien. Ahora, en el momento en que hagas esto, vas a obtener errores. Esto no está bien. ¿Bien? Porque no se puede crear una cadena como esta en el script Ja. Incluso si añades códigos únicos, no va a funcionar. Ahora bien, ¿cómo se crea una cadena multilínea, verdad? En guión Ja. Para que puedas hacer uso de los literales de plantilla, como dije, y hacer uso de backticks Entonces esto no dará ningún tipo de error, ¿verdad? Y simplemente puedes decir Console dot log, y puedes imprimir en cadena multilínea Entonces puedes ver que esto es una cadena multilínea, ¿verdad? Ahora bien, ahora incluso puedo tomar cada palabra en una nueva línea que también es factible por aquí Si guardo esto, puedes ver que esto es una cadena multilínea, ¿verdad Entonces este es el poder de, de los literales de plantilla. Y la sintaxis esencialmente es que tendrás backticks por aquí, bien, algo como esto, y tendrás una cadena normal, y puede tener expresiones por aquí Bien, entonces puedes decir expresión así. Entonces esta es una sintaxis, Bien, y déjame escribir. Es sintaxis por aquí. Bien. Entonces así es como podemos hacer uso de ella. Ahora, déjame mostrarte múltiples casos de uso, ¿verdad? Entonces ahora aquí sólo estamos sustituyendo variables, ¿verdad? Pero incluso puedes tener expresiones, ¿de acuerdo? Entonces puedes decir expresiones, y puedes hacer uso de expresiones dentro de los literales de plantilla Ocho. Déjame ver. Digamos que he dejado que E sea igual a cinco por aquí. He dejado que B sea igual a diez, por ejemplo, voy a decir dejar resultado por aquí. Bien. Ahora voy a tener backticks Diré la suma de todo bien, y diré A, y diré que B es. Ahora bien, ¿cuál es la suma? Bien, tenemos que imprimir la suma, ¿verdad? Entonces voy a decir A más P. Muy bien. Y luego voy a decir Consola dot log, y voy a decir resultado. Entonces verás que la suma de cinco y diez es 15. ¿Bien? Entonces ahora estamos incrustando expresiones dentro del literal de la plantilla, ¿de acuerdo? Entonces esto está funcionando absolutamente bien, y se puede ver cómo las expresiones también se evalúan sobre la marcha y se construye la cadena. ¿Todo bien? Entonces esto también es posible. Incluso podemos hacer uso de literales de plantilla con objetos de script Ja Digamos que si tengo un objeto de usuario por aquí, que tiene nombre de pila, y voy a tener a John como primer nombre. Bien. Sólo voy a tener dos propiedades y apellido. Bien. Lo siento, en lugar de igual a, esto va a ser pares de valores clave. Bien, entonces John y yo diremos dos por aquí. Ahora bien, este es un objeto JavaScript, ¿verdad? Entonces lo que puedo hacer es que puedo decir que deje que la información del usuario esté aquí. Deje que la información del usuario sea información de usuario, y pasaré a la siguiente línea. Diré que el nombre es. Ahora bien, ¿cuál es el nombre? Diré más alto y diré usuario Tt, nombre de pila. Bien. Y voy a decir más alto, usuario tot, apellido, algo así Y entonces puedo decir consola dot log. Se puede decir info de usuario. Algo así. Todo bien. Y verás información del usuario, Colin, nombre es John Doe Ahora bien, si tienes más información de usuario, por ejemplo, puedes decir edad por aquí. Bien. Digamos que son 33, por ejemplo, ¿no? Todavía puedes agregar una línea más por aquí. Se puede decir que la edad es más alta y la edad del usuario, algo así. Se puede ver que la edad es de 33 años. Bien. Entonces sí, esto también puede funcionar con cosas como objetos. Todo bien. Ahora la cosa es que si tienes, ¿cómo trabajarías con cuerdas que ya tienen garrapata B en ella? ¿Bien? Así que déjame, crear una cadena. Entonces digamos que tienes una cadena E, que dice, como, esto es un backtick Bien. Bien, me gusta que solo esté imprimiendo un mensaje, y dice, esto es un backtick, ¿de acuerdo? Ahora verás que esta garrapata trasera se está imprimiendo por aquí. Bien. Pero ahora en cuanto convierta esto en un literal de cadena o lo siento, literal de plantilla, verás que hay un problema. ¿Bien? Entonces es pensar que este es el backtick de cierre ¿Cómo trabajarías con este tipo de cuerda? Entonces en ese caso, hay que escapar del significado de esto. Entonces, para escapar, puedes agregar una barra hacia atrás por aquí. ¿Bien? Y una vez que guardes esto, verás que esto es un backtick. ¿Correcto? Entonces esta barra hacia atrás no se considera, pero anula el significado del backtick de aquí Y a esta cosa de aquí se le conoce como escapar. ¿Bien? Así que en realidad estás escapando hacia atrás tick por aquí, lo que significa que en realidad estás escapando del significado de Bac tick y lo estás haciendo parte de la cadena. ¿Todo bien? Por lo que se considera esta garrapata trasera y no esta al cerrar la plantilla lateral por aquí. Todo bien. Entonces sí, eso es sobre los literales de plantilla Si estás trabajando con JavaScript, entonces verás muchos literales de plantilla en el código Si estás leyendo o si estás construyendo tus propios proyectos, estarás haciendo mucho uso de este concepto. Bien, si estás trabajando con cadenas en JavaScript, ¿verdad? Entonces sí, eso son literales de plantilla para ti. 28. Haz más con console.log: Oye, ahí. Entonces ahora es el momento de que comencemos a hablar de consola dot log. Todo bien. Ahora, hemos usado o si has visto algún tipo de código JavaScript, debes haber visto ya o debes estar al tanto de qué es el registro de puntos de la consola. Bien, entonces se usa para imprimir cosas en la Consola. Entonces si digo hola mundo, y si guardo esto, voy a ver Hello world over here como salida. Entonces, sea lo que sea que ceda por aquí entre estos dos códigos o un solo código, también puedo usar un solo código. Veré esa cosa como una salida por aquí, ¿de acuerdo? Y también puedo, así que si digo consola dot log, uno, dos, tres, y si guardo este RC 123 siendo impreso. ¿Bien? Entonces esta es la forma básica de registro que estás haciendo y log es uno de los métodos o funciones que puedes ver disponibles en este objeto de consola. Entonces Console es un objeto, en realidad, ¿de acuerdo? Y estás haciendo uso del registro para obtener valores e imprimirlos en la Consola. Todo bien. Ahora lo que estamos viendo aquí es la tala básica, ¿verdad? Por supuesto, puedes registrar múltiples valores. Entonces, ¿cómo registrarías múltiples valores? Bien, entonces tomemos múltiples valores. Entonces puedes decir consola dot log por aquí. Bien. Y puedo imprimir en nombre. Bien. Y puedo decir por aquí, puedo agregar a Alice, y luego puedo tener cada una, algo así y puedo decir 25. Bien. Ahora bien, esto también se puede sustituir por variables. Bien, se puede ver nombre Ale edad 25. Bien. Y estoy separando todo con la ayuda de la coma Incluso puedo hacer uso de plus por aquí. Entonces si copio esto, bien, puedes agregar un plus. Entonces en vez de esto, se puede decir más. Bien, va a dar una salida similar. Se puede ver. Entonces sí, esta es una forma de imprimir múltiples valores. Y, por supuesto, estos valores también se pueden sustituir con la ayuda de variables, ¿verdad? Entonces puedes hacer uso de variables, como dije, Bien, así puedes decir let X es igual a diez aquí y let Y es igual a 20. Bien. Y si tengo que imprimir, puedo decir consola dot log por aquí, valor D de X es, y puedo agregar X. Bien. Se puede ver que es variable entrando por aquí. Todo bien. Incluso puedes, como, tener expresiones. Entonces se puede decir suma está bien, X más Y. Verás 30. Se puede ver. Así funcionan las cosas diferentes. También puedes hacer uso de los literales de plantilla por aquí. Bien, así que literalmente puedo venir aquí. En lugar de hacer uso de códigos dobles, puedo hacer esto mucho más legible por aquí, y puedo decir más alto, algo así, y puedo tener esto. Se puede ver. La suma es de 30. Bien, entonces estás haciendo uso de literales de plantilla y estás obteniendo los valores. Todo bien. Ahora, si tienes un objeto creado, también puedes registrarlo. Déjame mostrarte eso. ¿Bien? Así que registrando objetos, ¿verdad? Ahora, permítanme crear un objeto llamado persona por aquí. ¿Bien? Y voy a decir nombre. Diré Charlie. Bien. Y voy a decir que la edad es, digamos, diremos 28, y puedo decir que la profesión está desarrollada. Bien. Bien. Entonces es una persona llamada Charlie tiene 28 años y la profesión es desarrollador. Bien. Ahora simplemente puedo decir consola dot log. Bien, puedo decir nombre, perdón, persona nombre punto. Y esto va a imprimir en nombre, ¿verdad? Ya puedes ver a Charlie. Ahora puedo simplemente deshacerme del nombre por aquí y simplemente puedo imprimir todo el objeto de la persona. Eso también es posible con Console Log, ¿verdad? Puedes incluso tener estilo C o incluso puedes tener salida formateada. ¿Bien? Entonces, este tipo de salida formateada, debes haber visto si estás familiarizado con la programación en C, ¿de acuerdo? Entonces si digo consola dot log, bien, y déjame entender esto. Bien. Entonces si digo valor de valor de X por aquí. X es porcentaje D. ¿Bien? Y si guardo esto, verás valor de valor es, debería ser que la declaración esté enmarcada incorrectamente, por lo que debería ser valor es porcentaje D, o puedes tener valor de X está por aquí, porcentaje D. Estás haciendo uso del porcentaje D, que está actuando como un colocador para sustituir los valores. ¿Correcto? Ahora, si estás haciendo uso de este marcador de posición, solo un marcador Y si agregas múltiples valores de sustitución por aquí, ¿de acuerdo? Y si ejecutas esto, verás que al final solo se le agrega , ¿de acuerdo? Y, sí, así es como funciona. Ahora, también puedes tener múltiples marcadores de posición aquí Bien, entonces puedes decir consola dot log. Y puedo saludar, porcentaje S. Ahora bien, el porcentaje S es para cadena. El porcentaje D es para los valores decimales. Porcentaje D porque H es porcentaje D y voy a decir años. Puedes ver Hola porcentaje S, son porcentaje D años. Ahora puedo tener Ale por aquí, y puedo tener 22 por aquí. Si guardo esto, verás Hola Alice, tienes 22 años ¿Todo bien? Entonces así es como se puede usar el registro de consola de múltiples maneras. Esto es log es un método o una función, te lo dije, ¿verdad? Es un método disponible con Console Object. Ahora hay varios otros métodos, ¿de acuerdo? Así métodos de consola. ¿Bien? Ahora hay otros múltiples métodos. ¿Qué son? Entonces tenemos Console Log, que hemos visto. Tienes error de punto de consola por aquí, puedes ver que el error también es método, y puedo ver que esto es un error. Puedes pasar cualquier tipo de mensaje de error, y verás que esto es un error. Ya ves cómo está entrando, ¿verdad? Puedo copiar esto y en vez de error, puedo tener una advertencia por aquí. Esto es una advertencia. Y si guardo esto, verás que esto es una advertencia, ¿verdad? Y si duplico esto, también puedes tener mensaje informativo por aquí, así puedo decir info Entonces esta es información. Esto es informativo. Y si guardo esto, verás que esto es informativo, ¿verdad Por lo que la advertencia se está mostrando de esta manera. Los mensajes informativos se están mostrando de esta manera y el error se está mostrando de esta manera, ¿verdad? Entonces sí, estas son múltiples formas en las que puedes hacer uso de los métodos de consola. Ahora, también puedes hacer uso de la mesa Consola. ¿Bien? Entonces esta es otra cosa increíble. Todo bien. Ahora, digamos que tengo este objeto llamado persona, ¿de acuerdo? Y si digo, bien, déjame decir consola dot log. Si utilizo Console Log y si digo persona, verás que la pantalla no es tan buena. Se muestra en forma JCN, pares de valores clave, que es expandible Quiero tener esto como salida en forma de tabla. Puedo ver Consola, mesa por aquí y puedo pasar en persona por aquí y puedo tener punto y coma Si guardo esto, verás índice es nombre, valor es Charlie. Índice H, valor es 28, índice es profesión, valor es desarrollador. También puedes ordenarlo. Bien. Entonces un poco de funcionalidad también por aquí, y este es el objeto, si acaso si deseas verlo en forma Json o en la forma de objeto. ¿Correcto? Así que esa es la funcionalidad de tabla que te ayuda a imprimir cosas complejas como la estructura de datos objeto o la variable de objeto en la consola. Todo bien. Y se puede ver así es como aparece. Todo bien. Entonces en efecto, Console es muy valiosa. Se puede hacer uso de registro. Harás uso de ella con mucha frecuencia. Puede usarlo para imprimir objetos, literales de plantilla, sustituir valores, construir cadenas sobre la marcha para mostrarlas como salida Puedes hacer uso del formato de salida formateado si vienes de fondo de programación como C, C plus plus, ¿de acuerdo? También puede esta salida formateada también es una cosa en Java. ¿Bien? También puedes obtener este tipo de salida formateada en Java, ¿verdad? Y luego puedes tener diferentes métodos de consola para imprimir mensajes de error, mensajes advertencia, mensajes de información. Y al final, tienes mesa, para tener cosas como objetos que se muestran en el formato de tabla, ¿verdad? Entonces espero que esto sea útil y espero que hayan disfrutado explorando Console Object. 29. Conclusión del curso: Y eso nos lleva al final de este increíble viaje al mundo de JavaScript. A lo largo de este curso, has construido una base sólida en JavaScript mientras aprendes sobre los fundamentos de JavaScript como matrices, operadores, objetos, diferentes tipos de datos También has entendido cómo funciona JavaScript en entornos del mundo real. También hemos hablado sobre algunas de las aplicaciones prácticas y algunos proyectos que hicimos dentro de la clase. Espero que este curso te haya ayudado a pensar en Jascript desde una perspectiva completamente diferente Pero recuerda, aprender Jascript no debería y no se detiene aquí La mejor manera de crecer como programador es seguir practicando, seguir construyendo cosas e incluso experimentando. Porque al construir proyectos, aplicarías todos los conceptos que has aprendido, y también te ayudaría a obtener algo de confianza antes de pasar a proyectos de la vida real. Ahora me gustaría pedirte que sigas practicando, que sigas explorando y que sigas experimentando. Con este curso en particular, encontrarás un proyecto de clase en la sección de proyectos, cual te animaría a completarlo y compartirlo con toda la clase. Gracias por acompañarme en este viaje. Espero que este curso te haya ayudado a ganar confianza en JavScript y te haya inspirado a seguir aprendiendo Codificación feliz y todo lo mejor.