1

JavaScript

1.1 Qu es JavaScript?
JavaScript es un lenguaje interpretado. Es idneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas escritos en JavaScript. Los programas escritos en JavaScript se ejecutan en el navegador del cliente, sin necesidad de que intervenga el servidor. De esta forma, una sola transaccin basta para cargar la pgina y el programa en JavaScript. Las dos principales caractersticas de JavaScript son, por un lado que es un lenguaje basado en objetos y por otro, que es un lenguaje orientado a eventos, debido por supuesto al tipo de entornos de ventanas en los que se utiliza. Esto implica que gran parte de la programacin en JavaScript se centra en describir objetos (con sus variables de instancia y mtodos de "clase") y escribir funciones que respondan a ciertos eventos (movimientos del ratn, pulsacin de teclas, etc.). JavaScript no es un lenguaje de propsito general: No permite un control absoluto sobre los recursos del ordenador. Cada programa en JavaScript solo tiene acceso al documento HTML en el que va inmerso.

1.2 Sintaxis
JavaScript toma su sintaxis de los lenguajes de programacin ms conocidos, fundamentalmente C/C++, aunque tambin algo de Pascal.

1.2.1 Variables
En Javascript NO hay tipificacin de las variables, ni tampoco constantes. Para usar una variable solo hemos de darle un valor con el signo =
numero = 73; cadena = "una cadena de texto";

Las variables pueden ser numricas, cadenas (entre comillas), booleanas (valores true o false) u objetos, y por supuesto matrices de ellas. En Javascript se intenta hacer conversiones de tipo siempre que haga falta. As por ejemplo, si escribimos la siguiente sentencia:
unidos = numero+cadena;

