JAVASCRIPT

Autor: Jorge Snchez (www.jorgesanchez.net) ao 2003

Nociones Bsicas
Java y Javascript
Java es un lenguaje de programacin (como el Pascal, el BASIC o el C y C++) que fue desarrollado por la empresa Sun fundamentalmente para crear aplicaciones para Internet. El lenguaje Java es completo, es decir permite realizar cualquier operacin sobre el ordenador (como por ejemplo borrar un archivo) y su aprendizaje es costoso. Javascript es lo que se conoce como lenguaje script, es decir: se trata de cdigo de programacin que se inserta dentro de un documento. Javascript fue desarrollado por la empresa Netscape con la idea de potenciar la creacin de pginas Web dinmicas para su navegador Navigator. Javascript (en contra de lo que se podra suponer) es totalmente distinto de Java. Java crea programas totalmente independientes y operativos; Javascript es ms sencillo porque lo nico que permite es insertar cdigo especial dentro del HTML de una pgina, su funcin es ampliar las posibilidades de HTML. Javascript no crea programas independientes, dependen por completo del cdigo HTML de la pgina. El cdigo en Java se debe compilar (convertir en instrucciones del ordenador) y entonces podr ser utilizado por los navegadores (son las famosas applets). Sin embargo Javascript es interpretado directamente por el navegador; de hecho el cdigo Javascript se incrusta dentro del cdigo HTML de la pgina. Java no puede acceder a los elementos HTML de una pgina (ya que su funcionalidad es mucho mayor) sin embargo Javascript necesita acceder a ellos, de otro modo no tendra sentido su uso. La ventaja fundamental de Javascript es que su aprendizaje y uso son muy sencillos y que permite realizar labores complejas en una pgina sin necesidad de aprender CGI.

Versiones de Javascript
Puesto que JavaScript fue desarrollado por Netscape, los navegadores de esta empresa lo incluyen desde la versin 2. Microsoft por su parte incluy en la versin 3 una variante de este cdigo llamado JScript que es casi idntico al original JavaScript. Despus se estandariz el lenguaje, aunque ambas compaas poseen elementos que no son comunes con el estndar (aunque prcticamente todo el estndar es reconocido por ambas). As aparicin el JavaScript 1.1 que es admitido por Navigator 3 y por Explorer 4. Y las versiones 1.2 y 1.3 que son reconocidas por las versiones 4 y posteriores de ambos navegadores. La ECMA (asociacin industrial para la normalizacin) defini un lenguaje estndar llamado ECMAScript que intentaba agrupar a los anteriores e inclua instrucciones nuevas

Inclusin de Javascript en las pginas

Para hacer que un documento HTML incluya instrucciones en Javascript se debe hacer uso de la etiqueta <SCRIPT> de esta forma: <script language=JavaScript> cdigo JavaScript </script> Si se quiere especificar qu versin de Javascript se utiliza, para evitar que navegadores que no soportan la versin decodifiquen el Javascript, entonces se usa, por ejemplo: <script language=JavaScript1.3>

Navegadores no compatibles
Los navegadores que no soportan Javascript, no interpretaran las instrucciones Javascript sino que mostraran el texto de las instrucciones en la pgina. Para evitar que estos navegadores lean el cdigo en Javascript se hace: <script language=Javascript> <!cdigo JavaScript //--> </script>

El signo <!- indica principio de comentario en HTML y el signo --> indica fin de comentario. A su vez el signo // indica comentario en Javascript (el intrprete de Javascript no tendrn en cuenta esa lnea).

Uso de un archivo externo

Tambin se puede utilizar el cdigo JavaScript escrito en un archivo separado. Este archivo debe tener la extensin js. En el archivo se coloca slo cdigo en JavaScript. Despus ese cdigo se puede invocar desde la pgina web con el cdigo: <script language=Javascript src=archivo.js>

Normas de escritura en Javascript

Los comentarios deben empezar con el smbolo // si son de una sola lnea o iniciarse con los smbolos /* y finalizar con */ si son de varias lneas. Las lneas de cdigo terminan con el signo de punto y coma (;) Javascript distingue entre maysculas y minsculas Las llaves ({ y }) permiten agrupar cdigo.

