Días con RxJS — Día 18

Jorge Cano
Aug 25, 2017 · 3 min read

Si estas leyendo esto, bienvenido al cassette número 18 de 30

Si llegaste aquí y no viste ninguno de los videos anteriores, te recomiendo empezar con el primero:


Este es el día y vamos a jugar un poco con algunas funciones!


Lo primero que vamos a hacer como siempre es generar el archivo js y el html para poder jugar un poco con todo esto.

Pero esta vez en nuestro html vamos a crear un input, vamos a empezar a interactuar con nuestro html.

Lo que vamos a hacer es crear un observable sobre este input, para poder empezar a jugar con lo que escribimos.

Para ello en nuestro ejemplo-01.js:

Lo que hacemos es obtener el input en nuestra constante para poder ver sus eventos.

Luego nuestra variable receptor, lo que va a hacer es un observable que va a obtener los eventos ‘keydown’ de input, generar un map para obtener el valor ‘key’ del evento y luego filtrar los que son vacios.

De esta forma vamos a tener el valor ‘key’ del evento evitando los espacios .

A lo ultimo nos subscribimos y cada acción que se genere con next lo enviaremos a una función que concatenara todos los valores ingresados para imprimirlos en la consola.

El resultado:

De esta forma, podemos ver como fuimos tomando cada uno de los datos por medio del tiempo.


Ahora usemos otro evento para seguir jugando, que va a ser el ‘mousemove’ con este vamos a ir tomando la posición del mouse cada x tiempo.

Para ello vamos a modificar nuestro ejemplo-01.js

Con esto, nuestro “mouseReceptor” lo que va a hacer es tomar el evento del ‘mousemove’ dentro de todo el document (ósea de nuestro html), y vamos a mapear el evento entero, con una salvedad que este observable va a ejecutar el next en el tiempo que nosotros le indiquemos en el ‘thottleTime’, si ponemos 1, va a ser instantaneo, pero si ponemos 1000 por ejemplo vamos a ver que se ejecuta cada segundo.

El resultado de esto es el siguiente:


Ya que estamos podemos jugar un poco mas, lo que vamos a hacer son dos cosas ahora, la primera es agregar un botón para que pause o arranque con la revisión que vamos a hacer sobre el mouse, y la segunda es agregar span para insertarle el texto que escribimos y “siga” al mouse, para ello vamos a modificar nuestro html.

Como veras agregue un button y un span, para poder manipularlos desde nuestro js, que quedo así:

Lo primero que hacemos es obtener el botón y el span para poder utilizarlos, luego nuestra función del mouse, cambio, ahora obtenemos los parámetro pero los usamos para modificar la posición del span y por ultimo generamos un observable para el evento click dentro del botón y así poder “detener” el seguimiento del texto al mouse.

Y el resultado final es:


El código de lo que vimos esta en:

Esto es todo por hoy!

Te gusto? deja un comentario, contále a tus amigos desarrolladores, seamos un montón en esta aventura de 30 días.


)

Jorge Cano

Written by

Angular Google Developer Expert — Owner de @ngbaires — Profe — Principal Engineer at HeroDevs— Nativescript Developer Expert — ng-conf organizer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade