Bueno, jQuery, ¿sabéis lo que es jQuery?
Es como la biblioteca, la librería, como le queráis decir,
más conocida, amada, odiada, utilizada, bueno, de todo, ¿no?
Entonces, vamos a hacer un mini repaso,
pero lo más interesante que tenéis que saber
es que vamos a quitarle como misticismo, ¿vale?
Vamos a hacer un jQuery nosotros desde cero
para que veáis cómo se crearía jQuery hoy en día,
porque también la forma de crearlo sería diferente hoy
o cómo se creó en su día.
Y vais a ver un poco cómo funciona por detrás
y si queréis como ejercicio, le podéis dar una vuelta,
retomarlo, hacerle testing, que me parece muy interesante y todo.
Así que, bueno, jQuery obviamente tiene una API enorme
que no voy a hacer entera, pero vamos a hacer algunos en concreto,
no sé, algunos que vea que tienen sentido.
Por ejemplo, el fade-in puede ser interesante
para que veáis cómo hacerlo por detrás
o el filter, bueno, el on, el on, que es el de los eventos,
el del CSS es muy típico, el del classname,
al menos para que veamos algunos y ya está.
¿Ok?
Tengo hora y media esperando por el clon de jQuery
y ahora tengo que irme.
¡Ay, Gerald, lo siento!
Perdona, lo siento.
Bueno, ya verás más tarde, Gerald, lo siento.
Perdón, perdón, perdón.
Perdón, perdón.
Lo siento.
¿Si ya se ría que esto será más fácil?
Sí, hombre, sí.
Será más fácil.
Oye, voy a cerrar cosas, a ver si...
¿Qué tal esto?
Por aquí.
Y...
Midu, conseguí trabajo por ti, te amo.
Ay, oye, no he hecho publicidad en el Discord.
¡Ostras, se me ha olvidado!
Hola, everyone.
Estamos haciendo un clon de jQuery con JavaScript desde cero.
¡Vente!
Se me ha olvidado, se me ha olvidado totalmente.
¡Ay, qué ver!
¡Qué mal, qué mal!
¡Ay, no!
¡El Ever, no!
¡El Ever, no!
¡El maldito Ever!
Lo voy a echar y todo.
Ah, no sé si...
Yo creo que no...
¿No ha llegado el mensaje?
¿Os ha llegado la notificación?
Creo que no, ¿verdad?
No sirve, la madre que lo trajo.
Editarlo no sirve.
¡Qué mierda!
Ahora sí.
Ahora sí.
Vale.
Venga, ya está.
Maldito Ever.
Mira, pues creo que si os parece, lo podríamos hacer en Codilink.
Hoy le he enseñado a Tev Codilink y estaba sorprendida.
Estaba, oh, oye, esto está muy chulo.
Me gusta.
Y yo, oh, ¿has visto?
Hola.
Bueno, vamos a ver si tengo por aquí...
¿Dónde he dejado?
Tenía un Codilink donde estaba probando antes lo de importar jQuery.
Te, te, te, te, te, te, te, te, te, te, te, te...
Pues no sé dónde lo he dejado.
Lo habré cerrado.
Soy capaz.
Soy capaz de haberlo cerrado.
¿Soy capaz?
No.
Aquí.
Ah, mira, lo tengo aquí.
Vale.
Que tenía justamente esta línea que era la que me interesa.
Vale.
jQuery es una biblioteca, una librería, una utilidad de JavaScript que ha sido muy famosa durante muchos años, que ha tenido un uso muy interesante, ¿no?
Y en el que básicamente nos facilitaba la manipulación del DOM y el tratar con los elementos del DOM, incluso hacer llamadas AJAX, promesas, callbacks, fetching de datos, el tema de eventos.
Tenía un montón de utilidades, ¿vale?
Pero lo que...
¿Por qué necesitábamos jQuery?
Porque el DOM era una basura.
La DOM API era una basura.
Y para recuperar un elemento era muy complicado.
Y por suerte hoy ahora tenemos document query selector y todo esto.
Pero, bueno, por eso tenía sentido antes jQuery.
Aún así, hoy en día jQuery sigue siendo muy usado.
Porque como usa WordPress y WordPress está en casi cualquier página, pues ya lo tenéis.
Entonces, hoy en día ya no se utiliza tanto porque ya no es tan innecesario.
Y a la hora de crear UIs, pues lo que se hace es utilizar React, Angular, Vue, Svelte, lo que veáis.
Así que, ¿qué pasa con jQuery?
Pues el tema es que se utilizaba este dólar y a partir de este dólar ya empezaba todo.
Tú ponías este dólar y aquí pondrías como el elemento que querías, como el selector.
Y directamente esto lo que te hacía era devolverte no el elemento, sino todos los elementos que cumplían con esta condición, ¿no?
Con este selector, como el selector de CSS.
Y aquí, pues, podías cambiar el HTML o podías añadir eventos.
Y, hombre, la sintaxis, obviamente, es mucho mejor que la sintaxis que tenemos aquí.
Este da sintaxis.
Query selector.
Yo qué sé, button.atblistener, clic.
¿Sabes?
Esta sintaxis es más rollo que hacer esto.
Button on, clic.
Ya me diréis.
Hombre, la verdad es que cuando empezabas ahí a hacer un montón de cosas.
Esa es muy buena, Alfredo, que tienes toda razón, que es muy interesante.
¿Qué pasa?
Que también jQuery, y gracias por recordarme, Alfredo, una cosa muy interesante que tenía era esto.
Que era cross-browser.
¿Qué quiere decir esto?
Es que antes los navegadores no funcionaban tanto en especificaciones unidas, ¿sabes?
Sino que cada uno, pues, a lo mejor, ¿cómo se hacía esto del Query Selector?
Pues, el Query Selector funcionaba en Chrome, pero en Internet Explorer tenías que hacer, ya no me acuerdo cómo era,
el GetByClassName.
No me acuerdo cómo era, ¿vale?
Pero este mismo.
Y en Firefox, pues, tenían otro y la madre los parió.
Y entonces, ¿qué pasa?
Que era muy difícil poder hacer esto.
Hoy en día esto no es un problema, ¿vale?
Pero por eso también funcionaba.
Funcionaba para el hecho de asegurarte que tu código fuese compatible con todos los navegadores.
Podían manipular el DOM sin preocuparte.
Gracias.
O sea, es el GetElementByClassName.
La madre los trajo esto.
Que sigue funcionando, ¿eh?
GetElementByClassName.
¿Qué pasa?
Que tenías el GetElementByClassName, GetElementById, el ByName, el ById.
Tenías un montón.
Y entonces, lo que hacía jQuery era detectar si tenía soporte o no.
Y entonces, utilizaba esto si tenía soporte y si no, utilizaba uno de estos.
O sea, una locura.
Una locura.
Vale.
Ahora que más o menos ya sabéis lo que es jQuery,
lo interesante de jQuery siempre ha sido su API.
Porque su API era muy bonita.
Era poner aquí con una cosa de estas, tú ponías el dólar.
Con el dólar ya le decías el selector.
Y además podías ir concatenando o encadenando llamadas.
Y lo podemos ver ahora, ¿eh?
Lo vamos a ver aquí.
Por ejemplo, voy a poner aquí un button y voy a poner aquí a go, go, go.
Ponemos el button.
He importado jQuery de la forma moderna.
O sea, estoy importando jQuery de la forma moderna, ¿eh?
Lo cual es interesante.
Import el dólar from el CDN de Skypack jQuery.
Y ahora ya podemos hacer, pues, a esto.
Podemos recuperar el botón.
El botón, pues, le podemos cambiar el CSS.
Por ejemplo, el background lo podemos poner de color 09F.
El CSS podemos poner, el borde, pues, le podemos poner que sea blanco, por ejemplo.
Bueno, blanco queda un poco raro.
O también en el CSS le podíais pasar, si no me equivoco, un objeto.
Que, bueno, esto también lo podemos hacer.
Y, por ejemplo, padding 16x, ¿veis?
Y border...
¡Uy!
¿Qué he hecho aquí?
He abierto esto.
Border...
No sé si esto era con camel case.
Lo vamos a ver.
Border.
Border radius.
Sí, ¿vale?
¿Veis?
Claro, esto no sé si esto funcionará.
No sé si así funciona.
Yo creo que sí, que así funciona.
Sí, también funciona.
Vale.
Con camel case o así.
¿Veis?
Y entonces le podías cambiar los estilos.
Y también podías ir encadenando, ¿no?
Aquí, on click.
Y aquí, alert.
Hola Twitch.
¿Ok?
Ping.
Le das un click.
Aquí tenemos el hola Twitch.
La verdad es que la API siempre ha sido lo mejor.
Siempre ha sido lo mejor.
También se podía hacerlo el fade in o fade out.
Fade in.
Fade in.
Bueno, no sé si se ve.
Claro, es que como va muy rápido.
Ah, pues no.
Pues tiene que ser fade out.
¿Ves?
Fade out.
Fade in.
Fade toggle.
Puedes hacer un montón de cositas.
Un montón de cositas.
También podías recuperar más de una cosa.
Yo qué sé.
Por ejemplo, si tenías aquí elementos.
El li.
Y aquí uno.
Li.
Dos.
Li.
Tres.
¿Vale?
Pues esto lo que te hacía era recuperarte cada uno.
Podrías hacer each, creo.
Y aquí tendrías cada elemento, ¿no?
El.
Y aquí, pues, yo qué sé.
Podrían, mira.
Vamos a poner aquí el index.
Si el index.
Es cero el elemento .css color yellow, por ejemplo.
Primero lo ponemos amarillo.
¿Vale?
Me ha dejado fatal porque no sé si este...
Esto no lo ha puesto amarillo.
No sé si no me está pillando el el, pero...
Aquí aprendiendo...
Reaprendiendo jQuery.
La madre que me parió.
Es que yo solo quería...
Yo solo quería...
Yo solo quería...
Ah, ¿por qué no me...?
No sé si es porque está mal el...
El HTML.
¿No?
No sé.
Pero esto es así, ¿no?
Te faltan cerrar los li.
Ah, no.
Pero ya lo he cerrado y sigue sin verse.
Ah, es for each.
No.
Yo creo que es each.
Para cada li.
A ver.
Aquí en la consola.
¿Ves?
Sale cero, uno, dos.
Vale.
No sé si será que el este...
No.
C es color, yellow, a ver, 0, 9, F.
No.
No.
Sí, es each.
Sí, sí, es each.
Primero es el index y después el...
Ah, primero es el index.
No, no.
Si veo en el console.log lo veo bien.
¿No?
Ah, tenéis toda la razón.
Tenéis toda la razón.
Tenéis toda la razón.
Ah, pero...
Y este es el elemento.
Ahora, ahora.
Qué raro, eh.
Qué raro.
La madre que los parió.
La madre que los parió la que liaron.
Bueno.
¿Sabes?
Porque esto es al revés de cómo funciona el for each.
O sea, es una cosa loca.
Entonces, bueno.
Pero para que os hagáis un poco la idea, ¿vale?
Que tampoco hace falta...
Bueno.
Esto es cómo funciona jQuery, ¿vale?
Ya habéis aprendido jQuery, ya lo sabéis.
No necesitas element porque puedes tirar de this.
Ya, pero a mí normalmente siempre me ha gustado más tirar de element más que de this.
Porque me parece mejor práctica que no utilizar el this.
Al menos eso se puede arreglar.
Sí, al menos se puede arreglar.
Bueno, vamos a poner que esto sea green porque si no, no se ve.
¿Vale?
Ok.
Entonces, pues vamos a hacer nuestro jQuery.
Ah, hay otro.
Hay otro que es el más importante.
Que es este de aquí.
Que este era bastante interesante.
En el que básicamente tenías el DOM...
Esto era como para que detectase cuando había cargado.
Aquí no es necesario, como habéis visto.
Pero esto era como para detectar cuando estaba el DOM content loaded.
O ready.
Ah, no me acuerdo.
Y esto, tú usabas esto y ya sabías que había cargado todo el Java.
JavaScript y entonces decías, vale.
Y entonces cuando tengas, ejecutas esto.
Y ya está.
Era bastante interesante.
Me voy que no quiero aprender esto.
No, hombre, pero si lo bueno empieza ahora.
Lo bueno es, a ver.
Lo bueno es de todo esto, más que nada, es el hecho de decir, bueno,
ahora que ya sé esto, ¿cómo podría crear yo mi propio jQuery?
¿Cómo podríamos eliminar esto y hacer que todo lo que hemos visto funcione?
De hecho, lo voy a poner en otra pestañita.
¿Vale?
Y en esta pestaña...
Vale.
En esta pestaña vamos a quitarlo y vamos a crear nuestro const así.
Una de las cosas más interesantes que tiene lo de jQuery es el hecho de cómo,
qué bien, qué bien eligieron, qué bien eligieron el tema del simbolito.
Hay ciertos símbolos, de hecho, ¿cómo se dice esto?
Valid variable name JavaScript.
Lo vamos a hacer con JavaScript vanilla.
Hay una página que está súper...
¿Esta?
¿Puede ser esta?
Sí, esta.
Mira, esto es un nombre de constante válido.
O sea, podríamos tener nuestro...
Podríamos hacer esto.
Y utilizar esto.
¿Qué os parece?
¿Os gustaría?
Sería bueno, ¿eh?
Sería bueno.
Bueno, podríamos utilizar...
Tiene otros.
Este no, pero el de la F creo que sí.
Este.
La F está chunga.
Que esta es la que utilizaba...
No sé si os he contado esta historia, pero esto lo utilizaba un compañero de trabajo
mío.
Esta F.
Que no es la F normal, ¿eh?
¿Veis que son diferentes?
Bueno, total.
¿Qué hay símbolos que pueden utilizar que...
Que...
Bueno.
No los uséis.
No los uséis.
No los uséis que tienen bichos.
No.
Emojis no podéis utilizar.
El underscore sí.
De hecho, por eso se creó una.
El underscore...
No, no sé.
No sé.
No creo que haya muchos símbolos, la verdad.
Que se puedan utilizar.
Sinceramente.
La ñ sí.
No, no hay mucho.
Ah, el infinito.
Hostia, el infinito sí que se puede utilizar.
El infinito se puede utilizar.
La madre que os trajo.
Bueno.
Total, que no lo hagáis.
Punto.
Ya está.
Entonces, vamos a poner el dólar.
Que fue una buena decisión.
Poner el dólar.
Vamos a crear nuestra función desde cero.
Utilizando como un objeto vacío.
Hay un objeto vacío, no.
Una función vacía.
¿Por qué?
Porque como podéis ver, siempre que estamos ejecutando el dólar, ¿no?
Siempre le estamos pasando como si fuese una función.
Que le estamos pasando, en este caso, un string.
Y en este caso, una función.
Entonces, lo primero que deberíamos hacer, a ver, podría obviarlo, pero lo primero que deberíamos hacer es más bien el caso del don content load.
Para eso, aquí se podrían hacer diferentes cosas.
Podríamos utilizar el arcs y tal, pero bueno, como lo vamos a hacer un poco simple, pues primero podríamos tener aquí arc, porque solo tenemos uno.
Y mirar que si el typeof arc es igual a function, ¿no?
Pues aquí hacemos lo del document, atmlistener, dom content loaded.
No me acuerdo si es este.
Dom content loaded, ¿vale?
Dom content loaded y le pasaríamos la función, ¿vale?
Así que al menos, a ver si sacamos esto por aquí y abrimos aquí nuestro editor, ¿vale?
¿Ves? ¿Ves? No puedes leer las propiedades done defined.
Vale.
Si yo quito esto, ¿vale?
Esto está aquí funcionando.
O sea, no me da ningún error, pero no se está ejecutando este código, ¿no?
Si yo pongo aquí, por ejemplo, dom content loaded.
Este console.log tampoco lo vamos a ver.
Entonces, necesitamos primero esto.
Bueno, ¿cómo lo vamos a hacer?
Bueno, lo que estamos pasándole aquí como argumento a nuestra función es justamente una función, ¿no?
Entonces decimos, vale, pues si el tipo del argumento es una función, vamos a utilizar el document atmlistener, dom content loaded arc, ¿vale?
Y entonces al menos ya tenemos la primera funcionalidad de jQuery.
On DOM content ready.
On DOM content ready.
Eso es de la vieja escuela.
Sí, es súper de la vieja escuela, ¿eh?
On DOM content ready.
Pero on DOM content ready.
Yo creo que no existe ese evento, ¿no?
Yo creo que es DOM content loaded.
Lo de DOM content ready es como lo utilizaba jQuery y ese es el nombre que le pusieron ellos.
Creo, ¿eh?
Bueno, entonces ya tenemos algo.
Pero obviamente lo más interesante está aquí.
Que ahí es donde está lo bueno.
Lo primero.
El primero es este.
El más interesante.
O sea, el más interesante no.
El que necesitamos.
Lo que tenemos que hacer es decir, vale, si el argumento es del tipo string, por si el día de mañana ponemos otros tipos, vamos a entender, vamos a poner aquí DOM content loaded.
Y aquí vamos a poner que esto es selector de jQuery o selector de CSS, que es lo que sería, ¿no?
Entonces, si el arc es un string, que sería este caso, aquí lo que vamos a tener es que vamos a mirar algún tipo de selector.
O sea, vamos a buscar el selector para decir, vale, pues este selector, vamos a ver si está en el DOM, si no está en el DOM.
Como esto soporta, como hemos visto aquí, como hemos visto aquí, soporta tanto un elemento como varios elementos, lo mejor que podríamos hacer aquí es directamente utilizar el, vamos a poner aquí elements, vamos a poner document.query selector all, para recuperarlos todos.
¿Por qué? Porque lo que vamos a hacer es iterar todos los elementos, si tenemos uno, pues no pasa nada, pues tenemos uno y ya está, si tenemos tres, pues tenemos tres, y si no tengo ninguno, pues es un array vacío y mucho mejor y no nos preocupamos.
Así que vamos a pasarle aquí el arc, y con esto ya tendríamos los elementos, al menos este del button con CSS, pues ya lo tendríamos.
Si ponemos aquí el console de elements, y vamos a poner un return elements, al menos, que esto va a petar porque no va a tener el CSS este, ya lo veréis.
Pero al menos vamos a tener esto, si me voy por aquí, ¿ves? el CSS es not a function, pero fíjate que ya tengo aquí el array del button, o sea que ya estoy recuperando al menos el node list,
que no es exactamente un array importante, sino que es una instancia de node list que no tiene todos los métodos de array, por ejemplo, no tiene el map,
el for each sí que lo tiene, pero no tiene el map, no tiene el reduce, no tiene el filter, creo que tampoco lo tiene, de hecho en el prototype lo podemos ver, ¿ves?
Tiene el for each, tiene el entries, item, keys, length, values, pero no están todos los métodos de array, que esto es un error bastante común que muchas veces tenemos.
Aquí podemos hacer dos cosas, podemos ser un poco piratas, sí, podríamos hacerlo en array from, pero bueno, vamos a evitarlo, que tampoco tiene mucho sentido.
Ah, debe ser document ready. Eso, lo del document ready que me comentáis, esto, era la forma, esto, document ready, esto, esta es la forma, la forma larga,
y esta, esta es la, o sea, document ready, fn, y esta es la forma, la forma corta, es lo mismo, es lo mismo, ¿vale?
Pues aquí tendríamos esto. Ahora aquí tenemos dos formas de hacer esto y uno puede ser interesante, las dos pueden ser interesantes.
Entonces, es interesante porque se basan en la mutación del objeto. Entonces, podéis hacer, podemos hacer dos cosas, ¿qué hacemos?
¿Mutación o desmutación? A ver, ¿por qué? Porque aquí podríamos empezar a ser unos guarros que no sé si jQuery lo es, seguramente lo sea,
y lo que podríamos es modificar la colección, o sea, por ejemplo, en el elements deberíamos añadirle el .css, este,
y en el .css, este, pues aquí tendríamos los argumentos, ¿esto lo he puesto bien? Sí, ¿vale? Y al menos podríamos aquí detectar.
Vale, vamos a poner, los argumentos pueden ser dos, ¿no? Tendríamos el property, el value, vamos a utilizar los entries de la array.
¿Por qué? Porque estoy mirando este caso, ¿no? Tengo dos argumentos, el primero y el segundo. El primero es el property, el segundo es el value.
Y con esto lo único que tengo que hacer, básicamente, pues es utilizar el property y decir, bueno, pues esto, como es el css,
pues para cada elemento que tengo, o sea, elements.foreach, que este, el foreach sí que está soportado.
Bueno, undefined is not a function, ya me está ahí, me está sacando errores que no espero, ¿eh?
Eh, css, for each, elements for each. A ver.
Property, reading, css.
Puede ser, ah, porque no estoy devolviendo, aquí debería devolver el elements también, ¿no?
Claro, para poder encadenar.
Vale, vale, no pasa nada. Tiene buena pinta, tiene buena pinta. Ahora veréis por qué.
Vale, entonces, property y value. Entonces, por cada elemento, aquí lo que tendríamos es el elemento,
y lo único que tenemos que hacer, pues es estilarlo. Se puede estilar de diferentes formas,
pero bueno, el más fácil es poner el punto style. Podríamos complicarlo para evitar machacar estilos en línea
que tengamos y tal. Por ahora lo voy a dejar así. Pero podríamos que se fuesen concatenando, lo que sea.
Y vamos a poner que el style, le vamos a poner el property y le vamos a poner el value, ¿vale?
Entonces, mira, al menos ya te... ¡Ojo! Que ya tenemos algo, ¿eh?
Ya tenemos algo, ya está, ya estamos haciendo nuestro propio... Ya estamos, ya está, ya hemos terminado.
Pues si era tan fácil, yo no sé por qué la gente de jQuery lleva tantos años haciendo esto.
No, hombre, es broma. Bueno, el tema es que todavía no funciona del todo.
De hecho, nos peta el on. Este nos peta, normal, porque no tenemos el punto on.
Pero lo que necesitamos también es que este funcione, porque si no, no está funcionando bien.
De hecho, vamos a comentar esto por ahora para que no nos pete, ¿vale?
El del on, para que al menos veamos los estilos. Este también lo voy a comentar por ahora.
Y al menos que veamos el de los estilos. Así arreglamos el de los estilos.
Y aquí en el... Vale, pues lo que podríamos hacer aquí es detectar, en realidad, si el property es un string o es un objeto.
Porque aquí como primer parámetro, o sea, como argumento, se está pasando un objeto.
Así que podríamos decir, bueno, si type of property es igual a string, lo tenemos que hacer así, ¿vale?
Entonces, haz esto. Esto de aquí. Haces el elements, for each, no sé qué...
Bueno, el for each en realidad... Mira, lo podemos poner... Uy, que se me va a apagar el monitor este.
Lo podríamos hacer también directamente dentro del for each.
O sea, podríamos hacer dos cosas. O lo podemos hacer...
Podríamos poner isString. Lo voy a sacar aquí.
Vamos a poner aquí.
Porque al final esto lo podríamos reutilizar.
Y básicamente aquí, en realidad, para cada elemento decimos, si es string, pues hacemos esto.
Y si no, lo que deberíamos hacer es recuperar del property, tendríamos que sacar todos los entries.
O sea, porque es un objeto, ¿no?
Entonces tendríamos que hacer object entries de property.
Y aquí tendríamos entries CSS.
Vamos a ponerlo así.
Voy a poner aquí un console.log, a ver si entra por aquí.
A ver si entra al entries.
Vale, entra al entries.
Vale, pues ya tenemos al menos las entries del CSS.
Y lo que, como en el propio for each, lo que podríamos hacer en el entries, pues sería otro for each, ¿no?
O sea, teníamos el entries.
Punto.
For each.
Entry.
Y haríamos lo que hacíamos aquí.
Por cada entry.
Aquí tendríamos la primera sería el property.
El seguro en dos sería el value.
Entry CSS.
Esto aquí.
Y ya está.
¡Eh!
¡Ojo!
¡Ojo!
No está mal, ¿eh?
No está mal la cosa.
Ya tenemos el tema del CSS.
A ver.
Básicamente.
Lo revisamos.
Lo habéis entendido todo de primeras.
Y hay que transformar camel case a kebak case.
No lo tengo tan claro.
Yo creo que no.
¿Ves el border radius que está en camel case?
¿Ves que el border radius está en camel case?
Ah, o sea, habría que transformar.
Lo dices al revés.
El camel...
O sea, el kebak case...
A ver.
Border radius...
No.
También.
Es que yo creo que esto se lo come, ¿eh?
Tanto el camel case como el border...
O sea, el kebak case y el camel case.
Vale.
¿Revisamos?
Vale.
¿Qué hemos hecho?
A ver.
Hemos hecho algo que es un poco...
Es piratilla.
Porque el elements lo hemos mutado con el punto CSS.
Otra opción de todo lo que he hecho aquí para evitar la mutación sería devolver un objeto.
Y en el objeto este tener, por ejemplo, CSS.
Y aquí arcs.
Y algo así, ¿no?
Y esto lo tendríamos ahí.
Y return elements.
Esta sería otra forma de hacerlo.
A ver.
Voy a probarlo un momento.
Y a ver si funciona así.
Para...
O sea, en lugar de devolver elements...
Si no, lo tiro para atrás todo, ¿vale?
Pero es para probar.
A ver.
Lo más fácil es mutarlo.
Porque así nos vamos a asegurar que...
¿Ves?
No funciona.
Pero no funciona por alguna tontería.
Tiene que haber alguna tontería por ahí.
¿Qué?
CSS is not a function.
A ver, return CSS...
Es que, claro, no se tiene que devolver el element, sino que tendría que devolverse el self.
O sea, que tendría que hacer...
A ver, no es difícil porque tendría que tener otra variable con el self y todo esto, pero que nos lo va a complicar un poco.
Entonces, lo voy a dejar como estaba.
Pero poder se puede hacer.
Solo que hay que guardar la referencia del objeto para siempre poderla devolver y ya está.
Entonces, os explico un poco por encima.
Tenemos esto.
Que le llegamos al argumento.
El dólar es lo que tenemos por aquí, ¿no?
Es este dólar.
Que ya hemos visto que puedes recibir una función o puedes recibir un string.
Ya decimos, si recibe una función, pues hacemos un document.adventListener con el doncontentload.
Y le pasamos la función que será la que se ejecute con el evento.
Hacemos un return aquí, que en realidad no es necesario.
De hecho, esto lo podríamos quitar.
Y quitar todo esto.
Pero, bueno, lo he hecho por claridad para que entendáis mejor el código.
Pero esto lo podríamos quitar porque si hacemos aquí el return, pues ya no entrará.
Y ahora mismo es el único caso que estamos mirando y tal.
Pero, bueno, ya para que lo entendáis bien, ¿vale?
Entonces, selector de CSS.
Type of arc string.
Aquí miramos si es un string y si es un string, recuperamos todos los elementos del querySelectorAll.
Y aquí estamos haciendo la mutación del CSS.
O sea, estamos mutando este nodeList, pero lo podríamos hacer con el objeto.
La verdad es que estoy un poco por hacerlo con el objeto.
Igual, si devolvimos la propia referencia al objeto, igual es suficiente.
Pero, bueno, no me voy a liar.
Elements.css.
Mutamos el array.
Y aquí lo que tenemos es justamente un método.
¿Por qué?
Porque aquí cuando llevamos el punto CSS, esto es un método.
Y el método, recibimos aquí todos los argumentos.
¿Por qué?
Porque no sabemos si vamos a utilizar un solo argumento con un objeto o dos argumentos que vamos a tener el string y el string.
¿Ok?
Entonces, aquí tendríamos los argumentos, recuperamos como dos posiciones.
El property y el value.
Que ya hemos visto que el value igual no viene.
Porque sin el objeto, el value sería este de aquí.
¿Vale?
Pero como no está.
Pero, bueno, nosotros le ponemos ese nombre, así un poco optimistas.
Y miramos si es un string.
Si el property es un string, entonces vamos a iterar cada elemento que tenemos ahí.
Y le vamos a poner los estilos.
Y si no, vamos a recuperar.
Entonces, entendemos que es un objeto.
Que el property es un objeto.
A ver, aquí habría que hacer mejores validaciones.
No hay de decir else y ya está.
Tenemos que mirar si realmente es un objeto.
El property, porque mirarlo así, o sea, hacer un else y ya está.
Y tiene bichillos.
Pero, bueno, lo podéis añadir, la validación, si queréis.
Entonces, recuperamos los entries del object entries.
Hacerlo en entries es porque a la hora de iterar cada una de las entradas que tenemos es mucho más fácil.
Así que volvemos a iterar, pero en este caso los CSS que tenemos en el objeto.
Y lo vamos a poner en el style exactamente lo mismo.
Esto sería lo mismo que esto, solo que aquí lo hacemos para todas las propiedades que tenemos en el objeto.
Y ya está.
Y ya está.
Hacemos el return elements para el CSS para que se pueda concatenar.
Este return elements es justamente el que nos permite seguir concatenando.
Tú haces el CSS y como me está devolviendo otra vez el return elements, pues puedo concatenar, o encadenar, otra llamada y otra llamada.
Y de hecho podría concatenar o encadenar esta también.
Pero este on todavía no lo tengo.
¿Ves?
Por eso me peta.
Porque me dice on is not a function.
Pero aquí ya es cuestión y es tan fácil como decir elements.on.
No, aquí no, aquí no, perdón, perdón, aquí no, aquí no, aquí no, aquí, elements.on y entonces aquí tendríamos on, esto sería el, o sea, on click, vale.
Estos serían dos argumentos otra vez.
Que siempre podemos utilizar args o podéis poner aquí ya el event y luego aquí el callback.
Vale, y entonces esto sería para cada uno de los elementos, elements, for each, element, document, add, event, listener, no, element no, o sea, document no, el, add, event, listener, click, callback.
Y ya está.
Ah, click no, event, perdón.
Y ya está, con esto, ya está, ya tenemos todo lo de los eventos.
¿Qué os parece?
Súper bien, ¿no?
O sea, ya tenemos también el hecho de que tenemos hola Twitch, pues aquí con el evento y esto le está añadiendo los eventos, punto.
Súper, súper, súper fácil.
Este del itch, este del itch no parece muy difícil y de hecho lo bueno es que solo sería, de hecho, estoy pensando en hacerlo del fade in porque puede ser, bueno, el itch es un momento.
ELEMENTS, itch, el itch hemos dicho que es primero el índice y luego el, vale, esto tiene que ser una función, o sea, el itch recibe una función y en la función el itch recibe una función como parámetro porque es esta función que tenemos aquí, ¿vale?
Y esa función recibirá el índice y el elemento.
Entonces, hacemos ELEMENTS FOR EACHE, esto tiene el elemento y el índice y ejecutamos el FN por cada índice y cada elemento.
Creo que sería así, creo, each, no, pero no me está funcionando, ¿no?
Porque me debería funcionar aquí, índice FOR EACHE, ELEMENT, INDEX, no sé, aquí, ELEMENTS EACHE, de paso la función, que es esta función, a ver, ¿qué me estaba diciendo por aquí?
No puede leer, ah, claro, es que tanto en el ON, este, siempre hay que devolver el ELEMENTS, siempre hay que devolver el ELEMENTS para que pueda, pues no, tampoco.
No puede leer el CSS, hombre, ToroToro, muchas gracias por esos 300 espectadores, ¿qué estabais haciendo con el bueno de ToroToro?
¿A qué os habéis dedicado?
Nosotros estábamos haciendo y creando aquí desde cero nuestro propio jQuery directamente, eso estábamos haciendo, crear nuestro jQuery desde cero con Javascript plano.
Estaba yendo todo bien hasta que hemos llegado a este, que parece una tontería, la verdad.
El EACHE, a ver, .each, que es esto, dice ELEMENTS.FOR EACHE, o sea, ELEMENTS.FOR EACHE, esto aquí funciona, funciona.
O sea, no puede leer de UNDEFINE, o sea, que en el, este ELEMENT, este de aquí, como que no está, a ver, a ver este ELEMENTS, a ver qué está pasando aquí.
Es como que este ELEMENTS es UNDEFINE.
Ah, no, ah, pues está bien, ¿y por qué no lo pilla?
Porque cuando hace esto, esto debería poder devolver, o sea, es que no me está encontrando este de aquí, este de aquí.
Pero este de aquí, a ver, es que no tiene sentido que yo haga esto aquí.
No tiene sentido.
No puede leer UNDEFINE de...
También es verdad que es raro porque solo me aparece uno.
Ah, no, me aparecen los tres.
Qué raro.
Qué raro.
Vamos a ver.
Está esperando, es al revés, ¿no?
El índex, no, pero el índex va primero, ¿no?
O sea, el índex, el FN este, es primero el índice y luego el EL.
Pero esto sí que lo estamos haciendo bien.
Pero me dice que no puede leer propiedades de UNDEFINE leyendo CSS.
Y esto es por el FN.
Pero el FN se lo estamos pasando por aquí, ¿no?
Aquí se lo estamos pasando el índex, el EL, que es este.
Pero como que el EL, como si este EL, que es este, no lo estoy devolviendo.
No es interpretado.
Aún no lo implementas.
Pero lo he implementado, ¿no?
O sea, este CSS.
Claro.
Claro.
Es que no he mutado.
Hostia, hostia.
Aquí está interesante esto, ¿eh?
Aquí está interesante.
Ahora ya sé qué es lo que pasa.
Ya sé qué es lo que pasa.
Hostia.
Este está más complicado.
Este está más complicado.
Porque, a ver, el tema es que, claro, aquí, cuando haces el each,
elements each, que esto lo he pegado.
Ah, no, pero ya de aquí, a ver, si ya aquí lo está devolviendo, ¿no?
O sea, ya está devolviendo que tiene el each.
No, pensaba que todavía no tenía el CSS.
Pero porque el EL, este, no le he implementado el CSS.
O sea, es que es bastante...
Ah, no, pero aquí sí que lo estoy haciendo.
O sea, a ver, esto es un lío, ¿eh?
Esto es un lío porque aquí sí que lo estoy haciendo.
Cuando una vez que utilizo aquí el dólar, ¿ves?
Me dice que es undefined.
Es como que no lo encuentra.
¡Ah!
Ya sé lo que pasa.
Vale.
No sé si me lo ha dicho alguien.
A ver.
typeof, object, no sé qué.
Sí, ya está.
El problema está que cuando es una...
Claro, cuando es un objeto...
O sea, le estoy devolviendo el elemento.
Y lo que está pasando aquí es que le digo,
si es una función, si es un string, pero claro,
si es una función, si es un string,
pero ¿qué pasa si es una instancia?
Si es una instancia de...
Ya está, ya está.
Ya está.
Ya sé lo que ha pachado.
Ya sé lo que ha pachado.
Es esto.
Este es el problema.
Este es el problema.
Claro, si es un string, pero es que esto no es un string.
Esto es la instancia del HTML.
A ver, lo podríamos mirar incluso.
Podríamos decirle...
Si es de tipo string.
Si no, aquí lo que tendríamos es una instance of HTML element.
¿Vale?
Ese es el problema.
Oh, qué interesante.
¿Has visto?
Está interesante.
Se va complicando conforme vas poniéndole más capas.
Entonces, lo que podríamos hacer aquí es en elements,
podríamos dejar aquí en el let.
Aquí lo recuperaríamos así.
Pero si no...
Incluso podríamos hacer esto.
Y aquí...
Elements arc...
Sí...
Vale.
Porque el argumento, esto sería la instancia del HTML.
Y ya está.
Y entonces el elements aquí ya debería estar.
De hecho, creo que sigue petando.
A ver...
Tcls...
Esto por aquí...
Ah, ¿por qué no veo dónde cierran las cosas?
¿Algo me he quedado sin cerrar?
¿O qué me sobra?
¿Vale?
No.
For each is not a function.
Vale.
For each is not a function.
Esto es porque a veces, claro, puede ser solo uno.
Aunque el elements este, el arc, como yo lo estoy haciendo aquí ya,
que es un for each aquí, le estoy pasando solo el elemento,
ya no es un no de list.
Lo cual es bastante interesante.
Entonces, cuando es solo un elemento, aquí ya tengo el HTML element.
Y ahí ya no puedo hacer...
Bueno, puedo hacer esto.
Y ya está.
Puedo hacer esto.
Porque aquí siempre le estoy pasando un elemento.
Siempre le estoy pasando un elemento.
Y ya está.
Ya tengo ahí los colores.
Interesante, ¿eh?
Uh, uh, uh.
Interesante.
A ver, esto se tendría mejor que hacer de otra forma.
Porque esto solo lo queremos hacer en el caso de, por ejemplo,
si instance of arc...
No.
Arc instance of HTML element.
Entonces, element será arc.
Esto sería.
Selector de CSS.
Elemento HTML.
Suelto.
Y ya está.
¡Wow!
Interesante, ¿eh?
Interesante.
Interesante.
Pero, uh, poco a poco, poco a poco.
Ya lo tenemos.
Ya tenemos esto.
Ya tenemos esto.
A ver, una cosa que, pues, para...
Eh...
Hacer...
Ahí.
Mostrar...
Este mensaje al hacer click.
Vamos a hacer lo del fade in, que ese también está interesante.
Además, así vamos a ver una cosa que no mucha gente conoce.
A ver si con esto funciona.
Vale.
Te vamos a mostrar este mensaje al hacer click.
Que vamos a hacer que, al hacer click, recuperamos el mensaje.
Mensaje.
Recuperamos el mensaje.
Y hacemos un fade in.
Bueno, esto va a petar, obviamente, porque ahora mismo el fade in no existe.
Cuando le dé click, petará.
Vale.
Entonces, para hacer el fade in, elements.fade in, que aquí podemos ponerle la duración, creo.
No me acuerdo con la...
Fade in.
Fade in.
Duration y complete, que es un callback.
Bueno.
Con la duración tenemos suficiente.
Elements.foreach.
El index.
Y para cada uno tenemos el elemento.
Lo animamos.
Los keyframes.
Opacity del 0.
Opacity al 1.
Y le ponemos que la duración sea la que tengamos ahí.
Y devolvemos de nuevo los elementos.
Me parece esto una prueba técnica muy chula.
Falta el...
Ah, perdón.
Gracias.
Me parece una prueba técnica muy chula.
Vale.
No funciona.
No funciona.
No funciona, pero creo que es por...
Pues no sé por qué.
No funciona.
Fade in.
Bueno.
Vamos a quitar esto.
Vamos a por aquí.
El punto animate.
De 0 a 1.
Yo creo que esto es así.
Duración.
A ver.
Creo que ahí tendríamos el elemento.
A ver la consola.
Ahí tenemos el elemento.
Pero los keyframes...
A ver, le voy a quitar un momento el opacity este.
O sea, porque no sé si es por culpa de tener el style ahí en línea.
A ver.
Lo que pasa es que...
Bueno, si le doy...
Debería desaparecer y mostrarse.
Pero tampoco.
A ver.
Style opacity...
A ver.
Entrar aquí entra.
A ver.
Voy a mirar.
Animate MDN.
A ver.
Animate keyframes...
No sé qué.
Transform.
No, pero transform.
O sea, no pasa nada.
Esos son los fotogramas clave.
Que yo quiero dos.
Iteraciones.
Infinitas.
No, yo creo que esto de iteraciones es opcional.
Pero bueno.
Lo voy a poner.
A ver.
¡Ah!
La duración.
La duración por defecto.
La duración.
Ya está.
Ya está.
Ya está.
Ya está.
La duración que la había puesto ahí undefined.
Bueno, pero...
Ah, lo que pasa es que luego...
Claro, claro.
Cuando...
Hostia, lo malo es que hay que detectar cuando termina.
Valor de retorno regresa en animation.
Animation.
Current time.
Effect.
Punto finish.
Play state.
Ready.
On finish.
Claro.
Animation.
O sea.
Cuando esta animación...
Animación.
Animation.
Guau, guau, guau.
No vayas, eh.
Cuando esta animation on finish, el elemento style.opacity tiene que ser uno.
Porque si no, se vuelve a quitar.
Se vuelve a quitar.
Como el animate.
El animate muy poca gente lo conoce y es un método nativo del navegador en el que puedes animar.
O sea, si recuperas un elemento, le puedes poner aquí los keyframes, la duración, que se repita y tal.
Bueno, ahora porque lo he modificado.
Pero con esto ya lo tendríamos.
Y esto lo mismo sería con el fade in.
Con el fade out.
¿Sabes?
Podríamos hacer el fade out dándole la vuelta.
Incluso podríamos cambiar aquí animaciones y hacer lo que queramos.
Pero bueno, el fade in era como uno de los métodos más súper rechulones de jQuery.
Y ya hemos visto cómo lo podemos hacer en un momento.
Bueno, ahí os lo dejo.
Os lo dejo que le deis una vuelta si queréis.
Mira, voy a compartir el pedazo de enlace.
Ahora hazlo toggle.
No sería muy difícil.
Al final, el toggle sería mirar cuál es la opacidad que tiene.
Y dependiendo de la opacidad.
El fade in también lo quita del DOM.
¿Lo quita del DOM?
No, el fade in no.
Puede ser que lo quite del DOM.
Será el fade out, dirás, ¿no?
Más streams así midu.
Muy entretenido.
¿Te ha gustado?
La verdad, a ver, faltan un montón de cosas.
Pero al final es repetir constantemente todo lo que hemos hecho.
No está completo el enlace.
Bueno, os paso.
A ver que os hago un...
Igual lo ha cortado.
Os lo acorto.
Ah, no me deja cortarlo porque me dice que no es una URL de válida.
La madre que parió.
Porque dice que es muy larga.
Ah, no.
¿Cuál es el acortador este?
Bueno, da igual.
Pues nada.
Os lo paso luego por disco.
No pasa nada.
Lo próximo es hacerlo con POO y con plugins.
Bueno, con programación orientada a objetos se podría hacer.
Convertirlo en una clase y tal.
Yo creo que lo más interesante es que no mute.
O sea, esto de convertir el array.
O sea, el mutar el elements.
Que, bueno, es un truco barrio bajero.
Innecesario seguramente.
A ver, voy a probar con short URL este.
Vale.
Vale.
A ver.
¿Cómo me lo ha cortado esto?
O sea, ¿qué ha pasado?
Me ha creado lo que le ha dado la gana.
Mira, o sea, yo le pongo esto.
Le doy short URL.
Ah, no.
Nada, es que...
Might be used for spam.
Might have been blocked.
Vaya.
It's not too small.
No creo que sea small.
Yo creo que es problema de que es muy larga.
De que es muy larga.
A lo mejor es que tiene demasiado.
¿Me extraña?
¿La verdad?
¿Me sorprende?
Algo tendrá.
Algo tendrá.
Pero no sé.
Luego, si no, lo paso.
Slack.versal.ab.
Venga, vamos a probar.
Vamos a probar más.
Ah, no.
Que hay que iniciar sesión.
La madre que parió.
Ah, que es de Feral.
Ojo.
Ojo, Feral.
Vamos a probarlo aquí en vivo en directo.
Feral.
Vamos a ver.
Vamos, Feral.
Crear link.
Custom Slack.
Vamos a poner miduquery.
Create your link.
¿Cómo te gusta?
Ojo.
Ojo que lo ha hecho, eh.
Ojo.
Ojo.
Ojo.
Donde han fallado todos.
Donde han fallado todos.
Vamos ahí.
Feral.
Se gana el cielo, Feral.
Se gana el cielo, Dios mío.
Cómo se la ha jugado ahí, Dios mío.
Donde han fallado todos.
Donde han fallado todos.
Ahí está, Feral.
Ahí está.
Por todo lo alto.
Di que sí, hombre.
Feral.
Ahí está.
Increíble.
Vamos a darle una estrellita.
Joder.
Vamos a darle una estrellita.
Se la ha ganado.
Se la ha ganado.
Dale estrellitas.
Dale estrellitas que se la ha ganado.
Se la ha ganado.
Se la ha ganado.
Está muy bonito, eh.
Te encanta Chakra, eh.
Le das a todo con Chakra y a saco.
Pero está muy chulo.
Muy chulo.
Me gusta.
Ah, no.
A lo mejor no es Chakra.
A lo mejor es el otro, ¿no?
A lo mejor.
Creo que es Chakra, eh.
Por el Ayual.
¿Es Tailwind?
Hostia.