Introducción al JavaScript

Introducción al JavaScript

por Víctor Manuel Rivas Santos

Índice

Introducción

Uso de JavaScript

Objetos de una página

Objetos de un documento

Creación de Nuevos Objetos y Matrices

1. Introducción

1.1 ¿Qué es JavaScript?

Java Script es un lenguaje interpretado. Hasta aquí no se distingue de los muchos lenguajes que existen que son interpretados: VisualBasic, Perl, TCL… sin embargo, hay una característica que lo hace especialmente interesante y es que son los visualizadores que utilizamos para viajar por la Web los que interpretan (y ejecutan) los programas escritos en JavaScript. De esta forma, los documentos que transmitimos a través de la Web se convierten en documentos dinámicos, dejando de ser fuentes de información estáticas.

Los programas en JavaScript no son la primera forma que conoce la Web para transformar información, dado que el uso de CGIs está ampliamente difundido en la actualidad. La diferencia básica que existe entre un programa escrito en CGI y uno escrito en JavaScript es que el primero se ejecuta en el servidor de páginas Web. Necesita unos datos de entrada, que normalmente se proporcionan mediante un formulario, los procesa y emite un resultado en forma de documento HTML. Esto implica tres transacciones en la red. La primera carga la página del formulario, la segunda envía los datos al servidor, y la tercera recibe la nueva página que ha generado el CGI. Por el contrario, los programas escritos en JavaScript se ejecutan en el visualizador del cliente, sin necesidad de que intervenga el servidor. De esta forma, una sola transacción basta para cargar la página en la que se encuentra tanto el formulario, para los datos de entrada, como el programa en JavaScript que proporciona los resultados.

JavaScript es además un lenguaje orientado a eventos, debido por supuesto al tipo de entornos en los que se utiiliza (Windows y sistemas X-Windows). Esto implica que gran parte de la programación en JavaScript se centra en escribir funciones que respondan a movimientos del ratón, pulsación de teclas, apertura y cerrado de ventanas o carga de una página, entre otros.

Por último, es necesario resaltar que hay dos tipos de JavaScript. Por un lado está el que se ejecuta en el cliente. Este es el JavaScript propiamente dicho, aunque se técnicamente se denomina Navigator JavaScript. Pero también existe un JavaScript que se ejecuta en el servidor. Este, más reciente, se denomina LiveWire JavaScript. Este tutorial se centra solo en el Navigator JavaScript.

1.2 ¿Qué no es JavaScript?

Ante todo no es un lenguaje de propósito general. No permite un control absoluto sobre los recursos del ordenador, tal y como estamos acostumbrados al crear un programa. Cada programa en JavaScript solo tiene acceso al documento HTML en el que va inmerso y, si acaso, a las ventanas en las que se ejecuta el visualizador en el que se está ejecutando el programa.

Tampoco es un sustituto de los CGIs. Ciertas cosas no se pueden hacer en JavaScript, especialmente las relacionadas con acceso a ficheros en todos sus sentidos. Sin embargo es muy útil para depurar errores en los datos antes de pasárselos al CGI que los trata por lo que el uso combinado de JavaScript y CGIs redunda en un mejor tratamiento de datos y un menor número de transacciones en la Web cuando se usan los CGIs.

1.3 Diferencias entre Java y JavaScript

El nombre de JavaScript no es un capricho o una casual coincidencia con el nuevo lenguaje de moda JAVA. En realidad JavaScript es como un Java muy reducido. En efecto, Java es un lenguaje orientado a objetos de propósito general, aunque posee ciertas capacidades que hacen viable su uso a través de la Web. JavaScript incorpora un subconjunto de las propiedades de Java, pero se diferencia sensiblemente del mismo. Como ejemplo, el hecho de que JavaScript solo trabaje con datos de tipo numérico, booleano y con cadenas; o que trabaje con instancias de objetos y no con clases de ellos.

He aquí algunas de las diferencias más notables entre Java y JavaSscript:

JavaScript es un lenguaje interpretado y ejecutado por el cliente. Java es un lenguaje compilado por el servidor y ejecutado en el cliente.
JavaScript es basado en objetos. Java es orientado a objetos. Los objetos usados en JavaScript existen cuando empieza a ejecutarse el programa; no existen clases ni por tanto ninguna de las características que de ello se derivan (entiéndase herencia o encapsulación).
El código del programa en JavaScript va inscrito en la página HTML en la que se ejecuta.
Es un lenguaje débilmente titpificado, no es necesario declarar el tipo de los datos y se realizan conversiones de unos a otros automáticamente cuando es necesario y si es viable. Java es, por contrario, fuertemente tipificado, como C o Pascal.
Tanto uno como otro no permiten escribir en disco duro, si exceptuamos los denominados cookies.

Existe un tercer lenguaje que actualmente sirve para hacer dinámicos los documentos de la Web y es el denominado ActiveX. Este lenguaje tiene la misma filosofía que JavaScript y ha sido desarrollado por MicroSoft, por ello no es de extrañar que utilice la misma sintaxis y léxico que VisualBasic.

