Guardar datos en el navegador, trabajar con fechas, consultar la pantalla y dibujar en un canvas.
localStorage: Guarda textos en el navegador, que siguen ahí al volver a la página.
canvas.getContext(): Da acceso a las herramientas de dibujo de un <canvas>.
Guardar datos en el navegador, trabajar con fechas, consultar la pantalla y dibujar en un canvas.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Guarda textos en el navegador, que siguen ahí al volver a la página: preferencias, el modo oscuro, un borrador. Para objetos, conviértelos con JSON.stringify y JSON.parse. No guardes datos privados.
📌 Nota. Este ejemplo no se ejecuta aquí: la vista previa no tiene almacenamiento. Pruébalo en tu propia página.
Fechas y horas. new Date() es ahora; los meses van de 0 (enero) a 11 (diciembre).
Da formato a una fecha según el idioma.
Comprueba una media query desde JavaScript: el ancho, el modo oscuro del sistema, si se prefiere menos movimiento…
Esencial. Da acceso a las herramientas de dibujo de un <canvas>: rectángulos, trazos, círculos, texto, imágenes.
Reparten el código en varios ficheros (módulos): uno exporta funciones o datos y otro los importa. El script tiene que cargarse con <script type="module">.
Ventanas del navegador para avisar, pedir confirmación o pedir un texto. Bloquean la página y no se pueden diseñar: en una web, mejor un <dialog>.
📌 Nota. No se ejecuta aquí: la vista previa no permite ventanas emergentes.
Guardar datos en el navegador, trabajar con fechas, consultar la pantalla y dibujar en un canvas.
Código del tema: localStorage.setItem("tema", "oscuro");
Guardar datos en el navegador, trabajar con fechas, consultar la pantalla y dibujar en un canvas.
Cada entrada lleva una explicación corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para cambiarlos y ejecutarlos: lo que escriben con console.log() sale en la consola.
Esencial. Guarda textos en el navegador, que siguen ahí al volver a la página: preferencias, el modo oscuro, un borrador. Para objetos, conviértelos con JSON.stringify y JSON.parse. No guardes datos privados.
📌 Nota. Este ejemplo no se ejecuta aquí: la vista previa no tiene almacenamiento. Pruébalo en tu propia página.
Fechas y horas. new Date() es ahora; los meses van de 0 (enero) a 11 (diciembre).
Da formato a una fecha según el idioma.
Comprueba una media query desde JavaScript: el ancho, el modo oscuro del sistema, si se prefiere menos movimiento…
Esencial. Da acceso a las herramientas de dibujo de un <canvas>: rectángulos, trazos, círculos, texto, imágenes.
Reparten el código en varios ficheros (módulos): uno exporta funciones o datos y otro los importa. El script tiene que cargarse con <script type="module">.
Ventanas del navegador para avisar, pedir confirmación o pedir un texto. Bloquean la página y no se pueden diseñar: en una web, mejor un <dialog>.
📌 Nota. No se ejecuta aquí: la vista previa no permite ventanas emergentes.