Javascript: Introducción gradual para principiantes

1. Te doy la bienvenida y te explico lo que vamos a construir.: Hola, mi nombre es Chris y un big da la bienvenida a mis llamadas JavaScript para principiantes. Si estabas mirando en juego tus habilidades HTML y CSS al siguiente nivel, entonces llegas al lugar correcto. Este curso te dará el conocimiento y confianza para agregar interactividad y características geniales a tus sitios web. Junto con la capacidad de construir aplicaciones independientes, comenzaremos con los conceptos básicos que incluyen comprender los Javascripts y para qué se utiliza, dónde incluir JavaScript en tus sitios web, tipos de datos y cómo obtener JavaScript mostrado en sus páginas web. Después pasaremos a cubrir los elementos esenciales de JavaScript como variables, matrices, funciones, cadenas y métodos de cadena, y objetos JavaScript. Todas las secciones tendrán varios muchos retos para obtener experiencia práctica y asegurarte de que entiendas exactamente lo que estamos haciendo antes de seguir adelante. Una vez que tengas un conocimiento de lo básico, entonces te introduciremos más técnicas como JavaScript, matemáticas y fechas, control-flujo y bucles, cómo JavaScript puede manipular el DOM, y por supuesto muchos retos en el camino. Entonces finalmente, al final de este curso, construirás en este emocionante proyecto completo, tendrás la oportunidad de construir una aplicación de tarjeta de visita totalmente funcional que toma las entradas del usuario y crea un negocio tarjeta usando JavaScript. Al finalizar el curso, tendrás todas las habilidades requeridas para completar esto tú mismo. Este curso está diseñado para ser amigable con principiantes. No obstante, JavaScript suele funcionar junto a HTML y CSS. Por lo que definitivamente se recomienda el conocimiento básico de estos idiomas. Gracias por su interés y espero que se unan a mí en esta apasionante causa. 2. ¿Qué es Javascript y para qué lo utilizamos?: En este video, solo quería darte una visión general de lo que es JavaScript y lo que puede hacer exactamente JavaScript. En primer lugar, echemos un vistazo a lo que es JavaScript? JavaScript es un lenguaje de programación que tradicionalmente hemos utilizado para hacer que las páginas web sean interactivas. Cuando estás navegando por un sitio web y aparecen cosas como un cuadro emergente o si pasas el cursor sobre un menú y obtienes un menú desplegable con diferentes enlaces de menú, básicamente muchas de las características que suceden sin refrescar la página, eso es todo JavaScript. JavaScript también se puede utilizar para crear aplicaciones independientes. Tradicionalmente, hemos utilizado JavaScript en navegadores web y sitios web. Ahora JavaScript se convierte en un cada vez más popular, encontrando más usos. Ahora se está utilizando JavaScript para crear aplicaciones completas, tanto el frontal como el back-end. Hoy en día es realmente fácil hacer una aplicación de pila completa con solo conocer un lenguaje de programación. Mencioné que JavaScript se utiliza para hacer que las páginas web sean interactivas y la razón que puede suceder es porque JavaScript está integrado y se ejecuta en todos los principales navegadores. JavaScript incluso funciona cuando el usuario está fuera de línea. El hecho de que JavaScript esté integrado en los principales navegadores y sea un script y lenguaje por defecto para los navegadores web significa que JavaScript está aquí para quedarse y no parece que vaya a ningún lado pronto. El lenguaje de programación Java es un lenguaje completamente separado y no está relacionado con JavaScript. Eso es lo básico de JavaScript. Ahora echemos un vistazo a lo que JavaScript puede hacer. Sabemos que JavaScript puede hacer que las páginas web sean interactivas. También puede cambiar los elementos HTML y CSS en una página web. Puede cambiar los colores, puede cambiar los tamaños de fuente, puede cambiar el texto con un clic, varias cosas como esa. Esto es lo que se llama manipular el DOM. Veremos el DOM más adelante en este curso, pero por ahora, solo entienda que JavaScript puede cambiar elementos en una página web, y eso es exactamente lo que estamos haciendo ahora con esta demostración. Estamos manipulando el DOM haciendo clic en un botón de la izquierda, que está agregando algo de texto a una etiqueta de párrafo vacía. A continuación, JavaScript también puede validar datos. A modo de ejemplo, si rellenas un formulario con tu nombre y dirección, JavaScript puede comprobar que la información que proporciones sea correcta como, puede comprobar que no haya letras en un número telefónico, puede comprobar si tu dirección de correo electrónico es formateado correctamente antes de que se envíe, e incluso puede restringir cuántos caracteres se ingresan en un campo de texto. Todo esto se hace en el navegador sin ninguna ayuda del servidor. JavaScript también se puede usar para crear aplicaciones de pila completa. Por pila completa nos referimos al front-end con el que el usuario puede ver e interactuar y también al lado del servidor que es el backend de la aplicación. Históricamente, JavaScript solo se está usando en el front-end en el navegador, pero ahora se están escribiendo cada vez más aplicaciones con JavaScript para la pila completa, gracias a Node.js. Además de sitios web y aplicaciones, JavaScript también es popular para crear juegos multiplataforma. Podemos escribir juego una vez en JavaScript y usar algo como PhoneGap para desplegar tu juego en diferentes dispositivos como Android o iOS. Podemos usar JavaScript para parchear agujeros en manchas de navegador, por lo que podemos proporcionar polyfill y detección de características para comprobar si un navegador más antiguo admite una determinada característica. Si no lo hace, podemos proporcionar una forma alternativa de lidiar con eso. JavaScript y HTML5 funcionan de la mano y JavaScript alimenta muchas de las nuevas características de HTML5, como el Canvas y por supuesto, mucho, mucho más. JavaScript se está volviendo tan popular ahora que se están creando nuevos usos todos los días. También se están creando nuevas bibliotecas y marcos todo el tiempo para JavaScript. Por lo que realmente es una gran habilidad tener. Gracias por ver y disfrutar el resto de la clase. 3. Dónde incluir Javascript: Bienvenido de nuevo. Para este curso, te recomendaría crear una nueva carpeta en tu escritorio o en algún lugar donde puedas acceder a ella. Voy a crear el mío en el escritorio, y sólo voy a llamar a este JavaScript. Dentro de esa carpeta, podemos guardar todos los ejemplos que creamos en este curso, y luego los pones a mano si los necesitas como referencia. Dentro de la carpeta JavaScript, voy a crear una carpeta nueva, y esto se va a llamar comprensión-javascript. Ese es el nombre de la sección del curso. Lo primero que vamos a ver es dónde incluir JavaScript, así que voy a crear una nueva carpeta llamada dondequiera incluir-javascript y guardar eso. Entonces si vas a tu editor de texto, voy a usar Brackets, arrastra la carpeta que acabas de crear. Queremos crear una nueva página, por lo que o Ctrl+N, guarde esto como index.html. Para empezar, voy a poner en la estructura HTML básica, y voy a utilizar un plug-in llamado Emmet. Emmet está disponible para la mayoría de los editores de texto populares. Si estás usando Brackets como yo, entra en las Extensiones, y luego busca Emmet, E-M-M-E-T. Ya tengo instalado Emmet, pero si no lo haces, solo tienes que hacer click en el botón “Instalar”. Emmet es un gran plug-in el cual te permite usar atajos como html:5, y luego presionar tab, y eso crea una nueva estructura para ti. Pero si no las estás usando, no es un problema. Basta con pausar el video y teclear esto, y podemos duplicarlo para futuros videos. En el título, solo voy a llamarlo Dónde incluir JavaScript, luego solo haz un poco de espacio después del título. Solo voy a incluir las hojas de estilo Bootstrap, que nos permitirán hacer que nuestras páginas web se vean más agradables. Simplemente busca Bootstrap, y luego ve a getbootstrap.com, y luego ve a Empezar, y solo voy a incluir el CDN de Bootstrap, que es el enlace hospedado para la hoja de estilo. Yo sólo voy a copiar la sección superior, que es la hoja de estilo. Eso copiaré, y luego lo pegaré en la sección de cabeza justo debajo del título. Ahora está todo configurado, podemos echar un vistazo a algunas formas diferentes en las que podemos incluir JavaScript en nuestro proyecto. JavaScript se puede colocar ya sea en la cabeza o en la sección del cuerpo. Voy a empezar, y tenemos que empezar por incluir algunas etiquetas de script, así que escribe las etiquetas de guión de apertura y cierre. Todo el JavaScript que escribimos necesita ir entre estos dos. Para comprobar que todo está funcionando bien, voy a empezar con una simple alerta (). An alert () es un cuadro emergente que aparece en el navegador y alerta un mensaje al usuario. Entre cotizaciones puedes usar comillas simples o dobles, no importa. Solo voy a alertar, Javascript está funcionando, y agregar un punto y coma al final de esa declaración. Si guardamos eso y luego pasamos al navegador, se puede ver un cuadro de alerta que aparece diciendo: “Javascript está funcionando”. Esta es tu primera vez que escribes JavaScript. Enhorabuena, acabas de tener tu primer trabajo en Scripter. Basta con hacer click en el botón “Aceptar” para deshacerte de eso por ahora, y volver a la página siguiente. Mencionamos antes que JavaScript funciona tanto en la sección de cabeza como en la sección de cuerpo, así que si solo cortamos la sección, fuera con la cabeza, y luego la pegamos en la sección de cuerpo, y de inmediato, nos dieron un cambio. Nos están llevando al navegador, y de nuevo, ha pasado exactamente lo mismo. Tenemos el cuadro de alerta apareciendo diciendo, “JavaScript está funcionando”, así que todo está bien. En ocasiones, cuando tenemos mucho JavaScript en la página, queremos que sea separado del HTML solo para que sea más legible y fácil de mantener. Podemos hacer eso agregando el JavaScript a un archivo externo, así que crea una nueva página en el proyecto y guárdala. Voy a llamar a mi alerta de archivos, y necesita tener la extensión of.js para JavaScript. Después, vuelve a la página de índice, y podemos enlazar este JavaScript externo en la sección de cabecera. Nuevamente abrimos las etiquetas de script, luego necesitamos decirle al navegador dónde encontrar el archivo JavaScript usando el atributo src. Debido a que nuestro archivo está en el mismo nivel que la página de índice, podemos simplemente escribir el nombre del archivo, así que es alert.js. Ahora, podemos deshacernos de las etiquetas de script porque vamos a poner estas en un archivo separado, así que pasa al alert.js. Cuando estamos trabajando en un archivo JavaScript externo, no necesitamos incluir las etiquetas de script. Simplemente podemos empezar a escribir el JavaScript. Crear una nueva alerta. Entre los corchetes rizados y las citas, podríamos volver a poner en nuestro mensaje, Javascript está funcionando, y el punto y coma al final. Guarde eso, y guarde la página siguiente, y vaya al navegador, y luego actualice. Ahí vamos. Genial. El alerta está funcionando también en el archivo externo. Los archivos JavaScript externos son útiles para almacenar JavaScript que quizá quieras usar en diferentes páginas web para que no tengas que escribir el mismo script una y otra vez. Simplemente puedes enlazar en el archivo que quieras utilizar en cada página web. Como se mencionó anteriormente, también separa el HTML del JavaScript, y hace que tu código sea más legible y mantenible. El enlace externo de JavaScript que colocamos en la sección de cabeza también se puede colocar en la sección de cuerpo en la parte inferior de tu página justo encima de la etiqueta de cuerpo de cierre. De esta forma, el HTML no se bloquea cargando scripts para que podamos mejorar los tiempos de carga de páginas. Simplemente guarda eso, y vuelve a refrescar el navegador, y puedes ver que todo sigue funcionando. Entonces esas son tres formas diferentes en las que podemos incluir JavaScript en nuestro proyecto. Gracias por verlo, y nos vemos en el siguiente video. 4. Visualización de Javascript en las páginas web y los comentarios: Bienvenido de nuevo. En el último video, miramos cómo podemos usar alertas para alertar a los usuarios sobre un determinado mensaje en la página web. En este video, vamos a echar un vistazo algunos métodos diferentes de cómo podemos incluir JavaScript en nuestras páginas web. También echaremos un vistazo a cómo podemos incluir comentarios en JavaScript para hacer notas, y también comentando nuestro código cuando ya no lo necesitamos. Si vas a la carpeta JavaScript y todavía en la sección de comprensión de JavaScript, solo voy a seleccionar la primera que creamos y luego presionar Comando o Control D para duplicar. O si lo prefieres, puedes copiar y pegar. Voy a llamar a esto comentarios y mostrar en JavaScript. Después abre los corchetes o tu editor de texto. Después arrastrando el nuevo archivo que acabamos de crear. Después abre la página del índice. Tenemos el cuadro de alerta que creamos en el último video. Si solo te deshaces de eso por ahora, así no conseguimos que eso aparezca cada vez que entramos al navegador y luego cambiamos el título, a comentarios y mostrar en JavaScript. De hecho, no necesitamos usar este archivo de alerta externa. Podemos deshacernos de eso. Abre tus etiquetas de guión ya sea en la cabeza o en la sección de cuerpo. No importa. En el último video miramos agregar en una alerta para alertar al usuario de un mensaje. No tiene que ser textos que podamos alertar al usuario. También podemos usar números y masas. Podemos alertar a las 10, llevar libre. Entonces si pasamos al navegador, se puede ver que se ha realizado el cálculo y obtenemos los resultados de siete. Así como el cuadro de alerta es diferentes métodos que podemos usar para mostrar JavaScript. Otro método es el registro de la consola. En lugar de la alerta, podemos escribir en la consola y podemos enviar un registro a la consola del mismo mensaje. Si vas a tu navegador web. Si estás usando Chrome simplemente haz clic con el botón derecho y ve a Inspeccionar Elemento y puedes cambiar entre la parte inferior y lateral haciendo clic en estos tres puntos y luego haciendo clic en el lado del muelle que prefieras. Si bajas al fondo, solo haz un poco más de espacio. Se puede ver ahí está la pestaña Consola. Entonces selecciona la pestaña Consola y podrás ver que el resultado que acabamos de crear de siete está apareciendo en la consola. La consola se utiliza a menudo para depurar en lugar de mostrar alertas al usuario en la pantalla. Podemos simplemente mantenerlo confinado a la consola. Podemos imprimir cosas en la consola como mensajes de error. Eso es realmente bueno para depurar. Si volvemos a los paréntesis, así como las alertas y el registro de la consola. También podemos usar lo que se llama el document.write. medida que avanza el curso, verá la palabra documento con bastante frecuencia. El documento es la página web completa a la que estamos apuntando. Voy a escribir a la página lo que sea que esté entre estos corchetes. Guarda y luego refresca. Ahora apareciendo en la página web tenemos los resultados de siete. Pero hay que tener cuidado al usar document.write. Si se usa después de que la página se haya cargado completamente, sobrescribirá toda la página con el resultado. Por lo que tenemos que tener cuidado al usar eso. Nuevamente, así como mapas, podemos incluir texto como hola y que aparecerán en la página son exactamente iguales. Lo último que quiero mostrarles es cómo podemos manipular el HTML actual que está en la página web. Entonces solo voy a bajar a la sección de cuerpo y crear algo de HTML. Voy a crear un encabezado h1 y solo dejar el contenido en blanco por ahora. El h1 voy a dar un id de título y promedio, copiar la etiqueta de guión. Justo en el fondo ahí. Entonces vamos a usar JavaScript ahora para manipular el HTML que actualmente está ahí. En realidad no hay texto en el rumbo h1 por el momento. Pero puedes usar JavaScript para poner algo de texto ahí. Al igual que antes, vamos a apuntar al documento completo para empezar y luego usar el punto. Entonces vamos a acotar el documento completo al elemento que queremos cambiar, que tiene el id de título. JavaScript tiene una forma de hacer esto llamada getElementsById. Observe que todas las palabras aparte de la primera comienzan con una letra mayúscula para hacerla más legible. Esto es bastante estándar en muchos lenguajes de programación. Es lo que se llama caso de camello. Se está estrechando el documento completo a un elemento que vamos a resbalar por su id. Entre paréntesis y luego citas, podemos agregar el id que queremos apuntar, en nuestro caso aquí su título, y luego nova dot. Queremos seleccionar el HTML interno y luego iguala y luego podemos poner entre comillas el texto que queremos reemplazar. Por lo que queremos mostrar en la pantalla el texto. En mi caso, cuando pongo mostrar JavaScript en páginas web y punto y coma al final de esa declaración. Espero que eso tenga sentido. Dijimos en un elemento HTML que no tiene texto otro minuto. Después seleccionaremos en el documento completo o en la página web completa. Después lo reducimos a la id del título. Entonces establecemos innerHTML, que es la sección intermedia. Nos fijamos en nuestro valor para ser iguales a este texto aquí. Guardemos eso. Si actualizas el navegador web, ahora tenemos el texto que fijamos en el encabezado h1. Por lo que este método es mucho más comúnmente utilizado y puede ser un poco más seguro que usar document.write. Ahora veremos cuatro métodos diferentes de, incluido JavaScript, en nuestras páginas web. Cuando vuelvo al editor de texto y eche un vistazo a los comentarios de JavaScript. Los comentarios están disponibles en JavaScript, igual que muchos otros lenguajes de programación. Si quieres agregar algunas notas. Con JavaScript, queremos que estas notas no sean leídas por el navegador. Podemos añadir una doble barra inclinada hacia adelante. Esto es para los comentarios de una sola línea. Podemos hacer algunas notas como set innerHTML. Agregar comentarios puede ser útil si te tomas un descanso de codificación y vuelves después incluso de solo una semana o dos, eso realmente te puede ayudar a recordar lo que estabas haciendo. Además de agregar notas por ti mismo, también puedes comentar el código real de la misma manera. Se puede ver que se pone gris. Esta sección de código ahora no será leída por el navegador. Es útil si solo quieres eliminar temporalmente una sección de código sin eliminarla realmente. Por lo que las dos barras inclinadas hacia adelante se utilizan para líneas simples. Si tienes muchas líneas diferentes o un bloque de código sobre el que quieres comentar, puedes usar un comentario multilínea, que comienza con una barra inclinada hacia adelante y luego la estrella y luego termina con la estrella y la barra hacia adelante. Ese es el final de este video en comentarios en pantalla en JavaScript. Gracias por ver, y nos vemos en el siguiente video. 5. Variables y asignaciones de Javascript: Bienvenido de nuevo a esta nueva sección llamada Fundamentos de JavaScript. Voy a empezar creando una nueva carpeta en nuestra sección de JavaScript, voy a llamar a esta carpeta javascript-basics. Podrás guardar todas las partes de la sección en su interior. Por lo que desactiva mucho mecanografiar. Si volvemos al último video que hicimos en entendimiento-javascript y luego copiamos los comentarios y visualizamos en la carpeta JavaScript y luego pegamos eso en la sección básica de JavaScript y renombrarlo. Yo quiero mantener la mía en orden haciendo el número 1, llamo a esto variables y asignaciones. Entonces pon esto entre corchetes. Ahí vamos. Ahora tenemos la página de índice del último video. Sólo voy a deshacerme de estos comentarios por ahora, pero mantener el código en su lugar y luego cambiar el título de la página a variables y asignaciones. Podemos reutilizar el código que hicimos en el último video. Esta sección de JavaScript, toma el encabezado vacío de nivel 1 y lo reemplaza por algún texto. En este video, vamos a echar un vistazo a las variables y cómo podemos usarlas en JavaScript. Una variable es un contenedor para información a la que podemos darle un nombre y el contenido de esa variable, como sugiere el nombre, puede cambiar. Echemos un vistazo a cómo podemos usar variables. Declaramos una variable mediante el uso de la palabra clave var y luego ponemos en el nombre de la variable siguiente. Quiero llamar a mi variable PageTLE y luego el signo igual y luego entre citas establecemos el contenido de la variable. Voy a reutilizar este texto. Corta ese texto ahí, y luego si lo pegamos dentro de la variable y el punto y coma al final, así que estamos asignando el texto a una variable llamada PageTLE. Ahora podemos volver a nuestro innerHTML y en lugar de establecer eso igual al texto, podemos poner en marcha el nombre de la variable, que es PageTitle, y guardar eso. Ahora cuando volvamos al navegador y actualicemos, deberíamos recibir el mismo mensaje. Pero esta vez el mensaje se almacena en una variable y puedes cambiar esto para que sea cualquier cosa que quieras. Lo cambiamos por variables y luego echamos un vistazo y cuando nos refrescamos, hay un cambio. Echemos un vistazo a algunos ejemplos más. Yo sólo voy a comentar este apartado. Entre paréntesis se puede presionar comando en barra hacia delante y se comentará en toda la sección. Nos fijamos en crear variables con texto o cadenas. También podemos crear variables con diferentes tipos de datos, como números. Vamos a crear una variable con un nombre de número1 y establecer esto en un número como 10. Ya sabes cuando estamos tratando con números a diferencia de cadenas, no necesitamos poner ninguna cotización alrededor del valor. Podemos simplemente dejarlo tal como está y una segunda variable llamada número2, y el valor este tiempo de 20, y así como ciertos valores a variables. También podemos crear una variable la cual está conformada por variables sumadas. En este caso, podemos crear un total y establecer ese total para que sea la suma de número1 variable más número2 variable, y el punto y coma al final y luego para comprobar si todos están funcionando bien, podemos crear una alerta y luego simplemente podemos alertar al total. A ver, eso es trabajar con la actualización. Genial. Tenemos el total 30 aparecen ahí dentro, que es la suma de las dos variables sumadas. Como mencionamos antes y como su nombre indica, puede cambiar un valor de una variable. Una vez que hemos declarado una variable con la palabra clave var, no necesitamos volver a usar la palabra clave var para cambiar el valor. Si quisiéramos cambiar el valor del número1, esta vez solo escribimos número1, y podemos cambiar su valor para que sea algo como cinco. Ahora número1 es igual a cinco y número2 es 20. Ahora debemos obtener los resultados de 25. Cuando estamos creando variables, en realidad podemos declarar la variable primero sin establecer un valor inicial a ella. Si solo establecemos la variable y le damos un nombre, no tiene que tener un valor inicial. Entonces un poco más tarde en el código, entonces podemos asignar un valor a esa variable así y esto seguirá funcionando igual que antes. Ahora tenemos el número1 cinco y el número2 fijado en 10. Deberíamos conseguir el total de 15, y obtenemos 15, eso está bien. Volvamos al ejemplo original. Cuando estamos creando variables, hay ciertas reglas que debemos seguir al crear nombres de variables. Cuando nombramos a una variable, necesita comenzar con una letra, un guión bajo o un signo de dólar, o un signo de dólar los nombres de las variables también distinguen entre mayúsculas y minúsculas. Teníamos una variable con el nombre de número1 y luego teníamos una variable con el nombre de Número1, para empezar con una mayúscula. Estos son tratados como variables diferentes. Simplemente cambiaremos el ejemplo, iniciarlo con una mayúscula, aún debemos obtener la suma de 5 más 10. Ahí vamos. De lo último de lo que quería hablar en este video es del operador de asignación, que es este símbolo igual. En JavaScript, el símbolo asigna un valor al nombre de la variable y en realidad no comprueba si es igual a. En JavaScript si queremos comprobar si algo es igual, usamos un doble igual. Por ejemplo, cinco es igual a cinco y esto significa igual a, y también podemos usar los tres símbolos iguales. Si cinco y tres símbolos son iguales a cinco, esta manera se comprueba si los valores son igual valor e igual tipo. En este caso, el cinco es igual a cinco en valor y el tipo, porque ambos son números. Pero cinco, los tres símbolos iguales y luego los cinco entre comillas. Esto debe ser falso porque son de igual valor pero no son de tipo igual, porque el cinco de la izquierda es un número y el cinco a la derecha, porque está entre comillas, es una cadena y se considera un texto. Veremos muchos más ejemplos a estos a medida que pasemos por el curso, pero eso es todo por ahora. Gracias por escuchar, y nos veremos en el próximo video. 6. Números y aritmética: Bienvenido de nuevo. En este video, vamos a echar un vistazo a los números JavaScript sobre aritmética básica. Si ingresas a la carpeta de conceptos básicos de JavaScript y duplicas la carpeta de variables del último video, quiero llamar a la mina número 2, números y aritmética, luego abre esto entre Corchetes. Ahí vamos. En JavaScript hasta ahora, ya hemos mirado cómo podemos asignar un número a una variable, pero JavaScript puede hacer mucho más con los números. Cuando creemos una variable, solo eliminaremos la última sección ahí y también el encabezado, ya no necesitamos eso. Hasta el momento hemos mirado asignar un número a una variable, como ésta, pero además de asignar el número 10 al valor de x, también podemos poner una suma ahí dentro, por lo que 10 más 5, y luego podemos alertar a la variable de x y abrir en el navegador, por lo que obtenemos la suma de 15. Además, también podemos quitar, deberíamos obtener el valor de 5. También podemos usar división, multiplicación, por lo que cambiamos el restar a una slash hacia adelante para dividir, y ahora deberíamos obtener el valor de 2. En JavaScript, cuando hacemos una multiplicación, el valor que necesitamos para eso es la estrella, 10 multiplicar por 5 debe ser el valor de 50. Otro interesante para buscar hacia arriba es el símbolo porcentual. Esto realmente proporciona el resto, lo que 10 dividido por 5 sería 2, y en realidad no habría resto, por lo que ese valor será 0. No obstante, si cambiamos el valor para que sea 9 dividido por 5, 5 solo entraría en 9 una vez y dejaría un resto de 4, por lo que obtenemos el valor de 4 alertarlo ahí. Además de hacer los cálculos dentro de la variable, podemos establecer una variable separada, y podemos hacer los cálculos dentro de la alerta. El alerta puede multiplicarse x por y, y aún debemos obtener el mismo resultado. Refresca, y obtenemos 45. Algo que realmente vale la pena recordar cuando se trata de números y cálculos es que el orden del cálculo es realmente importante. Echa un vistazo a esto como ejemplo. Variable x nos fijaremos en 10 más 5, que es 15, se multiplican por 2. Leeremos esto de izquierda a derecha, pensando que 10 más 5 es 15, multiplicado por 2 es igual a 30, pero ese no es realmente el caso, así que solo alertemos a x y veamos qué pasa. Vamos a conseguir 20. El motivo por el que obtenemos 20 en lugar de 30 es porque la multiplicación y división tienen una prioridad mayor o mayor que la suma y la resta, por lo que la multiplicación se realiza primero. 2 veces cinco es 10, más 10 es igual a 20, por eso estamos obteniendo el valor de 20 que aparece en la alerta. Pero si quisiéramos tener el valor de 30, una forma de resolver esto es agregando los corchetes alrededor de la primera sección. Esto agregará 10 más 5 para empezar, así que 15 y luego multiplicar por 2, guarde eso y luego refresque, y ahora, obtendremos el valor de 30. Lo último que quiero mostrarles en este video es cómo incrementar y disminuir los números. Echemos un vistazo asignando la variable x a 10. Actualmente, si dejamos el valor de x, obtendremos 10, pero si quisiéramos incrementar x, podríamos usar x plus, y esto incrementa el valor en uno cada vez. Ahora bien, si actualizamos nuestro navegador, deberíamos obtener el valor de 11. Si lo hiciéramos de nuevo y duplicáramos esa línea, x ahora sería 12. Esto es realmente útil para cosas como aumentar la puntuación de un jugador cada vez que obtienen un punto, tendríamos una variable llamada puntuación, y luego cada vez que obtienen un punto, sería marcador más plus. Así como plus plus, también podemos disminuir el puntaje por uno, así como así. Ahora, estamos quitando uno de 10 y deberíamos conseguir 9. Eso será útil para situaciones como un jugador que pierde la vida en un juego o reducir la puntuación del jugador en uno cada vez. Gracias por ver, y ese es el final de este video sobre números y aritmética. 7. Cadenas Javascript: Nos va bien ahora en esta sección llamada cuerdas. Si entramos en la carpeta JavaScript que creamos y luego en los conceptos básicos de JavaScript. Al igual que antes, duplica el último video y luego renombrarlo el mío va a ser el número 3 cadenas JavaScript y luego guarda eso y ábrelo en tu editor de texto. Entonces el título justo como cadenas y luego puedes eliminar la sección entre las etiquetas de script. En los videos anteriores hemos mirado brevemente las cadenas y una cadena es básicamente una sección de texto. Puede ser un personaje, puede ser una palabra, o puede ser un párrafo. Empecemos con el primer ejemplo y crearemos una variable. El primero va a ser FirstName y asignar FirstName en mi caso es Chris, el punto y coma al final. Después una segunda variable de segundo nombre y asigne este para ser mi segundo nombre que es Dixon. Podemos usar comillas simples o dobles no importa y luego podemos unir las cuerdas. Quiero mostrar estos a la consola por lo que console.log. Podríamos unirnos a ellos uniendo los nombres de las variables. Entonces FirstName y luego el plus y luego el segundo nombre de variable con el punto y coma al final. Después abre en el navegador y luego ve a la consola y puedes ver que el nombre está justo ahí. Está impreso tanto el primer nombre como el segundo, por lo que no importa las comillas simples o dobles. Las cotizaciones sin embargo comienzan a ser importantes si las incluimos realmente dentro de la cadena. Si tuviéramos una cita y la cita tuviera textos como “mi nombre es Chris”, y quisiéramos que el nombre estuviera entre citas no pudiéramos hacer eso. Después cambias el nombre de la variable a citar y veamos qué pasa con eso. Después entra a la consola y puedes ver que obtenemos un error de sintaxis. Podemos arreglar yendo a la cadena y en su lugar las comillas dobles podemos usar un tipo diferente de comillas. Cambia eso a sencillo y luego refresca y ahí vamos. Nuevamente, mi nombre es Chris y en realidad se imprimen las comillas simples. También puedes hacer lo mismo si tuvieras comillas simples en el exterior, puedes establecer las comillas internas para que sean dobles. Guarda y refresca y hay unas comillas dobles que todo funciona bien, así que vamos a deshacernos de eso. de unir cadenas también podemos unir cadenas con variables y cosas como números. Por ejemplo, si tuviéramos un nombre establecido en Chris, ¿documentamos .write esta vez. En este ejemplo, voy a unir una variable con una cadena y luego con un número e imprimir las palabras Chris es 31. Ya tengo el nombre de la variable por lo que podemos agregar eso. Entonces podemos usar el plus para agregar o concatenar. Tenemos a Chris y luego necesitamos agregar “es” entre citas, así que eso es una cadena. Después un número más para sumar el número para que podamos escribir en la edad que es de 31. Guarda y luego pulsa refrescar, obtendremos la palabra Chrisis31 pero no hay espacios en el medio y eso es fácil de arreglar. Si entramos en la cadena podemos agregar un espacio antes y después, y esto imprimirá el espacio en el documento para que ahí vaya. Esa es una forma bastante sencilla de forma y una cadena pero si tuviéramos una cadena larga como un párrafo. Hay un montón de diferentes formatos y opciones y escapando que podemos hacer para que eso se vea mejor. Si vas a Google y buscas Lorem Ipsum y solo obtenemos un texto de muestra. De hecho, me limitaré a copiar el primer párrafo que parece suficiente texto su. Cambia la variable y llama a mi párrafo. Después entre las citas pega en el texto de muestra, y luego a medida que bajas e imprimimos esto en la consola, console.log. En el texto que queremos imprimir está el párrafo, así que dirígete al navegador y luego ve a la consola. Ahí está todo el texto ficticio que hemos puesto en su lugar. Ahí es un trozo de texto bastante grande, ilegible. Es posible que desee agregar algún formato a ese texto como saltos de línea, citas o tabulaciones. Podemos hacer eso con algo de JavaScript, si buscamos una sección que queremos crear una nueva línea. Ahí voy a empezar el mío. Si haces una barra invertida y luego una, así que deberíamos conseguir una nueva línea después de la palabra industria. Refresca y ahí vamos. Esa es la primera línea que se rompe después de la palabra industria. Podemos simplemente poner uno o dos de esos justo antes. Ahí hay uno y guarda y echa un vistazo. Bien, hay otro salto de línea justo ahí. Hay un par de cosas diferentes que también puedes hacer, también podemos poner comillas dobles o simples dentro del texto, y también podemos escapar de ellas mediante el uso de la dirección inclinada, así que usa una contrasta y luego las comillas. Entonces hacemos justo lo mismo después así que barra invertida y una cotización para luego refrescar. Ya puedes ver si buscas la palabra que acabamos de destacar, tenemos las cotizaciones antes y después. También se puede hacer de la misma manera a una sola cotización. Si realmente querías incluir una barra invertida solo haces eso dos veces así que incluye dos barra invertida. A medida que la barra invertida aparecen ahí dentro y también las comillas simples y también podemos añadir una pestaña. Si querías agregar uno al inicio es una barra invertida y una t y tienes la sangría ahí. Hay algunas formas útiles de escapar y dar formato al texto usando JavaScript y unos pequeños ejemplos que incluyen la hoja proporcionada al inicio del curso. Lo último que quiero mostrarte en este video es cómo encontrar la longitud de una cadena usando la propiedad length. Deshaznos del texto de Lorem ipsum y podemos reutilizar esta variable. Voy a usar el ejemplo de nombre otra vez, así que nombre igual a Chris y luego crearemos una nueva variable para almacenar la longitud del nombre. Variable llamada NameLength y la forma en que obtuvimos la longitud para el nombre es estableciendo no en el nombre.length. Entonces finalmente podemos iniciar sesión en la consola el nuevo nombre de la variable. Guarda eso y luego refresca. Ahí vamos por lo que la longitud para mi nombre es de cinco caracteres de largo. Ese es el final de este video y si te unes a mí en el siguiente video, pondremos esto en práctica en un mini reto. 8. Mini Desafío: Mostrar la puntuación de un usuario: Bienvenido de nuevo. Ahora es el momento de tomar un pequeño descanso del aprendizaje y poner en práctica lo que has aprendido hasta ahora en tu primer mini-reto. Lo que me gustaría que hicieras es crear una página web sencilla, que muestre la puntuación de un usuario. Crea un par de variables para el nombre del jugador, y también la partitura, y luego muestra esa puntuación en una página web en una cadena. No necesita ser nada elegante, todo lo que necesita hacer es mostrar al usuario, y luego agregar una cadena al final de la misma para la puntuación es, y luego agregar en la variable para el número de puntos, y luego finalmente agregar la cadena al final. Siéntase libre de hacer esto un poco diferente a mi ejemplo. Pero para darle una oportunidad, es una buena manera de poner en práctica lo que hemos aprendido hasta ahora. Si aún no te sientes 100 por ciento seguro en hacer esto, no es un problema. Simplemente sigue junto con el resto de este video, y te mostraré cómo lo haré. Espero que lograras hacerlo tú mismo, si no, no te preocupes, te mostraré cómo hacerlo ahora. Si sólo entra en la carpeta de conceptos básicos de JavaScript y luego duplica el último video. Voy a llamar al mío número 4 challenge-display-users-score. Después abre tu editor de texto, luego cambias el título, Viendo la puntuación del usuario. Voy a empezar de cero en esto. Entre las etiquetas de guión, voy a crear una variable llamada jugador igual a Chris, y luego una variable para mantener el valor de puntuación. Por lo que la puntuación es igual a cero, solo para empezar. Después una variable más para sostener la pantalla o la cadena, por lo que DisplayScore. Tan solo para hacer mi display un poco más grande, voy a empezar con algunas etiquetas h3. En realidad no los he mirado en este curso todavía, pero en realidad se pueden agregar etiquetas HTML rodeando entre las citas. Empezamos con el h3 y luego agregaremos el jugador o la variable de jugador. Entonces al final del jugador, quiero poner el apóstrofe y luego el s. Así que es el marcador de Chris es. Podemos agregar eso como una cadena. Entonces el apóstrofe y el s y luego un número más. Por ahora, tenemos el de Chris. Entonces queremos poner la cadena de partitura es, así que abre las cotizaciones. Recuerda poner un espacio antes y después para que las palabras no se estén tocando entre sí. Entonces la puntuación de Chris es, y luego necesitamos sumar al final la variable de puntuación. Entonces la puntuación de Chris es cero, y luego la palabra puntos, así que espacio, y luego puntos. Después al final cuando está cerrado, la etiqueta h3, igual que eso con un punto y coma en el extremo. Ahora tenemos nuestros conjuntos variables de partitura de display, solo ahora imprimamos eso en la página. Documentamos escritura, y el nombre de la variable, y un punto y coma, y echemos un vistazo. Por lo que la puntuación de Chris es de cero puntos. Si quisiéramos aumentar la puntuación cada vez que el usuario obtiene un punto extra, podríamos añadir marcador ++ si recuerdas eso desde antes. Entonces ahora si nos refrescamos, deberíamos conseguir la puntuación de Chris es un punto. Puedes hacer eso tantas veces como quieras y los puntos subirán en consecuencia. Ese es el final del reto. Espero que hayas logrado hacerlo y espero que lo hayas disfrutado. Gracias y los veré en el próximo video. 9. Métodos con cadenas: En lo que va de este curso, hemos analizado los conceptos básicos de las cadenas, como almacenar una cadena en una variable y también unir cadenas pero hay mucho más que podemos hacer con las cadenas. Ahora vamos a echar un vistazo a algunos métodos de cadena muy útiles. Si entras en tu carpeta JavaScript y luego en los conceptos básicos de JavaScript. Quiero duplicar la última carpeta que creamos. Voy a nombrar a este número 5 métodos de cadena, luego abre en tu editor de texto. Simplemente lo haré un poco más grande, y luego cambiaré el título a métodos de cadena, y luego bajaré. Simplemente voy a borrar el código que escribimos en el último video. Los métodos de cadena nos permiten hacer mucho más con cadenas. El primer ejemplo que te voy a mostrar es convertir una cadena en mayúsculas. Empecemos por crear una variable llamada string y solo voy a establecer eso para aprender JavaScript agregar un punto y coma, y luego voy a crear una segunda variable. Voy a llamar a esa nueva cuerda. Vamos a establecer el valor de la nueva cadena igual a la cadena original. Ese es el nombre de la variable, y luego punto, y luego dos mayúsculas luego los corchetes rizados y punto y coma. No olvides el par de capas en cada palabra después de la primera. Ahora hemos convertido la cadena para que sea mayúscula. Ahora vamos a alertar a la nueva cadena. Podemos comprobar que está funcionando bien. Alerta, ¿qué necesitamos alertar? Ese es el valor de la nueva cadena. Coloca eso entre paréntesis, y luego abre en tu navegador. Ahí vamos, genial. Ahí está nuestra cuerda original y todo se está cambiando a mayúsculas. Podemos hacer algo similar, pero podemos convertir a minúsculas. Probablemente puedas adivinar cómo hacer eso, solo necesitamos cambiar string dot a minúsculas, luego abrir eso y comprobar que está funcionando. Ahí vamos, así que todas las capitales han sido cambiadas a minúsculas ahora. El siguiente método que te voy a mostrar es lo que se llama string replace. Es entonces cuando buscamos cierta sección o cierta palabra en la cadena. Podemos reemplazar esa palabra. Hagamos sólo una cuerda un poco más larga. Quiero aprender JavaScript para construir sitios web. Nuevamente, estamos tomando el valor de la cadena original, y el método que vamos a usar es string.replace, y luego dentro de los corchetes, vamos a poner en dos parámetros. El primero va a ser la palabra que queremos reemplazar. Voy a cambiar sitios web y luego separarlo por una coma. Ponemos la palabra que queremos poner en su lugar, así que voy a cambiar eso por juegos. Ahora cuando echamos un vistazo a la alerta, deberíamos ver sitios web se ha cambiado a juegos. Entonces ve al navegador y refresca, y eso es exactamente lo que queremos. Quiero aprender JavaScript para construir juegos. Además de reemplazar palabras individuales, realidad podemos dividir la cuerda ya sea en caracteres individuales, o podemos dividir todas las palabras individuales. El modo de hacerlo es mediante el uso del método split. Simplemente voy a volver a la cadena original de aprendizaje de JavaScript y luego eliminar los contenidos dentro de los corchetes. Esta vez vamos a usar string.split, y luego lo que pondremos dentro de los corchetes, determina exactamente dónde está la división en la cadena. Si solo pones una cadena vacía o citas sin nada en ella, la cadena se dividirá en caracteres individuales. Basta con refrescar la página, y se puede ver con la coma, que la cadena se ha dividido, y ahora todo es caracteres individuales. Si quisiéramos dividirlo en palabras individuales en lugar de caracteres, podemos poner un espacio. El espacio en la cadena será el marcador para dónde dividir esa cadena. Ahora deberíamos conseguir dos palabras separadas. Refrescar. Ahora tenemos la palabra, el aprendizaje y la palabra, JavaScript separado por una coma, así que ahora son cadenas individuales. Ahora tenemos dos palabras separadas ahí. Podemos acceder a las palabras individuales por el número de índice dentro de los corchetes. Si queremos acceder a la primera palabra, esa sería la posición 0. Guarda y luego refresca. Ahora, tenemos la palabra learning, y si queremos la palabra JavaScript, cámbiala a la segunda palabra, que es la posición 1. Ahora obtenemos la palabra JavaScript. Entonces ahora hemos dividido la cuerda en dos palabras separadas. Podemos unirnos de nuevo a estos mediante el uso del método concat. Ahora tenemos dos palabras separadas. Vamos a crear una nueva variable. Simplemente agregaré esto encima de la alerta, así que llamaré a esta cadena unida, y luego para agregar las dos cadenas juntas, vamos a seleccionar la primera palabra. Eso estaba en la nueva variable string, y luego tal como hicimos con la alerta, vamos a poner eso en la posición 0, que es la palabra learning y luego dot y luego concat, y luego dentro de los corchetes, vamos a añadir la segunda cadena a la que queremos unirnos. Esperemos que hayas resuelto lo que es eso. Esa es nueva cadena y luego los corchetes, y la posición 1, y entonces ahora necesitamos alertar a la cadena unida. Vamos a deshacernos de eso y peguemos cadena unida y luego actualicemos. Ahí vamos. Se puede ver que la cadena se ha unido en una sola cadena y no hay coma entre ellas. Eso es bueno. El último método que te voy a mostrar es el string Slice. Vamos a deshacernos de la variable de cadena unida. De nuevo, vamos a manipular la cadena original, pero en esta ocasión queremos usar la rebanada de puntos. Vuelve a poner los corchetes rizados, y el método de rebanada, tiene una posición de inicio y una de fin. Se puede rebanar una cierta sección de la cadena. requiere el primer valor, y esa es la posición de inicio. Voy a empezar con el número 2 y luego separado por una coma, y el segundo valor es opcional, que es la posición final. Voy a usar el número 6 y luego alertar a la nueva cadena. Echemos un vistazo a eso. Ahí tenemos la palabra arni, que es esta parte de la cuerda. Esa es la posición 2, así que 0, 1 , 2, y luego todo el camino a seis. Ese es el final de este video. Espero que ahora tengas una mejor idea de cómo puedes manipular cadenas usando métodos de cadena. No eche un vistazo a la hoja de tramposos, que se proporcionó al inicio del curso. Ahí hay uno o dos métodos de cadena más que pueden resultar útiles. Tengan un poco de juego con ellos. Por ahora, gracias, y nos vemos en el siguiente video. 10. Mini desafío: Formatear correctamente el nombre del usuario: Bienvenido a otro mini reto. Esta es la parte emocionante del curso donde se llega a poner en práctica lo que has estado aprendiendo hasta ahora. En este mini reto, vamos a formatear el nombre de un usuario. Todos lo hemos hecho, todos hemos puesto la capital accidentalmente o en el lugar equivocado al escribir. En ocasiones recibían un par de cartas donde no deberían estar a nuestro nombre. Yo sólo voy a empezar y entonces tú puedes hacerlo tú sola. Número 6 desafío-nombre-formateador, luego abre esta carpeta. Voy a cambiar el título a Formador de nombres, y luego eliminar esta sección. Yo sólo voy a empezar. Voy a crear una variable llamada nombre, entonces necesitas poner tu nombre dentro de las cotizaciones. Pero con algunas mayúsculas extraviadas, así como eso. Lo que me gustaría que hicieras es usar algunos de los métodos de cadena que vimos en el último video y formatear tu nombre. El primer letra es mayúscula de tu primer segundo nombre y luego todo el resto para ser minúscula. Así que pausa el video y dale una oportunidad, probarlo tú mismo es realmente la mejor manera de aprender. Si te quedas atascado o tienes algún problema, voy a pasar exactamente como lo hubiera hecho. Esto es lo que yo hubiera hecho. Al igual que con muchas cosas en la programación, hay varias maneras diferentes en las que puedes acercarte a esto. Pero lo voy a descomponer en algunas variables para empezar. Voy a empezar con una variable llamada split. Voy a dividir el nombre en dos palabras separadas para que pueda funcionar individualmente. Para dividir el primer y el segundo nombre, queremos utilizar el método split que miramos en el último video, por lo que nombre.split. Esperemos que recuerden cómo hacer eso. Simplemente crea un espacio y reconoceré dónde está la división. Ahora tenemos las dos palabras individuales almacenadas en una variable llamada split. No va a crear una variable para cada una de estas palabras. Por lo que el nombre de la variable 1 es igual a dividir en la posición cero. Entonces esa es la primera palabra. Nombre2 es igual a dividir, y luego número uno, que es la segunda posición. Ahora tenemos el nombre de pila en una variable. Ahora voy a formatear ese nombre, así que voy a llamar a esta variable formattedName1, por lo que eso es igual a nombre1. Entonces necesitamos hacer del primer personaje una capital. Voy a rebanar la primera letra. Los dos parámetros que necesitamos poner es la posición cero para empezar por el principio, y luego terminar una posición uno. Sólo va a rebanar al primer personaje. Entonces para hacer de esto una mayúscula, vamos a ponerlo en mayúsculas, y no olvides los corchetes. Tal como está, esta variable sólo contiene una C mayúscula, por lo que necesitamos agregar al final de la misma el resto de los caracteres en minúsculas. Después de ese nombre1.rebanada, vamos a rebanar la sección restante, pero sólo vamos a poner un parámetro ahí. Se va a empezar en la posición uno y luego estar todo el camino hasta el final de la cuerda, .tolowerCase. Solo creemos alerta, solo para ver si eso funciona bien. Una vez que alertes formattedName1; genial, eso está funcionando todo. Podemos hacer lo mismo con el segundo nombre. Simplemente voy a copiar esta sección y luego cambiarla a FormattedName2. Este método funcionará exactamente igual, pero solo necesitamos cambiar nombre1 a nombre2 y verificar que esté funcionando de nuevo. Genial. Tenemos los dos nombres individuales los cuales están correctamente formateados. Sólo necesitamos unirlos. Voy a crear una variable llamada newName. Eso va a ser igual al formattedName1 más formattedName2, y eso es alertar al nuevo nombre. Necesitábamos eso. Tenemos el nombre formateado apareciendo, solo necesitamos poner un espacio intermedio. Podemos hacer eso entre formattedName1 y 2. Sólo tienes que añadir un espacio ahí dentro y otro símbolo más. Ojalá, eso debería ser ahora. Ahí vamos. Entonces ese es un nombre correctamente formateado. Espero que sí le diste un go a eso y trabajaste todo por ti mismo. Si no, no te preocupes. Ojalá, ahora ya sabes cómo hacerlo. Más mini retos a medida que continuamos a lo largo del curso. Gracias por ver, y nos vemos en el siguiente video. 11. Matrices en Javascript: En lo que va de este curso, hemos mirado las variables y cómo se utilizan para almacenar un valor. No obstante, si necesitamos almacenar más de un valor, necesitaríamos usar lo que se llama un Array. Las matrices pueden contener múltiples valores bajo un solo nombre, y podemos acceder a estos valores por su posición o su número de índice. Pasemos a nuestra carpeta javascript y en una sección javascript-basics, duplicar la última carpeta. Este va a ser el número 7.arrays y luego vamos a abrir esa carpeta. Después cambia el título a Array. Simplemente podemos eliminar esta sección. Hay un par de formas diferentes en las que podemos crear un Array. Se inicia de manera similar a las variables. Utilizamos la palabra clave var y luego asignamos un nombre al Array. A modo de ejemplo, voy a crear un Array para los usuarios y luego vamos a crear un nuevo Array y luego los corchetes justo después. Esto crea una nueva Array llamada usuarios y podemos agregar diferentes usuarios o valores diferentes a esta Array mediante el uso del nombre de Array y luego los corchetes. La primera posición en un Array es 0. Voy a establecer la primera posición para ser igual a Chris y luego sólo voy a agregar un par más, así usuarios y luego Posición 1, voy a llamar a este usuario Mike. Después usuarios y luego un tercero, insertaremos a Paul ahí. Ahora nuestro nuevo Array debería tener tres valores diferentes, así que vamos a comprobar que todo está funcionando con un document.write y luego dentro de los corchetes podemos poner el nombre de la Array que es usuarios. Echemos un vistazo. Genial, dice nuestros tres valores que hemos insertado en el Array. Otra forma en que podemos crear un Array, posiblemente una forma más popular, es utilizar el método literal. Empezando de la misma manera y en lugar de usar la nueva palabra clave, podemos poner el valor directamente entre corchetes. Al igual que antes, podemos poner al primer usuario y luego separarnos por una coma. Podemos agregar el resto de nuestros valores y al igual que las variables cuando tira cadenas entre citas pero estamos bien para poner números tal como están. Ahora, puedes guardar eso y luego refrescarte y obtendremos los mismos tres usuarios que teníamos antes. Además de mostrar el contenido completo del Array, solo podemos mostrar valores individuales de un Array dependiendo de su posición de índice, por lo que Chris es Posición 0, Mike es 1 y Paul es 2. Si solo vas a document.write y luego en lugar de mostrar todos los usuarios entre los corchetes podemos poner el número de índice. Si queremos que muestre a Mike, eso sería 1, y sólo vamos a conseguir aparezca un valor y si queríamos a Paul podríamos cambiar eso a 2. Al tratar con Array, también podemos usar diferentes tipos de datos. Además de cadenas, podemos poner en números, por ejemplo, y eso funcionará exactamente igual. Si solo guardamos eso y luego actualizamos, obtendremos el número que aparece al final del Array. Una cosa útil a saber con Array es que podemos usar la propiedad length para averiguar cuántos valores hay dentro de la Array y la forma de hacerlo es con la propiedad.length. Ahora debería mostrar la longitud del Array, por lo que deberíamos obtener el valor de tres. Echemos un vistazo y refresquemos. Ahí vamos, por lo que obtenemos el valor de tres. Dejaremos esto fuera y en el siguiente video echaremos un vistazo a algunas formas realmente poderosas e interesantes de manipular Array usando métodos Array. 12. Métodos de matriz: Entonces al igual que con las cadenas que miramos hace algunos videos, matrices también tienen varios métodos de array y podemos usar, que pueden ser realmente útiles. Entonces, empecemos con una nueva carpeta. Y este es el número ocho, y este es los métodos de matriz. Así que renombra los métodos de matriz de carpetas y abra el open entre corchetes. Entonces vamos a renombrar esto. Entonces los métodos de matriz, y entonces realmente podemos reutilizar esta matriz que creamos antes. Entonces, si quisieras agregar un valor extra a esta matriz, podemos usar el método push. El modo de hacerlo, es utilizar el nombre de la matriz, que es el usuario dot push, con los corchetes después, y un punto y coma. Entonces dentro de los corchetes ponemos el valor que queremos agregar. Entonces, voy a crear un nuevo usuario llamado, Tom, y luego simplemente eliminar la propiedad de longitud allí. Entonces, vamos a guardar y abrir eso en el navegador. Entonces ahora se puede ver que tenemos cuatro valores ahora, y Tom ha sido colocado en el final de la matriz. Pero si quisiéramos agregar Tom al inicio de la matriz, podemos usar un método llamado unshift, y luego guardarlo, y refrescar. Ahora Tom se agrega al inicio de la matriz, y también podemos eliminar valores de la matriz de un tipo similar de manera. Entonces en lugar de unshift, podemos usar el método Shift y esto eliminará el primer elemento de una matriz. Simplemente deja vacíos los corchetes, y luego refresca. Ahora se puede ver que el valor de Chris, que es el primer valor, se ha eliminado. También podemos eliminar el último valor de una matriz, con el método pop. Entonces, los usuarios puntan pop, y esto debería eliminar a Paul, del final de la matriz, y refrescarse, y ahora nos quedamos con Chris, y Mike. De acuerdo, y también podemos revertir el orden de los valores en la matriz, mediante el uso del método inverso. Ahora deberíamos conseguir que Paul, Mike, y Chris aparezcan en ese orden. De acuerdo, entonces antes nos fijamos en agregar valores, y eliminar valores desde el principio, y el final de la matriz. También podemos usar el método de corte, que eliminará un valor de una matriz entre un punto determinado. Entonces vamos a hacer eso, en realidad crearemos una nueva variable. Llamaremos a esto Slice, y eso va a ser igual a, usuarios dot Slice. Entonces dentro de los corchetes ponemos en dos valores. Por lo que el primer valor al que queremos ingresar es la posición de inicio. Entonces si quisiéramos quitar a Mike, esa es nuestra posición uno. Si recuerdas, el primer índice es cero, y luego separado por una coma, ponemos el segundo valor, que es la posición final. Entonces queremos que esto termine justo antes de un Paul, que es valor dos. Entonces documente a la derecha, la variable de corte, y guarde eso. Ahora cuando comprobemos eso en el navegador, deberíamos ver que se mostrará el valor de Mike, así que guarda, y refresca, y ahí vamos. Entonces tenemos el valor de que Mike aparezca en la pantalla. Podemos usar las posiciones de inicio, y final para sacar cualquier valor que queramos dentro de la matriz. Si echa un vistazo a la hoja de tramposos proporcionada, son algunos métodos de matriz más adicionales con los que puedes tener una jugada. Te veré en el siguiente video, donde echaremos un vistazo a las funciones de JavaScript. 13. Funciones de Javascript: Bienvenidos de vuelta chicos. Este video es todo sobre las funciones de JavaScript. Entonces empecemos de manera habitual. Por lo tanto, crea una carpeta Funciones, que es el número 9. Después abre la carpeta Funciones dentro de tu editor de texto. A continuación, cambie el título a funciones, y luego, simplemente elimine el código de muestra allí. Una función es básicamente un bloque de código al que podemos llamar cuando se requiera. Entonces, en lugar de repetir el mismo código más que unos, podemos escribirlo una vez y colocarlo dentro de una función. Entonces podemos llamar a una función por su nombre para ejecutarla. Por lo que una función se ve un poco así. Entonces usa la palabra clave function, y luego, dale un nombre a la función. Voy a llamarlo mi función. Entonces necesitamos usar los corchetes rizados después. Entonces el código que vamos a poner dentro de la función, va entre llaves igual que eso. Voy a empezar con una simple alerta. Entonces solo voy a alertar algún texto, la función está funcionando. Entonces una vez que hemos creado una función, entonces necesitamos invocarla, o llamarla por su nombre de función. Entonces en nuestro caso, es MyFunction. Voy a necesitar escribir a los corchetes después, y un punto y coma. Guarda eso. Entonces ahí está trabajando nuestra función. Práctico cualquier código que queramos entre las llaves, y se ejecutará cada vez que se llame. Entonces si creamos un par de variables, por lo que la variable A puede realizar algunos cálculos dentro de la función. Entonces variable B, y establecer eso en 10. Entonces, podemos acceder a estas variables dentro de la función. Vamos a crear una variable C, y esa va a ser la suma de A, multiplicada por B. Así que A, y luego una estrella y B. Luego mostrar el valor de C con un document.write. Entonces ahora, cada vez que llamamos a MyFunction, deberíamos obtener el cálculo que se está realizando, y luego el resultado de que el cálculo se imprima en la pantalla. Entonces guarda y refresca, y luego obtenemos el valor que aparece en la pantalla. Entonces para ayudarte a entender las funciones un poco mejor y exactamente lo que hacen, vamos a crear un ejemplo de la vida real de cómo podríamos usar una función en un juego. Entonces hemos tenido un juego y tuvimos una variable que establece el marcador. Entonces la variable llamada Vidas, que establece el número de vidas que tiene el jugador, y luego la variable de GameOver. Esto se establece en una construcción sobre el valor, que es verdadero o falso. Entonces mientras el juego se está ejecutando, queremos que eso sea falso para empezar. Por lo que en este caso, un buen uso de una función puede ser reducir el número de vidas que tiene el jugador. Entonces, en lugar de escribir ese código cada vez que el jugador perdió una vida, podríamos simplemente llamar a la función. Entonces crea función, y llamaremos a esto LifeOST. Por lo que cada vez que el jugador pierde una vida, entonces restableceríamos el marcador a cero. Podríamos también disminuir el número de vidas por una. También estableceríamos que GameOver fuera igual a verdadero. Entonces una vez que termine el juego, quizá queramos enviar un mensaje en la pantalla. Por lo que document.escribir. Pondremos esto entre encabezamientos de nivel 2. Así que se acabó el juego. Entonces le diremos al usuario cuántas vidas les quedan. Después mostraremos el número de vidas. [ inaudible] esa barra lateral para conseguirles más espacio. Por lo que para imprimir el número vidas, podemos sumar la variable vidas. Entonces, después del número, vamos a sumar la cuerda, vive a la izquierda, y luego, cerrar el rumbo de nivel 2. Necesitaré espaciar eso en realidad. Entonces vamos a guardar eso, entonces llamaremos a la función, LifeOST. Echemos un vistazo. Genial. Entonces ahora tenemos el mensaje apareciendo, y las 10 vidas con las que empezamos ahora se han reducido a nueve. Podemos hacerlo de nuevo. Debe reducirse en uno cada vez. Espero que ese ejemplo te haya dado una mejor idea de cómo podemos usar funciones en JavaScript. En el siguiente video, seguiremos echando un vistazo a los parámetros de las funciones. 14. Parámetros de la función: Bienvenido de nuevo. En el último video, miramos cómo definir una función y cómo invocar esa función usando el nombre de las funciones y luego los corchetes rizados. En este video, vamos a llevar eso un poco más allá. Voy a echar un vistazo a pasar parámetros a estos corchetes rizados. Empecemos con la carpeta. Abre tu carpeta JavaScript. En lo básico, duplicar las funciones. Este es el Número 10, función-parámetros. A continuación, abra la carpeta de parámetros de la función y cambie el nombre. Echemos un vistazo a cómo funciona esto. Simplemente podemos eliminar la sección del último video. Una nueva función, y llamaremos a este AlertMessage. Esta vez estamos dejando vacíos los paréntesis. Voy a pasar un mensaje ahí. Entonces la función es que simplemente vas a alertar, el mensaje que estabas pasando. Esto actúa de manera similar a una variable. ¿ De dónde sacamos este mensaje? Bueno, ponemos eso entre paréntesis cuando nosotros la función de llamada. AlertMessage. Esta vez, en lugar de simplemente dejar vacíos los paréntesis, vamos a pasar un mensaje que queremos alertar. Estoy aprendiendo Javascript. Este mensaje es lo que hay aquí dentro. Entonces simplemente vamos a alertar a ese mensaje. Echemos un vistazo. Ahí está el mensaje, estoy aprendiendo Javascript. También podemos pasar más de un parámetro a la función. Si queríamos tener una función, acabamos de realizar un cálculo. Crearé una nueva función llamada MultiplyNumbers. Entonces podemos pasar en dos parámetros; número1 y también número2. Entonces podemos alertar el cálculo del número1 multiplicarse por número2. Entonces al igual que antes, cuando invocamos esa función, pasamos los dos números que queremos calcular. Por ejemplo, cinco y cuatro. Ahora deberíamos avisar el cálculo, que es resultado de 20. De acuerdo, así que todo está funcionando. Espero que todo tenga sentido y gracias por ver y espero que ahora tengas mejor comprensión de cómo pasar parámetros a funciones. Te veré en el siguiente video, donde echaremos un vistazo al alcance de JavaScript. 15. Alcance en Javascript: Bienvenido de nuevo. En este video vamos a estar echando un vistazo al alcance de JavaScript. Alcance define básicamente a qué variables tenemos acceso. Vamos a crear una nueva carpeta, y vamos a echar un vistazo a eso. Por lo tanto, duplica el último video. Este es el video número 11, y lo llamaremos Alcance. Abre como de costumbre. Dentro del editor de texto, para luego cambiar el título a Javascript Scope, y luego debes quitar esta sección. Empecemos con una función. Vamos a llamar a esta función multiplicarse, y no necesitamos ningún parámetro ahí solo por ahora. Entonces dentro de esta función, quiero crear un par de variables, por lo que la variable a y establecer eso en dos, y la variable b, dar un valor de cinco, y luego crear una alerta de una multiplicación por b. quiero crear un par de variables, por lo que la variable a y establecer eso en dos, y la variable b, dar un valor de cinco, y luego crear una alerta de una multiplicación por b. esta función multiplicar, y deberíamos obtener el resultado de 10 apareciendo en la pantalla. Entonces todo eso está funcionando bien. Entonces creamos dos variables dentro de esta función, y esto es lo que se llama alcance local. Significa que sólo se puede acceder a estas dos variables dentro de esta función. Entonces si intentábamos alertar a una de las variables, así que tratamos de alertar por ejemplo, variable b, que ha sido declarada dentro de la función, y luego si pasamos al navegador, puede ver que cuando actualicemos ese en realidad no pasa nada. Si entramos en las herramientas de desarrollador, obtenemos el mensaje de error diciendo, b no está definido. Entonces solo crea una variable dentro de una función, si solo quieres usar dentro de esa función. Si quieres usar esa variable fuera de la función, lo que necesito para sacarlos, y ponerlos fuera de la función. Por lo que ahora estas dos variables tienen alcance global, por lo que se puede acceder no sólo dentro de la función, sino también en cualquier lugar del resto del código. Ahora si alertamos b, tenemos acceso a esa variable, que es la número cinco. También si usamos la función multiplicar, si solo eliminamos los comentarios y luego refrescamos la página, que la función también tiene acceso a las dos variables. Entonces ahí vamos. Empezar a mirar el alcance de las variables, espero que eso ayude. Gracias por mirar, y nos vemos en la siguiente sección. 16. Objetos de Javascript: Hola chicos, y bienvenidos de nuevo. En este video, vamos a echar un vistazo a los objetos JavaScript. Los objetos JavaScript son partes realmente importantes de JavaScript. Tanto es así que casi todo en JavaScript se clasifica como un objeto. Los objetos son una colección de pares nombre-valor. Entonces echemos un vistazo a cómo los usamos. Entonces vamos a crear el video número 12. Esto se llama objetos. Entonces abramos esto. Así que arrastre, introduzca corchetes. Cambiemos esto a objetos JavaScript, y empecemos con una etiqueta de script vacía. Ahí vamos. Entonces cuando queremos crear un objeto, comenzamos de una manera similar a una variable, que miramos antes. Entonces usamos la palabra clave var, y luego queremos darle un nombre al objeto. Voy a usar un teléfono como buen ejemplo para nuestro objeto. Entonces démosle un nombre de teléfono. Una forma de crear un objeto es mediante el uso de la nueva palabra clave. Objeto tan nuevo. Cuando creamos un nuevo objeto, necesitamos usar los corchetes después. Este diseño debería parecer bastante familiar desde la sección de matriz, donde creamos una nueva matriz y luego agregamos ciertos valores o propiedades a esa matriz. Entonces ahora tenemos nuestro objeto telefónico. Podemos empezar a agregarle algunas propiedades diferentes, como el fabricante del teléfono, el modelo, y el color. Por lo que para agregar propiedades a nuestro objeto telefónico, escribimos el nombre del objeto. Después para agregar propiedad al objeto telefónico, podemos usar los corchetes. Entonces dentro de las cotizaciones, podemos agregar el nombre de la propiedad. Por lo que fabricante puede ser la primera propiedad. Pongamos nuestro ejemplo a Apple. Después un punto y coma al final. Podemos continuar exactamente de la misma manera para más propiedades. Para que podamos agregar el modelo, y eso se puede ajustar al iPhone. El color del teléfono, así que voy a poner eso en plata. Por lo que establecemos un nuevo objeto telefónico. Esto va a tener las propiedades del fabricante, establecidas en Apple. El modelo, configurado en iPhone, y el color del teléfono para ser establecido en plata. Entonces estos son los pares nombre-valor. Entonces este es un nombre. Este es el valor asignado con el operador igual. Los objetos son ideales para cualquier cosa que tenga una serie de propiedades, como un objeto de persona puede tener propiedades, como un nombre, una edad, dirección y número de contacto. Tan realmente útil de mantener toda nuestra información contenida en la palabra clave one. Entonces ahora tenemos nuestro nuevo objeto telefónico creado, y hemos agregado tres propiedades diferentes. Agregamos todos nuestros valores. Ya podemos hacer un registro de consola. Para que podamos iniciar sesión en la consola el objeto telefónico. Así que vamos a guardar eso y echar un vistazo, y diríjase a las herramientas de desarrollo. Entonces ahí vamos. Para que podamos ver nuestro objeto se está creando en los registros. Si abres eso, podemos ver todos los pares nombre-valor. Tenemos el color, el fabricante y el modelo. Entonces ese es el contenido del objeto completo. Si quisiéramos acceder solo a una de estas propiedades, esto funciona de una manera similar a una matriz. En lugar de registrar el objeto telefónico, utilizamos un objeto telefónico y luego los corchetes. Entonces dentro de las cotizaciones, acabamos de poner el nombre del inmueble. Entonces ahora deberíamos conseguir el modelo, que es el iPhone. Enfréntate y refresca. Entonces ahí vamos. Entonces está el valor del iPhone. En nuestro ejemplo que acabamos de buscar, hemos accedido y añadido propiedades a nuestro objeto usando los corchetes y generalmente una forma más popular y la más sencilla de agregar propiedades a un objeto es usar la notación de puntos. Se ve un poco más sencillo. Entonces usando el ejemplo que hemos creado arriba, hagámoslo de nuevo con el objeto telefónico. Entonces vamos a poner esto en un nuevo objeto, y vamos a comentar esta sección hacia fuera. Ahora queremos agregar propiedades. Podemos empezar con el objeto telefónico. Pero esta vez, en lugar de los corchetes, podemos usar el punto. Por lo que un fabricante de puntos igual a Apple. El teléfono.modelo es igual a tu iPhone, y luego por último el teléfono.color. Entonces pondremos eso en plata. Entonces esto funciona exactamente igual que la notación de corchetes que usamos arriba, pero creo que esto solo se ve un poco más simple y es un poco más fácil teclear. Entonces solo para comprobar que está funcionando, haremos una consola, registro de consola y que mostrará en los registros el objeto telefónico. Así que guarda y luego refresca. Entonces ahí está nuestro objeto una vez más con el fabricante, el modelo, y las propiedades del color. Entonces obtenemos exactamente los mismos resultados, pero creo que sólo se ve un poco más limpio. Entonces si recuerdas de cuando creamos una matriz, también hicimos la versión literal donde no necesitábamos usar la palabra clave new array. Podemos hacer exactamente de la misma manera en la creación de objetos. Entonces, en lugar de crear el objeto, como acabamos de hacer ahí, que es de una manera, podemos usar el objeto literal. Por lo que es un poco más sencillo crear un objeto de esta manera. Entonces comenzaremos con la palabra clave var y luego nuevamente le daremos el nombre del objeto, y entonces esta vez es establecer un nuevo objeto. Establecemos el objeto telefónico para que sea igual a todos los pares nombre-valor, que ponemos entre las llaves. Por lo que podemos establecer dentro del corsé las propiedades. Entonces fabricante y luego usar un colon. Entonces Apple. El modelo, por lo que se va a separar con una coma. El modelo, de nuevo, el iPhone. El color de la plata. Entonces una de las grandes cosas de usar objetos es porque son solo colecciones de pares nombre-valor. También podemos anidar un objeto dentro de otro objeto. Por ejemplo, si nuestro teléfono tuviera muchas características diferentes, también podríamos crear un objeto features. En lugar de agregar un valor, podemos usar las llaves y luego dentro de las llaves, podemos agregar más pares nombre-valor. Entonces, por ejemplo, si nuestro teléfono tuviera características como Bluetooth. Por lo que pondremos eso en un valor booleano de verdad y Wi-Fi. Entonces eso debería ser otra vez una coma, y luego Wi-Fi, que también puede ser cierto. GPS, estableceremos que sea falso, y puedes anidar tantas de estas propiedades dentro como quieras. Entonces ahora si queríamos acceder a alguna de estas propiedades que están anidadas, es bastante sencillo de hacer. Entonces hacemos un registro de consola. Entonces comienza con nuestro nombre de objeto. El nombre del objeto es teléfono y luego usa el punto para acceder a las propiedades. Se puede ver los corchetes ya nos da una lista de las diversas propiedades. Entonces con las características de color, fabricante, y modelo. Si queríamos profundizar, podemos seleccionar las características y luego volver a usar el punto. Después puedes ver dentro de las características, tenemos las tres propiedades de Bluetooth, GPS y Wi-Fi. Entonces vamos a guardar eso y comprobarlo. Entonces deberíamos obtener el valor del Bluetooth, lo cual es cierto. Entonces refresca y ahí está nuestro verdadero valor, y eso cambia al GPS y luego deberíamos obtener un valor de falso. Ahí vamos. Entonces ahora tenemos nuestro objeto telefónico todo configurado. Simplemente voy a crear un ejemplo usando una función, que miramos en esta sección. Entonces crea una función. Simplemente mostraremos las características de su teléfono en una función. Solo hagamos una alerta al navegador. Entonces dentro de la alerta, podemos mostrar al fabricante del teléfono agarrando la propiedad del fabricante del objeto. Empecemos con una cuerda. Entonces un fabricante y luego un espacio. Podemos usar el plus para agregar al final. Seleccionemos nuestro objeto telefónico y usemos la notación de puntos. Entonces teléfono.fabricante y luego para mostrar esto cuando se llama la función YourPhone. Entonces pega eso en, y luego guarde eso, y luego vaya al navegador y actualice. Entonces ahí vamos. Ahí está nuestra cadena de fabricante, y después hemos jalado en el fabricante de objetos, que es Apple. Entonces ahí vamos. Es así como creamos un objeto en JavaScript, y ese es el final de esta sección. Entonces gracias. Te veré en el siguiente apartado. 17. Matemáticas en Javascript: Bienvenido de nuevo a esta nueva sección llamada JavaScript Matemáticas y fechas. Esperemos que ahora estamos empezando a tener una mejor comprensión de lo que es JavaScript y lo que JavaScript puede hacer. Las cosas deberían parecerte mucho más familiares ahora para ti. Vamos a empezar mirando JavaScript Math. JavaScript Math nos permite realizar tareas matemáticas complejas o simples como crear números aleatorios, encontrar el valor más bajo o más alto en una matriz, por ejemplo, redondear números hacia arriba y hacia abajo, entre otros. Entonces, echaremos un vistazo a la fecha de JavaScript. El objeto de fecha JavaScript nos permite trabajar con la fecha actual. Podemos hacer eso de algunas maneras diferentes. Echaremos un vistazo a eso a medida que pasemos por este apartado. Empecemos como de costumbre en nuestra carpeta JavaScript. Voy a crear una nueva carpeta por ahí y llamar a esta una matemática y fechas. Entonces, solo voy a copiar una carpeta de las secciones anteriores y pegarla ahí solo para que empecemos. Voy a llamar a la primera matemática JavaScript. Entonces, abramos eso en tu editor de texto. Después, como de costumbre, cambia el título a JavaScript Math. Después, borra cualquier código de videos anteriores. Ahí vamos. Vamos a empezar con pi. Esperemos que recuerden de la escuela lo que es pi. Si no lo haces, pi es 3.14. Podemos encontrar eso en JavaScript usando el objeto Math, y luego punto, y luego PI. Podemos mostrar Math.pi en cualquiera de los métodos habituales. Voy a crear una alerta y luego poner el Math.pi dentro de los corchetes con un punto y coma al final. Deberíamos hacer esto un poco más grande para que puedas verlo. Entonces, abre el navegador y veamos cómo se ve eso. Ahí está nuestra alerta. El valor de pi es 3.141 y muchos más números después de eso no necesitamos preocuparnos por este video. Si estás contento con eso, solo comenta eso fuera. A continuación, vamos a echar un vistazo a cómo generar un número aleatorio en JavaScript. El modo de hacerlo es con el objeto Math una vez más, pero esta vez use .random. Pero esta vez necesitamos poner los corchetes ahí dentro. De nuevo, sólo podemos alertar eso al navegador. Alertan y luego rodeen la matemática.Aleatorio dentro de los corchetes con el punto y coma. Entonces, echemos un vistazo a lo que se muestra. Está bien. Alerta en el navegador es 0.85. Quizás te estés preguntando por qué se trata de un número aleatorio. Bueno, en JavaScript, se genera un número aleatorio entre cero y uno. En realidad, el cero está incluido en este número aleatorio, pero uno no lo está, así que ten cuidado con eso. Si queremos generar un número aleatorio, por ejemplo, entre uno y 10, todavía necesitamos hacerlo de la misma manera, pero entonces sólo necesitamos multiplicar el resultado, ejemplo, por 10. En lo que va de los dos ejemplos que acabamos de mostrarte, los números tienen muchos decimales como éste de ahí. Pero a veces queremos redondear al número entero más cercano. Con JavaScript, podemos redondear o redondear hacia arriba o podemos redondear hacia abajo. El camino para redondear. Creamos una alerta para empezar. Entonces, dentro de los paréntesis de alerta, necesitamos usar Math.Ceil, que es la abreviatura de techo. Entonces, dentro de los corchetes después de eso, necesitamos poner el número que queremos redondear. Si creamos un número de 4.5, esto debería redondear este número hasta el número entero más cercano, que es cinco. Entonces refresca. Obtenemos el valor de cinco en el cuadro de alerta. Eso funciona con cualquier número. Todavía deberíamos conseguir cinco ahora. Redondear hacia abajo es en realidad bastante similar. En lugar de Math.Ceil, utilizamos Math.Floor. Entonces, nuevamente, pasamos en el número que queremos redondear hacia abajo. Para un número ahora de 7.6, ahora deberíamos obtener el valor de siete dentro de la caja de alerta. Genial. Nuevamente, esto funciona con cualquier número. No importa lo alto o lo bajo que sea el número, todavía siempre redondearás hacia abajo al número entero más cercano. Comentemos eso fuera y luego sigamos por debajo de eso. Esa es una forma de redondear un número hacia arriba o redondear un número hacia abajo. Pero si solo quisiéramos redondear al número entero más cercano en lugar de todo redondear hacia arriba o hacia abajo, podemos hacerlo con Math.Round. Crea tu caja de alerta y luego Math.round. Ahora, por ejemplo, un valor de 7.2, esto debe redondearse al número más cercano de siete, que llegamos ahí. Si está por encima de cinco, como 7.6, eso debería redondear hasta ocho ahora. Si el número en el que pasamos fue en el medio, por lo que fue 7.5, este valor siempre se redondeará hacia arriba. Todavía debemos conseguir ocho en la caja de alerta. Yo sólo voy a comentar este fuera y luego pasar a buscar números mínimos y máximos. Si tuviéramos más de un valor y quisiéramos comprobar cuál es el número más bajo o cuál es el número más alto, podemos usar Math.min y Math.max. Alertemos esta vez Math.min. Entonces, dentro de los corchetes esta vez, podemos pasar más de un valor. Pongamos algunos números ahí separados por comas. Ocho, 15, 3, y 63. Ahora, deberíamos poder averiguar cuál es el número más bajo. Es por eso que con [inaudible] deberíamos obtener el valor de tres dentro de la alerta, lo que hacemos. Entonces, todo lo que necesitamos hacer para encontrar el valor más alto es simplemente cambiar.min a.max, y ahora deberíamos obtener el valor de 63. Ahí vamos. Dice 63 dentro de la caja de alerta. Hay uno o dos ejemplos más para mirar en tu hoja de tramposos y todos funcionan de manera similar a los ejemplos por los que acabamos de pasar por ahí. Ahora tenemos una mejor comprensión de cómo funciona JavaScript Math. En el siguiente video, pongamos esto en práctica en un mini reto. 18. Mini desafío: genera un número entero al azar entre 1 y 100: Bienvenido de nuevo. Espero que tengas la oportunidad de tener un poco de juego con algunas de las matemáticas de JavaScript que miramos en el último video. Entonces ahora tenemos toda la aburrida teoría fuera del camino. Ahora pongamos eso todo en práctica y creemos otro mini reto. Va a ser bastante sencillo, aunque quizá necesites pensar en una o dos cosas en el camino. Todo lo que quería hacer en este reto es generar un número aleatorio entre uno y 100. Es algo que debería ser capaz de hacer. Es algo que hemos mirado en videos anteriores, y es algo que no debería causar ningún problema. Bueno, si lo hace, no te preocupes, solo sigue con lo que hago al final de este video y te mostraré exactamente cómo hacerlo. Entonces entra en tu carpeta JavaScript y luego las matemáticas y la fecha, sección. Duplica el último video, y llámalo como quieras, pero voy a llamar a un desafío de número-aleatorio, luego abrir esto en tu editor de texto. Por último, cambia el título y quita el código del último video, por lo que Mini reto: Genera un número aleatorio entre 1-100. Ya no necesitamos esto para que podamos quitar eso. Si no sientes que necesitas ayuda, detén el video ahora y dale una oportunidad a eso. Si sientes que aún necesitas uno o dos punteros más, echa un vistazo al último video nuevamente y echa un vistazo a la sección Math.Random en ese video, y eso debería darte todas las pistas que necesitas para completar el reto. Entonces dale una oportunidad a eso, y si no te sientes seguro, no te preocupes. Voy a pasar por cómo lo haría ahora. Solo empecemos entre las etiquetas de guión. Voy a empezar por crear una variable para almacenar el número aleatorio dentro. Voy a llamar a esta variable número redondeado, y luego esto se va a ajustar a Math.Random, que miramos en el último video. No olvides los corchetes y después el punto y coma. Si recuerdas que la matemática.Random generó un número aleatorio entre cero y uno, pero porque queremos que el valor sea entre uno y 100, necesitamos multiplicar el valor por 100. Entonces manipulemos esta variable. Entonces copia eso y pega en. Por lo que el número redondeado ahora es igual al número redondeado, se multiplican por 100, y luego vamos a imprimir esto en la pantalla. Voy a usar un document.write, y luego pasar dentro de la variable, que es número redondeado. y vamos a ver cómo eso está buscando ahora, y refresquemos eso unas cuantas veces. Deberías comprobar que está funcionando bien. Por lo que necesitamos también redondear este número al número entero más cercano. En realidad voy a redondear el número a la baja. Nuevamente, basta con entrar en el código y luego cambiar la variable numérica redondeada, por lo que Math.Floor. Entonces dentro de los corchetes esta vez, en lugar de simplemente escribir un número que acabas de poner en nosotros mismos, vamos a pasar en la variable número redondeado, luego echar un vistazo a eso. Esperemos que lograras hacer eso. Pero hay un pequeño inconveniente con esto. Si recuerdas que el número aleatorio que generamos comenzó en cero pero en realidad no incluía el número 1, lo que, por lo tanto, el número más grande que posiblemente podamos ir va a ser 99. Para aumentar eso, sólo vamos a usar más uno. Si sigues refrescando finalmente debería obtener los valores de uno y 100, pero puede tardar un tiempo. Entonces ahora todo eso está funcionando. Solo hay una cosa más que quiero mostrarles antes de terminar este video. Entonces el código que hemos creado en este reto, es bastante paso a paso y todo está en líneas separadas. De la forma en que realmente podemos combinar esto para ser un poco más ordenado y todo en una línea, solo voy a comentar eso fuera. Si estás usando corchetes como yo, puedes resaltar todo el código y luego comandos en barra inclinada hacia adelante. Para poner todo esto en una sola línea, podemos empezar con la misma variable. Yo sólo voy a copiar eso y pegar eso. Pero esta vez vamos a empezar con Math.Floor, por lo que el resultado se redondea a la baja. Entonces dentro de los corchetes, puedes poner en la matemática.Al azar, para que pegue eso dentro de ahí. El número aleatorio que generamos, queremos que se multiplique por 100. Así que vamos a deshacernos de la barra lateral para que podamos ver todos en una línea ahí, ejemplo, multiplicar 100, y asegurarnos de que toda esta sección hay entre los soportes matemáticos.Piso. Entonces fuera de los paréntesis podemos agregar nuestro plus uno, igual que hacemos en arriba allá. Guarde eso y todavía podemos usar el mismo document.write, y entonces ojalá, si vamos al navegador y actualizamos, aún debemos obtener el mismo resultado. Pero esta vez, es solo todo en una línea y se ve un poco más limpio. Ahí vamos. Por lo que espero que logres lograrlo tú mismo. Si no, no te preocupes. Sigue con el ejemplo que acabo de hacer y trata de entender exactamente lo que estamos haciendo, y te veré en el siguiente video. Echaremos un vistazo a los métodos de fecha y fecha de JavaScript. 19. Fechas y métodos de fijación de fechas: En este video, vamos a echar un vistazo a las fechas de JavaScript. Empecemos de la manera habitual y creemos una nueva carpeta. Simplemente voy a duplicar los mini-retos del último video y llamarlo Dates. Después abre tu editor de texto y luego arrastra la carpeta de fechas ahí dentro. Ahora el título va a ser fechas de JavaScript. Podemos simplemente eliminar el código del último video entre las etiquetas de guión. Para empezar, vamos a empezar con una forma sencilla de crear un nuevo objeto de fechas, y lo vamos a almacenar dentro de una variable. Empieza por crear una variable, y puedes llamarla como quieras. Voy a llamar a mi fecha de show. Entonces necesitamos establecer eso igual a una nueva fecha. Necesitas poner corchetes después de eso. Entonces podemos usar un document.write o cualquier otro método que prefieras mostrar la variable de show date, así que pon eso entre los corchetes, y luego un punto y coma. Ahí vamos, así que ahora obtenemos la fecha completa impresa en el navegador y obviamente obtendrás unas fechas diferentes ahí dependiendo qué día estés viendo este video, y tu zona horaria. Usando este objeto día, nos da el día actual, el mes, el día del mes, el año, la hora actual, y luego la zona horaria. Esta fórmula es bastante larga y muchas veces no queremos toda esta información. Te voy a mostrar a continuación, obtener y establecer métodos. Son más o menos lo que suenan, se usa un método get para obtener un cierto camino de la fecha. Para que podamos obtener las horas individuales, podemos conseguir el día individual, o los segundos, o la hora. Entonces también podemos usar métodos set los cuales se utilizan para establecer una ruta de la fecha, como establecer la hora actual o establecer la fecha actual. Empecemos echando un vistazo a los métodos get. Cada uno de estos consigue métodos te voy a mostrar, lo voy a almacenar dentro de una variable. Para empezar voy a establecer la variable llamada fecha, y luego establecer eso igual a una nueva fecha, comenzando con una D mayúscula, y luego los corchetes. Ahora tenemos la fecha actual. Podemos dividirlo en el día del mes. Nuevamente, no importa lo que llames estas variables, solo hazlas descriptivas. Voy a establecer eso igual a la variable de fecha que creamos, y luego pegarlo en, y luego usar punto, y luego obtener fecha. En realidad se puede ver de la autocompletar ahí. Esto te dará una idea de lo que estamos a punto de hacer. Obtén fechas y un punto y coma al final. Estamos creando un nuevo objeto de fechas, y luego solo obtenemos una propiedad individual cada vez. Yo sólo voy a duplicar esa línea. Esta vez lo voy a llamar el día de la semana, luego esta vez su fecha.GetDay. Entonces para obtener el mes, vamos a crear una nueva variable de mes. Probablemente podrías adivinar lo que estamos a punto de hacer aquí. Es fecha.GetMonth. También puedes conseguir el año en curso. Tenemos que conseguir año. Por cierto, puedes tener que simplemente copiar y pegar estos, o estoy usando comando o control D para duplicar entre paréntesis. Si el editor de texto que estás utilizando no se duplica, solo tienes que copiar y pegar. Después del año podemos conseguir las horas y luego minutos, fecha.GetMinutes. Entonces el último que quiero mostrarles son los segundos, así que date.getSeconds. Simplemente comentaremos estas dos líneas fuera, no las necesitamos. Ahora tenemos todas estas variables creadas y quizá queramos usar solo ciertas partes de la fecha. Por ejemplo, podemos querer crear una cadena, como la fecha de hoy es, y luego introducir el día, el mes y el año. Vamos a darle una oportunidad. Hagamos un documento.escribir. Entonces entre las citas, voy a crear una cadena de la fecha de hoy es y luego un colon. Pondré estos en líneas separadas para que sea un poco más legible. Queremos mostrar el día y luego el mes, y luego el año. Queríamos mostrar esto en el navegador, tal como está. Podemos poner algunas etiquetas de salto HTML ahí y luego terminar la cadena ahí, y luego necesitamos concatenar para unir las cadenas, solo usa el símbolo más. Debido a que cada una de estas palabras es una cuerda, rodearlos entre las comillas. Lo mismo con el año. Es bastante sencillo hacer esto, así que tenemos la cadena de día con un espacio y luego plus. Entonces el día es la variable llamada día de la semana. Podemos unirnos ahora a fin de mes. Tenemos que unirnos en la variable nombre del mes. Entonces el año, simplemente agregue el año. Podemos ver que nuestro código es bastante legible ahora porque hemos usado nombres de variables descriptivas. Asegúrate de hacer eso cuando puedas. Entonces, por último, solo necesitamos agregar al final una etiqueta de ruptura solo para que estén en líneas separadas y luego otra unión al final. Es necesario que se muestre así la etiqueta de ruptura. Entonces hazlo en la siguiente línea también. Copia eso, y eso nos lleva a nuestra siguiente línea, como puedes ver. No necesitamos eso. Después termina eso con punto y coma. Empezamos con una cuerda ahí, la fecha de hoy es, ponemos el etiquetado de break para entrar a la siguiente línea, y luego vamos a tener tres líneas separadas que muestran el día, el mes, y el año en curso. Guardemos eso y veamos si eso funciona bien en el navegador. Refresca eso. Entonces tenemos el día de hoy es, el número de día, el número de mes, y el año es 116, así que necesitamos cambiar eso. Ya hemos hecho el año. Tenemos que poner ahí el conseguir año completo. Ahí vamos. Por lo que ya es 2016. Espero que eso tenga sentido. Yo sólo voy a comentar esta sección ahora. Estos son los métodos get, y quiero pasar ahora a los métodos establecidos que se utilizan para establecer la fecha. Empecemos con una nueva variable llamada fecha establecida, y al igual que arriba, vamos a establecer eso igual a una nueva fecha. Entonces ahora podemos fijar algunas partes de la fecha. Entonces si quisiéramos establecer el mes de la columna, podríamos usar la variable set name, luego dot, y luego necesitamos establecer el mes y luego colocar el mes que quieres establecer dentro de los corchetes. Podemos establecer eso como 11, por ejemplo. Entonces si queríamos establecer el año, de nuevo, usa la variable de fecha establecida y luego punto set año completo. Puedes ajustar eso a lo que quieras. Voy a poner en 2020. Se puede ver que estos son bastante similares a los que usamos arriba, solo estamos reemplazando get con set. Vamos a comprobar si está funcionando con la escritura del documento. Entonces dentro del documento escribir vamos a usar la variable de fecha establecida. Por lo que echamos un vistazo más de cerca ahí, puede ver que tenemos el mes de diciembre. Ponemos en el mes 11, que en realidad es el último valor porque el mes set va del 0-11, por lo que 11 sería diciembre. Establecemos el año completo para que sea 2020, y se puede ver eso dentro del navegador ahí. No hemos tocado la hora, así que esa es la zona horaria actual ahí. Ahí vamos. Espero que eso tenga sentido. que tengan un poco de juego con lo que acabamos de ver. Gracias por ver, y te veremos en el siguiente video. 20. Sentencias If y comparación: Enhorabuena por llegar hasta aquí. Se trata de una nueva sección llamada Control Flow and Loops. En esta sección, estaremos echando un vistazo a algunos métodos nuevos como las declaraciones if else y estaremos echando un vistazo a los operadores, sentencias switch, y diversos tipos de bucles. Como de costumbre, lanzaremos uno o dos muchos retos ahí dentro, para que podamos poner en práctica lo que has estado aprendiendo y ver cómo funciona en ejemplos de la vida real. El primer video con el que vamos a empezar se llama si afirmaciones y comparación. En JavaScript, y muchos de nuestros lenguajes de programación, a menudo podemos lidiar con una gran cantidad de datos, como números y valores. A menudo necesitamos una forma de comparar más de un valor con otro y decidir sobre un resultado. JavaScript nos proporciona una forma de comparar operadores de comparación llamados. Entonces si prueba declaración para ver si una condición es verdadera. Si esa condición es verdadera, entonces ejecuta algún código. Echemos un vistazo a algunos ejemplos. Porque estamos en una nueva sección, queremos crear una nueva carpeta. Llamaré a este flujo de control de carpetas y bucles. Entonces queremos entrar en uno de los videos anteriores y simplemente copiar cualquiera de esos, y luego pegarlo justo para que tengamos un punto de partida. A continuación, cambie el nombre de este if sentencias y comparación. Entonces abre esto entre corchetes, o tu editor de texto. Simplemente arrástrelo allí y luego cambie el título en la página de índice. Mi caso es, si las declaraciones y la comparación, y luego eliminar el código entre las etiquetas de script. Ahí vamos. Eso tampoco lo necesitamos. Para empezar, vamos a echar un vistazo a una simple comparación sólo para comparar dos variables. Variable a igual a 10 y también variable b igual a 20. Vamos a empezar con una simple sentencia if sólo para comprobar si el valor de a y b es el mismo. Para empezar, usamos la palabra clave if, y luego un conjunto de corchetes, y después de eso, un par de llaves. Con una declaración if entre los corchetes aquí, ponemos a prueba una condición. En nuestro caso queremos probar si a es igual a b, así que vamos a poner eso ahí, entonces a, y luego tres iguales y luego b Si recuerdas, los tres iguales comprueban si los valores son igual valor y también igual tipo. Vamos a comprobar si a es igual a b, y luego si lo es, queremos hacer una escritura de documento y luego los imprime al navegador solo para hacernos saber que la condición es verdadera. Yo sólo voy a escribir condición es verdad y sólo hacerlo un poco más grande. Pongamos algunas etiquetas de encabezamiento de nivel 2 ahí. Entonces h2 antes y después, y luego abramos la app en el navegador y veamos qué pasa. Nuevamente, no se muestra nada en el navegador porque la condición no es cierta, porque a no es igual a b Si solo cambiamos ambos valores para que sean los mismos y luego refresquemos, ahora deberíamos conseguir que la condición del mensaje sea verdadera. El enunciado if está funcionando correctamente. Además de los tres iguales, hay muchas otras comparaciones diferentes que podemos usar. Ya mencionamos anteriormente sobre que el uso de dos símbolos iguales verificará si a y b es igual valor pero no igual tipo. Por ejemplo, uno podría ser una cadena y uno podría ser un número. Si queremos comprobar si los valores no son iguales, utilizamos un signo de exclamación y luego un símbolo igual. Vamos a cambiar eso para no ser iguales y aún debemos conseguir la condición es cierta, cosa que hacemos ahí. Esto comprueba el valor. Si quisieras comprobar el valor y el tipo, podríamos usar dos iguales y el signo de exclamación. Esto significa no igual valor o tipo. También podemos usar menos que o mayor que. Si a es mayor que b, que es, la condición sigue siendo verdadera. Si a era menor que b, ahora debería estar en blanco porque la condición es falsa. Combinar el menor que y mayor que con un símbolo igual significa si a es menor o igual a b, luego ejecutar este código entre las llaves, y exactamente igual con el mayor que. Si a es mayor o igual que b, la condición es verdadera. Vamos a refrescar eso. Esto es cierto porque a es mayor que b. Si b también era 20, por lo que eran iguales, también deberíamos conseguir condición es cierto. Bien. Entonces espero que eso tenga sentido. Sólo voy a mostrarles un ejemplo rápido de uso de cómo esto se puede utilizar en un programa de la vida real. Simplemente voy a comprobar si un usuario está conectado y también comprobar el nombre del usuario. Una declaración if podría comprobar si un usuario ha iniciado sesión y luego imprimir en el navegador un mensaje de bienvenida a ese usuario conectado. Con una variable como login, quiero establecer esto en un valor booleano de true. Esto puede ser verdadero o falso. Después una variable que almacena el nombre del usuario. Yo quiero ponerle el mío a Chris. Entonces al igual que antes, crearemos una declaración if. Si solo quieres comprobar si un usuario está conectado, solo podemos comprobar si ha iniciado sesión. No necesitamos usar ningún operador de comparación como es igual, porque esto ya está establecido en true. Abra la variable. Si el usuario está conectado, vamos a crear un mensaje para ese usuario con una escritura de documento. Esto puede ser tan simple, o tan complicado como quieras. Simplemente voy a crear un mensaje de bienvenida a ese usuario y luego agregar al final de ese mensaje de bienvenida el nombre de la variable del usuario. Esto debería decir, bienvenido Chris. A continuación, vamos a abrir el navegador. Ahí vamos. Recibimos el mensaje de bienvenida porque el usuario está configurado para iniciar sesión. Si cambias esto para que sea falso y luego vuelve a refrescar el navegador, deberíamos perder el mensaje porque ya no se cumple esta condición. Espero que todo tenga sentido ahora para ti. Si no lo hace, solo echa un vistazo a algunos de los ejemplos que acabamos de usar e intenta ponerte la cabeza alrededor antes de pasar al siguiente video, donde construiremos sobre las declaraciones if echando un vistazo a las declaraciones if else. 21. Declaraciones else y else if: Bienvenidos de nuevo, todo el mundo. En el último video, echamos un vistazo a si las declaraciones. Si las declaraciones comprueban si se cumple una condición, y luego si esa condición es verdadera, entonces ejecutamos algún código. A pesar de que si tuviéramos más de un resultado, necesitamos una forma de lidiar con eso. Podemos lidiar con eso usando una declaración else o una declaración else-if. Pongamos eso en una carpeta nueva. Duplicar el último video, de hecho, cuando número esto están en orden. Número 1, y entonces esto va a ser el número 2, esto es else y else-if. Después abre tu editor de texto, y luego cambia el nombre en la parte superior. Esto va a ser declaraciones else, y else-if, simplemente moviéndose hacia abajo entre las etiquetas de guión. En lugar de eliminar, esto que en realidad podemos hacer es construir sobre el último video para empezar. Nos registramos si un usuario está conectado. Si ese usuario está conectado, le enviamos un mensaje al usuario, pero esto no proporciona copia de seguridad en caso de que el usuario no esté conectado. Aquí es donde se puede usar una declaración else. Justo después de la llave rizada, entonces podemos escribir else y luego proporcionar un segundo conjunto de llaves, y esto es por la condición si el usuario no ha iniciado sesión. Podemos simplemente copiar el documento, pegar entre las llaves. Esta vez si el usuario no está conectado, sólo vamos a enviar un mensaje a ese usuario sólo para iniciarlo. Por favor, inicie sesión para ver página. Todavía tenemos la variable de login establecida en false, por lo que ahora deberíamos obtener el mensaje de inicio de sesión. Ahí vamos. Por favor, inicie sesión para ver la página, esto se utiliza como reserva en caso de que la declaración original no sea verdadera. Las declaraciones IF-else se usan con bastante regularidad en lenguajes de programación. Es un concepto realmente útil al que acostumbrarse. [ inaudible] declaración if-else, y puede que te estés preguntando qué hacer si hay una tercera opción o una tercera condición para cumplir, y esto es bastante sencillo. Podemos simplemente construir en general, y entre las declaraciones if-y las declaraciones else donde simplemente se usa un else-if. Crearemos un nuevo ejemplo. Basta con borrar todo eso. Voy a crear un ejemplo sólo para mostrarte cómo se usa esto. Esto se basa en la velocidad de un auto. Vamos a revisar una variable, que es el límite de velocidad. Por ejemplo, voy a establecer los límites de velocidad para que sean 70, y luego una segunda variable que es tu velocidad, y también pondré esto en 70 solo para empezar. A modo de ejemplo, vamos a imprimir un mensaje en la pantalla del auto. Crea un if-statement, y la if-statement quiere comprobar si tu velocidad, pon esa variable ahí dentro, es menor que el límite de velocidad. Pega ahí dentro, así que si tu velocidad que estás haciendo es menor que los límites de velocidad actuales, podemos crear un mensaje con derechos de documento, como, gracias por conducir de forma segura. Basta con quitar la barra lateral para conseguir un poco más de espacio allí, y luego podemos crear un else-if y luego los corchetes y luego las llaves. Si tu velocidad es mayor, solo copiamos esta condición en base a en el else-if, y cambia a mayor que. Si vas por encima del límite de velocidad, pongamos un sobredocumento justo ahí dentro, y esta vez digamos, por favor, despacio. Entonces sólo vamos a terminar esto con otra declaraciones como la copia de seguridad. Puedes poner más de una declaración else-if ahí si quieres, solo necesita ir recto después de la última llave rizada, pero asegúrate de que una declaración else esté al final. Como alternativa, si la velocidad es igual al límite de velocidad, solo pon un mensaje simple ahí como, cuidado, estás conduciendo a los límites de velocidad. No necesitamos poner corchetes ahí dentro con una condición, solo por esta vez porque solo hay una [inaudible] condiciones para cumplir. Hemos cubierto si la velocidad es menor o mayor que el límite de velocidad, el único resultado sobre posible que podemos obtener es si las velocidades son iguales, y esto está cubierto por la declaración else allí. Echemos un vistazo. Actualmente tienes el límite de velocidad para ser igual a tu velocidad, deberíamos recibir el mensaje cuidadoso al final ahí. Abramos esto. Tendremos cuidado de que estés conduciendo a los límites de velocidad. Cambiemos las variables. Te hemos puesto la velocidad para ser 60, deberíamos conseguir, gracias por conducir de forma segura. Refresca eso, y ahí vamos, dice el mensaje de agradecimiento. En el último a comprobar es si tu velocidad es mayor que el límite de velocidad, que obtienes el mensaje favor de ralentizar, que hacemos eso, así que eso es genial. Gracias por ver, y este es el final del video sobre las declaraciones else y las declaraciones else-if. En el siguiente video, los vamos a poner en práctica con un pequeño mini reto. 22. Mini desafío: Comprobación de la edad: Bienvenido de nuevo. Ahora, es tu oportunidad de dar declaraciones if else para ir con un mini reto. Es un reto bastante sencillo, si entendiste los últimos videos. No obstante, te da la oportunidad de teclear por tu cuenta sin mirarme, y de esa forma debería quedar un poco mejor en tu memoria. Basta con duplicar el último video sobre las declaraciones else-if, y entonces este es el número 3, y el mini reto se va a llamar corrector de edad. Después abre la app en tu editor de texto, arrastra la carpeta, y luego abre la página de índice, cambia el título a Comprobador de edad y elimina este código de eso, para que no engañemos. De acuerdo, entonces esto es bastante sencillo. Todo lo que quiero que hagas es crear algunas variables, una para una edad mínima y otra para tu edad actual Luego crea una declaración if-else, igual que usamos en el último vídeo.Luego haz un par de cheques. En primer lugar, comprueba si tu edad está por debajo de la edad mínima, y luego crea un mensaje para el navegador. Cuando nos busquemos, por favor regresa cuando tengas 18 años. Después un par de condiciones más como si tienes edad suficiente o si tienes cierta edad para revisar tu identificación. Dar el Ago que sólo utiliza cosas que hemos aprendido en el último video. No hay nada extra que necesites para intentar investigar o Google. Prueba eso y ve cómo se pone. Si te quedas atascado o si no te sientes lo suficientemente seguro como para probar esto aquí, solo sígueme. Voy a crear una variable de edad mínima. Yo quiero poner eso en 18. Entonces una variable, que es tu edad y van a ser 15, por ejemplo. A continuación, crea tu declaración if a continuación. Si prefieres poner todo esto vacío primero solo para asegurarte de que tienes todo en el lugar correcto. Al igual que esto, puede ser útil solo para asegurarnos de que no nos perdamos ningún tirantes o corchetes. Está bien. Entonces, en primer lugar, queremos comprobar si eres menor de edad. Verificamos la variable, YourAge. Si YourAge es menor que el minAge, crearemos un mensaje al usuario con el document.write. Dentro de los paréntesis, “Lo siento, por favor vuelve cuando tengas 18". Entonces voy a crear una declaración else-if. Voy a comprobar si tu edad es de 25 años o menos, luego crear un mensaje para suministrar alguna identificación. Si tu edad actual es mayor o igual a 18, entonces los dos símbolos ampersand para comprobar también la segunda condición. Entonces YourAge es menor o igual a 25. Queremos que sea un símbolo mayor que el. Entonces si tienes más de 18 años, pero menos de 25, crearemos un nuevo mensaje para suministrar alguna identificación. Esta vez el mensaje es “Favor de suministrar identificación”. Tenemos todas las condiciones importan, uso [inaudible] es igual a 25. El comunicado else al final proporciona el respaldo si el usuario tiene más de 25 años. En ese caso solo crearemos un document.write solo permitiendo que el usuario entre. Por favor ingrese y luego guarde eso. Vamos a probar esto en el navegador y ver esto todo funciona. Actualmente el usuario es menor de edad. Deberíamos recibir el mensaje lamentable de la declaración If, que hacemos, “Lo siento, por favor regresa cuando tengas 18 años”. Si el usuario ahora está entre 18 y 25 años, deberíamos obtener el mensaje de identificación favor de contestar. Entonces, por último, si el usuario tiene más de 25 años, se debe permitir la entrada al sitio web. Entonces refresca, y ahí vamos. Obtenemos el mensaje final de favor entrar. Tan bien hecho si logras hacer eso por tu cuenta, si fue algo con lo que hiciste lucha, no te preocupes.Ahora seguiste junto a mí, puede ser hacer un salto un día o dos y probar eso de nuevo tú mismo y ver si puedes trabajar la próxima vez. Ambos ahora, gracias. Te veré en el siguiente video. 23. Operadores lógicos: Por lo que hemos mirado el uso de declaraciones if else. Tenemos operadores de comparación como mayores que, menores o iguales a. En este video, vamos a echar un vistazo a los operadores lógicos. Los operadores lógicos también se utilizan a menudo con las declaraciones if else. Echemos un vistazo a cómo podemos usarlos. Empecemos con una carpeta. Este es el número 4. A esto se le llama operadores lógicos. Entonces abre esa carpeta entre paréntesis. Simplemente deja eso ahí dentro. Entonces de nuevo, empieza de la misma manera que de costumbre con un nuevo título de operadores lógicos, y luego borra todo lo que hay entre las etiquetas de script que no necesitamos. Entonces para empezar, voy a crear un par de variables con las que podemos trabajar. Entonces simplemente vamos a llamar a este número 1 y establecer que sea 10, y luego una segunda variable, el número 2. Voy a poner este para que sea 20. Entonces lo que vamos a estar viendo en este video es usar el y que son los dos ampersands. Miraremos en absoluto, que son las dos barras verticales o las tuberías, y mirando el signo de exclamación, que significa que no. Entonces vamos a empezar con y. Voy a combinar esto con una declaración if. Por lo tanto, vamos a crear una simple declaración if. Vamos a crear document.write solo diciendo que la condición es verdadera, y en realidad vamos a poner algunas etiquetas h2 alrededor de estas, así que solo un poco más grande. Entonces empecemos con un padecimiento que es cierto. Entonces si el número 1 es igual a 10, entonces esa es la condición correcta es verdadera para el navegador. Ahí vamos. Entonces eso es cierto. Si quisiéramos comprobar si más de una condición era cierta, podemos usar el operador lógico y. Por lo que podemos probar una segunda condición. Entonces esto es si el número 1 es igual a 10, y también si el número 1 es menor a 20, y ambas condiciones son verdaderas. Entonces si tocamos refrescar, miramos la condición es verdadera declaración. Entonces esa es una buena manera de comprobar si más de un valor necesita ser cierto para desencadenar una acción. Así como y, si sólo quisiéramos comprobar si una de estas afirmaciones era cierta, podemos usar las dos barras verticales o las dos tuberías. Ahora sólo una de estas partes necesita ser cierta para que desencadene bien este documento. Si el número 1 es igual a 10, o el número 2 es igual a 10. Entonces ahora solo el número 1 es verdadero y el número 2 es falso. Entonces refresca, y ahí vamos. Por lo que conseguir condición es cierto. Pero si cambiáramos esto para que sean dos condiciones falsas, ese texto desaparece ahora. Al siguiente vamos a mirar no. Si recuerdas desde antes el curso, miramos a algunos de los operadores que podrías utilizar, como menos que y mayores que. Estos se pueden combinar con el signo de exclamación, que hace exactamente lo contrario. Entonces, más que el menos que símbolo, esto simplemente significaría no menos que. Entonces, solo probemos esto en nuestra declaración if y echemos un vistazo. Entonces, solo eliminemos un poco de esto. Entonces comenzaremos con una declaración verdadera. Entonces si el número 1 es menor al número 2, que es, deberíamos conseguir ahí el texto, pero si quisiéramos hacer exactamente lo contrario, haría falsa esta condición. Simplemente combinaremos eso con el símbolo no. Entonces si el número 1 no es menor a 2. Entonces ahora si nos refrescamos, deberíamos ver que el texto desaparece, y no tiene que ser el menor que o mayor que el símbolo. También podemos usar el símbolo igual. Entonces si el número 1 no es igual a 20, entonces imprime esta declaración. Ahí vamos. Entonces eso solo quería que dos operadores más buscaran, lo cual puede que te resulte útil, y te veré en el siguiente video donde echaremos un vistazo al uso de sentencias de switch, y echaremos un vistazo a cómo podemos usarlas en JavaScript para manejar resultados múltiples o múltiples casos. Entonces gracias y nos vemos ahí. 24. Declaración de cambiador: En este video, vamos a echar un vistazo a las declaraciones de cambio. Las declaraciones de cambio funcionan de manera similar a las declaraciones de si else, que miramos antes en la sección. En declaración conmutada, proporcionamos múltiples resultados o casos. Después, cuando una expresión coincide con uno de estos casos, se realiza una acción. Echemos un vistazo a cómo funcionan las declaraciones de cambio en JavaScript. Vamos a crear una carpeta nueva, y es el número 5, y se llama switch-statement. Después se abrió en nuestro editor de texto, y luego arrastra dentro de la carpeta switch-statement, luego abrir la página de índice. Yo lo haré un poco más grande para que puedas verlo. Después volveremos a cambiar el título para cambiar las declaraciones. Después quita todo esto entre las etiquetas de script. Con sentencia switch cuando estamos comparando un enunciado, o en nuestro caso, vamos a crear una variable. Voy a llamar a esta variable el mes, y luego cuando establezca esto en enero, y luego para crear un enunciado de switch, usamos la palabra clave switch y luego abrimos algunos corchetes, y luego las llaves. Básicamente se ve un poco como un if declaraciones fuera del escenario. Al igual que las declaraciones if, pasamos dentro de los corchetes, la condición que queremos comprobar. En nuestro caso queremos comprobar la variable de mes. Entonces vamos a proporcionar múltiples casos contra los que queremos comprobar, y usamos la palabra clave de caso. Entonces empezamos a darle algunos resultados que queremos comprobar. Si comprobamos si el valor un enero, y luego usamos dos puntos, y si es enero, podemos proporcionar un desenlace. Voy alrededor de algún código. Yo sólo voy a hacer un documento. escribir, y ahora está pasando un mensaje ahí dentro, como feliz año nuevo. Entonces después quieres usar la palabra clave break, y cuando una expresión se hace coincidir con el caso particular, en este ejemplo, enero coincide con el caso, porque esto es coincidente, entonces usamos la palabra clave break, y vamos a poner esto después de cada caso, y tan pronto como se cumple la condición, entonces rompe las declaraciones de cambio. Pero dijimos antes que las declaraciones de cambio son útiles para comprobar muchos resultados diferentes. Simplemente hacemos esto con más casos. Pongamos algunos meses más que sumamos ahí. Pongamos en julio ahí dentro y luego un document.escribir. Esta vez debería poner una mitad del año. Entonces la palabra clave break otra vez, justo después del document.write, si esta condición se iguala, asegúrate de que todos los casos entre las dos llaves llaves de por qué empiezan a tropezar con problemas. Podemos seguir adelante con todos los que quieras. Voy a crear uno para diciembre, y luego un dos puntos, de hecho, sólo copiaremos este document.write, y luego pegarlo en. Esta vez para diciembre, vamos a poner en, casi el año nuevo y después el descanso, justo después. Así es esencialmente como funciona una sentencia switch. Pasará por los casos individuales hasta que se empareje la sentencia, y luego se romperá de la sentencia switch. Pero, si no se puede encontrar un resultado, necesitamos proporcionar un caso por defecto. Este es un código predeterminado para ejecutar, se sabe de que los casos son coincidentes. Valores predeterminados y dos puntos, y luego está poniendo el código por defecto ahí. Yo sólo voy a poner en el mes es, y luego voy a poner la variable mes ahí dentro. Si contamos mucho una de las declaraciones arriba, y si no se puede imprime el mensaje, sólo se va a conseguir el valor predeterminado, el mes es, y luego en nuestro caso en enero. Entonces guarde eso, y luego se abre en el navegador. Porque conseguimos el mes como enero, pusimos el caso para ser feliz año nuevo, que es sólo el primero que hay. Si cambiamos el mes a julio, deberíamos conseguir la mitad del mensaje aéreo. Refresca eso, y aparece a mitad del año. Sólo intentémoslo en diciembre. Cuánto sacan el tercer caso de casi el año nuevo y refrescan. Se ven muy bien, y si ponemos un mes, que no es uno de estos casos, así que intentaremos marzo. Ojalá, deberíamos obtener el caso por defecto, que es el mes es, y luego marzo. Ahí vamos. También podemos poner en tantos casos como quieras, e incluso puedes proporcionar más de un caso con la misma pieza de código para ejecutar. Por ejemplo, si lo quieres, otro caso ahí, y queremos que diga casi el año nuevo para noviembre y diciembre, eso no es un problema. Simplemente podemos hacer nuestros casos así, y luego este document.write, se ejecutará si el caso es noviembre o diciembre. Sólo intentemos eso. Entonces cambia la variable a noviembre. Casi el año nuevo, y eso debería funcionar igual para diciembre también. Todavía casi el año nuevo, sólo intentaremos uno más. Entonces octubre, no tenemos caso para octubre, así que deberíamos conseguir el valor predeterminado, que está abajo al fondo, refrescar, y ahí vamos. Por lo que el mes es octubre. Espero que eso tenga sentido y espero que entiendas que las declaraciones de cambio son realmente útiles para cuando queremos comprobar una condición contra muchos posibles resultados diferentes. En el siguiente video, nos alejaremos de la teoría. Pasaré a un mini reto donde podrás empezar por tus habilidades que has aprendido, en la sección en práctica. 25. Mini desafío: Juego de alto o bajo: Bienvenido de nuevo. En este video, vamos a estar tomando un descanso de la teoría y creando un mini reto, que va a ser un juego simple, superior o inferior, y básicamente va a consistir en un número aleatorio generado por computadora entre uno y 10. Entonces necesitamos adivinar si el número que generará la computadora es mayor o menor a cinco. Vamos a crear una página web sencilla con un par de botones sobre los que esté más alto o más bajo y luego necesitamos crear una pantalla que muestre si la conjetura es correcta o no. La mayoría de las cosas que necesitas para este reto ya se han cubierto en este apartado. Lo único que aún no hemos mirado es onclick eventos y eso es básicamente cuando un usuario hace clic en el botón de la página web y eso desencadena una función o un evento. Esta función contendrá el código que compara nuestra conjetura con el número generado por la computadora. Entonces si te gustaría dar el a go tú mismo, siéntete libre de hacer eso. O voy a empezar y empezar con el HTML y mostrarte los eventos onclick. Entonces si lo prefieres, puedes seguir conmigo, abrir SoloLearn, y luego dar el JavaScript para ir al final o seguir conmigo derecho hasta el final si lo prefieres. Entonces empecemos con su propia carpeta. En la sección de flujo y bucle de control, podemos duplicar el último video y es el número 6. Tan alto, juego más bajo. Después abre tu editor de texto y luego cambia su título, juego superior o inferior. No necesitamos la declaración de cambio del último video. Así que solo elimina eso y vuelve a una página de índice HTML básica. Voy a empezar por crear la página web de la interfaz de usuario. Voy a iniciarlo con un div. Voy a conseguir esta clase, bueno, esta es una clase Bootstrap la cual sostendrá todos los divs en los que estamos trabajando. Hará que destaque con un color de fondo. Además, quiero usar la clase de text-center, y esto tirará todo el texto al centro de la página. Yo sólo voy a poner algunas instrucciones en la página con la que empiezas. Entonces es título primero, superior o inferior y luego un rumbo de nivel 2, que son las instrucciones sobre cómo jugar. Así es mi número 5 o menos o superior a cinco. Después algunas etiquetas p abajo. Esto sólo va a mostrar el rango. El rango para el número aleatorio es 1-10. Entonces debajo de eso necesitamos un div vacío. Entonces solo voy a poner un rumbo de nivel 3 ahí. En un principio no habrá contenido entre estas etiquetas porque vamos a poner eso en usar el JavaScript. Aquí sería donde se muestra el texto para decir si ganaste o perdiste. Vamos a darle un ID para que podamos etiquetar eso con el JavaScript más adelante. Entonces voy a llamar a la mía TextField. Solo echemos un vistazo a eso y veamos cómo se ve. Tenemos el nombre en las instrucciones. Ahora necesitamos crear un par de botones a continuación. Uno con mayor, y otro con menor. Pongámoslo en una entrada. Por lo que el tipo de entrada es botón. Añadamos algunas clases de Bootstrap a eso solo para que se vea un poco más bonito. Entonces btn y btn-info, y eso va a crear un bonito botón azul para nosotros. El valor que necesitamos, este va a ser el texto que aparece dentro de uno. Pongamos este como más alto. Después mencionamos al inicio de este video que vamos a echar un vistazo a los eventos onclick. Veremos estos con un poco más de detalle más adelante en este curso. Pero por ahora solo necesitamos saber si agregamos los atributos o onclick. Entonces podemos pasar en nombre de una función. Cuando se presiona este botón, entonces desencadena la función. Pongamos el nombre de la función. A pesar de que aún no hemos creado la función, todavía podemos ponerla. Entonces porque es una función, pon los corchetes rizados después, justo de la misma manera que normalmente llamaríamos o invocaríamos una función. Crearemos nuestra función pronto. Ese es el botón más alto. Copiar y pegar o duplicar nuestras entradas y eso hará que el botón inferior y cambie la función esta vez para bajar. Entonces echemos un vistazo. Genial. Ahí están nuestros botones más altos y más bajos. Simplemente lo último que quiero poner para la interfaz de usuario es un tercer botón, que es solo un botón Play Again. Después de cada caso podemos presionar “Play Again” y se volverá a cargar la página. Pondré esto en su propio div, así aparece a continuación. El div, también le daremos a esto la clase de bien text-center, igual que este div anterior y luego una entrada con un tipo de botón y luego algunas clases Bootstrap de btn btn-info. El valor es Play Again. Después los eventos onclick y luego llamaremos a este reset con los corchetes después. Actualicemos el navegador y echemos un vistazo. Eso se ve mejor ahora. Ahora llegamos al escenario donde se completa el HTML o la interfaz de usuario. Si te gusta darle un go a eso y rematarte, siéntete libre de hacerlo. Todo lo que necesitas hacer es crear un número aleatorio y luego crear algunas funciones las cuales se activan cada vez que se presionan estos botones y luego para comprobar contra el número generado aleatoriamente. Entonces dale una oportunidad, si no, solo sígueme. Volvamos al editor de textos. Voy a empezar a trabajar entre las etiquetas de script porque sólo necesitamos hacer el JavaScript ahora. Para empezar, obtendremos el número generado aleatoriamente. Entonces pondremos eso dentro de una variable llamada ComputerGuess y esto va a ser una math.random. Si recuerdas de hace un par de videos, math.random genera un número aleatorio entre cero y uno. Porque queremos 10, multiplicemos este valor por 10. Entonces necesitamos redondear ese número hacia arriba. Entonces cambiemos el ComputerGuess ahora para ser igual a math.ceil. Esto redondeará y luego pasará dentro de los corchetes, la variable que queremos redondear, que es ComputerGuess. Ahora solo imprimamos esto en la consola y comprobamos que todo funciona correctamente con un registro de consola, y pondré dentro del ComputerGuess, y ojalá debamos conseguir un número aleatorio entre uno y 10. Entonces entra a las Herramientas de Desarrollador y ahí vamos. Tenemos el valor de siete dentro de la consola y luego refrescar y como un 4, 9, 9, 9, 9 otra vez y un 1, un 2. Eso parece estar funcionando bien. Vamos a deshacernos de las Herramientas de Desarrollador y podemos seguir adelante. Podemos quitar el registro de la consola ahora no necesitamos eso. Dentro del HTML creamos los eventos onclick. Voy a empezar con la función superior porque llamamos a la función, pero aún no la hemos declarado. Volver entre las etiquetas de guión. Esperemos que puedas recordar cómo crear una función usando la palabra clave function, luego el nombre de la función con los corchetes. ¿ Qué queremos que haga esta función? Bueno, queremos que compruebe si la conjetura de la computadora es mayor a cinco. Vamos a crear una declaración if ahí dentro, si la conjetura de la computadora es mayor que cinco. Ahora queremos mostrar un mensaje. Si recuerdas, creamos una etiqueta h3 vacía con un ID de TextField. Por lo que podemos usar JavaScript para agarrar este div vacío o encabezado vacío y luego insertar algo de texto ahí. Entonces document.getElementById, y el ID que queremos es TextField y luego queremos usar el innerHTML. Entonces selecciona innerHTML, voy a establecer que sea igual a You Gana. Si el usuario hace clic más alto y la conjetura es mayor que cinco, el usuario gana. De lo contrario, vamos a copiar este document.getElementById, lo contrario y luego las llaves. Entonces si la conjetura es menor a cinco o cinco en sí, entonces podemos agarrar el encabezado TextField y esta vez imprimir un texto, Usted pierde. Eso también creará la función superior y ahora necesitamos crear la función si se pulsa el botón inferior. Porque esto va a ser bastante similar, podemos copiar la función que acabamos de crear y luego cambiaremos esto a bajar. Esta vez, si la conjetura de la computadora es menor o igual a cinco, entonces el usuario gana. En caso contrario, el usuario pierde y se mostrará el mensaje. Ahora tenemos la funcionalidad si la conjetura es mayor o menor. Ahora solo necesitamos trabajar con el botón de reinicio solo para borrar la pantalla o para refrescar la pantalla cada vez que el usuario quiera volver a jugar. Esta va a ser una función sencilla, pero es algo que aún no hemos mirado del todo en este curso. Entonces función reset, y luego para volver a cargar la página web, recortamos la window.location.reload, y luego los corchetes después. Cada vez que se presiona este botón de reinicio, la página web se actualizará con esta línea de código. Guardemos eso y echemos un vistazo y actualicemos el navegador. Empecemos con más alto, así ganas, juegas de nuevo, bajas, pierdes. Probemos un par de veces más para que pierdas. Ganas, ganas, pierdes. Eso parece estar funcionando bien. Esa es la funcionalidad básica o trabajar para el juego. Si quieres llevarlo ese poco más allá, cuando la conjetura del usuario es incorrecta y pierdes, puedes entonces poner algo de texto ahí, que muestra el número aleatorio generado por la computadora, solo para que puedas comprobar qué fue eso. Pero por ahora, estoy tratando de dejar ahí este juego, y gracias. Espero que hayas logrado hacer al menos un poco más tú mismo y únete a mí en el siguiente video donde echaremos un vistazo a los loops y cómo se usan en JavaScript. 26. Bucle while: Los bucles son realmente populares en muchos lenguajes programadores, y JavaScript no es una excepción. En estos próximos videos, estaremos viendo los bucles For, While loops, y Do While. No te preocupes si esto no es familiar. Echaremos un vistazo a cómo funciona exactamente cada uno, empezando por el bucle While de este video. Los bucles pueden ser realmente útiles y nos puede ahorrar mucho tipaje repetitivo. Empecemos con su propia carpeta, y este es el número 7. Voy a llamar a éste, mientras bucles. Vamos a abrirla entre paréntesis y arrástrela y renombrar estos bucles While. Déjenme deshacerme de todos estos del último video, y también de todo el HTML de abajo. Empecemos con un bucle básico While. Utilizamos la palabra clave while, y luego los corchetes, y luego las llaves. Esto podría empezar a parecerte un poco familiar. Este es básicamente el mismo diseño que las sentencias switch y las declaraciones if/else que miramos anteriormente. Esperemos que no sea demasiado desconocida. Los corchetes después también funcionan de la misma manera las sentencias if-ya que en pasamos una condición a los corchetes, y mientras esta condición es cierta, y luego ejecutamos algún código en el medio, y este código sigue en bucle o repitiendo hasta que ya no se cumpla esta condición. Si bien esto es cierto, necesitamos hacer esto o lo que sea que esté entre las llaves. Pongamos un ejemplo básico dentro de este bucle While y empecemos. Vamos a necesitar crear una variable. Esta variable, voy a llamar a i, que es un nombre de variable bastante común para usar con el bucle. Pero puedes llamarlo lo que quieras. Voy a establecer el valor inicial de i para ser igual a uno. Si bien yo es menos de 10, queremos hacer algo dentro de los aparatos ortopédicos. Vamos a mantenerlo sencillo con una escritura de documento. Queremos escribir en el navegador el valor de i cada vez que buceamos, y luego solo para que aparezca el valor de i en su propia línea, voy a poner una etiqueta de break dentro de ahí, y luego i++. Esto podría parecer un poco extraño pero ¿qué estabas haciendo? Es que estamos estableciendo el valor de i para ser uno, y luego mientras i es menor que el valor de 10, que actualmente es, entonces vamos a imprimir a la pantalla el valor de i. Para empezar, se imprimirá el número 1 y luego vez que recorremos este código, será i++. La próxima vez que se dé la vuelta el bucle, porque estamos haciendo un i++, entonces me pondré en dos y luego volveremos a recorrer e imprimiremos dos. Entonces esto se incrementará de nuevo a tres y esto seguirá sucediendo hasta que yo sea menor de 10, o en nuestro caso conseguiremos el número 9. Por lo que deberíamos ver en la pantalla impresa número 1 hasta el número 9. Echemos un vistazo en el navegador. De acuerdo, ahí vamos. Obtuvimos el valor del 1-9, y debido a que también romperá la línea objetivo, cada uno de estos valores está en su propia línea. Pero sólo una pequeña palabra de advertencia al usar While loops, es puede ser bastante fácil chocar el navegador si no los hacemos correctamente. Si sacamos el i++ de ahí, así que cada vez que se ejecute este bucle Mientras, el valor de i siempre será uno. Entonces crearemos un bucle infinito el cual nunca terminará porque siempre seré menor de 10 y esto hará que se bloquee el navegador o tu programa. Ten mucho cuidado de que aumentemos en cada bucle. Otra forma popular de usar bucles es recorrer una matriz y luego imprimir todos los valores de la matriz. Vamos a mostrar un ejemplo de eso ahora. Crea una matriz llamada alimentos y lo estableceremos de la manera literal. Simplemente agregue algunos alimentos dentro de la matriz, separados por comas, lo que pasta, pizza, y pescado. Debido a que el índice de matrices comienza en la posición cero, solo voy a cambiar la variable de i para que sea cero. Si recuerdas de la sección de matriz, podemos imprimir el valor de la matriz. Hagamos una escritura rápida de documento y luego pasamos en el nombre de la matriz. Si quisiéramos imprimir un elemento individual dentro de la matriz, podríamos seleccionar el índice de bytes numéricos. Si quisiéramos imprimir pasta, eso es índice cero. Simplemente comentaré esto y luego imprimiré. Es así como obtenemos el valor de una matriz. Pero si quisiéramos imprimir todos los valores de la matriz en la pantalla, solo descomentemos esto por ahora. Porque estamos usando un bucle, queremos pasar al bucle el número de índice, así que saquemos eso de ahí. Pega eso entre corchetes. No sólo queremos seleccionar la posición cero, queremos establecer que sea i, porque queremos recorrer y aumentar esto por uno cada pasada del bucle. En lugar de imprimir el valor de i, queremos imprimir el contenido de la matriz. Queremos imprimir los alimentos y el número de alimentos es el valor de i Lo que pasará ahí es que se ejecutará el bucle y el bucle comenzará con el valor de cero, que es pasta. Entonces imprimiremos en la pantalla el valor de la pasta y luego me incrementaré a una, que cambie a una, que es el segundo índice, así que ese es el valor de la pizza. Entonces se imprimirá pizza en la pantalla y eso volverá a dar vueltas, y yo se incrementará al número 2 que es pescado, así que 0, 1, 2 y luego se imprimirá pescado en la pantalla. Entonces el bucle terminará porque esos son todos los valores de la matriz. Empecemos de nuevo con cero, guardemos eso, y actualicemos el navegador. Ahí vamos, así que ahí están nuestros valores libres de la matriz, y así es como funciona un bucle While. Gracias por ver, y pasaremos ahora al siguiente video. Echaremos un vistazo a una ligera variante del bucle While, y esto se llama bucle Do While. 27. Bucle Do while: En el último video, echamos un vistazo a while loops. Este video se trata de una ligera variante del bucle while, y esto se llama un do while loop. Funciona de manera similar, pero con apenas unas sutiles diferencias. Vamos a crear una nueva carpeta. Duplicamos mientras bucles. Este es el número ocho y se llama do while loops. Después abre cualquier editor de texto y luego crea un nuevo título. Así que lo hacen mientras bucles. Simplemente deja este código por ahora, podemos reutilizar algunas de estas partes. tanto que, el bucle while del último video siempre se ejecutará mientras esta condición es verdadera, un bucle do-while siempre se ejecutará al menos una vez primero y luego comprobará si la condición es verdadera antes de continuar. Tenemos la palabra clave do y luego dentro de las llaves. El código dentro de aquí es siempre, corre una vez al inicio, antes de comprobar si alguna condición es verdadera. Haga con este código y luego comprobamos la condición usando el bucle while. Entonces si esta condición es verdadera, el código seguirá ejecutándose y si es falso este código solo se ejecutará una vez y se detendrá después de eso. Eliminemos el código del último video. Vamos a crear un ejemplo. Empezaremos con una variable, por lo que volveremos a utilizar el nombre de la variable de i. Variable i es igual a uno. Entonces hagamos un documento. No escribas ahí dentro, solo imprimiremos el valor de i. nuevamente las etiquetas de break. Entonces al igual que el bucle while, vamos a incrementar en uno. Después dentro de la sección while, dentro de los corchetes pondremos la condición. Si bien i es menor de 10, seguiremos recorriendo e imprimiendo el valor de i Guardémoslo. Esta condición es cierta, por lo que esto seguirá imprimiendo los valores hasta nueve, que obtienes del lado izquierdo ahí. Volvamos atrás, si la condición es en realidad mayor a 10, deberíamos obtener el valor de i impreso, que es uno, pero no devolverá un segundo valor porque la condición es falsa. Ahora sólo vamos a conseguir uno impreso en el navegador, porque un bucle do while siempre se ejecuta una vez. Eso es todo lo que hay a ello. Un bucle do-while es bastante simple de entender si ya obtienes el concepto de loops while. Gracias. En el siguiente video pasaremos a otro tipo de loops, que es el for loop. Gracias y nos veremos allí. 28. Bucle for: Bienvenidos de vuelta chicos. Este video es todo sobre el JavaScript for loop, y este es el tercer y último tipo de bucle que estaremos viendo en esta sección. Si entendiste cómo funciona el bucle while y el bucle do while funciona de videos anteriores, no deberías tener ningún problema para entender cómo funciona un bucle for. Empecemos con su propia carpeta en la sección Control Flow, y este es el video número 9: para bucles, y luego vamos a abrirla entre Brackets, y luego cambiar el título a For loops y podemos dejar este bucle para una referencia. Para bucles son útiles cuando sabemos cuántas veces queremos repetir ese bucle. En tanto que un bucle while, se ejecutará hasta que una condición ya no sea verdadera. En un bucle for, necesitamos decir cuántas veces se ejecutará. Empezaremos un bucle for con la palabra clave for, y luego el aspecto inicial bastante familiar del resto de los videos. Utilizamos los corchetes y luego un conjunto de llaves. En un bucle while o un bucle do while, establecemos la variable y esto se establece fuera del bucle. Al usar un bucle for, necesitamos poner tres valores diferentes entre los corchetes. El primero es el valor inicial de la variable. Yo quiero usar, i una vez más y los tres valores necesitan separarse con punto y coma. El segundo valor es una condición contra la que queremos probar. A modo de ejemplo, queremos ejecutar el bucle mientras i es menor de 10, y luego un punto y coma, y al igual que los bucles anteriores, podemos usar prácticamente lo que hay aquí, podemos usar iguales o cualquiera de los operadores. El tercer valor va a ser nuestro incrementador. Nuevamente, voy a usar i plus para incrementar el valor por uno en cada bucle. También podemos utilizar el mismo documento escrito del último video. Entonces pon eso dentro de los tirantes rizados. solo podemos eliminar esto por ahora. Así se ve un bucle for. Inicialmente establecemos el valor para que sea uno y el bucle seguirá funcionando mientras el valor de i es menor a 10 y con cada bucle posible, i se incrementa en uno. Por lo que deberíamos obtener los valores de una derecha a nueve impresos cuando abramos esto en el navegador. Ahí vamos. Tenemos de uno a nueve, tales están funcionando correctamente. Entonces al igual que while loops, también podemos usar un bucle for para recorrer los valores de una matriz. Echemos un vistazo a cómo podemos hacer eso en un bucle for. Usemos nuestro ejemplo de alimentos que miramos eso en el bucle while. De nuevo, voy a poner pasta, pizza y luego pescado, y luego crear el bucle for al igual que usamos arriba. Declaremos el valor de i inicialmente, por lo que i se establece en cero porque el índice de cero es el primer valor de una matriz. Entonces una vez que eso comienza en cero, y luego el número de veces que queremos recorrer es igual al número de valores dentro de la matriz. Entonces si bien i es menor que foods.length, y puede que te estés preguntando por qué estamos usando menos que igual a la longitud de la matriz, bueno eso simplemente porque la propiedad length comienza en uno en lugar de cero, entonces por eso necesitamos hacer eso, y luego un punto y coma y el tercer valor es nuestro incrementador, así que i plus y luego vamos a establecer documento escribir y luego queremos imprimir el valor de la matriz de alimentos, y luego dentro de los corchetes un pase en i Inicialmente i se establece en cero, que es el valor de la pasta, y luego vamos a recorrer y voy a ser incrementado y luego ser el valor de uno, que es pizza, y luego el tercer y último bucle, voy a ser establecido en dos, que es el tercer valor de los peces. Vamos a correr eso ahora con la etiqueta de ruptura, así que todos están en líneas separadas. Rompe etiqueta ahí y luego vamos a refrescar eso en el navegador, y ahí están nuestros tres valores de pasta, pizza y pescado. Ahí vas. Es así como funciona un bucle for en JavaScript. En el siguiente video, estaremos echando un vistazo a usar estos en un mini reto. 29. Mini desafío: Guía telefónica: Bienvenido de nuevo. En este video, vamos a echar un vistazo a un mini reto, cual va a poner en práctica los for loops que utilizamos en el video anterior. En este mini reto se va a tratar de crear una sencilla libreta telefónica. El directorio telefónico va a imprimir los valores de todos tus nombres de amigos en una matriz. Se va a ordenar en orden alfabético. De nuevo, me gustaría si pudieras probarlo tú mismo y ver hasta dónde llegas antes de seguir conmigo. Sólo intenta que eso funcione si es posible sin mi ayuda. Pero no te preocupes si es algo con lo que luchas. Puedes seguirme conmigo al final, y te mostraré una forma de hacerlo. Vamos a crear la carpeta para este proyecto. Este es el número 10. Yo quiero llamarlo el reto de la agenda telefónica. Entonces abre esto entre paréntesis. Después establece el título, desafío de la libreta de teléfonos y comienza con una etiqueta de guión en blanco. En este reto, voy a empezar con la creación de una matriz. El array va a sostener los valores de tus amigos. Porque queremos usar JavaScript para ordenar estos en orden alfabético. Cuando coloque los valores dentro de la matriz, intente no ponerlos en orden alfabético. Porque queremos que JavaScript haga esto sigue. Comience con una matriz. Voy a empezar con Chris, sólo voy a poner valores de tantas personas dentro de eso como quieras. Voy a empezar con cinco valores. Sólo para que empecemos con. Igual que eso. Entonces voy a usar un bucle for, que miramos en el último video para recorrer todos los valores y luego imprimirlos a la pantalla. Empecemos con el bucle for y luego simplemente imprimamos los valores de la matriz en el navegador. Voy a estar inicialmente establecido en cero, que es el primer valor de la matriz. Entonces queremos que el bucle siga adelante. Si bien estoy menos que los nombres array.length. Entonces en cada paso del bucle queremos incrementar yo por uno. Vamos a darle una oportunidad a ver si funciona. Hagamos una escritura de documento en el navegador. Entonces echemos un vistazo a los nombres, y luego yo Veamos qué tenemos ahora. Ahí tenemos, Chris, Paul, Mike, Andrew, y Dave. Están todos los cinco valores de nuestra matriz, lo cual está bien, pero no se ve muy bien y también queremos ordenar estos para que estén en orden alfabético. Empecemos ordenándolos alfabéticamente. Actualmente tenemos todos nuestros nombres almacenados en la variable de nombres. Tenemos que establecer estos para que sean alfabéticos. Eso lo hacemos con nombres. Entonces usamos el método de ordenación. Ahora va a estar usando un orden alfabético cuando nos refresquemos, ahí vamos. Eso funciona bien. Tenemos a Andrew, Chris, Dave, Mike y Paul. Eso es todo en orden alfabético. Tan sólo para darle un poco de estilo a este proyecto, voy a añadir algunas pre tags. Voy a añadir estos justo antes y luego también quiero añadir un poco después. No olvides los símbolos más en el medio estableceremos la línea inclinada hacia adelante. Veamos cómo se ve esto ahora. Eso ahora es un poco más legible. Tenemos todos nuestros nombres impresos en orden alfabético y con un poco de fondo a cada valor. Si tienes tan lejos, bien hecho. Yo sólo quiero agregar una cosa más sólo para terminar esto. Yo solo quiero agregar un número junto al nombre de cada persona. 1, 2, 3, 4, 5, así sabemos cuántos nombres tenemos dentro de la agenda telefónica. Justo después de la pre etiqueta, podemos conseguir ese número con el valor de i, porque se va a acrecentar con cada bucle. Entonces también un colon solo para separar el nombre con el número. Refrescar. Ahora tenemos 0, 1, 2, 3, 4. Sólo porque el primer valor es cero, voy a agregar i más 1, por lo que comienza en uno en lugar de cero y refrescar. Eso está mejor ahora. Empezamos con el valor de uno y luego podemos ver cuántos nombres diferentes tenemos en nuestra matriz, o nuestra agenda telefónica. Espero que lograras hacer eso, o al menos darle un paso y ver hasta dónde llegaste y ese es el final del mini reto y el final de la sección. Te veré en la siguiente sección, que se llama JavaScript y el DOM. 30. ¿Qué es el DOM?: Bienvenido de nuevo y bienvenido a esta nueva sección llamada JavaScript y el DOM. En este video, vamos a hacer un breve resumen de exactamente lo que es el DOM. El DOM es la abreviatura del Document Object Model y solo estoy en la página de Wikipedia para el Document Object Model, y puedes encontrar pequeña información justo ahí. Comienza diciendo que el DOM es una convención multiplataforma e independiente del lenguaje para representar e interactuar con objetos en documentos HTML, XHTML y XML. Es posible que te estés preguntando exactamente qué significa eso. Para mantenerlo sencillo, todas las secciones o elementos, o todos los nodos de cada documento o página web se organizan en una estructura tipo árbol. Si pasamos a la sección W3Schools en el DOM, probablemente puedas tener una mejor idea de exactamente qué está pasando. Podemos ver un diagrama visual de todo el árbol HTML DOM de objetos. Esta es nuestra página web básica, que comienza con los documentos justo arriba. Ya hemos agotado antes en este curso cuando hemos estado seleccionando elementos por ID. Empezamos con documento y luego obtenemos elemento por ID. Tenemos documento justo en la parte superior del árbol y luego todos los diferentes elementos de la página web, una rama abajo del documento. Tenemos la sección de cabeza y luego tenemos la sección de cuerpo, que son los dos elementos principales dentro del elemento raíz HTML, y todo esto debería parecer bastante familiar desde la página web HTML. Dentro de la sección de cabeza, tenemos un título. Dentro de la sección de cuerpo tenemos los atributos, los elementos, como los encabezados, los anclajes, y luego todo el texto contenido dentro de esos. Es posible que te estés preguntando qué tiene esto que lidiar con JavaScript. Bueno, básicamente, JavaScript puede hacer que las páginas web sean dinámicas porque JavaScript puede controlar o manipular todos los elementos en el árbol DOM. Podemos agarrar cualquiera de estos elementos y podemos anularlo, podemos manipularlo, podemos agregar a, podemos agregar ciertos atributos o elementos, podemos cambiar estilos CSS o incluso eliminar cualquiera de estos elementos. En los próximos videos, estaremos echando un vistazo más profundo a cómo podemos acceder a estos elementos y cómo podemos manipular estos elementos. Pero antes de hacer eso, solo quería darles una breve visión general de cómo podemos hacerlo exactamente y por qué el DOM es importante para JavaScript. Pero por ahora lo principal a entender es cómo se presenta un documento HTML y también entender que JavaScript puede acceder o manipular todos los elementos en el árbol DOM. Ahora pasaremos al siguiente video y echaremos un vistazo a cómo podemos acceder a todos los elementos dentro de este árbol DOM. 31. Accediendo a los elementos: Ahora sabemos que JavaScript puede interactuar con DOM. En este video, te voy a mostrar algunos métodos de selección de elementos en una página web. Empecemos con una nueva carpeta para la nueva sección y luego llamemos a esta sección el DOM. Necesitamos obtener una carpeta de cualquiera de los videos anteriores. Apenas la plantilla de inicio. Copia cualquiera de esas y pegarlas en. Este es el número 1, y esto se llama elementos de acceso. Después ábrela en tu editor de texto. Arrástralo así. Tenemos que empezar con un nuevo título; accediendo a elementos. Entonces podemos eliminar todo el código de abajo entre las etiquetas de script. En videos anteriores, hemos mirado document.getElementById, y luego podemos seleccionar un elemento de la página web. Si agregamos un encabezado de nivel 1 e insertamos un ID, por ejemplo, de título. Podemos entonces agarrar este encabezado de nivel 1 por su ID de título, y luego podemos hacer varias cosas como configurar el HTML interno para que sea igual a cualquier cosa que quieras. Por lo tanto, vamos a configurar esto para mostrar JavaScript en páginas web. Cuando esto se abre en el navegador, el encabezado vacío de nivel 1 debe tener el texto que has colocado en la parte inferior de allí. Entonces abrimos. Ahí vamos, ahí está nuestro rumbo nivel 1. También hay otros métodos que podemos utilizar para seleccionar elementos en una página web. El siguiente método quiero mostrarte de agarrar elementos en páginas web mediante el uso del QuerySelector. de seleccionar elementos por su ID, también podemos seleccionar elementos de la misma manera que lo haría en el CSS mediante el uso del selector CSS. Vamos a crear un ejemplo con algún texto. Entonces vamos a crear tres etiquetas P con algunos nombres de clase. Este puede ser primero y luego el contenido puede ser la primera línea, y hay que copiarlo dos veces. Con segundo y la clase de tercero. Simplemente deja esta tercera en blanco por ahora. Ahora sabemos acceder a un elemento por su ID. A continuación, quiero pasar a acceder a un elemento por su selector CSS. Podemos hacer eso con document.QuerySelector. Echemos un vistazo a eso. Document.QuerySelector. Dentro de los corchetes, queremos pasar en el selector CSS. En nuestro caso, vamos a poner en la clase. Entonces pongamos ahí la clase de segundo. Entonces podemos hacer algunos cambios. Vamos a agregar style.backgroundColor y luego establecemos que sea igual a cualquier valor que queramos. Pongamos que eso sea rojo. Ahora la segunda línea debe tener un color de fondo de rojo. Guardemos eso. De hecho, solo podemos comentar esta sección hacia fuera y luego refrescar dentro del navegador. Ahora hemos seleccionado la segunda línea por su ID y reemplazado el color de fondo. Si cambiáramos esto para ser primero, podríamos simplemente cambiarlo por su nombre de clase y eso seleccionaría la primera línea. Eso puede ser realmente útil para seleccionar elementos en una página web. Por lo que además de seleccionar elementos por su nombre CSS, también podemos seleccionar elementos por su nombre de clase. Sólo eliminemos este ejemplo. Podemos utilizar el texto del párrafo de antes. Vamos a crear una variable llamada selector. Esto se va a establecer en Documents.GetElementsByClassName. Sólo ten cuidado de que, esto tiene una S en el extremo de los elementos donde getElementByID no tiene la S al final porque solo estamos seleccionando un ID en particular. tanto que getElementsByClassName devolverá todos los elementos de esa página con un nombre de clase en particular. Entonces queremos seleccionar el nombre de la clase a segmentar. Entonces agreguemos una clase al encabezado de nivel 1 de encabezamiento y luego solo ponemos esto dentro de los corchetes, y luego un punto y coma al final. Esto seleccionaría todos los elementos con un nombre de clase de encabezado. Si hubiera más de uno, entonces tendríamos que declarar a qué elemento queremos apuntar por su número de índice. En nuestro caso, queremos ir uno en clase de rumbo. Por lo que ese será el número de índice 0. Si tuviéramos una segunda línea con la misma clase, esto sería el índice número 1. Cambiemos el HTML interno y pongamos eso en algún texto. Nombre de clase seleccionado. Vamos a ejecutar eso dentro del navegador. Ahí vamos. Ese es nuestro encabezado de nivel 1 con nombre de clase seleccionado. Otro que puede encontrar realmente útil es document.getElementsBytagName. Funciona de una manera bastante similar al último ejemplo. El nombre de la etiqueta es o el H1 o el P, o podría ser cualquiera de los elementos de la página web. Incluso puede ser un GIF o una imagen. Esta vez el selector va a ser igual a document.getElementsBytagName. Vamos a seleccionar las etiquetas P. Entonces justo lo mismo que antes, entonces podemos poner un número de índice. Entonces 0, 1, y 2. número 1 es la segunda línea de texto de ahí. Esta vez para que sepamos que está funcionando, simplemente imprimiremos nombre de etiqueta seleccionado. Guardar. Ahí vas. Ahora la línea 2 ha cambiado a nombre de etiqueta seleccionado. Si cambia a cero, nombre de etiqueta seleccionado debería ser ahora la primera línea. Ahí vas. El último ejemplo que les voy a mostrar en este video es seleccionar el número de imágenes dentro de los documentos con document.images. Para ello, necesitamos crear algunas imágenes dentro de la página web. En realidad no tienes que tener alguna imagen físicamente ahí, solo podemos hacer algunos nombres de imagen. Entonces imagen 1, imagen 2, imagen 3, y luego imagen 4. Entonces si queremos saber cuántas imágenes hay en esa página web, podríamos crear una variable llamada número de imágenes. El número de imágenes va a ser igual a document.images.length, y luego podemos imprimir en pantalla el número de imágenes en una cadena. Entonces vamos a crear un elemento vacío para mostrar estos en. Una etiqueta H1 con ID de ejemplo. Entonces hagamos un document.getElementById, y luego seleccione el ejemplo. Entonces pega eso en. Podemos establecer el texto con el HTML interno. Vamos a establecer esto a esta página tiene y luego un espacio, más la variable, que va a contener el número de imágenes en la página, luego plus, y luego queremos que la palabra imágenes dentro de una cadena. De acuerdo, si eso funciona bien, deberíamos conseguir el texto que se muestra de esta página tiene, y luego cuatro imágenes. Guardemos eso y echemos un vistazo. Genial. Eso está funcionando bien. Si fuéramos a borrar una de estas imágenes, eso ahora debería cambiarse a ustedes tres. Ahí vamos. Hay muchos métodos diferentes que puedes usar para acceder a elementos en una página web. Te recomiendo echar un vistazo a la página web de Mozilla, a la que proporcionaré un enlace. Ahí hay muchos más ejemplos. Ojalá, ahora entendemos que podemos acceder prácticamente a cualquier parte de un documento o de una página web que queramos. En el siguiente video, pasaremos a cómo podemos manipular o cambiar estos elementos. Gracias por ver, y nos vemos en el siguiente video. Gracias por mirar y allí nos vemos. 32. Manipulación de elementos: Bienvenido de nuevo. Este video se llama Manipulación de Elementos. Como de costumbre, empecemos con nuestra propia carpeta, así que este es el número dos, Elementos manipuladores. Entonces abramos esto. Entonces déjalo empezar con su propio título y una etiqueta de script vacía, así que esta vez manipulando elementos, entonces solo despeja todo esto. Empezamos con nuestra página de índice en blanco. Sabemos por el último video cómo acceder a los elementos, así que ahora echemos un vistazo a cómo podemos cambiar estos elementos usando JavaScript. Entonces vamos a crear un encabezado de nivel uno como ejemplo, y vamos a darle un ID de título y luego algún texto entre el encabezado de nivel uno de los elementos HTML cambiantes. Hemos mirado manipular un valor mediante el uso del en HTML. Eso fue document.getElementById. Entonces sabemos que necesitamos agarrar el ID del elemento que quieres cambiar, que es título. Después hemos usado HTML interno para cambiar el contenido de los elementos a cualquier cosa que queramos. Vamos a poner ahí cualquier texto que queramos. Entonces además del HTML interno, también podemos cambiar el CSS o los estilos de un elemento en particular, y lo haremos con.style. Entonces una vez que hayamos seleccionado el estilo, podemos ir más allá en el CSS usando el punto. Se puede ver usando corchetes que en cuanto usamos un punto, luego obtenemos una lista de todas las propiedades CSS disponibles que podemos seleccionar. Por lo que voy a empezar seleccionando el color. Entonces vamos a poner eso igual a, sólo voy a empezar con el rojo. Ahora abramos esto en el navegador y echemos un vistazo. Tenemos el encabezado de nivel uno de cambiar elementos HTML. Entonces bien agrega en un estilo CSS, y luego estableceremos en el color del texto para que sea rojo. Entonces vamos a subir eso. Ahora se trata del texto todo rojo en la página de ahí. Podemos agregar muchas propiedades CSS diferentes ahí, podemos cambiar el tamaño de la fuente, y hagamos que este texto sea realmente grande para que podamos comprobar su funcionamiento. Para 100 píxeles, así que ten un poco de juego con eso e intenta seleccionar algunos de los diferentes valores CSS y ver qué puedes lograr con ellos. Pero no voy a pasar a conseguir y establecer los nombres de las clases o los identificadores de los elementos HTML. Empecemos con obtener el nombre de la clase o el DNI. Entonces para hacer esto, necesitamos agregar una clase a nuestro rubro de nivel uno. Entonces, solo agreguemos una clase de rojo y luego podremos averiguar cuál es este nombre de clase de este elemento en particular. Vamos a seleccionar el document.getElementById, así que vamos a dejar que el id del título y el nombre then.class, con el punto y coma al final. Entonces porque estamos agarrando un ClassName. Quiero almacenar esto dentro de una variable para que podamos acceder fácilmente. Por lo que la variable de nombre de clase es igual a document.getElementById. Agarraremos un título, y luego seleccionaremos en el nombre de la clase, ahora hagamos bien un documento y luego comprobemos. Tenemos el nombre de la clase almacenado correctamente dentro de la variable. Solo pongamos esto dentro de los corchetes y luego actualicemos. Se puede apenas ver que tenemos el nombre de clase de rojo que aparece en la parte inferior. Esto también funciona con ID. Solo necesitas cambiar ClassName a.ID y luego solo mostrar los resultados una vez más dentro de una variable, así que ID name, guarde eso. Tenemos la identificación puesta a título en este caso. Es así como podemos agarrar o cómo podemos obtener el nombre de la clase o el ID de un elemento. En ocasiones se quiere agregar un ID u otra clase o incluso una clase adicional a un elemento. Echemos un vistazo a cómo podemos agregar clases y elementos. Quiero agregar algunos estilos y crear unas cuantas clases nuevas que podamos a este elemento. Usemos nuestra clase roja. Establezcamos el color para que sea rojo y lo hagamos un poco más legible, estableceremos el tamaño de la fuente en 2 ems. Entonces también es crear una segunda clase de azul, y luego podemos agregar esto a nuestros elementos y cambiar el color a azul. Entonces agreguemos un ID adicional que podemos agregar el elemento dos. Yo sólo voy a poner a la font-familia para que sea fantasía. A continuación obtuvimos el ID y también la clase de los elementos particulares. Pero si queremos establecer el ID, simplemente usamos el.id y luego lo configuramos igual al nombre de ID que queremos agregar, por lo que en nuestro caso es ID1. Si esto se agrega correctamente, ahora deberíamos conseguir el cambio font-family a la fantasía. Entonces guarde eso, y luego diríjase al navegador y actualice, ahí vamos. Genial. Tenemos la diferente font-family, por lo que se está agregando el ID al elemento. Agregar una clase funciona exactamente de la misma manera, así que solo duplicemos esta línea, y luego estableceremos ClassName. Agarra el elemento por ID de título y luego en.ClassName. Entonces en lugar de la clase roja, agreguemos la clase de azul que hemos creado, y luego guardemos eso, y deshagamos del nombre del ID, así que guarde eso y luego actualicemos, y ahora conseguiremos el color azul, por lo que todo está funcionando correctamente. Ahora sabemos agregar ID y clases a los elementos, también sabemos acceder a la clase o ID en particular. A continuación, te voy a mostrar cómo crear y agregar nuevos elementos a una página. Empecemos con una etiqueta de script en blanco, y los voy a almacenar en variables. Voy a crear una variable llamada un nuevo elemento. El nuevo elemento que queremos crear va a ser igual a documents.CreateElement. Entonces dentro de los corchetes necesitamos poner el nombre del elemento que queremos crear. Voy a crear un nuevo div. Esto creará un nuevo div y lo almacenará dentro de la variable llamada New Elements. Dentro de este div, quiero crear algún texto para poner dentro ahí, así que vamos a crear una nueva variable llamada AddText. El modo en que podemos agregar texto a un div o a un documento es mediante el uso de document.createTextNode. Entonces dentro del corchete pondré dentro de la cadena que queremos crear , nueva cadena de texto. Tenemos nuestros textos, y también tenemos nuestro nuevo div. Entonces para agregar el texto al div, seleccionamos la nueva variable de elemento, que es el div, y luego. AppendChild. El niño al que queremos anexar o agregar es la variable AddText. Entonces solo pon eso dentro de los corchetes. Ahora hemos agregado el nuevo texto al nuevo div. Ahora agreguemos esto a los documentos, por lo que document.body.insert Antes. Aquí le decimos al navegador exactamente dónde nos gustaría que se agregara el contenido. InsertBefore toma dos parámetros. Por lo que se requiere el primero, y este es el contenido o el objeto que queremos agregar. Queremos agregar la nueva variable de elemento que acabamos de crear, para que eso vaya primero. El segundo valor es opcional, y este es el marcador en HTML donde se agregará el nuevo elemento justo antes. Si queríamos agregar nuevos elementos a justo antes de nuestro encabezado de nivel uno, vamos a crear una nueva variable llamada nuevo contenido, y luego vamos a establecer el contenido para que sea igual a este encabezado en la parte superior. Por lo que document.getElementById. Queremos agarrar el ID del título, así que solo pon eso entre los corchetes, así solo queremos asegurarnos de que esa sea una variable. Entonces hay un poco pasando ahí así que solo volveremos a echar un vistazo a esto. Estamos creando un nuevo elemento, o un nuevo div. A continuación, agregará una nueva cadena de texto a ese div usando appendChild. Ahora tenemos esta información almacenada en una variable llamada nuevo elemento. A continuación añadiremos esto al documento usando insertar antes. El apartado de código que queremos agregar es este nuevo elemento el cual contiene el nuevo div y nueva cadena de texto. Entonces el segundo valor de nuevo contenido es donde queremos agregar este nuevo elemento dos, y queremos agregarlo justo antes de nuestro encabezado nivel uno y luego ir al navegador y refrescar. Ahí vamos, ahí está nuestra nueva cadena de texto. Si quisieras dar ese div e ID en particular, puedes hacerlo con nuevos elementos o con la variable NewElement. Al igual que usamos en el último ejemplo, vamos a establecer el ID para que sea igual a cualquier cosa que quieras. Yo quiero poner el mío a mi ID, y luego guardar eso, y ahora cuando actualicemos la página, si entras en las herramientas de desarrollador, y luego si seleccionamos la nueva texturización. Se puede ver el interior del cuerpo tenemos un nuevo div con una ID de mi div, y el contenido es nueva cadena de texto. Es así como puedes agregar nuevos elementos al HTML mediante el uso de Javascripts. Entonces gracias por ver y en el siguiente video pasaremos a un mini reto, que es crear un convertidor de temperatura y pondrá en práctica lo que has aprendido a lo largo de los últimos videos. Gracias y nos vemos en el siguiente video. 33. Mini desafío: convertidor de temperatura - parte 1: Bienvenido de nuevo. En este mini reto, vamos a crear una app de convertidor de temperatura. Puede ser un simple o tan creativo como te gustaría, pero esto es lo que se me ocurrió, justo como ejemplo. Se trata de una forma HTML sencilla la cual toma las entradas del usuario, y luego podemos convertirlo a Celsius o a Fahrenheit usando JavaScript, así que inténtalo y ve qué se te ocurre, de lo contrario, sígueme y te mostraré cómo creé esto. Empecemos creando una carpeta para el proyecto en la sección dom. Este es el número 3 y este es el convertidor de temperatura. Ahora abramos entre paréntesis y podemos empezar. El título es convertidor de temperatura, y pongamos todo el código de muestra de los videos anteriores. Voy a empezar con la sección HTML.1 Así que sólo voy a crear un formulario HTML Bootstrap. Empecemos fuera de las etiquetas de guión. Vamos a crear un contenedor, que es el código Bootstrap, y luego vamos a crear una fila Bootstrap, y luego vamos a usar la cuadrícula Bootstrap, así que col-sm-6. Si estás usando el plugin de Emmet como yo, deberías poder obtener la esta grilla bastante rápido, si no, necesitarás teclear esto con las clases y también para enviar este div, vamos a añadir el col-sm-offset, que se desplazar la rejilla por tres y colocarla en el centro. El Bootstrap clase de text-center que mantendrá todo bien alineado en el medio y luego por último, creé una clase de contenido, y esto te vas a usar para darle estilo en el CSS. Empecemos con un encabezado de nivel 2, que es solo el título de nuestra app que es Convertidor de Temperatura, y luego vamos a crear nuestro formulario. Porque estamos usando Bootstrap, vamos a crear un div con una clase de grupo de formulario y esto asegurará que todo esté bien presentado. Dentro del grupo de formularios, vamos a crear una entrada con el tipo de número y esta es una sección donde el usuario puede ingresar el número que desea convertir a Celsius o Fahrenheit. Entonces el ID, voy a establecer en UserInput, y de hecho le daremos a esto una etiqueta, así que etiqueta 4, para el ID de UserInput, y vamos a cerrar la barra lateral. Ahorremos y comprobemos si eso funciona bien. Ahí vamos, ahí está nuestro rumbo en la entrada. Acabemos de completar la etiqueta ahora. Vamos a poner en Introduce tu número para convertir. Así como así, y luego refrescarse y ahí vamos. Ahí está el texto de la etiqueta. Ahora voy a colocar dos botones más dentro del formulario, que es para el Celsius o Fahrenheit. Pongámoslos adentro ahora. Voy a colocar estos dentro de un nuevo div o form-group y luego la primera entrada es el tipo de botón, y luego el texto dentro. Agregamos eso con el valor de To Celsius, y luego queremos que este botón realmente haga algo cuando el usuario lo presione. Queremos crear un evento onclick el cual activará la función y veremos más eventos en el siguiente video, pero por ahora, solo crea un evento onclick con la palabra clave onclick y luego dentro de las citas, agregamos el nombre del función que queremos activar una vez presionado este botón. Voy a crear una función llamada ToCelsius, y luego necesitamos los corchetes después de eso. Entonces copia y pega o duplica esto. Este es To Farhenheit, y luego la función es toFarenHeit, y sólo echemos un vistazo. Dice que ahí había dos botones. El último que tenemos que hacer es crear un div vacío, cual se desea mostrar el texto de la conversión de temperatura. Al igual que la versión terminada, vamos a crear campo de texto en la parte inferior donde aparece la conversión. Fuera del formulario, solo voy a poner esto en una etiqueta p vacía con la id de resultados. Abramos si ahora en HTML. Ahora solo pasemos a la parte superior y le agregaremos un poco de estilo a nuestra forma. Volver abrir la sección de la cabeza. Vamos a crear nuestras propias etiquetas de estilo. Si recuerdas el abajo en el div que contiene todo el contenido, le agregamos una clase de contenido. Añadamos eso ahora dentro de las etiquetas de estilo, y luego agreguemos algunos estilos sencillos. Añadamos un borde, sólido de 1px. Agregaremos algunas esquinas redondeadas con un radio de borde. Voy a tener menos 10px. Margen top solo para mantenerlo alejado de la parte superior de la pantalla o 30px y luego un color de fondo o del color gris, que es eee y luego echemos un vistazo. Entonces solo quiero agregar el color de fondo, que se puede ver en la versión final ahí. Volvamos al CSS y vamos a darle estilo a la sección de cuerpo. Para obtener el fondo, solo voy a agregar un gradiente lineal al fondo. Tan gradiente lineal y luego dentro de los corchetes, podemos agregar dos, y luego vamos a agregar los dos colores, para fundir. En primer lugar, su rojo y luego el segundo color es azul. Empezará con rojo y luego conforme va a la derecha, cambiará a azul. Entra al navegador y ahí está nuestro gradiente de fondo. Eso se ve mejor. No olvides si se trata de un sitio de producción en vivo. Es posible que desee agregar algunos prefijos del navegador al gradiente lineal solo para la compatibilidad entre navegadores. Ahora, ese es el CSS HTML todo terminado para la interfaz de usuario. Simplemente voy a dejar este video ahí y se terminará en el siguiente video donde vamos a añadir el JavaScript y hacer que nuestro convertidor de temperatura sea totalmente funcional. 34. Mini desafío: convertidor de temperatura - parte 2: Bienvenido de nuevo. Por lo que ahora tenemos la interfaz de usuario completada para nuestra aplicación de convertidor de temperatura. Entonces en este video, lo vamos a terminar todo agregando las funciones de JavaScript para asegurarnos que las entradas del usuario se conviertan a Celsius o a Fahrenheit. Entonces volvamos a tu editor de texto y luego trabajaremos dentro de las etiquetas de guión. Por lo que creamos dos funciones. El primero fue a Celsius y luego uno a Fahrenheit, que va a tomar la entrada ingresada en el campo de entrada para luego convertirla a Celsius o a Fahrenheit. Entonces vamos a mostrar los resultados dentro de esta etiqueta p allá. Entonces vamos a crear la función a Celsius para empezar. Entonces crea la función, a Celsius. Entonces para crear esto, voy a crear una variable llamada Celsius y luego dentro de esta variable, quiero almacenar el valor de la entrada del usuario. Entonces document.getElementById, y el ID que queremos agarrar es la entrada del usuario desde el formulario. Entonces coloca eso dentro de los corchetes y luego queremos agarrar el valor de esta entrada del usuario. Entonces ahora tenemos el valor de la entrada del usuario. Queremos crear un cálculo para convertir esto a Celsius. Entonces comienza con el valor menos 32 y después porque vamos a multiplicar este valor, pongamos esto dentro de los corchetes y luego multiplicemos este valor por 5 y luego necesitamos dividirlo por 9. Este es el cálculo que necesitamos para convertir a Celsius. Entonces ahora tenemos el valor del Celsius almacenado dentro de esta variable. Vamos ahora redondearlo al número entero más cercano. Por lo que Celsius ahora va a ser igual a Math.Round. El número que queremos ronda es la variable Celsius. Entonces pon eso dentro de los corchetes. Por lo que ahora vamos a mostrar el valor de Celsius dentro de los resultados. Por lo que document.getElementById. Entonces vamos a agarrar los resultados.innerHTML y luego queremos poner eso a la variable Celsius. Así que vamos a guardar eso y comprobarlo en el navegador. Entonces pongamos un número ahí dentro. Entonces pongamos un valor de 40. Entonces 40 Fahrenheit, y luego vamos a convertirlo a Celsius. Entonces la conversión es cuatro. Entonces hagamos un poco mejor este sello diciendo que 40 Fahrenheit es igual a cuatro centígrados. Por lo que dentro del HTML interno. Entonces, antes que nada, tomemos el usuario input.value. Entonces este es el valor que ingresa el usuario en el campo. Entonces plus luego agregaremos una cadena, digamos en un Fahrenheit es, y luego vamos a agregar al final la variable Celsius. Entonces, por ejemplo, si el usuario pone el valor de cinco, esto diría cinco Fahrenheit es, y luego la conversión correcta y luego querremos agregar una cadena al final para decir Celsius. Entonces, guardemos eso y echemos un vistazo. Por lo que cinco Fahrenheit y luego haga clic a Celsius. Por lo que eso equivaldrá a cinco Fahrenheit es menos 15 centígrados y vamos a darle a esto un ir con otro valor. Entonces ocho es menos 13, 30. De acuerdo, entonces ahora que ese lado está funcionando, podemos crear la función Fahrenheit. Entonces hagamos la vida más fácil. Copiemos esta función y luego podremos hacer algunos pequeños cambios. Entonces éste quiere ser dos Fahrenheit. Por lo que la variable de Fahrenheit. Entonces quiero empezar por hacer lo mismo. Por lo que queremos crear el document.getElementById. Por lo que aún queremos agarrar la entrada del usuario y el valor de las entradas del usuario. Pero esta vez el cálculo es ligeramente diferente, lo que vamos a multiplicarlo por 9 dividido por 5 más 32. Entonces, sólo cambiemos la variable Celsius de nuevo a Fahrenheit y también en el Math.Round. Todavía queremos agarrar la etiqueta de resultado y cambiar el HTML interno. Pero esta vez, esto necesita ser Celsius y entonces esta necesita ser la variable Fahrenheit y la cuerda nuevamente necesita ser Fahrenheit. De acuerdo, así que vamos a guardar eso y echar un vistazo. Entonces pongamos un valor ahí dentro y veamos si esto funciona. Entonces eso no está funcionando, así que volvamos y comprobemos por qué. Entonces conseguimos la función Fahrenheit. No todo se ve bien así que vamos a revisar las entradas, tenemos un error ortográfico. Tiene que haber H dentro del, así que guarde eso e intentemos de nuevo. Por lo que 30 centígrados deberían ser iguales a 86 Fahrenheit y sólo intentemos uno más. Por lo que 10 Celsius son 50 Fahrenheit. Está bien genial, así que todo está funcionando ahora y ese es el final de este video. Entonces sí espero que lograras eso tú mismo y que todo funcione correctamente, y espero que hayas disfrutado de este reto. Te veré en el siguiente video donde echaremos un vistazo a los eventos de JavaScript. 35. Eventos de Javascript: Bienvenido de nuevo. En este video, vamos a echar un vistazo a los eventos de JavaScript. Empecemos con nuestra propia carpeta. Dentro de la sección dom, vamos a crear una nueva carpeta, que es el número 4. Voy a llamar a estos eventos, y luego vamos a abrir. Abramos dentro de Brackets. Después agrega un título, eventos JavaScript. Entonces no necesitamos las etiquetas de estilo para este. Ahora también podemos borrar HTML, y también las etiquetas de script. Ahí vamos. JavaScript es muy utilizado en las páginas web para agregar interactividad, y necesitamos una forma de que JavaScript detecte las acciones de un usuario con el fin de saber cómo reaccionar. Aquí es donde entra en juego eventos o manejo de eventos. También puedes pensar en un evento como un desencadenante. A modo de ejemplo, el navegador puede esperar a que ocurra un evento, como un usuario haciendo clic en un botón, el cual has mirado en videos anteriores, donde el clic de botón se activa una función. Por lo que miramos brevemente el manejador de eventos onclick para activar una función. JavaScript también puede reaccionar ante cosas como cuando se termina de cargar una página, cuando se presionan las teclas en el teclado, cuando un mouse pasa por encima de un elemento, o incluso cuando se envía un formulario. Vamos a crear una entrada con la que trabajar, el tipo de entrada de botón, y luego vamos a darle a esto un ID de botón, y luego vamos a agregar algunas clases de bootstrap. Podemos cambiarlos usando eventos de JavaScript. Agrega una clase, la clase bootstrap de btn, y luego btn éxito. Añadamos un valor a este botón de hola, y luego como buscamos previamente, podemos agregar el evento onclick para activar una función. Voy a citar nombre de función de cambio, y luego abajo a las etiquetas de script, podemos crear esta función dentro de ahí, por lo que la función de cambio. Esto debería parecer bastante familiar ahora porque lo hemos usado un par de veces. Por lo que queremos hacer un document.GetElementById. Ahora voy a agarrar el ID de botón, y luego una vez que este botón esté presionado, solo quiero que esto active un nuevo nombre de clase. Esto puede ser igual a clases de bootstrap de nuevo, o btn, btn-danger. Empezaremos con el éxito del botón. Entonces una vez que se haga clic, esto cambiará a peligro de botón. Abramos esto y comprobemos que esto está funcionando bien. Eso es un éxito de botón que es el fondo verde, y luego una vez hecho clic, obtenemos el nombre de clase de botón o btn-danger agregado, que es el fondo rojo. Ese es el evento onclick. También podemos hacer un tipo similar de cosas cuando pasamos el cursor sobre el botón con el ratón en lugar de hacer clic sobre él. Para ello, sólo cambiamos onclick para estar onmouseover. Ahora cuando pasemos el cursor sobre el botón, deberíamos conseguir el cambio de clase, así como así. Entonces eso ocurre una vez que el ratón pasa por encima del botón. Si quieres que ocurra cuando el cursor sale del botón, podemos cambiar onmouseover a onmouseout, y hay una única diferencia. Una vez que pasamos el botón, la clase no cambia, pero en cuanto el ratón sale del botón, entonces obtenemos el cambio al fondo rojo. Todos estos eventos están ocurriendo entre bastidores en muchas páginas web que visitas todos los días. El siguiente evento útil que quiero ver es onkeyup y onkeydown, y eso es más o menos a lo que suena cada vez se presiona un botón en el teclado, o cada vez que se suelta. Esto puede desencadenar un evento. Vamos a crear una forma de ejemplo para ver esto en acción. Vamos a comentar la entrada, y vamos a crear un formulario. Después el tipo de entrada de texto, un ID para agarrar un JavaScript de campo de entrada, y luego al igual que hemos usado con los eventos onclick, podemos cambiar esto a onkeyup, y esto también puede desencadenar una función. Llamaremos a la función KeyPressed. Entonces con este ejemplo, voy a crear una función simple la cual se va a activar cada vez que se presiona un botón del teclado. Voy a crear un encabezado de nivel 2 vacío, y quiero que la función muestre el texto. Por lo que cada vez que se presiona un botón dentro de esta forma, quiero que el encabezado de nivel 2 contenga el valor de lo que se ingresó dentro de las entradas. Entonces deja el contenido vacío por ahora, y vamos a añadir un ID de visualización. Entonces vamos a crear nuestra función de KeyPressed. En primer lugar, quiero agarrar la pantalla con un document.getElementById, que es el ID de visualización. Entonces queremos establecer el HTML interno de la pantalla para que sea igual al valor de este InputField. Por lo que necesito InputField.Value. Entonces subiremos en el encabezado vacío de nivel 2, y luego establecemos en el contenido del HTML interno para que sea igual a lo que los usuarios escriban dentro de estos campos de entrada. Esto se va a activar cada vez que se presiona un botón del teclado. Echemos un vistazo a esto en acción. Ahí está la forma en la esquina superior. Cada vez que presionas una tecla, esto desencadena una función, y luego obtendremos que los contenidos se rellenen dentro del encabezado de nivel 2. Por lo que esta función se activa cada vez que se libera una clave con onkeyup. También podemos tener onkeydown, y esto se activa en cuanto se presiona el botón hacia abajo. Entonces dos eventos son bastante similares, pero solo con una pequeña diferencia sutil. Entonces a continuación, quiero mirar el evento onchange. Esto se activa cuando se detecta un cambio. Podemos usar la misma forma, pero esta vez en lugar de onkeydown, queremos cambiarla a onchange. Entonces vamos a crear una función. Por lo que cada vez que se detecta un cambio, quiero aumentar la fuente. Vamos a crear esta función abajo en la parte inferior. Entonces cuando se detecta un cambio, queremos agarrar el campo de entrada, que es esta sección, para luego aceptar que el CSS sea un poco más grande. Por lo que document.getElementById. Nuevamente, dejemos caer el InputField, y luego en.Style.FontSize. Entonces para que veamos que está funcionando, vamos a establecer el tamaño de la fuente para que sea mucho más grande, así que 50 píxeles, y luego vamos a guardar eso. En realidad se supone que es FontSize. Guarda eso, y luego dirígete al navegador. Escribamos algo ahí dentro. En cuanto tengamos un clic fuera de él, presionaré una tecla de retorno, y debería activar la función. Ahí vamos. Ahora tenemos el texto cambiado a 50 píxeles. Entonces así funciona el manejador de eventos onchange. El último manejador de eventos que te voy a mostrar en este video está usando onsubmit, que se activa cuando se envía un formulario. Entonces vamos a crear una forma de ejemplo o podemos usar la de justo antes. Para que esto funcione, necesitamos ponerlo dentro de los elementos de formulario, por lo que onenviar. otra parte, necesitamos poner una función para ejecutarse, por lo que RunValidation, y luego vamos a agregar un script dentro de esta función para hacer alguna validación de formulario cuando se envíe esto. Para que esto funcione, necesitamos crear un insumo que sea el tipo de enviar, y obtenemos un valor de Formulario Enviar. Guarda eso y luego baja al script, y luego crea una función que es RunValidation. Podemos poner aquí cualquier validación de formulario que quieras. Entonces solo para comprobar que está funcionando, voy a crear una alerta y solo crear algo de texto, solo nuestra validación de formularios, luego refrescar el navegador. Ahora cuando enviamos el formulario, esto desencadena la función onsubmit y ahí está nuestro texto para abrir antes de la validación del formulario. Eso es realmente útil para hacer algunas comprobaciones dentro del navegador para comprobar que el usuario ha rellenado todos los campos, o bien ha escrito las cosas correctamente. Entonces ese es el final de este video sobre eventos de JavaScript. Te veré en el siguiente video donde echaremos un vistazo a un mini reto, cual implica reaccionar ante eventos onclick para hacer un animador de nombre. Te veré ahí. 36. Mini desafío: animador de nombres: Bienvenido de nuevo. En este video vamos a echar un vistazo a otro mini-reto llamado el Nombre-Animador. Si has entendido cómo funcionan los eventos onclick, particularmente la forma en que cambiamos un elemento una vez que se hace clic en un botón, no deberías tener ningún problema para completar este reto. Todo lo que quiero que hagas es agregar tu nombre a la parte superior de la página y luego crear algunos botones que luego manipula estos elementos. Entonces en mi caso he creado uno que hace grande el texto. Podemos cambiar el color, podemos decir que todos los personajes sean mayúsculas y luego podemos ocultar el nombre y luego volver a mostrarlo. Entonces es solo una buena oportunidad de poner algunas cosas en práctica, y ponerlas en la memoria. Deberías poder darle una oportunidad a eso, y si no, solo sígueme mientras creo esto. De vuelta en la sección Dom, vamos a crear una nueva carpeta que es el número cinco, y este es el nombre animador. Abre eso y cambia el título, y luego empecemos con una página en blanco. En este video, quiero manejar los clics de una manera ligeramente diferente. Puedes activar una función si quieres, pero te voy a mostrar una forma ligeramente diferente de hacerlo. Dentro del cuerpo solo creemos nuestro nombre. Sólo voy a poner eso en etiquetas p, así que el Id igual a nombre, y luego poner tu nombre dentro de eso, y luego vamos a crear los cinco botones que son todos tipos de entrada de botón. Puedes crear más botones o menos botones si lo prefieres. Entonces el tipo es botón y luego solo para que se vea un poco más bonito, agreguemos algunas clases de Bootstrap, entonces, btn btn-info, el valor que es solo un texto que aparece dentro del botón de big, y luego un evento onclick. Onclick es igual a, y entonces esta vez, en lugar de activar una función, realidad voy a poner el JavaScript dentro de las citas. Entonces document.getElementById, y luego dentro de los corchetes, necesitamos poner el Id, que en nuestro caso es nombre. Coloca eso dentro de ahí y entonces ojalá puedas recordar cómo agregar estilos CSS desde el manipulador en elementos video, Eso fue estilo de punto y luego punto tamaño de fuente igual a 100 píxeles, y esto de hecho quiere ser entre comillas simples, porque tenemos las comillas dobles por ahí muy afuera. Esta es solo una forma ligeramente diferente de presentar esto, y debería funcionar exactamente igual, por lo que, como estás ahorrando, comprueba dentro del navegador. Entonces ahí está nuestro nombre y luego has hecho clic en grande, deberíamos conseguir el cambio de texto a 100 píxeles. Justo antes de seguir adelante, voy a sumar un par de estilos en la sección de cabeza. Sólo para conseguir esto en el centro, el cuerpo, vamos a establecer el ancho para que sea 100 por ciento y luego alinear el texto en el centro, y luego sólo un par de estilos a nuestro nombre. Entonces agrega un Id de nombre, vamos a crear el tamaño de fuente de 60 píxeles, y luego el color, quiero que el mío sea azul. [ inaudible] lo ha empujado todo al centro, y acaba de agregar algo de color a nuestro nombre, y puedes cambiar eso por lo que quieras, así que sé tan creativo como quieras ser. Ese es nuestro primer botón, todo funcionando correctamente, así que, ahora es solo el caso de crear más botones con varios estilos CSS. Podemos teclear todo esto, o simplemente puedes copiar y pegar, o duplicar. Entonces solo voy a copiar eso, y luego pegar eso a continuación. Quiero que mi segundo botón cambie el color del texto, entonces, vamos a darle a esto un valor de cambio de color, [inaudible] en el estilo punto color sea igual al rojo, o cualquier color que te guste, así que el mío va a ser rojo. Si actualizamos y hacemos clic en cambiar de color, ahí está el estilo rojo. Ahora vamos a crear un botón para transformar el texto para que sea todo mayúscula. Entonces el valor del botón es mayúsculas, y luego esta vez se transforma el texto de punto de estilo, y luego esto va a ser igual a mayúsculas, y luego dos botones más. Este es para ocultar el botón, y para ocultar el botón hacemos la visibilidad de punto de estilo. Por lo que la visibilidad es igual a oculta. El último es hacer que los elementos aparezcan de nuevo, esto es show, y luego estilo de visibilidad de punto una vez más, entonces esto es igual a visible. Ahí están nuestros cinco botones, así que guarde eso. Está bien. Probemos todos los botones y veamos que todos están funcionando, big's funcionando, cambiar de color es, todo cambiando a mayúsculas, esconderse, y luego mostrar. Ahí vamos. Espero que logres hacerlo tú mismo. Es un reto bastante sencillo pero sí te da la oportunidad de poner en práctica lo que has estado aprendiendo, así que es realmente útil dar ese ir tú mismo. Gracias, y ahora pasaremos al proyecto final. Crearemos una aplicación de tarjeta de visita. Gracias y nos vemos en el siguiente apartado. 37. Creación de la interfaz de usuario: parte 1: Enhorabuena por llegar al final de este curso, y ahora vamos a entrar en una parte realmente divertida donde vamos a llegar a crear una aplicación de tarjeta de visita. Este es un ejemplo de lo que me gustaría que construyeran. Es algo que he creado para pasar y mostrarte cómo se hace. No obstante, intencionalmente lo he dejado bastante básico, así que me gustaría que realmente se volviera creativo y presumiera lo que se puede hacer. Así que sugeriría darnos hace como de costumbre, y luego obtener todo el diseño básico creado, y luego conseguir que toda la funcionalidad funcione usando JavaScript. En mi versión, he creado dos secciones. El lado izquierdo son entradas de un usuario donde pueden poner en nombre de su empresa, y también pueden agregar diversos textos como nombres, títulos de empleo, e información de contacto. También pueden agregar un poco de estilo a la tarjeta de visita usando los colores de fondo y también cambiar el color del texto y la alineación del texto, y luego hay un div a la derecha que incluye una tarjeta de visita de muestra, y todos los cambios que se colocan dentro del div izquierdo y luego se insertan dinámicamente en la tarjeta de visita. Se puede ver en cuanto se pone cualquier información en el lado izquierdo, después se replica en la tarjeta de visita. Se puede cambiar cualquiera de estos valores, y todo se cambia de inmediato. Ten un go replicando esto tú mismo y ve qué puedes crear, y luego subirlo al final. Me encantaría ver con qué se puede llegar, y ojalá, se pueda lograr todo esto por sí mismo. Si no, solo sígueme, y te mostraré cómo creé esto. Empecemos con su propia carpeta. Vamos a copiar cualquiera de los videos que tiene el esqueleto HTML, y luego renombrar la carpeta, negocio-tarjeta-proyecto, y arrástrelo entre corchetes y cambie el título. Esa es ahora la página limpia, así que me desharé de las etiquetas de estilo y cualquier otra cosa está dentro del HTML o del JavaScript. El ejemplo que he copiado tiene las fotos de la página de índice y también necesitamos un archivo JavaScript externo. Ya tengo el alert.js, así que solo voy a cambiar esto a custom.js y luego también crear una nueva página para la hoja de estilos. Este es un style.css, y luego sumémoslos en la siguiente página. Añadamos la hoja de estilos para empezar, y esto solo está en el directorio raíz. El enlace es tu style.css, y luego la etiqueta de script, voy a agregar justo en la parte inferior del cuerpo. Entonces la fuente, de nuevo, está en el directorio raíz por lo que solo podemos ir a custom.js. Hagamos algo de espacio ahí. Para empezar, voy a crear algunos divs y voy a usar la cuadrícula Bootstrap para ayudarnos en eso. Empecemos con el encabezado de la página. Vamos a crear un div con una clase de contenedor-fluido, y vamos a hacer de este un proyecto responsive. Después el div con la clase de fila, y luego para hacer de esto el ancho completo de la página, vamos a crear un div con el col, una clase de col-sm-12, y luego el encabezado nivel 1, que es Tarjeta de Visita Diseñador, y luego un segundo fluido contenedor, que va a ser el contenedor tanto para el div izquierdo como para el div derecho. Un nuevo div con la clase de contenedor-fluido, y hagamos algo de espacio ahí. Por lo que va a haber dos secciones a esta parte. Va a haber la entrada, que es donde el usuario ingresa la información del formulario. Vamos a crear un comentario de la sección de entrada, y luego vamos a crear la cuadrícula para esto. Vamos a crear un div con la clase, la clase Bootstrap de col-sm-12. Es cuadrícula de 12 columnas para ancho en los dispositivos más pequeños. Los dispositivos de tamaño mediano lo harán la mitad del ancho de la página, por lo que col-md-6. Entonces para que podamos darle estilo a esto nosotros mismos, voy a agregar nuestra propia clase personalizada de fondos, y lo usaremos en tan solo un poco en el CSS. Ahora, necesitamos crear nuestro formulario HTML para todas las entradas del usuario, y vamos a darle a este formulario un ID de CardInfo. Puedes llamar a esto como quieras. Realmente no importa. Entonces vamos a agregar algunas clases, por lo que una clase Bootstrap de form-horizontal. Entonces dentro de este formulario, vamos a crear algunos form-grupos de Bootstrap. El primer form-grupo en su propio div. Dentro de esta clase de form-grupo, vamos a crear algunas secciones de la forma. Vamos a crear las etiquetas del lado izquierdo y luego las entradas a la derecha. Queremos que la etiqueta del lado izquierdo utilice una rejilla Bootstrap. Esto va a ocupar tres columnas, lo que dejará unas nueve columnas restantes para la entrada. Vamos a crear la etiqueta ahora. Esta etiqueta es para la entrada, que dará un ID de InputCompany. El modo en que voy a organizar los IDs en este proyecto es cualquier cosa del lado izquierdo, que es la entrada del usuario va a tener un ID comenzar con entrada. El primero es InputCompany y nivel de mensaje de entrada por ejemplo, y luego en el lado derecho en la tarjeta de visita, voy a crear el ID, por lo que esta sección, para comenzar con la salida. Esto será OutputCompany y OutputMessage por ejemplo. Tan solo para que quede claro, una vez que lleguemos a la sección de JavaScript, qué ID estamos usando actualmente. Ahora, tenemos la etiqueta para InputCompany. Añadamos las clases de Bootstrap. Este es col-sm-3 y también control-label, y el texto es Nombre de la empresa, y luego dos puntos, y luego la entrada siguiente. El input que queremos es solo texto, y luego la clase, de nuevo, una clase Bootstrap de form-control, y luego el ID. Es sólo la identificación que hemos puesto dentro de la etiqueta. El ID es igual a InputCompany, y luego lo último es el onkeyup. Cada vez que se libera una clave, queremos que active la función de PrintCompany. Por lo que esto imprimirá el nombre de la empresa al lado de la tarjeta de visita. Guardemos eso y abramos el navegador. Está un poco desordenado ahora. Creo que solo necesitamos poner la entrada dentro de un div. Vamos a crear un div Bootstrap con la clase de col-sm-9, y luego mover el div de cierre a después de la entrada. El sello tiene las tres partes. El insumo se ha mantenido nueve columnas. Eso se ve un poco mejor ahora. Pasemos al mensaje de la empresa.Puedes escribir todo esto otra vez o simplemente puedes copiar esta sección div, y luego simplemente pegar eso a continuación, y luego solo un simple caso de cambiar algunos de los valores. Este es InputMessage. El nombre de la empresa es ahora nuestro Mensaje de la Empresa, y luego necesitamos cambiar el ID y luego también el nombre de la función para ser PrintMessage, y eso debería ser todo lo que necesitamos para el mensaje. Vamos a refrescarnos y ahí está el mensaje. Ahora, necesitamos pasar al fondo en el color del texto. Volvamos al editor de texto y luego podremos pegar de nuevo en el form-grupo. las entradas, voy a llamar a la mina InputBG para el fondo, y luego cambiar el ID. Cambia la etiqueta a color de fondo. Debido a seleccionar un color, queremos cambiar el tipo de entrada para que sea color. El ID es correcto, y luego necesitamos agregar un valor, y este va a ser el valor inicial. Simplemente voy a agregar un valor a eso, un valor hexadecimal o ffb74d. Esta vez vamos a utilizar un manejador de eventos diferente. Esta vez voy a usar onchange. Cada vez que se cambie el color, entonces activará la función llamada ChangeBG, y también podemos reutilizar esta parte porque la siguiente es cambiar el color del texto. Esto también necesita tener el tipo de entrada de color, pero solo necesitamos cambiar InputBG a InputText. Cambia el id de entrada y luego esta vez, necesitamos cambiarlo a Color de texto. Ahí voy a cambiar el error ortográfico. El color del texto, tengo el tipo de entrada de color. El DNI es correcto. El valor, voy a cambiar la mía a 262626. Entonces la función, onchange de nuevo. Se va a ChangeText. Voy a guardar eso y ver cómo se ve todo eso en el navegador. Refresca, así que ahora lo tenemos dice el nombre de nuestra empresa, mensaje de empresa, y luego también tenemos el seleccionador de color que aparece una vez que seleccionamos el color de fondo, y también una vez que seleccionamos el color del texto. También tenemos el color predeterminado que se muestra ahí dentro. Dejaremos ahí este video y seguiremos en el siguiente video. Empezaremos a agregar las alineaciones de texto y terminaremos la sección de formulario. Gracias y nos vemos en el siguiente video. 38. Creación de la interfaz de usuario: parte 2: Bienvenido de nuevo. Vamos a continuar desde donde lo dejamos en el último video. Vamos a pasar de los colores del texto y luego vamos a agregar todo el resto de la sección de formulario, que incluye el Text Align y también varios nombres e información de contacto. Ahora, vamos a pasar a la sección Alinear texto. Vamos al editor de texto y luego justo debajo de la sección ChangeText, solo copiemos esta sección y peguemos eso en abajo. Este va a funcionar un poco diferente a los últimos que miramos porque van a ser tres entradas diferentes. Cada vez que se hace clic en una de estas entradas, queremos agarrar el ID y luego pasar ese JavaScript para determinar si el CSS debe estar alineado a la izquierda, a la derecha o al centro. Podemos reutilizar la etiqueta, y en esta ocasión sólo queremos darle una etiqueta llamada Text Align. Entonces aún dentro de la sección col-sm-9, vamos a crear tres entradas diferentes. El primero va a ser el tipo de botón y luego la clase de btn btn-info. El valor que vamos a pasar va a ser el texto dentro del botón, por lo que este es el botón izquierdo. Entonces vamos a pasar una identificación al texto- izquierda. Esta es en realidad una clase bootstrap, pero te mostraré exactamente lo que vamos a hacer en tan solo un segundo. Vamos a crear un manejador de eventos onclick y cuando se presiona el botón, terminará la función de disparador llamada TextAlign. Entonces dentro de los corchetes, vamos a pasar un parámetro de this.id Esta parte tendrá más sentido cuando pasemos a la sección de JavaScript. Pero básicamente lo que estamos haciendo es cada vez que se hace clic en el botón, entonces activaremos la función TextAlign y dependiendo de cuál de los tres botones esté presionado, entonces agarrará el id En este caso, es texto- izquierda. Después usando JavaScript, agregaremos este id text-left y luego lo agregaremos como nombre de clase. En el momento en que se presiona, el texto dentro de la tarjeta de presentación tendrá entonces la alineación text-izquierda y la misma para el centro de texto y text-right. Pero debería tener más sentido cuando lleguemos a la sección de JavaScript. Simplemente duplica este botón dos veces más y vamos a usar exactamente la misma función TextAlign. Pero sólo necesitamos cambiar el id El medio va a ser text-center con el valor de Centro, y luego el tercer botón tiene valor de Right y luego el id de text-right. Los tres botones activan la misma función pero sólo la pasamos en un id diferente dependiendo de qué botón esté presionado. Echemos un vistazo a eso y refresquemos. Dice, tengo tres botones. Ahora, podemos pasar al nombre del usuario, el Título de Trabajo, Correo Electrónico, y Número de Teléfono por lo que es una secciones bastante simples. Podemos simplemente copiar los grupos de formularios que ya hemos creado, y luego pegarlos debajo de los botones. El primero es el InputName, el valor de etiqueta de tu nombre, cambia el id Voy a eliminar el valor porque no estamos usando el color. Quitemos el tipo de color y lo cambiemos de nuevo al texto. Entonces necesitamos que esto sea onkeyup. Cuando se presiona la tecla activará entonces una función llamada PrintName. Entonces hagamos lo mismo para el Título de Trabajo, así que copie eso y luego pegue. InputJob, el id es InputJob también y luego la etiqueta es Job Title y luego onkeyup PrintJob y luego la sección de correo electrónico. Vamos a crear un nuevo grupo de formularios, una vez más. Pega justo debajo por lo que este tiene que ser el InputImail y luego cambiar el id La etiqueta es simplemente Email y esta vez necesitamos cambiar el tipo de entrada para que sea correo electrónico para que JavaScript pueda hacer alguna validación sobre eso. Entonces onkeyup función PrinteMail. Entonces el último que tenemos que hacer es por el número de contacto. Vamos a copiar este último grupo de formulario para el número de teléfono, que es InputTelephone, cambiar el id, el título de Número de Teléfono, y luego el tipo de entrada de tel, y luego onkeyup PrintTelephone. Guarda eso y echa un vistazo a eso en el navegador y que deberían ser todos los tipos de entrada todos completados ahora. Solo necesitamos agregar el botón Enviar y luego también un botón para borrar el formulario, así que vamos a agregarlos ahora. Podemos poner estos dentro de su propio grupo de forma también. Crea un nuevo div con la clase de form-group. Entonces vamos a agregar la cuadrícula bootstrap para un div, vamos a darle a esto una clase de col-sm-3 por lo que ocupa tres columnas y luego también un offset-col-sm-offset-3. Entonces dentro del div, podemos poner la entrada. El primero que necesitamos agregar es el tipo de entrada de botón. Esto es para el botón Enviar y luego onclick. Crearemos la función FormSubmit, y luego el valor del botón es igual a Enviar. Entonces, por último, el botón para el restablecimiento del formulario o el Borrar. Creo este div completo del anterior y solo elimino el offset esta vez. Nuevamente, necesitamos el tipo de entrada de botón. Onclick creará la función FromReset con el valor de Clear. Echemos un vistazo al navegador y comprobemos si todo está funcionando bien. Entonces refresca eso y ahí vamos. Ahí está nuestra tarjeta de visita y todos los formularios, el botón Enviar, y también el botón Borrar en la parte inferior. Terminemos el HTML, solo necesitamos crear el div en el lado derecho, que es para la tarjeta de visita. Esto va a tener toda la información que el usuario ingresa en el formulario. Vamos a crear un comentario sólo para que sea un poco más legible. Esta es la sección de salida. Yo solo quiero asegurarme de que tenemos esto en la sección correcta así que voy a hacer clic en eso. Ese es el fin de todas las formas. Vamos a ordenar un poco esto. Llevando la forma a la cima. Entonces éste debería ser el contenedor de cierre para el fluido del contenedor. Ahí vamos. Ahora podemos mantener todo esto dentro del fluido del contenedor, así que asegúrate de que el div de cierre esté por debajo de la sección de salida. Ahora, vamos a crear la sección de tarjetas de visita. Vamos a crear una cuadrícula bootstrap para este lado. La clase necesita ser col-sm-12. Al igual que la sección de la izquierda, será el ancho completo de la pantalla en dispositivos más pequeños. Entonces una vez que llegues a un dispositivo más grande, podemos agregar un col-md-6 y esto ocupará seis partes o la mitad del ancho de la pantalla. El tramo izquierdo y el derecho se sentarán uno al lado del otro. Después un nuevo div, y esto va a tener el id igual a tarjeta porque esta es la sección de tarjetas de visita. Utilizamos este id para el estilo y también para la intersección de JavaScript. Pongamos el nombre de la empresa en un encabezamiento de nivel tres, así que pongamos Nombre de la empresa. Simplemente pondremos eso como un Marcador de posición hasta que el usuario agregue algo de información al formulario, y entonces eso anulará el texto del nombre de la empresa. Tenemos que darle un id Porque ahora estamos en la sección de salida, podemos agregar el id de OutputCompany. Entonces a continuación tenemos que hacer el mensaje de salida, que es esta sección aquí. Debajo del encabezado nivel tres, pongamos esto en etiquetas p y luego la id de OutputMessage y esto va a tener una clase bootstrap de pequeña, solo para que sea un poco más pequeña que el resto del texto, y luego el texto de Mensaje de Empresa y luego duplicar esta sección. Esto va a ser para tu nombre o para el nombre del usuario, por lo que el texto es Tu Nombre. Podemos mantener la clase bootstrap de pequeña, pero esta vez cambiar la salida para tener un id de OutputName y duplicar esto de nuevo. Este es el OutputJob. Nuevamente, la clase es pequeña y el nombre de Job Title. Echemos un vistazo. Ya está hecho, ya se ha juntado. Después del título del puesto, también necesitamos agregar el correo electrónico y el número de teléfono. Vamos a duplicar esto dos veces más para outputMail y el texto puede ser de Email:. Por último, OutputTelephone y el nombre de Tel: con dos puntos al final. Debería acercarme eso un poco más y ahorrar. Eso debería ser, una vez que te refresques. Si vas al proyecto, y ahí está toda nuestra información en la tarjeta de visita del lado derecho. Esa es la sección de interfaz de usuario todo completa. En el siguiente video, pasaremos a agregar algo de CSS y también pasaremos a los Javascripts. 39. Añadir las funciones de CSS y Javascript: De acuerdo, entonces ahora la sección de interfaz de usuario está todo terminada para nuestro proyecto de tarjeta de visita. Ahora pasemos al estilo y también agreguemos un poco de JavaScript para que esto funcione. Así que regresa a Brackets, y luego tenemos que empezar en el style.css. El primero que quiero hacer es mover el Nivel 1 Encabezado hacia el centro y solo hacerlo un poco más espaciado. Por lo que h1 y luego agregar algunas alineaciones de texto al centro y también algo de relleno. Por lo que 20 pixels en la parte superior e inferior y cero en la izquierda y la derecha. Entonces agreguemos un poco de estilo a la tarjeta de visita. En la página de índice, le daremos a la tarjeta de visita un DNI de tarjeta, para que podamos usar eso en estilos del CSS. Entonces vamos a darle algo de ancho de 400 píxeles, una altura de 250 píxeles, y luego un borde para ir alrededor de la tarjeta de presentación de 1 píxel y una línea sólida, y luego solo un poco de relleno de 10 píxeles, y esto mantendrá todo el texto dentro del borde exterior. Ahora, sólo se ve un poco más como una tarjeta de visita. De hecho, solo pondremos una regla horizontal justo por encima de tu nombre. Por lo que de nuevo a la página del índice. Vamos a poner hr después del Mensaje de la Empresa. Entonces ahí está tu [inaudible] débil regla horizontal, solo para separar el nombre de la empresa con la información de la persona. Ahora agreguemos algunos estilos a la sección de fondo del formulario. Por lo que le daremos a esta sección de formulario una clase personalizada de fondo. Entonces usemos eso en el style.css. Entonces démosle un color de fondo de un color gris claro, que es eee, y un poco de relleno de 30 píxeles, y luego algún margen en la parte inferior y esto, te van a ajustar a 30 píxeles. Esto es solo para la vista móvil. Por lo que cuando el formulario esté apilado encima de la tarjeta de visita, solo mantendrá un poco de distancia entre los dos. Entonces guarde eso. Entonces ahora tenemos un ligero color de fondo para separar la sección de formulario de la tarjeta de visita. Eso se ve un poco mejor ahora. Tenemos toda la interfaz de usuario completada, y hemos añadido un poco de estilo para que se vea un poco más bonito. Entonces ahora pasemos a agregar algo de JavaScript, a hacer que esto funcione realmente. Por lo que queremos que las entradas del usuario desde la izquierda aparezcan luego en el lado derecho, luego poblar la tarjeta de visita para que el usuario pueda ver exactamente cómo será su tarjeta. Entonces vamos a entrar en el custom.js. Podemos crear las funciones que creamos dentro de la página de índice. Entonces el primero que tenemos que hacer es PrintCompany. Esta es la primera función a crear. Entonces solo copia eso y luego pasa al custom.js, función PrintCompany. De acuerdo, entonces, ¿qué es exactamente lo que queremos que haga esta función? Bueno, si echamos un vistazo a nuestra página de índice, lo que queremos que haga la función es agarrar los elementos HTML del lado derecho. Por lo que necesitamos hacerlo con document.getElementById. Entonces esto es OutputCompany, y luego necesitamos cambiar el innerHTML para que sea el contenido de la InputCompany del lado izquierdo. Entonces hagámoslo ahora. Por lo que document.getElementById. Por lo que necesitamos agarrar la OutputCompany, y luego necesitamos configurar el innerHTML para que luego sea igual a la InputCompany.Value. Entonces vamos a guardar eso y a ver si eso está funcionando bien. Refresca, por lo que ahora deberíamos poder escribir un nombre de empresa dentro de ahí y debido a que usamos en keyup como el manejador de eventos, ahora podemos ver los contenidos mostrados en el lado derecho, y esto desencadena una función cada vez que una clave es prensado. Entonces pasemos ahora al Mensaje de la Compañía. Basta con copiar esta función, y luego podemos pegarla a continuación. la función se le llamaba PrintMessage, y luego el elemento que queríamos agarrar era OutputMessage. Por lo que estamos configurando el innerHTML de OutputMessage para que sea InputMessage. Entonces a continuación, en lugar del innerHTML, necesitamos cambiar el CSS para cambiar el color de fondo y también el color del texto. Entonces función, y el nombre de la función era ChangeBG. Por supuesto, si utiliza algún nombre de función diferente en la página de índice, simplemente cámbielos en consecuencia dentro del archivo JavaScript. De acuerdo, así que para empezar, necesitamos agarrar el valor o el valor de entrada del usuario, y voy a almacenar eso dentro de una variable llamada BGColor. Por lo que el BGColor es igual a document.getElementById y el ID que queremos agarrar es el InputBG y luego en.value. Entonces ahora tenemos el valor de entrada del usuario almacenado dentro de una variable llamada BGColor. Ahora podemos establecer el lado de la tarjeta de visita. Entonces document.getElementById, y el ID que queremos agarrar. Por lo que el color de fondo que queremos cambiar es la sección completa de tarjetas de visita, y esto tenía el DNI de tarjeta. Entonces agrega tarjeta ahí y luego en.style.color, y luego vamos a establecer esto igual a la entrada del usuario, que se almacena dentro de esta variable. Entonces pega eso ahí dentro con punto y coma. Comprobemos que funciona bien. Vaya al Color de fondo y seleccione el fondo que desee. Eso en realidad es cambiar el color del texto, así que solo necesitamos cambiar nuestro estilo.background. Entonces guarde eso. Entonces ahora cuando cambiamos el color, debería cambiar el color de fondo en lugar del texto, así que ahí vamos. Ese pequeño error ahí debió haberte dado una pista de cómo vamos a hacer el color del texto a continuación. Entonces copia esta función y luego pega. La función es ChangeText. Al igual que antes, esta puede ser una variable llamada TextColor. Entonces entrada que queremos agarrar es InputText. Por lo que esto es agarrar el valor que el usuario ha seleccionado. De nuevo, document.getElementById, y seleccionaremos la tarjeta de presentación completa, y luego el estilo necesita tener la propiedad de color. Esto va a ser igual a la variable de TextColor. Sólo comprobemos eso. El Color de fondo está funcionando bien, y luego el color de Texto, está bien, bien, eso está cambiando. Entonces, solo actualicemos eso. De acuerdo, entonces ahora todos estos colores están funcionando. Dejaremos este video ahí antes de que se haga demasiado largo y regresaremos en el siguiente video donde remataremos todo el resto del JavaScript para el proyecto. 40. Acabado del proyecto: Bienvenido de nuevo. Este es el último video del proyecto de Diseñador de Tarjetas de Visita. Vamos a continuar desde donde salimos en el último video. Vamos a empezar por establecer la propiedad “Alinear texto”. Si recuerdas, dentro de la página de índice, si buscamos la sección “Alinear texto”, que está justo ahí, pegamos algunos valores y onclick creamos una función o vamos a crear una función llamada “TextAlign”. Esto va a tomar un parámetro y el parámetro que vamos a utilizar es el id de este botón. Establecemos el id para que sea el mismo la clase Bootstrap de “text-left”, “text-center”, y “text-right”. Cada vez que se haga clic en el botón, el id se cambiará a uno de estos tres valores, y luego podremos agarrar este id y luego cambiarlo para que sea una “clase” y luego eso aplicará los estilos Bootstrap y alinear el texto en consecuencia. Te mostraré cómo hacer eso ahora dentro del archivo JavaScript. Vamos a crear una función. Esta función se llamaba TextAlign. Voy a darle al parámetro un nombre de selected_id Entonces dentro de la función, haremos un document.getElementById. Entonces queremos volver a seleccionar la tarjeta, pero luego queremos añadir un nombre de clase igual al selected_id espero que tenga sentido. Selected_id tirará el id del bono y luego una vez que tenga el id, como text-right, entonces usarás el id y lo establecerás como nombre de clase. Efectivamente, se verá así. ClassName es igual texto-derecho. Esa es una clase Bootstrap, que hará que todo el texto aparezca en el lado derecho, y lo mismo para text-left y text-center. Guardemos eso y comprobemos que funciona bien. Texto Alinear centro, derecha e izquierda. Ahora necesitamos pasar a tu nombre, y tu nombre tenía una función llamada PrintName. Entonces vamos a crear eso ahora en el custom.js. Una nueva función, PrintName. Podríamos hacer esto de la misma manera que antes con document.getElementById. El Id que queremos agarrar está en la sección de salida. Necesitamos agarrar el nombre de salida y luego establecer el HTML interno para que sea el mismo que la sección de entrada. InputName. Entonces cuando frotes el valor y guardes eso. Ahora en la sección de nombre de impresión, solo agreguemos algo a eso. Se puede ver como estamos escribiendo se está imprimiendo en el lado de la tarjeta de visita. PrintJob es más o menos exactamente lo mismo también. Copiemos la función. Esta vez PrintJob. El nombre de salida es OutputJob y el nombre de entrada cambia a InputJob. Después correo electrónico y sección telefónica. PrintImail, agarra el OutputMail y luego inputEmail.Value. Pero en lugar de simplemente imprimir el correo electrónico, queremos que la cadena de correo aparezca justo antes de él. Simplemente agrega eso con dos puntos y un espacio, y luego agrega en la entrada que el usuario ha ingresado dentro del formulario. Entonces lo mismo para el número telefónico. Copia esa función. Esta función es PrintTelephone. El elemento que queremos agarrar es OutputTelephone. El innerHTML es InputTelephone. Después cambia el correo electrónico en la cadena para ser Tel y luego guarda eso. Entonces vamos a refrescar el navegador y luego podemos agregar algunos valores al resto del formulario y comprobar que todo está funcionando. Empresa 1. Voy a añadir algo de texto a estos y comprobar que todo está funcionando. Cambia el color de fondo. Eso está funcionando y el impuesto también está cambiando. The Text Align, eso está funcionando correctamente. Tu nombre, el título del puesto, el correo electrónico está funcionando correctamente. Ahí hay una cadena que pondremos frente al correo electrónico y deberíamos conseguir lo mismo para el número telefónico. Voy a añadir eso ahí dentro. Nos dieron la cadena de tell frente al número. Genial. Eso está funcionando todo. Solo hay una cosa más que hacer y son los botones en la parte inferior. Voy a empezar con el Formulario de Enviar. Todo lo que quiero hacer con el formarioEnviar. Todo lo que quiero hacer con el botón Enviar es crear una alerta para alertar al usuario si ciertos valores se han dejado en blanco o en otras palabras, podemos poner en los campos requeridos y luego crear una función para que el botón Borrar restablezca todos los secciones del formulario. Empecemos con el botón Enviar. Vamos a crear una función llamada FormSubmit. Este es el nombre de la función que utilizamos dentro de la página de índice. Si nos desplazamos hacia abajo hasta la parte inferior y luego buscamos el botón Enviar, que está justo aquí, y ahí está el botón FormSubmit, que he escrito incorrectamente, así que formSubmit y luego vamos a crear eso ahora, así que hará un if declaración. Entonces “si” y un signo de exclamación, lo que significa no, por lo que nombreDeEntrada. Esto es comprobar si no hay un valor dentro del nombre de entrada. Entonces necesitamos crear una alerta para el usuario. “ Por favor, complete todas las secciones requeridas.” Guarda eso. Ahora hemos puesto el InputName y hemos comprobado si no hay valor. Ahora si no ponemos un nombre dentro de los campos de entrada y hacemos clic, Enviar, obtendremos el cuadro de alerta, que es, “Por favor, complete todas las secciones requeridas”. Pero si tuviéramos un nombre ahí dentro y luego dar click, Enviar, no aparece la alerta. Solo he usado la sección de nombres como campo obligatorio. Puedes poner tantos como quieras dentro la sentencia “if” para probar si hay algún valor o si se está dejando en blanco. Bueno, sólo voy a dejarlo ahora como el nombre y luego pasar a crear el FormReset. Una nueva función en la parte inferior y llamaremos a este FormReset. El modo en que voy a refrescar la página es seleccionando la window.location.reload y esto despejará toda la información dentro la tarjeta de visita y también el formulario haciendo una actualización de página. lo guardamos. Tan solo para agregar algo de información a la tarjeta de visita y luego dar clic en el botón Borrar y eso debería recargar página. Vamos a comprobar si hay algún error ortográfico, así que FormReset, luego página de índice. Eso sólo necesita ser FormReset. Entonces guarde eso y eso debería solucionar nuestro problema y refrescar. Agrega algo más de información ahí. Entonces ahora ojalá cuando hacemos click, Borrar, eso borra la forma. Eso es todo. Ese es el fin de este proyecto. De verdad espero que logres llegar al final por ti mismo o al menos completar una sección de la misma. Siéntete libre de personalizar esto tanto como quieras. Pero por ahora, muchas gracias, y espero que hayan disfrutado del proyecto. 41. Gracias: Por lo que una gran felicitación por llegar al final de este curso. De verdad espero que lo hayas disfrutado y hayas aprendido muchas cosas de ella. Has cubierto bastante en este curso. Empezamos con los conceptos básicos de JavaScript y entendiendo cosas que tienen variables, cadenas, y matrices. También miramos otros fundamentos como las funciones de JavaScript, el alcance y los objetos. Después pasamos a mirar las matemáticas y las fechas y cómo se usan en JavaScript. Entonces vamos a dar un paso a las cosas y vamos a echar un vistazo a control-flow y loops, que implicaban muchas declaraciones como sentencias switch y diversos tipos diferentes de bucles. Después te presentamos JavaScript y el DOM, y echamos un vistazo a cómo podemos acceder a elementos en una página web y cómo podemos manipular los elementos, y completamos varios mini retos en el camino para probar tus habilidades y de verdad esperamos que logren llegar a algo creativo para el proyecto final. Entonces eso es todo. Entonces ese es el final del curso. Muchas gracias. Si lo disfrutaste, por favor no deje una reseña. De verdad ayudaría a otros alumnos, y ojalá te vea pronto en uno de mis otros cursos. 42. ¡Sígueme en Skillshare!: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare, y también sígueme para cualquier actualización y también para estar informado de cualquier clase nueva a medida que estén disponibles. Entonces gracias una vez más, buena suerte, y ojalá te vuelva a ver en una futura clase.