Generar serie con prefijo usando JavaScript
En este post vamos a ver cómo generar una serie numérica con JavaScript en donde se solicita lo siguiente:
- La serie debe tener un prefijo
- Todos los números deben tener la misma cantidad de cifras, así que se debe rellenar con ceros en caso de ser necesario
- La serie debe iniciar en un número y terminar en otro, siempre incluyendo el prefijo
Por ejemplo, generar una serie que diga “oferta” desde el 1 hasta el 100. Quedaría así:
Agregar ceros a número con JavaScript
El día de hoy veremos una función muy simple con JavaScript para agregar ceros a la izquierda de un número hasta que el mismo tenga cierta longitud, es decir, rellenar con ceros a la izquierda hasta tener las cifras deseadas.
Esto funciona al generar series, entre otros casos. Veamos cómo hacerlo con JavaScript.
Calcular edad de una persona con JavaScript
Al usar JavaScript con la clase Date podemos calcular el tiempo exacto transcurrido entre 2 fechas, pero los humanos (o al menos yo) calculamos las edades de manera distinta.
Cuando calculamos la edad de una persona necesitamos saber el día de nacimiento y su cumpleaños en el año actual. También revisamos si ya ha cumplido años en este año o todavía no (para hacer la diferencia de años), contamos los meses completos y los días transcurridos desde el mes completo más cercano.
Por ello es que el algoritmo es totalmente distinto, ya que no solo se trata de obtener el tiempo exacto, sino de hacerlo como lo hacemos mentalmente. Justamente de eso trata el ejercicio de hoy.
JavaScript: convertir archivo a base64
En el post de hoy veremos cómo convertir un archivo (seleccionado en un input de tipo file) a su representación en base64 como cadena usando JavaScript.
Técnicamente hablando, vamos a convertir un File a un string en base64 usando FileReader.
Aunque base64 ocupa más tamaño que el archivo original, en ocasiones es necesario convertir un fichero binario a este formato para su fácil transporte o almacenamiento.
Nota: en este ejemplo aprenderás a convertir un archivo seleccionado en un input, pero puedes hacer lo mismo con un archivo recuperado del OPFS o incluso un archivo descargado con fetch; las posibilidades son infinitas.
Extensión de archivo con JavaScript
En este corto post de programación con JS vas a aprender a obtener la extensión de un archivo a partir de su nombre. Por ejemplo, si el archivo es “hola.go” serás capaz de obtener solo la extensión “go”, sin importar cuántos puntos tenga el nombre del archivo.
Será un ejercicio sencillo en donde vamos a ubicar el índice de un carácter con JavaScript y también vamos a cortar la cadena con substring.
JavaScript: obtener resolución de imagen
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.
JavaScript y OPFS: almacenar y leer archivos
En este artículo voy a enseñarte a usar el Origin Private File System con JavaScript para almacenar, leer y eliminar cualquier tipo de archivo en el navegador web.
Sistema de archivos en la web con JavaScript y OPFS
Puedes probar la demostración aquí: https://stackblitz.com/edit/vitejs-vite-hl34zf?file=index.html
Como lo dije anteriormente, el Origin Private File System ha llegado para revolucionar las cosas con JavaScript. Gracias al OPFS podemos tener un sistema de archivos completo con JavaScript directamente en el navegador web.
Con esto, podemos escribir cualquier tipo de archivo en el web browser, así como descargarlo más adelante. Todo ello sin depender de localStorage o cosas similares; es una tecnología diferente.
Se pueden guardar documentos de texto, imágenes, vídeos e incluso bases de datos, además de que no hay necesidad de pedir permiso o confirmación al usuario, todo es transparente.
Encabezados para usar OPFS en JavaScript (CORS 2)
El Origin Private File System (también llamado OPFS) permite tener un sistema de archivos completo directamente en el navegador web con el que podemos interactuar a través de JavaScript.
Para que OPFS esté disponible necesitamos servir el contenido con 2 encabezados importantes:
- Cross-Origin-Opener-Policy: same-origin
- Cross-Origin-Embedder-Policy: require-corp
No importa el lenguaje de programación ni el servidor usado para servir los archivos; el código JavaScript debe ser servido con un servidor que envíe esos headers. Si no lo hacemos de esa manera no vamos a poder acceder al OPFS.