Manual de JavaScript: Objetos del navegador

Objetos del navegador

Los navegadores proporcionan una serie de objetos organizados de acuerdo con una jerarquía a los que podemos acceder con JavaScript. Estos objetos se ajustan al denominado DOM (Document Object Model).

Cuando cargamos una página web en el navegador se crean tres objetos:

Window: es el objeto más alto en la jerarquía HTML DOM y representa una ventana del navegador. JavaScript crea uno por cada etiqueta <body> o <frameset>.
Navigator: contiene información sobre el navegador (nombre del programa, versión, Sistema Operativo…). Lo crea JavaScript y es un objeto de JavaScript, no del HTML DOM.
Screen: contiene información sobre la pantalla (ancho, alto, colores…). Al igual que el objeto Navigator, lo crea JavaScript y es un objeto de JavaScript, no del HTML DOM.

El objeto Window a su vez contiene otros tres objetos:

Document: representa el documento HTML y permite acceder a todos los elementos de la página. Se accede a él con la propiedad window.document.
History: consiste en un array de URLs con el historial de esa ventana del navegador. Se accede a él con la propiedad window.history.
Location: contiene información sobre la URL actual. Se accede a él con la propiedad window.location.

Acceder a los objetos del navegador

Veamos la sintaxis que utiliza JavaScript para acceder a los objetos del navegador, así como a sus propiedades, méétodos y colecciones.

Podemos referenciar un objeto utilizando su nombre:
window.document.Form1
Nota

Cuando un objeto, propiedad o método es el valor por defecto, puede omitirse. Así, dado que el objeto window es el objeto por defecto, las dos instrucciones siguientes son equivalentes:
window.document.Form1 document.Form1
Si el objeto forma parte de una colección podemos referenciarlo con el índice:
document.forms[0]
… o con el nombre:
document.forms["Form1"]

Podemos recorrer todos los elementos de una colección utilizando un bucle for y la propiedad length, que devuelve el número de elementos de la colección (en base cero):

<head>
  <script>
    <!--
      function mensaje(formulario) {
        num = formulario.length
        for (var i = 0; i < num; i++) {
          alert(formulario.elements[i].name)
        }
      }
    //-->
  </script>
</head>
<body>
  <form method=post name="Form1">
    valor:<br />
    <input type="text" name="entrada"><br />
    calcular:<br />
    <input type="radio" name="botonaccion" value="cuad">cuadrado<br />
    <input type="radio" name="botonaccion" value="raiz">ra&iacute;z<br />
    resultado:<br />
    <input type=text name="resultado"><br />
    <input type="button" name="but" value="Test"
      onclick="mensaje(this.form)">
  </form>
</body>

Para acceder a una propiedad de un objeto usaremos su nombre:
document.Form1.name
También usaremos el nombre para acceder a un método:
document.Form1.reset()
Podemos referenciar un objeto padre a partir de un hijo:
var formulario1 = but1.form

Ejemplos con objetos del navegador

Redirir una página en función de la resolución de la pantalla:

<head>
  <script type="text/javascript">
    <!--
      var ancho = screen.width
      if (ancho == 640)  {
        window.location =  "640.html"
      }
      if (ancho == 800)  {
        window.location =  "800.html"
      }
      if (ancho == 1024) {
        window.location = "1024.html"
      }
      if ( (ancho != 640)  && (ancho != 800)  && (ancho != 1024) ) {
        window.location = "1024.html"
      }
    }
    // -->
  </script>
</head>
<body>
</body>

Obtener los datos del navegador:

<script type="text/javascript">
  <!--
  var platform = window.navigator.platform
  var appVersion = window.navigator.appVersion
  var appCodeName = window.navigator.appCodeName
  var userAgent = window.navigator.userAgent
 
  document.write("platform: " + platform + "<br />")
  document.write("appVersion: " + appVersion + "<br />")
  document.write("appCodeName: " + appCodeName + "<br />")
  document.write("userAgent: " + userAgent + "<br />")
  // -->
</script>

obtenemos:

platform: Linux i686
appVersion: 5.0 (X11; en-US)
appCodeName: Mozilla
userAgent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.1)
  Gecko/20090717 Firefox/3.5.1 (Swiftfox)

Cambiar la clase de un enlace al pasar el ratón por encima:

<style>
.normal {
  color: black;
}
.cursor {
  color: red;
}
</style>
<a class="normal" href="a.html" onMouseOver="this.className='cursor'"
  onMouseOut="this.className='normal'">hola</a>

obtenemos:

hola

Una calculadora:

<head>
  <script>
    <!--
      var total = 0
      var ultimaoperacion = "+"
      var nuevonumero = true
 
      function introducenumero(digito) {
        var formu = digito.form
        if (nuevonumero) {
          borranumero(formu)
          nuevonumero = false
        }
        formu.display.value = formu.display.value + digito.name
      }
      function limpiar(formu) {
        total = 0
        ultimaoperacion = "+"
        formu.display.value = ""
      }
      function borranumero(formu) {
        formu.display.value = ""
      }
      function calcula(operacion) {
        var formu = operacion.form
        var expresion = total + ultimaoperacion + formu.display.value
        ultimaoperacion = operacion.value
        total = eval(expresion)
        formu.display.value = total
        nuevonumero = true
      }
    //-->
  </script>
</head>
<body>
  <form>
    <table>
      <tr>
        <td colspan=4><input type=text name=display value=""
          onfocus="this.blur()"></td>
      </tr>
      <tr>
        <td><input type=button name="7" value=" 7 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="8" value=" 8 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="9" value=" 9 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="+" value=" + "
             onclick="calcula(this);"></td>
      </tr>
      <tr>
        <td><input type=button name="4" value=" 4 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="5" value=" 5 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="6" value=" 6 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="-" value=" - "
             onclick="calcula(this)"></td>
      </tr>
      <tr>
        <td><input type=button name="1" value=" 1 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="2" value=" 2 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="3" value=" 3 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="*" value=" * "
             onclick="calcula(this)"></td>
      </tr>
      <tr>
        <td><input type=button name="0" value=" 0 "
             onclick="introducenumero(this)"></td>
        <td><input type=button name="c" value=" c "
             onclick="limpiar(this.form)"></td>
        <td><input type=button name="ce" value="ce"
             onclick="borranumero(this.form)"></td>
        <td><input type=button name="/" value=" / "
             onclick="calcula(this)"></td>
      </tr>
    </table>
  </form>
</body>

obtenemos:

Recursos

HTML DOM: HTML DOM Reference

Manual de JavaScript: Objetos del navegador

Objetos del navegador

Acceder a los objetos del navegador

Ejemplos con objetos del navegador

Páginas

Más información

Meta