Introducción a JQuery: aprender sobre JQuery (con Javascript) desde cero

1. Introducción al curso: Bienvenido a jQuery 101, jQuery para principiantes. Empecemos con la gran pregunta. ¿ Todavía se usa jQuery? Y la respuesta es absolutamente sí. Jquery es responsable del JavaScript en cientos de millones de sitios web. voy a repetir. Jquery es responsable del JavaScript en cientos de millones de sitios web. Jquery fue creado originalmente para cerrar una brecha entre los navegadores antes de que JavaScript comenzara a estandarizarse más, Internet Explorer y Firefox usan JavaScript de manera diferente. Chrome y Safari implementaron JavaScript de manera diferente. Y jQuery era cómo se podía calificar un idioma que acababa de funcionar. Mira, sé que mucha gente dice que debes saltarte el aprendizaje de jQuery por completo, pero considera esto si es utilizado por más 100 millones de sitios web y sigue siendo favorecido por organizaciones como Django y el marco jangle, entonces claramente existe una demanda del mercado por esta habilidad. Si estás entrando en JavaScript recientemente, este curso es para ti. Si eres un desarrollador back-end y quieres escribir bonito JavaScript sin necesidad de aprender todo un framework como reaccionar, este curso es para ti. Para sacar el máximo provecho de este curso. Necesitarás conocer un poco de HTML. Y si conoces un poco de CSS, eso va a ser útil, pero no es necesario. Y para sacar el máximo provecho de jQuery, debes conocer algún simple JavaScript viejo solo vainilla. Hola, soy Caleb, dímelo y llevo usando jQuery desde que se inventó en 2006. He impartido clases a más de 300 mil estudiantes y he trabajado con clientes como la nasa, Mozilla, la Arctic Research Foundation, Samaritans, y el Servicio Nacional de Salud en el Reino Unido. Y esta es mi clase jQuery 101. Gracias por ver este video de introducción, y te veré adentro. 2. ¿Qué es jQuery y por qué aprenderlo?: Jquery es como escribimos una forma de JavaScript y la hacemos ejecutar perfectamente en todos los navegadores. Esto es útil porque los navegadores no implementan JavaScript de la misma manera. Algunos tienen reglas diferentes. Algunos no confían en ciertas características que haces y, y te hacen escribir código diferente para diferentes navegadores. Jquery puentes esa brecha, lo que significa que puedes escribir JavaScript para todos los navegadores y siempre solo funcionará. No tienes que lidiar con diferente soporte de navegador en absoluto. Jquery también se considera una biblioteca. No es un marco, lo que significa que se te permite mezclar tu JavaScript normal con él y no podría pasar nada malo. Y no hay formas estrictas de escribir tu JavaScript con jQuery. Mientras que con un marco como view WAS O reaccionar dot js, hay ciertas reglas que quieres seguir y hay mucha magia detrás de bambalinas que no ves. Lo que hace que aprender otros marcos como reaccionar un poco más difícil. A partir de aproximadamente 2019, reaccionó JS y vis.js se hizo muy popular. Y la gente ahora dice cosas como, Oh, no te molestes en aprender jQuery, pero literalmente se usa en millones y millones y millones de sitios web. Entonces, ¿por qué no aprenderías una habilidad tan claramente demandada? Y lo bueno es que puedes aprender jQuery en un solo día aprendiendo reaccionar dot js o view dot js va a tardar mucho tiempo porque hay marcos tan grandes, también son poderosos. Pero si solo necesitas un poco de ayuda con tu JavaScript o simplemente quieres escribir menos código que jQuery es 100% para ti. Y la verdad realmente desde una perspectiva de desarrolladores senior, no necesitas aprender jQuery ni reaccionar o ver. Puedes hacerlo todo con JavaScript vainilla o simple, pero estas herramientas nos ayudan a hacer más con menos código. Además, y de nuevo, esta es una bomba de verdad usando react dot js o view dot js en alrededor del 95% de todos los sitios web completa el exceso. Terminarás pasando demasiado tiempo escribiendo reaccionar para una pequeña característica que se puede escribir con jQuery en cuestión de minutos, a veces cuestión de segundos. Por eso elijo escribir JavaScript vainilla o jQuery en la mayoría de mis sitios web. A menos que haya una necesidad real de algo grande y complejo, entonces tiendo a elegir, reaccionar o ver. Entonces la razón por la que deberías estar aprendiendo jQuery es porque simplemente la demanda del mercado, cientos de millones de sitios web la están usando. También podría aprender lo que está en demanda. 3. Instalación de jQuery en tu sitio web: Hola y bienvenidos a nuestra primera lección sobre jQuery. En esta lección, vamos a estar instalando jQuery en nuestro sitio web. Entonces lo primero es lo primero, necesitamos abrir un navegador e ir a JQuery.com. Ahora hay dos formas en que podemos instalar jQuery. Podemos descargar esto y usarlo localmente en nuestro equipo. Por lo que podemos usar un archivo real en nuestro equipo, o podemos usar esta cosa llamada red de entrega de contenido. Por lo que hago clic en el botón de descarga ahí y podemos descargar, descargar, descargar. Hay otra forma de usar hilados y PM Bauer, todas estas otras cosas. O podemos tomar el mejor camino y donde diga otros CDN, podemos usar Google CDN, Microsoft CDN JS o entregar o jazz entregar. Y solo voy a usar JS entregado solo por ninguna razón en particular. Y en este curso vamos a estar usando jQuery 3.5.1. Y entonces lo que quiero hacer aquí es conseguir la versión minificada porque no necesitamos todo el código fuente extra. No necesitamos todos los espaciados extra o comentarios de código. Simplemente necesitamos el JavaScript real y realmente no nos importa cómo se vea porque estamos usando jQuery como biblioteca. Entonces vamos a copiar el HTML y vamos a abrir el código de Visual Studio o cualquier editor de texto que desee utilizar. Vamos a crear un nuevo archivo aquí. Hagamos HTML cinco. Eso no va a funcionar. Vamos a tener que salvar esto primero. Entonces voy a guardar esto como index.html. Y luego puedo hacer HTML colon cinco, hit tab y auto llena un montón de cosas cool para nosotros. Y podemos hacer jQuery uno a uno como el título. Ahora, cuando estamos usando JavaScript, normalmente queremos poner JavaScript en la parte inferior de nuestro cuerpo, no fuera del cuerpo, sino justo en la parte inferior, justo antes de la etiqueta de cuerpo de cierre. Y ese código que copié ahí, voy a pegar eso aquí. Y vamos a ver que esto viene de CDN ab.js deliver.net slash npm yada, yada, yada. Y entonces lo que es una red de entrega de contenidos, es básicamente una serie de servidores en todo el mundo. Y cuando intentes descargar este archivo en particular, va a ir al más cercano, al servidor más cercano a ti. Por lo que va a ser descarga más rápida. Lo bonito de esto es que también pueden proporcionar una capa de almacenamiento en caché. Y cuando hay almacenamiento en caché, eso significa que si alguien ya ha descargado esto de un sitio web en particular en algún otro lugar de internet, y ahora estás accediendo al mismo archivo ya se ha descargado en tu computadora. Y para que no tengas que volver a descargarlo, cual es realmente, realmente bonito. Y esa es en realidad la razón por la que estamos usando una Red de Entrega de Contenido o CDN, es porque queremos esa capa extra de almacenamiento en caché solo para que nuestros sitios web sean súper rápidos. También significa que no tenemos que mantener un archivo extra. Ahora cuando estamos escribiendo esto, necesitamos tener una etiqueta de script y una etiqueta de script de cierre. Y dentro de aquí, vamos a estar esperando que jQuery se cargue correctamente. Entonces, a pesar de que este archivo técnicamente podría ser descargado en tu computadora, es posible que tu navegador no haya reconocido completamente que todo el archivo está ahí un final evaluado o ejecutado el código aún, por lo que podría no saberlo del todo. Y así hacemos esto donde esperamos a que se cargue y lo hacemos con esta sintaxis rara y hablaremos de sintaxis en su propia lección. Pero por ahora solo necesitamos poner esto en marcha para poder hacer document.ready. Función, Console.log. Jquery está cargado. Y entonces lo que estamos haciendo aquí es que somos un, nuevo, hablaremos de sintaxis y un poco. Pero estamos usando esto como selector. Estamos seleccionando todo el documento, toda la página, y cuando esté listo, cuando se cargue el Document Object Model, cuando nuestro JavaScript esté terminado, cargando cuando nuestro JavaScript esté terminado, ejecutar esta función y eso se llama función de devolución de llamada se hablar de esos también. Y luego una vez que eso esté todo hecho, solo se carga el registro de consola jQuery. Y así si vamos a nuestro navegador, abrimos una nueva pestaña y en la parte superior de eso se va a archivar, eso está justo fuera de mi área de grabación, pero solo quiero archivar y luego podemos ir a abrir archivo, seleccionar nuestro archivo index.html. Y vamos a ver que no pasa absolutamente nada. Pero si hacemos clic con el botón derecho y vamos a Inspeccionar y vamos a consola, y no conservemos el registro ahí. Es sólo un escenario de un proyecto en el que estaba trabajando. Hagamos esto más grande. Dice que jQuery está cargado. Entonces cada vez que refresco dice que jQuery está cargado y debería ser casi instantáneo. Por lo que en realidad no te darías cuenta de que lo es o no lo es. Evaluando tu JavaScript, tu biblioteca jQuery. Se supone que es súper rápido, pero este es un buen método poco solo para asegurarnos que podamos seguir usando jQuery en nuestro código. Entonces antes de nada, lo que me gustaría que hicieras es asegurarte de ir y obtener jQuery de una red de entrega de contenido, crear un archivo de índice completamente nuevo como este, y luego simplemente escribir este pequeño y raro guión aquí. Y otra vez, vamos a diseccionar esto una y otra vez. Entonces estarás súper familiarizado con lo que realmente es esto, pero solo necesitas escribir esto para empezar. Y luego pasaremos a la siguiente lección. Entonces, una vez que hayas hecho eso y estés listo, pasemos a la siguiente lección donde hablemos correctamente de la sintaxis de jQuery. 4. syntax de jQuery: De acuerdo, cuando estamos hablando de la sintaxis de jQuery, se parece mucho a la sintaxis de JavaScript. En realidad es, solo que todo está escrito en JavaScript es solo una cierta manera de escribir nuestro JavaScript. Y así en nuestra última lección, escribimos este extraño document.ready funciones cosas. Entonces, vamos a descomponer un poco esto. Entonces ahí es donde vamos a estar poniendo todo nuestro código en cada lección avanzando cuando estamos hablando de jQuery. Pero la sintaxis aquí, el estilo en el que está escrito, se parece mucho a esto. Entonces tenemos un signo de dólar con paréntesis, y este es nuestro selector. Y así si vienes de JavaScript, esto se parece mucho al método selector de consultas de puntos de documento. La única diferencia es que ya no tenemos que escribir esto. Simplemente podemos escribir un punto div aquí y eso lo va a seleccionar para nosotros. Y así es un bonito atajo. Entonces aquí tenemos un selector, un selector. Entonces tenemos algún tipo de función o evento o método o, o algo sucede con este selector. Y así vemos aquí arriba, vemos listos. Entonces hemos seleccionado documento y vamos a decir cuando esté listo o cuando tengamos un botón, podemos decir onclick o podemos hacer algo. Entonces hay algún tipo de evento que sucede aquí. Y esto por sí mismo es sólo un método o una función. Y luego se necesita esta cosa llamada función de devolución de llamada. Y la mayoría de las cosas en jQuery toman una función de devolución de llamada. Entonces va a hacer una cosa. Por lo que va a seleccionar algo en tu página. Se va a ejecutar o, o registrar algún tipo de evento. Y entonces cuando es ahí cuando está ocurriendo ese evento, ¿qué hacemos? Y aquí es donde lo envolvemos en una función. Entonces esta es solo una función anónima y esto solo se asegura de que todo se quede con alcance aquí. Por lo que es una buena manera de asegurarse de que sus variables no se filtren fuera de esta área en particular. Ahora, en nuestro cuerpo aquí arriba, digamos que tenemos un nombre de clase personalizado de punto con un ID de ID personalizado. Y así en realidad se puede ver cómo escribí eso. Si solo deshago eso, puedes ver que escribí un punto ID de nombre de clase personalizada, ID de cliente. Y esto es exactamente como escribir CSS. Entonces si ya conoces CSS, esto va a ser increíblemente fácil para ti. Este es CSS regular y simplemente sucede que VS Code tiene esta cosa llamada abreviaturas de Emmett. Para que puedas escribir tu CSS y simplemente pulsa pestaña y creará tu elemento para ti. Entonces podemos decir aquí, Hola mundo. Y ahora con nuestro selector, y vamos a seguir adelante y crear un nuevo ejemplo aquí. En la última lección, hicimos la función document.ready, yada, yada. Podemos usar puntos y comas. No tenemos que usar puntos y comas, su JavaScript regular. Por lo que las reglas regulares de JavaScript siguen aplicándose. Y podemos usar un selector aquí, para que podamos seleccionar éste así. Y podemos hacer algo aquí. Y eso va a seleccionar este. También podemos decir nombre de clase personalizado, y eso va a seleccionar este AS este H1 junto con cualquier otro elemento que tenga este nombre de clase. O si quisiéramos conseguir algo completamente único, podríamos hacer ID, ID personalizado. Y de nuevo, esto es simplemente CSS regular. Y así cuando estamos escribiendo CSS, CSS, así es exactamente como lo escribimos de todos modos. Es así como creamos una declaración personalizada usando un selector CSS. Y así en jQuery, hacemos exactamente lo mismo, y en JavaScript moderno hacemos exactamente lo mismo. Por lo que tenemos varias maneras diferentes. Podríamos incluso ponernos realmente específicos y decir agarrar todos los H 1s con un nombre de clase personalizado. Y digamos que el texto me va a cambiar y estamos saltando un poco el arma aquí. Y vamos a aprender sobre el texto por el camino. Pero quería mostrarles que esto es un ejemplo. Entonces lo que esto va a hacer es seleccionar este elemento aquí arriba. Y luego va a tomar ese impuesto y cambiarlo de helloworld, que sabemos lo que va a hacer hola mundo en letras grandes. Y va a decir que me cambió o vamos a cambiarlo a Esto se cambió vía jQuery. Guardemos eso. Refresca nuestra página. Y dice que esto fue cambiado vía jQuery es. Pero si me refresco lo suficientemente rápido, se puede ver que parpadea. Y así si hago clic derecho y veo mi fuente, hagámoslo solo un poquito. Podemos ver que en realidad dice hola mundo. Entonces cuando la página lo rinde diciendo hola mundo aquí. Pero una vez que jQuery se carga, lo cambia a. Esto se cambió vía jQuery. Ahora esa es casi toda la sintaxis que necesitamos saber ahora mismo hay un poco más cuando se trata de oyentes de eventos, pero vamos a abordar eso cuando lleguemos a los oyentes de eventos para que no te abrume con mucho de información en este momento. Pero lo que debes saber ahora mismo es esto y aquello. Ahora lo que me gustaría que hicieran es este ejemplo exacto. Adelante y crea un H1, selecciona ese de alguna manera usando ya sea ID de clase o un selector de elementos. Y luego cambia el texto con texto de punto y pon algún tipo de texto nuevo en su visto en tu página si cambia correctamente. Si bien yo, ahora has escrito algunos jQuery, es tan fácil como eso. Cuando termines, pasemos a la siguiente lección. Hablaremos un poco más de selectores, específicamente. 5. Selectores de jQuery: De acuerdo, bienvenido de nuevo. Hablemos de selectores. Entonces un selector es en gran medida en lo que se construye jQuery. Y la razón de eso es porque cuando estás trabajando con JavaScript, normalmente estás trabajando con tu modelo de objetos de documento, que es todo tu HTML aquí. Y la forma en que está estructurado, ese es tu modelo de objeto de documento en pocas palabras. Y así podemos tener un H1 aquí, y este podría ser nuestro título personalizado. Y vamos a poner un ejemplo aquí. Podemos tener un botón aquí, y esto es, este es un botón personalizado. Vamos a seguir adelante y seleccionar Párrafo. Y sigamos adelante y pongamos algo de lorem ahí dentro. Cambiemos de una plantilla Django a una plantilla HTML estándar. Entonces si escribo Lorem, hit tab, obtengo lorem ipsum p. hit tab, obtengo un párrafo, Lorem hit tab obtengo otro párrafo lorem ipsum. Y solo agreguemos algunas cosas únicas aquí. Entonces tenemos un párrafo y sigamos adelante y asegurémonos de que el párrafo y el botón y todo lo que hice ahí fue seleccionar un área y luego en un Mac, presioné Command click. En Windows, es probable que se altere o control-click. Por lo que puedo escribir en dos lugares a la vez. Clase, personalizada, clase. Y así vamos a seguir adelante y trabajar con algunos de estos selectores ahora. Y sólo haré que ese toque sea más pequeño aquí para que podamos verlo todo en una sola pantalla. Entonces sigamos adelante y seleccionemos R uno y cambiemos esto. Y en realidad de hecho, antes de que hagamos eso, así es como se ve nuestra página. Tenemos dos párrafos y voy a hacer esto un poco más pequeño ahí. Tenemos un título, Hemos tenido un botón que no hace absolutamente nada, y tenemos dos párrafos. Este párrafo de este botón comparten un nombre de clase y el H1 y el párrafo son por sí mismos. De hecho, hagamos uno extra. Yo sólo voy a tirar esto aquí. Esto no estaba planeado, pero vamos a tirarlo aquí de todos modos, agreguemos una identificación a este párrafo. Se llama Customer ID. Y seleccionar, vamos a seleccionar cada uno de estos. Seleccionemos nuestro H1. Por lo que podríamos decir selector. Y tal vez voy a hacer ese selector más grande. Texto de un punto cambiado vía jQuery. Ahora eso sólo va a seleccionar este H1, pero si hay múltiplo, de cada uno los va a cambiar a ambos. Entonces hagámoslo. Nuestro título personalizado uno, nuestro título personalizado a. Adelante y refresquemos nuestra página. Y dice, en realidad se puede ver que parpadea allí cuando me refresco una y otra vez. Y cuando veo el código fuente aquí, vemos nuestro título personalizado uno, nuestro título personalizado también. Y los cambiamos ambos para cambiar vía jQuery con una sola línea de código. ¿ Qué bonito es eso? Por lo que seleccionamos todos los H 1s en la página y lo cambiamos para cambiar vía jQuery. Ahora en JavaScript regular y JavaScript vainilla, tenemos que recorrer todos esos y cambiarlos uno por uno. Jquery hace eso automáticamente por nosotros. Y sigamos adelante y seleccionemos todo nuestro párrafo para que podamos hacer signo de dólar, paréntesis, párrafo, punto Html en lugar de texto. Y hagamos una etiqueta audaz aquí. Esto se pone en negrita y se reemplaza. Y así sabemos qué va a hacer esto. Acabamos de ver este ejemplo es un H1 va a seleccionar este párrafo y este párrafo, no le importa el nombre de la clase ni la idea en este momento, no estamos seleccionando esos. Simplemente vamos a seleccionar ambos párrafos. Y sigamos adelante. Y cuando actualizamos nuestra página, se puede ver que parpadea de nuevo rápidamente. Si me refresco lo suficientemente rápido y una y otra vez. Y dice, esto está en negrita y reemplazarlo seleccionó a ambos. Ahora lo que es bonito es que puedes seleccionar múltiples cosas. Entonces digamos que no queríamos hacer eso. Queríamos seleccionar todos los H 1s y todos los párrafos, pero no queríamos seleccionar nuestro botón. Y queríamos cambiar los textos internos que cambiaste vía jQuery. Adelante y ejecutemos esto. Entonces va a seleccionar éste, éste, éste, y éste. Y va a cambiar ese texto para cambiar vía jQuery. Solo asegurémonos de que esté funcionando por ejemplo, el número dos. Y los seleccionó a todos. Y todo lo que hicimos, había otro selector CSS regular, dijimos h una coma p. Así que selecciona el H1, también selecciona todos los párrafos. Ahora como esto sigue siendo JavaScript bajo el capó, podemos seleccionar un párrafo que sea como un párrafo por su ID de cliente y no ID su clase. Hagamos punto clase personalizada. Y de donde estoy sacando eso es tasa aquí, clase personalizada dot y clase personalizada dot. Pero esta vez estoy seleccionando solo un párrafo con clase personalizada de punto en él. Todavía no estoy seleccionando el botón. Si quisiera seleccionarlos a ambos, me desharía de la p. Pero quiero solo p con una clase personalizada. Y entonces puedo decir que el texto de punto cambió de nuevo. Y sumemos un número tres aquí. Y cuando vuelva a mi navegador aquí y actualice lo que esto está haciendo en realidad, lo creas o no, es seleccionando esto, esto, esto, y esto y cambiándolo para cambiar la vista jQuery número dos, que vemos aquí. Y luego porque de nuevo, es JavaScript bajo el capó, va a ejecutar una línea a la vez. Entonces ejecuta esa línea, entonces va a ejecutar esta línea, y selecciona nuestro párrafo y lo cambia para cambiar la vista jQuery número dos. Pero luego también selecciona P dot clase personalizada. Ese es éste, y lo sobrescribe por segunda vez. Ahora podemos seleccionar por una identificación también. Entonces sigamos adelante y seleccionemos un ID y no necesitamos usar P ID personalizado, aunque podríamos, si quisiéramos, realidad no necesitamos ese selector de elementos. Y ahí sólo podríamos usar ID. Lo mismo con nuestra clase. Pero debido a que una idea en contraposición a ser completamente única en tu página o en tu página, nunca debería haber más de un ID de cliente. Donde hay puede haber más de un nombre de clase del mismo nombre exacto. Solo debe haber alguna vez un ID de cliente o un id particular por elemento. Y así podemos seleccionar esto sin tener que seleccionar o especificar un párrafo. Porque nuestro navegador sabe que si estamos siguiendo las reglas, solo va a haber alguna vez un ID de cliente aquí. Y podemos decir que este texto de punto cambió de nuevo, y hagamos un número cuatro ahí dentro. Y así es como se ve actualmente el código. Por lo que va a seleccionar todo h 1s y nuestros párrafos. Cámbialo por el que termina en número para seleccionar el párrafo con un cambio de clase personalizado hacia fuera al que termina en el número tres. Y luego seleccionar simplemente pasa a ser un párrafo que ya está seleccionado aquí arriba. Pero vamos a seleccionar el ID de cliente, que es el párrafo. Y vamos a cambiar este para cambiarlo de nuevo, número cuatro. Y cuando refrescamos nuestra página, cambiamos nuevamente el número cuatro. Y así ahora nuestras páginas son inmediatamente más interactivas. Podemos sobrescribir cualquier HTML que se haya dado. Entonces si alguien te da una página HTML aburrida y quieres cambiar un montón de cosas, pero no tienes permitido tocar el HTML, lo que en realidad sucede. En ocasiones puedes usar JavaScript y jQuery para cambiarlo. Ahora, no voy a hablar mucho más de selectores en este punto sólo porque realmente es solo un selector de CSS y eso es más cosa de CSS. Lin, Es una cosa de JavaScript o jQuery. Por lo que siempre que quieras seleccionar algo muy específico, podrías seleccionar tu cuerpo. Puedes seleccionar algún elemento, tal vez un párrafo, y luego puedes seleccionar todas las etiquetas fuertes dentro de él. Este es solo un selector CSS regular. Por lo que estás seleccionando tu cuerpo, seleccionando todos los párrafos dentro del cuerpo, seleccionando todos los elementos fuertes dentro de un párrafo. Y entonces lo estaríamos cambiando. No tenemos esa configuración de ejemplo, pero si quieres, eso sería una, una cosita divertida de configurar para tu proyecto o no tu proyecto, pero tu tarea para esta lección en particular es crear un selector muy específico, hacer texto de punto, y luego cambiar el texto en él. Adelante y dale una oportunidad a eso. Cuando hayamos terminado, vamos a mirar a cambiar algo de HTML en la página dinámicamente. 6. Cambiando dinámico HTML: Echemos un vistazo a cómo podemos agregar dinámicamente HTML a una página. Y así para esto, necesitamos un ejemplo. Demos a nuestra página un div con un ID de cliente de ID personalizado. Y no va a haber nada aquí, así que va a estar completamente vacío. Y sabemos que si volvemos a nuestro navegador y actualizamos tu página, no va a haber nada ahí dentro. Y si miramos nuestro código fuente, solo dice ID personalizado. Ahí adentro no hay nada. Sigamos adelante y agreguemos algún HTML personalizado ahí dentro. Entonces en el último par de lecciones, viste que seleccionaríamos este ID con ID personalizado. Y estoy usando el selector de id aquí, dot txt, texto aquí. Y así estábamos usando gravados y eso es, eso es todo, bueno y bueno. Pero eso en realidad no va a agregar ningún HTML. Entonces si quisiéramos sumar un H1 y aquí podemos decir H1, HelloWorld. Y desafortunadamente esto no va a hacer lo que esperamos que haga. Y volvamos a nuestro código aquí. En realidad va a imprimir H1, HelloWorld ocho slash H1. Eso tal vez no es lo que queremos. A lo mejor queremos realmente agregar algunos, algunos HTML apropiado aquí. Entonces si inspeccionamos esto, entramos en nuestros elementos y lo atornillamos para que eso se toque más pequeño. En realidad podemos ver que no hay un solo elemento, es sólo texto plano. Y así no siempre es lo que queremos. En cambio, lo que queremos es usar HTML. Y así como funciona esto es que tienes un selector, haces puntos HTML de apertura paréntesis, y luego pones tu HTML ahí dentro. Sea lo que sea ese HTML, puede ser una cadena como esta, o podría ser una variable. Y luego simplemente lo cierras con tus paréntesis de cierre. Y el punto y coma es opcional. Entonces a veces lo usaré, a veces no lo usaré. Adelante y refresquemos nuestra página. Y ahora vemos que en realidad tenemos un HelloWorld H1 adecuado. Y en nuestro modelo de objetos de documento en nuestro código fuente aquí, como lo ve nuestro navegador, tenemos un H1 adecuado. Entonces lo que es genial de esto es que ahora podemos entrar aquí y vamos a escribir un span con una clase de clase personalizada, span, barra de texto span. Entonces esto se está volviendo un poco difícil leer sólo porque está llegando a ser envuelto, en múltiples líneas aquí. Y porque estoy bastante acercado con mi editor. Pero si nos refrescamos, vamos a ver que hay un lapso. Ahora podemos seguir adelante y seleccionar ese lapso. Una vez creada, podemos seguir adelante y seleccionar ese texto span cambiado. Y vamos a ver que va del texto span al cambio. Igual que eso. Ahora bien, el espaciado está un poco apagado y este es una especie de ejemplo feo, pero es un ejemplo muy funcional. Y jQuery no se trata de hacer que las páginas se vean hermosas. eso es el CSS. Jquery está destinado a ser una forma más corta de escribir JavaScript. Por lo que hay una diferencia entre HTML y texto. Aprendimos sobre HTML en la siguiente lección. Adelante y aprendamos sobre el texto de puntos. Lo que me gustaría que hicieras para esta lección en particular es seguir adelante y seleccionar un ID o un elemento o más bien no tiene que ser Beidi podría ser por nombre de clase, podría ser simplemente seleccionar todos los divs de la página, hacer punto HTML, y luego escribir algunos HTML real ahí dentro. Y toma nota. Siempre puedes hacer clic con el botón derecho en inspeccionar, ir a la pestaña Elementos. Y se puede ver que hay elementos HTML reales aquí. Una vez que hayas hecho eso, pasemos a la siguiente lección. 7. Modificar dinámicos el texto: Echemos un vistazo formal al texto de cambio. Y en realidad hemos trabajado mucho con esto hasta ahora, mucho, mucho en casi cada lección hasta ahora, tal vez incluso cada lección hasta ahora. Pero echémosle un vistazo formal. Y así en la última lección, miramos el punto HTML. En este vamos a estar mirando texto de punto. Y entonces lo que podemos hacer aquí es No hagamos un div o un H1. Hagamos un elemento de sección. Y digamos que ponga algo de código HTML aquí. Y así podemos seleccionar este elemento de selección o sección con signo de dólar, paréntesis, punto de sección. Y entonces podemos o cambiar el HTML o el, o el texto. Ahora bien, si realmente quisiéramos poner código HTML aquí, no podemos usar HTML. Entonces si pongo una etiqueta negrita versus negrita. Entonces esta es la vieja forma de hacerlo audaz. Esta es la nueva forma de hacerlo audaz. Simplemente guarde esto y refresque mi página. En realidad, trata de renderizarse. Entonces si entro a la sección aquí, arregló mis elementos B y fuertes. Y eso es porque en realidad estamos inyectando HTML en la página. No necesitamos hacer eso sin embargo. Si realmente quisiéramos ver este código, sólo podemos hacer texto de punto. Y esa es la diferencia entre dot txt index.html es cuando refresco la página, en realidad aparece para poder escribir HTML aquí ahora, lo cual es realmente genial para codificar sitios web, codificar blogs, cosas así, siempre que necesites en realidad muestran algún tipo de código. Ahora tu tarea para esta lección en particular es seleccionar un elemento. No tiene que ser una sección, puede ser cualquier elemento. Y luego dentro de ese elemento con jQuery, quiero que uses dot txt n dot HTML y escribas algún HTML dentro de él y veas cuál es la diferencia en realidad. Ahora ya has visto cuál es la diferencia en mi pantalla, pero no es del todo lo mismo que conseguir algo de experiencia en manos. Así que adelante y consigue algo de experiencia práctica. Y cuando termines eso en la siguiente lección, sigamos adelante y hablemos de obtener forma porque los valores de forma no son del todo lo mismo. 8. jQuery de obtener valores de forma: Hablemos de cómo podemos obtener valores de forma ahora. Entonces en el último par de lecciones, hicimos esta cosa genial donde hicimos dot HTML. También hicimos texto de punto. Ahora, eso es genial y eso funciona con elementos como una sección que tiene contenido dentro de ella, contenido en un lado de la misma. Y eso está bien. Pero y si estamos trabajando con un elemento que no tiene contenido dentro de él. ¿ Y qué pasa si estamos trabajando con un elemento de entrada? Ahora en elemento de entrada no tiene una etiqueta de cierre. No hay texto dentro de ella. ¿ Cómo nos enfrentamos a esto? Entonces, antes que nada, vamos a guardar esto. Y así es como luce nuestra página. Es solo un elemento de entrada. Es un elemento de entrada muy aburrido. Pero lo que podemos hacer aquí es que ahora podemos seguir adelante y meter el texto ahí dentro. Entonces vamos a darle a esto un valor por defecto. Hola mundo, sólo el tipo defacto de textos que cada programador tiende a usar. Y dice hola mundo. ¿Y si quisiéramos poder sacar este valor? Bueno, empecemos por seleccionarlo primero. Vamos a seleccionarlo por una entrada es lo único en nuestra página y podemos simplemente seleccionarlo por su único valor de entrada. Y entonces podemos hacer dot val. Ahora hay dos cosas que podemos hacer aquí, y en realidad voy a hablar también del DOT test.html en tan solo un momento. Pero podemos hacer esto. El valor constante es igual al valor establecido console.log. Y todo lo que estamos haciendo aquí es otra vez, estamos, estamos seleccionando ese punto de entrada. Y luego usamos Lotvall, no punto valor, punto va al. Y no estamos poniendo nada dentro de los paréntesis aquí, sólo está vacío. Y así cuando refresco la página y voy a mi consola, dice hola mundo. Y eso es sacar ese valor de aquí para que podamos cambiar ese valor a Hello World 1-2-3. Y cuando refresco la página, dice Hola 1-2-3 o helloworld 1-2-3 dentro de la consola. Ahora, ¿y si quisiéramos cambiar esto? Bueno, eso también es muy fácil. Podríamos cambiar esto. Y podríamos decir, esto se cambia y siempre simplemente hacer es agregar un valor. Ahora, ya no queremos necesariamente trabajar con esto y vamos a deshacernos de eso. Entonces vamos a seleccionar esa entrada, decir ese valor. Este de aquí arriba tiene que ser, esto se cambia. Entonces sigamos adelante y echemos un vistazo a esto. Y dice que esto está cambiado, pero en nuestro código fuente, dice hola mundo 1-2-3. Todavía. Simplemente sucede que JavaScript y jQuery juntos o anulando ese valor. Y así se puede ver en realidad cuando me refresco lo suficientemente rápido parpadean un poco. Ese pequeño truco fresco con dot val. Cuando está vacío, podemos hacer lo mismo con el HTML de punto y el texto de punto. Entonces sigamos adelante y demos a eso un pequeño ejemplo rápido también. Sección que acaba de tirar algo de lorem aquí, algunos lorem ipsum Escribo LO REM hit tab en VS Code y automáticamente lo llena con Lorem Ipsum para mí. Entonces no tengo que pensar en algún tipo de texto fictito porque a veces es difícil llegar a ejemplos como ese. Entonces lo que podemos hacer aquí es ahora podemos seleccionar esta sección y podemos agarrar ese texto. Y podemos poner eso en una variable también. Por lo que el texto const es igual al texto console.log. Y cuando refresco esta página, tenemos todo este texto aquí dentro, y también tenemos todo este texto aquí dentro. Ahora, observe que en realidad también tiene el espacio en blanco. Y ese espacio en blanco, si refresco un código fuente viene de rojo aquí todo el camino hasta esa nueva línea de ahí. Y también hay espacio extra en blanco al final. Al final de la sección. Podemos hacer lo mismo con dot HTML, y vamos a hacer esto en negrita. Entonces sólo vamos a atrevir la palabra REM. Y podemos ver que aquí está atrevido. Y está atrevido aquí. Ahora aquí está la diferencia. Cuando hacemos texto de punto. Observe que éste está atrevido aquí arriba, pero REM por aquí en nuestra consola, tiene el HTML despojado de él. Entonces solo ten cuidado ahí. Entonces eso es un divertido poco tres en una lección. Lo que quiero que hagas sin embargo, es simplemente ignorar esto por ahora. Simplemente métete eso en tu bolsillo trasero. Y quiero que crees un elemento de entrada y uses dot val para establecer el valor del elemento de entrada. Cuando termines de eso, sigamos adelante y hablemos de cómo podemos agregar dinámicamente HTML a cierta parte de una página, como dentro de un elemento al frente o al reverso de la misma. 9. Prepend y aplicar: De acuerdo, hablemos de anexar y anteponer HTML. Y entonces lo que vamos a hacer es que vamos a seleccionar un elemento. Y luego vamos a añadir algo, algún elemento más o algo más de texto en la parte posterior del mismo y la parte frontal del mismo dentro de ese elemento en particular. Entonces lo que hemos visto antes es que podríamos tener como un H1 con algún texto aquí dentro. Y hemos podido seleccionar esa y luego usar el HTML de punto para poner más HTML ahí. Pero digamos que queríamos agregar un lapso al final o queríamos agregar un lapso al principio. Bueno, tendríamos que sacar todo esto almacenado en una variable, sobrescribir esa variable con HTML dentro de ella. En realidad hay una mejor manera de hacer esto. Entonces lo primero es lo primero, sigamos adelante y hagamos una función de punto de documento listo. Y eso solo nos permite poner nuestro código jQuery aquí de forma segura. Vamos a seguir adelante y seleccionar ese h uno. K uno está seleccionado. Ahora puedo usar append, APP END O antepend. Append va a la parte posterior, antepend va al frente. Así que vamos a anexar, y vamos a agregar algo de HTML aquí. Añadamos fuerte. Esto es audaz. Y eso es, de nuevo, eso va a seleccionar este H1, y sólo va a anexar algunas cosas aquí. Entonces sigamos adelante y guardemos nuestra página y actualicemos. Y en realidad se puede ver que cuando inspeccionamos aquí h uno, al final de la misma, tenemos HTML, tenemos fuerte, esto es audaz. Y de hecho, ese fue un mal ejemplo porque es difícil de ver. Hagamos subrayado. Ahí vamos. Esto es Bolden está subrayado. Asegurémonos de que eso sea consistente. Copywriting consistente allí. Entonces esto tiene algo de texto aquí. Esto está subrayado. También podríamos seleccionar ese mismo H1 y podríamos hacer anteponer. Y hagamos un conteo seis. Esto es cursiva. Y lo que esto va a hacer es poner algún código desde el principio. Código aquí. Y eso es exactamente lo que hace. Dice que esto es cursiva en nuestro H1, tenemos yo algún texto te, pero en nuestro código fuente, no tenemos nada de eso. Y así ahora estamos marcando dinámicamente nuestra página solo usando JavaScript y jQuery. Ahora una cosita divertida aquí es que si quisiéramos, podríamos encadenar estos juntos. Entonces sigamos adelante y pongamos esto en una nueva línea porque a JavaScript no le importan las nuevas líneas. Y vamos a seguir adelante y deshacernos de éste. Y así vamos a seleccionar este, y luego vamos a anexar, luego vamos a anteponer. Y cómo se ve esto esencialmente es justo esto. Lo estamos cambiando juntos. Pero podemos poner estos en nuevas líneas. Por lo que sólo se ve un poco más bonito. Y esto los aplicará a ambos juntos. Entonces, entrémonos aquí y aquí, número dos, para que sepamos que esto realmente está funcionando, que esto no es sólo ejecutar el mismo código del último ejemplo. Entonces, actualicemos nuestro código fuente y vemos que aquí nada ha cambiado. Nuestro jQuery ha cambiado, pero el dom real no ha cambiado el Document Object Model. Sigamos adelante y actualicemos el modelo de objetos de documento. Vamos a ver que esto es cursiva número dos y esto está subrayado número dos. Y eso funcionó. Y todo lo que hicimos fue en lugar de seleccionarlos a ambos, acabamos de seleccionar uno. Utilizamos un selector y lo reutilizamos. Por lo que anexamos y antepusimos. Ahora lo que está bien de encadenar aquí es que también podríamos hacer 2.txt. Esto se cambia. Texto, luego anexar, luego anteponer. Y así que algún texto aquí dentro va a decir, esto es texto de cambio y me lo cambió todo. Por lo que este ya no tiene ninguno de los contenidos que fueron originales a mi página. Jquery ahora lo ha sobrescrito todo y ha antepuesto y anexado algunos HTML también. Lo que me gustaría que hicieras como pequeña tarea divertida es ir adelante y darle una oportunidad a esto. No tienes que preocuparte por la parte del texto. Pero adelante y anexa algo de HTML, anteponga algo de HTML2, cualquier selector de su elección. Y luego cuando termines eso, encadenarlos juntos como lo que he hecho. Cuando termines de eso, vamos a ver cómo seleccionar un elemento y luego agregar algo de HTML fuera de él, pero antes y después. Entonces algunos aquí y algunos aquí, porque en este momento anteponen y anexan solo funcionan por dentro. Ahora queremos trabajar en el exterior. 10. Antes y posterior: En nuestra última lección, anexamos y antepusimos algún HTML a nuestra página en esta lección, sigamos adelante y agreguemos algún HTML antes y después de un elemento. Entonces démosle a esto un div con una id de objetivo. Y no va a haber nada aquí. Ahora, me gustaría, pongamos algo aquí. Agregar HTML antes y después de esto. Y así sigamos adelante y como todo en jQuery es básicamente selecto o base, seleccionemos ese objetivo. Incluso podemos hacer div ID target. Entonces podemos hacer punto antes. Y eso es literalmente punto antes. Y pongamos un h3 aquí. Helloworld, Este es un título. Y hagámoslo otra vez. Vamos a seleccionar un Div seleccionado por su ID, y luego vamos a hacer después. Y hagamos un párrafo aquí. Se trata de un párrafo. Y así lo que nuestras páginas ahora vamos a hacer es que va a seleccionar este elemento. Y ante este elemento, justo antes. Justo aquí. Si pudiera deletrear alguna palabra correctamente, aquí mismo va a decir, va a decir hola mundo, esto tiene un título. Y después se va a decir con algún tipo de párrafo aquí. Este es un párrafo y éste en realidad va a ser un h3. Entonces se va a ver algo así. Ahora vamos a seguir adelante y deshacernos de eso para que no tengamos eso aquí. Y borrar, borrar, borrar, guardar. Veamos primero nuestro código fuente. Asegúrate de que en realidad no está agregando nada ahí dentro. Y sigamos adelante y refresquemos este Hola Mundo. Este es un título en HTML antes y después de esto, y este es un párrafo. Y si no tienes tu consola abierta o tus herramientas de desarrollo, puedes hacer clic derecho. Se puede ir a Inspect, se abrió la pestaña de elementos, y se puede ver que ahora hay un H3. Ahí está el mismo div al que originalmente apuntamos, y hay un párrafo después de él. Ahora, al igual que en la última lección, podemos, si quisiéramos encadenar estos juntos. Y así sólo necesitamos seleccionar esto una vez y luego podríamos decir antes y después y hacer estas cosas. Sigamos adelante y guardemos esto en realidad, sigamos adelante y asegurémonos de que el almacenamiento en caché no esté sucediendo. Y solo pondremos un número dos ahí para que sepamos que esto está funcionando de la manera que esperamos que funcione. Así que adelante y refresca. Hola mundo. Este es el título número dos. Se trata de un párrafo número dos. Y así es como agregamos HTML antes y después de un elemento. Ahora lo que me gustaría que hicieras es lo mismo. Simplemente imita lo que he estado haciendo en estos videos solo para conseguir algo de experiencia práctica. Y de nuevo, no puedo decir que esto es suficiente cuando estás aprendiendo a codificar, puedes ver tantos videos como te guste. Pero nada se va a comparar con realmente conseguir algo de experiencia en manos y poder escribirla y poder crear memoria muscular. Así que adelante y dale una oportunidad a esto. Cuando hayas terminado de eso, pasemos a la siguiente lección, donde en realidad seleccionamos un elemento de la página y eliminamos por completo. 11. Borrar elementos de eliminación de: Echemos un vistazo a cómo podemos eliminar un elemento de una página. Entonces para esto, vamos a crear un ejemplo más complejo. Vamos a crear un div. Y va a tener un párrafo aquí. Y va a tener bajarlos aquí. Y va a tener otro párrafo aquí, un poco más Lorem, y otro párrafo aquí con un poco más de Lorem. Por lo que aquí tenemos tres párrafos. Y digamos que queríamos seleccionar esta clase media, párrafo medio. Y cuando nosotros la página Viewer, sí, es aburrido, pero esto va a ser un buen ejemplo. Entonces tenemos tres párrafos aquí, dentro de un div, y uno tiene una clase. Entonces sigamos adelante y creemos aquí un selector interesante. Pero antes de hacer eso, vamos a asegurarnos de que nuestro jQuery se pueda cargar. Documento.Ready función. Delétalo bien para la función de tercera vez. Y entonces podemos poner aquí nuestro jQuery. Sigamos adelante y seleccionemos esto. Ahora hay algunas maneras diferentes en las que podemos seleccionar este párrafo en particular, pero sigamos adelante y seleccionemos uno. De una manera interesante, una forma que realmente no hemos visto todavía. Entonces vamos a seleccionar todos los divs en la página. Entonces vamos a seleccionar todos los párrafos dentro del div. Y entonces vamos a asegurarnos de que sólo estamos seleccionando los párrafos que tienen el párrafo medio de clase, párrafo medio. Entonces ahora nos estamos metiendo en un selector interesante aquí. Y para eliminar esto, todo lo que tenemos que hacer es escribir punto, quitar paréntesis. Y eso literalmente borrará de nuestro modelo de objetos de documento. Entonces si vemos aquí nuestro código fuente, tenemos tres párrafos. Esto aún aparece. Pero si refresco la página, se puede ver que no aparece. Y si entro aquí a mis elementos, sólo tenemos dos párrafos. Ninguna de ellas tiene el párrafo medio de clase. Ahora lo que es genial de esto es porque se trata de un selector de clases. Podemos decir párrafo medio. Ya no es el párrafo medio, pero finjamos que lo es. Podemos seleccionar ambos al mismo tiempo y eliminarlos a la misma hora exacta. Entonces ahora va a seleccionar nuestro div, seleccionar todos los párrafos con una clase de párrafo medio. Bueno, mira, dos de ellos están resaltados ahí. Son dos de ellos. Y vamos a eliminar ambos. Entonces si volvemos a ver nuestro código fuente, todavía aparece como normal. Todavía hay tres párrafos ahí, pero JavaScript está anulando nuestra página y se está deshaciendo de los otros dos. Y aquí dentro tenemos un div y un solo párrafo. Ya no tenemos tres párrafos. Ahora esto es completamente seguro de hacer. Esto nunca va a eliminar o eliminar nada de tu computadora. Solo va a funcionar alguna vez con código dentro de tu página basado en el selector que le des. Ahora si quieres hacer, y también podrías decir, oye, selecciona cada párrafo, quítalo. Pero debido a que todos nuestros párrafos están en un div, podríamos seleccionar ese div y podemos eliminar eso también. Y podemos ver en tu modelo de objetos de documento que div no existe. Nuestro código fuente no ha cambiado, pero JavaScript lo está anulando. Entonces lo que me gustaría que hicieras como una pequeña tarea divertida, adelante y crea cualquier tipo de ejemplo con HTML. Selecciona un elemento en particular, solo uno de ellos, y luego retírelo. Verifica que se haya quitado aquí. Verifica que se haya quitado aquí. Y una vez que hayas hecho eso, pasemos a la siguiente lección donde seleccionamos un elemento para luego deshacernos de todos sus elementos hijos. Entonces lo vamos a vaciar. 12. Borrar elementos infantil: Habrá un momento en el que se necesita seleccionar un elemento y todos sus elementos hijos necesitan ser eliminados. Y así podríamos escribir algún selector de fantasía para seleccionar prácticamente todo. Entonces podríamos decir, por ejemplo, div seleccionado, y es como todo dentro de ese div dot remove. Pero hay una mejor manera de hacer esto. Y así sigamos adelante y pongamos un ejemplo aquí. Podemos decir div, y este va a ser nuestro elemento padre. Entonces elemento padre, y este es un comentario HTML aquí. Ahí mismo. Escribamos aquí una palabra fuerte en negrita. cursiva, it, palabra en cursiva aquí. Y también seleccionemos o no seleccionemos el Crear un párrafo con algún lorem ipsum ahí dentro. Y así si vemos nuestra página, está bien, no es gran cosa. Todavía tenemos este div. ¿Y si quisiéramos seleccionar este div? Y démosle a esto una identificación de padre. ¿ Y si quisiéramos seleccionar este div ID de padres y deshacernos de todas estas cosas aquí dentro. Eso es realmente, realmente fácil de hacer. Y en realidad hagamos esto un poco más complicado. Entonces, en primer lugar, empecemos con div, seleccione el ID de padre. Y entonces podríamos simplemente hacer punto vacío. Y lo que esto va a hacer es seleccionar ese ID, seleccionar ese div, y simplemente deshacerse de todo lo que hay dentro de él. Ahora podemos encadenar puntos HTML y podríamos decir algo así como hola mundo. Y eso se deshizo de todos los elementos dentro de este div y lo reemplaza por hola mundo. Ahora si miramos nuestro código fuente, todo nuestro código fuente regular sigue ahí. Esto no va a cambiar a lo largo de este curso. Todo nuestro código fuente va a ser exactamente como lo escribimos. Javascript continuará sobreescribiéndolo. Entonces esto va a ser exactamente lo que escribimos y JavaScript lo va a cambiar. Entonces de aquí en adelante, probablemente ya no te voy a mostrar el código fuente con demasiada frecuencia sólo porque, bueno, va a funcionar de la misma manera una y otra vez. Ahora, sigamos adelante y especie de cambios en JavaScript adecuado. Para que pudiéramos hacer const. El padre es igual a dos. Y cuando estás escribiendo jQuery y ves un signo de dólar frente a un nombre de variable. Eso usualmente significa que hay algún tipo de selector. Y así podemos seguir adelante y seleccionar esto. Y luego si quisiéramos, podríamos decir parent.value vacío o los padres puntan cosas HTML aquí. Y vamos a cosas de CSS aquí. Ahora, lo que es algo interesante de esto es que a veces solo necesitas vaciar un elemento solo para que algo más se cargue un poco más tarde. Pero si necesitas que suceda de inmediato, en realidad no necesitamos usar vacío en absoluto. Podemos seleccionar todo este elemento padre y podemos sobrescribir todo el HTML con una frase que diga cosas aquí, Stephan aquí, y no hay elementos hijos. Ahora si solo estás entrando en el mundo de los modelos de objetos de documentos y eres como lo que es aparente, ¿qué es un niño? Esa es una buena pregunta. Un elemento padre contiene elementos hijos. Un elemento hijo está dentro de un elemento padre. Eso es todo lo que es. Entonces sigamos adelante y demos este ejemplo, un tiro aquí, un pequeño adelanto. Y vamos a ver aquí, en realidad lo hemos sobrescrito todo, así que no tuvimos que usar punto vacío. Estamos realmente entra es si tienes algún procesamiento que hacer o si necesitas buscar datos de como una API, podrías parent dot vacío. Eliminemos ese punto de padre vacío. Y luego haz una cosa para que puedas buscar algo de información de una API en algún lugar. Y quizá eso lleve tres segundos. Y luego se puede decir parent dot HTML y poner algo de HTML nuevo ahí. En la siguiente lección, empecemos a hablar de oyentes de eventos, sintaxis de oyentes de eventos y cómo podemos hacer que algo se dispare cuando hacemos clic en él. 13. Escuchadores de eventos y el evento de clicado: Bienvenidos al mundo de los oyentes de eventos. Los oyentes de eventos son cosas muy, muy interesantes. Entonces lo primero que tenemos que hacer es mirar la sintaxis, ¿kay? Entonces, en realidad lo primero que tenemos que hacer es hablar de lo que es un oyente de eventos. Un oyente de eventos es. Cuando tengas un botón en la página y dilo que dice Click Me dentro de ella y haces clic en ese botón. ¿ Qué se supone que va a pasar? Eso no es oyente de eventos. O si tienes un elemento de entrada y empiezas a escribir en él. Cada una de esas letras que presionas en tu teclado es un evento. En cualquier momento que muevas el mouse, en cualquier momento que redimensiones tu pantalla, cualquier momento te enfocas en un elemento de entrada o desenfocas fuera de un elemento de entrada o como deja el elemento de entrada. Todos estos son eventos y vamos a estar abordando un montón de estos en este curso. Entonces lo primero es lo primero, echemos un vistazo a alguna de la sintaxis aquí. Entonces hay dos formas de hacer esto. Ahí está el, ahí está la forma correcta que vas a ver en los docs de jQuery. Y luego podría decirse que hay una forma aún mejor de hacerlo, que va a ser prueba futura para Ajax y documentar las llamadas de modelo de objetos. Entonces echemos un vistazo a ambos. Entonces primero tenemos algún tipo de selector y así podemos seleccionar el botón. Y entonces podemos decir dot click. Y esto va a tomar una función. Y así sin la función, así es como se ve. Ese es un oyente de eventos. Ahora esta función que estamos pasando aquí es meramente lo que queremos hacer. Por lo que podemos decir console.log. Se me hace clic. Y porque tenemos este botón aquí en esta página que dice click me, sigamos adelante y demos una oportunidad a esto. Dice Click Me y en la consola aquí, cada vez que hago clic en él, dice que me hacen clic. Eso es todo. Eso es todo lo que hay a los oyentes de eventos con jQuery es un super, súper fácil. Ahora hay otra forma de hacer esto. Voy a comentar esto. Y podría decirse que así es mejor. Puedes tener un botón selector de punto y luego dices punto en lo que quieres que haga. ¿ Para qué quieres que escuche? Querías que escuchara un evento de clics. Y luego pasas en una función console.log. Esto se puede hacer clic para refrescar tu página. Y dice que esto es clicable para ahora Justin, realmente hacer la vida loca difícil y difícil de aprender jQuery. Aprendamos una tercera vía. Y esta es en realidad la mejor manera, pero no vamos a hacer lo mejor. Íbamos a hacer el camino medio avanzando a lo largo de este curso. Pero la mejor manera es documentar punto al hacer clic, y luego tu botón, y luego tu función, console.log. Y sólo loguemos 33333. Y esto también funciona. Y así en realidad hay una razón por la que lo hacemos de manera diferente aquí. Y así vamos a estar usando este método adelante sólo porque es el más fácil de escribir para entender. Y éste es un poco más complejo, pero hay una razón por la que hacemos la onda compleja y la forma compleja es porque ¿ si ajax o dinámicamente creamos un botón? Y sigamos adelante y hagamos esto y aquí te mostraré un ejemplo. Div ID. Poner. Botón aquí. Sigamos adelante y seleccionemos esto. Por lo que podemos hacer constante. Vamos a llamarlo padre es igual a ese selector. No, eso es selector de id. Entonces podemos hacer parent.value HTML. Podemos poner un botón aquí. Haga clic en Me slash botón, botón, botón. Y vamos a seguir adelante y deshacernos del Click me one as a click me dynamic button. Eso es lo que va a ser esto. Haga clic en Me botón dinámico, aparece. Todavía no hay oyentes de eventos. Adelante. Y digamos que este oyente de eventos fue creado primero. Entonces cómo va a funcionar JavaScript y jQuery es de arriba a abajo. Se va a seleccionar todos los botones de la página, y se va a registrar una función de click. Pero actualmente, en este momento, simplemente no hay botones en la página, hay nada que hacer clic. Después seleccionamos a ese padre y ponemos un botón en la página. Y cuando guardamos esto y nos refrescamos, vemos que nada funciona. Ahora, eso está bien. Si podemos mover este código aquí abajo. Porque este botón ahora va a existir en la página. Y luego podemos registrar al oyente de eventos. Y esto va a funcionar. Ahora, Ese no siempre va a ser el caso. Va a haber muchas veces donde se registra un oyente de eventos. Pero entonces tus páginas van a cambiar dinámicamente. Y esto es muy, muy, muy común en los sitios web modernos. Entonces, ¿qué hacemos? ¿ Podemos usar esta opción? Vamos a subir esto y vamos a comentar esto para que sepamos que no va a funcionar. Entonces ahora vamos a seleccionar un botón y luego onclick y vamos a decir cuando se haga clic en ese botón, registro de consola, se puede hacer clic dos. Ahora va a pasar el mismo problema aquí. Se va a buscar todos los botones de la página. Se va a tratar de registrar un evento onclick. No va a funcionar para nosotros. Vamos a refrescar la página y ver que este botón cada vez que hago clic en él no lo hace. De acuerdo, entonces eso no es bueno. Esta es una sintaxis agradable, limpia, esto es agradable escribir. No es lo suficientemente bueno para contenido dinámico. El contenido dinámico entra aquí. Y vamos a subir esto. Y entonces lo que esto está diciendo es seleccionar todo el documento cuando haga clic en el documento y haga clic en el botón. Entonces podría ser este botón en particular aquí o lo que quieras darle una identificación o una clase o algo por el estilo. Este es tu selector. Entonces haz una función y esto va a hacer de tus sitios web una prueba dinámica, prueba Ajax. Entonces cuando las cosas se cargan dinámicamente en tu página usando otro JavaScript, esto todavía va a funcionar. Y así vamos a seguir adelante y refrescar la página. Y vemos que esto ahora funciona. Registramos un clic eventos en todos los botones, pero lo adjuntamos al documento. Entonces aunque haya algo dinámico sucediendo, todavía podemos ejecutar esto. Entonces esto es realmente bueno saberlo. Tómalo esto en tu bolsillo trasero por ahora. Pero vamos a estar escribiendo de esta manera avanzando sólo porque es un poco más limpio. Ahora lo que me gustaría que hicieras es crear un oyente de eventos, algo así. Selecciona un botón. Dot on. Tu primer parámetro va a ser ¿qué buscamos? Estamos buscando un evento click. Al hacer clic en el botón, ¿qué pasa? Después escribes una función. A esto se le llama función de devolución de llamada. Y en cualquier momento que haga clic en este botón, ¿qué va a hacer? Adelante y dale una oportunidad a eso. Una vez que hayas terminado con eso, pasemos a la siguiente lección donde hablamos mover nuestro ratón sobre un elemento y fuera de un elemento. Entonces vamos a flotar. 14. Eventos de la pasador de Hover: Hay una manera de registrar un evento cuando pones el mouse sobre algo y cuando lo mueves fuera de algo. Y para esto, sigamos adelante y escribamos un poco de CSS. Entonces vamos a agregar un poco de estilo aquí, y vamos a crear una caja. Y va a tener un ancho de 200 píxeles, altura, 200 píxeles. El color de fondo va a ser negro. Y pongamos en el medio de nuestra página, hagamos margen, 50% o 50 píxeles arriba e abajo y justo en medio de la página. Y así ahora tenemos que ir a crear una caja y, y mirar este CSS. Este es un ID para un selector de caja. Caja. Puedo m0 para abreviar eso. Entonces no voy a poner ningún texto ahí dentro. Y luego para seleccionar esa casilla, todo lo que tengo que hacer es escribir exactamente lo mismo. Y así ahora estamos escribiendo lo mismo en básicamente tres lenguajes de scripting diferentes. Tenemos HTML, CSS, y JavaScript. Por lo que ahora podemos decir punto cuadro en el ratón entrar. Y qué hacemos cuando ponemos el ratón dentro de esta caja, eso es el registro de punto de consola, entraste. Y di que tu ratón es un que se cierne sobre esta caja. Y así cuando refrescamos la página, tenemos esta caja negra. Y cada vez que pongo mi ratón sobre él, dice que tu ratón está flotando sobre esta caja. Y así sólo lo hace una vez mientras estoy encima de esta caja. Y cuando me mudo, no pasa nada. Cuando me mudo, vuelve a pasar. Ahora si te registras cuando mueves el ratón, muy, muy sencillo. Ahora podemos encadenar estos juntos y podemos decir en el mouse enter, también podemos decir punto en el mouse leave. Escribamos aquí una función. Y podemos decir consola dot advierte. Dejaste la caja. Y así todo lo que estamos haciendo aquí es entrar mouse y sobre todo ahora como un pequeño resumen rápido de la última lección , porque la última lección fue bastante intensa. Todo lo que estamos haciendo aquí es algún tipo de selector, punto en el nombre del evento. Y luego una función, y esa función hará lo que quisiéramos hacer aquí. Esta es la sintaxis del oyente de eventos. Eso es todo lo que es. Entonces así como un resumen rápido, tenemos un selector porque todo está basado en selectores en jQuery. Bueno, casi todo encendido para registrar un evento, sea cual sea ese nombre de evento. En esta lección, estamos usando el mouse enter y mouse leave, luego hacer una función cada vez que se desencadene ese evento. De acuerdo, vamos a guardar eso y refrescar la página. Ok, no pasa nada y mete mi ratón dentro. Tu ratón se cierne sobre la caja. Dice que dejaste el área de la caja. Cada vez que entramos y salimos, entramos y salimos, entramos y salimos. Ahora voy a ser completamente honesto aquí. Esto fue súper popular hace varios años, pero la gente realmente ya no usa eventos flotantes. Tratamos de usar eventos de hover en CSS de pares si es posible. A veces eso simplemente no es posible. Por lo que podemos usar jQuery o podemos usar JavaScript vainilla también para que esto suceda. Pero normalmente tratamos de apegarnos a CSS para que cualquier tipo de evento ocurra cuando mueves el mouse sobre algo o mueves el mouse fuera de algo. Y en CSS, es tan simple como decir box hover, y luego hace una cosa. Y cuando mueves tu caja, o cuando mueves el ratón fuera de esta caja y ya no está flotando, vuelve a su defecto. Entonces eso es todo lo que es entonces por eso preferimos CSS. Pero de nuevo, a veces eso no es posible. Y a veces necesitamos escribir un poco de JavaScript, un poco de jQuery para que eso sea posible. Adelante y dale una oportunidad a esto. Yo quiero que hagas dos cosas aquí. Quiero que selecciones algún tipo de elemento y registres un evento enter mouse. Y solo inicio de sesión en consola. No tenemos que hacer nada elegante todavía. Nos meteremos en la fantasía un poco más tarde, pero solo ven a registrar algo. Y luego cuando el mouse deja el registro de consola o consola usado algo más. Y luego la segunda parte es que quiero que encadenen estos juntos. Por lo que actualmente, sabemos que puede verse así. Habitaciones Doo-doo-doo-doo en una holgura que bache que hacia adentro. Entonces esto funciona, esto funcionará perfectamente bien. Pero quiero que los encadenes juntos para hacer un código jQuery un poco más bonito. También es un poco más de rendimiento. Significa que tu navegador no necesita buscar estos elementos en particular o este selector en particular más de una vez y puede hacerlo solo una vez y usarlo una y otra vez. Una vez que hayas hecho eso en la siguiente lección, vamos a estar hablando del oyente de eventos key up. Entonces, ¿qué pasa cuando escribes algún tipo de elementos de entrada? Escribes algo ahí dentro. ¿ Cómo sacamos ese valor de ahí? ¿ Qué pasa cada vez que presionas una tecla en tu teclado? Vamos a hablar de eso en la siguiente lección. 15. Eventos de Keyup: Hablemos del evento keyup. En el evento keyup tenemos como una entrada. Y vamos a darle a esto una clase de seleccióname y un valor predeterminado de cosa aquí. Ahora, hola mundo, o se pusieron mejor. Y así tenemos que seleccionar esto por su clase o, ya sabes, simplemente nos gusta picar atributo. Podríamos seleccionarlo por su tipo de elemento. Nos seleccionan por todo tipo de cosas, pero sigamos adelante y seleccionémoslo por su clase. Entonces podemos decir punto en clave arriba, función, console.log. Presionaste a KI. Y así vamos a seguir adelante y refrescar nuestra página. Y cuando entramos aquí, hacer, hacer, hacer, hacer, hacer, hacer, hacer. Cada vez que presiono una tecla, registra algo en mi código para que puedas verlos spam aquí abajo. Y eso es todo lo que hay a ello. Y así en este punto si estás pensando, wow, Kayla, esto, esto es igual que lo mismo una y otra vez. Tienes toda la razón. Es lo bonito de jQuery es que una vez que aprendes una cosa, es muy similar a todas las demás cosas. Y así hace que aprender jQuery sea realmente fácil. También hace que escribir JavaScript sea realmente fácil. Ahora digamos que lo quieres para sacar el valor de esto. Esto se va a poner muy interesante, así que en realidad es borrar eso. ¿ Y cómo conseguimos este valor? Tenemos dos vías. Podemos obtener este valor. Podemos decir const, vamos a hacer entrada es igual a la yo seleccionada. Y entonces podríamos hacer console.log y podemos registrar ese punto de entrada val. Ahora ya sabemos de val. Entonces esto va a funcionar para nosotros. Adelante y refresquemos esto. Y así funciona para nosotros de la forma en que esperamos que funcione. El problema aquí es que ahora tienes un selector aquí, y cada vez que presionas una tecla en tu teclado, va a atravesar tu DOM va a mirar a través, digamos, 10 mil líneas de HTML y tratar de encontrar esto. Y lo creas o no, pesar de que es bastante rápido, los navegadores no son realmente tan rápidos. Hay mucha información por recorrer y quieres que te realicen con tu código. Y sobre todo si estamos tratando de conseguir un trabajo como desarrollador web. Entonces, en cambio, lo que hacemos es que podemos, porque estamos usando la función y si vienes de JavaScript, siempre que uses la función, tienes acceso a la, esta palabra clave. Podemos usar selector, este punto val. Y este val simplemente se refiere a lo que se está seleccionando aquí. Y así vamos a seguir adelante y console.log este Console.log, este punto val. Y cuando refresco hola mundo. Y esto está funcionando mejor y técnicamente es más rápido, técnicamente más desempeño. Ahora, ¿qué pasa si tenemos otro elemento de entrada con el mismo nombre de clase? Y éste sólo tiene texto diferente. ¿ Se va a seleccionar ambos? Y luego cuando le hagas una llave a cualquiera de ellos, va a conseguir el valor de ambos juntos o va a conseguir el valor de sólo el que estás escribiendo? Estas son preguntas que tenemos que hacernos. Adelante y refresquemos. Y HelloWorld 123. Y entremos al tipo y aquí, 123. Por lo que está completamente aislado de los otros, lo cual es realmente bonito ahora detrás de bambalinas, todo lo que está haciendo es seleccionar todos estos como nodos. Entonces este es un nodo y este nodo y está registrando el evento keyup en cada uno de ellos. Y así a pesar de que el selector está siendo elegante y seleccionando dos cosas, nuestro oyente de eventos detrás de escena en realidad está registrando un oyente de eventos diferente para cada una de estas. Y así están completamente separados el uno del otro. Ahora como un pequeño resumen rápido, tenemos nuestro selector, por lo que seleccionamos un elemento de entrada aquí. Dijimos punto arriba, Ese es nuestro EventListener. Entonces tenemos una función. Y en esa función, nos limitamos a la consola de log este punto val. Y esta es la llave para llevar aquí. Esto, no estamos usando este dot val porque dot val no existe en la palabra clave esta. Vamos a lanzar esto en un, otro selector de jQuery y luego usar el punto válido porque el punto val existe en el selector en jQuery, no en JavaScript vainilla, esto es algo de jQuery. Y así tenemos que envolver esto en un, en un selector jQuery. Yo quisiera que le diera una oportunidad a esto. Y quiero que juguetéis con la, esta propiedad, la, esta palabra clave. Sólo funciona cuando se utiliza una función. Entonces si estás escribiendo JavaScript moderno y usas una función de flecha, esto puede o no funcionar. Te imploro que pruebes esto, a ver qué pasa. Pero típicamente quieres este elemento. Y estoy diciendo esto específicamente. Por lo que este elemento se registra en esta función. Y luego usamos esta palabra clave para atarlo todo. Adelante y dale una oportunidad a eso. Intenta crear un oyente de eventos clave cuando terminaste, hablemos de lo que sucede cuando haces clic en cualquier evento, no en un evento en una entrada en particular. Entonces cuando hago clic en él o cuando hago clic fuera de él, ¿qué pasa? 16. Eventos de enfoque: Registremos un oyente de eventos cada vez que hacemos clic en un elemento de entrada. Y en lugar de usar un elemento de entrada, usemos un área de texto. Y usemos un tipo diferente de selector. Entonces esto va a tener un nombre de mi área de texto. Y cuando veo la página, es sólo un área de texto. No pasa nada. Ahora esto va a funcionar con un área de entrada, un elemento de entrada, al igual que va a funcionar para un elemento de área de texto. Entonces lo primero es lo primero, sigamos adelante y seleccionemos esto. Ahora podemos seleccionar esto por un área de texto, pero también podemos seleccionarlo por un atributo. Y podemos decir el atributo y empieza así. El nombre de corchetes es igual a mi área de texto, y este es un tipo diferente de selector y esto también funciona en CSS. Dot on focus, function, console.log en el que se enfocó y esta área de texto. Y así cuando refrescamos la página, cuanto hago clic en ella para escribir algo, dice que te enfocas en esta área de texto. No es un flotador. Observe cómo no se activa cuando pongo el ratón sobre él, sólo cuando hago clic en él. Y así eso es básicamente todo lo que hay para enfocarse. Esto también va a funcionar para un insumo. Por lo que podríamos hacer una entrada. Y entrada no tiene etiqueta de cierre y tampoco tiene ID de filas, o podría tener una idea, pero no va a tener filas o columnas. Vamos como los dos y llámalo y mi insumo. Y así ahora estamos seleccionando una entrada por su atributo de nombre. Estamos diciendo que en el enfoque, te centraste en esta área de entrada. Adelante y dale una oportunidad a esto. Y cuando pongo mi ratón sobre él y no pasa nada cuando hago clic en él y se dispara. Pero cuando escribo, no se activa. Y así lo único que está pasando aquí es cuando pongo mi ratón sobre él y le doy clic. Entonces estoy listo para teclear. Ahora si te preguntas, ¿dónde en la tierra usaría posiblemente esta gran pregunta. Ya sabes, cuando estás en una app y te pide tu dirección de correo electrónico o algo así y tu teclado está oculto. Bueno, haces clic en esa sección o pones el pulgar en esa sección, lo golpeas, y luego el teclado se aleja. Ese es un buen, muy buen ejemplo de un evento on focus. Por favor, adelante y dale una oportunidad a esto. Crear un evento de enfoque. Esto es muy, muy similar al mouse enter, mouse leave, click, y así sucesivamente. Por lo que esto debería empezar a sentirte un poco más familiar en la siguiente lección cuando estés listo. Hablemos de lo que sucede cuando dejas un elemento. Entonces hablamos de cuando te enfocas, de qué pasa cuando te enfocas. 17. Eventos de desenfoque: En la última lección, miramos lo que sucede cuando tienes una entrada y pones tu ratón dentro de ella y luego te gusta hacer click. Y luego tú, Se llama enfocar. Te enfocas en el área de texto y eres capaz escribir lo que sucede cuando quieres desenfocar. Entonces el valor va a estar desenfocado en mí, en mí. Y lo que vamos a hacer aquí es sólo seleccionar esto usando un selector regular, punto encendido. Y no se llama desenfocado. Se llama desenfoque. Y le damos una función. Console.log. Te alejaste de esta área de entrada. De acuerdo, desenfocado un medio, eso es un error tipográfico divertido. También cambiemos. Ahora sabemos que no se llama desenfoque desenfocado fuera de mí. Ahí vamos. Desenfocar de mí. Y cuando hago clic, no pasa nada porque ese es el evento de enfoque. Y cuando hago clic fuera de él, no cuando muevo mi ratón fuera de él, sino cuando hago clic fuera de él y se puede ver que el contorno se va fuera de él. Dice, Te alejaste de esta área de entrada. Y cada vez que lo haga, se va a activar una y otra vez. Ahora si estás pensando, oye, ¿ cuándo me va a ser útil esto? Este es un ejemplo realmente bueno de cada vez que estás escribiendo tu dirección o alguien escribe en una URL de un sitio web y quieres trabajar con esa información, podemos obtener el valor aquí. Podríamos decir consola dot log, este dot val, desenfocar de mí. Doo-doo-doo-doo, 123123123. Y cuando un desenfoque, me dice desenfoque, 123123123. Y así ahora podemos trabajar con esa información. No en cada tecla arriba, no cuando te enfocas en ella, solo cuando termines de escribir, puedes hacer algo con ella. Y así como ejemplo, podríamos hacer algo así como dejar URL del sitio web es igual a este punto val. Y entonces podemos decir si el sitio web URL dot substring 04 no es igual a HTTP, y queremos asegurarnos de que este es un sitio web. Entonces esto va a ser algún tipo de URL del sitio web, así como www.facebook.com. Pero cada sitio web en realidad viene con HTTP. Ese es el protocolo HTTP. Y así ahora podemos decir que la URL del sitio web es igual a. Y podemos usar una plantilla literal aquí. Por lo que estamos usando JavaScript ES6 y podemos hacer HTTPS colon slash URL del sitio web. Y estamos usando garrapatas traseras para el literal de la plantilla. Y entonces podemos decir que este punto val es igual a la URL del sitio web. Y entonces lo que estamos haciendo aquí es cada vez que te desenfoques de esto, si tienes algún tipo de texto ahí dentro que no comience con HTTP, va a agregar automáticamente HTTP. Y luego va a cambiar ese valor a URL del sitio web. Ahora ese sitio web usted o podría no cambiar posiblemente, podría cambiar quién, quién sabe. Depende de lo que escriba el usuario. Entonces sigamos adelante y, y escribamos esto como ejemplo. Vayamos a facebook.com. Y cuando me desenfoco fuera de aquí, automáticamente agrega HTTP colon slash slash facebook.com. Y lo bueno de eso es que ahora puedes hacer validación de usuario para ellos. Entonces ya sabes, cuando te inscribes en un sitio web y es como cuál es tu sitio web son ¿cuál es tu dirección de correo electrónico? Y es como si pusieras mi website.com y es como, oh, en realidad necesitas ese HTTP antes de poder enviar este formulario antes de poder registrarte realmente. Es sí, lo pillo. Pero también el desarrollador puede hacer eso por nosotros. Y tú como desarrollador ahora puedes hacer eso por el usuario, haciendo que la experiencia del usuario sea significativamente mejor. Y eso todo sucede con la función de desenfoque o el oyente de eventos de desenfoque. Ahora se habla de enviar un formulario. Justo ahora. Adelante en la siguiente lección y veamos cómo podemos evitar que un formulario se envíe. 18. de Presentar en la forma: Va a haber un momento en tu vida en el que tienes una forma y se supone que tiene que hacer algo, pero en realidad tienes un botón. El tipo es igual a presentar. Envía este formulario y tienes este botón. Y cuando alguien envía el formulario, quieres hacer algo, tal vez quieras desactivar el botón. Puedes desactivar totalmente ese botón si quisieras. Por lo que la gente no puede hacer clic enviar más de una vez. Eso es algo muy común. O bien puedes detener por completo el formulario de enviarlo por completo. Vamos a hacer una entrada aquí, y vamos a hacer el valor es igual a, Eso es lo hago un valor. Hagamos un marcador de posición, Tu nombre. Y cuando vemos la forma, esto es todo parece. Entonces te va a pedir tu nombre y luego envías este formulario. Ahora, para este ejemplo, vamos a necesitar realmente darle un nombre a esto. Nombre es igual a nombre y esto va a aparecer en tu URL. Entonces cuando golpee a submit y vamos a ver nombre es igual a, pongamos mi nombre como Bob. Y dice index.html. interrogación, nombre es igual a Bob. Es lo que sea que pongas ahí dentro. Se va a rellenar auto en la URL. Y dice ser auto llenado en la URL. Y así tal vez no queremos que eso suceda. A lo mejor queremos que pase algo más. Y lo que voy a hacer es volver a acercar aquí. Entonces lo que podemos hacer es seleccionar este formulario. Y entonces podemos decir On Submit, y aquí es donde se pone interesante. Función puede tomar cualquier parámetro de evento y en realidad hemos estado ignorando todo este tiempo, pero cada oyente de eventos tiene un parámetro de evento. Y podemos decir event dot prevent default. Y lo que esto va a hacer es decir, oye, sí, un navegador sabe que se supone que un formulario debe enviarse en cualquier momento que haga clic en el botón Enviar. Pero cuando se presenta este formulario, se va a ejecutar primero esta función. Y vamos a decir Tome ese evento, el evento de presentación, y evitó hacer su cosa por defecto, impidió ser él mismo. Y así ahora podemos decir que el formulario console.log no fue enviado. Y voy a limpiar esta URL porque sabemos que cada vez que enviamos este formulario, que automáticamente agrega cosas a la URL y tal vez no queremos eso. Entonces sigamos adelante y tecleemos a Kyle Como nombre. Presentar este formulario. Te das cuenta de cómo no cambió la URL. El sitio, no parpadeó esa página y se recargó y dice que el formulario no fue enviado. Ahora, honestamente, en este momento, esto te resulta completamente inútil porque ¿por qué querrías evitar que se presente un formulario? Bueno, tal vez no querrías desactivar el botón, cual hablaremos por el camino. A lo mejor querrás agregar una clase diferente al botón para que se vea diferente. Entonces parece que se presenta el formulario? Posiblemente, sí. Hablaremos de eso por el camino también. Pero el caso de uso más común es cuando tienes un formulario y quieres evitarlo. Lo que quieres hacer es que quieras agarrar ese formulario y quieres serializar los datos. Y entonces tal vez quieras hacer algún tipo de solicitud ajax. Por lo que el formulario en realidad no debe enviarse a index.html o a donde le diga que apunte. Javascript puede sobrescribir eso y decirle que haga una solicitud Ajax a algún otro lugar. Ahora aún no sabemos de jQuery ajax, así que no podemos hablar de eso todavía. Vamos a hablar de eso cerca del final del curso. Pero por ahora, solo mételo en el bolsillo trasero porque lo vas a necesitar. Y tú siempre que envíes un formulario y quieras evitar alguna acción predeterminada, vas a necesitar luego agarrar los valores de las áreas de entrada o de texto o de los campos de selección. Vas a querer agarrar esa información y hacer algo con ella. Y eso es lo que hace el evento dot prevent default. Ahora mientras estamos en el tema del evento dot prevent default, lo que podemos hacer es seguir adelante y seleccionar este botón. Sabemos que cuando, cada vez que presionamos este botón, cada vez que hacemos clic en enviar este botón de formulario, eso va a enviar ese formulario. Nos funcionó antes. Seguramente va a funcionar de nuevo una vez que desactivemos este JavaScript aquí, podemos hacer lo mismo con Submit. Entonces sigamos adelante y seleccionemos ese botón. Botón. Pero enseñado. Pero encendido, cuando hacemos clic en ese botón, vamos a registrar una función. Y debido a que cada función tiene en secreto un parámetro de evento, podemos hacer event dot prevent, default. Y así como una cabeza arriba, a menudo verás evento como e. Así que cada vez que veas la función e, las posibilidades están en JavaScript estamos hablando de evento. Y podríamos console.log. El botón se vuelve inútil. Y vamos a refrescar la página y enviar este botón y sólo dice que botón se renderiza utiliza el formulario no se está enviando. Yo puedo hacer esto. Y cuando entrego el formulario, si realmente lo somete, éste debe refrescarse o debe limpiarse. Aquí no debería haber nada. Pero está impidiendo que el formulario se envíe. ¿ Y por qué hace eso? Y es porque dijimos, toma ese botón, cada vez que lo hagas, toma ese evento, ese evento click, y evita que haga lo normal, impidió ser una función normal en botón. Entonces en esta lección, lo que me gustaría que hicieras es escribir un formulario HTML cuando lo envíes, impedido de hacer nada. Y luego comentan eso como lo hice yo. Y cuando tengas un botón de enviar y recuerda que ese tipo de botón no puede ser botón. No se puede restablecer, tiene que ser Enviar. Por lo que al enviar este formulario haciendo clic en el botón, impidió hacer lo normal también. Hay dos formas de evitar que se envíe el formulario. Y también recuerda, cuando envíes tu formulario aquí, cuando impidas que sea enviado. Normalmente lo que hacemos es agarrar esta información de como un campo de texto de entrada en cualquier otro lugar. Y trabajamos con esa información primero y luego tal vez en realidad la enviamos usando JavaScript o tal vez no lo hacemos. A lo mejor enviamos esa información fuera y ajax o un endpoint API. Independientemente. Si esto es bueno saber que esto es bueno meter en tu bolsillo trasero. Y event dot prevent default es muy, muy popular. Vas a ver esto en todas partes y esto en realidad es honestamente, esto es solo JavaScript. Esto ni siquiera es jQuery. Así que adelante y dale un tiro a eso cuando termines, hablemos de ocultar elementos. 19. Elementos ocultos: De acuerdo, hablemos de ocultar elementos. Entonces primero lo primero, voy a necesitar mostrarte lo que tengo en mi página. Tengo esta caja en mi página, y es solo una caja negra 100 por 100. Y este es el CSS para ancho 100, altura uno, altura 100, color de fondo es negro. Eso es todo. Y luego tengo un botón que dice click me. Y entonces en realidad solo estoy aplicando la caja usando CSS aquí. Y cada vez que hacemos clic en este botón, hagamos que esta caja se esconda. Y así necesitamos un oyente de eventos para esto. Adelante y seleccionemos ese botón por su ID. Haga clic conmigo. Dot on. Haga clic. Función. Podemos pasar un E o evento y hacer e dot prevenir default si quisiéramos, si esto fuera en una forma que sería útil. Actualmente, esto no es útil porque no está dentro de una forma. Pero si lo fuera, ya sabes, esta es una buena medida para tomar. Y luego podemos seleccionar esa casilla. Puedes seleccionar esa casilla. Y se puede ver porque esto es jQuery VS Code está agregando todo tipo de cosas y no vamos a pasar por todo esto. Aquí hay mucho, pero lo que queremos hacer es seleccionar esta casilla y queremos ocultar esta caja. Y eso es todo lo que vamos a hacer. Entonces cuando refresque esta página, boom, la esconde, voy a refrescar de nuevo. Y veamos qué sucede aquí en nuestros elementos. Esta caja justo aquí, esto es importante para prestar atención en la parte inferior aquí. Simplemente no muestra ninguno. Eso es todo lo que hace. Entonces si quieres ocultar ciertas cosas, puedes hacerlo con la altura de punto selector. Ahora simplemente envolvemos esto en un oyente de eventos, en un oyente de eventos de clic. Entonces dijimos, cada vez que hagas clic en ese botón, luego selecciona la casilla y ocultarla. No tenemos que hacer eso. Podemos hacerlo bien cuando la página se carga también. Entonces cuando cargamos la página, se puede ver que parpadea porque en nuestro código fuente aparece y sabemos que va a aparecer en nuestro código fuente. Va a parpadear y luego jQuery va a patear y va a decir, oh, en realidad, vamos a deshacernos de él. Vamos a esconderla. No lo estamos borrando del DOM. Nos estamos asegurando de que aún podamos acceder a él más adelante. Por lo que no se está quitando, no se está borrando, simplemente se está ocultando. Lo que me gustaría que hicieras es seguir adelante y darle una oportunidad a eso, pero quiero que escribas un oyente de eventos con él. Acostumbrémonos a escribir oyentes de eventos porque de eso se trata jQuery. Se trata de oyentes de eventos. Entonces bien, un oyente de eventos en un botón, cada vez que haga clic en ese botón, oculte la caja. Cuando terminaron eso, en la siguiente lección, vamos a ir a hacer visible esa caja de nuevo. 20. Muestra elementos: De acuerdo, así que esto sólo es despegar de la última lección. Este es el ejemplo exacto de la última lección. Entonces tenemos un botón y una caja, y cuando guardamos y actualizamos la página, esto es lo que tenemos aquí. Ahora, voy a asegurarme de que esta caja esté realmente oculta por defecto, voy a usar display non-block, pero display none. Esa caja no aparece. Es solo, está ahí, está en el DOM, pero es simplemente invisible. Entonces lo que podemos hacer es cuando hacemos clic en este botón en lugar de escondernos, podemos hacer que los puntos se muestren. Y esto también es realmente importante. Vamos a mantener un ojo en esto aquí abajo, vamos a refrescar esta página. Y aquí abajo vamos a ver bloque de exhibición. Y por lo que automáticamente asumió que era un elemento de bloque y fue por bloque de exhibición. Y así se acaba de mostrar el elemento. Y en realidad no debería decir altura aquí arriba, así que es un elemento de espectáculo. Mostrar ese elemento. Ahí vamos. Eso es todo lo que hay a ello. Bonito y dulce. Se parece mucho a esconderse y mostrar. Entonces tenemos que escondernos para ocultar algo y luego mostrar para mostrar algo. Ahora como el ejemplo completo, podríamos seleccionar id. Click Me, eso va a seleccionar este botón. Escribamos el, la antigua forma en que podíamos hacer función. Y esto es simplemente sintaxis diferente y estamos usando el punto sobre sintaxis generalmente, pero podemos hacer un evento click aquí. Entonces podríamos seleccionar esa caja y no ocultarla, pero podríamos mostrarla. Y funciona para nosotros cada vez. Adelante y dale un tiro a eso cuando termines, vamos a meternos en algo un poco más divertido. Vamos a empezar a agregar clases CSS a nuestros elementos. Por lo que al hacer clic en un botón, podemos agregar una clase al elemento para que se vea un poco diferente. 21. Agrega clases de CSS: Echemos un vistazo a cómo podemos agregar dinámicamente una clase a un elemento existente. Entonces tengo algo de CSS aquí arriba, y vamos a deshacernos de eso. Acabo de tener una caja con un 100 altura 100 fondo color negro. Sigamos adelante y cambiemos esa clase o añadamos una clase en lugar de cambiar ese color de fondo para que sea, digamos azul. Entonces podríamos decir que hay una clase llamada azul, y simplemente va a tener un color de fondo de azul. Ahora, necesito que estos elementos de caja realmente existan. Y en mi jQuery aquí, simplemente puedo decir punto box, dot add class blue. Y antes de hacer eso, en realidad, sigamos adelante y solo trabajemos un poco con clases. Trabajemos con los identificadores en lugar de los que se ha trabajado con las clases. Entonces tenemos clase box, box, box, box, box, y cambiemos eso a dot box. Entonces ahora cuando refresco mi página, mi caja negra se pone azul y ahora es, se puede ver, deja que destella realmente rápidamente. Pero cambiaba mi caja para ser azul. Y en realidad podemos ver esto en como un ejemplo real aquí es que podemos eliminar este DOM interno. Y así es como se ve por defecto. Y lo único que estamos haciendo es añadirle azul. Ahora, sigamos adelante y envolveremos esto en algún tipo de tiempo de espera. Entonces hagámoslo establecer el tiempo de espera. Y podríamos darle una función a esto. Y hagámoslo tiempo de espera por dos segundos. Y luego selecciona la casilla y agrega la clase azul. Entonces cuando refresque la página aquí, va a esperar sólo dos segundos, y luego se va a poner azul. Ahora si queremos escribir JavaScript moderno, no necesitamos usar una función ahí. Simplemente podemos usar una función de flecha que va a hacer exactamente lo mismo, refrescar, esperar dos segundos, se pone azul. También podemos envolver esto en cualquier tipo de oyente de eventos que queramos. Por lo que podríamos decir algo así como el botón cuando se hace clic. Función. O porque no necesitamos la palabra clave this, podemos hacer una función de flecha. Y vamos a deshacernos de eso y a subir eso. Y debido a que tenemos un oyente de eventos de botón, necesitábamos botón en la página. Entonces sigamos adelante y agreguemos ese botón. Botón. Haga clic conmigo. Y cuando hacemos clic en este botón, se va a seleccionar esa casilla y añadir una clase de azul. Adelante y refresquemos. Haga clic. Y algo no está bien aquí. Y eso es porque escribo clicado, se supone que es click. Así que refresca. Haga clic. Ahí vamos. Refrescar, click, cambia, refrescar, click, cambia. Aquí podemos hacer todo tipo de cosas y podríamos cambiar el ancho también. Entonces es un ancho 100, y esto simplemente va a cambiar el ancho para ser 100%. Y así podemos agregar clase azul. También podemos agregar ancho de clase 100 y refrescar. Y cambia su a ser ancho del 100%. Yo quiero que le des una oportunidad a esto. Prueba esto. Esto va a ser muy, muy importante. Vas a estar usando mucho esto en JavaScript vainilla así como jQuery regular. Por lo que vas a querer poder agregar una clase. Puedes agregar múltiples clases simplemente agregando un espacio ahí dentro. Y jQuery lo averiguará y le agregará esas clases. Envuelva eso en un oyente de eventos si no necesita el, esta palabra clave, lo estoy diciendo así. Si no necesitas eso dentro de tu función, simplemente puedes escribir una función de flecha también. Es solo un poco más de rendimiento, un poco más moderno JavaScript. Y luego puedes seleccionar tu caja o tu elemento. Y luego puedes agregar una clase de lo que sean tus clases. Por lo que vas a necesitar saber un poco de CSS para esto. Si realmente no conoces CSS, está bien. Solo puedes pausar el video aquí y copiar lo que tengo en mi pantalla. Simplemente tengo una caja, clase box. Tengo clase azul, cualquier clase ancho 100. Y todo lo que está haciendo va a ser agregar estas clases. Y de nuevo, cuando inspeccionamos, ahora tenemos clase box azul y ancho 100. Adelante y dale una oportunidad a eso. Y cuando estemos listos, cuando estemos amables y listos. Sigamos adelante y tomemos este ejemplo exacto y hagamos exactamente lo contrario donde eliminemos una clase. 22. Eliminación de las clases de CSS: De acuerdo, en este ejemplo, sigamos adelante y eliminemos la clase azul y eliminemos la clase de ancho. Y así lo que tengo aquí es un elemento con tres clases sobre él, box blue y width 100%. Esto es apenas despegar de esa última lección en la que estábamos agregando una clase. Y esta es mi caja azul final con CSS que hemos hecho aquí. Entonces ahora lo que quiero hacer es registrar dos eventos de click diferentes. Al hacer clic en Eliminar azul, quita el azul de aquí. Y cuando quites ancho, quita la clase width 100. Y así podemos ponernos un poco de fantasía con esto. Por lo que en lugar de seleccionar cuadro varias veces, podemos seleccionarlo una vez. Entonces podemos decir const box es igual a, y sólo vamos a conseguir la caja en sí como clase. Y esto es sólo un selector sencillo. También podemos hacer const, quitar azul es igual quitar azul que va a seleccionar ese botón. Y quitar ancho se va a quitar el ancho. Y así estos son solo selector. Por lo que he seleccionado la caja quitada azul y quitar ancho. Ahora aquí lo que quería hacer es cuando haces clic Eliminar azul, selecciona esa casilla y quita esta clase. Y lo podemos hacer con bastante facilidad. Podemos decir Eliminar punto azul onclick, function, vox dot remove class. Eso es todo lo que es, sólo la palabra quitar clase. Y luego queremos quitarle el azul. Está adelante y dale una oportunidad a esto. Y cuando quitamos el azul. Y tan en realidad como, como mejor ejemplo aquí, aquí abajo tenemos una caja azul ancho 100. Podríamos hacer quitar el azul y se deshace de él por nosotros. Después podemos hacer clic en otro botón y quitar el ancho. Y así lo que estoy haciendo con estos conceptos aquí es en lugar de seleccionar casilla numerosas veces. Entonces en lugar de tener que seleccionar eso y ponerlo ahí, puedo seleccionarlo solo una vez porque realmente solo necesito seleccionarlo una vez. Y luego en un segundo oyente de eventos podemos hacer exactamente lo mismo. Por lo que podemos decir Eliminar ancho, punto en click. Y como no necesitamos la palabra clave esta en absoluto, podemos hacer una función de flecha y podemos decir Box dot remove class width. Y eso no va a ser, va a ser ancho 100. Queremos quitar esta clase. Adelante y refresquemos. Cuando quitemos el ancho, esta va a ser una caja perfecta. Cuando quitamos el azul, ahora es negro. Y entonces eso es realmente todo lo que hay. Lo único que realmente necesitamos quitar de esta lección en particular es quitar broche. Así que adelante y dale una oportunidad a eso. Quitar Clase, quitar una clase, y sólo tratar de que funcione para usted. Sólo debería llevarte unos minutos o dos y cuando estés listo, vamos a pasar a la siguiente lección donde en realidad alteramos las clases, porque en este momento no podemos detectar fácilmente si una clase tiene una clase azul o un ancho 100. Realmente no podemos detectar si un elemento tiene esas clases más bien. Entonces lo que podemos hacer es que podemos encenderlos y apagarlos con una característica jQuery muy sencilla. 23. Toggling las clases de CSS: En la última lección, creamos algún tipo de caja y le dimos un ancho de un 100%. En este, sólo tenemos una plaza perfecta. Y lo que queremos hacer es toggled azul. Por lo que queremos, cada vez que hacemos clic en este botón, deshacernos del azul, y luego volver a hacer clic en él y ponerlo en azul y hacer clic en él y simplemente activarlo y desactivarlo. Y así podemos hacer eso creando, en primer lugar, un evento de click. Por lo que queremos seleccionar la clase azul toggle. Y eso es justo aquí arriba. Queremos platicar todos. Queremos seleccionar ese botón, punto en función click. Y debido a que en realidad no necesitamos la palabra clave esta, podemos hacer función de flecha. Entonces simplemente podemos decir la caja que hemos seleccionado aquí arriba, toggle class blue, y eso es todo. Y así si jQuery reconoce que ya hay una clase azul, se la va a quitar. Y si reconoce que no hay clase azul, la va a agregar. Y así vamos a seguir adelante y darle una oportunidad a esto, refrescar nuestra página, y ver esto aquí abajo donde dice pavos azules. Cada vez que hago clic en este botón encendido y apagado, encendido y apagado, encendido y apagado, así como así. Y eso es todo lo que realmente hay. Es así como activamos y apagamos la clase. Ahora bien, ¿dónde es aplicable esto? Bueno, si necesitas esconderte y mostrar algo o si quieres hacer algo, Actúa por cierta otra cosa. Y en realidad como mejor ejemplo, vamos a seguir adelante y deshacernos de esto y vamos a crear una entrada. Para una entrada. Y siempre que tengamos este insumo, vamos así. Cuando tengamos, cuando tengamos este insumo y tecleemos, sigamos adelante y comprobemos este valor. Y luego si ese valor es un nombre en particular, cambiemos el toggle, la clase a azul. De lo contrario el cambiarlo a no azul. Entonces sigamos adelante y obtengamos este valor. Por lo que const val u es igual a este punto val. Ahora te das cuenta de que estoy usando la, esta palabra clave aquí. Por lo que ahora necesitamos escribir función. Podemos decir si el valor es igual a Caleb, Podríamos decir Añadir clase. De lo contrario, box dot, quitar clase azul. Ahora realmente no estamos usando toggle aquí en el sentido de que no estamos usando la función toggle, pero estamos alterando clases eliminando un agregándolas. Y una cosa que tenemos que hacer es que las funciones no tienen funciones de flecha, es solo la palabra clave function. Sigamos adelante y actualicemos aquí nuestra página. Y si tipeo, Jacob no funciona, si tipeo gully no funciona si tipeo, Caleb, boom, se vuelve azul. Y ahora puedo cambiarlo así como así y escribiendo realmente cualquier otra cosa. Entonces esas son dos formas en las que podemos cambiar en función de diferentes oyentes de eventos. Ahora lo que me gustaría que hicieras es seguir adelante y probar clases de toggle. No tienes que hacer todo este ejemplo aquí. Este ejemplo es, sí, bastante grande y no súper relevante para esta clase. Pero asegúrate de seguir adelante y usar la función de clases de toggle aquí con un selector. Por lo que podrías hacer box dot Togo clase azul. Adelante y dale una oportunidad a eso cuando termines, sigamos adelante y agregamos CSS personalizado, no una clase, pero agreguemos CSS personalizado a un elemento. 24. Agrega CSS personalizado: Sigamos adelante y agreguemos CSS personalizado a un elemento en particular. Entonces en esta lección, lo que vamos a hacer es agarrar esta caja y le vamos a agregar CSS. Y no vamos a añadir una clase, no vamos a quitar una clase. Vamos a añadir CSS dinámico. Por lo que en realidad podemos básicamente correcto. El estilo es igual a ancho 100%, por ejemplo, podemos hacer que eso suceda con JavaScript y jQuery. Entonces lo primero es lo primero, necesitamos agarrar nuestro elemento de caja. Entonces hagámoslo caja de puntos. Y todo lo que tenemos que hacer es escribir dot CSS. Y esto es realmente genial porque podríamos hacer color de fondo, azul, y esta sintaxis es un poco interesante. Entonces lo que estamos haciendo aquí es que estamos diciendo dot CSS, el primer valor en esta función va a ser, ¿qué queremos cambiar? ¿ Qué propiedad CSS queremos cambiar? Y luego queremos cambiar el valor real. Entonces podemos cambiar eso a azul, pero sigamos adelante y cambiemos esto a naranja. Y se puede ver que en realidad carga negro y luego cambia a naranja. Y se puede ver aquí, el estilo background-color es igual a naranja. Ahora si revisamos nuestro código fuente, hacer, hacer, hacer, hacer, hacer, hacer, hacer. ¿Dónde estamos? No hay atributo de estilo en su jQuery agregó dinámicamente que para nosotros. Ahora si quisiéramos, podríamos hacer múltiplos. Podríamos hacer punto CSS, borde, coma, diez píxeles, negro sólido. Y eso lo cambió dinámicamente para nosotros. Podríamos hacer otro. Podríamos hacer CSS de punto, radio de borde, coma 50%. Y ahora lo convierte en un círculo naranja con un borde negro, en lugar de ser solo un cuadrado negro regular. Y este tipo de nos lleva un poco a Animaciones, que hablaremos más de por el camino. Ahora hay una mejor manera de hacer esto. Podríamos comentar eso fuera y podríamos hacer punto CSS. Y podemos darle a esto un objeto. Ahora cuando le damos a esto un objeto, no tecleamos color de fondo porque se supone que los objetos no tienen guiones en sus nombres. Hacemos fondo, y luego camelCase It color. Entonces mira la diferencia entre éste y éste. punteado de fondo versus color de fondo con un C. mayúscula Y vamos a seguir adelante y cambiar esto a amarillo. Cambiemos la frontera. 210 pixels, azul sólido. Y cambiemos el radio fronterizo. Observe la capitalización ahí y no hay un radio de borde de guiones para ser de diez píxeles. Y así este es solo un objeto JavaScript regular. Sigamos adelante y guardemos eso y refresquemos y miremos eso. Podemos cambiarlos todos de una sola toma o podemos encadenarlos juntos si quisiéramos. Ahora lo que me gustaría que hicieras es probar ambos métodos. Intentó encadenarlos juntos. Entonces tienes la primera y luego tienes una segunda, luego tienes una tercera y luego comentas esas. Y básicamente no los encadenes juntos, solo cámbialos todos exactamente al mismo tiempo Porque en este momento jQuery tiene que ir aquí, cambiar en, Leer el estilo ir aquí, cambiar. Había leído el estilo ir aquí, leí ese estilo de género versus entrar en este método donde sólo lo estamos dando todo. Podemos decir, oye, jQuery, lidiar con todo de una vez. En lugar de hacer tres tareas diferentes, haz una gran tarea. A continuación, vamos a aprender sobre cómo desvanecer las cosas y desmayar las cosas. 25. Enfocar y desvanecer: Echemos un vistazo a cómo podemos desvanecer un elemento adentro y desvanecerse elemento. Entonces en esta lección voy a usar mi consola. Y esto es una cosita genial porque en mi código aquí, estoy usando un CDN. Tengo acceso a ese pequeño signo de dólar, eso significa jQuery, ese pequeño signo de dólar. Y así puedo seleccionar esta casilla, puedo decir const. Sí, hagámoslo const. Box es igual a y darle un selector. Y cuando escribo cuadro de signo de dólar , me da a esta caja todo el elemento. En realidad es una lista de nodos técnicamente, pero solo hay uno ahí dentro, así que podemos trabajar solo con uno. Está totalmente bien. Ahora para desvanecerse algo en un out, todo lo que tenemos que hacer es doe dot box fade in. En realidad ya se desvaneció. Las entradas se desvanecen y se desvanece. También podríamos hacer caja de puntos, punto se desvanecen y se desvanece. También podemos darle un tiempo de espera o no un tiempo de espera sino un temporizador. ¿ Cuánto tiempo debe tardar esto en desvanecerse? Digamos que esto va a tomar 4.5 segundos. Entonces hacemos 4500 milisegundos, así que eso son 4.5 segundos se desvanecen y se va a ralentizar. El faedo. Podemos hacer lo mismo con fade in. desvanece, lentamente se desvanece. Y en realidad hay otra cosa genial que podemos hacer es que podemos darle a esto una función de devolución de llamada, hablará de las funciones de devolución de llamada un poco más tarde, pero podemos decirle que haga algo cuando se haga desvanecerse, es hecho de desvanecerse. Entonces lo que quiero que hagas es que no escribas tu código necesariamente en tu editor esta vez. Adelante y solo abre tu consola. Siempre se puede hacer clic derecho, inspeccionar. Haga clic en la pestaña Consola. Selecciona tu caja como lo hicimos. Tenemos cajas const iguales a esa caja. Y luego hicimos caja que se desvaneció, box dot fade-in. Dale a eso una toma una vez que esté funcionando para ti, vamos a pasar a la siguiente lección, donde aprendemos a cambiar un desvanecimiento y cambiar una pantalla. 26. Toggling fades y muestras: Vamos a seguir adelante y cambiar un fundido, un efecto de desvanecimiento, y unos efectos de visualización. Por lo que necesitamos hacer dos cosas diferentes aquí. Antes de nada, necesitamos algún tipo de oyente de eventos. Haga clic en Me, y es sólo un botón sencillo. Entonces sigamos adelante y registremos este botón como evento de click. Botón. Función Dot on click. Y así es como registramos al oyente de eventos click. Entonces necesitamos seleccionar esa casilla. Y podemos hacer toggle. Y podemos hacer fade toggle. Y esto o va a desvanecerse o desvanecerse dependiendo de lo visible que sea. Entonces vamos a seguir adelante y darle una oportunidad a esto. Cuando hacemos clic en esto, se desvanece, se desvanece así. Y podemos ver aquí hay un atributo de estilo y verlo. Cuando haga clic en esto, se va a desvanecer. Y cambia la opacidad a 0, y luego cambia la pantalla a ninguna. Y cuando vuelve a desvanecerse, cambia la UPC. Se desplaza esa copia de seguridad a uno o a un 100% y lo hace display block o en realidad simplemente se deshace por completo de la propiedad display. Podemos ver que es display ninguno. Y va a ser lo que le dije que fuera antes. Entonces si es inline-block, va a ser inline-block. Si se muestra bloque o flexbox, va a ser flexbox, va a ser lo que lo establezcamos para que sea en CSS. Para que podamos desvanecernos toggle. Otra cosa que podemos hacer es simplemente cambiar. Esto lo va a cambiar para que se muestre o para que no se muestre. Entonces simplemente, así como eso, Eso es todo lo que estamos haciendo. Estamos haciendo clic en él. Y cada vez que hacemos clic en él, o bien lo hace visible o lo hace invisible. Eso es todo lo que está haciendo. la misma manera que un recapitulación, toggle va a utilizar básicamente ocultar y mostrar. tanto que fade toggle va a usar fundido de entrada y de salida. Adelante y dale una oportunidad a eso. Intenta desvanecer toggle y prueba regular toggle. Estos van a ser útiles cuando creas sitios web interactivos para las personas. Cuando alguien hace clic en algo, ¿se hace visible? ¿Si hacen clic fuera de ella? ¿ No se hace visible como un sistema de menús, como un sistema de menús desplegables. Al hacer clic en el pequeño ícono que sugiere que podrías tener un menú y desciende. A lo mejor quieres cambiar. Entonces hay, hay muchas formas diferentes en las que usaríamos esto. No, honestamente desvanecerse y desvanecerse ya no se usa con demasiada frecuencia. Sólo porque se ve un poco cursi, pero, ya sabes, tal vez en un par de años a partir de ahora que toda la web, todo el internet decide desvanecerse y desvanecerse es algo que queríamos hacer de nuevo. En la siguiente lección, sigamos adelante y hablemos de deslizarnos arriba y deslizarnos hacia abajo como otra forma de animación. 27. Desplazar y abajo: De acuerdo, hablemos de deslizarse hacia arriba y deslizarse hacia abajo. Verdadero fácil aquí esto se parece mucho a desvanecerse y desvanecerse. Por lo que tengo un botón aquí está registrado como un evento click. Y quiero deslizar esta caja hacia arriba y deslizarla hacia abajo. Entonces al igual que una pregunta de preguntas frecuentes, una sección de preguntas frecuentes en un sitio web y FAQ. Por lo que podemos seleccionar esta casilla siempre que se haga clic en el botón. Y podríamos decir deslizarse hacia abajo o podemos decir deslizarse hacia arriba. Entonces, primero que nada, SlideUp, deslizarse hacia arriba va a ocultarlo. Refrescar. Se, se desliza hacia arriba. Bastante aseado, ¿verdad? También podríamos hacer deslizamiento hacia abajo, lo cual sólo va a deslizarlo hacia abajo y hacerlo visible. O podemos deslizar el toggle y eso lo va a cambiar para deslizarse hacia arriba y deslizarse hacia abajo. Entonces sigamos adelante y refresquemos. Arriba, abajo, arriba, abajo. Entonces esta es una lección corta. Honestamente, en este punto probablemente ya no necesites practicar esto. Simplemente mantén esto escondido en tu bolsillo trasero. Slide toggle. Puedes deslizarte hacia arriba y puedes deslizarte hacia abajo. Vas a usar este más que un desvanecimiento de entrada y de salida seguro. Entonces si quieres un poco de experiencia, sí, definitivamente ve y crea un ejemplo como este. Incluso puedes simplemente robar mi ejemplo aquí. De lo contrario, pasaré a la siguiente lección donde hablamos de las funciones de devolución de llamada. 28. Funciones de llamada: De acuerdo, hablemos de las funciones de devolución de llamada. En una función de devolución de llamada. Realmente todo una función de devolución de llamada es, es una función de una pequeña pieza de código que debería ejecutarse después de que algo se haga corriendo. Entonces por ejemplo, tenemos un selector aquí y dijimos Registrar un oyente de eventos de click. Y en cualquier momento que se supone que se ejecute, ejecute esta función, esa es una función de devolución de llamada. Entonces, una vez que pasa un clic, haz una cosa. También podemos lago seleccionar nuestra caja de nuestra lección anterior. Y podríamos decir algo así como desvanecerse. Y podríamos dar este parámetro, digamos que va a tomar 1.5 segundos. Y entonces podríamos darle a esto una función también. Y esta es una función de devolución de llamada. Y así le dimos un parámetro, cuánto tiempo debería tomar la función de coma y luego sólo una función regular aquí. Y entonces podemos decir consola dot log. Fade-out está completo. Vamos a darle una oportunidad a esto y vamos a nuestra consola aquí. Se va a desvanecer. Fade out está completo. Y podemos hacer esto con un montón de cosas diferentes que podríamos hacer se desvanecen y podríamos hacer deslizarnos hacia arriba. que, como fatal, está completo. Esto debería haber dicho que la diapositiva es botón completo independientemente, la función de devolución de llamada aún funciona. Y así realmente todo lo que estamos haciendo aquí es si simplificamos un poco esto, estamos diciendo que selecciona la caja, deslízate, toma 1.5 segundos cuando termines que el log de consola esté completo o SlideUp está completo. Podemos hacer esto con mucha animación diferente. Entonces tenemos diapositiva, podríamos hacer desvanecimiento. Podríamos usarlo con togas también. Por lo que a medida que cambias, desvanecimiento va a tardar 1.5 segundos en desvanecerse o desvanecerse. Y el efecto de desvanecimiento es completo. Y así vamos a seguir adelante y hacer clic en esto. Ah, algo no está bien aquí. No se altera, se desvanece, se desvanece toggle. Eso lo hago al revés cada vez y de vez en cuando. Y así todo lo que hizo fue desvanecerse automáticamente porque ya era visible. Ahora vamos a envolver esto en un oyente de eventos. Seleccione ese botón, punto en la función click. Debido a que, debido, y los ves yendo bastante rápido aquí se pone, se pone mucho más fácil con el tiempo. Y puedes ver esto empezando a ser un patrón en jQuery, tenemos un selector, hacemos una cosa, un Selector de Funciones, hacemos una cosa, hacemos una cosa ahí mismo. A Selector de Funciones, hacer una cosa, una función. Y vamos a seguir adelante y deshacernos de esto. 1500 milisegundos o 1.52, se desvanecen, se apagan. Y vamos a darle una oportunidad a esto para darle un click. desvanece. El efecto de desvanecimiento está completo. Lo puedes ver ahí abajo. Perfecto. Mira eso. Eso está funcionando exactamente de la forma en que queremos que funcione. Ahora una función de devolución de llamada es realmente útil si algo se desvanece, tal vez quieras luego eliminarlo. Entonces hagámoslo, hagámoslo desvanecemos. Y podemos hacer este punto remover. Y así una vez que esto se desvanezca, porque ahora mismo se puede ver que si hacemos clic en esto, se va a desvanecer. Todavía está en realidad en nuestro DOM. A lo mejor queremos que se quite por completo por la razón que sea. Podríamos hacer click en esto. Y te das cuenta de que en realidad te quita por completo del modelo de objeto de documento. Entonces mira esto aquí abajo. Vigile que desaparezca, se remueva por completo. Y ahora no podemos hacer clic en esto si se vuelve inútil. Entonces si necesitas un evento de una sola vez, esa es una buena manera de hacerlo. Ahora en realidad no necesitas practicar nada con funciones de devolución de llamada. Hemos estado escribiendo funciones de devolución de llamada todo este tiempo. Tan poco de sorpresa que son funciones de devolución de llamada, eres más o menos un gran maestro Wizard at callback funciones en este punto en el tiempo. En la siguiente lección, hablemos de agregar nuestras propias animaciones. 29. jQuery: De acuerdo, hablemos de animaciones. En jQuery. Podemos animar ciertas cosas y no podemos animar ciertas cosas. Entonces cualquier cosa que tenga un valor numérico podemos animar. Entonces un ancho de 500 y por ejemplo, es un valor numérico. Y podemos sumar a recluso eso hasta cuatrocientos trescientos diez si quisiéramos. Un color no es necesariamente un numerado es una mezcla de números y letras. Es como el negro es 000000 o F, F, F, F, F, F, Y eso es blanco. Podríamos hacer un F5, F5, F5. Y una computadora simplemente no sabe realmente, ya sabes, forma nativa cómo desplazar esto hasta F, F, F, F, F, F, F, o hasta 000000. Pero si tienes un ancho de 500, bueno, eso es simplemente decrementar el podrías cambiarlo de 500 a 400 yendo a 499, luego 498487 para 9645, etcétera, etcétera, etcétera. Aquí hay un orden lineal de operaciones. Entonces sigamos adelante y animemos nuestra caja. Entonces cuando hacemos clic en este botón, tenemos un botón aquí arriba que dice Click Me, registrado, click event. Seleccionemos esa caja y animémosla. Para que pudiéramos hacer algo así como caja de puntos animate. Y esto va a tomar un objeto. Y así aquí podemos decir que la opacidad es actualmente es una que podríamos cambiar que a Lake es 0.5. el ancho actualmente está establecido en 100 pixels. Y sólo porque diga píxeles no significa que no sepa trabajar con un número y sepa dividir esto y decir, vale, el ancho actualmente es un 100, y también son píxeles. Entonces cambiemos eso a quinientos, quinientos píxeles porque necesitamos la medición ahí dentro. Adelante y refresquemos. Y se anima muy bien. Es agradable y suave y funciona perfectamente para nosotros. Y si quisiéramos, podríamos frenar esto también. Podríamos decir animar esto a lo largo de cuatro segundos o 4 mil milisegundos. Y toma su tiempo, así como así. Ahora lo que no va a funcionar es si queríamos cambiar ese color de fondo, color de fondo. Si queríamos cambiar mi color de fondo a azul, simplemente no sabe pasar del enlace negro al azul. ¿ Cuál es la definición o cuál es la función o cuál es la lógica lineal detrás de cambiar un color a otro? Hacerlo lucir animado. Al igual que pasa de negro a rojo a azul o de negro a morado a azul o de negro a blanco a azul. Al igual que una computadora simplemente no sabe eso. Pero una computadora sabe trabajar con números duros con bastante facilidad. Entonces vamos a ver que cambiar el color de fondo aquí a azul simplemente no va a funcionar. Se va a desvanecer. Va a ser gris. Eso no es absolutamente azul sin embargo. Tu tarea para esta lección es seleccionar un elemento y animarlo. Podemos deshacernos de eso. Puedes darle un objeto con lo que quieras cambiar al valor de Ed. Entonces ancho, altura, capacidad, cualquier cosa por el estilo. Incluso tu tamaño de fuente si quisieras. Y luego darle algún tipo de duración. ¿ Cuánto tiempo debe tardar esto? ¿Para mí? Dije que te tomaría cuatro segundos. A lo mejor querías tomar 1 segundo o 20 segundos, o tal vez quieras que cambie para ser completamente vero-atravesado. Por tiempo te consigue un 100% y esto debería tardar cinco segundos, te dará algo así a, este es uno de esos momentos en los que es bueno divertirte solo para retocar con él. Y, ya sabes, no tienes que hacer nada en particular. Solo necesitas asegurarte de que cambie algo con un valor numérico. Y de nuevo, estamos usando CSS aquí. Javascript, CSS, y HTML funcionan muy bien juntos. Todos están diseñados para trabajar el uno con el otro. Y también ten en cuenta, sólo se puede trabajar con números duros reales. El 100% es un número, azul no es un número. Adelante y diviértete un poco con eso en el próximo par de lecciones, hablemos de Dimensiones de ancho y dimensiones de altura. 30. Dimensiones de anchura: Hablemos de las dimensiones de altura. Por lo que tenemos esta cosa llamada Document Object Model. Y cuando hacemos clic derecho en esa caja y la seleccionamos por aquí, bajamos. Podemos ver que tenemos margen, relleno de borde y el tamaño real del elemento en sí. Podemos comprobar para ver cuál es ese dimensionamiento. Para que podamos seleccionar esa casilla. Hagamos cajas const iguales a caja de puntos. Y entonces podríamos hacer box dot. Hemos tenido algunas cosas diferentes. Hemos tenido ancho y ancho exterior. Entonces si echamos un vistazo al ancho aquí, que en realidad es una función. Entonces siempre que veas esta pequeña f rizada aquí, eso usualmente significa que es una función. Eso normalmente significa que simplemente olvidaste tus paréntesis. Por lo que mi ancho de caja es actualmente 100. Y sigamos adelante y veamos si puedo sacar esto. Ahí vamos. También podemos hacer la caja. La altura también es de un 100. Podemos hacer la caja. El ancho exterior es un 100. También podemos hacer el ancho interior de la caja es un 100. Y vamos a ver que las tres cosas son iguales, pero en realidad son diferentes. Y esto depende del modelo de caja. Y así si volvemos aquí y lo que quiero hacer es añadir un poco de relleno. A 100 pixeles. No, no hagamos un 100. Eso es mucho. Hagamos 20. Y hagamos un margen de 20 píxeles también. Y vamos a ver que esto baches el elemento y en realidad hizo que el elemento se viera un poco más grande. Entonces ahora si vuelvo a subir, selecciona mi caja, y podría hacer box dot width. Ahora es un 100. Ese es el interior. El interior es un 100. Y vamos a ver si pasamos a elementos que aquí adentro son 100. Ahora vamos a hacer box dot, ancho interior. Es 140. Bueno, ¿de dónde sacamos 1 cuarto? Si volvemos a los elementos, podemos ver que aquí hay un relleno. Esta es toda la caja en sí, el ancho interior de la caja. Entonces tenemos un 100 y luego tenemos 20 de ambos lados. Por lo que 100101140. De ahí sacamos un 140. Ahora podemos hacer el ancho exterior también, Box dot odor width. Ahora estamos mirando el ancho exterior aquí. Y luego el ancho exterior tiene dos opciones aquí. Entonces tenemos ancho exterior regular, ancho olor, y este es el exterior aquí. O podemos hacer ancho exterior, cierto. Y lo que eso va a hacer es tomarlo todo, incluyendo el margen. Entonces hemos tenido ciento veintiuno cuarenta y uno sesenta, uno ochenta, y de ahí estamos sacando un 180. Ahora lo que me gustaría que hicieras para esta lección en particular es no te preocupes por el ancho, ancho interior o el ancho exterior. Lo que quiero que hagas es hacer lo mismo con la altura. Así que agarra tu elemento Box y luego haz la altura interior, o simplemente la altura o la altura exterior, y pruébalo con true ahí dentro. Dale una oportunidad a eso. Y prueba con diferentes tamaños. Haz tu caja de diferente tamaño. Tampoco tiene que ser una plaza perfecta. Y entonces lo que quiero que hagan es que seleccione toda su ventana, esa es toda su ventana gráfica, y luego haga ancho y alto. Ahora, así como una cabeza arriba, mi altura es muy baja sólo porque estoy súper zoom aquí. Si no me acercara, esto sería significativamente mayor que 289. Adelante y dale una oportunidad a esto. Estos son importantes cuando estás trabajando con posicionar cosas en tu página usando JavaScript. Por lo que vas a necesitar saber cómo funcionan estos cuando termines eso, vamos a pasar a la siguiente lección donde hablamos un nuevo oyente de eventos donde comprueba para ver si estamos redimensionando nuestra página en absoluto. 31. Resizing el evento de ventana: Hablemos de cambiar el tamaño de la ventana. En este momento, siempre hemos tenido algún tipo de selector en un conjunto de cotizaciones como nuestra caja. Pero también podemos establecer un selector para que sea tu ventana o tu documento. Y así para esto, queremos ver cambiar la ventana gráfica. Ahora esa ventanilla es toda esta área blanca. ¿ Qué tan grande es eso exactamente? Y como que miramos esto en la última lección cuando hicimos box dot elder con Box dot, ancho interior y altura de ventana, punto de ventana con cosas así. ¿ Qué pasa cuando cambiamos el tamaño de nuestra página? Bueno, podemos tomar diferentes acciones en función de diferentes tamaños de ventana. Entonces sigamos adelante y hagamos Window dot on, función de cambio de tamaño, console.log. Y luego queremos console.log el ancho de la ventana. Y por eso te hice hacer esto en la última lección. Ancho de punto de ventana por altura de punto de ventana. Y así vamos a abrir nuestras herramientas aquí y eso es redox esto y refrescar la página. Y cada vez que muevo esto, se puede ver que esos números están cambiando. Y la altura no está cambiando, pero el ancho está cambiando, el ancho es cada vez más pequeño y más pequeño. Y entonces no, podemos hacer algo en base a esto. Podemos decir si el ancho de página es menor que, digamos que 230 cambió el color de fondo a negro. Ahora bien, este no es un ejemplo muy feo, pero este es un buen ejemplo de práctica. Entonces sigamos adelante y deshacernos de eso. Y podemos decir si el ancho de la ventana es menor o igual a 230. Ahora sabemos que podemos cambiar el color de fondo CSS body dot para que sea negro o de otro modo, podemos hacer lo mismo y cambiar el color de fondo a blanco. De acuerdo, así que esto se va a quedar blanco o negro más bien, implicando baja a doscientos treinta. Dos treinta. Ahí vamos. Y va a cambiar así como así. Ahora podemos hacer lo mismo en base a la altura también. Y sólo voy a volver a poner ese log de consola aquí, donde vamos a registrar el ancho y la altura. Y voy a cambiar dónde está atracado esto, cambiar al fondo aquí y refrescar la página. Refrescar. Y ahora cuando cambie el tamaño, vamos a ver que el ancho no está cambiando, pero la altura está cambiando. Y podríamos tomar algún tipo de acción si la página de alguien está, por ejemplo, en los 87 píxeles de altura, hacer otra cosa, podrías darles una advertencia. Podrías, podrías literalmente eliminar todo de tu Document Object Model y solo decir, oye, tu navegador es una forma de pequeño para este sitio web. De hecho, tu navegador, si tiene 87 píxeles de altura, es demasiado pequeño para cualquier sitio web. Y así es como cambiamos el tamaño de la ventana. Ahora no es realmente súper útil en este punto en el tiempo. Y no he usado esto en varios años probablemente. Pero es bueno saberlo porque a veces me encuentro con código viejo que está haciendo esto y luego simplemente lo convierto a la consulta de medios CSS para que sea sensible. Y esta es una especie de donde CSS comienza a hacerse cargo de JavaScript. Pero a veces necesitas saber esto también en JavaScript. Especialmente si vas a estar creando un juego de algún tipo. Si vas a crear un juego, vas a querer saber cuáles son las dimensiones del juego, la ventana gráfica, ese portal de juegos aquí, toda esta sección blanca, vas a querer saber cuál es ese tamaño y trabajar con ella. 32. jQuery cada bucle: Muy bien, bienvenido de nuevo. Hablemos de bucear a través de elementos. Y así cuando tenemos un selector de algún tipo, algún tipo de elemento, éste podría ser un elemento o éste podría ser múltiples elementos. Y un buen ejemplo de eso es si tenemos como una lista desordenada con un aliado aquí dentro, primer ítem, el segundo ítem, el tercero. Y seleccionamos a todos estos aliados. ¿ Y si quisiéramos hacer algo diferente con todos estos aliados? Pero aún así queremos seleccionarlos a todos. Queremos seleccionar cada uno de estos tres elementos de lista. Bueno, si hicimos el texto LI dot, esto lo va a cambiar en los tres. Y bastante seguro, lo hizo. Eso no es lo que buscamos en absoluto. A lo mejor queremos hacer algo diferente por cada uno de ellos, pero queremos usar un selector. Por lo que podríamos hacer LI y agarrar el primero. Podemos hacer un selector como este. Hacemos primero, podríamos hacer último, o podemos recorrer todos estos y hacer algo diferente basado en un selector. Y a veces recorrer bucles es la forma correcta de hacer las cosas. Es sólo una forma más rápida de hacer las cosas. Por lo que podemos decir punto cada uno. Y esto va a tomar un índice de funciones. Y el elemento. Y ese elemento en sí va a ser todo este elemento aquí dentro. Y ese índice va a ser, ¿es la primera iteración, segunda iteración, tercera iteración. Por lo que ahora podemos salvar el elemento en sí, que se parece mucho a decir esto que hemos utilizado antes. Pero esto sólo se refiere a este elemento en particular en este bucle. Texto de punto va a ser índice nuevo ítem aquí. Y así cuando refresco la página, se puede ver dice 0 nuevo elemento aquí, un nuevo elemento aquí a nuevo elemento aquí. Ahora si eres algo nuevo en JavaScript y estás como, bueno, ¿por qué se dice 0? Es porque las computadoras técnicamente empiezan a contar a 0 en lugar del número uno. Siempre podríamos hacer índice más uno solo para compensar eso. Ellos son Río, nuevo artículo aquí, nuevo artículo aquí, nuevo artículo aquí, 1-2-3. Si vemos nuestra fuente, es sólo lo viejo que teníamos. No es lo nuevo. Ahora podemos decir algo así como si el índice es igual a dos, seleccione este elemento. Cambia en CSS para tener un color de fondo de negro. Y entonces podemos encadenar estos juntos. Y ya lo hemos hecho antes. Cambio el color para ser blanco, así que solo invertiré los colores. Y es como este de aquí. Recuerda 012. Ahora tampoco tenemos que ver con sólo mentiras. Podemos hacerlo con dibs y vamos a seguir adelante y cambiar estos dos divs va a agarrar cada div en la página va a recorrer a través de ellos. Dice primer elemento, el segundo ítem, el tercero, algo salió mal ahí. Ah, porque no cambié mi selector. Ahí vamos. Un artículo nuevo aquí a nuevo artículo aquí, tres artículo nuevo aquí. Podríamos incluso ponernos más fantásticos con esto y podríamos conservar su texto original. Por lo que podemos decir algo así como el texto original de Kahn es igual a este elemento 2.txt. Y lo tiraremos aquí como variable, texto original. Y así ahora no hemos numerado primer ítem, segundo ítem, tercer ítem con un número dinámico ahí dentro. Ahora si quisiéramos, podríamos hacer cualquier cosa ridícula con esto. Podemos multiplicar esto por 303. Ahí vamos. Entonces obtenemos 036. Podríamos hacer lo que queramos. Eso es sólo trabajar con el índice, el elemento en sí. Se puede hacer cualquier cosa con ese elemento y es sólo un selectores regulares. Entonces solo recuerda cuando estás usando dot h, Se necesitan dos elementos no son elementos sino parámetros. Tu primera va a ser el índice, donde en el bucle iteración está, es la primera iteración, segunda iteración, tercera iteración, etcétera, etcétera. Y el segundo parámetro es tu elemento. Y tu elemento. Entonces puedes usar el selector, que se parece mucho a decir esto, pero realmente no estamos dentro de la, la función. No queremos que eso sea parte de la función. Queremos el elemento en sí. Entonces seleccionamos ese elemento y luego podemos trabajar con él. Y lo va a hacer por cada div que pueda poner en sus manos, o cada LI o cada selector de clase, cualquier cosa. Lo que me gustaría que hicieras aquí es ir adelante y darle una oportunidad a esto. Quiero que selecciones un elemento que no tenga múltiples elementos en la página. Hacer punto cada elemento de índice de función. Y luego quiero que cambies el texto o trabajes con el índice o selecciones ese elemento al menos y cambies algo del CSS para que sepas que está funcionando. 33. Cambia los atributos: Hablemos de cambiar los atributos de los elementos. Y tengo un ejemplo realmente bueno alineado aquí. Entonces digamos que tenemos un elemento de entrada y queremos cambiar esto de texto a contraseña. Y así la idea aquí es que podemos escribir algo como esto, pero que si quisiéramos que en realidad se pareciera más a esto, como contraseña, contraseña, contraseña y cosas así. Podemos hacerlo con bastante facilidad. Entonces sigamos adelante y seleccionemos esta entrada. Hagamos const. La entrada es igual a y luego sólo la entrada es la única en la página. Por lo que no tengo que preocuparme por ponerme específico con él. Y con el selector. Entonces puedo decir el punto de entrada ATTR, que significa atributo ATTR. No escriba texto. Y así vamos a la consola log esta consola dot log este tipo. Y esto debería decir si lo hacemos texto correcto. Y saquemos eso. Ahí está. Error de texto si hicimos 123123123. Sí, lo mismo. Cuco, cuco, Fresco, fresco. Pero, ¿y si quisiéramos cambiarlo? Entonces esto se parece mucho a Val o texto o HTML. Y lo que estoy diciendo aquí es dot val, dot text, dot HTML. Hace una de dos cosas. O le das un parámetro o has establecido un parámetro. Y así estamos diciendo simplemente obtener el atributo de tipo. Este es nuestro parámetro. Es sólo conseguir el tipo aquí que, eso coincide con eso. Ahora si quisiéramos cambiar eso, podríamos, podríamos decir tipo ATTR y luego cambiarlo a contraseña. Y esto va a suceder tan rápido y parece que va a suceder entre bastidores. Pero cuando escribo así, después de actualizar la página, se va a ver como un campo de contraseña como este. Ahora lo que es genial es que si quieres ver mi contraseña, simplemente puedo seleccionar el tipo ATTRR de punto de entrada, y cambiémoslo de un campo de contraseña a un campo de texto. Y puedes ver mi contraseña está en texto plano ahora, mi contraseña también lo es. Entonces así es como obtenemos un atributo y así establecemos un atributo. Y así como un pequeño recordatorio rápido, para obtener un atributo solo toma un parámetro así. Y si tiene un segundo parámetro se va a tratar de establecer ese atributo. En la siguiente lección, sigamos adelante y empecemos a trabajar con algunas cosas de Ajax. Ajax es realmente, muy divertido. Está trabajando con API. Nos estamos metiendo en algún buen JavaScript aquí, algunas cosas realmente divertidas, más cosas de nivel de producción, tipo más profesional de JavaScript que vas a estar escribiendo usando jQuery. 34. Peticiones de Ajax GET: De acuerdo, echemos un vistazo al ajax y algunos datos con un poco de devolución de llamada. Ahora necesitamos un lugar de donde obtener datos. Y uno de mis favoritos personales es swampy dot dev es como una API de Star Wars. Y si vas a intercambiar e dot dev slash api slash gente slash uno, vas a ver esta información sobre Luke Skywalker. Y así en realidad podemos ir allí intercambiando dot.gov slash API slash gente slash uno. Y vemos toda esta información. Pero Luke Skywalker, Ahora esta es la URL. Queremos que esto sea un endpoint API. Queremos poder obtener esta información, esta información de JSON, y acceder a ella con bastante facilidad. Entonces lo que podemos hacer aquí es si solo muevo esto hacia arriba y en realidad no, desacoplemos esto es que tenemos acceso a jQuery aquí con un signo de dólar. Se puede ver que podemos usar dot get y luego esa URL. Ahora si hacemos justamente eso, vamos a ver que sólo es una solicitud regular de Ajax. Pero si aclaro eso y le doy una función de devolución de llamada, sabemos de las callbacks, sabemos de las funciones. Hagamos consola dot log los datos. Y vamos a ver que esta es la petición Ajax aquí y este es nuestro dato. Y así estamos haciendo una solicitud de get aquí. Simplemente estamos pidiendo datos. Y así al usar el signo de dólar dot get, aquí no hay selector porque no estamos seleccionando nada. Y porque no hay selector, no tenemos sector, es solo signo de dólar dot get. Y así ahora tenemos toda esta información cargada en nuestra página o en nuestra consola al menos que estaba disponible por aquí, llamado Luke Skywalker altura 172 masa 77. 172, misa 77, nombre Luke Skywalker. Es toda la misma información. Y así es como hacemos una simple solicitud ajax en jQuery. Conoce bosques salvajes sobre eso es tan increíblemente simple. Podemos hacer dot get. Y acabo de pegar esa URL ahí dentro, los datos. Y luego podemos consola de nombre de datos de registro de puntos. Eso fue lo que buscamos, nombre correcto. Entonces sigamos adelante y guardemos esto. Y vamos a refrescar esta página. Y va y lo consigue. Dice Luke Skywalker, podríamos conseguir su altura. Podríamos conseguir su peso si quisiéramos. Luke Skywalker 172. Espera, no estaba ahí. Se llama misa. Por eso su misa es de 77. Y así ahora no tenemos que preocuparnos por como un fetch API solicita. No tenemos que preocuparnos por tomar esos datos y básicamente analizar el JSON y convertirlo en un Objeto JSON o JavaScript. No tenemos que preocuparnos por nada de eso porque jQuery está haciendo todo eso detrás de bambalinas y lo hace con una sola línea de código con la función dot get que vas a necesitar saber esto para tu proyecto final. Por lo que recomiendo encarecidamente que le des una oportunidad para probarlo. 35. Peticiones de posters de Ajax: Muy bien, en la última lección miramos una solicitud de jQuery GET. Y en esta lección vamos a ver una solicitud de post de jQuery. Y así es como enviamos datos a un servidor y le pedimos que actualice datos o cree algunos datos nuevos. Y esto es realmente, realmente simple de, es solo punto post y luego alguna URL aquí, algunos datos aquí dentro, y una función de devolución de llamada con los datos que se van a devolver. Eso es literalmente todo lo que es. Por lo que tus datos deberían ser un objeto de algún tipo. Entonces nos dicen, Hola mundo. Y esa URL que necesitamos algún lugar para publicar. Y es realmente, realmente difícil encontrar un lugar para publicar de forma segura, pero encontré uno llamado bin HTTP. Por lo que hacemos esto como una URL, HTTPS colon slash slash HTTP bin.org slash post. Y si queremos, podemos ponerlos en líneas separadas solo para que esto se vea un poco más bonito. Y entonces podemos decir que la publicación console.log estaba completa con estos datos. publicación de datos Console.log se completó con estos datos. Y echemos un vistazo. Estos son todos los datos que nos dieron de vuelta. Un HTTP, HTTP bin.org tiende a devolvernos todos nuestros datos en forma de propiedad aquí. Entonces dice hola mundo, podemos poner cualquier cosa ahí sin embargo. Nos dicen, Instagram es igual a en la codificación de punto para todo el mundo. Que si quieres consejos de codificación gratis y trucos definitivamente ven a echar un vistazo a esto. Y forma codificación Instagram para todos. Y así sabemos que eso realmente está funcionando. Ahora bien, si queremos asegurarnos de que no está funcionando, siempre podríamos simplemente tratar de conseguir. Haremos dot get y lo haremos, crearemos una solicitud get a la URL de publicación de slash. Y se pueden ver cuatro o cinco, eso significa no permitido. No se te permite hacer eso. Tiene que ser una solicitud de post. Así que adelante y dale una oportunidad a esto. Usar HTTP bin.org. No olvides que necesitas HTTPS. Es posible que te encuentres con ese error si viene de una ubicación insegura a una ubicación segura, solo asegúrate de tener esa S y ahí. A esto se le llama su carga útil. Estos son los datos que les vas a estar enviando. Y luego tienes una función de devolución de llamada cuando está hecho, ¿qué estás haciendo con esos datos? Todo lo que estamos haciendo aquí es que estamos haciendo datos console.log. Ahora esto es realmente, realmente útil cuando estás creando una aplicación de una sola página o aplicación web progresiva donde necesitas que alguien registre o inicie sesión y no quieras llevarlos a otra página, o tienes un endpoint API, o tienen que iniciar sesión a través de un sitio web diferente, algo así. Puedes enviar esos datos a otro lugar para su procesamiento. Y esos datos pueden volver por lo general en forma de JSON. Y entonces jQuery puede manejarlo con mucha gracia. En la siguiente lección, sigamos adelante y creemos un generador aleatorio de personajes de Star Wars basado en prácticamente todo lo que hemos hecho en este curso. 36. Proyecto final: De acuerdo, bienvenidos a su proyecto final. Vamos a estar creando un personaje aleatorio de Star Wars, un generador usando jQuery y JavaScript. Entonces lo que quiero que hagas aquí es ir a esta URL aquí, yo acercaré para que puedas ver esto. Y tenemos que ir a esta URL aquí. Y podemos ver todo tipo de cosas que no queremos rutas todo lo que queremos una identificación. Entonces vayamos a la identificación. Y podemos ir a, por ejemplo, slash Star Wars API slash slash ID one dot JSON. Y conseguimos a Luke Skywalker, y también obtenemos una imagen y un Wiki y todo tipo de otras cosas ahí dentro. Podríamos ir al personaje. Creo que aquí solo hay 83. Sí. Este no tiene tanta información, pero al menos tiene un nombre y una imagen, que es realmente todo lo que queremos en este punto. Vayamos al 84. Ahí hay uno, hay un montón de información nueva aquí, creo. Pero no hay 100 caracteres, no hay 100. Y veamos si hay 90. A ver si hay ochenta y siete, ochenta y ocho, ochenta y nueve. Esto es importante que hagamos esto. Ok, hay 88 caracteres, así que necesitamos obtener aleatoriamente un número entre 088 e ir a esta URL y reemplazar 88 por un número aleatorio. Y luego en nuestra página quiero que puedas mostrar el nombre de la persona y su imagen. Y así vamos a necesitar trabajar con algún texto interno. Vamos a necesitar trabajar con cambiar un atributo. Vamos a necesitar trabajar con una solicitud get y algunos números aleatorios. Ahora, quiero que lo hagas, si puedes, si sabes lo suficiente, JavaScript trató de hacer todo esto por tu cuenta en este momento sin verme hacer mi solución. Ahora si te quedas realmente, realmente atascado, primero que nada, definitivamente ve y google, la mitad del desarrollo web es cosas de Google. Pero si te atascas en Google y no sabes a dónde ir, siempre puedes venir al grupo de aprendizaje a codificar Facebook o simplemente reanudar este video una vez que me desvanezca y se desvanezca a negro. Y luego puedes verme hacer mi solución. Entonces quiero que sigas adelante y nos des una oportunidad de que pueda parecer lo que quieras. Por cierto, esto depende completamente de ti. Haz que se vea increíble. Si quieres, haz que se vea terrible. Si quieres eso depende 100% de ti. Adelante y crea un generador aleatorio de personajes de Star Wars basado en la muy poca información que te he dado. Y a propósito te he dado muy poca información aquí porque esto va a ser muy buena práctica. Como desarrollador web profesional. La gente te va a dar muy poca información y vas a necesitar trabajar con ella de alguna manera. Entonces me voy a desvanecer y luego me voy a desvanecer y luego puedes ver mi solución más tarde. Así que solo asegúrate de hacer una pausa cuando la pantalla se ponga negra. De acuerdo, sigamos adelante y creemos un generador aleatorio de personajes de Star Wars. Entonces lo primero que estoy haciendo aquí es que estoy mirando mis endpoints API y estoy leyendo a través de él. Y esto es muy importante para leerlo. No te limites a llevar a alguien más donde como mi palabra de antes. En realidad lee a través de ella si puedes. Por lo que tenemos una URL base o una URL CDN almacenada en caché. Vamos a seguir adelante y utilizar esta URL CDN de caché. Y tenemos dos rutas. Por lo que podemos usar esta URL slash, todo dot JSON o slash ID. Entonces sigamos adelante y hagamos corte. Uno. ¿Esto va a funcionar para mí? No, eso no va a funcionar para mí. Tiene que ser slash one ab.js EN problema para probablemente, ¿verdad? No, eso tampoco va a funcionar. Entonces eso no funcionaba. Entonces leemos a través de esto y vemos que esto dice ID, pero en realidad debería decir id y luego el número dot JSON. Y así la documentación podría ser un poco mejor aquí, pero aquí vemos un ejemplo de ello. Entonces sigamos adelante y pongamos esa URL aquí y hagamos slash ID, slash 1 punto JSON. Y conseguimos a Luke Skywalker. Ahora bien, ¿cuántos personajes hay? Cuál es nuestro número máximo o máximo va a ser 89. No, eso no va a estar bien. Va a ser slash ID slash 88 dot JSON. Ahí vamos, capitán plasmas, el último personaje que tenemos, por lo que tenemos los números uno a ocho, con los que podemos trabajar. Entonces vamos a nuestro código aquí y vamos a crear un botón. Y dice generar carácter. Y necesitamos, cuando se hace clic en este botón, punto al hacer clic, hacer una función de cosa. Entonces eso es sólo registrar un eventos de clic regular. Ahora necesitamos hacer algún tipo de solicitudes GET. Podemos hacer dot get y luego esa URL. Y así tengo esta URL aquí, y voy a hacer que sólo un toque más pequeño como solo 88 puntos JSON, lo que sea que se va a devolver que eso está bien. Podemos cambiar eso más adelante. Y luego queremos conseguir esos datos y console.log los datos. Queremos asegurarnos de que esto vaya a funcionar para nosotros en nuestro navegador. Entonces volvamos a nuestro navegador y actualicemos nuestra página, generemos carácter. Y lo hizo, consiguió Capitán fascinante a Dios, nuestra información aquí dentro, eso es perfecto. Pero ahora necesitamos aleatorizarlo porque si volvemos a hacer clic en él, sólo va a seguir consiguiendo un plasma. Entonces sigamos adelante y aleatoricemos ese número. Sabemos que necesitamos crear un número aleatorio y esto no es jQuery, esto es solo JavaScript. Por lo que podemos hacer constante. Número aleatorio es igual a punto matemático aleatorio. Y esto nos va a dar un número entre 01 veces 88, y eso nos va a dar un número entre 188. Y luego queremos hacer el sello de punto matemático. Y entonces lo que al azar va a hacer es que en realidad nos va a dar un número raro. Va a ser 0, 1-2-3, 4-5-6. Eso va a tener un montón de decimales y no queremos eso. Lo que queremos en cambio es cualquiera que sea ese número se multiplique por 88 y luego lo baje hasta el número más cercano. Entonces si es como el 74.1 , ahora van a ser 75. Y sigamos adelante y cambiemos esto a un literal de plantilla. Esto es simplemente un JavaScript normal, llano viejo en este punto. Y vamos a poner número aleatorio aquí. Sigamos adelante y guardemos eso y actualicemos nuestra página. Generar un carácter 0 número aleatorio no está en un error tipográfico en algún lugar justo ahí. De acuerdo, intentemos esto otra vez. Aquí obtenemos una Chewbacca id 13. Id, ID 21. Todos estos son números bajos. Extrañamente, ID 64. Ahí vamos. Por lo que ahora necesitamos obtener su nombre y su imagen. Entonces tenemos todo tipo de cosas. Tenemos como cuando nacen, ubicación nacida yada, yada. Queremos su nombre como palpación y una imagen. Entonces, solo vamos a sacar esto solo un poquito. Y sigamos adelante y pongamos un nombre aquí. Entonces hagamos nombre H1. Vamos a dejarlo vacío y vamos a seleccionar una imagen. Src va a ser nada también. Por favor dale a esto una clase de carácter I mg. Y sigamos adelante y trabajemos con algo de esto. Entonces ahora sabemos que podemos llenar nombre con nombre de datos, nombre datos, y eso es accesible. Y cuando hago clic aquí, estos son todos los datos de un objeto. Puedo desplazarme hacia abajo a nombre. Por lo que ahora puedo seleccionar ese nombre. Puedo hacer nombre de punto H1. 2.txt va a ser nombre de datos. Y así no vemos nada. Boom, boom, boom, mira eso. Está funcionando tan bien en este momento. Adelante y agreguemos una imagen también. Y eso también, vamos a alejarnos porque estamos como el 250% eso es vestirse para ser demasiado. Ahora podemos seleccionar esa imagen, podemos seleccionar el personaje IMG. Podemos seleccionar ese atributo de SRC y establecerlo como lo que tenemos, qué aquí. Si lo miramos, sólo se llama imagen. Entonces hacemos datos, IMG. De acuerdo, vamos a ver si esto funciona. Está bien. No tengo ni idea de quién es, pero genial. Cuco, cuco. Está bien. Está bien. Está bien, sí, esto se ve bastante bien. Entonces básicamente tenemos esto funcionando ahora. Ahora podemos hacer esto un poco más bonito si quisiéramos agregando un poco de estilo. Para que pudiéramos hacer algo así como estilo. Podemos seleccionar nuestra H1, alineación de texto, centro, text-decoración, subrayado, familia de fuentes. Hagamos una fuente san serif. Realmente no importa cuál sea la fuente, solo una fuente Sans Serif. Y generemos el nombre del personaje debajo de eso. Hagamos botón. Display va a ser Block, margin va a ser auto, y esto debe estar centrado. Ahí vamos. Eso se ve un poco mejor. Vamos a seguir adelante y darle un estilo a esa imagen un poco. Y hacemos IMG. El ancho va a ser, digamos 200 píxeles. El estatura va a ser auto. Sombra de Bach. Diez píxeles, diez píxeles. Vamos a darle un poco de desenfoque. Y hagámoslo negro. Ahora veamos cómo se ve esto. Ah, esa imagen no se presentó y probablemente no tenga imagen. Está bien, no está mal, no está mal. Adelante y centremos eso también. Hagamos display, block, margin, auto, generador de caracteres, Greedo, generador de caracteres, cerrojo, generador de caracteres, todo tipo de personas aquí, miren estos. Y así ese es nuestro generador aleatorio y de caracteres. Esa es una foto aterradora. Y eso lo hicimos técnicamente en unas siete líneas de código. Sí, está en algún lugar de ahí. Por lo que tenemos mapeo run 12345678 líneas de código. Por lo que tenemos nuestro oyente de eventos. Siempre que haga clic en el botón al azar obtener un personaje. Crear aleatoriamente un personaje o un número, más bien rentar aleatoriamente crear un número, obtener. Y luego solo la URL, esa es esa URL API. Y en lugar de conseguir como 88 puntos JSON o un JSON de un punto, y acabamos de decir, cada vez que hagas clic en ese botón, crea un nuevo número aleatorio y lo pones aquí. Entonces, cuando esté hecho, tenemos una función de devolución de llamada y simplemente estamos obteniendo el nombre y la imagen, y estamos configurando ese nombre H1 y el atributo Imagen del personaje, el SRC. Eso es todo lo que hay a ello. Ahora, el mío es bastante feo. Si quisieras tomar mi código y hacerlo mucho más bonito de aspecto, por favor sé mi conjetura me encantaría que pudieras hacer eso. No olvides compartir tu proyecto. Es realmente importante que compartas tu proyecto con el resto de la clase. Es a la vez inspirador y útil para otras personas ver tu código y ver en qué has estado trabajando. Una última cosa, si eres como, bueno, lo que es Math.SQRT, punto matemático aleatorio. Estos fueron cubiertos en JavaScript uno a uno y JavaScript a uno también, donde en realidad hicimos un proyecto muy, muy similar usando JavaScript simple de vainilla. De esta manera es solo un poco menos de código usando jQuery simplemente recto en lugar de simplemente recto. 37. Resumen: Gracias por llevarme a jQuery uno a uno conmigo, Caleb, diciéndole, espero que aprendas a amar lo fácil que es trabajar con jQuery. No olvides, también puedes seguirme en redes sociales en Caleb tall lean en Twitter. O por pequeños fragmentos de código impresionantes y actualizaciones sobre nuevos cursos. Siempre puedes seguir el punto de codificación para todo el mundo en Instagram. Por último, si buscas una comunidad de revestimiento, ven a unirte a aprender a codificar en Facebook. Se trata de un grupo completamente gratuito y puedes hacer cualquier pregunta de desarrollo web que sea. Gracias de nuevo por tomar jQuery 101 y ojalá te vea en otro curso. Codificación feliz.