En esta lección nos familiarizaremos con window. Es un objeto global proporcionado por el navegador.
A través de él se controlan las ventanas (pestañas) en el navegador. Contiene funciones para abrir una pestaña, controlar la posición de la página y mucho más:
// Abre una nueva pestaña
window.open();
El objeto window está disponible en la consola de DevTools. Intentemos llamar al método del ejemplo anterior allí.
Aquí hay algunos ejemplos de sus capacidades:
// Devuelve un objeto que contiene información sobre la pantalla
window.screen;
// Screen {availWidth: 1280, availHeight: 775, width: 1280, height: 800, …}
// Desplaza la página hasta el punto (x-coord, y-coord)
window.scrollTo(0, 1000);
// Altura y ancho visibles de la página
// Cambian cuando se cambia el tamaño de la ventana
window.innerHeight;
window.innerWidth;
Además, dentro de window se encuentra el objeto document. Lo utilizaremos para trabajar con el contenido de la página en lecciones posteriores.
El objeto window establece el contexto de ejecución global. La etiqueta window almacena todas las demás propiedades y objetos globalmente accesibles dentro de sí misma. Cuando llamamos a funciones globales como alert() o console.log(), el navegador las busca en el objeto window. En otras palabras, en realidad estamos llamando a window.alert().
Lo mismo ocurre con todas las demás funciones utilizadas directamente y sin importar:
console.log('hey');
// window.console.log('hey');
Math.abs(5);
// window.Math.abs(5);
// Incluso se puede hacer esto
close();
// en lugar de window.close()
Peligro del estado global
La existencia del objeto window es una implementación técnica de JavaScript en la que no se debe confiar al desarrollar.
Consideremos este código:
window.globalProperty = 'Las variables globales son malas';
Al establecer una propiedad en window, automáticamente hacemos que esa propiedad esté disponible desde cualquier parte del código del navegador. En otras palabras, hemos creado una variable global.
Estas variables causan muchos problemas durante el desarrollo. No está claro de dónde provienen ni quién las modifica.
No se puede confiar en las variables globales. Existe la posibilidad de que se realicen cambios en ellas, lo que a menudo conduce a errores en el funcionamiento.
Además, en las páginas web se pueden encontrar varios scripts que no están relacionados entre sí. Pueden ser contadores de sistemas analíticos, herramientas de marketing y otras cosas similares. Todos ellos tienen acceso al mismo window.
Debido a esto, podemos encontrarnos en una situación en la que establecemos propiedades en window en un script y accidentalmente interrumpimos el funcionamiento de otro script que utiliza la misma propiedad global.
En un código bien escrito, el objeto window nunca se encuentra directamente. Pero es importante saber de su existencia para comprender cómo funciona JavaScript en los navegadores.
Trabajo independiente
- Abre la consola en tu navegador.
- Examina el objeto
window. Intenta abrir una nueva pestaña:
window.open();
Materiales adicionales
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