no obtendremos ningun error debido a tipos no compatibles, sino que concatenarn. Por otro lado, a una variable con un valor inicial de tipo numrico, le podemos dar un valor de tipo cadena posteriormente. El mbito de las variables es siempre el ms amplio posible. Para indicar que una variable es local a la funcin en que se est usando se usa la palabra reservada var:
function suma_tres () { numero=numero+3; // funcin que usa una variable global }

Diseo de Pginas Web

Captulo Edicin HTML

function suma_tres () { var numero=numero+3; // funcin que usa una variable local }

1.2.2 Sentencias en los programas

La asignacin se realiza de la misma forma que en C, es decir variable=expresion La sentencia de escritura podemos que considerar que es writeln. Se trata de un mtodo del objeto document y podemos usarlo para escribir cosas desde JavaScript en el documento que hemos cargado en el navegador. La sentencia de lectura no existe como tal, aunque el objeto window tiene un mtodo llamado prompt que se puede usar para tales menesteres. Lo normal, no obstante, es usar elementos de formularios (especialmente campos text). Se pueden hacer incrementos y operaciones con variables siguiendo la sintaxis de C/C++
variable++; variable--; ++variable; --variable; variable+=valor; variable*=valor; variable-=valor; variable/=valor;

1.2.3 Estructuras de control

Condicionales
if ( condicion ) { sentencias_true; } else { sentencias_false; } switch( variable ) { case valor : case valor : { sentencias; break; } case valor : case valor : { sentencias; break; } default: { sentencias; } }

Iterativas
while( condicion ) { sentencias; } do { sentencias; } while ( condicion ); for(inic;condic;increm){ sentencias; }

1.2.4 Declaracin de funciones

La forma de definir una funcin es la siguiente:
function nombre_funcion( [lista_parametros] ) { instrucciones; [return valor;] }

La lista de parmetros es solo una lista de nombres de variables separadas por comas, sin poner ni el tipo que son, ni nada de eso. La funcin puede devolver un valor. Ambas cosas son opcionales. Un ejemplo muy simple:
// aqu declaro la funcin function suma( a,b,c ) { return a+b+c; } // posteriormente, la uso acumular = suma(10, 20, 30);

1.2.5 Matrices
La matrices son dinmicas. Para crearlas utilizamos las palabras new y Array: 2

Diseo de Pginas Web var matriz=new Array( 5 );

Captulo Edicin HTML

Esa lnea crea una matriz de 5 posiciones (de la 0 a la 4). Para asignar valores a las distintas posiciones de la matriz y acceder a dichos valores, podemos hacerlo como sigue:
var matriz = new Array; matriz[0] = 45; matriz[1] = 3 + 4 ; matriz[2] = matriz[0] + matriz[1] ;

Para calcular el nmero de elementos de una matriz, usaremos matriz.length

1.2.6 Definir y usar objetos

Para crear un objeto, tenemos que hacer una funcin constructor. Por ejemplo, supongamos que queremos crear el objeto amigo con las propiedades nombre, y telfono. Tendramos que crear una funcin de la siguiente forma:
function amigo( nombre, tlf ) { this.nombre = nombre; this.tlf = tlf; } // funcin constructora de "amigo"

Como vemos el nombre de la funcin coincide con el nombre del objeto que deseamos crear. Posteriormente podremos crear instancias de este objeto llamando a la funcin, anteponiendo el operador new, es decir:
var miamigo1 = new amigo("juanito", "666777888"); var miamigo2 = new amigo("luisito", "678678678");

Adems de propiedades, los objetos tienen mtodos. Vamos a aadir al objeto amigo un mtodo que se llame mostrar que devuelva las propiedades del objeto concatenadas:
function visualiza_amigo() { var cadena = "Nombre: " + this.nombre + "\n" + "Telfono: " + this.tlf ; } // funcin visualiza

Lo anterior sirve para declarar la funcin que visualiza. Ahora la declaracin de la funcin que construye el objeto quedara de la siguiente forma:
function amigo( nombre, tlf ) { this.nombre = nombre ; this.tlf = tlf ; this.mostrar = visualiza_amigo ; } // funcin constructora de "amigo"

1.3 Uso de JavaScript en pginas HTML

Los programas en JavaScript se ejecutan en el propio navegador y van literalmente escritos dentro de una pgina, es decir, formando parte del propio cdigo HTML de dicha pgina. Esto nos lleva a escribir el programa en JavaScript al mismo tiempo que creamos la pgina HTML. La forma ms usual para hacer uso de JavaScript en una pgina web consiste en poner el cdigo del programa JavaScript entre los tag <SCRIPT> y </SCRIPT>.
<HTML><BODY> Documento HTML que incluye un programa en JavaScript:<P> <SCRIPT>

Diseo de Pginas Web

Captulo Edicin HTML

document.writeln( "Esto esta escrito usando JAVASCRIPT" ); </SCRIPT> </BODY></HTML>

La sentencia document.writeln( ) escribe en el documento que se est visualizando en el navegador. Hay navegadores antiguos que no soportan JavaScript. Por eso, para evitar que procesen el texto del programa, conviene encerrar el cdigo JavaScript entre comentarios HTML (ver el siguiente ejemplo). Para escribir una frase, tiene ms sentido hacerlo directamente en HTML, sin usar JavaScript. Sin embargo, podramos evitarnos tener que escribir muchas etiquetas para construir una tabla si lo hacemos con un pequeo programa incrustado en la pgina web:
<HTML><BODY> Tabla hecha con JavaScript <p> <TABLE> <SCRIPT><!-for (i=0; i<5; i++ ) { document.writeln("<TR>"); for (j=0; j<5; j++ ) { document.writeln( "<TD>["+i+","+j+"]</TD>" ); } document.writeln( "</TR>" ); } //--></SCRIPT> </TABLE> </BODY></HTML>

En este caso nos hemos servido de las sentencias iterativas de JavaScript para formar el documento, ahorrndonos escribir muchos <TD> y </TD> en HTML.

1.3.1 Mensajes de alerta, confirmacin y entrada de datos

Los mensajes de alerta aparecen con el mtodo alert( mensaje ); Debemos pasarle la cadena que queremos que se visualice en la ventanita de aviso:
<SCRIPT> alert("esto es un mensaje de alerta"); </SCRIPT>

Para la confirmacin de alguna opcin usaremos el mtodo confirm( mensaje ); Este mtodo devuelve un valor lgico true o false por lo que podr usarse en una sentencia de asignacin o en una expresin lgica. Por ltimo, la adquisicin de datos se hace a travs del mtodo prompt( mensaje ); Nos presentar una ventana en la que podremos teclear una cadena de texto, que nos devolver para operar con ella posteriormente.

1.3.2 Manejadores de eventos

Un evento es cualquier cosa que puede ocurrir mientras se est ejecutando un programa, y son especialmente importantes en entornos grficos. As, se produce un evento cuando se mueve el ratn o se pincha uno o varios de sus botones, cuando el usuario pulsa una tecla, etc. Lo que se pretende con JavaScript es que los documentos se conviertan en

Diseo de Pginas Web

Captulo Edicin HTML

entidades dinmicas, en contraposicin a la estaticidad propia del HTML. Vamos a hacer que se ejecuten ciertas acciones como respuesta a la ocurrencia de ciertos eventos. He aqu la forma general de introducir los manejadores de eventos:
<ETIQUETA atributo="valor" onEnvento1="sentenciasJavaScript" >

Para cada elemento en HTML han de conocerse los eventos que puede "sufrir". En el siguiente ejemplo, se muestra un mensaje en la barra de estado (parte inferior de la ventana del navegador) cada vez que el ratn pasa por encima de un enlace que hay en la pgina:
<A HREF="http://www.google.es" onMouseOver="window.status='Si pinchas el enlace, vas a google'; return true;"> Al pasar por encima del enlace la barra de estado cambia</A>

En este ejemplo, el evento al que queremos responder mediante un programa en JavaScript es a que se pase el ratn por encima del enlace de la pgina. Dicho evento se llama MouseOver por ello en el tag <A> hemos asignado un valor al atributo onMouseOver. El programa de respuesta al evento se podra haber puesto en una funcin:
<HTML><HEAD> <SCRIPT> function gracias() { alert( "parece que el ejemplo funciona :)" ); } </SCRIPT> </HEAD><BODY> <A HREF="http://www.ugr.es" onMouseOver="gracias();"> pasa el cursor por encima de este enlace</A> </BODY></HTML>

1.4 Objetos window y document

Al cargar una pgina, el intrprete de JavaScript crea automticamente una serie de objetos que pueden ser usados en nuestros programas. Los ms importantes son window y document. A partir de window se pueden crear nuevos objetos window que sern nuevas ventanas de navegador, que se pueden controlar desde la ventana padre.

1.4.1 Apertura y cierre de una ventana

A partir del objeto window podemos abrir o cerrar nuevas ventanas, para mostrar pginas:
variable=window.open( "direccin URL", "nombreDeVentana", "parmetros de apertura" );

Por ejemplo, abramos en una ventana llamada segundaPagina la web de la Universidad de Granada; la altura de la ventana ser de 200 pixeles. A continuacin cerraremos esta nueva ventana:
nuevaVentana=window.open("http://geneura.ugr.es", "segundaPagina", "height=200" ); nuevaVentana.close();

1.4.2 Elementos del documento que responden a eventos

Un enlace puede responder a tres eventos: onClick, onMouseOver y onMouseOut

Diseo de Pginas Web

Captulo Edicin HTML

<a href="http://www.google.com" onClick="alert('Has pulsado el enlace para ir a google');" onMouseOver="alert('encima del enlace');" onMouseOut="alert('fuera del enlace');"> acerca el cursor a este enlace</a>

Las imgenes tienen la propiedad src en la que se indica la direccin de la imagen que se carga. Esta direccin se puede modificar mientras se visualiza la pgina, consiguiendo con ello que una nueva imagen se muestre en pantalla en lugar de la antigua:
<A HREF="" onMouseOver="document.images['prueba'].src='uno.gif';" onMouseOut="document.images['prueba'].src='dos.gif';" onClick="return false;"> cambiar la imagen</a> <p> <IMG SRC="dos.gif" NAME="prueba">

Una de las aplicaciones ms importantes de JavaScript es utilizarlo para interaccionar con los elementos de formulario. Entre otros, podemos manejar las cajas de entrada de texto. Se trata de pequeos recuadros en los que el usuario puede introducir caracteres y en los que podemos escribir desde los programas JavaScript:
<HTML><BODY> <a href="" onMouseOver="document.formu.caja.value='hola';" onClick="return false;"> un mensaje en la caja de texto </a> <p> <a href="" onMouseOver="document.formu.caja.value='adios';" onClick="return false;"> otro mensaje en la caja </a> <p> <FORM NAME="formu"> <INPUT TYPE="text" NAME="caja" SIZE="40" VALUE=""> </FORM> </BODY></HTML>