Saltear al contenido principal

Curso de JavaScript (y jQuery)

Cada vez que se carga una página en el navegador, el intérprete de Javascript crea automáticamente una serie de objetos que pueden ser directamente usados en nuestros programas. De entre los distintos objetos generados automáticamente destacan los siguientes:

Window

es el objeto principal del cual “cuelgan” los demás como si fueran propiedades suyas. Se crea un objeto de este tipo para cada ventana que pueda ser lanzada desde una página Web

Navigator

contiene información acerca del navegador, tal como nombre, versión, tipos MIME soportados por el cliente y plugs-in instalados

Location

con información acerca del URL que estemos visualizando

History

historial en el que se guardan los URL ya visitados

Document

es el contenedor de todos los objetos que se hayan insertado en la página web: enlaces, formularios, imágenes o marcos

El siguiente cuadro muestra la jerarquía de objetos creados por el navegador al cargar una página Web:

Jerarquía objetos window en HTMLHemos de tener en cuenta, que el navegador va creando los objetos en el momento que los lee, y que la página la lee desde arriba hacia abajo. Por ello, no debemos usar objetos antes de su creación. Solo al definir funciones en la cabecera podemos romper esta regla, ya que la definición de las funciones no implica su uso en el momento que se leen, sino que se llaman después desde el cuerpo de la página. Por tanto, en la definición de las funciones sí podremos hacer referencia a objetos aún no creados (que son todos los de document) aunque no podremos usar tales funciones hasta que dichos objetos no estén creados.

En este capítulo estudiamos también la forma en que desde Javascript podemos crear, modificar y eliminar cookies en el ordenador del usuario.

Las cookies nos van a permitir almacenar información textual en el ordenador del cliente; esta información puede ser recuperada por nuestra(s) página(s) web de modo que podemos realizar un pequeño seguimiento del uso de nuestra web por parte de ese usuario, o facilitarle un poco la vida recordando ciertos datos (como nombre de usuario, dirección, fechas, etc) de modo que no tenga que insertarlos cada vez que utiliza nuestra web.

Los objetivos de este tema son:

  • Conocer el objeto window y alguno de los métodos y propiedades asociados al mismo
  • Utilizar el mecanismo de generación automática de eventos de Javascript
  • Detectar, entre otra información, en qué navegador se está visualizando una página web mediante el objeto Navigator
  • Modificar la URL que se está visualizando en el navegador mediante el objeto Location.
  • Simular el funcionamiento de los botones “Atrás” y “Adelante” del navegador mediante el objeto History.
  • Utilizar cookies para almacenar y recuperar información del ordenador del usuario que ve nuestra página web.

3.1 El objeto window

Como se ha dicho, el objeto window es el más importante. A partir de él se pueden crear nuevos objetos window que serán nuevas ventanas ejecutando el navegador. Tales ventanas se pueden controlar desde la ventana padre. Además permite cerrar ventanas, actúa sobre los marcos, puede sacar mensajes (de error u otro tipo), confirmación y entrada de datos, y como se ha dicho, mantiene una matriz por cada tipo de elemento que puede haber en un documento, formularios, enlaces, imágenes y marcos.

3.1.1. Apertura de una ventana

Hay que tener en cuenta que los actuales navegadores tienen bastante restringida la apertura de ventanas desde Javascript por culpa de haber abusado para la publicidad mediante pop-ups, por lo que puede ser necesario tener que modificar la configuración del navegador para permitir las ventanas emergentes.

Abrir una ventana a través de Javascript es tan simple como pasar a una instrucción una dirección URL para que la localice y la cargue:

Es muy conveniente asignar la nueva ventana a una variable (en este caso a nuevaVentana) para poder operar posteriormente sobre ella. Sin embargo ese no es el nombre como tal de la ventana, por lo que si en un enlace ponemos:

no funcionará.

En realidad, son varios los parámetros que se pasan a una ventana al crearla:

