El BOM o Browser Object Model es un concepto introducido recientemente en el mundo del desarrollo web. Con él y los diversos objetos que lo componen, podemos acceder y modificar las propiedades del navegador desde nuestro código JavaScript. En este post, te enseñaremos cuáles son los métodos del objeto window del BOM, fundamentales para modificar nuestro navegador.
¿Qué son los métodos del objeto window?
En el objeto window existen tanto métodos como propiedades. Como has visto en nuestro post sobre el objeto navigator de BOM, existen muchas propiedades que nos permiten acceder a datos del navegador y el dispositivo en el que se consulta. A continuación, te ponemos un par de ejemplos de propiedades del objeto window.
window.innerHeight
Esta propiedad nos permite conocer el alto de la sección de contenido de la ventana del navegador. Para ello, basta con insertar window.innerHeight en nuestro código y obtendremos el resultado del alto de la pantalla. Lo mismo sucede con el ancho al insertar la propiedad window.innerWidth.
Puedes probar estas propiedades directamente en la consola de tu inspector web. Allí obtendrás como respuesta el alto o ancho actual de la ventana de tu navegador. Puedes intentar cambiar este tamaño y volver a ejecutar el método para obtener el nuevo resultado. Para aprender a usar esta herramienta, puedes leer nuestro post sobre cómo funciona el inspector web o, si usas Google Chrome, revisar DevTools.
Conocer las propiedades del objeto window de ancho y alto nos sirve, por ejemplo, para ejecutar estilos en la página web que estamos desarrollando o mostrar y ocultar elementos de la UI.
window.location
Al insertar esta propiedad dentro de nuestro código, obtendremos como respuesta algunos detalles de la URL en la que nos encontramos, como el host, href, protocol, port, pathName, etc.
Una de las acciones que podemos ejecutar con esta propiedad es modificar la página en la que estamos. Podemos, por ejemplo, buscar google.com desde nuestro código. Para ello, podemos usar el segmento href de location de la siguiente manera:
window.location.href = “https://google.es”
Si no escribes el protocolo https antes de la página web a la que quieres dirigirte, el navegador intentará enrutarte dentro de la página en la que te encuentras actualmente.
Este tipo de acciones nos comprueban que tanto los métodos como las propiedades del objeto window que representa al BOM son la forma en la que podemos interactuar con el navegador desde JavaScript.
Ahora, los métodos del objeto window del BOM son funciones con las que podemos no solo acceder, sino también modificar los distintos datos del navegador. Para ello, basta con insertar el valor que queramos dentro de los paréntesis del método. En algunos métodos, este valor será de tipo number y, en otros, será de tipo string.
¿Cuáles son los métodos del objeto window?
En nuestro post sobre el objeto window de BOM, te hemos dicho que este objeto representa el navegador y que de él se despliegan otros objetos que nos dan acceso a muchísimas propiedades y métodos. El listado completo de estos métodos lo puedes encontrar en el apartado methods en el artículo sobre window en la página oficial de Mozilla Developer Network.
Ten presente que los métodos y propiedades en color rojo en la MDN están deprecados. Por ello, te invitamos a leerlos y probarlos con cautela. Si tienes alguna duda sobre el soporte de cualquiera de estos métodos, te recomendamos usar la página web CanIUse.com.
A continuación, te explicaremos cómo funcionan algunos de los métodos del objeto window:
window.alert
Utilizar el método window.alert nos permite generar un aviso en el navegador. Dentro de este método, podemos insertar un valor de tipo string con el mensaje que queramos darle al usuario.
window.alert (‘Hola’)
Recuerda que todos los métodos que cuelgan del objeto window se encuentran en un ámbito global. Es decir, no tenemos que acceder a ellos usando window. Entonces, podríamos acceder al método window.alert desde alert directamente así:
alert (‘Hola’)
window.scrollTo
Entre los muchos métodos del objeto window que se concentran en el scroll, el método scrollTo nos permite hacer el recorrido desde donde nos encontramos hacia una sección diferente de la página web. Para ello, necesitamos definir las coordenadas de la sección usando dos parámetros. Entonces, por ejemplo, insertaríamos las siguientes coordenadas para llegar al inicio de la página web:
window.scrollTo (0,0)
¿Quieres seguir aprendiendo?
Ahora que sabes cuáles son los métodos del objeto window y cómo funcionan, ¡te invitamos a que los utilices en tus propios proyectos! Para seguir aprendiendo a desarrollar todo tipo de proyectos para la web, te invitamos a echarle un vistazo a nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva, aprenderás a desarrollar con lenguajes de programación fundamentales y diversas herramientas, como JavaScript, HTML, CSS y JSX. ¿Quieres seguir aprendiendo con nosotros? ¡Pide ya más información!
