Aprende manipulación DOM en 1 hora - ¡Cómo crear botones y más!

1. Introducción: Hola y bienvenidos a este curso sobre manipulación DOM. Mi nombre es Taylor English. Seré tu instructor para el curso, y estoy muy emocionado por esto. He hecho este curso para que puedas entender fácilmente la manipulación DOM para que puedas divertirte cambiando CSS, haciendo botones, hacer cosas, creando elementos programáticamente. Para eso es este curso. Y he hecho que sea fácil de entender para los principiantes. Y a la gente con experiencia le gustará, estoy seguro de que lo disfrutarás. Ahora quiero repasar de lo que vamos a hablar. Pero antes de hacer eso, quiero contarles a ustedes sobre dónde encontrar más videos como este. En otras clases, puedes ver videos gratis en computadora, consejos y trucos y resolver problemas, así como alguna programación en mi canal de YouTube, que es youtube.com slash C plus hacker, todo explicado. Ahí hay muchos tutoriales geniales. Tengo una clase de Skillshare que puedes ver llamada angular 11 para principiantes, que en realidad también es aplicable a Angular 12, creo. Pero se trata de aprender componentes, servicios de enrutamiento, todas estas grandes cosas. Creo que realmente podría disfrutarlo si disfrutas de este curso. Y se puede encontrar que en este enlace, trataré de poner esto en la descripción de esta clase, este video. Eso es sólo un poco sobre mí. Soy estudiante universitario que estudia ciencias de la computación. Quizás haya algo de credibilidad para ti, pero honestamente, realmente me encanta enseñar esto y por eso quiero compartirlo. Entonces esta clase, lo que vamos a estar pasando son cinco cosas básicas. En primer lugar, te voy a mostrar cómo configurar tus archivos. Esto no es realmente parte de la manipulación DOM, pero sí incluye algunos aspectos importantes de la misma, como vincular tus archivos correctamente para tu JavaScript y CSS. Después iremos, saltaremos a seleccionar elementos, agarrando el HTML, y para que podamos hacer las cosas con él, guardándolo en variables. Entonces hablaré de crear elementos programáticamente para que puedas crearlos y anexarlos a ciertas partes de la página vía JavaScript. Entonces entraremos en manipular elementos con CSS y cosas así. Para que puedas cambiar el color de tu página. Puedes hacer todo tipo de cosas a través del JavaScript. Y por último, hablaremos de botones y cómo se puede hacer clic en un botón y ejecutar funciones si las sentencias bucles. Vamos a entrar en algún detalle sobre esas cosas. Por lo que espero que disfruten esto. Va a ser muy divertido. Y te veré en el siguiente video. 2. Configuración de tu entorno: Muy bien, es hora de empezar con nuestra primera lección. Entonces antes de sumergirnos realmente en la manipulación DOM, solo vamos a empezar configurando nuestros archivos, simples archivos HTML, JavaScript, y CSS. Entonces sigamos adelante y hagamos eso. Querrá crear una carpeta donde pueda trabajar en este proyecto. He llamado a la manipulación del DOM a la mía. Puedes llamar a la tuya como quieras. Voy a estar trabajando en VS Code, que recomiendo encarecidamente. Vamos a crear un archivo y llamaremos a este index.html. Ahora, empecemos. Vamos a salvar eso. Crea nuestras etiquetas HTML. Dentro de eso queremos nuestra etiqueta de cabeza, y dentro de eso queremos nuestra etiqueta de título. Sólo voy a decir relación Dom. Ahora debajo de la etiqueta de cabeza querrás poner una etiqueta de cuerpo. Eso no es lo que quise decir. Ok. Dentro de la etiqueta body, solo podemos decir, pongamos una etiqueta de párrafo y digamos hola mundo. Ahora vamos a crear un archivo JavaScript y CSS que comenzaremos a usar en el próximo par de videos. Vamos a llamar a este app.js. Para asegurarse de que éste esté funcionando. Voy a hacer console.log. Hola Mundo. Nuevamente. Ahora para enlazar eso por debajo de la etiqueta body, vamos a poner una etiqueta fuente de script, y vamos a poner app.js. Ahora esto es importante porque queremos que el JavaScript se ejecute después de que ya se haya presentado el resto del HTML. Va después de la etiqueta del cuerpo. La sintaxis para esto es script y luego fuente es igual, y luego el nombre de su archivo JavaScript. De nuevo, puedes llamar a la tuya como quieras. Ahora vamos a hacer nuestro CSS. Voy a llamar a este style.css para asegurarme de que esto esté funcionando. Hacer cuerpo y vamos a hacer un color de fondo de verde. Ahora enlazamos la hoja de estilo, el style.css aquí arriba en la etiqueta head. Vamos a crear una etiqueta de enlace. Y puedes bajar a CSS aquí si tienes la abreviatura Emmett encendida. Pero todo lo que va a hacer es decirte que es decirle al código que es una hoja de estilo y darle el enlace al style.css. Entonces esta es nuestra sintaxis básica. Esto es todo lo que realmente necesitamos para empezar. Sitio web muy sencillo. Vamos a seguir adelante y eso. Ahora en esta clase voy a estar usando una extensión VS Code para probar esto. Y te mostraré qué es eso y cómo conseguirlo. Veamos. Esta extensión se llama Live Server. Si vas a tu pestaña Extensiones aquí en código VS, solo puedes buscar. servidor en vivo debe ser una de las primeras cosas que aparece. Solo querrás instalar eso. Ahora lo que esto va a hacer es cuando vengamos a nuestro archivo HTML, podemos hacer clic derecho y decir Abrir con servidor en vivo. También podemos detener el servidor aquí. Y también debería haber un botón aquí abajo que diga Go Live. Este botón no siempre aparece. Así que típicamente solo confío en este menú contextual. Si abrimos con un servidor en vivo aquí, entonces esto es lo que obtenemos. Obtenemos nuestro verde Hello World por lo que sabemos que la hoja de estilo está correctamente conectada y configurada. El HTML es bueno. Dice Hello World. Si presionamos Control Shift I en Windows, entonces esto abrirá nuestra consola y dice Hello World. Nuevamente. Sabemos que todo está funcionando correctamente o JavaScript está conectado correctamente. Todo funciona en ese frente y no necesitas preocuparte por este mensaje de error. No es súper relevante para lo que estamos tratando de trabajar en este momento. Pero esta es la configuración básica. Sólo un recapitulativo rápido. Quieres tres archivos, index.html, app.js y style.css. Y recuerda, app.js está vinculado en una etiqueta de script debajo de la etiqueta body, pero aún dentro de HTML. Y la hoja de estilo está dentro de una etiqueta de enlace arriba en la cabeza. ¿ De acuerdo? Muy bien, te veré en la siguiente. 3. Seleccionar los elementos: Muy bien, ahora vamos a hablar de seleccionar elementos. Dentro de la manipulación DOM. Es muy importante que el código sepa cómo obtener los diversos elementos HTML y hacer cosas con ellos. Vamos a empezar por ir a nuestro archivo app.js. Podemos eliminar esta declaración de registro aquí. Ahora, actualmente en nuestra página web, tenemos nuestro Hello World. Aquí mismo. Digamos que queremos seleccionar helloworld para que podamos manipularlo o hacer algo con él. Ahora, ahora mismo, hola mundo es sólo una etiqueta de párrafo. No tiene clases ni identificaciones. Te voy a mostrar cómo seleccionarlo así, pero también cómo seleccionarlo con una clase o una identificación. Ahora, para seleccionarlo así, en realidad, voy a empezar con usar un ID o una clase. Empecemos con un ID dentro de nuestra etiqueta de párrafo tipo ID, y simplemente le daremos el nombre hola. Ahora vamos a app.js. Y queremos hacer es que queremos almacenar la etiqueta de párrafo dentro de una variable para que podamos hacer las cosas con ella. Vamos a decir, digamos párrafo igual. Ahora vamos a escribir documento. Documento es cómo se accede al modelo de objetos de documento. Eso es lo que estamos usando. Casi todos estos comandos, si no todos, comienzan con documento. Decimos punto de documento, obtenemos elemento por ID, y nos aseguramos de que la D en ID sea minúscula. Ahora VS Code es realmente genial y debería estar sugiriendo estas cosas para ti. Si no lo es, entonces echa un vistazo la tienda de extensiones para encontrar una extensión JavaScript gratuita para resaltar la sintaxis. Dijimos obtener elemento por ID. El ID de esto es hola. Ponemos paréntesis y en cotizaciones solas dirán hola. Ahora lo que podemos hacer es que podamos hacer un console.log en el elemento de párrafo. Y nos mostrará lo que realmente hemos seleccionado para que podamos ver lo que estamos haciendo. Si lo guardamos. Olvidé mencionar en el último video, cada vez que guardamos cambios en estos archivos, el servidor, el servidor en vivo automáticamente refrescará la página para que no tenga que hacerlo. Si entramos aquí, todavía dice Hola mundo. Entonces presiona Control Shift. Yo creo que ese es Comando Shift I en Mac. Si no, basta con buscar lo que es ese comando, verás que registró este elemento. Entonces si miramos hacia atrás en el código, dijimos párrafo es igual a document.getElementById. Entonces lo que hemos hecho es que efectivamente hemos sacado el elemento del HTML y lo configuramos igual a esta variable. Ahora vamos a explorar esto un poco y déjame mostrarte algunas de las propiedades que este tiene. Si vamos al párrafo aquí y presionamos dot, va a sugerir todo tipo de cosas. Hay todo tipo de atributos a los que podemos acceder desde esto. Digamos, por ejemplo, queremos acceder al texto en su interior. Podemos decir TextContent. Y ahora estamos registrando el contenido del texto, que es HelloWorld. Ahora hay una serie de cosas a las que puedes acceder desde aquí y nos pondremos más en eso más adelante cuando manipulemos estilos y hagamos botones interactivos en ese tipo de cosas. Pero por ahora así es como seleccionamos un elemento. Entonces digamos que tiene clase. Haremos lo mismo con hola, pero esta será una clase. En lugar de decir get element by ID, queremos usar get elements por nombre de clase. Ahora la clase que ponemos aquí es hola. Veamos qué pasa cuando registramos esto. puede ver que trajo algo llamado colección HTML. Y si abrimos eso , es una matriz. El primer elemento en el índice 0 es una etiqueta de párrafo con una clase de hola. ¿ Y si solo queríamos el elemento? ¿ Cómo seleccionamos eso? Bueno, lo que pasa con las clases es que múltiples objetos pueden tener una clase. Y así si seleccionas los elementos por nombre de clase, obtendrá una matriz de cada elemento que tenga ese nombre de clase, aunque solo haya uno. Ahora, los identificadores son diferentes porque solo debes poner un ID en un elemento. Entonces cuando digas get element by ID, te lo va a dar directamente porque solo debe haber un elemento con ese ID. Si queremos acceder al elemento específico, sabemos que dentro del código es el primero, es el primer lugar donde vemos esta clase de hola. Entonces justo después de esto, podemos poner corchetes para acceder al índice 0º. Y eso va a acceder a ese primer elemento, que será la etiqueta que queremos. Si guardamos esto y regresamos aquí, se puede ver que hemos seleccionado todo ese elemento. Ahora podemos hacer lo mismo si sin usar clase o ID. Digamos por ejemplo, solo queremos seleccionar todas las etiquetas de párrafo. Yo puedo hacer es subir aquí y decir documento dot get elemento por nombre de etiqueta. Recuerda que las etiquetas son estas cosas aquí dentro de las zanahorias o como sea que llames esas cosas. Podemos obtener todas las etiquetas de párrafo diciendo getElementsByTagName p para el párrafo, asegúrese de que eso está entre cotizaciones. ¿ Qué nos muestra eso? Nuevamente, eso nos muestra una colección HTML porque podemos tener múltiples elementos, múltiples etiquetas de párrafo. Veamos qué nos está mostrando aquí. En el índice 0 width, tenemos nuestra etiqueta de párrafo. En el primer índice. Tiene algo también. Tendré que revisar y ver por qué es eso. Ok. Entonces acabo de tomarme un descanso por un segundo y descubrí cuál era el problema. El problema era que en nuestro HTML, tuve que abrir etiquetas para la etiqueta del párrafo en lugar de tener la slash aquí para cerrarla. Uy, pensó que había dos etiquetas P separadas. Yo arreglé eso. Y si venimos a app.js, podemos ver que dice getElementsByTagName, estamos obteniendo la p. Entonces si venimos por aquí y nos veríamos en Chrome aquí, se puede ver que es una matriz con un solo elemento. Ahora, de nuevo, hacemos lo mismo. Podemos hacer lo mismo que hicimos con clases donde podemos seleccionar el índice cero y ver la etiqueta exacta. Hemos aprendido a seleccionar elementos por etiqueta, nombre, por ID y por clase. ¿ Qué sigue? Bueno, digamos que quieres seleccionar un elemento basado en varios atributos y no solo su etiqueta, su clase, o su ID. Ahí es donde entra el selector de consultas. Digamos que tenemos esta etiqueta de párrafo Hello World aquí. Vamos a darle una clase de hola. Entonces tendremos otra etiqueta de párrafo que también tiene una clase de hola, pero también tiene una identificación de, digamos panqueques. Podemos decir algo aquí. panqueques son increíbles. Si salimos, vamos a ver si obtenemos elementos por nombre de etiqueta y lo hacemos salir. Veamos qué, qué viene. Vale, así que tenemos esto, esta matriz. Nuevamente, hay dos elementos. Ahora, aunque decimos obtener elementos por ClassName, saludamos. Va a devolver dos objetos. Por lo que podemos precisar un poco más lo que estamos deseando. Si quiero que tenga una clase de hola y una identificación de panqueques, ahí es donde puedo usar el selector de consultas. Lo que queríamos hacer es venir a app.js. Digamos selector de consulta de punto de documento. Selector de consultas. Básicamente puedes darle varios atributos diferentes de un objeto y los encontrará en lugar especificar id o clase o nombre de etiqueta. Digamos que queremos una etiqueta de párrafo y sabemos que tiene una clase de hola. Ponemos un punto hola. El motivo por el que ponemos un punto es porque esa es la sintaxis que usaríamos en nuestra hoja de estilo. Por ejemplo, si quisiéramos acceder a la clase hola, diríamos dot pillow, y luego le daríamos estilos. Eso es lo mismo que estamos haciendo aquí. Ahora, los identificadores se seleccionan usando signo de libra. Te voy a mostrar eso en un minuto. Vamos a dar salida a esto y ver qué viene. Cuando seleccionamos la clase hola, eligió el primer objeto que pude encontrar. Y así es como funciona el selector de consultas, es vincula el primer objeto que coincide con tus parámetros. Pero eso no es lo que queríamos. Queríamos panqueques son increíbles. Podemos precisar más y decir panqueques de signo de libra. Si recuerdas, teníamos la idea de panqueques aquí. Ahora si sacamos eso, se consiguió el elemento que queríamos. No obstante, porque los panqueques tienen una identificación que lo hace único y en realidad no necesitamos todo esto. Podemos deshacernos de la mayoría de estas cosas y simplemente decir una identificación de panqueques que tiene el mismo efecto. Eso es lo suficientemente específico para que sepa lo que queremos. Y así se puede ver que tenemos sintaxis similar por hacer lo mismo. Hay diferentes formas de hacerlo. Si digo el párrafo dos. Entonces esta es una sintaxis bastante similar justo aquí tenemos un selector de consultas que obtiene lo primero con una idea de panqueques. Aquí, sólo tenemos lo que tenga una idea de panqueques. Para que puedas ver que hay diferentes formas de hacer las mismas cosas. Ahora digamos que cuando estábamos mirando el p dot hola, surgió con solo lo primero que encontré, que es lo que hace QuerySelector. Entonces, ¿y si quiero todo lo que coincida con eso ahora? Bueno entonces lo que puedo hacer es usar algo llamado QuerySelector. Todo lo pondremos en lo mismo. Diremos p dot hola. Eso nos dio esta matriz de lista de nodos de ambos atributos. ¿ Por qué tener selectores de consulta en absoluto si tenemos los otros? Bueno, QuerySelector es que tienes que hacer mucho de este tipo de selección de diferentes elementos. El selector de consultas puede ser agradable porque no tienes que recordar. Obtener elemento por ID, elemento por aula. No tienes que escribir todo eso. Simplemente dices selector de consultas y luego especifica, oh, ésta es una clase, ésta es una ID. Esta es sólo una etiqueta. Así que si queríamos solo la etiqueta, podríamos deshacernos del dot hola y simplemente decir selector de consultas todo p. y eso va a encontrar todo lo que sea un elemento p. Estas son las diversas formas de seleccionar elementos y eso va a ser muy útil cuando empezamos a manipular CSS y usar botones y cosas así. Te veré en la siguiente. 4. Crear elementos: Ahora vamos a aprender sobre la creación de elementos. Básicamente, vamos a crear programáticamente varias etiquetas, agregarles clases e identificaciones, estilos, todo ese tipo de cosas. Y los vamos a insertar en la página. Empecemos en nuestro archivo app.js. Voy a quitar todo esto. Digamos que queremos crear un botón debajo de esto. También voy a deshacerme de los panqueques son increíbles. Digamos que queremos hacer un botón debajo de esto que lo hará, más adelante vamos a hacer que cambie el color de fondo de la página. Pero por ahora, sólo vamos a crearlo y ponerlo en la página. Lo que queremos hacer es crear un elemento. Llamaremos a este botón, será muy creativo y lo configuraremos igual a documento dot create element. De igual manera a los selectores que hemos estado usando, harás cotizaciones simples y luego el nombre de la etiqueta, que es botón. Si fuera una etiqueta de párrafo, dirías p. si fuera div tag, solo dices div. Tan bastante sencillo. Hemos creado un botón. Ahora esto no ha hecho nada a la página porque todo que hemos hecho es configurarla igual a una variable. Vamos a console.log esto y veamos lo que tenemos. Tenemos una etiqueta de botón solo una vacía. Vamos a agregarle algo de texto. Para ello, necesitamos crear lo que se llama nodo de texto. Digamos, vamos a texto nodo igual documento punto crear nodo de texto. Ahora digamos que queremos tenerlo decir cambiar fondo, color. Sólo somos cambiar de color para ser simples. Ahora si volvemos y miramos, hemos creado el libro de texto, pero no lo hemos puesto en el botón. Entonces lo que tenemos que hacer es decir botón dot append. En realidad vamos a anexar niño va a decir nodo de texto. Lo que eso significa es ahora el botón o el texto es un niño o básicamente está dentro de la etiqueta del botón. Si decimos Guardar, entonces nos muestra que tenemos este botón aquí. Y tiene todos estos atributos. Tenemos nuestro botón. Queremos ponerlo en la página. Digamos que queremos insertarlo justo después de esta etiqueta HelloWorld. Vamos a cambiar esto a un ID para que sea fácil de seleccionar. Lo que tenemos que hacer es seleccionar la etiqueta HelloWorld y luego poner el poner nuestro botón justo después, anexarlo. Lo que vamos a hacer es decir Hola, Mundo igual documento dot querySelector. Y vamos a saludar a libra. Después de eso, queremos decir helloworld dot anexar el botón. Ahora ya puedes ver que hemos puesto el botón justo después de él. No hace nada, es sólo texto y podemos hacer clic en él. Pero eso es genial, ¿verdad? Veamos. Lo tenemos justo después del texto. Para que se vea un poco más bonita, un poco más fácil de mirar. Vamos a cambiar algunos de los estilos en style.css. Ir a Button. Estilos para el botón, Todas las etiquetas de los botones. Técnicamente, queremos decir bloque de visualización porque actualmente los botones por defecto a una pantalla en línea, lo que significa que pueden mostrar justo al lado del texto u otros objetos. Una pantalla de bloque. Lo pondremos debajo , mostrará bloques. Si decimos bloque de visualización, eso estará por debajo de esto, queremos darle un poco de espacio entre hola mundo y sí mismo. Entonces hagámoslo, hagamos un margen. En realidad sólo va a hacer un margen. Top cinco píxeles, tal vez diez píxeles. Genial. Tenemos nuestro botón, lo hemos creado. ¿ Qué más podemos hacer con este botón mientras lo estamos creando? Lo interesante es que es casi más fácil crear el botón y poner todo dentro de él antes de tirarlo a la página. Ahora por supuesto, puedes seleccionarlo más tarde y hacer cosas con él. Pero si sabes que eres una clase, si sabes que quieres estilos con ella, es más fácil solo ponerlo completo en un paquete antes de enviarlo a la página. Te mostraré lo que quiero decir. Tenemos nuestro nodo de texto. Digamos. También queremos cambiar el estilo. Ahora en el siguiente video, me pondré más en la manipulación del estilo y ese tipo de cosas. Pero muy brevemente, digamos que queremos. Pero vamos a hacer el estilo de punto de botón. Ahora podemos decir color. En realidad el color de fondo sería, color sería solo el texto. Pero si decimos color de fondo, entonces podríamos decir azul claro. Notarás que esta sintaxis es diferente a la CSS, y solo te diré cómo funciona eso brevemente antes del siguiente video. Normalmente en CSS, si queríamos que el botón fuera azul, azul claro o lo que sea, entonces diríamos fondo, color dash, azul claro, así. La diferencia aquí en JavaScript es que el color de fondo es una sola palabra usando CamelCase, por lo que la primera letra es minúscula y las siguientes palabras son mayúsculas. Color de fondo, azul claro. Salvemos eso y deshámonos de eso. Vamos a mirarlo. No parece haber funcionado. Veamos, tenemos un botón de error estilo dot dot color de fondo no es una función. Entonces lo que está diciendo es que está diciendo, Hey, no se puede poner un parámetro ahí porque técnicamente Esto lo está tratando como una función y no se puede hacer eso. Parece que eso no es lo que se supone que debemos hacer aquí. En lugar de usarlo como una función, vamos a decir es igual a azul claro. Vamos a probar eso. Es un poco difícil de decir, pero definitivamente es diferente. Ya no es blanco. Veamos si podemos hacerlo de color más distinto. Sólo diremos Azul. Definitivamente se puede ver eso, vale, pero ¿y si queremos cambiar el color del texto? Podemos decir estilo punto botón, color de punto es igual a blancos. Genial. Entonces así es como nosotros, cómo agregamos estos diferentes objetos. Tenemos que crear. Imagina que es como una pirámide. Tenemos que a nivel base, necesitamos nuestro elemento, nuestro botón. Y luego un nivel por encima de eso, nuestro texto o cualquier otra cosa que pudiera estar dentro del objeto, creamos. Un nivel por encima que es una especie de nuestros estilos y todo lo demás. Podrías hacer esto con cualquier elemento. No tiene que ser un botón. Podría ser un div, podría ser etiqueta de encabezado. Realmente podrías hacer lo que quieras. Hemos insertado ese botón en un par de videos. Te voy a mostrar cómo hacer que cambie el color del fondo aquí, pero eso es sólo una vista rápida de crear elementos. Muy bien, te veré en la siguiente. 5. Manipular elementos (en especial con CSS): De acuerdo, en este video vamos a hablar manipular elementos en el DOM. Así que actualmente, tenemos nuestro botón aquí, tenemos nuestro Hello World. Tenemos nuestro color de fondo. Veamos qué podemos hacer con estos elementos, empezando por ese color de fondo. No es muy bonito en mi opinión. Vamos a cambiarlo a un color más agradable. En nuestro app.js, solo voy a crear algo de espacio y bajar aquí un poco. Entonces digamos que queremos seleccionar el cuerpo porque el cuerpo es lo que usamos para crear un color de fondo de verde. Aquí podemos decir color de fondo. Uy, lo siento. Podemos. Primero tenemos que seleccionar el cuerpo. Digamos que cuerpo igual documento dot, obtener elemento por nombre de etiqueta. También podrías usar QuerySelector. Dirá cuerpo. Creo que hay que capitalizar éste completamente porque es una etiqueta especial. Veamos si eso funciona correctamente. Ok. Ok. Sí. Ok. Lo siento, me equivoqué. Esto no necesita ser capitalizado. Entonces lo que pasó es cuando escribí en cuerpo aquí mismo y lo registré, nos dio esta colección HTML, esencialmente una matriz de elementos. Eso es lo que es. Y decía, bien, en el primer índice, índice 0, tenemos una etiqueta corporal. Es un poco tonto porque la forma en que funciona el selector de etiquetas es que crea una matriz porque podemos tener múltiples etiquetas. Si decimos obtener elementos por nombre de etiqueta P, obtendrá todas las etiquetas de párrafo. Ahora, hizo lo mismo con el cuerpo, pero sólo podemos tener una etiqueta corporal. Lo que vamos a hacer aquí es seleccionar elemento 0 que nos dio nuestro cuerpo. Y se puede ver que está seleccionado cuando resaltamos nuestro cursor sobre él, selecciona toda la página. Y si abres eso, puedes ver todo. Todo está ahí abajo dentro de él. Vale, así que ahora tenemos el cuerpo. Cambiemos su color de fondo. Así dicen el estilo del cuerpo. El estilo es como accedemos a la propiedad de estilo. Vale, entonces digamos que el color de fondo es igual. Dámoslo. Veamos si el rosa claro es un color. No tengo ni idea. Vamos a intentarlo. Ahí vamos. Sí, eso me gusta. Ese es un bonito color. Permítanme mostrarles la diferencia entre las funciones que usamos antes y estos signos iguales. En el último video. Descubrí cometí un error donde traté de usar el color de fondo. Haz algo como esto donde dije como color de fondo, paréntesis, rosa claro. Pero la cosa es que no es una función. Crear nodo de texto es una función. Es leer algo hecho de texto. Crear elemento es una función. Queryselector es una función, pero estas son propiedades de los elementos. Déjame mostrarte lo que quiero decir. Vamos a seleccionar el, vamos a seleccionar bien, podemos seleccionar la etiqueta cuerpo. Ya hemos seleccionado la etiqueta del cuerpo. Vamos a registrarlo. Demos clic en eso. ¿ Qué obtenemos? El cuerpo en realidad puede no ser el mejor ejemplo. Vamos a intentarlo, probemos el botón. Vamos, vamos a ver. Perdón por eso. Etiqueta del cuerpo. El tag body es un poco raro, así que vamos a seleccionar nuestra etiqueta de párrafo que diga Hello World. Sólo por este ejemplo. Digamos p por párrafo igual. Documento, selector de consultas, libra, hola. Entonces justo debajo de eso, registraremos P. Hemos registrado P aquí mismo. Hemos seleccionado esta etiqueta de párrafo. Pero lo que queremos hacer es conseguir un poco más de detalle es que vamos a poner el p.ball antes de la libra aquí mismo en el QuerySelector. Para que así podamos acceder a más información al respecto. Es un poco confuso. Pero cuando lo registremos, verás que tenemos este P lb hola. Si hacemos clic en eso, verás que hay todas estas cosas. Estas son propiedades de nuestra etiqueta de párrafo. Esto de aquí mismo, esta etiqueta de párrafo tiene toneladas de propiedades. La mayoría de ellos dicen nulo. No los estamos usando. Pero algunos de ellos somos, por ejemplo, estilo. Si haces clic en el estilo, verás una lista de cada estilo, básicamente todos los estilos posibles para este objeto. Nuevamente, la mayoría de los cuales no estaban utilizando. Pero digamos que queremos cambiar el color de ese mundo hola. Bueno entonces podemos venir a buscar aquí y encontrar color. Mi punto con mostrarte esto es mostrarte por qué esto no es una función. Y. cuando tratamos de cambiar el color de fondo del cuerpo, dijimos body dot style dot background, color es igual a rosa claro. hicimos porque este rosa claro, lo siento, el color era una propiedad bajo la propiedad de estilo para este elemento. Si eso fue un poco confuso, está bien. No tienes que preocuparte por ello. Solo debes saber que cuando estás modificando alguna pieza de un elemento, su CSS, es lo que sucede cuando haces clic en él, todas estas cosas. Estas son propiedades que establece igual a un valor que son diferentes a estas funciones aquí mismo. Ahora, en caso de duda, si buscas cambiar estilo, color de fondo para un elemento online, podrás ver la sintaxis para esto si te olvidas o si buscas crear nodo de texto, podrás ver la sintaxis desde un sitio web como escuelas Mozilla o W3. Hay muchos sitios web que te dirán la sintaxis exacta de estas cosas. Pero volviendo a lo que estábamos haciendo, estábamos cambiando el color de fondo aquí. Veamos qué otras propiedades podemos cambiar mientras seleccionamos nuestra etiqueta p. Si hacemos clic en P y presionamos periodo, podemos ver todo tipo de cosas. Por lo que tal vez queremos cambiar el texto y dar click aquí sobre el contenido del texto. Sabemos de antes que el contenido del texto es helloworld. ¿ Y si quiero cambiar eso? Puedo establecer esta propiedad igual a Me gusta Pi. Ahora se puede ver que el JavaScript ha manipulado este elemento, ha cambiado. Es propiedad TextContent. Si lo desea, les animaría a mirar a través de las propiedades de cada elemento. Puedes hacer esto en código VS simplemente presionando los puntos después algo y desplazándote por esta lista, te dirá todo tipo de cosas a las que puedes acceder. Por ejemplo, el próximo hermano, que te dirá qué elemento está justo al lado. O podríamos buscar HTML interno que te mostrará lo que HTML está dentro de él. Se puede preguntar si tiene cierto atributo. Todo este tipo de cosas en realidad, probemos que uno tiene atributo. Digamos. Te voy a mostrar un poco de, un poco más de lógica. El código con esto tiene atributos. Voy a deshacerme de eso. Vamos, vamos a ver, hagamos una declaración if. Diremos que si P tiene el color del atributo, tiene un color de atributo, entonces haremos algo. En realidad lo siento, no el atributo del color, el atributo del color del punto del estilo. No estoy seguro si esa sintaxis exacta funcionará, pero consolaremos el éxito. Veamos qué pasa. Parece que no conseguimos nada. ¿ Y si solo decimos estilo? ¿ Todavía nada? Quizás necesitamos agregar un color. Así que probemos p dot style dot color de punto es igual a azul. De acuerdo, así que mira esto. Registró el éxito porque notó que sí tiene el atributo de estilo. Veamos qué pasa si hacemos estilo de color de punto. Eso no funciona para ello. Entonces atributos en elementos HTML son estas cosas aquí que pones dentro de las cotizaciones que pones dentro del elemento. Entonces pude ver si hola mundo tiene una idea de Hola al venir aquí y decir, si, vamos a ver, vamos a hacer punto. Podemos hacer p dot get atributo. Digamos que queremos el color. Vamos a establecer esto igual a azul. ¿Qué está haciendo esto? Dice, obtener el atributo de color. Oh lo siento. Eso no es lo que estamos haciendo. Acabo de espaciar un poco. Queríamos saber el DNI. Si eso fuera hola. Tenemos el ID de atributo, que está justo aquí. Queremos decir si eso atributos es igual a hola, entonces consolar un éxito. Lo cual hace. Si tuviéramos que decir si equivale a adiós, no hay éxito. Se puede obtener la especie de ver cómo está funcionando esto desde una perspectiva de sobrecarga y ver que hay muchas posibilidades con la lógica JavaScript donde se pueden usar sentencias if. Podrías usar bucles. Por ejemplo, podrías usar un for-loop y decir, para los números uno a diez, crear estos elementos o cambiar sus colores. Hacer todo tipo de cosas. Las posibilidades son básicamente infinitas. Así que te he mostrado muchas cosas aquí. Yo recomendaría si, si algo de esto fuera confuso, tratar de volver a ver el video. Simplemente pasa paso a paso y aprende lo que puedes hacer para manipular estos objetos. Pero solo debes saber que un resumen básico, cada elemento tiene propiedades, tiene cientos u 800 propiedades. Y algunas de esas propiedades tienen propiedades dentro de ellas. Por ejemplo, el estilo tiene color, fondo, color, margen, todo ese tipo de cosas. Se puede acceder a los que utilizan estas diversas funciones. Fuera de elementos. Escribe el nombre de tu variable y escribes periodo. Y te da todo tipo de cosas. Yo exploraría estos. Si no sabes qué es uno, búscalo en línea y te dirá la sintaxis. Te dirá cómo usarlo, y todas las cosas que puedes hacer con él. Pero los veré en el siguiente video cuando hagamos este botón, hagamos cosas. Muy bien. 6. Cómo hacer botones interactivos: En este video, vamos a hacer que nuestro botón haga algunas cosas geniales. Vamos a hacer que cambie color y tal vez salga algo en la consola. Empecemos. Para hacer las cosas un poco más sencillas por ahora, voy a comentar esto y voy a hacer nuestro botón. Voy a codificar en el HTML solo para que sea un poco más fácil de manipular. Muy bien, tenemos nuestro botón de cambio de color. Digamos que si hago clic en este botón, quiero que cambie el color a azul. Entonces lo que vamos a hacer es que necesito crear una función que cuando se ejecute, cambie ese color. Vamos a escribir la función. Llamaré a esto cambio de color. Por ahora, solo hagamos console.log, cambiando de color. Ok. Ahora en nuestro HTML, necesitamos desencadenar esto de alguna manera. En nuestra etiqueta de botón. Vamos a poner un atributo llamado onClick. Para que puedas salir de eso. Pero cuando hacemos clic en él, va a hacer algo. Y vamos a escribir esa función, cambiar de color, asegurarnos de que tengas el paréntesis. Muy importante. Cuando hago clic en este botón, queremos que registren cambio de color. Si abro la consola y hago clic en ella, cambiando de color, se puede ver cuanto más hago clic en ella, más repite ese mensaje. Así que ahora hagamos algo fresco con él. Lo que queremos hacer es que queremos seleccionar el cuerpo y cambiar su color. Entonces vamos a decir dejar que cuerpo igual documento dot. Obtener elementos por nombre de etiqueta, guardar cuerpo. Y recuerda que tenemos que seleccionar elementos 0 para acceder al cuerpo. Y lo hacemos porque cuando seleccionamos etiquetas, se obtiene una matriz de cada etiqueta de ese tipo. Y el cuerpo también lo hace, pesar de que solo usamos una etiqueta corporal. Seleccionamos cuerpo. Y luego decimos body dot style, dot color de fondo es igual a azul. Ahora cuando hacemos clic en nuestro botón, acabamos de cambiar el color a azul. Pero si vuelves a hacer clic en él, no cambia de nuevo. ¿Por qué es eso? Bueno, si miramos el código, sólo le estamos diciendo que lo cambie a azul. Si refrescamos la página, volverá a verde. Pero en cuanto hacemos clic en ese botón, azul. Entonces te voy a mostrar cómo hacer algo de lógica para cambiarla de una a otra. Entonces digamos que hemos seleccionado esta etiqueta aquí mismo. Voy a deshacerme de esto. Vamos a crear una declaración if. Diremos que si el color de fondo del punto del estilo del punto del cuerpo es igual, asegúrate de tener ese doble o triple igual para que no seas solo iguales lo establecerían como una variable, establece un valor a una variable. Queremos un doble o triple igual para asegurarnos de que estamos comparando una calidad. Se puede mirar hacia arriba la diferencia entre doble y triple igual a signos en la línea. Si el color es igual a verde, porque creo que eso es lo que elegimos antes. Si es igual a verde, entonces cámbialo a azul. De lo contrario, lo que significa que el color de fondo ya es azul o algo más. De lo contrario, cámbialo a verde. Lo que esto dice es que obtiene el elemento cuerpo y dice, Ok, si el color de fondo es verde, cámbielo a azul. Si es azul, cámbialo a verde porque tenemos esta declaración otra. Entonces si no es verde, cámbialo a verde. Vamos a mirarlo. Ahí vamos. Estamos cambiando entre azul y verde. Y cada vez que hacemos clic en él. Ahora, como se puede ver, hay muchos textos pasando aquí en esta declaración si y aquí mismo, eso ha sido. Tendencia a lo largo de este curso. Si miras todas estas cosas que hemos creado, hay mucho texto involucrado. Esa es una especie de la naturaleza de la vainilla JavaScript o simplemente JavaScript simple. Una forma en la que podemos reducir eso es si vamos a usar algo varias veces, por ejemplo, este color de fondo, podemos establecer el color de fondo igual a una variable. Podríamos decir dejar que color de fondo igual cuerpo dot estilo dot color de fondo. De esa manera. Podemos simplemente mantener esta parte de color de fondo que reduce significativamente la cantidad de código que necesitamos. Pero ¿funcionó? Veamos. No funcionó. Veamos si hay algún error. No hay errores. Me di cuenta de que el problema es una buena pequeña lección de codificación para ambos. Ver aquí, establecí el color de fondo igual a cualquiera que sea el color de fondo actual. Pero aquí solo estaba cambiando el color de esta variable. Ahora esta variable, una vez que se ha dicho, se desprende del propio elemento corporal. Estamos cambiando esto, pero no lo que queremos estar cambiando. Y así me disculpo, cometí un pequeño error al explicarte esto. Estas dos cosas aún necesitarían ser color de fondo de punto estilo body dot. Porque sí queremos cambiar ese color de fondo original, pero aún podemos comprobar el color de fondo como este. Usando esta variable, que mejora la legibilidad en la instrucción if. Ahí vamos. Ahora lo tenemos funcionando de nuevo. Puede haber formas de moverse por esto si nos tomáramos más tiempo y cavar en ello. Pero tal vez te estés preguntando, bueno, ¿cuál es el beneficio de declarar esto aquí arriba? Y luego eso ahí abajo. En esta situación no hay mucho beneficio. Definitivamente podríamos escribir cuerpo dot estilo dot color de fondo de punto aquí mismo. Pero digamos que queríamos usar este color de fondo en otro lugar. Y digamos, bueno, si blob de color de fondo, blob, es agradable solo tenerlo taquigrafía y muy legible porque es importante tener código legible. Quieres poder mirarlo y ver lo que estás haciendo. Eso es una pequeña pista de lo que podemos hacer con el color de fondo. Ahora, lo daremos un paso más allá y haremos un poco console.log. Digamos que esto será azul y éste. Mientras que la locura, ahí vas. Consola dot log verde. Ahora si abrimos la terminal, ahí vamos. Azul, verde, azul, verde. Es un poco genial. Te puedes imaginar todo tipo de cosas que haces con esto. Considerando que la aplicación del mundo real, bueno, cada sitio web al que acudes básicamente tiene botones. Y cuando haces clic ahí ejecutando JavaScript, eso es hacer todo tipo de cosas geniales. Funciones de llamadas que obtienen datos de Internet que, ya sabes, envían mensajes. Puedes hacer cosas ilimitadas realmente con esta funcionalidad. Entonces esto es sólo una mirada muy básica en ella. Y es algo que quería compartir contigo antes cuando hablaba de acortar tu código usando variables, es que hay una variedad de lo que llamamos marcos JavaScript por ahí, que son esencialmente alguien tomó JavaScript e hizo una versión del mismo que tiene funcionalidad adicional o sintaxis más fácil en el código. Eso se llama marco. Y es posible que haya oído hablar de estos, algunos de nuestros jQuery Angular React View, estos son todos marcos de JavaScript. Solo son formas diferentes de escribir el código. Cada uno tiene sintaxis diferente, características diferentes. Y así que si usted está teniendo ese código abreviado es realmente importante para usted, entonces yo sugeriría buscar en un marco. Lleva algún tiempo aprender, pero puede ser una experiencia muy gratificante. menudo cuando tienes un sitio web de aplicaciones grande y complejo que estás tratando de hacer las cosas, con la manipulación DOM. Se puede desorden rápidamente. Quiero decir, te imaginas tener todas estas funciones y solo todo este código escrito aquí. Es mucho. Y eso es solo la naturaleza de la vainilla JavaScript o JavaScript simple. Pero esta función de cambio de color. Si yo fuera a hacer esto en Angular, por ejemplo, sólo puede tomar tres líneas de código. ¿ Quién sabe? Simplemente puede ser mucho más fácil hacer las cosas más rápido. Pero esto es, es importante saber estas cosas porque muchos de estos principios de manipulación DOM que utilizamos con JavaScript simple se utilizan en esos otros frameworks. Sé que te mostré un ejemplo muy básico de solo cambiar el color de fondo a través de este botón. En el siguiente video, voy a hablar del proyecto que quiero que hagas. Eso puede ser realmente gratificante, eso realmente puede enseñarte mucho. Porque el mejor maestro que creo es hacerlo tú mismo. Simplemente cavando , probando cosas. Voy a hablar un poco de eso, pero eso es todo por este video. Esto sólo un resumen rápido. Hablamos de hacer que nuestro botón haga cosas. Entonces usamos el atributo onclick y lo configuramos igual a una función. Y esa función es importante. Tuvimos que declarar eso dentro de ella. Podríamos hacer lo que sea, lo que quisiéramos. Ya sabes, ni siquiera tienes que manipular el HTML. No tienes que manipular la página. En esta función, podría hacer algo totalmente diferente. Podría calcular matemáticas. Podría, hay una serie de cosas. Pero básicamente seleccionamos los elementos e hicimos una declaración if para cambiar el color dependiendo de a qué se fijó el color de fondo. Ok. veré en el siguiente video. 7. Proyecto/conclusión: Muy bien chicos, han llegado al último video de este curso de manipulación DOM. Deberían estar orgullosos de ustedes mismos. Las habilidades que has aprendido aquí van a ser muy importantes en cualquier desarrollo web que hagas. Y realmente solo mejora tus conocimientos de codificación en general. Estas son cosas que realmente me fascinan que disfruto y espero que también lo hayas disfrutado. Para ayudarte a disfrutar un poco más, para ayudarte a aprender más. Voy a hablar un poco del proyecto ahora mismo. Para este proyecto, es muy sencillo. Solo quiero que explores, exploras cada función puedes encontrar cualquier cosa que te parezca interesante. Quiero que lo pruebes. Si tienes una idea de algo sencillo que quieras hacer como, Hey, si hago clic en este botón, quiero cambiar el texto de la página a algo. O voy a calcular algunas matemáticas. Puedes hacer una calculadora básica o realmente lo que quieras. Quiero que vayas a probarlo, explorar funciones, usar las capacidades del código VS que te enseñé así como las Herramientas para Desarrolladores de Chrome para ver los atributos, para seleccionar las cosas que quieres cambiar. Hay tantas cosas que puedes hacer. Incluso podrías intentar hacer una página web completamente fuera de escapar por completo con elementos creados por JavaScript sin HTML o CSS codificado. Ese podría ser un reto genial. Pero en realidad solo quiero que te diviertas. Quiero que explore y comparta sus creaciones con los demás. Si aprendes algo, muéstralo a otra persona. Creo que tomarte el tiempo para cavar a través esto y no lo aprendí tú mismo un poquito y compartir tu éxito con los demás va, sólo se va a sentir realmente bien. Espero que ustedes hayan disfrutado de este curso. Espero que me lleves arriba en este proyecto y solo pruébalo por 15 minutos. Intenta manipular objetos, intentó hacer algo genial con JavaScript y manipulación DOM. Si ustedes disfrutaron de este curso, por favor echa un vistazo a mis otros cursos en Skillshare. Tengo uno en Angular y componentes, servicios, todo tipo de cosas, enrutamiento. Ahí hay un gran curso Angular. Yo recomendaría ir a comprobarlo y estaré publicando más clases ojalá pronto en el futuro. Así que por favor echa un vistazo a esos también y compártelos con tus amigos. Eso realmente podría beneficiarse de este conocimiento. Pero hasta entonces, Mi nombre es Taylor y ha sido un placer ser tu instructor. Y te deseo lo mejor.