2. Uso de JavaScript.

Como se ha dicho, los programas en JavaScript se ejecutan en el propio visualizador y van inscritos formando parte del propio código HTML de cada página. Esto nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la página HTML.

Existen diferentes formas de insertar las sentencias de JavaScript en el documento HTML:

Incluyendo las sentencias y funciones dentro de la página usando unos tags específicos de HTML llamados <SCRIPT> y </SCRIPT>.
Especificando un fichero del servidor como fuente del código HTML.
Especificando un expresión en JavaScript como valor para un atributo de cualquier tag de HTML.
En forma de manejadores de eventos dentro de ciertos tag de HTML.

Pasemos a ver cada una de estas vías para insertar las sentencias de JavaScript. A medida que vayamos viendo cada una de ellas veremos que no son excluyentes, sino que dentro de una misma página podremos (y en algunos casos deberemos) usar varias de ellas.

2.1 El tag <SCRIPT> </SCRIPT>

Introducir sentencias de JavaScript de esta forma es tan simple como escribirlas entre estos dos tag olvidándonos del resto de tags en HTML. He aquí un pequeño ejemplo:

<HTML>

<HEAD> <TITLE>Mi primera página usando JavaScript</TITLE></HEAD>

<BODY>

document.write( "Esta es mi primera página en JavaScript … :-)) " );

</SCRIPT>

</BODY>

</HTML>

Como puede observarse, el uso del tag <SCRIPT> es idéntico al del resto de los de HTML. Es por ello que también tiene atributos. En este caso uno de los atributos es LANGUAGE. Este atributo especifica la versión de JavaScript para la que está escrito el programa. El valor para este atributo puede ser uno de estos dos:

JavaScript, para el NetScape Navigator 2.0
JavaScript1.1, para el NetScape Navigator 3.0 y posteriores.

NetScape 3.0 y posteriores ejecutan programas escritos en ambas versiones de JavaScript, mientras que NetScape 2.0 ignora el código cuando en el tag se especifica que está escrito en JavaScript1.1. Si no se pone este atributo, cada visualizador pone por defecto el que entiende.

** Diferencias del JS y JS1.1

Al escribir programas en JavaScript utilizando el tag <SCRIPT>, se suelen introducir el código entre comentarios. De esta forma se evita que aquellos visualizadores que no soportan JavaScript escriban el código en pantalla. Así, el programa anterior estaría más correcto de las siguiente forma:

<HTML>

<HEAD> <TITLE>Mi primera página usando JavaScript</TITLE></HEAD>

<BODY>

<!--

document.write( "Esta es mi primera página en JavaScript … :-)) " );

// -- >

</SCRIPT>

</BODY>

</HTML>