donde:

  • dirección URL es la página que se va a cargar en la nueva ventana.
  • nombre de la ventana es el nombre que se podrá utilizar posteriormente en los target de los enlaces.
  • parámetros de apertura es una cadena que contiene los valores para ciertos atributos de la ventana, que son los siguientes: toolbar,location,directories,status,menubar, scrollbars,resizable.

Cada uno de estos atributos puede tomar los valores YES o NO, o bien, 1 ó 0, respectivamente.

Además, podemos darle la anchura y altura en pixels mediante los atributos : width,height.

Para ponerlos todos en la misma cadena se pone el atributo seguido del signo de igual y el valor que tiene. Los atributos se separan entre sí mediante comas. Por ejemplo:

Hay que tener cuidado de ponerlos en ese orden y de no dejar espacios entre ellos.

Por ejemplo, abramos una ventana con barra de herramientas, sin posibilidad de escribir una dirección y que no sea redimensionable. En ella vamos a cargar la página “www.vrivas.es” y la vamos a llamar “segundaPag”; la altura será de 200 pixeles.

3.1.2. Cerrar ventanas

Para cerrar una ventana se utiliza el método close() de las mismas:

Si la ventana a cerrar es la propia, entonces tendremos que usar:

He aquí un pequeño ejemplo que pemite abrir una ventana y escribir en ella.

3.2. Mensajes de alerta, confirmaciones y entradas de datos.

Aunque para cada una de estas tareas se utiliza un método distinto, las veremos juntas ya que son muy similares.

Los mensajes de alerta aparecen con el método:

El parámetro mensaje es la cadena que queremos que se visualice. Se puede usar para sacar mensajes de error, de ayuda, alertar sobre ciertos eventos, etc.

 

Para obtener una confirmación sobre alguna acción a realizar por el usurario podemos utilizar el método :

Este método devuelve un valor lógico true o false por lo que puede usarse en una sentencia de asignación o también en una expresión lógica.

 

Por último, la adquisición de datos desde teclado se hace a través del método

El parámetro mensaje es obligatorio, y aunque el valor_por_defecto es opcional es recomendable ponerlo siempre, aunque sea como la cadena vacía. He aquí un ejemplo de página que pide el nombre al usuario:

 

3.3. Temporizadores.

Los temporizadores son sin duda uno de los elementos a los que más juego podemos sacar. Su uso se consigue gracias a dos métodos: setTimeout y clearTimeout

Video: al final del tema 4, tienes un video sobre los eventos en JavaScript donde en uno de los ejemplos que describimos se utilizan estos temporizadores.

 

Ambos métodos, setTimeout y clearTimeout, pertenecen al objeto window.

En realidad, el encargado de lanzar el temporizador y ejecutar alguna acción es setTimeout, por lo que usando sólo este ya podremos generar eventos automáticos. No obstante, si antes de que termine el temporizador (y por tanto salte el evento) deseamos anularlo podremos hacerlo con clearTimeout

El parámetro instrucciones con que se llama al método setTimeout indica la(s) acción(es) que se ha(n) de ejecutar cuando se cumpla el tiempo prefijado. La segunda es dicho tiempo expresado en milisegundos. En caso de que dichas acciones a realizar sean la llamada a una función, en el tercer parámetro se le puede pasar el conjunto de argumentos que necesitará (en forma de cadena). No obstante, los argumentos se pueden pasar directamente en la propia llamada a la función, por lo que solo son obligatorios al llamar a setTimeout los dos primeros parámetros.

Ha de tenerse en cuenta que el temporizador sólo se ejecuta una vez, salvo que una de las sentencias a ejecutar sea otro setTimeout. Es decir, para provocar un evento periódicamente hemos de hacer una llamada a setTimeout de forma periódica o bien utilizar dos métodos muy similares a los vistos:

Mientras setTimeout genera un único evento, setInterval genera un evento cada tiempo milisegundos sin necesidad de poner otro setInterval dentro de las instrucciones a ejecutar.

