Javascript

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap. Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial. A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea. ...

En este post te mostraré cómo obtener un número aleatorio indicando un mínimo y un máximo usando JavaScript. Es decir, un número aleatorio entre dos números con JS. Si buscas un generador listo para ser usado puedes encontrar un generador de números aleatorios online en mi otro post, mismo que usa la función aquí expuesta. ...

En este post te mostraré cómo hacer una relación o asociación entre tablas con el ORM Sequelize para hacer la relación a nivel base de datos y también para traer los datos usando la asociación. Es decir, lo que tiene que ver con foreign key, inner join, left join, etcétera. Te mostraré cómo insertar datos y solo especificar la clave foránea, contrario a lo que se muestra en la documentación en donde se insertan ambos modelos a la vez. La razón es porque, por ejemplo, si un trabajador pertenece una oficina, solo importa guardar el id de oficina en caso de que esta ya se haya creado antes, y no se requiere guardar una oficina por cada trabajador. ...

En este corto post te mostraré cómo limpiar un elemento HTML con JavaScript, es decir, algo como el método “empty” de jQuery, pero con JavaScript puro. Por ejemplo, con esto que te mostraré sabrás cómo eliminar todo el contenido de un elemento HTML ya sea una tabla, una lista, etcétera. A lo que haremos también se le conoce como Remover todos los hijos de un elemento HTML. ...

En este post te mostraré el atributo a establecer para aceptar solo imágenes en un campo de formulario de HTML 5 de tipo file, es decir, de un input type file. Por ejemplo, aceptar todo tipo de imágenes, solo imágenes PNG, etcétera. Recuerda que esto solo es para validar del lado del cliente y que es una ayuda al usuario, pues no implica seguridad que se debe aplicar del lado del servidor. ...

En este post te mostraré cómo prevenir que se seleccione otra opción en un select o lista desplegable de HTML usando JavaScript. Por ejemplo, evitar que el select cambie de opción si el usuario no acepta determinada cosa. Lo vamos a hacer usando JavaScript puro. ...

Hoy te mostraré cómo puedes obtener la ubicación de un usuario o visitante de tu sitio web a través de su IP, consumiendo una API para la geolocalización o ubicación a partir de la IP. De este modo vas a poder conocer la ubicación del usuario (con latitud y longitud) sin solicitarle permisos extra, aunque quiero dejar claro que obtener la ubicación por IP es mucho menos precisa que obtenerla a través del GPS. Si solo quieres una ubicación aproximada, esta API funcionará de maravilla y al final vas a tener las coordenadas de su ubicación. ...

Hoy te voy a mostrar un servicio gratuito y sin límite para obtener la IP del usuario. Es decir, se tiene que hacer una petición al servidor y el mismo te devuelve la IP del host. Esto es útil para obtener la IP desde el cliente, sin importar el lenguaje de programación. Además, también sirve para cuando necesitamos consumir otras APIs (por ejemplo, una que te diga el clima) que requieren la IP. Veamos entonces esta API para obtener la IP pública. Te voy a mostrar un ejemplo para obtenerla con JavaScript del lado del cliente, pero se puede consumir desde cualquier lenguaje que hable HTTP. ...

En este post te mostraré cómo leer códigos de barras en el navegador web ya sea de una computadora o dispositivo móvil, usando la cámara del teléfono o la cámara web; y el lenguaje nativo JavaScript. Esto hace que podamos hacer nuestras aplicaciones web todavía más diversas y con más características; en un ejemplo simple se me ocurre escanear el código de barras para un sistema de ventas. La librería que vamos a usar se llama QuaggaJS y es capaz de leer códigos de barras con formato EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 y CODABAR. Con esto, podremos leer códigos de barras en dispositivos móviles o computadoras en tiempo real. ...

En este post te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API. De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google. Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final. Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete. ...