trisquel

Aprende JavaScript con ejemplos (XXIV). El BOM (Browser Object Model).

bom

El BOM o Browser Object Model en su momento fué implementado por los navegadores para que JavaScript pudiese hacer uso de sus métodos y propiedades uniformemente.

Como se puede observar en la imagen, el objeto raíz del BOM es el objeto window el cual como hemos dicho está soportado por cualquier navegador y que a su vez contiene otros objetos de menor rango jerárquico como puede ser el objeto document (muy importante también) u otros.

Por lo tanto podríamos ejecutar las siguientes líneas de código:

h = window.document.getElementById("header");

o bién:

h = document.getElementById("header");

Y el resultado de ambas líneas sería el mismo.

Veamos un ejemplo de script que muestra el ancho y alto de nuestro navegador.

Prueba a redimensionar el navegador y te darás cuenta que los números cambian.

<!DOCTYPE html>
<html>
<body>
<p id="dimension"></p>

<script>
var ancho = window.innerWidth;

var alto = window.innerHeight;

document.getElementById("dimension").innerHTML = "Ancho: " + ancho + " --- Alto: " + alto ;
</script>

</body>
</html>

Ejercicio 24.1:
Copia y ejecuta el ejemplo anterior. Prueba a cambiar las variables por estas otras:

  1. document.documentElement.clientWidth
  2. document.body.clientWidth
  3. document.documentElement.clientHeight
  4. document.body.clientHeight

¿Qué diferencia hay entre las variables anteriores?

Ejercicio 24.1:
Realiza una página web de ejemplo en el que incluyas los siguientes métodos:

window.open() – Abre una nueva ventana
window.close() – Cierra la ventana actual
window.moveTo() – Mueve la ventana actual
window.resizeTo() – Redimensiona la ventana actual