A fin de cuentas, se puede conseguir hacer lo mismo con setTimeout que con setInterval, sólo que el primero es más trabajoso aunque va a funcionar con navegadores antiguos (3.x y anteriores), mientras que setInterval es más cómodo pero sólo funciona con los navegadores 4.x en adelante.

He aquí dos ejemplos del uso de setTimeout; en ellos la única diferencia es la llamada al temporizador dentro de la propia función de respuesta al evento creado por el temporizador. En el primer caso sólo se saca un mensaje de alerta, en el segundo se saca un mensaje cada 5 segundos (hasta 3 como máximo porque si no sería imposible parar la cadena de mensajes).

 

He aquí el segundo ejemplo:

 

Así pues, cada temporizador que se establezca con setTimeout se ejecuta una sola vez.

Como ya se ha indicado, existe una forma de parar la cuenta atrás de un temporizador, esto es, de anularlo. Esta forma consiste en usar el método clearTimeout (o bien clearInterval si el temporizador se lanzó son setInterval). A este método ha de pasársele un identificador conteniendo la variable en la que se almacenó temporizador al lanzarlo el temporizador.

De esta forma podríamos poner:

Como se ve, si estos métodos son usados en la misma ventana en los que se van a visualizar los resultados, no es necesario poner que pertenecen al objeto window.

El siguiente ejemplo muestra cómo se puede mostrar la hora del sistema actualizada con los métodos setTimeout y clearTimeout:

 

3.4. El objeto navigator.

Este objeto guarda información sobre el navegador que se está utilizando.

Como ejempo, para el ordenador con el que creamos este curso, navigator contenía la siguiente información:

  • appCodeName: Mozilla
  • appName: Netscape
  • appVersion: 5.0 (X11; es-ES)
  • language: es-ES
  • mimeTypes: [object MimeTypeArray]

    • Tipo MIME numero 0

      • description VLC Multimedia Plugin
      • enabledPlugin [object Plugin]
      • suffixes
      • type application/x-vlc-plugin
    • Tipo MIME numero 1

      • description VLC Multimedia Plugin
      • enabledPlugin [object Plugin]
      • suffixes
      • type application/vlc
  • platform: Linux x86_64
  • oscpu: Linux x86_64
  • vendor: Ubuntu
  • vendorSub: 10.04
  • product: Gecko
  • productSub: 20110422
  • plugins: [object PluginArray]

    • description: The Totem 2.30.2 plugin handles video and audio streams.

      • filename: libtotem-cone-plugin.so
      • version:
      • name: VLC Multimedia Plugin (compatible Totem 2.30.2)
      • item: function item() { [native code] }
      • namedItem: function namedItem() { [native code] }
  • securityPolicy:
  • userAgent: Mozilla/5.0 (X11; U; Linux x86_64; es-ES; rv:1.9.2.17) Gecko/20110422 Ubuntu/10.04 (lucid) Firefox/3.6.17
  • cookieEnabled: true
  • onLine: true
  • buildID: xxxxxxxxxxxxx
  • javaEnabled: function javaEnabled() { [native code] }
  • taintEnabled: function taintEnabled() { [native code] }
  • preference: function preference() { [native code] }
  • geolocation: [object GeoGeolocation]
  • registerContentHandler: function registerContentHandler() { [native code] }
  • registerProtocolHandler: function registerProtocolHandler() { [native code] }
  • mozIsLocallyAvailable: function mozIsLocallyAvailable() { [native code] }

No vamos a entrar en el detalle de cada una de las propiedades, pero su propio nombre es un buen indicador del uso que de ellas se puede hacer.

He aquí el código en Javascript que nos muestra todos estos datos:

 

3.5. El objeto history.

Es bien sabido que el visualizador guarda un historial de los sitios que se han visitado en cada sesión, de modo que podemos utilizar los botones de anterior y siguiente para movernos por las páginas.

