Documentación de la serie de modelo de objeto 2023: parte 4: eventos de DOM (creación, escucha y reacción ante eventos)

1. Introducción a la clase: eventos DOM: Woo hoo, mis queridos alumnos. Bienvenido, Bienvenido de nuevo a otra clase emocionante en toda una serie todo sobre el dom. Yo soy Clyde, voy a ser tu instructor y espero que te hayas estado siguiendo porque cada clase sí se construye sobre sí misma. Pero esta clase puede estar tomando de forma independiente o iCloud, lo que es esto posible de esta clase es todo acerca de eventos. Ahora si las venas son cruciales de entender a la hora de trabajar, porque muchas veces no solo quieres afectar al DOM. No quieres empezar a meterte con una aplicación web hasta que ocurra un evento. ¿ A qué me refiero con un evento? Bueno, hay muchos tipos diferentes de eventos y cada tipo de evento tiene sus propias propiedades y métodos adscritos a él. Eventos como eventos keyup. Cuando el usuario toca el teclado, ¿qué pasa con un evento de clic? Eso es común cuando un usuario hace clic en un botón, a veces quieres que se muestre algo, a veces una vena de desplazamiento, a veces un evento de carga de página, la lista continúa, son toneladas de ella. Pero antes de que incluso nos metamos en los diferentes tipos de venas, hay que entender los eventos traídos sólo los eventos. Es necesario comprender la diferencia entre los oyentes de eventos y los manejadores de eventos. Es necesario entender cómo a los a la página. Y sí tenemos una variedad de formas en las que podemos hacer esto. Podemos usar oyentes de eventos en línea, propiedades de eventos en línea, y podemos usar el método AdDeventListener. Entonces voy a estar discutiendo todos estos. Voy a estar discutiendo los pros y los contras de usar uno sobre el otro. Voy a recomendar lo que creo que es el mejor enfoque que realmente va a ser divertido. Entonces sin más preámbulos mi idea estudiantes, Vamos a entrar a la primera conferencia sobre DOM Eventos, peso icono, audios. 2. Qué es un evento: Nos estamos metiendo en ello. Súper, súper emocionado. Estoy súper ampeada y todo un Po2. Este va a ser un curso realmente impresionante sobre técnicas avanzadas cuando se trata de manipulación DOM. ¿ Y por qué este curso es tan emocionante? Bueno, por la sencilla razón de que hasta ahora, al aprender los fundamentos DOM, prácticamente sólo has visto cómo modificar el DOM en la consola. Y esto significa que es temporal. Es decir, cada vez que se actualizaba la página, perdían nuestros cambios. Objetivo en este curso es combinar lo que hemos aprendido hasta ahora para crear páginas dinámicas. Y para poder hacer esto, tenemos que entender una palabra simple que tiene tema muy complicado, eventos. De acuerdo, pared delgada, ¿qué son los eventos? Déjame sólo agarrar esta roca y tirarla a la pantalla. De acuerdo, Esta es la pregunta, ¿qué es un evento? Bueno, siempre me gusta empezar corsé de manera simplista en las mismas grietas y evento es solo una acción que ha tomado un usuario o un navegador. Y los muchos tipos diferentes de eventos como cuando un usuario coloca el mouse sobre un elemento, cuando un usuario hace clic en un elemento, envía un formulario, el navegador puede incluso enviar las venas cuando la página termina de cargarse. ¿ Y cuando un usuario presiona una tecla? Estos son sólo pocos ejemplos de diferentes tipos de eventos, pero son muchos, muchos más. Por lo que sabemos que un evento es una acción que realiza el navegador del usuario. Es importante, sin embargo, un evento siempre se lleva a cabo en el navegador. Está bien, genial. En un nivel muy alto, sabemos lo que es un evento. Sabemos que se lleva a cabo un tipo de raro. Pero, ¿cómo usamos los eventos para concentrarnos en esa palabra? ¿ Cómo accedemos a estos eventos? ¿ Cómo interactuamos con ellos? ¿ Cómo escuchamos estos eventos? Y la respuesta es tambores. Javascript. Eso es correcto. Javascript en caso de que esté relacionado con JavaScript. Y al codificar respuestas de JavaScript que se ejecutan sobre un evento. que los desarrolladores pueden mostrar mensajes a nuestros usuarios, podemos validar hija, clic de botón del reactor, y muchas, muchas otras cosas. Es muy, muy emocionante que haya una salvedad. Solo quiero decir, sí, webby venas en no parte del lenguaje JavaScript central. Se comporta mal esta distinción en mente. Entonces lo que intento decir es que las propias venas nos son dadas por la API DOM. Recuerda las API DOM integradas en el navegador. Javascript es solo uno de los muchos idiomas que normalmente usamos para acceder e interactuar con estos eventos. ¿ Eso tiene sentido? Eso espero. Y no te preocupes si estás un poco perdido. Todo lo que vamos a estar entrando en toneladas de detalle en este curso sobre eventos. De verdad te vas a convertir en gran maestro y eventos estoy súper, súper emocionado. Así que mantente motivado, sigue adelante. Y nos vemos en la próxima conferencia. 3. Dos cosas más importantes que saber: Recuerde, los eventos son cruciales para entender y dominar el desarrollo front-end. Y por eso voy a pasar bastante tiempo en esta primera sección del curso explicando eventos en venas son solo acciones que realiza el usuario o el navegador. Si bien puedes ejecutar una función cuando tu página se carga, en su mayoría, querrás ejecutar código cuando el usuario hace algo así como cuando un usuario hace clic en un enlace en el formulario desplaza su ratón sobre un objeto o hace algo más. Y recuerden, todas estas acciones se llaman eventos. Y como mencioné en la conferencia anterior, muchos tipos diferentes de eventos. Y cada uno tiene su propio nombre. Por ejemplo, cuando un usuario hace clic en un botón, sorpresa, sorpresa que se despide el evento de clic. Cuando el usuario presiona una tecla. Se dispara un evento de pulsación de teclas cuando su navegador cuenta y carga todos los datos del servidor, se dispara un evento de carga. Entonces solo recuerda, al igual que en tu vida personal, tienes muchos eventos diferentes, como una fiesta de cumpleaños, un evento de boda, etcétera, etcétera. Sucede lo mismo en tu navegador. Son eventos que suceden todo el tiempo. ¿ De acuerdo? Está bien, ya lo consigues. Sigamos adelante. Necesitas entender dos cosas para dominar los eventos y no son tan difíciles. ¿ Cuáles son? En primer lugar, necesitamos entender cualquier oyente de eventos. ¿ Qué es un oyente de eventos? Es bastante intuitivo. En realidad. Un oyente de eventos adjunta una interfaz receptiva a un elemento. Cabezas frescas, un poco de agua bocante. Es decir, piénsalo así. Cuando adjuntamos un oyente a un elemento, estamos permitiendo que ese elemento en particular espere y escuche a que se dispare un evento dado. Segundo, tenga sentido. No te preocupes si aún no lo entiendes del todo. Vamos a estar viendo muchos, muchos ejemplos en este curso. Por ahora, sólo entendemos que necesitamos poner un oyente sobre un elemento para poder escuchar un evento en particular. Y no sólo hay un tipo de escucha. Son tres formas de asignar oyentes de eventos a elementos. Tenemos oyentes de eventos en línea en propiedades de línea, o podemos usar oyentes de eventos. Y vamos a repasar los tres métodos para asegurarnos de que estés familiarizado con cada forma y que se pueda activar el evento. Y entonces por supuesto, vamos a estar discutiendo los pros y los contras de cada método. De acuerdo, así que hemos hablado sobre el oyente del evento. ¿ Cuál crees que lo segundo más importante es cuando se trata de evento? Piénsalo. ¿Puedes adivinar? Tenemos un elemento que está escuchando un evento y ahora decimos que un evento realmente sucede. ¿ Qué pasa después? Ahora seguro que lo adivinaste. Necesitamos un manejador, necesitamos algún tipo de ejecución. Tenemos que decirle al navegador, vale, Genial, ¿Qué haces? Y eso nos lleva a los manejadores de eventos. El punto importante a destacar es que cada evento disponible, un evento click, un evento keypress, un cetera excéntrica, tiene que tener un manejador de eventos. Y un manejador de eventos solo un bloque de código. Por lo general, se ejecuta una función de JavaScript que tú y yo escribimos como programador cuando ocurre el evento. Y cuando un evento ocurre como programa es como usar palabras de fantasía, así que solo usamos la palabra peleas. Cuando un evento se dispara. Ejecutamos esta función de manejador. Y un poco de tu información, mucha gente, y cuando comienzas a buscar en Google estas cosas, muchos desarrolladores a menudo se referían a EventHandlers como oyentes de eventos. Y aunque son bastante cercanos, ellos, estrictamente hablando de no lo mismo. A pesar de que siempre trabajan en tándem, trabajan juntos. Sólo recuerda que el oyente escucha el evento que está sucediendo. Y el manejador es el código que se ejecuta en respuesta a que ocurra ese evento. Ahora mismo, en realidad sólo quiero hacer una pausa aquí. Te has metido en cosas muy, muy importantes cuando se trata de eventos. Y quiero que hagas una pausa. Yo quiero que solo, quiero que esto se empape. Y en la siguiente conferencia, quiero que veamos estos métodos de escucha con un poco más de detalle. 4. Escuelas de eventos en línea: Muy bien, vamos a retomar donde lo dejamos. Recuerda, estábamos hablando de, uh, venas y necesitábamos entender las dos cosas más importantes para los eventos de Moscú y esos eran oyentes de eventos y manejadores de eventos. Ahora mismo, quiero que nos concentremos en el oyente. Y en particular, quiero mirar las diferentes formas en que podemos agregar oyentes a un elemento. Y para refrescar tu memoria. Había tres formas que con tres formas diferentes podríamos agregar oyentes a los elementos. Listeners de eventos en línea en propiedades de línea y oyentes de eventos. Raro, no es muy intuitivo, pero quiero que hablemos de cada uno. Y al hacerlo, tendrás una sensación mucho más intuitiva de cómo funcionan. Entonces yo invitado no es mejor lugar para empezar entonces con el primer método, oyentes de eventos en línea. Ahora lo que quiero que hagamos es que asumamos que tenemos un botón en nuestra página y cuando se haga clic en ese botón, todo lo que entramos es alerta, boom, al usuario. Una página muy sencilla. Nada de fantasía. Entonces, ¿cómo íbamos a ir a escribir esto? Todo en primer lugar, necesitamos nuestro HTML. Nuestro HTML consta de un elemento de botón. Dentro del elemento botón, aquí es donde ocurre la magia. Como puedes ver, escribimos onclick, asignamos eso a una función llamada boom. No te preocupes demasiado por cómo funciona todo esto y de dónde sacamos ese onclick. Por ahora, solo darse cuenta de que ese evento onclick o esa palabra onclick nos es proporcionada por la API DOM. Después lo asignamos al valor del boom. Y esa quemadura en nuestro caso, va a ser JavaScript. Va a ser una función de JavaScript que ejecutemos. Lo que significa que sí, tenemos que escribir JavaScript. Podemos poner esto en línea y etiquetas de script o puede ser en un archivo externo. Pero aquí vamos. Tenemos nuestro JavaScript. Definimos una función llamada boom. Y sí, solo alertamos quemado a la pantalla. Esto mis queridos alumnos es un EventListener en línea. Pero déjame mostrarte cómo funciona. Déjame saltar a nuestro editor de codificación y vamos a verlo en acción. De acuerdo, Veamos cómo funciona un oyente de eventos en línea. Y en este curso vas a estar viéndome usar mucho código de Visual Studio. En primer lugar, es gratis. En segundo lugar, es impresionante. Y en tercer lugar, tenemos que usar un editor de texto, y éste es justo el que elegí. Ahora, cuando estoy usando Visual Studio Code, también están usando Live Server y quiero vivir servidor hace en su núcleo muy básico porque me permite ejecutar mi computadora como servidor. Entonces lo que puedo hacer es cuando cambio las cosas en el HTML lo haría automáticamente y actualizando el navegador. Si quieres saber más, por favor pregúntame en Q&A De lo contrario, es super, super simple a dominante Visual Studio Code. Mira la pestaña Extensiones y luego descarga Live Server. Pero lo suficiente dicho, veamos un oyente de eventos en línea y cómo funciona. El punto de partida es escribir nuestro HTML. Se puede ver aquí pongo una página en blanco. Entonces, solo sentémonos una plantilla HTML muy en blanco. Entonces quiero crear una etiqueta de cuerpo dentro de una etiqueta de cuerpo, insertemos este botón. Y por supuesto, llamémoslo Click Me. ¿ Y qué tenemos que hacer? Eso es correcto. Tenemos que agregar esta propiedad EventListener en línea y se llama onclick. Nuevamente, esto nos lo da la API DOM. Esta no es una palabra que he elegido. Tenemos que usar esta palabra on-click. Si queremos escuchar el evento click, entonces lo siguiente que tenemos que hacer es después definir un manejador de eventos. Se va a llamar cada vez que se despide este evento. Y en este caso, quiero definir una función llamada boom, pasamos por esto, vimos esto. Entonces ahí vamos. Así es como HTML. Pero ahora mismo, si guardamos esto y sabes qué, déjame simplemente quitarme haciendo clic en ese botón que vemos en la esquina inferior derecha, es decir de Live Server. Y eso me permite realmente mostrar esto en una vida de navegador. Haga clic en ese botón. Y aquí vamos. Estos son el botón Click Me que definimos en nuestro HTML. Pero si hago clic en eso, no pasa nada, ¿verdad? Y si inspeccionamos este documento, deberíamos ver algún tipo de error en la consola. Entonces sí, la consola se actualiza y vamos a hacer clic en el botón. Boom, no está definido. Esto tiene sentido completo, derechos. Y es por ello que tenemos que incluir nuestro JavaScript porque tenemos dos define función boom. Volvamos a nuestro código. Ahora es incluir etiquetas de script. Y sé que no es ideal tener JavaScript en línea, pero ¿sabes qué? Este es un ejemplo tan sencillo. Habrá bien para nuestros propósitos. Todo lo que tenemos que hacer ahora es definir una función llamada Bu. Curso tenemos que usar la palabra clave function en JavaScript dentro de definir un nombre de función, que en esta instancia se llama boom. Y en los tirantes rizados esto es podemos definir la carne de nuestra función. En este caso, sólo queremos alertar boom, a la pantalla. Entonces si guardamos esto, vuelve a nuestro navegador. Quitémoslo ahora. Y si hacemos clic en este botón, boom, tenemos esa alerta. ¿ Qué tan genial fue esto? Y este es un oyente de eventos en línea. Impresionante. Seguro que puedes ver lo fácil e intuitivo que es en realidad. Y si, ¿Por qué sabías que este EventListener en línea es el método más temprano para registrar manejadores de eventos encontrados en la web. Bastante interesante. Entonces esto es algo así como el punto de partida. Este fue el punto de entrada a los oyentes de eventos. Qué cool. Y podría parecer fácil de usar como atributos de manejador de eventos. Si sólo vas a hacer algo realmente rápido que rápidamente se volverán inmanejables e ineficientes. Pero de todos modos, vamos a estar discutiendo más de esto más adelante. Déjame que no te dé una alerta de spoiler. 5. Propiedades en línea: Antes de seguir adelante, solo quería liberar energéticos en medio de los oyentes de eventos y los manejadores de eventos. Esa propiedad onclick es la propiedad de oyente débil que se está utilizando en esta situación. Es esencialmente como cualquier otra propiedad que usaríamos en un botón, como contenido de texto por ejemplo, o estilo. Pero en este caso, sabemos que es un tipo especial de propiedad porque cuando la configuramos igual a algún código, sabemos que la cuajada se ejecute cada vez que el evento se desencadene en el botón. Por lo que solo ten en cuenta que onclick es el oyente. Ese boom, por supuesto, es el manejador de eventos real. Está bien, bien, ya nos tienes, vamos a seguir adelante. Hemos visto en línea oyentes de eventos, ahora es el momento de mirar las propiedades en línea. Y de nuevo con propiedades continentales, vamos a necesitar nuestro HTML y vamos a necesitar JavaScript. Pero como verás, nuestro código está escrito ligeramente diferente. Con el HTML, literalmente sólo tenemos un elemento de botón. Qué fácil e intuitivo es que no tenemos código extra. No es tan desordenado porque acabamos de tener un elemento de botón con Click Me, gusto entre las etiquetas, algo borroso. Voy a JavaScript entonces tiene que ser un poco más complicado, pero al menos esto juntos y en un solo lugar. Entonces lo primero que tenemos que hacer, y lo hemos visto en la Parte 1 de nuestra serie. Esto lo sabemos. El primero es que tenemos que agarrar ese botón y aquí empezamos en el documento, la página web predeterminada. Accedemos a un inmueble llamado QuerySelector. Y por supuesto agarramos botón. Ahora dentro de nuestro JavaScript, podemos agregar una propiedad en línea llamada, lo adivinaste al hacer click. Y recuerda que en las propiedades de línea muy especiales porque cuando ese evento se dispara, automáticamente ejecuta el código al que le asignamos esa propiedad. Sí, asignamos la alerta de código. Boom, Vamos a comprobarlo en nuestro editor de codificación. Ahora queremos ver en línea las propiedades y cómo funcionan. Entonces eliminemos nuestro código del ejemplo anterior aquí. Y empecemos solo con nuestro botón. Y por supuesto, nuestro HTML ahora es aún más simple, ¿verdad? Tenemos un autobús y aunado click conmigo. Pero en este punto no hemos adjuntado ningún oyente, ningún oyente de eventos a este elemento todas las noches. Y por eso nuestro JavaScript consigue vacunas un poco más complicadas. Pero entonces al menos todo nuestro código está en un bloque que no está dividido entre HTML y JavaScript. Entonces el primer paso es crear nuestra etiqueta de script, como vimos en el ejemplo. Y empinada. Uno. Lee tus elementos. Queremos agarrar botón porque a eso queremos adjuntar. Vamos a llamarlo botón btn. Y por supuesto, estamos muy familiarizados con esto desde la primera parte. Tenemos que empezar en nuestro objeto de documento. No lo hicimos. Xy es una propiedad llamada QuerySelector. También podemos hacerlo de otra manera es así como quiero usar y queremos ver a alguien animales. Entonces ahí vamos. En realidad nos hemos ido. Segundo paso. ¿Te acuerdas? Escribamos. Tenemos que sumar las venas y el código para ejecutar. Entonces es bastante simple. Simplemente agarramos nuestro botón dentro, queremos agregarle propiedad a todo onclick, ¿no? Y otra vez, esa palabra onclick nos es dada por la API DOM y permanecen. Pero, ¿qué pasa cuando se despide este evento de click? El código que asignamos esta propiedad onclick se ejecutará automáticamente. Entonces eso es lo que tenemos que hacer ahora. Tenemos que firmarle un bloque de código. Aquí. Voy a estar usando la nueva era. Si no sabes qué es eso, no te estreses. Te tengo cubierto. He hecho todo un curso sobre JavaScript. Estamos hablando de cosas como esta. En realidad se llama los círculos de abuelita completa JavaScript, paz. No se puede dejar, si ya lo sabes. Sigamos adelante. Aquí vamos. Entonces ahí vamos. Y por supuesto, dentro de estos tirantes rizados es donde pertenece la carne, el corazón de nuestro código. Y sí, conozco instancias de terrena no muy gruesas porque lo único que estamos haciendo es alertar a la pantalla. Entonces, ¿lo tienes? Esta es una propiedad en línea. Y se llama propiedad en línea porque lo pensaremos de esta manera. Nuestro HTML es solo estándar. No hacemos nada especial. En nuestro JavaScript. Agregamos esta propiedad en línea llamada onclick, y no siempre tiene que ser desclicada. Toda su plétora de cosas que podemos sumar aquí. Solo estamos viendo el evento onclick. Tenemos que agregar eso como propiedad a nuestro botón. Y entonces por supuesto definimos el código que se ejecuta. Netamos VTE A pesar de. Si volvemos a nuestro navegador, refrescamos, haz clic en este botón, y ahí vamos. Misión bomba concluida. 6. El método addEventListener(): Bien hecho cerca del helio, viniendo por el camino, acabamos de ver en propiedades de línea, esperanza se está volviendo más intuitiva y espero que se diviertan. Entonces ahí vamos. Hemos mirado a los oyentes de eventos en línea. Hemos mirado propiedades en línea. La tercera y última cosa que tenemos que discutir ahora son los oyentes de eventos. Nuevamente, necesitamos HTML y JavaScript. Cómo HTML puede ser muy simple, al igual que cuando usamos en propiedades de línea. Y al igual que cuando estábamos mirando propiedades en línea, tenemos que incluir toda nuestra magia en el propio JavaScript. Entonces el primer paso es que tenemos que agarrar el botón. Ya sabemos hacer esto. Solo voy a estar usando un selector de consultas para ajustarse a ese patrón. Es ahora que tenemos eso, pero un JavaScript final, lo que quiero hacer ahora es que quiero usar un oyente de eventos. Entonces lo que hacemos es acceder a nuestro botón y agregamos esta propiedad llamada add event listener. Nuevamente, esa es una palabra clave que nos proporciona la API DOM. Se necesitan dos argumentos y vamos a estar metiendo en esto con mucho más detalle más adelante. No te preocupes, ahora, solo date cuenta de que toma dos argumentos. El primer argumento es cuál es el evento que queremos escuchar, y el segundo argumento es el manejador de eventos. Aquí queremos escuchar el evento click y queremos ejecutar un manejador de eventos llamado boom. Es decir, queremos definir una función llamada boom y ejecutar deuda, que es el paso final. Definimos una función llamada boom, que se ejecutará cuando se dispare ese evento. Este método, AdDeventListener, esta tercera solución tiene algunos pros. En primer lugar, es el último estándar que permite la asignación o más de una función como oyentes de eventos a un evento. Eso es realmente lo genial al respecto. Y por supuesto, también viene con una plétora de otro útil conjunto de opciones. De nuevo, no te preocupes aún por el detalle. Nos limitamos a mirar el alto nivel aquí, Saltemos al editor de codificación y veamos cómo funciona esto en acción. Estamos casi, casi terminamos de complacer y lo están haciendo, tan bien. Ahora vamos a estar hablando del método más nuevo, y ese es el método AdDeventListener. ¿ Cómo funciona eso? Bueno, empezamos esto, solo eliminamos todo. Empezamos por ese botón, ese botón Click Me. Otra vez. Nuestro HTML es muy, muy limpio. No es desordenado. Y todo lo que hacemos ahora tiene que estar escrito en JavaScript, lo que, ya sabes, podrías argumentar hace que el JavaScript sea más complicado. Contrarargumento a eso sin embargo, es que al menos todo está en un solo lugar. Por lo que hace que tu código sea mucho más mantenible. Una vez que tu sitio web empiece a ser cada vez más complejo, espero que tenga sentido. Pero veamos un ejemplo. El paso 1 es qué? Eso es correcto. Es lo mismo que el método anterior. Tenemos que encontrar el elemento al que queremos adjuntar un oyente de eventos. En este caso, es la porra. Entonces encuentra los elementos a los que queremos agregar un oyente de eventos. Y sí, los alistados lo pusieron en una variable llamada botón. Por supuesto que accedemos a nuestro documento, accedemos a la propiedad llamada QuerySelector con en el documento y agarramos nuestro botón. Entonces si también una buena, Ahora tenemos nuestro botón. Ya sabes cómo funciona esto mientras entonces ¿cuál es el siguiente paso? El siguiente paso es que tenemos que agregar este método, agregar oyente de eventos a este botón. Pégate para añadir el oyente de eventos add a nuestro botón. Entonces todo lo que tenemos que hacer para eso ya que accedemos a nuestro botón. A continuación, agregamos esta propiedad de oyente de eventos a nuestro botón. Y esta propiedad AdDeventListener es un método más nuevo. Es impresionante. Es realmente, realmente bueno y ya verás por qué más adelante en este curso. Y como mencioné, se necesitan dos argumentos. El primer argumento es el evento que queremos escuchar, que tiene click. Y el segundo ítem, o el segundo argumento es la función que queremos ejecutar, que en este caso, sólo llamémoslo boom, que nos lleva al tercer paso. Y eso es definir esta función de auge. Paso tres lleva Fina. Función Boom. Y aquí vamos. Vamos a usar la palabra clave de función que nos da JavaScript. A continuación definimos una función llamada boom. Y por supuesto nuestro boom, eso sólo va a ser una alerta de auge muy aburrida. Ahí vamos. Y si guardamos eso y vamos a nuestro navegador y hacemos click en este botón. Boom, hecho y espolvoreado. 7. Resumen: A quien tienes que tener una increíble cantidad de Walden. Por lo que hemos mirado la aventura en línea en las propiedades de línea y ahora acabamos de ver a los oyentes de eventos en acción. Pero lo único que quiero señalar aquí es que no importa qué método utilicemos, que se nota en los tres producen exactamente el mismo resultado. Entonces cuando se trata de ejemplos muy simples como el que usamos ahora, donde es solo un simple evento de click de botón. Eso realmente no importa qué método utilices. Ya sabes, estas cosas solo dejaron de volverse realmente importantes cuando dejas de bullying. Ciencia mucho más complicada. Pero de todos modos, Suficiente dicho Usted entiende son los tres trabajos que vamos a estar discutiendo ahora estos métodos con más detalle a medida que avanzamos. Y si te pareces en algo a mí, tienes ganas de empezar a meterte en ejemplos más concretos y sólidos. Y confía en mí, vamos a colgar ahí colgando nombre. Nos vamos a estar metiendo en cosas cool, cool en este curso. Nos vemos en la próxima conferencia. 8. Escucha de eventos en línea: descripción detallada: Antes de empezar a avanzar más, sólo quiero recapitular ahora con un poco más de detalle. Cada uno de los tres métodos que acabamos de discutir sobre cómo agregar oyentes de eventos a un elemento. Y el primero que discutimos fue este oyente de eventos en línea. Y como saben, esta es la forma más fácil. Es la forma más sencilla de comenzar a comprender los acontecimientos. Pero como verás en breve, generalmente no deberían usarse más allá de las pruebas y propósitos educativos, pero es un buen lugar para empezar y por eso lo miramos. Y recuerdas la sintaxis, recuerdas suciedad más dura, maliciosa, enfría este ejemplo aquí de un botón. Este es nuestro HTML y sabemos que un oyente de eventos en línea es un poco más desordenado. No es solo HTML recto como este, ¿es así? Tenemos que añadir un atributo, tenemos que añadir una propiedad a este botón. Y en este ejemplo, digamos que queremos escuchar el evento click. ¿Cómo lo haríamos? Bueno, como seguro adivinaste, y como recuerdas, tenemos que añadir este valor de propiedad llamado onclick a este botón. Y como mencioné, este onclick es una palabra clave API DOM. Tenemos que usar esta ortografía específica y así palabra. Si lo escribimos mal, no funcionará. Por lo que agregamos este atributo al botón. ¿Qué hacemos? Bueno entonces tenemos que asignarle un valor, ¿no? Y eso lo hacemos con el signo igual. Y lo último que tenemos que hacer es definir la función que se llama cuando alguna vez se despide este evento onclick. Y en nuestro ejemplo definimos una función llamada boom. Y teníamos esa función definida en un script separado que no tenemos que tener un guión. De hecho, podemos escribir nuestro JavaScript directamente en línea también. Por ejemplo, solo alertemos hola a la pantalla. Ahí lo tenemos. Tenemos un EventListener en línea válido en la pantalla en este momento. Y como puedes ver, es algo intuitivo en economía ya que sabemos que esa función de alerta se ejecutará automáticamente cada vez que se desencadena un evento de click sobre ese patrón. Para recapitular, estamos escribiendo nuestro oyente de clics, AKA en click. Y en este caso también escribimos nuestro manejador AKA esa función de alerta en línea dentro de nuestro archivo HTML. Todo está bien y bien, pero este método no es genial. Bueno, ¿por qué no es genial? Como dije, podría parecer fácil usar un atributo de Event Handler si solo estás haciendo algo realmente rápido, que rápidamente puede volverse inmanejable, ineficiente y no amigable con los motores de búsqueda. Generalmente, no es buena idea mezclar tu HTML y JavaScript ya que se vuelve difícil de pasar. Mantener tu JavaScript todo en un solo lugar es un enfoque mucho mejor. Y si está en un archivo separado, puedes aplicar a múltiples documentos HTML, incluso en un solo archivo, manejadores de eventos en línea en no es una buena idea. Por ejemplo, un botón estaría bien. Pero, ¿qué pasa si tuvieras un 100 botones? Tendría que agregar un 100 atributos a un archivo. Rápidamente se convertiría en una pesadilla de mantenimiento. Y por si acaso aún no estás harta de mi voz, solo quiero conducir este punto a casa una vez más. Se puede comparar un oyente de eventos en línea con escribir CSS en línea en un elemento HTML. Simplemente no es una gran idea. Es mucho más práctico mantener una hoja de estilos separada de clases luego crear estilos en línea en cada elemento de su página. Y de igual manera, es simplemente más factible mantener nuestro JavaScript en un archivo de script completamente separado. Después agregando manejadores de eventos JavaScript y oyentes a cada elemento en nuestro HTML en línea. Simplemente no tiene sentido. Lo tengo Ahora, seguro que lo tenemos. Pero de todos modos, antes de pasar a discutir el siguiente método, quiero que ahora veamos un ejemplo práctico, genial y divertido de usar un EventListener en línea. Y sé que no es la mejor práctica. Pero confía en mí, aprender esto básico y los alienígenas apunta. Ya estoy esperaremos que se lo puedan permitir. Entonces te veré en la próxima conferencia. Digamos que encuentre bien su computadora arriba, prepárese para codificar junto a mí. Ver ahora. 9. Desafíos para el lister de eventos: introducción: Primer ejemplo práctico, super, súper emocionado. Tengo mi café, me mantiene en marcha. la nueva me encanta. Simplemente agradable. De todos modos me mantiene ahí fuera. Se puede ver en el fondo aquí de la pantalla, pensé un sitio web muy sencillo. De hecho, es un sitio web realmente divertido. Y todo lo que quiero hacer es que estoy queriendo cambiar de color y no puede, pero quiero sentar nuestro código de una manera muy práctica excepto por una cosa. Y eso es que vamos a usar un oyente de eventos en línea. Lo sé, y sigo saltando en decir que no es el mejor enfoque, pero son los fundamentos que quiero atravesar y hay que entender lo básico antes de que empecemos a avanzar más. Entienda también por qué las cosas se hicieron de cierta manera. Entiendes por qué Code ha progresado de cierta manera. Sólo si entiendes que de dónde vino, ya sabes cómo se originó. Entonces esta va a ser una conferencia muy divertida. Voy a codificar esto con ustedes. Si no quieres codificar tipo de la configuración, No te preocupes, voy a proporcionar eso en un archivo separado, pero sí te animo mucho a codificar junto con él. Una vez que lo hayas codificado, ese será una especie de punto de partida. Entonces te lo voy a entregar y quiero que intentes resolver el JavaScript. Quiero que intentes acceder al DOM y Ed, este EventListener en línea. Deberías saber cómo hacerlo ha estado arriba y ¿qué queremos que suceda? Bueno, aquí tenemos dos botones. El botón de un solo encendido. ¿ Qué tal hacer todo bien? Y como lo adivinaste a todo se vuelve azul. Y entonces acabamos de tener el mismo botón. Pero resulta que podemos leer ejemplo muy sencillo. Si uno divertido, ¿qué estamos esperando? Saltemos a la toma ya que dejó de cortar. Y voy a construir primero esta página, el código completo, la solución contigo. Por lo que te animo encarecidamente a codificar conmigo. Si no quieres, eso también está bien y siempre que la asignación basada en plantilla, y te veré en la imagen. 10. Desafíos para el lister de eventos: crea nuestro HTML: De acuerdo, ahora, empecemos. Y como pueden ver, tengo un archivo de código de Visual Studio en blanco frente a mí. No lo he incluido nada, así que vamos a tirar de la base de nuestro sitio. Vamos a abrir esta estructura de carpetas y vamos a crear un archivo llamado index.html. Podemos usar, podemos ocultarlo ahora. Y luego empecemos con una plantilla de archivo HTML base y un título. Podemos tener colores cambiantes. Bastante autoexplicativo es explicativo es un metal dentro de nuestro cuerpo. Esto es que vamos a ser sentadillas HTML, vamos a incluir una etiqueta H1. Y por supuesto podemos decir que este es un sitio web realmente divertido. Demos a nuestra etiqueta H1 un DNI de no sé, titulo. De acuerdo, antes de ir más allá, Lo que es realmente genial es que podemos usar Live Server y podemos ver cómo audita esta página sobre la marcha en tiempo real. Entonces hagámoslo. Aquí vamos. Entonces ahí están nuestras imágenes H1, ponlo al ascensor y miran, ¿cómo es eso? Y en realidad podemos ver nuestro código a la izquierda y el resultado de nuestro código a la derecha. Es bastante útil. Ahora es crear un párrafo con un ID de primer párrafo. Y en el párrafo sólo podemos decir Wall-E. El agua es una gran mascota. Ahí vamos. Podemos tener otro párrafo por supuesto, con id de segundo Graph. Y aquí dentro sólo podemos escribir unas palabras. Vali come muchas gráficas. Guarda eso, y puedes verlo actualizado en nuestro navegador. Y luego recuerda que teníamos dos botones, ¿verdad? Esto va a ser con EventListener en línea entra en juego. Entonces leamos eso en un div con una clase de envoltorio. Y podemos tener dos botones. El primer botón puede decir ¿qué tal hacer todo azul? Y el segundo botón puede decir ¿qué tal hacer rojo todo? Y si guardo esto, deberíamos tener nuestros botones en nuestro navegador. Ahí vamos. Deja que el estilo se vea terrible. Así que vamos sólo por el bien de integridad, Editar tabla de estilos en nuestra sección de cabeza. Y es sólo condimentarlo un poco. Sé que no va a ser genial. Este no es un sitio web de campanas y silbatos de lujo, pero vamos a mejorarlo un poco. Lo primero que podemos hacer es alinear todo al centro. Por lo que podemos tomar nuestro H1 y nuestro párrafo y sólo podemos tomar la línea al centro. Ahí vamos. Enlistada empezando a venir, correcto. Empecemos ahora nuestros botones. En primer lugar, podemos mostrarlos como bloques. Por lo que cada botón es su propio bloque. Añadamos algún margen. Ya empieza a verse mejor. Y lo siguiente que quiero hacer ahora es que quiero parecer a estos botones junto con nuestro gusto. Por lo que sólo podemos ir margen. Izquierda es agua. Y por supuesto que podemos ir derechos de margen se altera. Y eso debería parecerle a todo. Enfriar. ¿ Bashar borró? Creo que eso es lo suficientemente bueno para empezar, ¿verdad? Entonces permítanme simplemente aumentar este editor de texto aquí. Entonces aquí vamos. Aquí está nuestro documento base, nuestro esqueleto. Yo quiero pausar el video en este punto de ahí mismo. Yo quiero que pienses en dos cosas. Una, quiero que pienses en cómo puedes agregar un oyente de eventos en línea a cada uno de esos saldos. Y en, quiero que piensen en cómo debemos escribir nuestra enzima. Y me gustaría que incluyera un archivo JavaScript separado con el fin de escribir su pancarta. Entonces solo piensa en cómo podemos hacer esto. Y en la próxima conferencia pasaré por la solución contigo. Te mostraré cómo lo haría. Ver ahora. 11. Desafíos para lister de eventos: solución: ¿ Cómo te fue? Espero que le hayas dado una oportunidad y no importa si te equivocaste o bien. Lo importante es que lo intentaste y así es como aprendes y para eso estoy aquí para ayudarte si te quedas atascado. Entonces vamos a agrietarse. Echemos un vistazo a la solución juntos. En primer lugar, déjame quitarme solo para que puedas ver la pantalla en tamaño completo. Ahí vamos. Y no es cortar la solución. Entonces aquí vamos. Tenemos nuestros botones, pero no pasaría nada, ¿verdad? Si volvemos a nuestro navegador aquí. Y hagamos esto más grande. Si hago clic en este botón, no pasa nada. Tiene sentido, ¿verdad? Porque no le hemos dicho al navegador que haga nada cuando se hace clic en el botón. Y es por ello que necesitamos agregar nuestro EventListener en línea. ¿ Y recuerdas cómo hacerlo? ¿ Cuál es el primer paso? Vamos a probarlo. Necesitamos agregar los atributos a cada botón. ¿ Cuál es el evento que queremos escuchar? Se llama onclick, ¿verdad? A pesar de que tenemos este atributo onclick en este momento, no pasará nada porque en realidad hemos adjuntado un oyente, pero no hemos definido manejador. Entonces si hacemos clic en ese botón, nuevo, no va a pasar nada. Para que hagamos que algo suceda, necesitamos asignarnos y manejador de eventos. Entonces hagámoslo. Vamos a asignarle un manejador de eventos en sí, podríamos incluir todo nuestro JavaScript si aún es delgado, pero no queremos hacer eso. Se pone desordenado. Y como dije en la conferencia anterior, quiero que escribamos nuestro JavaScript en un archivo separado. Entonces, ahora ejecutemos una función. Y llamemos a esta función porque volteamos todo sopló. Esto solo llama azul a esta función y ejecutaremos esa función. En el segundo botón. Podemos hacer exactamente lo mismo. Podemos añadir un oyente de clics. Y en esta instancia podemos ejecutar una función llamada read. Murciélagos muy sencillos si vamos a nuestro navegador, bien, Lo que quiero hacer es solo quiero inspeccionar este documento y quiero ir a la consola. ¿ Qué crees que va a pasar si hago click en, digamos, qué tal todo lo que es azul? ¿ Qué crees que va a pasar cuando haga clic en ese botón? Deberíamos obtener un error. Lwe no está definido porque tratamos de ejecutar una función JavaScript llamada azul, pero aún no hemos escrito el código, que es lo que vamos a hacer ahora. En nuestro HTML, podemos incluir una etiqueta de script. Y por supuesto, nuestro guión puede hacer referencia a nuestro propio archivo. Sólo llamémoslo App.js. Y dentro de nuestra estructura de carpetas, podemos crear un nuevo archivo llamado app.js. Es realmente, realmente simple y cómo podemos incluir nuestro JavaScript. Entonces déjame minimizar esto, Así que tenemos una pantalla más grande. ¿ Y cuál es el primer paso? Das un paso atrás. Hemos definido todo nuestro HTML con lo que nuestros botones. Hemos adjuntado un oyente de eventos a ese botón. Y ahora hemos dicho 50 manejador. Queremos que el analizador ejecute una función llamada loop y una función llamada read para ese botón. Entonces ahí es donde estamos ahora. El POS va a llegar al HTML. Eso va a desencadenar ese evento cuando el usuario haga clic. Entonces va a estar buscando esta función en nuevo archivo JavaScript y cómo estamos. Entonces, ¿qué queremos que suceda? Bueno, hay algunas maneras en que podemos hacer esta solución. Podemos hacerlo de una manera muy rápida y desagradable. En cuyo caso podemos agarrar nuestro cuerpo de una página entera y cambiar el sabor de todo un cuerpo para leer todo azul. Ese es el enfoque perezoso. Y en muchas instancias cuando tus páginas muy quisquillosas y dinámicas, anhelo y quiero cambiar colores de ciertos elementos. Lo que quiero hacer es agarrar esos elementos que queremos hacer. Va a ser el primer paso en nuestro JavaScript. Y si vamos a nuestro archivo índice aquí, queremos cambiar el golpeteo H1 a azul, y queremos cambiar esos dos párrafos a azul. Eso es todo lo que queríamos hacer. Por lo que el primer paso será agarrar esos elementos. El segundo paso va a ser cambiar los atributos de esos elementos a azul o rojo. La teoría va así de simple. Entonces, vamos a quedarnos atrapados en él. El primer paso, agarrando los elementos, queremos cambiar. Y por supuesto queremos cambiar tres cosas directamente. Entonces voy a definir una variable JavaScript llamada title. Vamos a acceder al objeto de documento. Este objeto de documento, como ustedes saben, es la raíz de nuestra página web y documento honesto. Tenemos muchas propiedades. El que quiero usar este elemento get by ID. Y por supuesto le dimos una identificación de título. Después volvemos a nuestra página de índice. Podemos ver que le dimos a ese un DNI de título. Nuestros párrafos tienen entonces una idea de primer párrafo y segundo párrafo. Entonces podemos ir aquí y podemos definir ahora paralelos. Podemos usar la misma función. Pero sí, tenemos primer párrafo. Y por supuesto que podemos duplicar eso. Podemos decir que el padre a. Y no va a ser el primer párrafo, va a ser el segundo párrafo. hoy vamos, Literalmente hemos terminado nuestro primer paso. El segundo paso ahora es definir nuestras funciones azules y rojas. Entonces empecemos con el pegamento de función azul. El carnes de nuestro código está dentro de estos tirantes rizados. Ahora, quiero que definamos una variable llamada color. Y vamos a asignar que el valor de sorpresa, sorpresa azul porque ese es el color al que queremos cambiarlo todo. ¿ Cuál es la siguiente cosa que quiero hacer? Ahora tendremos que acceder a nuestro título y nuestros dos párrafos y cambiar el color a azul. Es realmente así de simple. Y este no es un curso sobre CSS, pero estoy asumiendo que tienes algún conocimiento de CSS y HTML. Y las muchas formas de volver a desollar a un gato, voy a usar el método de atributo SEC. El primer argumento de este método es lo que queremos afectar o lo que queremos acceder. Y por supuesto queremos acceder al atributo de estilo de este elemento. Y por supuesto, el segundo argumento es el valor que queremos dar a la baja eso. En esta instancia, queremos cambiar el color, no te preocupes. Por lo que podemos hacerlo de esta manera. Podemos ir de color. Y por supuesto solo podemos sumar nuestras covariables. Aquí vamos. Esto debería funcionar bien? Y si vamos a nuestro navegador, vamos a despejar la consola y dar click en esto todo en botón azul. Y boom, este es un sitio web realmente divertido, pero en este momento sólo hemos cambiado el H. No hemos cambiado los dos párrafos. Entonces hagámoslo rápidamente. Podemos exceso par uno. Podemos sentarnos Es atributo de nuevo el estilo. Y ahora queremos cambiar el color. Pero esta vez quiero usar literales de plantilla es una sintaxis más nueva. Y si no estás seguro de que estos son, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. Si sabes cuáles son, genial, podrás seguir adelante. Entonces aquí queremos afectar nuestro atributo de color y queremos que eso se establezca al valor. Hola. Ahí vamos. Y si guardo esto y vuelvo a nuestro navegador, Vamos a dar click en este botón. Literalmente hemos cambiado el H1 y hemos cambiado el primer párrafo. Sí. Y claro que éste pensará hacer, y eso es cambiar el párrafo 2. Entonces vamos a hacer es duplicar esa fila y cambiarla a padre para dejar establecer. Y si volvemos a nuestro navegador, click en el botón, todo se cambia a azul como esperábamos, misión completa todo Diana, Esto es tan impresionante. Entonces ahora volvamos aquí y hagamos lo mismo por el rojo. De hecho, todo lo que necesitamos hacer es copiar esta función, pegar esta función y cambiar el azul. Para leer. Es todo lo que tenemos que hacer. N como esta final, esto es de repente tienes que estar de acuerdo conmigo. Y es tan fácil una vez que sueltas a perro haciendo estas cosas. Y una cosa que quiero mencionar es que podemos duplicar las funciones como esta y definir dos variables llamadas color dentro de cada función porque han tenido alcance local o ámbito de bloque. Si no estás seguro de lo que quiero decir, de nuevo, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. Pero debería funcionar ahora, debemos estar hechos. Si tenemos nuestro navegador, tenemos dos botones. Déjame simplemente quitar esta consola. Si haces click en lo primero de lo que se pone azul, si hacemos click en la lectura, todo se pone rojo. Habías literalmente Janet y nos dijo unos minutos útiles si vamos mejor, codificar archivo JavaScript como nuestro archivo índice. Entonces aquí hay un ejemplo práctico de usar un oyente de eventos en línea para adjuntar realmente un oyente de eventos al botón, el evento onclick. Y luego también implementamos un manejador de eventos en un archivo JavaScript separado se hacen tan bien hechos. Estoy súper, súper impresionado en divertirme mucho. Pero ahora quiero adentrarme en los otros métodos que discutimos y mirando ejemplos de esos. Nos vemos en la próxima conferencia. 12. Propiedades en línea: descripción detallada: Muy bien, Así que hemos discutido los manejadores de eventos en línea. El siguiente paso es que discutamos el otro tipo, y eso se llama el método de propiedad en línea. Esta es una forma muy similar de agregar un oyente a un elemento, al oyente de eventos en línea. Excepto aquí estamos sentados la propiedad de un elemento mediante el uso de JavaScript. En lugar de usar el atributo en HTML, hace escenas económicas. Por lo que la configuración será muy similar. Por ejemplo, todavía necesitamos el elemento HTML de botón Up, pero ahora ya no necesitamos incluir la función onclick blue, por ejemplo, en la propia maqueta HTML. Pero aún necesitamos definir un manejador, ¿no? Esa limosna real, esa función. Seguirá bastante similar también. Pero ahora necesitamos simplemente acceder al elemento de botón en JavaScript antes de escribir la función en JavaScript. Por lo que el primer paso será como tener dos ejes. Este botón en JavaScript, sí, solo podemos usar la consulta seleccionar un botón. Por supuesto que podemos acceder bien. Id, nombre de clase, etiqueta, nombre, cítrico, cetera. Sí, acabamos de utilizar el selector de consultas. Déjame dar la vuelta a esta página. Recuerde, bajo ambos enfoques y por ambos enfoques carecen de sentido. Enfoque de propiedad en línea frente a un EventListener en línea, el que vimos en la conferencia anterior. Y ambos enfoques que eventualmente estamos adjuntando un oyente de eventos es una propiedad en nuestro elemento HTML. Ambos están logrando lo mismo. Pero usar una propiedad en línea es un poco mejor que escribir directamente nuestro oyente de eventos en nuestro archivo HTML. ¿ Por qué es mejor? Bueno, al menos ahora tu mockup HTML es muy barato y tenemos toda nuestra carne en un solo archivo JavaScript. Simplemente es más fácil, es más mantenible. Pero al decir que aún no es el mejor enfoque y sí sufre de algunos de los mismos trabas. Y otra cosa interesante en otra cosa muy molesto que sucede es cuando intentas sentarte múltiples propiedades de objeto separadas al mismo elemento, hará que todo menos el último se sobrescriba. Por lo que eso puede ser bastante molesto. Murciélagos, supongo que sabes lo que sigue DEJ, tú, Así es. Yo quiero mirar otro ejemplo práctico realmente genial. Nos vemos en la próxima conferencia. 13. Desafío de las propiedades en línea: introducción: Está bien, Ya me conoces, me encantan los ejemplos prácticos y éste es realmente, muy divertido. Entonces veamos la pantalla detrás de mí. Se puede ver que acabamos de conseguir un texto de Lorem Ipsum con un botón que dice presionar la rodilla y mostrar más. ¿ Se trataba de eso? Bueno, vamos a la abuela ratón. Y vamos a hacer clic en ese botón. Se pueden notar algunas cosas. Uno, hemos ampliado esa caja. Por lo que ahora puedes leer más texto. Y el texto en el botón no ha cambiado a decir un colapso de ahora. Puedo hacer click, vamos ahora por supuesto que nuestra caja y la palabra ahora en ese botón cambia para expandirse en ella. Ejemplo fresco. Y puedes empezar a ver que aquí nos estamos haciendo más avanzados. Pero sí, de nuevo, no quiero que saltemos a usar el nuevo método AdDeventListener. Yo quiero que nos construyamos a eso. Por lo que viste en la prueba anterior, usamos el manejador de eventos en línea. Aquí, quiero que utilicemos el método de propiedad en línea de agregar oyentes de eventos. Y recuerda, ambos enfoques son muy similares. Todo lo que estamos haciendo es agregar una propiedad al botón HTML aquí. Pero lo estamos haciendo encontrar diferentes formas en esta instancia en unos para hacerlo a través de JavaScript. Entonces este es el sabor introductorio. Va a ser realmente divertido, similar al anterior. Voy a redactar juntos nuestro código. Muy, muy bien para que codifiques junto a mí. Pero de nuevo, no tienes que proporcionar el color del documento esqueleto, documento HTML para ti como recurso a la siguiente conferencia que por favor, sí te animo mucho a codificar conmigo. Y luego en la próxima conferencia, obviamente vamos a estar pasando por la solución juntos. Espero que te diviertas podría estar y mantenerte motivado. Y nos vemos en la próxima conferencia. 14. Desafío de las propiedades en línea: crea nuestro HTML: Entonces aquí vamos. Otra vez. Estoy empezando con una plantilla en blanco aquí en código de Visual Studio. Entonces vamos a agrietarse. Empecemos a codificar esto. Simplemente entra en nuestra carpeta aquí y vamos a crear un archivo llamado index.html. Y por supuesto solo podemos empezar con una plantilla HTML5. El título puede ser propiedades en línea. Deshaznos de esto para que veas lo que está pasando. Y es previamente, Vamos a abrir servidor en vivo sólo para que podamos empezar a codificar y ver lo que estamos haciendo al mismo tiempo. Aquí vamos En una cosa me va, solo deshazte de mí mismo para que veas lo que está pasando. Audios. Entonces aquí vamos. Empecemos a codificar. Ahora solo voy a tener un div con un ID de contenido porque es así nuestro contenido va a ser todo buena práctica. Y luego quiero etiquetas de párrafo y quiero texto lorem ipsum en cada una. Entonces solo podemos hacer eso y Lorem Ipsum, podemos ahorrar. Y ahora se puede ver en una pantalla acabamos de tener dos párrafos con aburrido texto de Lorem Ipsum. Nada especial. Entonces ese es nuestro contenido principal. La otra cosa que quiero hacer es añadir esos pequeños derechos de botón, pero solo quiero mostrarte nuevas formas de hacer las cosas en tu código. Nunca hay una forma de despellejar a un gato. Entonces aquí en lugar de usar un botón, solo voy a estar usando una etiqueta de ancla. Y voy a tener una identificación de show mas. Vamos a pasar por la HREF. Entonces ahí vamos. Y esto sólo puede ser preciso yo y mostrar más. Y si guardamos eso, parece que aburrirse un hoyo toma ¿no? Pero no te preocupes, vamos a darle estilo en breve. De hecho, vamos a darle estilo ahora. Vamos con en nuestra sección de cabeza. Y de nuevo, en lugar de escribir CSS en línea, lo cual no es una buena idea, LET referencia en archivo externo. Entonces vamos a incluir una etiqueta de enlace aquí y nuestras aurículas, si solo podemos llamarlo, no lo sé, styles.css. Vamos a nuestra estructura de carpetas aquí. Y es un archivo intuitivo llamado styles.css. Entonces aquí vamos. Deshaznos de eso y hagamos que nuestro sitio se vea un poco más funky. Algo que quiero hacer es que quiero acceder a nuestro elemento corporal. Y vamos a cambiar el fondo de toda la página. Triple E, falta faros, gris suave. Se ve bonito. Y entonces lo que quiero hacer es que quiero acceder al contenido. Vuelve a nuestro HTML. ¿ Recuerdas esto? Es esta etiqueta div con el ID de contenido. Y eso sólo contiene hasta párrafos. Entonces en una característica, estamos peinando nuestros dos párrafos. Lo primero que podemos hacer es cambiar el ancho para decir 400 píxeles. Ahí vamos. Para que veas que lo hemos condensado a un tamaño más pequeño. Y podemos cambiar este fondo solo para diferenciarlo del fondo real de la página restante a triple F. Así que es blanco, es bonito. Podemos por supuesto darnos algo de relleno. Yo soy no quiero relleno en la parte superior. Quitémoslo. Sí, eso es mejor. ¿ Y deberíamos cambiar esta fuente? Y supongo que podemos. Usemos un cisne aquí, Gill Sans o menos. Sí, vamos, guapo, funky. Tienes que admitir, ¿qué más podemos hacer? Podemos cambiar el color del texto real. Se puede ver que estoy usando números muy fáciles. Sí. Es como un bonito gris más oscuro. Lo que podemos hacer ahora es que quiero mover todo lo que lleva todo ese div contenido, a la mitad de nuestra página. Entonces por supuesto podemos usar la rodilla margen y la izquierda y la derecha se pueden alterar para llevar esa cosa al centro. Ahí vamos, Se ve bien. Y ahora quiero agregar una altura máxima de un 100. Y o son solo números aleatorios a 148 píxeles. Ahí vamos. Y el desbordamiento se puede ocultar. Ahí vamos. Para que veas que nuestras Tomas ahora se están cortando, lo cual tiene sentido, ¿verdad? El único propósito del ejercicio. Y como mencioné, este no es un curso sobre CSS, ¿de acuerdo? Pero solo quiero agregar una propiedad CSS de transición aquí. Buscar tipo de transición suave cuando se abre a la altura máxima. De acuerdo, así que quiero agregar una transición. Obviamente quiero que esto se aplique cuando afectemos la propiedad de altura máxima. Y digamos sólo 0.7 segundos. Entonces ahí vamos. Ese es nuestro div cool. Ahora solo quiero darle estilo a esa etiqueta ancla que llegamos ahí, pero darle estilo y hacer que parezca un botón. En primer lugar, ¿cómo accedemos a ella? Bueno, si vamos a nuestra página de índice o lo llamamos, teníamos una identificación de show mas. Vamos a los estilos. Y echemos un vistazo a esto aquí. Mostrar más. Ahí vamos. Primero cambiemos este fondo para decir 36, a2, y 167. Eso es una especie de bonito color azul. A mí me gusta. Y entonces podemos cambiar ese texto a blanco porque cogimos apenas lo puedo leer ahora. Ahí vamos. Eso se ve mejor. Ha cambiado la familia de fuentes para que coincida con la de arriba. Familia de fuentes. Sí, eso debería tener mejor. Ahora, claro que podemos agregar relleno para que simplemente se vea mejor. También podemos definir un ancho de un 100 y 40 píxeles. Hagamos la fuente un poco más grande. Para que podamos ir 18 pixeles. Y solo para ser pedante, quiero poner el texto dentro del botón en el centro. Entonces, sólo tomemos una línea al siento. Probablemente no notarás mucha diferencia. Sí, no había notado mucho de algo diferente. Y luego agreguemos márgenes para llevar esta cosa al centro. Por lo que quiero agregar también un margen a la parte superior. Y entonces por supuesto vamos a ver esta cosa. Y luego el cursor, quería señalar, hmm, ¿ por qué este botón no se sinterizan en sí mismo? Ah, ¿sabes lo que no he hecho? No he definido esto como un elemento de bloque. De acuerdo, necesitamos mostrar bloque. Y eso debería funcionar. Otra vez. Por suerte me estaba preocupando un poco ahí por un segundo. Está bien, genial. Entonces aquí está nuestra tripulación esqueleto. Si bien eso fue muy, muy cool, tenemos nuestra configuración. Pero obviamente ¿qué pasa ahora si hago clic en este botón, etiqueta ancla? No pasa nada. Y esto es lo que quiero que intentes y resuelvas ahora. Y así recuerda lo que estamos queriendo hacer, querer usar propiedades en línea, aka querer realmente poner todo en nuestro archivo JavaScript y agregar una propiedad llamada onclick a esta etiqueta ancla en nuestro JavaScript. Y entonces por supuesto que queremos abrir todo y todo eso. Entonces, dale un vistazo. Si no sabes la respuesta, no te preocupes, para eso estoy aquí. Y en la siguiente sección, vamos a divertirnos un poco y hagamos la solución para conseguirlo. No puedo esperar. 15. Desafío de las propiedades en línea: solución: De acuerdo, así que aquí estamos. Aquí es donde lo dejamos la última vez. Y si ves si presiono este botón, no pasa nada. Entonces, ¿cuáles son los pasos que debemos dar para que esto funcione? Bueno, en primer lugar, necesitamos llegar a las cosas desde nuestro DOM. Tenemos que agarrar este contenido div. ¿ Por qué necesitamos agarrar su contenido? Div recordará ahora mismo que hemos restringido su altura. En realidad lo hemos cortado. Si inspeccionamos este elemento. Y en realidad nos fijamos en este div mismo. Se puede ver en la esquina inferior derecha que restringimos la altura de este div a unos 148 píxeles. Y sí, hemos editado relleno de 20, lo que nos da un poco HDL, que está salvajemente flotando sobre esto. Podemos ver que la altura es un 168, es un 148 más el relleno. Y si volvemos a nuestro código, eso es exactamente lo que especificamos en este contenido. Div, altura máxima, un 148 píxeles y relleno de 20. Y si vamos a nuestro HTML, esa idea de contenido se envuelve dentro de nuestra etiqueta div. Y acabamos de restringir a alta temperatura. Entonces si volvemos aquí, Eso es lo primero que tenemos que hacer. Tenemos que agarrar esa caja de contenido y cambiar su altura cuando se hace clic en el botón. que me lleva a lo segundo que necesitamos para conseguir una red es este botón. Y necesitamos acceder a este botón por dos razones. Una, cuando hacemos clic en este botón, queremos cambiar el estilo de ese div. Y dos, también queremos cambiar el texto de este botón sucio. Por lo que empezando a tener sentido. Eso espero. Pero si no lo hace, no te preocupes, vamos a meternos en ello ahora. Entonces, ¿qué es lo primero que debemos hacer? Bueno, lo primero que quiero hacer es cuando hacemos clic en ese botón, fui a aplicar una cierta cláusula, ese div completo. Y entonces cláusula debe abrirla. Debe hacer que esa altura máxima sea más grande. Entonces lo primero que quiero hacer en nuestro editor de texto aquí es que quiero ir a nuestros estilos y un 12 definir un estilo que sólo se va a aplicar cuando el cuadro esté cerrado y le hacemos click para abrir. Tiene un poco de sentido. No te preocupes si no depende exactamente de lo que quiero decir en breve. Entonces todo lo que quiero hacer es que quiero agarrar nuestra caja de contenido porque eso es lo que queremos afectar. Y vamos a estar agregando esta clase, y sólo voy a llamarla clase abierta por ahora. Y cuando sus clases se activaron, lo que queremos hacer es querer pegarnos al ejército de máxima altura. Y queremos que esa caja crezca de 148 píxeles a mucho más grande, mucho más alto. Entonces por eso solo estoy usando un número arbitrario, 1000 pixeles. Y por supuesto que quería ser una transición agradable y suave. Cuando se cambia la propiedad de altura máxima, digamos que toma dos segundos. ¿ Cómo se ve eso? Entonces tenemos todo nuestro CSS. Ahora necesitamos realmente agregar a nuestros oyentes de eventos y eso lo hacemos con JavaScript. Entonces todo lo que necesitamos hacer aquí es añadir una etiqueta de script. Y de nuevo, esto solo llámalo un archivo ab.js de la aplicación. Podemos acceder a nuestra estructura de carpetas aquí. Se puede ver que sólo tengo dos archivos aquí, index y CSS. Tendremos que hacer ahora es solo agregar nuestro archivo app.js y yo cierro esto. Y cómo podemos empezar a escribir la carne el corazón de nuestro sitio. Y paso-1 para recordar lo que era. Eso es correcto. Tenemos que agarrar el elemento div y el bastón. Por lo que voy a definir una variable en las llamadas JavaScript. No lo sé, llamémoslo contenido porque ahí es donde se sienta nuestro contenido principal y tiene un ID de contenido. Accedemos a nuestro objeto de documento. En ese objeto accedemos a su propiedad, obtenemos elemento por ID. Y por supuesto el ID que especificamos se llamaba contenido. Entonces ahí vamos. Ahí está nuestro contenido. Ahora quiero agarrar nuestro botón y sé que en realidad no hicimos rápido End button elements. Lo envolvimos en una etiqueta de ancla. Hice esto solo para mostrarte diferentes formas de hacer lo mismo. Pero en este caso, aún quiero llamarlo botón. Otra vez. Accedemos a nuestro documento. Accedemos a esta propiedad, obtenemos elemento por ID. Y como lo hemos vuelto a llamar. Vayamos a nuestro HTML. La idea de mostrar más. Aquí tenemos IoT Show. hoy vamos, podemos agarrar nuestros dos artículos. Y mis queridos amigos, este es el corazón del paso. Y eso es agregar un evento, oyente y manejador a través del Enfoque de Propiedad en Línea. Recuerda cómo hacerlo. En primer lugar, ¿forma estamos queriendo agregar a nuestro oyente de eventos en el botón? Queremos que se active un acuerdo cada vez que un usuario haga clic en ese botón. El punto de partida es acceder a nuestro botón. Ahora tenemos nuestro botón. Lo que tenemos que hacer ahora es que tenemos que sumar esto en no-propiedad. El oyente de eventos. ¿ Cómo hacemos eso? Usaremos notación de puntos y queremos añadir un oyente de clics a este botón, no te preocupes. Y luego voy a estar usando la nueva sintaxis de flecha para definir una función que se va a disparar automáticamente cuando se contrate el evento. Por lo que toda la carne de nuestro código está dentro de este bloque. En este punto del tiempo, se ha comprobado el botón. Y ahora tenemos una especie de dos tenedores en el año carretero. El cuadro ya está abierto y los botones ya han sido recortados y lo estás tomando de nuevo para colapsarla. Todos. El cuadro ya está colapsado y se hace clic en el botón por primera vez para expandirlo. Y cada vez que consigues estos bifurcadores en la carretera, cada vez que consigues este tipo de cajas abiertas o si las cajas se derrumbaron. Así es, lo adivinaste. Tenemos que usar las declaraciones if. ¿ Cómo escribimos estas declaraciones de if-? Todo hay algunas formas de hacerlo. Como siempre, sigue diciendo las muchas formas de despellejar a un gato a la hora de programar. Yo sólo voy a mantenerlo muy sencillo. Y voy a asumir ahora mismo que la caja está cerrada, que los botones nunca se han conectado. Y si nunca se ha hecho clic en el botón, sabemos que el nombre de clase de abierto no sería el. Por ejemplo, si vamos al archivo de índice fuera div etiqueta aclamada ID de contenido no tiene clase, ¿verdad? No le hemos agregado ninguna clase. ¿ Recuerdas la hoja de estilo? Tenemos esta clase abierta que cambia la altura máxima de ese div. Pero no hemos agregado esa clase abierta. Toda enfermera que conocemos es que la dosis de contenido está cerrada. Su ClassName va a ser igual a nada. Va a estar en blanco. Entonces en esa instancia, ¿qué queremos hacer? Bueno, queremos ampliar la caja. Eso hace desde, ¿verdad? Y cuando ampliamos la caja, ¿cómo lo hacemos? Tenemos que añadir ese nombre de clase de abierto a ella. Entonces todo lo que necesitamos hacer es acceder a ese div. Necesitamos entonces acceder a su propiedad ClassName porque queremos que editen nombre de clase y entramos en asignar eso a la clase de abierto. Ahora sabemos que la caja se va a expandir. Lo segundo que queremos hacer, no lo olvides, ya que queremos acceder a nuestro botón y cambiar su propiedad HTML interior para colapsar ahora. Por lo que ahí lo tenemos. Eso si las cajas se cerraron y ahora acabamos de abrirla. Por supuesto que tenemos que lidiar con el otro escenario en que está abierto y tú queriendo que colapse. Entonces tenemos que salir. Y ahora por supuesto queremos colapsar la caja. ¿ Y cómo colapsamos la caja? Bueno, lo primero que tenemos que hacer es tener acceso a ese contenido completo de la etiqueta div. Tenemos que entonces acceder a su propiedad de nombre de clase y tenemos que darle a eso un valor de nada y eso va a encoger automáticamente la caja. No te pierdas. ¿Recuerdas por qué PR frente a la caja? Bueno, tenemos estos estilos y nuestra hoja de estilo. Cuando esa etiqueta div tiene la clase abierta, sabemos que su altura máxima puede ser de hasta 1000 píxeles. tanto que cuando eliminamos esa clase abierta, vuelve a los estilos CSS predeterminados, que tiene una altura máxima de un 148 píxeles, lo que significa que se encogerá, lo hace. Entonces volvamos a nuestro archivo JavaScript. Lo último que tenemos que hacer, adivinaste ya que tenemos que cambiar la propiedad HTML interior en nuestro botón para expandir. ¿ Cómo debe funcionar una droga y esta idea de amigos? Vayamos a nuestro navegador. Refresca y vamos a hacer clic en esta visión de botón. ¿ Qué tan impresionante es eso? Tienes que admitir que eso es bonito, bastante épico. Esto es refresca lo que puedo hacer para que sea más tipo de extremo es que en realidad podemos agregar más texto de Lorem Ipsum aquí y editar de nuevo. Volvamos a nuestro navegador y vamos a abotonar. Se dividirían más. Simplemente lo puedes ver un poco más. Ponga beta. Esto es impresionante, ¿no? Todo hecho? Yo en serio. Y puedes empezar a ver cómo una vez que entiendas los fundamentos y los fundamentos, podemos seguir creciendo y haciéndonos cada vez más avanzados. Y hace escenas a medida que continuamos y no nos perdemos con todo el detalle. Recuerda qué es lo que hicimos. Acabamos de adjuntar un oyente de eventos a este expandir, bueno este botón aquí. Agregamos un oyente de eventos que escucha un evento de click cuando las casillas cerraron su estado actual. Ahora en la pantalla, sabemos que entonces queríamos agregar una cláusula de apertura cuando se hace clic en este botón y en realidad demostrártelo. Inspeccionemos aquí este documento. Abramos el cuerpo. Y se puede ver aquí tiene 0 nombre de clase encendido en este momento que buscan nada o nada. Si hacemos clic en este botón, recuerda editamos una ventaja que hoy botón. Cuando se hace clic en ese botón y las casillas colapsaron, vamos a estar agregando un nombre de clase llamado Abrir. ¿ Qué tan impresionante es eso? Acabamos de editar dinámicamente un nombre de clase de abierto. Y por supuesto cuando eso sucede, hemos aplicado un conjunto de estilos completamente diferente para luego hacer cuyo contenido lo hace mucho más alto. Sí, editamos un poco de estilo CSS. Editamos una captación de transición, por lo que no solo sucedió. Por lo que poco a poco llega allí. También cambiamos ese HTML interno del botón. Entonces hay mucho que hicimos en esta conferencia y vamos a construir sobre ella. Por lo que estoy súper, súper emocionado de continuar. Nos vemos pronto. 16. El método addEventListener(): descripción detallada: Es el momento que todos hemos estado esperando, y eso es entrar en la última edición de la API DOM cuando se trata de manejadores de eventos y oyentes de eventos, es el método add event listener. De esto se trata el oyente de eventos en las grietas y el oyente de eventos observa un evento en un elemento. No asignamos ningún evento directamente sobre una propiedad de ese elemento. Recuerde los otros dos enfoques en manejadores de eventos de línea y propiedades en línea y enfoques adjuntamos una propiedad al elemento. Y una propiedad justo así pasa a ser el oyente de eventos que este no es el caso aquí. En cambio, usamos el método AdDeventListener para adjuntar, lo adivinaste, un oyente y un manejador. Y es bastante intuitivo. Este oyente de eventos, muralla, escucha o observa un evento que se dispara en el elemento HTML al que hemos adjuntado. No hay nada siniestro ni raro en eso está ahí. Ahora. Pero en este punto puede que te estés preguntando, es este AdDeventListener de JavaScript, es eso parte del lenguaje JavaScript? Y la respuesta corta a esta pregunta es, no. No es de JavaScript. De hecho, es de la API DOM. ¿ De qué estoy hablando cuando sigo hablando de estas API? Wall, cuando escribimos código, hay todo un montón de API web que podemos usar de inmediato de la caja. Cuáles son algunas de estas API y de hablar cuando tenemos h con lo que el historial API, almacenamiento, WebSockets, API de file system. Son una tonelada de ellos. Y estos son todos tipos separados de API, sistemas separados que se están ejecutando en el navegador. Y por supuesto, uno de estos es la API DOM y las redes manera este oyente de eventos add, proviene de. El motivo por el que tantas personas podrían confundirse entre lo que es JavaScript y lo que es la API DOM, es que las API web en mayormente usadas retiran el script. Pero como ya he mencionado antes, no tenemos que usar estrictamente JavaScript para manipular y acceder a sus API web. Simplemente así sucede al 99 por ciento del tiempo. Estamos usando JavaScript para hacerlo. Y creo que ahí es donde debe entrar la confusión. Pero ten en cuenta que el AdDeventListener no es JavaScript, pero está bien, Ya, lo tienes. Sigamos adelante. La pregunta que probablemente estés haciendo ahora es genial. ¿ Cómo funciona este manejador de eventos? Bueno, el punto de partida es usar la sintaxis real para escribir las palabras agregar evento, oyente. Ese es un punto de partida. Pero desafortunadamente no es tan sencillo como esto. El método AdDeventListener toma dos parámetros obligatorios. Bueno, ¿qué son? El primer parámetro es el evento, tiene hebra de sentido y las venas por supuesto, es la acción que estamos deseando tener cuidado. Por ejemplo, cuando usamos los ejemplos de callejones anteriormente, estábamos atentos al evento onclick, que son toda una tonelada de otros eventos. Nos vamos a meter en ellos en breve. Entonces ese es el primer parámetro. ¿ Cuál es el segundo parámetro? En la comunidad de programación y en este método, se llama la función callback. Y no quiero que te sientas intimidada por todas estas grandes palabras de fantasía. La función de devolución de llamada es solo nuestro manejador de eventos. En otras palabras, lo importante, esta función de devolución de llamada toma automáticamente el perímetro de la vena. Y este parámetro tiene una propiedad llamada target. Y el objetivo, también conocido como el elemento que encuentra el evento, se nos dará automáticamente en esta función de devolución de llamada. Entonces a qué me refiero con el blanco y el elemento que disparó el evento. Bueno, si solo nos deshacemos de todo en la pantalla por ahora, estarás de acuerdo conmigo en que sí agrega oyente de eventos se tiene que agregar a algo, ¿verdad? Se tiene que sumar a un elemento. Y es ese elemento al que se refiere como el objetivo es un poco que tiene sentido. No te preocupes, vamos a entrar en mucho más detalle en este curso. Y quiero ver ejemplos obviamente. Pero antes de que lo hagamos, solo quiero hablar un poco más de todo este bolso. ¿ Qué es una función de devolución de llamada? Bueno, saltemos a la siguiente conferencia para averiguarlo. 17. Qué es una función de retratos: Antes de seguir adelante y empezar a hacer retos y mirar cosas nuevas y mejoradas y más avanzadas. Como dije, OK, solo quiero dar un paso atrás y discutir esta llamada de nuevo con un poco más de detalle. Recuerda que no te intimiden. Una devolución de llamada es solo una función que se cancela a otra cosa ha sucedido. Es todo lo que es una función de devolución de llamada. Y sabemos que el primer argumento al método add event listener fue el evento que queremos escuchar, por ejemplo, un evento onclick. El segundo argumento fue el manejador de eventos, que en nuestro caso sabemos que es una función de devolución de llamada. Esta función de devolución de llamada se ejecutará automáticamente cuando se desencadene el evento. Recuerda la definición de una devolución de llamada es una función que se llama después de que algo ha pasado con algo en nuestro caso es ese evento disparando. Y lo que es realmente genial de esta devolución de llamada específica cuando usamos el método AdDeventListener es que obtenemos una gran cantidad de datos sobre ese evento automáticamente, lo cual puede ser realmente, realmente útil. ¿ Qué tipo de información recuperamos? Cosas como el blanco donde ocurrió el evento, el tipo de evento que ocurrió, etcétera, etcétera. En lugar de sólo mirar palabras en pantalla, Vamos a saltar a Visual Studio Code. Vamos a codificar rápidamente una devolución de llamada, y veamos qué es lo que realmente nos ha devuelto. Veamos esto en acción. Muy bien, Vamos a ver esta función de devolución de llamada en acción. Muy, muy sencillamente. He empezado aquí con un archivo index.html en blanco. Y vamos a codificar un oyente de eventos muy rápido. Y veamos qué es realmente convertir a los Bautistas en una bolsa escolar. Vamos a querer hacer sentarse una página HTML muy simple dentro del cuerpo. Solo tomemos una etiqueta H1. Y los golpes solo pueden ser devoluciones de llamada son posibles. Ahí vamos, Eso es todo lo que quiero que contenga nuestro HTML. Y vamos a añadir un oyente de eventos a esta etiqueta 81. Y veamos qué nos devuelve. Entonces por supuesto necesitamos agregar nuestro guión. Sí, El primer paso es por supuesto, esa etiqueta H1. Entonces definamos uno como documentos y mal uso del selector de consultas. Y vamos a agarrar nuestro H1. Lo siguiente que queremos hacer es adjuntar el método add event listener a este elemento H1. Por lo que empezamos accediendo a nuestro elemento H1 y automáticamente, y recordamos que esas API están hablando, automáticamente tiene este método add event listener disponible para nosotros directamente de la caja en este elemento. Muy, muy cool. Recuerda que se necesitan dos argumentos. El primer argumento es el evento, y el evento aquí es el evento click. ¿ Y cuál es el segundo argumento? Así es, Es la función de devolución de llamada. Por lo que sólo voy a usar el error Sintaxis una vez más. Aquí está nuestra función de flecha. Todo ese segundo argumento es nuestra devolución de llamada. No te intimiden. Eso es todo lo que es. Apenas la función se va a ejecutar cuando ocurra ese evento. Y recuerda lo que decíamos que esta función de devolución de llamada automáticamente tiene los datos del evento. Déjame mostrarte a lo que me refiero. Simplemente podemos pasar en el evento una escuela de datos. Y entonces por supuesto lo que podemos hacer es que simplemente podemos cerrar sesión en consola estos datos. Esta variable que estoy poniendo sin embargo estos datos se nos dan automáticamente. Puedes llamarlo como quieras. Puedes llamarlo a, puedes llamarlo B, puedes llamarlo c. Simplemente hemos pasado a llamarlo puntos o cualquier variable definimos un nombre que nos da automáticamente la función de devolución de llamada cuando ese evento está bien. Déjame mostrarte a lo que me refiero. Vamos a salvar esto. Vamos a nuestro navegador. Inspeccionemos esto. Vamos a refrescarnos. Aquí vamos. Tenemos nuestra página callbacks también son net, nuestra etiqueta H1. Tiene consola. Si hago clic en este, ¿qué crees que va a pasar? Vamos en primer lugar, el evento click será despedido. Y luego en segundo lugar, tenemos semilla para consola log los datos que obtenemos de la devolución de llamada. Por lo que deberíamos ver el registro de la consola de su hija. Doy clic en eso. El vamos. Aquí se puede ver que la hija que obtenemos es este evento de ratón. Sabemos que el evento click ocurre desde el ratón. Y puedes abrir esto y tenemos un montón de propiedades y métodos. ¿ Qué tan impresionante es eso? Y dentro de estas venas de Mousey, tenemos esta propiedad llamada objetivo. Recuerda que el objetivo fue el elemento real que encuentra el evento en sí. En este caso, el objetivo es la etiqueta H1. Entonces ahí vamos. ¿ Qué tan guay es esto? Y solo recuerda cuando estamos usando esta función de devolución de llamada, nos dan toda una hija sobre el evento real en sí automáticamente. Por lo que nos da mucha potencia, mucha flexibilidad como programadores, porque tenemos más información. Espero que esté empezando a tener sentido. Ya basta dicho, sigamos adelante. 18. Desafíos para listeners de eventos: introducción: Ya sabes que me encantan los ejemplos, por eso tengo que hacer otro. Y realmente hemos visto algunos ejemplos realmente geniales en este curso cuales puedes aplicar prácticamente a tus propios sitios web. Esto no es una excepción y es bastante útil porque vas a estar aprendiendo algunos tipos diferentes de técnicas. Sí, va a ser una conferencia divertida, divertida. Entonces, ¿qué no quieres que hagas? Bueno, puedes ver esto es el círculo click Website Challenge. Y como seguro que has adivinado, tenemos que hacer clic en el círculo. Cuando el usuario hace clic en el círculo, los colores cambian. Bastante astante. Murciélagos. Son pocas las cosas que quiero que hagas en el sitio. En primer lugar, quiero que añadas eso lleva a debajo del círculo. Esto es pura manipulación DOM, dinámica. No quiero que dejes de eso toma en tu HTML. En segundo lugar, quiero que añadas ese círculo dinámico. En tercer lugar, quiero que agregues un oyente al círculo, específicamente un evento de escucha crítica a ese círculo. Y quiero que uses el AED es el método de ocho oyentes. Y por último, tenemos que añadir un manejador, ¿no? ¿ Y qué queremos que haga ese manejador? Queremos que el manejador cambie el color del círculo. Pero quiero que lo hagas al azar. Seré honesto contigo. No espero que sepas hacer esto, pero dale una oportunidad, intenta llegar lo más lejos que puedas. Y luego como mis ejemplos anteriores, seguro que estás muy familiarizado con el proceso. En la siguiente conferencia voy a codificar la estructura general del científico. Entonces el siguiente enlace, john va a estar pasando por la solución contigo. Entonces va a ser muy divertido. Vamos a tener que exceder el objeto de JavaScript solo para crear una especie de número aleatorio aquí porque queremos colores aleatorios. Entonces va a ser impresionante más tarde. Estoy muy, muy emocionado. 19. Desafíos para los oyentes: construye nuestro HTML: Como siempre, empezamos con nada. Perdón, Vamos a agrietarse y vamos a crear una carpeta aquí llamada index.html. Puede hacer que sea pequeño. Y vamos a agrietarnos. Y esto acaba de empezar con una plantilla HTML5. El título del documento puede ser desafío círculo. Lo primero que quiero hacer es que quiero crear, sabemos qué, déjame abrir el navegador. Entonces empecemos servidor en vivo. Tenemos para que podamos ver qué estamos haciendo. Siempre, siempre es útil. Entonces lo primero que quiero hacer es que quiero crear un div con una ID de main. Y este div sólo puede decir, bienvenido al círculo, haga clic y guarde eso y se irían, se puede ver el resultado en nuestro navegador. Y luego quiero otro div simplemente describiendo al usuario lo que queremos que hagan. Y sólo podemos decir, dar click en la bola redonda para cambiar su color de forma aleatoria. Vamos, Todo tiene sentido. Y ahora quiero que creemos nuestro círculo real. Y recuerdo lo que dije en la conferencia anterior. Yo quiero que hagas esto dinámicamente. Entonces todo lo que quiero hacer es que quiero tener un div con una identificación de envoltorio. Y aquí es donde quiero que pongamos nuestro círculo. De hecho, podemos tener un comentario aquí diciendo insertar círculo aquí. Y quizá podamos ponerlo en un div llamado círculo con una idea de círculo. Ahí vamos. Puede ser un div vacío porque como mencioné, queremos hacer esto dinámicamente. Statifica nuestro div que va a contener un círculo y todo lo que tenemos que hacer para realmente insertar el círculo aquí es aplicarle estilos, estilos CSS, lo haremos en breve. Lo último es que necesitamos insertar el texto debajo del círculo, no te preocupes. Y de nuevo, solo voy a poner esta nota en la parte inferior en una etiqueta div y esta etiqueta div y tener un ID de notas. Y de nuevo, podemos tener una etiqueta div vacía para nuestro libro es quiero que agreguemos esto, esta vez vía JavaScript dinámicamente. Entonces aquí vamos, Aquí está nuestro HTML. Se puede ver lo sencillo que es. No estamos siendo demasiado complicados aquí, pero es un ejercicio muy, muy valioso. Lo que quiero que hagamos ahora antes de que detenga esta conferencia es que quiero que solo agreguemos algún sitio web poseemos porque se ve bastante mezcla. Entonces dentro del elemento head, Vamos a enlazar a un archivo CSS externo, y vamos a nombrarlo debajo de styles.css. Entonces si solo vamos a nuestro proyecto Groot, Sí, e incluimos otro archivo llamado styles.css. Deberíamos poder darle estilo a esto bastante bien. Lo primero que quiero hacer es que quiero tener un fondo realmente fresco, casi un tipo de look y tacto de gradiente. Por lo que ese estilo nuestro HTML. Y es una propiedad ficticia de fondo. Y quiero acceder a un estilo llamado gradientes radiales. Y lleva aquí diversos argumentos. Vamos a pasar esto, sólo hazlo gris y negro. Tan muy sencillo. Guarde eso. Y ahí vamos. Sé que se ve mejor ahora se va a mejorar. Te lo prometo. Post apenas podemos leer lleva delicioso make, me lo llevaré a lo ancho. Aquí vamos. Al menos podemos leer que lleva mejor. Añadamos algo de relleno a la parte superior de la perspectiva de la manguera. Sí. Y se está haciendo más grande y ahora cambiemos o no lleva al centro para que podamos ir text-align center. Aquí vamos. Me está agarrando. Todavía no estamos del todo David, lo estamos consiguiendo. Ahora quiero darle estilo a nuestro div con la ID principal. Volvamos a nuestro HTML. Ahí está. Bienvenidos al círculo. Haga clic. Quiero anunciar estilo que queremos el DNI de Maine. Y cómo saber que podemos el peso de la fuente, podemos hacerlo audaz. Y tal vez podamos aumentar un poco el tamaño de la fuente. Solo estoy tratando de hacer cosas que lo hagan un poco mejor. Ahí vamos. Y ahora quiero darle estilo al rep. Entonces si vamos al índice, sólo les recordaré qué es eso. Tenemos este div con el ID de wrapper, que va a sostener nuestro círculo. Vamos a marcar eso. Por lo que necesitamos el DNI de. Y de nuevo, queremos que se coloque en el centro. Entonces vamos a hacer márgenes y alterar para izquierda y derecha. Y esto apenas ahora especifica la altura y el ancho. El alto es solo que lo hagas, no lo sé, 12 él y el ancho. Y hagámoslo un poco menos. Hagámosle un adolescente. Está bien. Por lo que se puede ver que está empezando a perdonar a Abbas. El acto está empezando a verse mucho mejor. Y por supuesto el siguiente paso es hacer realmente nuestro círculo, para mostrarlo realmente. Sí, hagámoslo. Recuerda que el div tenía un círculo ideal. Lo primero que quiero hacer en el círculo, y esto va a llegar a ser muy importante, sobre todo en la próxima conferencia es el 12, cambiar su color, su color de fondo. Y D son varias formas en las que podemos hacer esto. En realidad voy a tener una conferencia extra sobre cómo funciona todo esto. Por ahora, solo date cuenta de que voy a estar usando el formato de color hexadecimal. Eso es lo que voy a estar haciendo. Cambiemos el color de fondo y el valor insertado no elites. Siempre hay que empezar con el hashtag cuando se trata de valores de Higgs. Y ahora se compone de personajes separados. El color que voy a hacer es como un tipo de color anaranjado para empezar. Va a ser si 63 y después 47. Eso lo guardamos. Tenemos nuestro color de fondo, pero ten en cuenta esta paloma, por qué no estamos viendo un color de fondo ahora es que este div en sí no tiene altura ni anchura. Entonces eso es a una altura de 200 píxeles y un ancho de 200 píxeles. ¿ Cómo se ve eso? Ahí vamos. Es una plaza sin embargo, son lo que está pasando. No te preocupes, vamos a estar haciéndolo en un círculo ahora. Ya sabes cómo convertirlo en un círculo. Sólo tenemos que fingir el radio fronterizo, ¿ no? Radio fronterizo. Y esto se hizo a un 100 por ciento. Ahí vamos. Eso ahora es círculo. Y se pueden ver los círculos casi tocando está tocando el gusto click en su a bordo cambia de color. No me gusta. Así que vamos a añadir un poco de margen a los 20 píxeles superiores. Ahí vamos. Entonces historiador para lucir bien. Y entonces lo último que quiero hacer es que tenemos nuestras notas abajo a la derecha. Yo solo quiero que lo peinemos aunque no hayamos editado el texto lo. Entonces lo que quiero hacer es agarrar esa nota y no la quiero pegada al círculo, fui a empujar hacia abajo. Entonces, de nuevo, sólo vamos a fingir la parte superior del margen. Eso debería quedar bien. Si no lo hace, lo cambiaremos más tarde, pero aquí vamos. Aquí es donde quiero dejártelo todo a ti. Yo quiero pasarle el dólar. Eso va a ser impresionante ahora mismo. Obviamente, cuando hago clic en este círculo, no hace nada. Yo quiero que hagas eso. Y quiero que incluya su código de manejador de eventos en un archivo JavaScript separado. Tenemos que empezar a acostumbrarnos a las buenas prácticas. Y solo piensa en qué es lo que tienes que hacer. Queriendo adjuntar un oyente de eventos a este div círculo con el id del servidor. Usted entonces queriendo esperar a qué evento y probó el evento click. Y entonces vamos a tener que generar de alguna manera un color aleatorio. Y si vas a nuestra hoja de estilo aquí y miras nuestro círculo, color de fondo, ese valor x. Necesita generarse aleatoriamente. Y podría ser un poco complicado para ti. No te preocupes, lo voy a pasar con ustedes en la próxima conferencia. Voy a tener dos fiestas tienen que tener nunca conferencia bonus sobre cómo va a funcionar exactamente nuestro código. Porque realmente es fascinante y está mejorando. 20. Desafíos para listeners de eventos: solución: Woo hoo, espero que te divirtieras y espero darle una oportunidad. Siempre digo que no importa si lo tienes bien o mal. El punto es que lo intentaste. Entonces aquí estamos. Literalmente no he hecho nada desde la última conferencia. Y empecemos a cortar y no está haciendo la solución juntos. Eso en primer lugar, déjame deshacerme de mí mismo para que puedas ver mejor la pantalla. ¿ Qué hacemos? ¿ Cuál es el punto de partida? ¿Lo hará? En primer lugar, agreguemos esta nota dentro esta etiqueta div con ID de nota el alumno dinámicamente primero. Y recuerda lo que dije en una prueba para incluir código de manejador de leyes en un archivo JavaScript separado. Entonces todo lo que tenemos que hacer aquí es insertar una etiqueta de script. Sí, necesitamos fuente de un archivo diferente. Sólo llamémoslo app.js. Podemos ir a nuestra estructura radicular aquí. Podemos agregar un archivo llamado app.js. Ahí vamos. Fin a agregar. Esto toma dinámicamente en la parte inferior, es lo más sencillo, y por eso quiero que empecemos con eso. ¿ Sabes cómo lo haríamos? Tiene un archivo HTML índice. En primer lugar, ¿dónde queremos agregar ese texto? Así es, queremos editar dentro de una etiqueta div con un id de nota. Entonces lo primero que tenemos que hacer es agarrar eso del DOM. No te preocupes. Vayamos aquí. paso uno lleva dinámicamente al div. Y aquí sólo voy a hacer una forma rápida y desagradable de hacerlo que agarrar el objeto de documento porque este es el punto de partida. Esta es la raíz de nuestra página web. Ahí tenemos un método llamado getElementById. Sabemos que el DNI es nota. ¿ Y qué propiedad queremos acceder a este elemento? Queremos acceder. Podemos hacer contenido de ticks, por ejemplo, podemos hacerlo en HTML, no importa. Y queremos cambiar el contenido, no. Y podemos decir lo que queramos. Esto es pura manipulación DOM. ¿ Cómo se ve? Y si guardo, aparece en nuestro navegador. ¿ Qué tan guay es esto? Espero que te excites. Es cosas realmente, realmente asombrosas. Pero esa fue la parte fácil. Ahora, R1 tiene que avanzar. Quiero que pasemos ahora al paso 2, y eso es cambiar el color de fondo del círculo en un evento de clic. ¿ Cómo haríamos esto? Volverá a tomar un banco estatal. ¿Cuál es el primer paso? El primer paso es que tenemos que agarrar el círculo de alguna manera, no te preocupes, porque a eso queremos adjuntar al oyente. Entonces definamos una variable JavaScript, inicia llamarlo círculo por falta de una palabra mejor. Y asignémoslo al valor de ese div completo que rodeaba. Entonces por supuesto comenzamos con nuestro elemento raíz de nuestra página, que es el documento al que accedemos a una propiedad llamada getElementById y el ID que lo llamamos era círculo. Recuerda si pudiera nuestro archivo índice. Estamos queriendo acceder a la propiedad de fondo de ese div con la id de circle. A la primera APR es que ahora tenemos ese círculo. Impresionante, Eso es un gran trabajo. El segundo paso es hacer ¿qué? Tenemos que adjuntar al oyente de eventos. Por lo que accedemos a nuestro círculo. Recuerde que cada elemento tiene acceso al método add event listener. Y el método AdDeventListener tiene dos argumentos. En realidad tiene más, pero no te preocupes por eso por ahora tiene dos argumentos obligatorios. El primero es el tipo de evento real. En este caso, queremos escuchar que se haya tratado el clicker. Y el segundo argumento es nuestra función de manejador. Y solo llamemos a nuestra función changecolor. Bastante intuitivo hasta ahora. Y esto nos lleva a la parte final de esta solución. Aquí es donde los medidores, aquí es donde va a estar el código más avanzado. Y entonces es que tenemos que definir nuestra función de manejador. En este momento hemos adjuntado al círculo un oyente de eventos. Dijimos que queríamos ejecutar una función llamada cambiar color cuando se hace clic. Pero por supuesto que en realidad no hemos definido esa función de cambio de color. Hagámoslo ahora. Entonces, por supuesto, usemos la palabra clave de función de JavaScript. Y lo hemos llamado cambiar de color, ¿no? Y cómo conseguimos la carne de nuestro código va a estar dentro de estos dos corchetes rizados. ¿ Quién tiene cuidado? Entonces, ¿por dónde empezamos? Y esto se va a poner un poco confuso tal vez, pero confía en mí, en la próxima conferencia, voy a explicar exactamente cómo funciona este código. El primer paso que quiero hacer es que quiero generar un color aleatorio. Una vez que he generado a color aleatorio en formato hexadecimal, entonces fui a asignar un color de fondo de ese div, ¿ese círculo a ese color aleatorio que hemos generado al sentido económico. Por lo que el primer consejo está en uno para generar un color aleatorio. Entonces definamos una variable JavaScript llamada color aleatorio. Ahora, lo que quiero que hagamos es que accedamos al objeto matemático de JavaScript. Y no te preocupes, obtenemos acceso a esto automáticamente directamente de la caja en cada navegador. Cada navegador tiene estas funciones disponibles. Es un objeto matemático. De verdad, de verdad es impresionante. Y en este objeto de mapa, hay un método llamado aleatorio. Y como cabría esperar, este método aleatorio devuelve un número aleatorio. Pero como ustedes ven aquí en mi IDE, me da una pista. Dice que devuelve un número entre 01. Lo que no te dice sin embargo, es que incluye el número 0, pero nunca incluirá el número 1. En otras palabras, producirá un número mayor o igual a 0, pero menor que uno. Enfriar, así que eso es lo que hace la función Math.Random. Pero ustedes estarían de acuerdo conmigo en este punto, si yo sólo hiciera esto, vamos a conseguir un número entre 01, lo que realmente no nos ayuda mucho. Sólo nos va a dar un alcance muy limitado. De hecho, nos va a dar, una vez que hagamos redondeo como cualquiera, nos va a dar un número. No lo suficientemente bueno para nosotros. Por lo que tenemos que multiplicarlo por un número. Bueno, ¿por qué número lo multiplicamos? En este caso, el número va a ser 1600000777 a 16. No te preocupes. Te voy a explicar cómo llego a este número. Pero por ahora, esa es la gama de colores que tenemos a nuestra disposición. Aka son las cantidades de diferentes colores que podemos generar aleatoriamente. Entonces, ¿qué tan genial es eso? Oh hombre, lo siento, sigo apareciendo. Sí, pero esto es importante. Si nos detuviéramos aquí, no bastaría del todo. Déjame mostrarte por qué. Yo solo consola log este color aleatorio. Ok, y es abrir la consola y nuestro navegador. Si ahora hacemos clic en el círculo, manitol para hacer clic en el círculo, pero podemos mirar ese número. Entonces sí, producimos números aleatorios, lo cual es impresionante. Se puede ver cómo está creando todos esos decimales, esos números de coma flotante. No queremos eso. Queremos redondear estos números. ¿ De acuerdo? Entonces no lo corta del todo para nosotros. Entonces por eso en este código, lo que quiero hacer ahora es que quiero redondear esto al entero más cercano. Por lo que podemos envolver toda la cantidad entre paréntesis y podemos acceder a otro método de matriz JavaScript llamado floor. Por lo que agarramos la interfaz de tapete y ejecutamos un método llamado piso. Ahí vas. Y esto debería redondear los números. Entonces si ahora volvemos a abrir nuestra consola, consola, y vamos a dar click en el círculo. Ahora ya puedes ver que nos estamos preparando. Impresionantes, números redondos. Sí. Pero podrías estar pensando para ti mismo a estas alturas, Clyde, esto no es lo mismo que esos valores hexadecimales que escribimos en nuestra hoja de estilos, su principal. Pero si vuelvo a nuestra hoja de estilo, nosotros como nuestro color de fondo círculo, ahí vamos. Se puede ver que tenemos unas camadas metidas ahí dentro. Y ese es el punto con todo este sistema hexadecimal. Incluye en realidad 16 personajes. Va de 0 a nueve, pero no teníamos las letras a, b, c, d, e, y f. Entonces, ¿cómo conseguimos esos caracteres aleatorios? ¿ Cómo metemos estos números en formato hexadecimal? Will afortunadamente para nosotros, hay otra función llamada string. Y de nuevo, voy a estar expandiendo lo que es exactamente esto en la conferencia de bonificación que se avecina. Por ahora, sólo entiende que toma en número y lo convierte en cualquier base que especifique el argumento. Sí, va a ser base 16 porque sabemos que los valores hexadecimales, nuevo, pueden tomar 16 valores aleatorios diferentes. Esto lo voy a explicar en la próxima conferencia. No te preocupes, sube así que volvamos ahora a nuestro archivo JavaScript. Y la otra cosa que quiero hacer al respecto es que quiero implementar una función llamada toString, como acabo de mencionar, y se necesita un argumento. Y esa es la base que quieres usar. Y queremos usar la base 16. Ooh, sé que es una línea bastante larga, pero no te preocupes, si ahorita guardamos esto y accedemos, nuestra consola debería funcionar. Y hacemos click en el círculo. ¿ Qué tan impresionante es eso? Está produciendo literalmente valores hexadecimales. Sí, no tenemos el hash al frente, que vamos a hacer ahora. Pero producimos un valor hexadecimal aleatorio arriba. Impresionante. Espero que realmente te divirtieras. Lo hemos hecho hasta ahora y casi de día, casi lo hicimos. Entonces lo último que tenemos que hacer ahora es que producimos un color aleatorio. Tenemos que afectar ahora el color de fondo de ese div, y tenemos que tocarlo color aleatorio a él. Entonces hagámoslo rápidamente. Podemos eliminar esta consola ahora porque sabemos que estamos obteniendo los valores correctos. El siguiente paso es acceder a nuestro círculo. Recuerda que ya tenemos el círculo. Existimos para obtener elemento por método ID. Y tenemos todo este div disponible para nosotros en este momento. Entonces todo lo que tenemos que hacer entonces es querer afectar su propiedad de estilo. No te preocupes. Y con en el estilo, queremos afectar el color de fondo. Ese es el que queremos cambiar. Y queremos asignarlo a un valor. Y voy a estar usando literales de plantilla aquí. Si no sabes cuáles son, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. Si sí sabes cuáles son mayores de lo que podrías seguir. ¿ Cuál es lo primero que queremos poner en nuestros literales de plantilla? Eso es correcto. Tenemos que poner nuestro hashtag. Recuerda, eso es lo único que nos falta cuando generamos nuestro color aleatorio. Entonces directamente de la que queremos insertar nuestro color aleatorio. Y mis queridos alumnos, esto es todo. Acabas de terminar. Es algo bastante avanzado, ¿no? Y no te preocupes, voy a estar ampliando en la próxima conferencia, conferencia bonus sobre cómo funciona todo este aleatorio matemático y cómo llegamos a los 16.7 millones de Amber. Pero por ahora lo has hecho. Vamos a expandir esto. Hagamos click en esto y ni siquiera he probado esto, espero que funcione, pero déjame ticar. Misión concluida. Qué impresionante esta cosa realmente me excita. Espero que te divirtieras. Espero que hayas aprendido mucho a través de esta conferencia, realmente empezando a llegar mucho más avanzado. Ahora estamos adjuntando elementos de los oyentes. Agregamos tomas dinámicamente dentro de escuchar el evento click a través del nuevo método add event listener. Y entonces por supuesto tenemos nuestro código de manejador en un archivo JavaScript separado. Tan bien hecho. Estoy realmente impresionado. Y déjame solo incluir unas cuantas hojas de bono. Simplemente no déjame explicar todo este hexadecimal funciona y cómo funcionan los colores cuando se trata de CSS y el navegador. Te veré en la próxima conferencia. 21. Diferentes formas de definir un color: Hombre, ¿Qué acaba de pasar? Echaremos un vistazo a la conferencia anterior. Recuerda, teníamos que producir un color aleatorio cada vez que se hacía clic en el círculo. ¿ Y cómo hicimos eso? Bueno, recuerda primero tuvimos que agarrar ese círculo usando el método get element by ID. Y una vez que tuvimos eso, tuvimos que generar un número aleatorio cada vez que se hacía clic en ese círculo en número aleatorio tenía que estar empezando en 0 entidad para pasar todo el camino a dieciséis millones, setecientos siete a 15. Sí. No me he equivocado eso. Eso es un cinco al final. Aviso, como ponemos un código R. Pero no te preocupes, voy a estar explicando esto en esta conferencia. Entonces como mencioné, ¿ y por qué usamos estos números? Bueno, vamos a deshacernos de eso en su inicio mirando cómo realmente sentamos los colores en nuestro código. El color se puede definir en cualquiera de las tres formas siguientes. Usando una palabra clave. Utilizando los hs son todo sistema de coordenadas cilíndricas. Y utilizando el sistema de coordenadas cúbicas RGB. Este no es un curso sobre CSA, así que voy a ser muy rápido y breve al respecto. Echemos un vistazo primero al método de palabras clave. Se trata de identificadores insensibles a mayúsculas y minúsculas que representan un color específico. Ejemplos son el uso de la palabra clave rojo, azul , tomate, luz ver verde, etcétera, etcétera, y para tu información. Se trata de unos 140 nombres de columna en total, dar y tomar. Y estos son los más intuitivos, que no nos da tanta flexibilidad. Está bien, Genial. ¿Qué es este sistema de coordenadas cilíndricas HSL? ¿Cómo funciona eso? Bueno, esto define un color de acuerdo a su matiz, saturación, y ligereza. Y hay un componente alfa extra que representa la transparencia de los colores. Y por último, veamos este sistema de coordenadas cúbicas RGB. ¿ Cómo funciona eso? En primer lugar, recuerda este es el que utilizamos en nuestro escenario catadores. Y quizás de manera muy intuitiva, el modelo RGB define un color de acuerdo a sus componentes rojo, verde y azul. Y lo que es súper interesante es que los colores RGB se pueden definir por dos métodos. Por medio del método hexadecimal, que es el que usamos. Y a través de notaciones funcionales, como el uso del método funcional RGB. Pero como mencioné, utilizamos el formato hexadecimal. Antes de seguir adelante con estos colores, déjame simplemente saltar a la consola. Déjame mostrarte a lo que me refiero con estos tres métodos. Lo llamaremos slash cuatro métodos porque tienes a ciertos métodos en el sistema RGB. Las imágenes te muestran lo que quiero decir. Vamos a saltar ahora. Y se puede ver en ese test de método de AdDeventListener que pasamos, usamos el formato hexadecimal, pero hay otras formas que nos darán exactamente el mismo resultado. Y simplemente se reduce a la preferencia personal. No hay camino equivocado ni correcto. Déjame mostrarte algunas de las otras formas en que podemos hacerlo. Entonces comentemos ese color de fondo. Por lo que ahora no hay color de fondo. Lo que podemos hacer es usar el RGB, que solo consiste en valores rojos, verdes y azules que van entre 0 y 255. Si ahora ponemos 255, 1909, y 71, y salvamos, obtenemos exactamente los mismos colores que teníamos antes. Pero esta no es la única manera, ¿verdad? No, tenemos otro método. Entonces usemos ahora el método de saturación de matiz y ligereza. Y si ponemos valores nueve y un 100 por ciento y 64% y ahorramos eso y comentaremos esto. Es exactamente del mismo color, pero estas no son las únicas formas que hay? ¿No? Encima de mi cabeza, se me ocurre usar también el nombre del color como sabor. Entonces lo que quiero decir con eso, bueno, vamos a agarrar propiedad de color de fondo, y se llama tomate. Y si guardamos eso y comentamos esto, es exactamente del mismo color. Y puedes ver aquí si descomento todos estos, mi IDE te da pistas de qué color son y ahora todo lo mismo. Entonces este es mi punto. Hay muchas formas diferentes de despellejar a un gato. Si saltar de nuevo a la conferencia. 22. Bit vs. Byte: De acuerdo, Genial, Así que espero que eso esté empezando a tener sentido. Pero sigamos adelante. No hemos llegado a la micelle ella, Vamos a deshacernos de todo esto. Y hablemos de este sistema RGB. En particular, quiero que hablemos de este formato hexadecimal. Podrías estar pensando, Clyde, ¿por qué usa hexadecimal? El motivo para mí solo, es intuitivo y estos números hexadecimales son muy naturales para las computadoras. Por qué son naturales para las computadoras lo harán, porque las computadoras almacenan y manejan dígitos binarios. Y como veremos en breve, cuatro dígitos binarios conforman un dígito hexadecimal. No te preocupes si te estás rascando la cabeza. Vamos a entrar en breve. Entonces lo primero que necesitamos discutir es que necesitamos discutir este concepto de un dígito binario. Y en el mundo de la informática, la palabra dígito binario a menudo se acorta a la palabra pero BIT. Ver esos litros verdes, ellos, bien, bueno, ¿qué es un dígito binario? Un dígito binario solo puede ser 0 o uno, y debido a esto también es un número mágico 2. La mayoría de los geeks de computadoras por ahí, todas las señales dentro de una computadora tienen dos y sólo dos días diferentes para valores binarios. 01. Por lo que se puede pensar en ello como fuera de ser 01, estar encendido, o 0 puede ser falso y uno puede ser cierto. En la terminología informática, una pieza de información que puede almacenar ya sea un 0 o uno se llama apuesta. Entonces, en otras palabras, un bit representa valores de 0 a uno, IE puede representar dos valores. Ponga dos bits juntos, y puede representar 012 o tres. Aka puedes representar cuatro valores, tres, pero puedes representar a Sarah a siete valores u ocho valores en total. Cuatro bits significa que puedes representar dos a la potencia de cuatro, que es 16 sedes diferentes. Supongo que podemos seguir ad infinitum, pero la fórmula es simple. bits X pueden representar dos a la potencia de los valores x. Y es por eso que dos es un número que es muy importante para los juegos de computadora. Estos se llaman los números base 2. Así como los números base 10 son muy importantes para nosotros. Humanos, fino adolescente, dedos en nuestra mano. Tina, ciento diez cientos, etcetra, etcétera. Esos son números muy importantes para los humanos. tanto que muchos geeks informáticos conocen los números 2, 4, 8, 16, 32, 64, 128, 256, seis cetra cítrico. Y vas a ver el punto de todo esto en un segundo. ¿ De acuerdo? Entonces eso es un poco, un poco eventualmente se convierte en un byte. En algún momento, los primeros ingenieros informáticos se le ocurrió mordida como la siguiente unidad por encima de un poco. Un byte sólo se define como ocho bits. Y esto significa que un bytes puede representar dos a la potencia de ocho números o 256 valores diferentes. Y si cualquiera de los valores mínimos de un byte es 0 y el valor máximo de un byte es 255. O si queremos mirarlo en forma binaria, solo van a ser los ocho bits todos siendo unos. Quien aplicó esto es una gran teoría, pero estoy harta de la teoría. ¿ Por qué esto se vuelve importante para nosotros? Prácticamente? Buena pregunta. Entonces volvamos a saltar a nuestro número hexadecimal. Recuerda empezamos con un hashtag y fue seguido de seis dígitos para recordar eso. Y también tenga en cuenta, como mencionamos antes, el sistema RGB define los números a partir de unos valores rojos, verdes y azules. Y en el sistema hexadecimal, los dos primeros dígitos están relacionados con la lectura. Los dos segundos verdes y los dos últimos están relacionados con el azul. Pila un poco tiene sentido. Pero echemos un vistazo a uno de estos valores. Los valores hexadecimales pueden ser desde 0 hasta el carácter. Si, en otras palabras, un dígito hexadecimal puede tener 16 valores diferentes. Un cliente que es genial, pero no sólo hay un dígito por cada color. Veo que dicen los dos dígitos, y esa es una buena pregunta. Ahora tenemos dos dígitos, cada uno puede tener 16 valores diferentes. Esto significa que dos dígitos hexadecimales combinados juntos así pueden hacer 16 veces 16 es 256 colores diferentes. Esto es algo que empieza a tener sentido. Por lo que sabemos que la tarifa puede tomar 256 colores diferentes. El verde puede tomar 256, y el azul, lo que significa que son 16777216, diferentes tonos de color que se pueden producir por el formato hexadecimal. Woo hoo. Espero que esto te esté volando la cabeza. Es realmente fascinante. Entonces para volver a mi lógica, sí, mi afirmación de que los números hexadecimales en naturales a las computadoras. ¿ Por qué es natural para las computadoras? Más simplemente porque cada dígito hexadecimal, por lo que sabes, el rojo y el verde y el azul. Esos se pueden almacenar como un byte y bytes de muy, muy conveniente cuando se trata del mundo informático que puede contener un carácter ascii. Y igual de importante importancia, un byte es el tamaño de hija mínimo estándar de facto para el almacenamiento de memoria. Y si yo, yo, también es el tamaño mínimo de CPU y otros registros periféricos. Toma esto también almacenado como bytes. Los campus o scripts Unicode generalmente se codifican como bytes vía UTF8. El punto que trato de hacer es que las picaduras son muy, muy útiles cuando se trata de computadoras. Y es por eso que el tipo hexadecimal de formato o sistema, para mí tiene sentido más intuitivo. Y podrías estar pensando, genial, podemos producir 16.77 millones de colores. ¿ Eso es suficiente? Y sí, es suficiente. El ojo humano sólo puede distinguir hasta 10 millones de colores. Por lo que tener 16.7 millones es mucho más que suficiente. Pero usted hizo una buena pregunta y para ser veraz, hay otros estándares por ahí, por ejemplo, puede que haya visto domesticado, pero HDR, ¿esto se relaciona con la profundidad de color, con cada valor RGB siendo de 30 bits, ahí, diez bits por canal en lugar de nuestros ocho bits. Pero de nuevo, es una especie de punteros porque el ojo humano sólo puede distinguir después de cierta cantidad de colores. Ya conoces el viejo dicho por qué arreglar algo si no está roto. Pero volviendo a nuestro código, es exactamente por eso que escribimos la función. Queremos producir un número aleatorio. Y queríamos producir un número aleatorio hasta 16777216. Recuerda, la función matemática aleatoria, que es a partir de JavaScript que genera un número entre 0, que es inclusivo y uno que es exclusivo. De esta manera, lo anterior o producir valores entre 0 y 16, triple 7.999215. Y luego usamos el método de piso matemático para redondear hacia abajo al número entero más cercano. Y lo hice de manera muy deliberada porque ahora si redondeamos a todo el número, ustedes están de acuerdo conmigo, vamos a conseguir valores entre 0 inclusive y 16777215 inclusivamente. Y cuello es exactamente lo que quería. Ese valor, 16, triple siete a 15 se convertirá en valor hexadecimal. Si FF, FF, FF, qué he hecho demasiadas f's, significan ser sólo seis f's. De ahí que ese es el número más alto que queremos para la conversión hexadecimal. Y si incluyes eso con el número 0, sí produce 161717, 16 valores únicos. ¿ Quién? Espero que esto tenga sentido. Pero recuerda, no paramos. Sí, agregamos la función de piso y luego también tuvimos que agregar el método toString. Entonces en la siguiente conferencia, porque esto se está haciendo bastante largo ahora, quiero simplemente mencionar brevemente el método toString en cómo funciona eso. Espero que estés aprendiendo una tonelada, espero que te diviertas y te veré, te veré en la próxima conferencia. 23. Cómo funciona el método toString(): Estamos casi terminados y hemos llegado tan lejos. Así que aguanta ahí. Esta va a ser la última conferencia sobre nosotros. Por lo que sólo lo haremos, ahora tenemos un número hex generado aleatoriamente. Y antes de ir más allá, sólo quiero recordarles cuál es este objeto matemático. Se trata de un objeto JavaScript disponible para nosotros automáticamente en cada navegador. Entonces eso es bastante simple. Simplemente utilizamos los métodos Math.Random y Math.Floor. Y al usar estos dos métodos, ahora tenemos un número de resultados en el rango de 0 y 1, seis, triple siete a 15. Recuerda nuestro formato hex, puede ir desde 0, dos Fs. Por lo que tener números no es suficiente. Y es exactamente por eso que necesitamos acceder al método ToString. Este método convierte un objeto o un número, en nuestro caso, lo adivinaste en una cadena. Y la buena noticia para nosotros es que cada objeto tiene un método ToString. Y casi todo en JavaScript es un objeto que incluye lo que acabamos de producir. Sí, voy a numerar. Y esta función toString acepta una única base de parámetros opcional. La base solo especifica cómo se debe representar el entero en una cadena. Entonces digamos que hemos definido una variable llamada num. Y vamos sólo por argumentaciones, supongamos que ese número es 1, 2, 3. ¿ Y si accedemos a este método toString, pero lo hicimos como base 2, recordaremos que la base dos es binaria, es decir, solo tenemos dos dígitos, 01. Entonces si accedemos al método toString como base 2 en ese número, se nos devolvería el resultado en forma binaria, que es para 1011. Pero en nuestro caso no usábamos base de dos grados, se usaría basado 16. Recuerda, hexadecimal es la base 16. Está conformado por 16 símbolos diferentes. Por lo que el método toString anterior convertirá el 123 en forma hexadecimal. En el ejemplo anterior, con nuestro número 1, 2, 3, devolverá el valor siete. Y por eso usamos el método toString en nuestro número para convertirlo a formato hexadecimal. Espero que tenga sentido. Espero que usted mucho más cómodo con lo que acabamos de hacer. Y como siempre, no hemos terminado. Tenemos una tonelada más que aprender. Por lo que basta de saltar en esto. Ahora, sigamos adelante. 24. Tipos de eventos: ratón y teclado: Hemos aprendido acerca de los manejadores de eventos en línea, propiedades del manejador de eventos y los oyentes de eventos. Y en la mayoría de estas instancias siempre miramos el evento click. Pero como seguí haciendo alusión al OEM, muchos más eventos en el DOM. Y esto me lleva a esta conferencia. Y es que quiero que hablemos de hechos comunes. Y por eventos comunes son solo eventos medios que más te encontraras. Pero primero, vamos a dar un paso atrás. Las venas ficticias son solo cosas que han pasado. Muy a menudo un evento se desencadena por la acción del usuario. Por ejemplo, hacer clic en un botón del ratón o tocar un teclado. Y sabemos que en cada evento, ya sea un evento de clic o un evento de teclado, cada evento es único. Se trata de un objeto con propiedades y métodos propios. Este es un punto importante que quiero atravesar y veremos ejemplos de esto en breve. Y muy importante, todos los eventos heredan del objeto de evento. Se trata de una interfaz que representa cada evento que tiene lugar en el DOM. Y sí, cada evento individual, sin importar el tipo que sea, hereda de este objeto de evento. Eso podría haber sido un IV inmiscuido por una acción del usuario o podría haber sido generado por una API. Por ejemplo, para representar el progreso de una tarea asíncrona. El evento podría haberse desencadenado programáticamente. Podrías haber definido el evento y enviarlo al objetivo especificado usando el objetivo de vena y despacho en método de impresión. No te preocupes, un ERD podría ser un fenómeno un poco confuso. Basta con tener en cuenta el punto que estoy tratando de hacer es que son muchos tipos de Vivienne, algunos de los cuales usan otras interfaces basadas en el objeto de evento principal, esta débil interfaz aquí. Y lo que es realmente genial es que el objeto C débil contiene el conjunto estándar de propiedades y métodos que son comunes a todos los eventos. De acuerdo, Bueno, sigo mencionando que son toneladas de venas diferentes, pero ¿qué son? Bueno, literalmente tenemos una plétora de tipos diferentes. Se pueden ver algunos de ellos aquí en la pantalla. Pero como mencioné, solo quiero que veamos los eventos comunes aquí, aka las venas que vamos a estar encontrando con los más desarrolladores de ondas S. Entonces, vamos a deshacernos de todo el otro ruido. Y veamos algunos otros eventos comunes que están disponibles para nosotros. Y sé que podrías estar viendo esos gruñidos o solo cinco tipos comunes de eventos y respuestas. Sí. Al igual que la mayoría de las venas que vamos a estar escuchando caerán en una de estas cinco categorías. Los eventos de ratón, como saben, se encuentran entre los eventos más utilizados. Y sólo hacen referencia a eventos que implican hacer clic en botones del ratón o pasar el cursor al mover el puntero del ratón. A lo que me refiero por flotar y más ancho sí ve un evento flotante. Bueno, recuerda, cuando usamos el mouse en y el mouse salimos en tándem, prácticamente creamos un efecto de desplazamiento que dura como el puntero del mouse esté en el elemento. Y sabemos que un evento de clic es un evento compuesto que se compone de una combinación de mouse down y mouse up. Por lo que realmente hay mucho que podemos hacer con esta categoría de ratón. Pero no sólo tenemos eventos de ratones, Dewey. También tenemos un montón de eventos de teclado. Y como su nombre lo indica, los eventos del teclado se utilizan para manejar acciones del teclado, como presionar una tecla, levantar una tecla, mantener presionada una tecla, etcétera, etcétera. Podrías notar en la pantalla aquí tenemos un evento key down y un evento keypress en el día un poco igual. Sí, son similares pero no son exactamente iguales. Clave. Dom reconocerá cada tecla que se presione, mientras que la pulsación de teclas emitirá teclas, aka excluirá las claves que no produzcan un personaje. Por ejemplo, como las teclas Shift out, delete, etcétera, etcétera. Y recuerda cómo dije que cada tipo de evento individual tiene su propio conjunto de propiedades y métodos. Bueno, el teclado no es la excepción. Tienen un conjunto específico de propiedades para acceder en darnos información sobre claves individuales después han abrazado. Permítanme mostrarles un ejemplo rápido. 25. Ejemplo de evento de Keydown: Recuerda lo que dije que cada evento tiene sus propias propiedades y métodos únicos a su disposición. Bueno ahora quiero mirar el evento key down porque estamos viendo eventos de teclado. Entonces pensé que este es un buen momento para parar y echar un vistazo a un ejemplo. Entonces como siempre, empiezo con un archivo muy en blanco porque quiero que codificemos juntos. Quiero crear una página HTML muy sencilla con un cuerpo. Y en el cuerpo solo quiero una etiqueta de guión. Ni siquiera quiero incluir ningún HTML. Eso va a ser muy sencillo. Y lo que quiero hacer es escuchar un evento key down sobre todo el documento. Por lo que accedemos a nuestro objeto de documento, y sobre eso agregamos el AdDeventListener. El evento que queremos escuchar ahora se llama key down. No importa. Y quiero usar la sintaxis de flecha para agarrar el evento. Y con el fin de obtener los datos. Así es, necesitamos una variable y sólo voy a llamar a ese evento variable. Y en este objeto de evento que nos ha devuelto, hay una propiedad llamada clave. Esta tecla nos dirá qué tecla se presionó en nuestro teclado. Y a esto me refiero. Y menta diciendo que cada tipo de evento tiene su propio conjunto único de propiedades. El evento click, no tiene una propiedad clave en absoluto, quiero decir con ello. Entonces para demostrártelo, vamos a consola log vein to key. Entonces vamos a hacer, Vamos ahora a nuestro navegador y testis. Entonces por supuesto que deberíamos conseguir una página en blanco es lo que esperamos. El inspeccionar este documento. Vámonos a la consola, actualicemos. Y ahora déjame presionar la tecla a de mi teclado. Mira esa consola registra todos los valores que estoy presionando en mi teclado. Hola mundo. ¿ Qué tan cool somos nosotros? Hoy vamos. Este es sólo un ejemplo. Si desea ver qué métodos y propiedades están disponibles en todo el evento, todo lo que podríamos hacer es en lugar de acceder a una propiedad en el evento, solo podemos registrar en consola todo el evento en sí. Entonces vamos a refrescarnos y déjame presionar cualquier tecla, solo mi barra espaciadora por ejemplo. Y ahí vamos. Tenemos un evento de teclado. Y dentro de este evento, se pueden ver sus propiedades y métodos. Y ahí estaba la llave por cierto. Así fue y cómo supe que había una propiedad clave sobre la severa esperanza que tiene sentido. Volvamos a la conferencia. 26. Tipos de eventos: formularios: Herbert haciendo escenas y espero que te diviertas. Por lo que hemos hablado de los eventos del teclado. Echemos un vistazo a las cuatro reuniones. Y solo puedes imaginar lo importante que es esto. Para mí. Las venas son acciones que pertenecen a formas, como elementos de entrada que se seleccionan o no se seleccionan, y por supuesto, formularios que se están enviando. Son un montón de eventos a nuestro alcance que podemos tener cuidado en un focos formales, bastante interesante. El enfoque se logra cuando se selecciona un elemento, por ejemplo, a través de un clic del ratón o cuando el usuario navega por una forma de fuego, la tecla Tab. Y lo super-duper interesante es que JavaScript se utiliza a menudo para enviar formularios y ver los valles a través de un lenguaje back-end. Y la ventaja de usar JavaScript para costura de formularios es que no requiere una recarga de página para enviar el formal y JavaScript por supuesto, también se puede utilizar para validar campos de entrada contestados. Y ya me conoces, me encantan los ejemplos. Entonces veamos ahora un ejemplo de forma. Cómo podemos escuchar las venas y cómo podemos extraer datos de un formulario y mostrarlos en una pantalla. Echemos un vistazo. 27. Tipo de evento de forma: ejemplo: De acuerdo, Así que hemos estado hablando de formularios y de cómo podemos interactuar con las formas. Esto está mirando un ejemplo muy sencillo y rápido. Aquí en la pantalla se puede ver que no se ve tan agradable. Las imágenes se acercan para que puedas verlo un poco mejor. Este formulario solo pide el nombre del usuario y saben cuál es su animal favorito. Por lo que sólo podemos escribir mi nombre. Y mi animal favorito como sabes, es un agua. Danos presentar eso. Yo solo quiero mostrar un mensaje diciendo Hola Clyde, me encantaría tener tus togas desgastadas, por favor. Entonces esto ha recogido dinámicamente lo que es el animal que he elegido y también mi nombre. ¿ Cómo íbamos a hacer eso? Bueno, de eso se trata toda esta conferencia. Entonces voy a negrita el correlacionar la página del esqueleto aquí. Y luego en la próxima conferencia, les mostraré la solución. Entonces vamos a darle una oportunidad. Eso empezó. Y aquí vamos, poner una página en blanco o ya sabes lo que voy a hacer, déjame realmente poner el navegador en blanco a la derecha. Y yo tomaré decir eso a la izquierda sólo para que podamos juntarlo y podamos ver el proceso paso a paso. primer paso es crear unas plantillas HTML muy simples. Y por supuesto tenemos nuestro cuerpo dentro de nuestro cuerpo. Empecemos a construir nuestro formulario. Lo primero que quiero hacer es que quiero tener una etiqueta de etiqueta. Y sólo podemos decir nombre por favor. Y por supuesto podemos tener una entrada de tipo texto. Esto solo tiene identificación de nombre. Si guardamos eso y vamos a un día de navegador, nos dieron nombre por favor. Y podemos introducir nuestro nombre basado en el miedo, simple, y tú lo haces un poco más grande. Y entonces esto podemos reducir un poco solo para que todo esté en una línea. Y los misterios tienen una ruptura y código. Y entonces podemos empezar a implementar nuestra lista desplegable y ganar. Podemos envolver esto en una etiqueta. Permítanme que me quite este otoño. Y podemos hacer la pregunta, ¿cuál es tu animal favorito? Y por supuesto podemos tener una etiqueta selecta aquí. El DNI puede ser animal. Entonces sí, podemos tener nuestras opciones. Y tenemos un perro va a hablar y ket, y por supuesto los valores tienen que ser charla de guerra y ket. Y si guardo esto, sólo eliminemos este nombre de mano. No lo necesitamos. Simplemente salvaré este día. Regatta es caja de oscilación con refresco para perro, perro y gato. Hasta ahora tan bueno. ¿Qué necesitamos a continuación? Bueno, necesitamos el botón de enviar, ¿verdad? Otro romper el patrón intuitivo ahora, con un ID de botón. Y el botón puede decir enviar, ¿cómo es eso? Ahora lo último que quiero agregar es cuando el usuario hace clic admitido, mostramos ese mensaje justo en la parte inferior, necesitamos un elemento HTML para insertar que tome en. Por lo que quiero agregar un elemento div con ID de mensaje. Y ahora mismo esta etiqueta div puede estar vacía. Eso está totalmente bien. Y entonces, ¿cuál es el siguiente paso? Bueno, el siguiente paso es baterista. Para acceder al DOM mediante el uso de JavaScript. Aquí es donde entra la diversión. Entonces todo lo que tenemos que hacer ahora es añadir nuestra etiqueta de script. Y esta es una especie de manera que quiero dejarla contigo. Pero antes de que lo haga solo tenga en cuenta, cuando empezamos a acceder a las cosas desde una caja de entrada, muchas veces lo que nos devuelven es un objeto que es un poco una pista. Y piensa en eso cuando intentes acceder al nombre del usuario sin decirte cuál es la solución, solo piensa en el escenario que tienes que tomar. Bueno en primer lugar, hay que adjuntar a algo un oyente de eventos. ¿Qué es lo que quieres? Texto que había sido probado dos. Eso es correcto. Lo estamos adjuntando al botón de enviar. ¿ Y qué evento estás escuchando? Simplemente piensa para el evento click. Porque cuando el usuario hace clic en ese botón, quieres que algo suceda. Y luego prácticamente solo necesitas definir tu manejador de eventos, esa función de devolución de llamada. Necesitas definir todas las cosas que quieres que sucedan. Eso es todo lo que hay a ello. Dale una oportunidad. Y en la próxima conferencia, caminaré por la solución contigo. 28. Tipo de evento de formula: agrega JavaScript: Está bien. ¿Le diste una oportunidad? Espero, señor. Entonces, empecemos a atajar mosquitos. De lo que se ofrece palo. Bueno, el primer paso está aquí. Déjame en realidad sólo hacer un comentario. Ahora, acceda al DOM a través de JavaScript EBITDA, y por eso insertamos estas etiquetas de script. ¿ Cuál es el primer paso? Cuando el usuario hace clic en enviar, queremos que un evento sea despedido. Y a continuación, cuando queremos que se ejecute nuestro código de manejador, ¿no es así? Así que paso uno, agarra el botón, y ya sabemos exactamente cómo hacerlo. Definimos una variable llamada botón. Accedemos a nuestro objeto de documento con nuestro cuello, accedemos a un método llamado get element by ID. ¿ Y qué hace el DNI del botón? No obstante, de manera muy intuitiva, lo llamamos botón. Ahí vamos. Ahí está nuestro botón. Déjame solo hacer esto más grande. No hace falta mirar el navegador por ahora. Entonces ahí vamos. Ese es el paso uno. Paso dos. El segundo paso es agregar nuestro oyente de eventos al botón. Y sí, vamos a agarrar este botón. Vamos a acceder al método add event listener. El evento que queremos escuchar, el evento click. Y el segundo argumento es definir nuestra función de manejador. En este caso, solo llamémoslo en botón click por falta de una palabra mejor. Y esto también era palo, ¿no? Agrega el oyente de eventos. Aquí vamos. Y el tercer y último paso es qué? 3, 2, 1, seguro que ya lo has adivinado. Está definiendo nuestra función de manejador. Y por supuesto empezamos por usar la palabra clave de función de JavaScript, hemos llamado al clic de botón. Y todo el calor y la carne de nuestro código va a estar dentro de estos tirantes rizados. Entonces ahí vamos. ¿ Qué queremos pasar ahora? Bueno, si me desplaza hacia arriba, sí, recuerda que tenemos este div con ID de mensaje. Ahora mismo es solo una etiqueta div vacía. Poner lo que queremos hacer es que estamos corriendo para agarrar todas las entradas del formulario e insertarlas con inactivas. Entonces lo primero que tenemos que hacer es tener acceso a ese div. Tenemos que tener una referencia al mismo. Podemos cambiar sus tomas contienen propiedad. Definamos una variable JavaScript llamada mensaje si dos. Entonces sabemos qué es y sabemos que podemos acceder a él utilizando el objeto documento. Podemos entonces acceder a get element by ID y el ID de eso es mensaje. Y ahora queremos agarrar el nombre del usuario y la forma que está abordando ese tema primero, podrías pensar que lo hacemos definiendo un nombre. Accedemos al documento, obtenemos elemento por ID y el DNI es nombre. Podrías pensar que así es como lo hacemos. Nos desplazamos hacia arriba. Se puede ver que hemos dado ese campo de entrada y id de nombre. Pero si hacemos esto, esta solo consola cierre esta sesión, nombre de registro de la consola. ¿ Qué esperarías ver? Recuerda que te di una pista en la conferencia anterior. Bueno, eso es abrir la consola aquí. Haz esto un poco más grande. Si nuestro nombre, tiene dinero. Y vamos a nuestra consola y hacemos clic en Enviar, ¿qué crees que va a pasar? Como se puede ver, lo que se nos devuelve no es el valor real, sino que es un objeto de nuevo. Y lo que tenemos que hacer ahora es que realmente tenemos que acceder a una propiedad llamada valor en este ticket, el valor de ese texto de entrada. Lo que hacemos aquí con la consola log main, en realidad no queremos que una consola log el nombre, queremos que sea el valor real. Y si escribo algo ahí dentro y voy a presentar, ahí vamos, obtenemos el valor real. Entonces, ¿eso tiene sentido? Entonces vamos a cerrar esto ahora. Volvamos a nuestro editor de textos. Entonces lo que quiero hacer es que no queremos acceder al nombre en sí porque eso nos devuelve todo el objeto al que queremos acceder a esta propiedad llamada valor. Y por supuesto, el siguiente paso es escoger al animal que el usuario ha elegido, ¿verdad? Por lo tarde documento animal obtener elemento por DNI. Otra vez. Lo definimos con una identificación de animal. Y de nuevo, queremos acceder a la propiedad de valor de ese objeto. Si nos desplazamos hacia arriba, puedes ver que le hemos dado a ese elemento de selección un ID de animales. Es así como elegí aquí la palabra animal, que fue detenido incorrectamente. Y así allá vamos. En este punto tenemos toda la información que necesitamos. El último y último paso es agregar esta información como texto a ese div. Por lo que ahora podemos ir mensaje de salida LED. Desplázate aquí abajo. Todo lo que tenemos que hacer es acceder a nuestro mensaje div. Queremos cambiar el contenido del texto, y aquí puedo usar literales de plantilla. ¿ Qué queremos decir? Bueno, sería grosero que no dijéramos hola y le saludáramos por el nombre. Y entonces sólo queremos decir, me encantaría tener a su animal, por favor. Y si guardamos esto y vamos a nuestro navegador, todo debería funcionar. Si nuestro nombre es Wally y el animal favorito es un gato, y tú vas a presentarte, Holly, me encantaría tener tu pieza de gato. Y ahí vamos. Literalmente hemos usado tipo de las formas, sí, con valores de salida dentro de las formas. Y hemos mostrado en la pantalla muy intuitiva, muy fácil. Espero que tenga sentido y me esté divirtiendo. Sigamos adelante. 29. Tipos de eventos: toque y ventana: A quién cerdos cruzando por este impresionante. No hablemos de estos eventos táctiles. ¿ Cuáles son esos? ¿ De qué se trata eso? Bueno, en primer lugar, quiero establecer un tacaño sido así que solo se activó en dispositivos táctiles habilitados como smartphones y laptops con pantalla táctil. Si bien estos barrancos de toque necesitaban bien, pensémoslo. Las venas de Mousey como en el clic y el ratón se mueven. Se activan en la mayoría de navegadores y dispositivos. No obstante, para los teléfonos inteligentes y iPads y similares, el movimiento del ratón ni siquiera se activa porque el contenido toma el dedo sobre el teléfono, por ejemplo, algunos teléfonos inteligentes o agregando costuras, esto agregará algunos más teléfonos inteligentes, no deberían tomar movimientos de ratón en el futuro. Pero en instancias donde no quieres estar usando el ratón y los frijoles. Tenemos estos eventos táctiles. Y lo último que quiero discutir ahora son estas ventana que gana cosa de Android me vale saltar demasiado tiempo en agradable porque son bastante autoexplicativas. Se puede escuchar cuando el usuario desplaza hacia abajo una página para nuevos redimensionamientos se carga la página de la página, etcétera, etcétera. Muy, muy útil. Canta. Enfriar. Pero de todos modos, lo hemos hecho en cantidades increíbles. Hemos llegado un muy, muy lejos. Tan bien hecho. Serie D, creo que debes tomar todas estas cosas que has aprendido hasta ahora, tomar un respiro, hacer una pausa, tomar un café, y simplemente estar orgulloso de ti mismo. Los dientes de Sears entran a través de una caída que antes de pasar a la siguiente sección, solo quiero que probemos suerte ante unos retos. Estoy súper emocionado. Espero que tú también lo estés. Ya te veo. 30. Proyecto de clase: introducción: O extraño, esto va a ser un realmente, realmente divertido unas cuantas conferencias hablando muy brevemente de las formas y cómo funcionan. Entonces lo que quiero que construyamos juntos, por cierto, es exactamente lo que estás viendo en la pantalla frente a ti en este momento. Y voy a estar codificando el HTML y CSS desde cero en ¿qué quiero que hagas? Por supuesto, los usuarios deberían poder escribir el nombre. Se puede ver ahora cuando he hecho clic en ese cuadro de texto de entrada, el estilo de ese borde inferior acaba de cambiar. Y digamos que el usuario tipa, Bob, Luka, cool. Es decir, quiero que lo exhiban toma, por debajo, tomando ese valor de esa caja de entrada y mostrándolo abajo. Y se puede ver que esto sucede en tiempo real. Entonces va a ser muy interesante. Vamos a estar escuchando el evento de entrada. Por cierto, ¿qué pasa con el signo de nlm? Will, si el usuario hace clic en él, te fui a mostrar que se ha despedido un evento de envío. Y quiero que muestren la marca de tiempo. Y sólo dame un segundo. Permítanme refrescar rápidamente esta página. Déjame simplemente extrañar rápidamente con algún código. Dame dos segundos. De acuerdo, ya estoy de vuelta. Lo que quiero que hagas también es que empieces a jugar con ese evento de enfoque en las formas. Entonces lo que quiero decir con eso, bueno, si el usuario hace clic en este cuadro de texto de entrada, quiere cambiar su color de fondo y el texto por cierto, porque ahora cuando el usuario escribe Bob, esa entrada de Bob toma como no blanca más, es negro. Y podemos hacer una tonelada de otras cosas en las formas. Este no es un curso sobre formularios. Voy a ser relativamente rápido. Pero realmente no se puede hacer mucho. Por ejemplo, si copiamos a Bob, si resalto eso y arriba solo presiona el control C en mi teclado. Si bien mira eso, recibimos una alerta diciendo que has copiado gusto. Por lo que realmente son muchos eventos que podemos escuchar cuando se trata de formas de este hacer escenas. Entonces estaría divirtiéndome. Y te veré en las próximas conferencias. 31. Proyecto de clase: construye nuestro HTML: Bienvenidos a la conferencia de la Escuela. Está bien, genial. A la izquierda tenemos nuestro editor de Visual Studio Code. A la derecha tenemos nuestro navegador. Y en aras del tiempo, voy a ir súper rápido. Sí, sólo voy a cortar rápidamente el HTML. Voy a dividir los CSA en tiempo real con ustedes. Pero este no es un curso sobre CSS o HTML. Entonces voy a ir relativamente rápido. Si no quieres seguir adelante, está del todo bien. He proporcionado los archivos HTML y CSS a continuación en los recursos. Entonces sin más preámbulos, vamos a conseguir la codificación. Muy bien, Así que déjame empezar a codificar nuestro HTML. Vamos a configurar unas plantillas muy, muy simples. Todo lo que voy a hacer ahora es crear un elemento de cabecera. Y por supuesto tenemos que vincularnos a nuestro estilo, archivo style.css. Entonces lo que vamos a hacer todavía, y por cierto, se puede ver en la parte superior de mi editor, tengo tres archivos, mi índice, archivo HTML, styles.css, y un archivo app, y no es nada más en mi directorio que tenga todo lo que tengo muro creado. He creado este archivo de texto aquí sin motivo alguno. Entonces, permítanme borrar eso. Ahí vamos. Entonces puedes ver que sólo tengo tres archivos, sobre todo cuando tengo y todos están vacíos. Entonces ahí vamos. Hemos hecho nuestra sección de cabeza y ahora está pudre nuestro cuerpo. Y esto es con lo que quiero lidiar, ¿verdad? Queremos tratar con las formas. Y esto solo crea una cláusula aquí y llámalo una forma fresca. No necesitamos acción en esta instancia. No vamos a estar enviando solicitud GET y postulación a un servidor, por lo que puedes ignorar eso. Y ahí vamos. Ahí está nuestra forma. Podemos envolver todo por ahora. Y vamos a crear una etiqueta. Y este puede ser el nombre del usuario. Aquí vamos. Y con la India podemos tener tal vez una etiqueta span en tu nombre, las capitales estatales en tu nombre. Y entonces por supuesto, si guardamos eso y nos refrescamos, nuestro navegador sólo va a ser tomas extranjeras. Lo que necesitamos ahora es esa caja de entrada, no te preocupes. tipo de entrada es igual al texto está bien. Simplemente lento sake de integridad, pesar de que no vamos a usar un cheque. Esto acaba de decir que este es nombre, el nombre del usuario. Y si guardamos eso, estos son caja de entrada. Entonces ahí vamos. Tenemos el nombre del usuario. La única otra cosa que fui como botón de enviar. Vamos a crear otro elemento de etiqueta. Eliminemos esa etiqueta. Y dentro de aquí solo podemos tener una caja de entrada, pero de tipo enviar. Vamos tipos de MIT. El valor puede ser inscrito. Ahora, como ejemplo, Vamos a tener sólo una U mayúscula, guarde eso y arrodíllese como nuestro botón de inscripción ahora. Entonces ahí vamos. Eso es literalmente todo lo que quiero que hagamos. Aquí en la parte inferior, quiero incluir una etiqueta de script y hagamos referencia a nuestro archivo app.js. Por lo que ahí lo tienes. Una forma muy, muy sencilla que no necesita un año completo. Vamos a aprender algunas cosas muy interesantes. Y como desarrollador, estarás corriendo a través de formularios todo el tiempo. Entonces antes de continuar, acabo de terminar de peinar el CSS y vamos a tomar las simples y aburridas tomas viejas que ves en la pantalla ahora. Y podemos convertirlo en algo muy cool. Vayamos ahora a nuestro archivo styles.css. Y empieza a codificar nuestro CSS. Y de nuevo, voy a mantenerlo muy sencillo. Eso es acceder a nuestro formulario. Recuerda que lo envolvimos en una clase de forma fresca de obtenemos nuestro archivo de índice. Se puede ver que nuestro formulario está envuelto en una clase llamada cool para archivo CSS Skoda. En primer lugar, definamos su ancho como 70 por ciento, solo para que no se estire por toda la pantalla. Y vamos a darle a esto un fondo fresco. Antecedentes. Y el fondo puede ser RGB 6791117. Ese es solo el color que elegí. Ya sabes qué, si acabo de comentar este ancho, se puede ver por qué lo he hecho. Si no especifico un ancho, todo el bloque se extiende por toda la pantalla. No quiero eso. Por eso he restringido al 70%. Esperaba que haga santos y font-size. Realmente no necesitamos hacer esto. Supongo. Simplemente podemos definirlo como un objetivo que ya es. Entonces déjenme en realidad simplemente borrar esa pérdida de tiempo o en qué más podemos agregar aquí? Will relleno sería bonito efecto el acolchado superior, el relleno derecho e inferior puede ser diferente y entonces por supuesto el levantamiento pendiente puede ser de dos en ese sentido, realmente está empezando a verse mejor OT, vamos a añadir un borde alrededor de todo este asunto. Puede ser de cinco píxeles sólidos. Y ahora sólo elijamos una CALEA aleatoria, 5368 e ¿Cómo se ve eso? Esa es una frontera fresca. Ahora lo que quiero hacer es empujar esto al centro de la pantalla. Porque se ve empujado hacia la izquierda. Y hay una manera muy fácil de hacer eso. Y solo puedo afectar su margen y decir alterar simple basado en consulta. Ahora, quiero fingir el estilo de la caja de entrada real. Entonces todo lo que tenemos que hacer aquí es que quiero acceder a nuestro fresco formulario y quiero afectar la entrada. Ahora si tienes un montón de entradas, a veces quieres especificar con más detalle lo que queremos. Aquí sabemos que ese tipo es texto. Es lo único que queremos fingir. Y lo que queremos hacer es volver a acceder a forma de alquilo, y queremos encajar en la etiqueta. Quiero agradecer a ambos al mismo tiempo. En primer lugar, lo que quiero hacer es querer encontrar una familia de fuentes diferente. Ahora mismo es sólo un poco aburrido. Y digamos que es Colibri. En realidad es deshacerse de todo lo demás. ¿ Cómo se ve eso? ¿ En realidad? Piensa en este equilibrio tipo. Sí, eso es mejor. Y entonces sólo definamos un color, AAA. Si ellos, vamos empezando a mejorar. Ahora sólo vamos a desplazarnos un poco hacia abajo. Quiero que ahora finjamos la etiqueta. Y quiero que la propiedad display se establezca en bloque. Mucho mejor porque entonces al menos ahora podemos romper la carpeta de envío. Tiene sentido. Lo siguiente que quiero hacer ahora es que sólo quiero añadir algún margen al fondo. Sólo porque eso envía botones para cerrar esto, dices 10 píxeles. ¿ Cómo es eso? Sí, se pusieron mejor. Ahora quiero mostrarte otra técnica. No tenemos que hacerlo en esta instancia, pero solo te va a ayudar a aprender. Sé que no es un curso en CSS, pero que incluso puedes aprender algunas cosas de esto. Sí, solo digamos que queremos seleccionar todos los elementos span. Forma en que los elementos padre son un elemento de etiqueta. Acaba de comentarlo, conformarse. Pero eso es lo que quiero hacer todavía. Y si quieres hacer eso, correcto, si obtengo 0 archivo index, podemos ver que queremos obtener este elemento span y su padre es una etiqueta. Eso es lo que queremos hacer aquí. Todo lo que tendríamos que hacer para hacer eso es acceder a nuestra forma fresca. Queremos que la etiqueta sea el padre. Y queremos acceder al elemento span que tiene un padre de etiqueta, como la forma genial genial de hacer eso, quiero definir su ancho de malicioso, digamos un 150 píxeles. Y quiero flotar este lapso a la izquierda. Y va a hacer que se vea mucho mejor. Mira esto. ¿ Qué tan guay es eso? Ahora lo que quiero hacer es cuando el usuario escribe en este cuadro de entrada, este es solo el estilo predeterminado llano viejo y aburrido aplicado a un navegador. Y no me gusta al principio, se pueden ver las garrapatas tan anchas para que ni siquiera se pueda ver. Tiene esta fea caja de entrada gris, que no me gusta. Tiene fronteras que no me gustan. Solicitous pónganse creativo. O tenemos que hacer aquí es necesario acceder a nuestro formulario de COO. Recuerda, queremos acceder a nuestra etiqueta de entrada y si quieres ser más específico, puedes, especificando el tiempo de entrada, ¿podemos saber que su tipo de entrada es texto? En primer lugar, lo que quiero hacer es cambiar este fondo a transparente y realmente empezar a lucir mejor. También quiero quitar la frontera a la que dirá frontera ninguno. A ver qué tan buenos nos estamos poniendo. Es muy, muy cool. Yo sí quiero tener un borde fresco, funky en la parte inferior ahí. Simplemente lo acaba de terminar. Esto debería decir frontera discontinua. Podemos especificar su color es de 15 a 19 para 235. ¿ Cómo funciona eso? Creo que eso se ve bastante guay. Ahora una vez un esbozo de ninguno, bueno, en realidad antes sólo yo erótica, esbozo de ninguno, pero déjame comentarlo. ¿ A qué me refiero con este esquema? Donde se puede ver cuando el usuario hace clic en ese cuadro de texto de entrada, ese borde azul, que delinean esta toma. No quiero eso. Entonces si vamos a ninguno y el usuario hace clic en su cuadro de texto de entrada, no hay esquema. Entonces eso es todo lo que he hecho ahí. Ahora, quiero que ese borde inferior sea un poco más ancho. Sospechoso especifican un ancho de 300 píxeles. Entonces realmente se ve mejor. Y simplemente cambia el estilo de fuente a cursiva. Yo me pondré. Creo que es muy guay. Wow, eso es genial. Ahora lo que quiero hacer es cuando el usuario empiece a escribir en este cuadro de entrada, queremos mostrarle al usuario que está en el cuadro de texto actual. Especialmente si tuvieras más de un año, ya sabes, nombre, apellido, excéntrico, cetera. Por lo que queremos ahora acceder a la propiedad focus. Entonces todo lo que tenemos que hacer aquí otra vez, estas xs son geniales. Teléfono. Especificar la entrada. No tienes que especificar este top. Solo te estoy mostrando que esta es una forma en que puedes hacerlo. Y por supuesto, queremos aplicar todos los estilos cuando se active el foco en este cuadro de texto de entrada. Y todo lo que quiero cambiar aquí, podemos hacer un montón de cosas que todo lo que quiero cambiar como el estilo de fondo a un pixel discontinuo. Y cambiémoslo a RGB a 17, 255 y 169. ¿ Cómo se ve eso como un color amarillento? Entonces cuando el usuario se centra en este cuadro de texto, ese borde inferior cambia de color. Déjenme acercar. ¿ Lo puedes ver ahí? Quiénes somos casi, casi hecho. Lo último que quiero hacer es resolver actualización de estilo, inscribirme. Y ahora eso parece bastante aburrido. De nuevo, eso es exceso. Forma fresca. Entonces especifiquemos el elemento de entrada que queremos. Pero en este caso, el tipo no sabe es que el tipo es un botón Enviar. Aquí vamos. ¿Qué podemos hacer? En realidad podemos cambiar la familia de fuentes a Calibri. Familia de fuentes a Calibri. ¿ Cómo se ve eso? Ansioso? Creo que eso se ve genial. Aunque las fuentes se fueron un poco más pequeñas. Entonces quiero hacer font-size uno m, lo mismo que arriba. El establecer el margen a la parte superior. Idéntico off mover la oscuridad. Lo suficientemente tranquilo. Sí, eso es mejor. Cambiemos su color de fondo a 57686 en punto. Se está poniendo mejor. No quiero una frontera, así que quitemos eso. Tenía ahora fronteras ligeramente redondeadas. Entonces el borde radio, vamos a tener como cinco píxeles. Ahora, empezando a lucir mejor. Es relleno para el cabello. Ocho píxeles, dos píxeles, ocho píxeles, dos píxeles. ¿ Cómo se ve eso? Stein tomó masa empezando a parecer un botón real. Y por último, apenas se puede leer eso toma todo lo que quiero hacer ahora es cambiar su color. Simple. 202 y en adelante a 19. ¿ Cómo se ve eso a unos y todo el fin de semana RBG, voy GB. Aquí vamos. Mucho, mucho mejor equipo ahora, cuando el usuario se cierne sobre él, no hace nada y yo quería, así que de nuevo, accedemos a nuestro fresco formulario. Nosotros x es nuestra caja de entrada. Este que conocemos es un tipo Enviar de entrada. Y queremos afectar el estilo. Por supuesto, cuando el usuario pasa por encima de él. Y todo lo que quiero hacer aquí, porque sólo quiero cambiar el fondo a 39, 40, 60, un solo quiero hacer. Entonces, cuando el usuario pasa por encima de él, se puede ver que se oscurece. Entonces ahí vamos. Te dije que iba a ser una conferencia muy, muy sencilla aquí. Acabamos de hacer el HTML y el CSS. Y ahora quiero que empecemos a añadir JavaScript. Quiero que empecemos a trabajar con este formulario solo para que puedas sacar un poco de campo a cómo funcionan las formas. Este no es un curso sobre formularios que literalmente me tomaría horas pasar por todo para hacer formularios. Pero te voy a estar dando información muy valiosa en un espacio de tiempo muy corto. Entonces mantente motivado y nos vemos en la próxima conferencia. 32. Proyecto de clase: comportamiento y la marca de tiempo: ¿ Nos vamos? Estamos empezando exactamente donde lo dejamos en la conferencia anterior. Acabamos de empezar nuestro HTML y nuestro CSS. A la derecha, tenemos nuestra salida. Pero claro que nada pasa ahora mismo. ¿ Qué te quiero mostrar primero? Qué es sólo mirar nuestra forma. Entonces déjame expandir este navegador. Permítanme alejar a un 100 por ciento. Bueno, en realidad las formas pero largo no es así? Entonces tiene galleta de opcode. Vamos a desplazarnos hacia arriba. Sí, creo que sunni por ciento es demasiado delicioso platillo sería del 50%. Y se ve mucho mejor. No quiero meterme más con ello. Está bien. Primer día quiero mostrarles que podemos acceder a nuestros formularios directamente desde la consola muy, muy fácilmente, muy fácilmente de hecho. Y una de las formas en que podemos acceder a todos los formularios en toda nuestra página, esto para acceder al objeto del documento. En ese objeto de documento, hay una propiedad llamada formularios. Está literalmente muerto fácil y lo que nos ha devuelto es una HtmlCollection. Ya sabemos de colisiones HTML en la serie uno de esta serie de dos partes. Que básicamente nos va a devolver una HtmlCollection con todas nuestras formas, en este caso la longitud cachorros uno porque sólo tenemos una forma. Y por supuesto estos se forman con clase de forma fresca. Entonces así podemos acceder a los formularios dentro de nuestro documento. Eso es lo primero que quería mostrarte. El segundo que quiero hacer es por qué no tenemos al usuario escriba el nombre en una deuda para que se muestre. A continuación se muestra una especie de hacer escenas. ¿ Cómo haríamos eso? Bueno, en primer lugar, quiero que creemos un elemento de párrafo. Y luego con JavaScript, quiero que agreguemos dinámicamente lo que sea que el usuario escrito en ese cuadro de entrada a su elemento de párrafo. Déjame mostrarte a lo que me refiero. Entonces vamos a nuestro archivo de índice y quiero editar con ahora lleno. Entonces aquí sólo podemos tener un elemento de párrafo y vamos a darle un ID de salida. Por supuesto que sólo está vacío en este momento. Y luego en nuestros estilos, podemos empezar a peinarlo. Y voy a aplicarle solo un estilo muy, muy sencillo porque no quiero arpar sobre esto. Y sólo le daré relleno a la parte superior de un nombre. Tablero en la parte superior. Le daré un tope de borde masivo de un píxel, RGBA sólido del AD1, 174 a 28, y punto cero durante 45 años para reducir esta transparencia. Y con eso, quería estresar a través de toda la caja. Tamaño de fuente. Podemos tener un solo puntería y el color solo puede ser de triple hoja. De acuerdo, ahí vamos. Por lo que hemos definido cómo debe ser nuestra salida. Le hemos dado un top fronterizo, razón por la que lo vemos, pero aún no se muestra nada. Como mencioné, cuando el usuario toca su nombre, Bob, quería que se mostrara a continuación. ¿ Cómo haríamos eso? Bueno, es muy sencillo. Un chico, muy, muy sencillo. Todo lo que tenemos que hacer es empezar a codificar JavaScript para acceder al DOM y sabemos cómo hacerlo. Ya hemos hecho muchos ejemplos antes. En primer lugar, acceda a nuestro objeto de documento en el cuello. Podemos acceder a un selector de consultas y nosotros los estamos llenos. Y en este formulario queremos agregar un oyente de eventos. Y el oyente de eventos que queremos escuchar es lo que va esto es muy interesante con formas. Este es uno de los puntos que quiero hacer que es cada vez que se hace clic en un botón en un formulario, se dispara un evento de envío en el propio formulario, no en el botón en el propio formulario. Esa es una de las cosas que realmente debes envolver la cabeza porque va a ser muy importante para ti como desarrollador. ¿ Lo tienes? Genial. Entonces eso es todo. Probablemente ya sepa que vamos a estar escuchando un evento de presentación en ese formulario. Entonces por supuesto podemos definir nuestra mano y solo lo voy a hacer directamente dentro de este código aquí mismo. ¿ Qué vamos a hacer? Yo quiero agarrar nuestra salida. Cuando el usuario escribe Bob, fuimos a agarrar ese texto y queremos mostrarlo en ese párrafo con ID de salida. Entonces en la parte superior de nuestro archivo él, ¿por qué no agarramos nuestro elemento de párrafo de salida. No estoy escribiendo muy bien hoy. Y es sólo decir que definimos eso como una variable llamada salida, que ella va a ser documento get element by ID. Y el ID que le dimos fue de salida. Ellos vamos, así que tenemos nuestra salida. Todo lo que queremos hacer ahora es querer agarrar nuestra salida en nuestras salidas, ese párrafo, queremos afectar su propiedad de contenido de texto. Y sí, voy a estar usando plantillas, literales. Si no sabes lo que parecía cerrarse, por favor echa un vistazo a mi curso completo de gran maestro JavaScript. A muy, muy cool. Pero sólo quiero decir aquí que se ha disparado un evento de presentación. Y se utiliza el signo de dólar corchetes rizados para simplemente mostrar nuestra marca de tiempo. Para poder mostrar la marca de tiempo, necesitamos acceder a nuestro evento en sí. Y para eso, tenemos que dar esta función de devolución de llamada, una variable en la que la ponemos. Y como ya he mencionado antes, lo ponemos en una variable llamada e. Así que ahí vamos. Tenemos una variable llamada e, y sobre eso tenemos una marca de tiempo. Entonces ahí vamos. Eso es todo lo que quiero hacer es expandir el código aquí. Entonces volvamos a nuestro navegador y empecemos a escribir la palabra baba. Entonces tenemos a Bob y cuando hago click en Regístrate, Ahora, ¿qué acaba de pasar ahí? Lo que acaba de pasar pero se exhibe brevemente y luego desapareció. Déjame mostrarte otra vez. Vamos a hablar fuera. Demos click en la inscripción ahora. Se exhibe y luego desaparece. ¿ Qué está pasando? Está bien. Déjame dar un paso atrás. Recuerda lo primero que quería que entendieras los formularios es que se dispara un evento de envío cada vez que se hace clic en un botón dentro de un formulario. Recuerda que me permitirá ampliar en eso. En realidad no es sólo un botón porque como ya sabéis, el Suscripción ahora no era un elemento de botón. Lo envolvimos en un elemento de entrada con el tipo de envío. Entonces permítanme corregir mi declaración acaba de decir anteriormente, se dispara un evento de envío en un formulario cuando se hace clic en Eva at button o un elemento de entrada que tiene tipo submit, Zack Hanna, que tiene sentido. Entonces eso es lo primero que quería atravesar. Lo segundo cuando se trata de formas es que un defecto? Escenas la forma hija a tu propia URL sitio web de orina. Y cuando hace eso, provoca una actualización de página. Ese es el comportamiento por defecto. Entonces déjame ni siquiera escribir nada en el cuadro de entrada y haga clic en Registrarse. Ahora, mira en la esquina superior izquierda estaba pasando. Vamos a levantarnos. Está causando un refresco. Pero no te preocupes, hemos emitido llamadas prevenir default. Voy a meterme en esto en el proyecto final de este curso. Entonces no te preocupes demasiado ahora, voy a hablar de ello más tarde. Por ahora, sólo entiende que podemos detener este comportamiento por defecto. Entonces ahí vamos, Hope está haciendo escenas, pero volvamos a saltar de nuevo a nuestro código. Entonces con el fin de prevenir el comportamiento, y de nuevo, voy a entrar en más detalle más adelante en el curso sobre nosotros Sedona, giro a longhand o baja ANA hacer ahora es quiero acceder a nuestro objeto de evento que ponemos en una variable llamada e. Y en ese objeto tenemos un método llamado prevenir default. Si guardamos esto ahora y volvemos a nuestro sitio, el usuario escribe Bob y hace clic en Registrarse. Ahora, ahí vamos. Sí, hemos impedido que la página se refresque. Y ahora por supuesto, nuestro elemento de párrafo con ID de salida obtiene este texto, visualizarlo. ¿Qué tan guay es esto? Y sabemos cuando se hace clic en esa entrada, se despide un evento de envío. ¿ Quién? De acuerdo, entonces eso es un poco de trabajar con formas, hábitos, hacer un poco de escenas, pero no quiero parar. Sí, quiero jugar con unos cuantos eventos más. Por lo que en la próxima conferencia, quiero empezar a mirar cosas como, ya sabes, un evento de entrada y el evento de enfoque. Yo quiero empezar a mirar cómo podemos usar esos. Vi esperanza que estés como diseño de amplificador. Te veré en la próxima conferencia. 33. Proyecto de clase: usando el evento de entrada, el evento de enfoque y el evento de la copia: Como mencioné, quiero jugar con unos cuantos tipos más parejos. A, porque es divertido y B, porque es muy, muy valioso para ti. Vas a estar usando estos todo el tiempo en tu carrera de codificación. Entonces vamos a agrietarse. Yo quiero agarrar nuestra entrada, agarrar nuestro cuadro de texto de entrada. Porque vamos a estar usando esto bastante. Y con el fin de hacer eso, Vamos a definir una variable JavaScript llamada texto de nombre. Y vamos a agarrarlo accediendo al selector de consultas en nuestro documento. Y qué queremos buscar todo lo que queremos obtener nuestra caja de entrada, pero no la de enviar. Por lo que podemos ser más específicos. Sí. Podemos decir que tiene que ser de tipo texto. ¿ Eso tiene sentido? Y ahí vamos. Literalmente tenemos cómo se llama toma caja. De acuerdo, lo siguiente que quiero hacer es que quiero escuchar un evento de entrada. Y el evento se disparará cada vez que cambie el valor de la entrada en ese cuadro de texto. ¿ Cómo escuchamos ese evento? En primer lugar, quiero hacer un comentario sólo diciendo, juguemos con diferentes tipos. Desplazémonos hacia abajo. Es codificación pensada. Lo primero que quiero hacer es que quiero agarrar, voy a nombrar toma variable con apenas definir resto, ese es ese cuadro de entrada. Quiero entonces agregar un oyente de eventos llamado input. Y luego quiero ejecutar nuestra función de manejador justo dentro de aquí. Todo lo que quiero hacer es que quiero acceder a nuestra variable de salida. Recuerda, scroll app, ese es nuestro elemento de párrafo. Y todo lo que quiero hacer es que me pregunto encajar la propiedad de contenido de texto. Y de nuevo, voy a estar usando literales de plantilla. El valor ingresado es. Y lo que es muy guay aquí es que cada elemento de entrada dentro de tu página, la API DOM nos da acceso a una tonelada de propiedades en esa caja de entrada. Y uno de ellos se llama como propiedad de valor. Y nos da sorpresa, sorpresa. El valor que se ha escrito en esa caja de entrada. Entonces todo lo que tenemos que hacer es agarrar el cuadro de entrada, que hemos definido en una variable llamada texto de nombre y acceder a su propiedad de valor. Realmente es lo simple. Y si vamos a nuestra página ahora y escribimos Bob B, B, se puede ver que está actualizando el texto a continuación en tiempo real. Conoce también baba, baba, baba, baba, baba. Entonces ahí vamos. Se puede ver lo fácil que es trabajar con formularios. Y si volvemos a nuestro código, sí, podrías estar pensando en Clyde, ese evento de entrada, no formado específico y serías un 100 por ciento correcto. No sólo está relacionado con las formas que solo te estoy mostrando diferentes formas en las que podemos escuchar eventos con forma interna. Y mencionó en la conferencia anterior que tenemos el evento de foco. Entonces, ¿por qué no jugamos con eso? Y aunque podría no verse bonito si el usuario tipea o se enfoca en este cuadro de entrada. ¿ Por qué no simplemente cambiamos este color de fondo? Entonces solo te mostraré cómo funciona eso. Entonces para hacer eso, de nuevo, Vamos a acceder a nuestro elemento de entrada, que ponemos en una variable llamada nombre texto. Quiero agregar un oyente de eventos. Y esta vez escuchemos un evento de enfoque. Y ahora quiero agarrar nuestro evento en sí y ponerlo en una variable llamada e. y vamos a estar entrando en esto más adelante en el curso. Entonces no te preocupes si no eres del todo comprensivo ahora. Pero todo lo que quiero hacer aquí es que quiero agarrar nuestro evento en sí. Yo quiero conseguir este objetivo, aka va a ser ese insumo en sí el que lucha contra el evento. Queremos afectarme esa propiedad de estilo. Queremos cambiar el fondo y podemos cambiar el fondo a azul claro. Entonces volvamos aquí. Ahora vamos a hacer clic y ese cuadro de entrada. Y ahí vamos. El es el fondo azul claro. Y por supuesto que y toma esto horrible. Por lo que también puedes entrar aquí. Nos fue bien y cambiamos tus conocimientos de fondo. ¿ Queremos cambiar el color y el color sólo podemos cambiar a negro. Solo te estoy mostrando lo que puedes hacer. Obviamente. Mi opinión, no se ve tan bonito como antes. Ese es sólo un ejemplo de nosotros usando esa entrada. O de inadvertidamente había tick el apunte. Ahora, ahí vamos. Permítanme refrescar la página. Volvamos a nuestro código y así es como podemos usar el evento de enfoque ya que tengo un poco de sentido. Eso espero y sí, solo estoy tratando de darte un sabor en cuanto a lo que puedes hacer con algunas de estas cosas. También tenemos una copia de venas, pegar eventos cuando el usuario copia y pega cosas, un café granos, cortes, toma, y sombra para mostrarte un limitador, mostrarte. Por lo que las listas, xs se nombra texto. De nuevo, simplemente desplázate hacia abajo. Sí, en realidad no iba a meterme en esto, pero ahora que lo mencioné, déjame mostrarte rápidamente. Añadamos un oyente de eventos llamado copia. Y de nuevo, eso es sólo ejecutar nuestro manejador justo dentro de esta función aquí. Y esto sólo alertan algo a la pantalla. Tienes, has copiado texto. Es decir, puedes ponerte realmente creativo con todas estas cosas. Ah, ahí vamos. Volvamos a nuestro navegador. Escribamos Bob y Bob, y déjame resaltarlo e ir Control C en mi teclado. Copia. Y ahí vamos, obtenemos una alerta diciendo que has copiado texto. Se aplicaría lo mismo. Por supuesto, si ponemos pasta por aquí, vuelve a nuestro navegador. No has copiado, has pegado texto. Si volvemos a nuestro navegador, hablamos de copiamos, lo siento, Bob, lo copiamos. Suficientemente borramos todo. Yo pego. Podemos alertarle pega el texto. Supongo que estás empezando a conseguir algunas formas moleculares. Ahora se empieza a ver lo fácil que es trabajar con las venas dentro de las formas y no dar por sentado todo este conocimiento. De verdad has aprendido mucho en un espacio de tiempo muy corto. Usted sabe que un formulario envía un evento de envío cada vez que se hace clic en un botón de envío. O si se hace clic en un elemento de entrada que tiene tipo de envío. Y sabes que un formulario actualizó la página de forma predeterminada, que lo evitamos por cierto, y sabes cómo trabajar con eventos ahora si en un formulario. Entonces sé que son ejemplos muy básicos, pero en serio, te va a ayudar mucho en el futuro. Por lo que apenas estamos empezando en este curso. Entonces no nos detengamos aquí. Sigamos viendo ahora. 34. Outro de clase: Ah bueno, y muros imperdonables hasta aquí en todo el curso. Y por completar esta clase, realmente eres Scholar Walden. Me he divirtido mucho. Y en esta clase, ahora sabes de VTS. Ya conoces los diferentes tipos de oyentes de eventos que podemos adjuntar a la página. Ya sabes lo que es un oyente de eventos, qué es un manejador de eventos. Eso en la próxima pérdida, Siempre hay un hombre mayordomo. Pero en la siguiente clase vamos a estar discutiendo un concepto muy avanzado cuando se trata de las cosas. Y es decir, vamos a mirar la jerarquía de nodos y luego vamos a estar discutiendo como INK, público y evento, captando, dos conceptos muy importantes a la hora de trabajar con el DOM. Entonces realmente no puedo esperar. Por lo que aún no terminamos bastante con los medios HOT, solo una o dos clases más tarde. Espero que te estés divirtiendo tanto como yo, pero verás a algunos de vuelta tomando un respiro. Disfrutar de la vista es hermosa y te veré medea estudiante en la muy, muy próxima pérdida. Gracias.