javascript

Códigos de barras con JavaScript - Productos

Códigos de barras con JavaScript usando JSBarcode

Códigos de barras con JavaScript

En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript.

Vamos a generar códigos de barras con JavaScript en 3 elementos:

  1. SVG
  2. Canvas
  3. Imagen

Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG.

Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript.

Continue reading…

Vista general - antes de imprimir

Javascript – mostrar solo algunos elementos al imprimir página web

Resumen

En este post te voy a mostrar a ocultar elementos al imprimir una página web, exceptuando algún elemento como un párrafo, imagen o encabezado.

Por ejemplo, imprimir algo con Javascript y CSS pero quitando algunos elementos excepto un contenedor o elementos que cumplan cierto criterio.

Para lograrlo vamos a usar CSS y Javascript. El CSS será usado para ocultar al imprimir, y el JavaScript para agregar y remover algunas clases al momento de imprimir.

Continue reading…

Objeto a arreglo en JavaScript – Conversión

Convertir un objeto a arreglo en JavaScript

En este post te voy a mostrar a convertir un objeto o diccionario a un arreglo o array en JavaScript.

Vamos a repasar 3 funciones:

  1. Object.entries
  2. Object.values
  3. Object.keys
Objeto a arreglo en JavaScript usando Object.entries, values y keys

Objeto a arreglo en JavaScript usando Object.entries, values y keys

Tema de la captura: SynthWave ’84.

Esas funciones nos van a servir para convertir un objeto a arreglo en JavaScript de 3 formas. El primero extrayendo cada clave y valor como un nuevo arreglo, el segundo extrayendo únicamente los valores y el tercero obteniendo únicamente las claves.

Continue reading…

Directiva v-for en Vue JS

Resumen

En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for.

v-for permite iterar arreglos, objetos y también hacer ciclos.

Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado.

Nota: a través de los ejemplos usaré Bootstrap 4 para un mejor diseño, aunque esto no va a interferir con el tema principal de v-for y Vue.

Continue reading…

Obtener ubicación con JavaScript y enviarla a PHP

Resumen: en este post te mostraré a obtener la ubicación de un usuario para enviarla a un servidor con PHP, usando JavaScript y PHP.

Vamos a usar JavaScript para acceder a las coordenadas GPS del dispositivo, y después vamos a usar fetch para enviar los datos a un servidor con PHP usando JSON.

Obtener coordenadas GPS con PHP y JavaScript

Nota: vamos a suscribirnos a las actualizaciones de ubicación como en otro post que vimos anteriormente.

Continue reading…

Obtener actualizaciones de ubicación con JavaScript

Resumen: en este post te mostraré a escuchar el cambio de ubicación de un dispositivo con JavaScript. Por ejemplo, vigilar el cambio de ubicación en un dispositivo móvil cuando el usuario se mueve, camina o conduce.

Vamos a usar JavaScript y la API ofrecida a través de navigator.geolocation. Concretamente veremos la función watchPosition.

Actualizaciones de ubicación con JavaScript y geolocation API

Nota: recomiendo primero dar un repaso por mi otro post para ver la introducción al acceso a la ubicación desde JavaScript.

Si quieres ver lo que haremos al final del tutorial, puedes ver esta demostración. También puedes ver el repositorio en GitHub.

Continue reading…

Acceder a la ubicación con JavaScript

Resumen: en este post vamos a ver cómo obtener la ubicación del usuario (coordenadas) usando JavaScript.

Gracias a este método podremos obtener la ubicación precisa de un teléfono, tableta o computadora, pues mientras se cuente con un navegador actualizado y GPS o internet se puede obtener la latitud y longitud de un dispositivo.

Para acceder a la ubicación con JavaScript vamos a usar navigator.geolocation y su método getCurrentPosition.

También vamos a manejar los permisos de acceso a la ubicación desde el navegador.

Puedes acceder a la demostración aquí, y al repositorio en GitHub aquí.

Continue reading…

Juego de Memorama en JavaScript – Tutorial

Resumen: en este post te voy a explicar cómo hacer el juego de memorama en JavaScript. Pondré el código fuente y una demostración en línea.

Características del memorama con JavaScript

Memorama programado en JavaScript – Tutorial de juego

Este juego de memorama en JS que vengo a presentar tiene las siguientes características:

  • Totalmente responsivo, es decir, se adapta a cualquier pantalla
  • Las imágenes se pueden cambiar
  • Intentos máximos modificables
  • Alerta para cuando ganas y cuando pierdes
  • Código fuente modificable

Nota: otro videojuego que desarrollé con JavaScript fue el de snake.

Continue reading…

Mezclar arreglo en JavaScript

Resumen: en este post te mostraré a mezclar los elementos de un arreglo en JavaScript, de tal manera que los items del array estén en un orden distinto, algo así como randomizar el arreglo o hacerlo aleatorio.

Voy a demostrarlo con ejemplos y con una demostración que podrás probar en línea.

Continue reading…

Cómo imprimir en una impresora térmica

Este post es una recopilación de artículos que te muestran cómo mandar datos a una impresora térmica.

Como sabemos, las impresoras térmicas sirven para muchas cosas; por ejemplo, imprimir tickets, facturas, detalles de turnos, comprobantes de pago, etcétera.

La impresión de tickets puede hacerse desde el lado del cliente o del servidor; cuando subimos nuestra app web a internet se necesita imprimir forzosamente del lado del cliente.

Aquí hay algunos posts que demuestran cómo imprimir a una impresora térmica:

  • Imprimir ticket con PHP: la ventaja es que se puede cortar el papel y la impresión se personaliza sin que el usuario interactúe demasiado.
  • Imprimir ticket con JavaScript: imprimir con estilos personalizados, pero perder posibilidad de controlar la impresora a bajo nivel, además, el usuario debe confirmar la impresión.
  • Imprimir ticket con plugin (recomendado): es como combinar las dos anteriores, la única diferencia es que hay que descargar un plugin.

Recuerda, si quieres un desarrollo personalizado también puedo hacerlo.