DWEC

Appearance

El navegador ​

Objetivo ​

Explorar el navegador como entorno de ejecución de JavaScript, identificando algunas de sus capacidades, objetos y herramientas.

Entrega ​

Documenta la realización de todos los apartados de la actividad mediante:

  • Capturas de pantalla que muestren los pasos realizados y sus resultados.
  • Explicaciones breves y con tus propias palabras de lo realizado y observado. Puedes utilizar agentes IA como herramienta de consulta, pero no para generar directamente las explicaciones.

Importante

  • La documentación con la actividad resuelta deberá estar publicada en GitHub Pages antes de finalizar el plazo de entrega.

  • También se entregará en AULES un PDF de la actividad (generado a partir del archivo .md de la actividad y utilizando la extensión Markdown PDF de VS Code).

1. Navegador y motor JavaScript ​

Identifica el navegador que estás utilizando y responde:

  1. Indica el nombre y la versión del navegador.
  2. Identifica el motor JavaScript que utiliza.
  3. Indica otro navegador que utilice el mismo motor JavaScript.
  4. Indica un navegador que utilice un motor JavaScript diferente.

2. Consola JavaScript ​

Abre las DevTools del navegador y accede a la pestaña Console.

Ejecuta las siguientes instrucciones:

js
2 + 2;
js
console.log("Hello DWEC");
js
navigator;
js
navigator.userAgent;
js
window;
js
window.innerWidth;
js
document;
js
document.URL;

¿Por qué al ejecutar document la consola no lo muestra de la misma forma que los objetos navigator y window? ¿Cómo podemos visualizar document como un objeto JavaScript?

¿Qué representan los objetos navigator, window y document en el navegador?

3. Exploración de las DevTools ​

Accede a una página web y localiza las siguientes herramientas de las DevTools:

  • Elements.
  • Console.
  • Sources.
  • Network.
  • Application.
  • Performance.

Utiliza cada una de ellas e indica brevemente qué información permite consultar o qué operación permite realizar.

En Network, recarga la página y localiza al menos:

  • Un documento HTML.
  • Un archivo JavaScript.
  • Una hoja de estilo CSS.
  • Una imagen, si la página contiene alguna.

4. Capacidades del navegador ​

Desde la consola ejecuta:

js
document.title;

A continuación:

js
document.title = "DWEC";

Después ejecuta:

js
document.body.style.backgroundColor = "lightgray";

Finalmente:

js
alert("JavaScript is running in the browser");

Describe qué efecto produce cada instrucción e identifica qué objeto proporcionado por el navegador se está utilizando.

Los cambios no persisten

Los cambios realizados desde la consola afectan a la página cargada en ese momento, pero no modifican los archivos originales almacenados en el servidor.

Al recargar la página, normalmente se recuperará su estado original.

5. Compatibilidad ​

Accede a Can I Use y consulta la compatibilidad de las siguientes características:

  • CSS Grid Layout.
  • WebP image format.

Para cada una indica:

  1. Su finalidad.
  2. Su compatibilidad actual con Chrome, Firefox, Edge y Safari.
  3. Una versión de algún navegador antiguo que no la soporte.

Explica brevemente por qué es importante comprobar la compatibilidad de determinadas características antes de utilizarlas en una aplicación web.