Todas las direcciones que se han visitado se guardan en este historial en forma de matriz. Desde Javascript, podemos utilizar este objeto para crear nuestros propios botones de retroceso y avance dentro de la páginas. Sin embargo, no podemos acceder a los nombres de las direcciones URL ya que son información privilegiada y sólo las puede saber el usuario.

Las características más importantes del objeto history son propiedades como next y previous (almacena el URL posterior y anterior, respectivamente). Y métodos como back, forward y go, que permiten cargar en el navegador las páginas que están en el historial del mismo.

 

3.6. El objeto location.

Contiene información acerca de las propiedades de la página que hemos cargado, en particular de su nombre. Así mantiene por separado las propiedades protocol, host, port, pathname, hash y search. Además de href (todas las anteriores concatenadas) y hostname (el nombre completo del host).

A continuación se muestran todas las propiedades de location y los valores que toman en una página ejemplo:

https://www.digitallearning.es:80/modalidades-de-formacion.html?topic=cursos

  • host: www.digitallearning.es
  • hostname: www.digitallearning.es
  • href: https://www.digitallearning.es:80/modalidades-de-formacion.html?topic=cursos
  • pathname: https://www.digitallearning.es:80/modalidades-de-formacion.html
  • port: 80
  • protocol: http:
  • search: ?topic=cursos
  • reload: function reload() { [native code] }
  • replace: function replace() { [native code] }
  • assign: function assign() { [native code] }

Lo más interesante del objeto location es que si le asignamos un valor a su propiedad href conseguiremos que el navegador cargue la nueva página indicada en el valor que hemos asignado.

Por ejemplo, el siguiente trozo de código haría que tras 10 segundos, el navegador cargara una nueva página, en concreto saltará a http://www.nueva_direccion.com/inicio.html:

 

El objeto location posee dos métodos: reload, que vuelve a traerse la página actual, y replace que trae una página nueva que se añade al historial sustituyendo a la actual.

El objeto location es muy útil para pasar información a nuestro programa cuando llamamos a la página que lo contiene. Así, si hacemos una llamada a la URL:

http://www.misitio.es/miPagina.html?nombre=Victor&apellidos=Rivas

podremos acceder, gracias a location.search a la cadena ?nombre=Victor&apellidos=Rivas y utilizar estos valores dentro de nuestro programa en Javascript.

3.7. El objeto document.

Por cada página cargada en una ventana hay un objeto document contenedor de todos los elementos visibles de la página. Estos elementos se tratan con más detalle en tema siguiente. Aquí nos vamos a encargar de hablar de las propiedades y métodos específicos de este objeto.

Propiedades color

En primer lugar destacaremos las propiedades relativas al color. Son las siguientes:

alinkColor

color para las anclas o enlaces al propio documento

bgColor

color de fondo

fgColor

color de primer plano

linkColor

color de los enlaces

vlinkColor

color para enlaces visitados

Ha de tenerse cuidado con poner correctamente las mayúsculas y minúsculas.

Matrices del objeto document

A continuación, se listan las matrices que contiene el objeto document:

anchors

Con los enlaces internos de la página

applets

Con los applets que incluya la página

embeds

Con los elementos incrustados manejados por los plugins

forms

Con los formularios

images

Con las imagenes

links

Con todos los enlaces externos

Métodos

En cuanto a los métodos, destacamos:

close

Cierra el documento de una ventana

open

Abre el documento de una ventana

write

Escribe en el documento de una ventana

writeln

como write, pero incluyendo un salto de línea al final (aunque no incluye el <BR>)

Eventos

En cuanto a los eventos más característicos a los que responde document, hay que reseñar que se han de poner en el tag <BODY>, y que son:

load

se lanza en el instante mismo en que acaba de cargarse la página

unload

se activa cuando se especifica un nuevo URL para cargar una nueva página

En el siguiente tema vamos a ver más detenidamente cada uno de los objetos almacenados en document.

 

Volver arriba