En el post de hoy vamos a programar con JavaScript del lado del cliente para obtener el tamaño original de una imagen, es decir, su alto y ancho originales. Podemos hacer esto con una imagen existente (etiqueta img) o con una creada a partir de la clase Image. Te mostraré un ejemplo de cómo hacerlo a partir de una imagen seleccionada en un input tipo file. ...
En este post sobre Sweetalert 2 (Sweet Alert 2) veremos un ejercicio práctico: cómo solicitar el pago del cliente y mostrar el cambio (Dinero que se devuelve al comprador cuando entrega una cantidad superior al importe) en la misma alerta, validando todo. Veremos cómo escuchar el cambio del input de la alerta, modificar el HTML de la misma y validar según una variable externa. Recomiendo ver el tutorial de SweetAlert2 antes de leer este artículo. ...
En este corto post de programación con JS puro vamos a ver cómo resetear, reiniciar, reestablecer o limpiar un elemento input de tipo file. Explicado con otras palabras veremos cómo eliminar el archivo seleccionado de un input tipo file o input de archivo, para que parezca que no se ha seleccionado un archivo. Lo haremos con JavaScript puro para que puedas aplicarlo a cualquier framework. ...
En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript. Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2. Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input. Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”. ...
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. ...
En este post te mostraré cómo ligar un input con una variable de Angular, de manera que si la variable cambia en el input, se cambie en los demás lugares. Y de manera similar, si la variable cambia desde otro lugar se refresque en el input. Todo esto será con Angular y con el two way binding. Por cierto, esto que te enseñaré será muy simple por si solo necesitas un input. En caso de que quieras algo más avanzado mira los formularios con Angular. ...
En este post te mostraré un seleccionador de colores o input de tipo color (también conocido como color picker) que me gustó para su uso con el framework Vue. El picker del que hablo se llama vue-color y permite usar varios selectores de color. ...
En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas. De este modo vas a poder comprobar si un formulario se envía dependiendo de los valores que el usuario haya colocado. Te enseñaré un ejemplo para que veas cómo validar un formulario en JavaScript apoyándote además de la validación nativa de HTML. Solo recuerda que la validación del lado del cliente se hace por mera decoración, y no por seguridad; ya que la seguridad se aplica en el lado del servidor. ...
En este post te enseñaré a enfocar un campo de texto o input de HTML usando el Framework Vue. Aunque parezca algo muy básico, en realidad hay algunos casos en donde enfocar no es tan fácil. Te enseñaré cómo enfocar un elemento con Vue, y también con Vuetify. ...
En este blog te he enseñado cómo subir uno o varios archivos con HTML y PHP puro, así como subir un archivo con AJAX usando FormData. Ahora te voy a enseñar cómo subir varios archivos (ilimitados o sin una longitud fija) usando JavaScript, AJAX, FormData y PHP. ...