variables y operadores
Variables
Una variable es un elemento que tiene un determinado nombre y que permite almacenar valores.

nombre de las variables

Deben empezar con una letra la cual puede ir seguida de nmeros, el signo _ o ms letras.

valores
Los valores que pueden asignarse a una variable pueden ser: Cadenas de texto: esto es una prueba, prueba o esto es una prueba de cdigo. Siempre se encierran entre comillas dobles o simples. Una variable de texto que no tiene contenido, se dice que tiene valor null. La palabra null es un trmino reconocido por Javascript. Valores numricos: 1, -100, 1.6, 2.0E2. Valores booleanos: true o false.

caracteres especiales
Los valores de tipo texto van entre comillas y dentro de ellos se pueden colocar caracteres especiales (caracteres que no se pueden ver, como el cambio de lnea) los cuales son: \a: Alarma \b: Retroceso (cursor una posicin hacia atrs). \f: Nueva pgina de impresora \n: Nueva lnea \r: Retorno de carro \t: Tabulador \\: Signo \

declaracin de una variable

Para declarar una variable se puede emplear: var variable = valor; O simplemente:

variable = valor; De tal modo, que realmente en Javascript no hace falta declarar una variable antes de su uso. Ejemplos: var testear = 0; testeaTexto = Mi casa; SeleccionarColor = true; JavaScript permite que una variable pueda almacenar distintos tipos de datos en cada trozo de cdigo. Es decir, una variable que ahora almacena texto, despus puede almacenar nmeros. Tras declarar la variable, su valor puede cambiar mediante la asignacin de un valor:

Testear = 12.3; O mediante la asignacin del resultado de una operacin: Testear = 12 * 3 + varX;

conversin de datos
En muchas lenguajes si una variable toma valores de texto y luego se quiere hacer que tome nmeros, resulta imposible hacerlo. No es el caso de JavaScript ya que realiza conversiones implcitas. Ejemplo: var x=50//x es una variable de texto var y=30//y es una variable numrica z1=x+y//z1 es variable de texto y vale 5010 z2=y+x//z2 es numrica y vale 60 /*dependiendo de cul sea el primer operando, se determina el tipo del resultado*/ Naturalmente ocurrir un error si pretende convertir a un nmero, un texto normal como Hola por ejemplo. En cualquier caso no conviene hacer conversiones de tipo en ningn caso.

Operadores
Los operadores son los elementos que permiten realizar operaciones con los datos del cdigo.

operadores aritmticos
Operador + * / % ++ -Significado Suma Resta Multiplicacin Dividir Resto de la divisin Incremento Decremento

Ejemplo:
var var var var var valor1=50; valor2=10; valor3=20; suma, resta, producto, division, resto; incremento, decremento;

suma=valor1+valor2; //suma vale 60 resta=valor1-valor2; //resta vale 40 producto=valor1*valor2; //producto vale 5000 division=valor1/valor3; //division vale 2,5 resto=valor1%valor3; //resto vale 10

valor1++; //valor1 vale 51 valor1--; //valor1 vale 50

incremento=valor1++; //incremento vale 50 y valor1 vale 51 decremento=valor1--; //decremento vale 51, valor1 vale 50

incremento=++valor1; //incremento vale 51 y valor1 tambin decremento=--valor1; //decremento y valor1 valen 50

operadores lgicos
Trabajan con proposiciones matemticas (valores bolanos) son:

Operador Significado && || ! AND (Y lgico) OR (O lgico) NOT (NO lgico)

operadores de comparacin
Son: Operador Significado == != >= <= > < Igual Distinto Mayor o igual Menor o igual Mayor Menor

operadores de asignacin
Son: Operador Ejemplo += -= *= /= %= Suma y asignacin Resta y asignacin Producto y asignacin Divisin y asignacin Resto y asignacin

Mensajes
qu son?
Se trata de ventanas que desde el cdigo se lanzan al usuario para hacer que ste reaccione ante una situacin o nos informe ante una duda. Realmente todos los mensajes se obtienen a travs del objeto window (vase ms adelante).

alert
Es el mensaje ms usado. Saca un mensaje por la pantalla el cual slo deja la posibilidad de aceptarle. Su uso es mostrar informacin al usuario pero resaltndola de la pgina. Su sintaxis es: alert(texto_del_mensaje);

