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).

Objetos del navegador

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

  1. 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>.
  2. 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.
  3. 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:

  1. 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.
  2. History: consiste en un array de URLs con el historial de esa ventana del navegador. Se accede a él con la propiedad window.history.
  3. 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

Artículos en la categoría "Manual de JavaScript"

  1. Manual de JavaScript: Funciones
  2. Manual de JavaScript: Estructuras de control
  3. Manual de JavaScript: Objetos del navegador
  4. Manual de JavaScript: Objetos intrínsecos
  5. Manual de JavaScript: Objetos
  6. Manual de JavaScript: Pasar variables desde JavaScript a PHP y viceversa