Tutorial de JavaScript

Controlar la navegación

JavaScript pone a nuestra disposición los siguientes Objetos con los que podemos tanto obtener información como configurar diversos aspectos del navegador web:

• Navigator(): contiene información sobre el navegador web.
• Screen(): permite obtener información sobre la pantalla del usuario.
• History(): permite acceder al historial de navegación.
• Location(): con este Objeto obtendremos información sobre la URL actual.

• Window(): permite controlar la ventana del navegador web y acceder a los frames.

  Los anteriores Objetos son accesibles también desde Window() del siguiente modo: window.navigator..., window.location..., etc.

En el código JavaScript el nombre de estos Objetos se escribe en minúscula.

A continuación describiremos las propiedades y métodos más importantes de cada uno de ellos.

Información sobre el Navegador WEB

El Objeto Navigator() tiene las siguientes propiedades que nos mostrarán la siguiente información sobre el navegador web:

• appCodeName: nombre en código del navegador.
• appName: nombre del navegador.
• appVersion: información sobre la versión.
• cookieEnabled: muestra si las cookies están activadas.
• platform: sistema operativo para el que está compilado.
• userAgent: información sobre las cabeceras enviadas por el navegador web.

Este Objeto dispone también del método javaEnabled() que devuelve un valor lógico 'true' si el navegador web tiene soporte para Java (no se refiere a JavaScript) o 'false' en caso contrario.:

document.write( "appCodeName: "   + navigator.appCodeName   + "<p />" );
document.write( "appName: "       + navigator.appName       + "<p />" );
document.write( "appVersion: "    + navigator.appVersion    + "<p />" );
document.write( "cookieEnabled: " + navigator.cookieEnabled + "<p />" );
document.write( "platform: "      + navigator.platform      + "<p />" );
document.write( "userAgent: "     + navigator.userAgent     + "<p />" );

document.write( "javaEnabled(): " + navigator.javaEnabled() + "<p />" );

Información sobre la pantalla del usuario

Las propiedades más importantes del Objeto Screen() para obtener información sobre la configuración de pantalla del usuario son:

• availHeight: alto en píxels (excluyendo la barra de tareas).
• availWidth: ancho en píxels (excluyendo la barra de tareas, de estar verticalmente).
• height: alto en píxels.
• width: ancho en píxels.

document.write( "height: " + screen.height + "<br />" );
document.write( "availHeight: " + screen.availHeight + "<br />" );
document.write( "width: " + screen.width + "<br />" );
document.write( "availWidth" + screen.availWidth + "<br />" );

Acceder al historial de navegación

La propiedad length del Objeto History() devuelve el número de URL's visitadas en el navegador web.

Asimismo, dispone también de los siguientes métodos:

• back(): vuelve a cargar la URL anterior (como si pulsáramos el botón para ir atrás en el navegador web).
• forward(): carga la siguiente URL (como si pulsáramos el botón para ir hacia delante).
• go(): permite cargar una determinada URL de entre las guardadas en el Historial. Su único parámetro será un número negativo (para ir atrás) o positivo (para ir hacia delante).

document.write( "Has visitado [" + history.length + "] URLs" );

alert("A continuación se cargará URL que está tres posiciones atrás");
history.go(-3);

Acceder a la URL actual

Para acceder a la URL que estamos visitando usaremos las siguientes propiedades del Objeto Location()

• hash: devuelve la parte de una URL que indica que al cargarse la página debe situarse en un enlace en cierta parte de la misma.

  Por ejemplo con la siguiente URL obtendríamos '#contacto':

  http://www.informaticapc.com/informacion.html#contacto

• host: obtener el servidor y el puerto usados. Podemos usar esta propiedad también para cargar una URL.
• hostname: devuelve el nombre del servidor.
• href: devuelve la URL completa.

• pathname: nombre de la ruta.

  Por ejemplo con la siguiente URL obtendríamos '/extra/formulario.html':

  http://www.informaticapc.com/extra/formulario.html

• port: puerto de acceso.
• protocol: protocolo usado.

• search: devuelve los parámetros en la URL si los hubiese.

  Por ejemplo con la siguiente url obtendríamos '?id=33&nombre=pepe':

  http://www.informaticapc.com/formulario.html?id=33&nombre=pepe

document.write( "hash: " + location.hash + "<br />" );
document.write( "host: " + location.host + "<br />" );
document.write( "hostname: " + location.hostname + "<br />" );
document.write( "href: "	+ location.href + "<br />" );
document.write( "pathname: " + location.pathname + "<br />" );
document.write( "port: "	+ location.port + "<br />" );
document.write( "protocol: " + location.protocol + "<br />" );
document.write( "search: "  + location.search + "<p />" );

// Carga la URL en el navegador web:
location.href = "http://www.aprender-informatica.com/";

IMPORTANTE:Para que el ejemplo funcione correctamente hay que cargar la página web desde un servidor web:

Este Objeto también dispone de los métodos:

• assign(): carga la URL que indiquemos como parámetro.
• reload(): recarga la URL actual.
• replace(): carga la URL que indiquemos como parámetro, sin reemplazar en el historial de navegación a la que había sido cargada previamente.

location.assign("http://www.aprender-informatica.com/");
location.reload();