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

One thought on “Aprende JavaScript con ejemplos (XXIV). El BOM (Browser Object Model).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>