Nótese el uso de las dos barras (//) antes de cerrar los comentarios en HTML. Las barras son las que indican comentarios en JS y se usan para que al poner el fin de comentario de HTML no produzca un fallo el intérprete de JS.

Otra práctica no solo usual sino aconsejable es escribir las sentencias de JavaScript así como las definición (no solo la declaración) de las funciones dentro de la cabecera de la página, es decir, entre los tags <HEAD> y </HEAD>. Esto es así porque la mayoría del código escrito en JavaScript sirve para responder a eventos que provoca el usuario al interaccionar con la página. Escribiendo la funciones en la cabecera de la página nos aseguramos que al producirse el evento ya está cargada la función de respuesta al mismo. El siguiente ejemplo pone de manifiesto esto que acabamos de comentar:

<HTML>

<HEAD> <TITLE>Definiendo funciones en JavaScript</TITLE>

<!--

function saluda() {

alert ("Bienvenido a mi página Web");

}

//-->

</SCRIPT>

<HEAD>

</BODY>

</HTML>

Como se puede observar, se define una función en la cabecera denominada saluda(). Posteriormente se define una resspuesta al evento de cargar la página. Este evento se denomina onLoad y es un elemento relativo la tag <BODY>. La respuesta a tal evento es precisamente la llamada al a la función saluda() definida previamente. De esta forma nos hemos asegurado que al llegar al tag <BODY> ya se había cargado la función de respuesta al evento.

2.2 Ficheros en el servidor con el código del programa en JavaScript

Como es fácil advinar, consiste en escribir las funciones y sentencias que vayan a incorporarse a una página HTML en un fichero aparte, y posteriormente indicar que junto con esa página se ha de cargar el fichero con el código en JavaScript.

La forma de indicar qué fichero ha de cargarse junto con la página consiste en proporcionar una valor al atributo SRC del tag <SCRIPT>:

…

<!--

… mensajes de error

</SCRIPT>

Los ficheros han de tener extensión *.JavaScript y ha de añadirse la siguiente línea al fichero mimes.type:

type=application/x-javascript exts=JavaScript

** Añadir más cosas de esto.

2.3 Expresiones en JavaScript que se asignan a atributos HTML.

Prácticamente todos los tag de HTML llevan modificadores, atributos que dependiendo del valor que tomen hacen que el tag se visualice y comporte de una u otra forma. Dichos valores pueden ser fijos o ser variables de un programa en JavaScript que incorpore la página (** ver si es posible meter expresiones y funciones).

La forma de hacerlo es poner entre llaves la variable, precidida del símbolo & , es decir,

He aquí un ejemplo:

<HTML>

<HEAD> <TITLE>Usando variables de JavaScript para atributos de otros tags</TITLE>

<!--

var colorFondo="#FF00FF"

//à

</SCRIPT>

</BODY>

</HTML>

Este uso de las variables no sirve si no es para asignara valores a atributos. Así, la siguiente construcción en HTML no tendría sentido:

…

<TITLE>&{nombreTitulo}</TITLE>

…

2.4 Funciones y Sentencias en JavaScript como Manejadores de Eventos

Es la última de las formas que veremos de insertar código en JavaScript dentro de páginas HTML. En realidad ya hemos visto un ejemplo del uso funciones JavaScript como manejadores de eventos.(apartado 2.1). La mayoría de los elementos que podemos poner en una página HTML mediante los tags llevan asociados, además del tag que lo define y los atrributos que lo modifican, una serie de eventos a los que responden. Por ejemplo, cuando definimos un enlace en la página, estamos creando un objeto sobre el que se pueden dar varios eventos tales como pinchar con el ratón, mover el mismo sobre el enlace o moverlo fuera del enlace. Todos estos eventos se generan automáticamente, nuestra misión es programar funciones que sean llamadas cuando tales eventos se producen.

He aquí la forma general de introducir los manejadores de eventos:

En el siguiente ejemplo, se muestra un mensaje en la barra de estatus (parte inferior de la ventana del visualizador) al pasar por encima de un hiperenlace:

<HTML>

<HEAD> <TITLE>Manejadores de eventos en JavaScript</TITLE>

<BODY>

Visita esta página de

<A HREF="http://kal-el.ugr.es/~victor/refranes.html" onMouseOver="window.status=’Si eres hispano te va a gustar…’;return true;"> refranes </A>

</BODY>

</HTML>

El tag es, como se ha dicho, un enlace. El evento es que el ratón pase por encima del enlace. Dicho evento es MouseOver por lo que el manejador se asigna al atributo onMouseOver. Nótese que HTML no distingue mayúsculas de minúsculas, pero JavaScript sí. El manejador del evento son las dos sentencias que se asignan al atributo onMouseOver, es decir:

window.status=’Si eres hispano te va a gustar…’;

return true;

A la vista de estas dos líneas haremos solo un par de comentarios.

En primer lugar, estas dos líneas podrían haberse colocado dentro de una función incluída dentro de los tag <HEAD> y </HEAD>. Así si esta función se hubiera llamado ponEstatus(), la línea con la definición del enlace habría quedado de la siguiente forma:

<A HREF="http://kal-el.ugr.es/~victor/refranes.html" onMouseOver="ponEstatus();"> refranes </A>

En segundo lugar, nótese el uso de comillas simples (‘) a la hora de escribir la cadena "Si eres hispano te va a gustar", de esta forma se evita la confusión que supone el entrecomillar las sentencias de respuesta al evento y entrecomillar la propia cadena. Evidentemente, si hubiéramos puesto las sentencias dentro de una función aparte, tal confusión no habría tenido lugar por lo que podríamos haber puesto dobles comillas (") a la cadena.

A continuación se citan los eventos a los que responden los elementos de una página HTML:

abort: image
blur: window,frame, elementos de form
click: button,radio,checkbox,submit,reset,link
change: text,textarea,select
error: image,window
focus: window,frame,elementos de form
load: body
mouseout: area,link
mouseover:link
reset: form
select: text,textarea
submit: submit
unload: body

El manejador para cada evento se llama como el elemento en sí anteponiendo la partícula on.

2.5 Otros elementos relacionados con el uso de JavaScript

2.5.1 EL TAG <NOSCRIPT>

Se utiliza para incluir mensajes en la página destinados a aquellos usuarios que usan un visualizador que no interpreta JavaScript (cada vez menos) o bien que lo tienen deshabilitado por cualquier razón.

La forma de usarlo es bastante simple:

Sentencias en HTML

</NOSCRIPT>

Sirva el siguiente ejemplo como ilustración:

<HTML>

<HEAD>

<TITLE>Ejemplo del uso de NOSCRIPT </TITLE>

<BODY>

<H4>¡Atención!</H4>

Esta página contiene código en JavaScript pero usted no puede ejecutarlo, bien porque su visualizador no lo admite (NetScape anterior a la versión 2.0), bien porque no tiene habilitada la capacidad para ejecutarlo.

En este último caso, seleccione <em>Options</em>,<em>NetWork Preferences</em>,<em>Languages</em>

</CENTER>

</NOSCRIPT>

2.6 Algunos ejemplos en JavaScript

Vamos a presentar algunos ejemplos para practicar lo que hasta ahora conocemos. De camino nos servirá para conocer un poco más la función **write de la que se hizo uso en el primer ejemplo que vimos.

2.6.1 Un separador de textos

Vamos a crear una página en la que los difentes párrafos van a ir separados por una línea compuesta delcarácter * , un número de veces determinado.

<HTML>

<HEAD>

<TITLE>Página con separadores de texto</TITLE>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador quete permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola.<BR>

Estoy haciendo una prueba a ver como quedan los separadores detexto usando JavaScript.

<!-- Primer separador à

document.write("<P><CENTER>\n");

for ( var i=0; i<20; i++ ) {

document.write("*");

}

document.write("\n</CENTER><p>\n");

//-->

</SCRIPT>

Este es el segundo párrafo y aquí voy a poner otro separador de texto usando JavaScript.

<!--

document.write("<P><CENTER>\n");

for ( var i=0; i<20; i++ ) {

document.write("*");

}

document.write("\n</CENTER><p>\n");

//-->

</SCRIPT>

Adiós.

</BODY>

</HTML>

Como se puede ver, la función **write es ejecutada en el mismo momento en que se lee. De hecho, solo se ejecuta una vez, ya que cuando se ha cargado el documento, los posteriores **write que podamos hacer no tendrán efecto alguno en la página. En la sección **2.6.5 podemos ver un ejemplo de esto.

2.6.2 Separador de textos mejorado.

Es evidente que podríamos haber incluido el separador dentro de una función evitando la repetición de código. Veamos el nuevo código.

<HTML>

<HEAD>

<TITLE>Página con separadores de texto, versión 2.0</TITLE>

<!-- funcion separador

function separador() {

document.write("<P><CENTER>\n");

for ( var i=0; i<20; i++ ) {

ocument.write("*");

}

document.write("\n</CENTER><p>\n");

} // separador

//-->

</SCRIPT>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola.<BR>

Estoy haciendo una prueba a ver como quedan los separadores de texto usando JavaScript.

<!-- Primer separador

separador();

//-->

</SCRIPT>

Este es el segundo parrafo y aqui voy a poner otro separador de texto usando JavaScript.

<!-- Segundo separador

separador();

//-->

</SCRIPT>

Adiós.

</BODY>

</HTML>

Esta nueva versión aporta otras ventajas aparte de la no repetición de código y es la posibilidad de modificar más fácilmente el nçumero de caracteres de que consta el separador. Realicemos una nueva versión parametrizada del separador.

2.6.2 Separador de texto parametrizado.

En este ejemplo vamos a poder cambiar la longitud del separador, el carácter de relleno y la distancia de separación entre los textos. He aquí el código.

<HTML>

<HEAD>

<TITLE>Página con separadores de texto, versión 3.0</TITLE>

<!-- funcion separador

function separador( longitud,caracter,distancia) {

document.write("<"+distancia+"><CENTER>\n");

for ( var i=0; i<long; i++ ) {

document.write(caracter);

}

document.write("\n</CENTER><"+long+">\n");

} // separador

//-->

</SCRIPT>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola.<BR>

Estoy haciendo una prueba a ver como quedan los separadores de texto usando JavaScript.

<!-- Primer separador

separador( 20,"-","BR");

//-->

</SCRIPT>

Este es el segundo parrafo y aqui voy a poner otro separador de texto usando JavaScript.

<!-- Segundo separador

separador(80,".","P");

//-->

</SCRIPT>

Adiós.

</BODY>

</HTML>

2.6.4. Una función para tamaño y color.

A continuación definimos una función que nos permite poner cualquier texto con unos determinados tamaño y color.

<HTML>

<HEAD>

<TITLE>Página con colores en los mensajes</TITLE>

<!-- funcion color

function color( mensaje,color,tamanio) {

document.write("<FONT SIZE=’"+tamanio+"’ COLOR=’"+color+"’>\n");

document.write(mensaje);

document.write("\n</FONT>\n");

} // separador

//-->

</SCRIPT>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola.<BR>

<!-- Primer mensaje en color

color ( "Este mensajito ha de salir en amarillo<BR>,"#ffff00","4");

//-->

</SCRIPT>

Hola… otra vez

<!-- Segundo mensaje en color

color ("Este mensaje debería salir en rojo y GRANDE…<P>,"#ff0000","6");

//-->

</SCRIPT>

Adiós.

</BODY>

</HTML>

2.6.5. Un contraejemplo del uso de write.

Como se ha dicho anteriormente, write solo afecta en el si en el momento en que se carga la página se da la orden de escritura. Una vez que la página está cargada, write deja de tener efecto.

Veámoslo con el siguiente ejemplo. En él se pretende que, cada vez que pulsamos un determinado botón se escriba algo en pantalla.

<HTML>

<HEAD>

<TITLE>Página con en la que se hace un mal uso de Write</TITLE>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola<BR>

Adiós.

</BODY>

</HTML>

Por más que pulsemos el botón nunca veremos aparecer la frase "Gracias por pulsar el botón" dado que se ha cargado la página completa y write ya no tiene efecto.

3. Objetos de una página

Cada vez que se carga una página en el visualizador, el intérprete de JS crea automáticamente una serie de objetos que pueden ser usados al programar en JS. Como en cualquier lenguaje orientado o basado en este paradigma de programación, cada objeto es propietario de una serie de variables de instancia y de unos métodos. En JS, las variables de instancia se denominan propiedades, mientras que los métodos no cambian de nombre aunque a menudo se les llama simplemente funciones.

Las propiedades son las que hacen que cada objeto tenga sus propias características. Cada tipo de objeto tiene unas ciertas propiedades, aunque algunos pueden compartir algunas de ellas. Y dos objetos del mismo tipo se diferenciarán en el valor que tengan sus propiedades, siendo éstas las mismas para ambos. Por ejemplo, un objeto de tipo form tendra propiedades como name o action, y a la vez tendrá métodos como submit o reset.

Además de propiedades y métodos, los objetos son capaces de provocar eventos. Para cada objeto que hay en una página HTML existen asociados una serie de eventos a los que, además, puede responder. Gran parte de la programación en JS consiste en crear código de respuesta a estos eventos. En dicho código se asignan valores a las propiedades de otros objetos o se modifican medianten los métodos del objeto.

3.1 Objetos Creados Automáticamente por el Visualizador

Entre los distintos objetos que se generan automáticamente cada vez que se carga una página en el visualizador destacan los siguientes

Wiindow: 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 visualizador, tal como nombre, versión, tipos MIME soportados por el cliente y plugs-in instalados.
Location: con información acerca al 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.

Las propiedades del objeto document están en función de los objetos que hayamos insertado en la página. Cada objeto que incluyamos en la página será una propiedad del objeto document, pero a su vez estará compuesto de otros objetos que serán propiedades de él.

He aquí la jerarquía que siguen los objetos de una página JS

|-navigator |-texts

| |-textareas

|-parent,selft,top,frames |-checkboxs

| |-passwords

window ---------- |-history |-forms------------- |-radios

| | |-selects

|-location | |-buttons

| | |-submits

| | |-resets

|-document-------- |-links

|-anchors

|-images

|-areas

En este cuadro se han puesto en plural aquellos objetos de los cuales pueden existir más de una instancia en un mismo documento.

Cada vez que se desea acceder a una propiedad o un método de un objeto, hemos de detallar cuales son sus padres mediante el uso de puntos. Así, un la propiedad value de un botón de un formulario se llamaría en realidad window.document.form.button.value. Aunque el padre, window, puede quitarse si se desea.

Hemos de tener en cuenta, que el visualizador 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 que antes de su creación. Solo al definir funciones en la cabera 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.

3.2 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 visualizador. Tales ventanas se pueden controlar desde la ventana padre. Además permite cerrar ventanas, actúa sobre los marcos, puede sacar mensajes de error, 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.2.1 Apertura de una ventana

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

nuevaVentana=window.open( "dirección URL");

Es necesario 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:

<a href="direccion.html" target="nuevaVentana">Pulsa</a>

no funcionará.

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

variable=window.open("dirección URL","nombre de la Ventana","parámetros de apertura" );

"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. Por último, "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. 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, 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 "kal-el.ugr.es" y la vamos a llamar "segundaPag"; la altura será de 200 pixeles.

nuevaVentana=window.open("http://kal-el.ugr.es", "segundaPag", "toolbar=yes, location=no, resizable=no, height=200" );

3.2.2 Cerrar ventanas

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

nuevaVentana.close()

3.2.3 Mensajes de error, confirmaciones y entradas de datos.

Para cada una de estas tareas se utiliza un método distinto.

Los mensajes de error aparecen con el método alert, el cual recibe como parámetro la cadena que queremos que se visualice. En realidad se utiliza para cualquier tipo de mensaje, no solo de error, sino también de ayuda o de información sobre el autor.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de alert</TITLE>

alert("Que pasa en tu casa, coleguita?");

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola…

</BODY>

</HTML>

Para una confirmación de alguuna opción, habremos de utilizar el método confirm. Este método devuelve un valor boolean true o false por lo que habrá de usarse en una sentencia de asignación o en una expresión lógica. Ejemplo:

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de confirm</TITLE>

if ( confirm("Pulsa OK si eres un tío machote")) {

document.write ("Nos tomamos unasa birras, colega??");

} else {

document.write("Podíamos ir al cine, vamos… si tú quieres….");

}

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola…

</BODY>

</HTML>

Por último, la adquisión de datos se hace a través del método prompt. He aquí un ejemplo:

<HTML>

<HEAD>

<TITLE>Ejemplo de uso de prompt</TITLE>

var cadena=prompt( "Escribe tu nombre…");

document.write ("Esta pagina está optimizada para "+cadena );

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola,

document.write(cadena+"<p>");

</SCRIPT>

</BODY>

</HTML>

Se le puede añadir un texto por defecto a continuación del mensaje:

prompt("Escribe tu nombre…","Victor");

3.2.4 Temporizadores

Los temporizadores son sin duda de los elementos más sorprendentes que podremos utilizar. Su uso se consigue gracias a los métodos setTimeout y clearTimeout.

Utilizar la función setTimeout implica proveerla de dos parámetros. El primero es la acción que se ha de ejecutar cuando se cumpla el tiempo prefijado. La segunda es dicho tiempo en milisegundos. El temporizador solo se ejecuuta 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 periódicamente.

He aquí dos ejemplos, 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 solo se saca un mensaje de alerta, en el segundo se saca un mensaje cada 5 segundos.

<HTML>

<HEAD>

<TITLE>Primer ejemplo de uso de temporizadores</TITLE>

function mensaje() {

setTimeout("alert(‘hola’);",5000);

}

</SCRIPT>

</HEAD>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola…

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Segundo ejemplo de uso de temporizadores</TITLE>

function mensaje() {

setTimeout("alert(‘hola’);mensaje();",5000);

}

</SCRIPT>

</HEAD>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

Hola…

</BODY>

</HTML>

Así pues, cada temporizador se ejecuta una sola vez.

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. A este método ha de pasársele un identificador continendo un objeto temporizador. Este objeto se crea al lanzar el temporizador por lo que asignaremos a una variable el resultado de lanzar el temporizador con setTimeout. De esta forma podríamos poner:

….

Tempor=setTimeout("alert(‘Hola’);",1000);

…

clearTimeout( Tempor );

…

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.

** 3.2.5 Barra de estado

3.3 El objeto Navigator

Guarda información sobre el visualizador que se está utilizando. En el ordenador en el que se ejecuta ahora mismo el Netscape 3.01 para Windows 95, dicha información es la siguiente:

userAgent: Mozilla/3.01 (Win95; I)

appCodeName: Mozilla

appVersion: 3.01 (Win95; I)

appName: Netscape

plugins: [object PluginArray]

mimeTypes: [object MimeTypeArray]

Como se puede observar, las dos últimas propiedades ( plugins y mimeTypes) son sendas matrices en las que se nos informa de los plugins que están conectados y de los tipos MIME que están disponibles.

He aquí un pequeño programa que nos muestra todos estos datos:

<HTML>

<HEAD>

<TITLE>El objeto Navigator</TITLE>

</HEAD>

<BODY>

<HR>

Deberías bajarte una versión de tu visualizador que te permita ejecutar JavaScript... no sabes lo que te pierdes.

<HR>

</NOSCRIPT>

<!--

document.write("<H1>Valores de las propiedades del objeto Navigator</H1>\n");

document.write("<UL>\n");

for ( var prop in navigator ) {

document.write("<LI>"+prop+" "+navigator[prop]+"\n");

if ( prop=="plugins" ) {

for ( var i=0; i<navigator.plugins.length; i++ ) {

document.write("Plug-in numero "+i+"<br><UL>\n");

for ( var prop in navigator.plugins[i] ) {

document.write("<LI>"+prop+" "+navigator.plugins[i][prop]+"</LI>\n");

}

document.write("</UL><LI>\n");

}

} // if prop==plugins

if ( prop=="mimeTypes" ) {

for ( var i=0; i<navigator.mimeTypes.length; i++ ) {

document.write("Tipo MIME numero "+i+"<br><ul>\n");

for ( var prop in navigator.mimeTypes[i] ) {

document.write("<LI>"+prop+" "+navigator.mimeTypes[i][prop]+"</LI>\n");

}

document.write("</UL>\n");

}

} // if prop==plugins

document.write("</UL>\n");

} // for prop in navigator

// -- >

</BODY>

</HTML>

3.4 El objeto FRAME

FRAME es un objeto que a pesar de pertencer a window posee muchas de sus propiedades y métodos. De hecho, la única diferencia entre un marco y una ventana es su visualización (dentro de una sola ventana en el primer caso, o en una ventana distinta en el segundo). Por lo demás, un marco posee la mismas funcionalidades y características que una ventana.

3.5. Referenciación de una ventana: Parent,Top, Self, Window

Para nombrar o hacer referencia a un objeto window se pueden utilizar varias técnicas:

Por el nombre de la variable a la que se asignó en la apertura. Por ejemplo: nuevaVentana.document.write ("Pepito…");
self o window es la ventana actual de cada visualizador en cada caso
top o parent es la ventana de la que desciende un marco u otra ventana.

3.6. 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 esta matriz, de modo que podemos utilizarla para crear nuestros propios botones de retroceso y avance dentro de la páginas.

Además, guarda los URL relativos a la página actual, a la anterior y a la posterior.

3.7 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). Cuando se desea cambiar la URL de una ventana hemos de especificar, especialmente en eventos, que se trata de la propiedad window.location ya que location por separado en un evento indica la propiedad document.location que no es exactamente igual y que además ha sido reemplazada por document.URL.

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.

3.8 El objeto document

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

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) y vlinkColor (color para enlaces visitados). Ha de tenerse cuidado con poner correctamente las mayúsculas y minúsculas.

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

anchors, applets, embeds (con los plugin), forms, images y links.

Por último, otra iinformación contenida en el objeto document es:

cookie, domain (especifica el nombre del dominio del servidor que ha proporcionado la página), lastModified, referrer (el URL que llamó al documento actual), title y URL.

En cuanto a los métodos, tenemos close, open, write y writeln entre los más destacados. **

Hay que reseñar que no responde a ningún evento.

4. Objetos de un documento

En este capítulo veremos como se puede usar JS para mejorar la introducción de datos mediante formularios y personalizar las páginas mediante respuestas a los eventos que puede provocar el usuario.

Veremos pues el manejo de formularios, enlaces, imágenes y áreas, aunque no por este orden.

4.1 Enlaces

En cada documento existe una matriz llamada links que almacena todos y cada uno de los enlaces que haya en la página. Cada enlace tiene las mismas propiedades que un objeto location, más la propiedad target. Así que podríamos, en tiempo de ejecución, cambiar la página que se va a cargar al pulsar un enlace. De esta forma, por ejemplo, podríamos personalizar los enlaces de una página en función del país desde el que se conecta el usuario.

Es capaz de responder a tres eventos: onClick, onMouseOver y onMouseOut, cuyo significado es obvio.

He aquí un ejemplo de utilización de estos eventos:

<HTML>

<HEAD>

<title>Eventos de enlaces </title>

</HEAD>

<BODY>

Hola.<p>

Si estás viendo esto es que o bien tu visualizador no soporta JavaScript

(y ya que tiene que ser antiguo, hijo mio) o bien que no le has dicho en las

opciones que soporte JavaScript.<p>

En este ultimo caso, si tienes el Netscape pulsa en <b>Options</b>. Luego eliges

<b>Network Preferences</b>. A continuación eliges <b>Languages</b> y ahi pinchas el recuadrito que pone <b>ENABLED JAVASCRIPT</b>... ¿hace?

</NOSCRIPT>

<a href="http://kal-el.ugr.es/~victor/refranes.html"

onClick="confirm(‘Has pulsado el enlace y ahora se va…’);"

onMouseOver="confirm(‘Estás encima del enlace…’);"

onMouseOut="confirm(‘Te has salido del enlace…’);">Refranes muy bonitos</a>

</BODY>

</HTML>

Quizá sea interesante el saber que cualquier cadena tiene un método llamado link que le permite crear un enlace siendo la cadena el mensaje que saldrá resaltado, y pasando como parámetro la dirección a cargar si se pulsa el enlace. Por ejemplo:

"hola".link("http://wwwdi.ujaen.es");

4.2 Anclas

Las anclas no tienen propiedades ni responden a eventtos. En realidad, aunque parezcan enlaces no tienen nada que ver con éstos.

4.3 Imágenes

Las imágenes son quizás de los objetos más conocidos en HTML por lo que, en vez de hablar de sus propiedades hablarems directamente de los eventos a los que responden, que son tres: onError, onAbort y onLoad.

Una de las propiedades más interesantes sin duda es src en la que se indica la dirección de la imagen que se crga. Esta dirección puede modificarse mientras se está visualizando la pantalla, por lo que crear gráficos animados es tremendamente fácil. He aquí un sencillo ejemplo de esto.

<HTML>

<HEAD>

<title>Gráficos Animados</title>

<!--

// Cargamos al principio las imágenes

var imgNum=0;

imagenes=new Array();

for ( i=0; i<10; i++ ) {

imagenes[i]=new Image();

imagenes[i].src="imagen"+i+".gif"

} // for

function graficosAnimados() {

document.images[0]=imagenes[imgNum];

imgNum=(imgNum<9)?imgNum++:0;

setTimeOut( "graficosAnimados();",1000);

} // function graficosAnimados

// -- >

</SCRIPT>

</HEAD>

Hola.<p>

Si estás viendo esto es que o bien tu visualizador no soporta JavaScript

(y ya que tiene que ser antiguo, hijo mio) o bien que no le has dicho en las

opciones que soporte JavaScript.<p>

En este ultimo caso, si tienes el Netscape pulsa en <b>Options</b>. Luego eliges

<b>Network Preferences</b>. A continuación eliges <b>Languages</b> y ahi pinchas el recuadrito que pone <b>ENABLED JAVASCRIPT</b>... ¿hace?

</NOSCRIPT>

</BODY>

</HTML>

Puede verse un ejemplo de uso de la matriz de imagenes y del trabajo con las mismas en http://kal-el.ugr.es/~victor/ahorcado.html.

4.4 Áreas

Las áreas son zona de gráficos que se comportan como enlaces, es por ello que se tratan exactamente igual que un enlace. Las mismas propiedades, métodos y eventos de los enlaces son aplicables a las áreas.

4.5 Formularios

Los formularios son uno de los objetos con los que más se trrabaje en JavaScript, dado que en ellos se puedem incluir desde objetos estáticos (texto o imágenes) hasta recuadros de texto o cajas de opciones que permiten al usuario interactuar con la página web. Esta posibilidad de cambiar después de haberse cargado la página, hace que los objetos contenidos en un formulario sean muy versátiles y fáciles de manejar mediante JS.

** Porpios del form

Una de las utilidades para las que se usa frecuentemente JS es para comprobar que los datos introducidos en un formulario son correctos. Para ello se comprueban los datos una vez que se ha puls el botón de ENVIAR pero sin darle a este botón la propiedad SUBMIT. En vez de eso, se comrpueban los datos seleccionados o introducidos por el usuario y posteriormente se usa el método submit del formulario.

Pasemos a ver uno por uno estos objetos.

4.5.1 Textos (text)

Los textos son pequeños recuadros en los que el usuario puede introducir texto. Pero también son recuadros en los que JS puede escribir texto. Ya vimos que la senetencia write no seervía para escribir siempre que queríamos en la página dado que una vez que se cargaba ésta, write no afectaba a la página. Esto no ocurre con la propiedad value de un texto, que podemos cambiarla siemopre que queramos.

El siguiente ejemplo utiliza dos cajas de texto. En la primera el usuario introducirá un nombre, y en la segunda se escribirá un saludo al nombre que se haya puesto cuando se pulse un botón que se introduce en el formulario. En la respuesta al evento onClick del ratón hemos puesto el código que modifica el texto.

<HTML>

<HEAD>

<title>Eventos de textos</title>

</HEAD>

<BODY>

Hola.<p>

Si estás viendo esto es que o bien tu visualizador no soporta JavaScript

(y ya que tiene que ser antiguo, hijo mio) o bien que no le has dicho en las

opciones que soporte JavaScript.<p>

En este ultimo caso, si tienes el Netscape pulsa en <b>Options</b>. Luego eliges

<b>Network Preferences</b>. A continuación eliges <b>Languages</b> y ahi pinchas el recuadrito que pone <b>ENABLED JAVASCRIPT</b>... ¿hace?

</NOSCRIPT>

<INPUT TYPE="button" VALUE="SALUDA" onClick="document.formu.t2.value=’hola‘+

document.formu.t1.value+’¿Cómo estás?’"><BR>

</FORM>

</BODY>

</HTML>

El siguiente es un ejemplo de un mensaje moviéndose por un texto de un formulario.

<HTML>

<HEAD>

<title>Eventos de textos: mensajes deslizantes</title>

<!-- Funcion para mover un mensaje por un formulario.

var queDigo=" Bienvenido al Web "+

"del más movido del mundo entero"+

"-¨¨-..-¨¨-..-¨¨-..-¨¨-..-¨¨-..-¨¨"+

"-..-¨¨-..-¨¨-..-¨¨-..-¨¨-";

function mensajito() {

queDigo=queDigo.substring(1,queDigo.length)+queDigo.substring(0,1);

document.formu.t1.value=queDigo;

setTimeout( "mensajito();",100 );

} // mensajito

// à

</SCRIPT>

</HEAD>

Hola.<p>

Si estás viendo esto es que o bien tu visualizador no soporta JavaScript

(y ya que tiene que ser antiguo, hijo mio) o bien que no le has dicho en las

opciones que soporte JavaScript.<p>

En este ultimo caso, si tienes el Netscape pulsa en <b>Options</b>. Luego eliges

<b>Network Preferences</b>. A continuación eliges <b>Languages</b> y ahi pinchas el recuadrito que pone <b>ENABLED JAVASCRIPT</b>... ¿hace?

</NOSCRIPT>

</FORM>

</BODY>

</HTML>

Cualquier cosa que queramos escribir al usuario una vez que se haya cargado la página deberemos hacerlo mediante textos.

Caben destacar los métodos focus y select. El primero, focus, hace que el texto sea el objeto seleccionado de la página, esto es, pone el cursor en ese objeto de modo que el usuario no tiene que señalarlo con el ratón y luego escribir, sino que directamente está disponible para escribir. El segundo, select, resalta el texto que haya en la caja en ese momento de modo que se comporta como si lo hubiésemos seleccionado con el ratón o con la tecla MAYUSC.

4.5.2 Áreas de texto (textareas)

Son similares a los text pero pueden almacenar varias líneas para lo cual disponen de barras de deslizamiento del texto que contienen. Sin embargo no poseen métodos relacionados con dicho desplazamiento así que todo lo dicho para los textos es aplicable a las áreas de texto.

4.5.3 Cajas de chequeo (checkboxs)

4.5.4 passwords

4.5.5 radios

4.5.6 selects

4.5.6 buttons

4.5.7 submits

4.5.8 resets

5. Creación de Nuevos Objetos y Matrices