prompt
En este caso se trata de una ventana que pide entrar datos al usuario. De modo que esta funcin devuelve un valor que se puede usar en el cdigo si es asignado a una variable. Su sintaxis es: prompt(texto_del_mensaje,valor_por_defecto); El segundo parmetro (valor por defecto) no es obligatorio incluirle y permite asignar un valor al cuadro de texto en el que el usuario tendr que introducir informacin. Ejemplo de uso de prompt: respuesta=prompt(Qu quieres hacer?,comer); En el ejemplo, el resultado de lo que el usuario responde se almacena en la variable resultado y al principio la ventana contendr el valor comer en el cuadro de texto destinado al usuario. Naturalmente, el usuario podr variar este valor si lo desea. El cuadro de dilogo que saca prompt posee dos botones, uno es el de Aceptar y el otro es el de Cancelar. Si el usuario pulsa Cancelar, la funcin prompt devuelve el valor nulo (null).

confirm
Saca un mensaje de confirmacin el cual suele tener dos botones: Aceptar y Cancelar. Sintaxis: confirm(texto_del_mensaje) La ventana mostrar el texto elegido (normalmente es una pregunta) y el usuario elegir si desea aceptar o no el contenido. Confirm devuelve un valor true en el caso de que el usuario acepte el mensaje, y false si no lo hace.

Estructuras condicionales
introduccin
Las estructuras de este tema son sentencias que permiten tomar decisiones dentro del cdigo a fin de devolver un resultado u otro dependiendo de una determinada circunstancia que es la que se evala.

instruccin if
La instruccin IF realiza lo que se denomina un s lgico. Su forma es: if(condicin) { ..cdigo que se ejecuta si la condicin es cierta } Tambin admite esta otra: if(condicin) { ..cdigo que se ejecuta si la condicin es cierta }else{ ... ..cdigo que se ejecuta si la condicin es falsa } Se admite dentro de una instruccin IF, colocar otra instruccin IF. A esto se le llama anidar condiciones if.

bucle while
Un bucle es una estructura de programacin que permite repetir sentencias hasta que se cumpla una determinada condicin. Su forma es: while(condicion){
... sentencias que se ejecutan mientras la condicin se cumpla

} Ejemplo: var x=1; while(x<11) { document.write(x, ); x++; } // Sale 1 2 3 4 5 6 7 8 9 10

bucle for
Su efecto es muy similar a la anterior estructura. Permite ejecutar una serie de sentencias hasta que se cumpla una determinada condicin.. Su estructura es: for(valor_inicial; condicin; actualizacin) {
..sentencias que se ejecutan mientras la condicin se cumpla }

Ejemplo: for(x=1;x<11;x++) { document.write(x, ); } // Sale 1 2 3 4 5 6 7 8 9 10

break
Es una instruccin que hace que el navegador que se la encuentra, abandone inmediatamente el bucle en el que est inmerso.

continue
Es parecida a la anterior, slo que en lugar de abandonar el bucle, lo que hace el navegador es dejar de leer las siguientes instrucciones del bucle y saltar al principio del mismo.

instruccin switch
Esta instruccin permite un mayor control sobre las condiciones, lo malo es que se incluy en la versin 1.2 de JavaScript por lo que slo los navegadores con versin 4 o posterior los pueden usar. Su sintaxis es: switch (objetodeanlisis) { case valor1: ..instrucciones case valor2:...instrucciones .... default: instrucciones }

Switch funciona de esta forma: en los parntesis se coloca una expresin a evaluar, y en cada apartado case, se coloca un posible valor de la expresin. Los valores que se cumplan harn que se ejecuten las instrucciones que les siguen. En caso de que no cumpla ninguna se ejecutaran las correspondientes al default (no es obligatorio poner este apartado). Ejemplo:

10

var x=12; switch(x) { case 4:document.write(Es cuatro);break; case 8:document.write(Es ocho);break; case 12:document.write(Es doce);break;
default: document.write(No es ninguna de las anteriores)

} Hace falta poner la instruccin break ya que de otro cuando se encuentra el valor que cumple la expresin, se ejecuta su case y los case siguientes.

11