Javascript

En este post te mostraré otro sistema que he realizado recientemente. Se trata de un programa para llevar el control de eventos por tiempo, en donde se cobra por el tiempo que la persona ingresa al evento. Esto está pensado para controlar el acceso a eventos como parques, piscinas, juegos, etcétera; ya que se registra el tiempo de entrada y de salida a partir de un número de pulsera. Cuando la persona sale del evento se realiza el cobro del mismo y se imprime un ticket. Las características del software son: Control de aforo: Indica cuántas personas están dentro del establecimiento o evento Registro de datos con número de pulsera para tener un identificador Posibilidad de acceder desde el teléfono o cualquier dispositivo para que una persona esté en la entrada y otra en la salida del evento a través de la LAN Opción para anular los tickets Reporte de ventas en donde se incluyen filtros por fecha y hora, así como un reporte que indica la cantidad de tickets vendidos o anulados. Reporte de ticket con mayor costo y ticket con menor costo Impresión de tickets en impresora térmica Realmente este programa fue pensado para llevar el control de eventos a donde asisten niños acompañados con sus padres (en donde dependiendo del tiempo de la estancia, se realiza el cobro) pero se puede adaptar a cualquier circunstancia. ...

Hoy te mostraré cómo usar la función debounce con el framework Vue y obviamente el lenguaje de programación JavaScript. Implementar esta función es un poco confuso debido a la definición de métodos dentro de los componentes de Vue y por la confusión que genera la función, ya que la misma genera otra función y solo debe ser definida una vez al inicio. Pero bueno, vamos por partes. Verás que a partir de esto podrás usar debounce en tus componentes de Vue. ...

Recientemente (al momento de escribir este post) Chrome se ha actualizado para ser más seguro, y en ocasiones nos va a lanzar el error que dice: Access to fetch at ‘dominio’ from origin ‘otro_dominio’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local. Es un error de CORS pero no de los errores que conocemos. Este es nuevo, y dice: The request client is not a secure context and the resource is in more-private address space local. Así que en este post te mostraré de qué va ese error y por qué me interesa. ...

En este post de programación con JavaScript y Vue te enseñaré a importar una librería de NPM a un componente de Vue. Si bien esto es algo muy simple, en ocasiones podemos olvidarnos o perdernos. Por ello es que en el post de hoy te enseñaré a importar un paquete de NPM desde un componente de Vue y usarlo dentro de ese componente a través de require. Estoy suponiendo que usas la Vue CLI con Webpack, pero incluso si no lo haces, esto podría darte una ayuda. ...

En este post de programación con el framework Vue o Vue.js te mostraré cómo acceder a data cuando regresamos los datos o el objeto data de nuestro componente. Esto es necesario porque en ocasiones necesitamos acceder a los datos de Vue desde la definición. Al final esto no tiene tanto que ver con Vue.js, sino con JavaScript. Pero incluso así en ocasiones podemos olvidar lo que sucede con los objetos anónimos. ...

En este corto post te mostraré cómo cambiar el color de fondo o background de un canvas HTML usando JavaScript. Básicamente vamos a colorear todo el canvas o limpiar el canvas dibujando un rectángulo que tendrá las mismas dimensiones que el canvas. Al final con lo que te mostraré aprenderás a cambiar el color de un canvas con JavaScript. ...

En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel. Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera. Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas. Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento. ...

En este post sobre programación web HTML y JavaScript te mostraré cómo hacer que el usuario pueda dibujar en un canvas usando el mouse, algo así como un paint muy básico. De esta forma vamos a permitir que el usuario pueda dibujar y pintar sobre el canvas usando el ratón. Más adelante podrías adaptar este código para cualquier otra cosa, incluso para crear un paint completo. Aquí solo te mostraré cómo permitir que el usuario dibuje en la web con un color y grosor determinado. ...

En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript. Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar. Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar. Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post. ...

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS. De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo. Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL. ...