Scribd
Cargar
460 vistas

Java Scrip

Cargado por

yeimeth
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
460 vistas

Java Scrip

Cargado por

yeimeth
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 60

<html> <head> <script language="JavaScript"> function prt() { ...

</script>

Copyright (c) 2003, Abraham Otero. Este documento puede ser distribuido slo bajo los trminos y condiciones de la licencia de Documentacin de javaHispano v1.0 o posterior (la ltima versin se encuentra en http://www.javahispano.org/licencias/). Para cualquier duda, consulta, insulto o tirn de orejas sobre este tutorial dirigirse a [email protected].

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 2 de 60

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 3 de 60

SOBRE ESTE DOCUMENTO


Este tutorial presupone conocimientos bsicos de un leguaje de programacin orientado a objetos (Java, C++, C# o cualquier otro lenguaje orientado a objetos), por lo que no explica en detalle los conceptos de la programacin orientada a objetos, estructuras de control de flujo (bucles y condicionales) y otros conceptos como el de variable. Tambin se presuponen en el lector conocimientos bsicos de html; JavaScrip es un lenguaje de script para crear pequeos programas que se ejecutan dentro de una pgina web, pero el alcance de este tutorail ser slo el lenguaje de script y no la creacin de documentos html. Dado que este documento ser publicado originalmente en http://javahispano.org, donde la inmensa mayora de los visitantes de la web tienen una base de programacin Java, a menudo se harn comparaciones entre JavaScript y Java, sin embargo no son necesarios conocimientos de Java para emplear este tutorial para sacar provecho de este tutorial.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 4 de 60

1 INTRODUCCIN
JavaScript es un lenguaje de script pensado para realizar diversas tareas dentro de una pgina web, tareas como generar dinmicamente contenidos dentro de la pgina web, gestionar algunos eventos del usuario, validar formularios, manipular cookies, interactuar con applets incrustados en la pgina web JavaScrip naci en la compaa Netscape, bajo el nombre LiveScript. La intencin de la compaa era crear un lenguaje simple de utilizar que permitiese ejecutar pequeos programas dentro de las pginas web. Este nombre inicial dur bastante poco; Sun Microsystems se uni a Netscape en el desarrollo de este lenguaje y en ese momento se pas a llamar JavaScript. A pesar de su nombre este lenguaje, como veremos, tiene bastante poco que ver con Java; posiblemente le pusieron este nombre para aprovechar la fama que ya tena en aquella poca Java en el desarrollo de webs gracias, en buena medida, a los applets.

1.1 DIFERENCIAS ENTRE JAVA Y JAVASCRIPT


Java y JavaScript comparten buena parte de su sintaxis, sin embargo difieren radicalmente en el resto de sus propiedades: 1. La principal diferencia es que Java es un lenguaje de programacin de propsito general, en el podran abordarse prcticamente cualquier proyecto d programacin. e JavaScript es un pequeo lenguaje de script diseado para ser ejecutado en el interior de un documento html, y no para ninguna otra tarea. 2. Java es un lenguaje que precisa ser compilado, si bien es compilado a un bytecode, y no a ningn tipo de ensamblador. Java necesita por lo tanto de un compilador, el cual nos alerta en tiempo de compilacin del los errores sintcticos que hayamos cometido. JavaScript no necesita ser compilado, y por lo tanto no necesita de un compilador. JavaScript es directamente interpretado por el navegador web. 3. Java es un lenguaje totalmente orientado a objetos. En JavaScript es posible

programar sin necesidad de emplear objetos, solo son cdico estructurado y funciones. Adems JavaScript carece de algunas caractersticas de los lengujes totalemte

orientados a objetos, como la herencia. 4. Java es un lenguaje fuertemente tipado: toda variable debe tener de modo explcito su tipo; en JavaScript no se declara nunca el tipo de una variable; cuando le asignemos un valor por primera vez esa variable pasar a ser del tipo de dato que le hemos asignado. Si bien esto puede parecer ms cmodo es una gran fuente de errores al programar.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 5 de 60

2 VARIBALES JAVASCRIPT

TIPOS

DE

DATOS

EN

Como ya hemos comentado, JavaScript a diferencia de Java, C++ o C#, por ejemplo, no se declara nunca el tipo de una variable; cuando le asignemos un valor por primera vez esa variable pasar a ser del tipo de dato que le hemos asignado. Vemos como se define una variable en JavaScript.

2.1 VARIABLES
Podemos definir una variable mediante la palabra clave var:

var n;

En este momento hemos definido una variable que, como veremos ms adelante, es del tipo de dato Undefined. Cuando le asignemos un valor a esa variable pasar a ser del tipo de dato del valor asignado: var n = 0; //n es una variable de tipo numrico var n; //variable tipo Undefined n = hola //n pasa a ser una variable de tipo String.

Es recomendable emplear la palabra reservada var para definir variables, sin embargo no es necesario. En JavaScript para definir una variable lo nico que hace falta es asignarle una valor, simplemente con esto, sin necesidad de haber en ningn momento declarado la variable:

Nombre = Pepe; //Esta sentencia define una variable nombre de tipo String. Var Nombre = Pepe; //Esta sentencia es, a todos los efectos, idntica a la anterior.

Es posible iniciar varias variables en una lnea:

var i, j,k;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 6 de 60

En JavaScript, al igual que en todo lenguaje de programacin hay una serie de palabras reservadas que no pueden ser empleadas como nombres de variables (if, var, else, for, while....). A excepcin de estas palabras una variable en JavaScript puede tener cualquier nombre que comience por cualquier carcter comprendido entre A-Z, a-z y el smbolo _ .Los restantes caracteres pueden ser tambin dgitos (0-9)

2.2 MBITO DE LAS VARIABLES

El mbito (scope) de una variable en Java viene dado por los corchetes: {}; una vez definida una variable en un cdigo dejar de existir cuando se acabe el bloque de cdigo en el que se defini. Los bloques de cdigo empiezan con { y acaban en }, por lo que la variable dejar de existir cuando se cierre el corchete que est justo antes que ella en el cdigo. En JavaScript el comportamiento es bastante diferente. Hay slo dos mbitos: local y global. Una variable posee un mbito local cuando es definida dentro de una funcin o mtodo, y ser accesible slo dentro de esa funcin o mtodo:

<script language="JavaScript"> function test() { var x = 12; }//deja de estar disponible X </script> <script language="JavaScript"> document.writeln(x);//ERROR, aqu x no est disponible </script>

Una variable global, aquella definida sin estar en el cuerpo de una funcin o mtodo, es accesible desde cualquier bloque de cdigo JavaScript de la pgina web:

<script language="JavaScript"> var x = 12;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 7 de 60

</script> <script language="JavaScript"> function test() { document.writeln(x); //x est accesible aqu } test(); </script>

Sien embargo este comportamiento no es extensible a una variable definida sin la declaracin var; una variables definida sin var siempre global

<script language="JavaScript"> function test() { x = 12; //defino x sin emplear var } </script> <script language="JavaScript"> document.writeln(x);//Esta vez x est disponible </script>

2.3 COMENTARIOS EN JAVASCRIPT


La sintaxis de los cometarios en JavaScript es idntica a la de los comentarios en Java; para comentar un lnea, dentro de una etiqueta < script language="JavaScript">, empleamos //. En la seccin anterior ya empleamos este tipo de comentario varias veces. Para comentar un conjunto de lneas empleamos /* para indicar el principio del comentario y */ para indicar el final:

Java2, tutorial de javahispano (http://javahispano.org). <script language="JavaScript"> function test() { x = 12; /*Aqu empieza el comentario Sigue siendo cometario En esta lnea se acaba el cometario */ } </script

Pgina 8 de 60

Adems de los cometarios propios de JavaScrip, puede sernos muy til emplear los comentarios de html, que empiezan con <!y terminan en -->. Podemos usarlos, por ejemplo, para comentar antes de cada script cual es su funcin.

2.4 TIPOS DE DATO


En JavaScript hay seis tipos de dato distintos: 1. Numero: Puede ser tanto un nmero entero como real. Los nmeros enteros pueden estar en base decimal (10), ocatal, empezando entonces por un 0 (010 = 9 decimal) o hexadecimal, empezando entonces por 0x (0x10 = 16 decimal). Tanto los enteros como los reales pueden ser negativos o positivos. 2. Boolean: Variable que puede tomar los valores lgicos ture, cierto, y false, falso. En un condicional cualquier operacin que tome el valor 0 es equivalente a un valor lgico false y una operacin que tome cualquier otro valor es equivalente a true. 3. Strings: Cadenas de caracteres. Debe ir siempre entre comillas dobles, Hola, o simples Hola. Para representar un String que use comillas dobles empleamos comillas simples: dijo Hola!. 4. Objetos: Variables de tipo obejto. Cualuiera que no caiga en ninguna de las otras categoras. Veremos ms acerca de ellas en el apartado 4.2. 5. 6. Null: una variable sin valor que no significa nada. Equivalente al null de Java. Undefined: variable que ha sido definida, pero que no ha sido asignada un valor, y por lo tanto an no se conoce su tipo: var i; la variable i valdr undefined hasta que le asignemos un valor.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 9 de 60

En JavaScript no se decide de que tipo es una variable hasta que le asignamos un valor, y una vez que una variable ha sido asignado un valor podemos cambiar su tipo con slo asignarle un valor de otro tipo:

<script language="JavaScript"> var x = "ss"; document.writeln(x); x = 8; document.writeln(2*x); </script>

Esto provoca, por ejemplo, que no tengamos control sobre los tipos de datos numricos, ya que una divisin de enteros nos devolver un nmero real, y un entero que incrementa demasiado su valor se transforma automticamente en real. Hemos de tener mucho cuidado con los tipos de nuestras variables, ya que una variable, por ejemplo, que sea una cadena de caracteres puede en cualquier momento ser asignada un dato numrico y cambiar su tipo, cosa que en Java nunca ocurrira.

2.4.1 El Objeto String


Aunque todava no hemos explicado que son y como crear los objetos en JavaScript por coherencia en la organizacin del tutorial presentar aqu algunos de los mtodos y propiedades ms tiles del objeto String. Este objeto slo posee una nica propiedad, sin embargo posee muchos mtodos, bastantes ms de los que recogeremos aqu. La propiedad es length, la longitud del String:

var nombre = Pepe = var nombre = new String(Pepe) nombre.length = 4

Como veis el objeto String tambin tiene un constructor, si bien no es imprescindible emplearlo para crear un objeto de tipo String. Pasemos a los mtodos, en total varias decenas. Cubriremos los ms tiles, cuya sintaxis suele estar profundamente inspirada en el API de java.lang.String.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 10 de 60

1.

char(indice): Devuelve el carcter del ndice (un entero) que se le pasa como argumento. El primer carcter est en la posicin 0.

2.

charCodeAt(indice): devuelve el numero del carcter ISO Latin-1 de la posicin indicada por indice. Los primeros 127 valores se corresponden con el cdigo ASCII.

3.

indexOf(subCadena): Devuelve el ndice de la primera ocurrencia del String subCadena dentro del String sobre el cual se invoca, o -1 si no hay ninguna ocurrencia.

4.

indexOf(subCadena, offset): Devuelve el ndice de la primera ocurrencia del String subCadena dentro del String despus de la posicin indicada por el entero offset, o 1 si no hay ninguna ocurrencia.

5.

substring(primer_indice, segundo_indice): devuelve la subcadena de caracteres comprendida entre el primer ndice (inclusive), y el segundo ndice (exclusive).

6.

toLowerCase(): Devuelve la cadena de caracteres con todos sus caracteres en minsculas.

7.

toUpperCase(): Devuelve la cadena de caracteres con todos sus caracteres en maysculas.

8.

big(), small(), bold(), italics(), blink(): Devuelven una copia de la cadena de caracteres entre los tags <Big></Big>, <Small></Small>, <bold></bold>

2.5 CONVERSIN ENTRE TIPOS DE DATO


Disponemos de una serie de funciones, con una sintaxis semejante a algunos mtodos estticos de Java, que nos permiten transformar cadenas de caracteres en enteros o nmeros reales, y enteros o nmeros reales a cadenas de caracteres. Veamos su sintaxis: La funcin parseFloat(cadena) transforma la cadena de caracteres argumento en un nmero real. parseFloat ("123.456") = 123.456

El separador decimal ha de ser el punto, si no obtendremos resultados un tanto inesperados:

parseFloat ("123,456") = parseFloat ("123A456") = parseFloat ("123ASdeH") = 123

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 11 de 60

Si intentamos parsear una cadena de caracteres sin ningn valor numrico obtendremos como resultado NaN: parseFloat ("EDRG") = NaN

Todo lo dicho para la funcin parseFloat(String) es igualmente vlido para la funcin parseInt(String). En este caso tenemos adems una segunda versin de este mtodo: parseInt(String, int ), donde el String es la cadena de caracteres a parsear y el entero la base en la que est ese nmero, que puede ser un nmero entre 2 y 36; as por ejemplo:

parseInt ("ABC",16) = 2748 parseInt(011,2) = 3

Al no especificar la base se toma por d efecto el valor 10. Si la cadena de caracteres empieza por 0x y no especificamos la base se tomara el valor de base 16, considerndose que el nmero est en formato hexadecimal. Del mimo modo si la cadena empieza por 0 y no existe el segundo argumento, se entiende que es 8, base octal. Por ltimo tenemos una instruccin que nos devuelve una cadena de caracteres que representa a un nmero:

(numero).toString(); (123).toString() = 123

Opcionalmete podemos indicar la base en la que queremos representar el nmero:

(numero).toString(base); (14).toString(16) ="e" (12).toString(2) = "1100"

Veamos un ejemplo con estas instrucciones en funcionamiento:

<HTML> <HEAD>

Java2, tutorial de javahispano (http://javahispano.org). <TITLE>ejemplo1.html</TITLE>

Pgina 12 de 60

<!Funcin auxiliar que imprime una cadena de caracteres, que se le pasa como argumento, junto con un String--> <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") } </script> </HEAD> <BODY> <script language="JavaScript"> prt("14.56 a real: "+parseFloat ("14.56")); prt("123ABC real: "+parseFloat ("123ABC")); prt("14.56 a real: "+parseFloat ("ABC")); prt("1456 a entero: "+parseInt ("1456")); prt("14ABC a entero: "+parseInt ("14ABC")); prt('"12A" en base hexadecimal: '+parseInt ("12A",16)); prt('"123" en base octagesinal: '+parseInt ("123",8)); prt('"101" en base binaria: '+parseInt ("101",2)); prt("123 en base decimal: " +(123).toString()); prt("123 en base octagesinal: "+ (123).toString(8)); prt("123 en base binario: " +(123).toString(2)); </script> </BODY> </HTML>

La visualizacin de este documento html en un navegador web ser:

14.56 a real: 14.56 123ABC real: 123 14.56 a real: NaN

Java2, tutorial de javahispano (http://javahispano.org). 1456 a entero: 1456 14ABC a entero: 14 "12A" en base hexadecimal: 298 "123" en base octagesinal: 83 "101" en base binaria: 4 123 en base decimal: 123 123 en base octagesinal: 173 123 en base binario: 1111011

Pgina 13 de 60

2.6 OPERADORES
Los operadores bsicos de JavaScript son + , - , * , / para suma, resta, producto y divisin. El operador / no representa la divisin de enteros aunque ambos operandos sean enteros, as 10/3 =3.333. El mdulo de la divisin de enteros puede obtenerse mediante el operador %. Adems existen los operadores decremento e incremento: -- y ++ respectivamente. La operacin que realizan son incrementar y decrementar en una unidad a la variable a la que se aplican. Al igual que en Java pueden actuar como operadores de pre y post decremento e incremento. Al igual que en Java el operador + aplicado a dos cadenas de caracteres, o a una cadena de caracteres y otra variable de cualquier tipo, da como resultado la cadena de caracteres concatenacin de las dos variables:

var saludo = hola; var nombre = Pepe; var saluda_pepe = ; saluda_pepe = saludo + nombre;// saluda_pepe toma el valor holaPepe

Vemos como funciona con un String y otra variable:

var saludo = hola; var n = 5;

Java2, tutorial de javahispano (http://javahispano.org). saludo = saludo + + n;// saludo toma el valor hola 5

Pgina 14 de 60

2.6.1 Operadores lgicos


En esta seccin recogemos operadores que, o bien el resultado de su operacin es un valor lgico, o bien operan sobre valores lgicos (los tres ltimos de la tabla son los que operan sobre valores lgicos).

Tabla 1: operadores lgicos Operador == != < > <= >= && || ! Operacin que realiza Test de igualdad Test de desigualdad Menor que Mayor que Menor o igual que Mayor o igual que And lgico Or lgico Not lgico

En el siguiente ejemplo se muestra la funcin de estos operadores, es una pgina web donde cdigo JavaScript genera dos nmeros enteros aleatorios y realiza unas cuantas operaciones lgicas sobre ellos.

<html> <TITLE>ejemplo2.html</TITLE> <head>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 15 de 60

</head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") } </script> <script language="JavaScript"> /*Math.XXX son un serie de funciones muy semejantes a los mtodos estticos de la clase java.lang.Math. Veremos ms sobre ella en este capitulo*/ var i = Math.round(Math.random()*100); var j = Math.round(Math.random()*100); //Imprime I y j por consola prt("i = " + i); prt("j = " + j); //Imprime diversas operaciones binarias sobre i y j, junto //con su resultado. prt("i > j es " + (i > j)); prt("i < j es " + (i < j)); prt("i >= j es " + (i >= j)); prt("i <= j es " + (i <= j)); prt("i == j es " + (i == j)); prt("i != j es " + (i != j));

prt("(i < 10) && (j < 10) es " + ((i < 10) && (j < 10)) ); prt("(i < 10) || (j < 10) es " + ((i < 10) || (j < 10)) );

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 16 de 60

</script> </body> </html>

Una posible visualizacin (sta depende de los nmeros aleatorios generados) de este documento html en un navegador web es:

i = 45 j = 43 i > j es true i < j es false i >= j es true i <= j es false i == j es false i != j es true (i < 10) && (j < 10) es false (i < 10) || (j < 10) es false

2.7 ARRAYS
Para crear un Array en JavaScript empleamos la siguiente sentencia:

var nombre_array = new Array(tamao_array])

El tipo de dato de la variable Array es siempre Object, y en l podemos almacenar cualquier tipo de variable. tamao_array el es tamao que queremos para el este array. Veamos un ejemplo:

var edades = new Array(10);

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 17 de 60

En este ejemplo hemos definido un array llamado edades, en el que podremos almacenar 10 datos. El primer elemento de un array se sita en la posicin 0, exactamente igual que en Java. Si quisisemos realizar un bucle que recorriese los elementos de este array escribiramos un cdigo del tipo:

<html> <head> <TITLE>ejemplo3.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s){ document.write(s+"<BR/>"); } var array = new Object(10); for( var i = 0; i < 10; i++){ array[i] = i; prt(array[i]); } </script> </body> </html>

2.8 EL OBJETO MATH


Al igual que en Java contbamos con la clase Math y sus mtodos estticos para realizar todo tipo de operaciones trigonomtricas, races cuadradas, exponenciaciones en JavaScript contamos con una serie de mtodos asociados al objeto Math para realizar este tipo de operaciones matemticas. En concreto contamos con los siguientes mtodos:

Math.log(x) = ln(x), logaritmo neperiano.

Java2, tutorial de javahispano (http://javahispano.org). Math.exp(x) = exponenciacin. Math.sqrt(x) = raiz cuadrada. Math.pow(a, b) = a . Math.floor(): Redondea al nmero entero ms cercano y menor. Math.ceil(): Redondea al nmero entero ms cercano y mayor. Math.round(): redondea al entero ms prximo. Math.random(): nmero aleatorio entre 0 y 1. Math.sin(x)= Seno, x en radianes. Math.cos(x)= Coseno, x en radianes. Math.tan(x)= Tangente, x en radianes. Math.atan(x)= Arcotangente, el resultado est en radianes. Math.abs(x): valor absoluto. Math.max(a,b) : mximo valor de los operandos. Math.min(a,b): mnimo valor de los operandos.
b

Pgina 18 de 60

El siguiente cdigo JavaScript del siguiente documento html ejecuta varias operaciones trigonomtricas y de exponenciacin empleando dos nmeros aleatorios que previamente han generado.

<html> <TITLE>ejemplo4.html</TITLE> <head> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") } var i = Math.round(Math.random()*100); var j = Math.round(Math.random()*100);

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 19 de 60

prt("Cos i : " + Math.cos(i)); prt("Sen i : " + Math.sin(i)); prt("j^i : " + Math.pow(j,i)); </script> </body> </html>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 20 de 60

3 CONTROL DE FLUJO EN JAVASCRIPT


Al igual que en Java e modo de ejecucin de un programa en JavaScript en ausencia de l elementos de control de flujo es secuencial: una instruccin se ejecuta detrs de otra y slo se ejecuta una vez. Esto nos permite hace programas muy limitados; para aadir flexibilidad en el flujo de ejecucin de las instrucciones se introducen estructuras de control de flujo.

3.1 SENTENCIAS CONDICIONALES

Ejecutan un cdigo u otro en funcin de que se cumplan o no una determinada condicin. Pasemos a ver sus principales tipos.

3.1.1 If
Su modo ms simple de empleo es:

If(condicion) { Grupo de sentencias}

condicion es una valor tipo boolean o una operacin cuyo resultado sea una variable numrica. El grupo de sentencias se ejecuta slo si la condicin toma un valor true, o si el resultado de la operacin numrica es distinto de 0. En caso contrario se ignora Grupo de sentencias.

If(condicion) { Grupo de sentencias} else{ Grupo2 de sentencias}

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 21 de 60

Si condicion toma el valor true se ejecuta Grupo de sentencias, en caso contrario se ejecuta Grupo2 de sentencias. En ambos casos se contina ejecutando el resto del cdigo.

If(condicion) { Grupo de sentencias} else if (condicion2){ Grupo2 de sentencias} else if (condicion3){ Grupo3 de sentencias}

else{ Grupo_n de sentencias}

Si condicion toma el valor true se ejecuta Grupo de sentencias, si condicion2 toma el valor true se ejecuta Grupo2 de sentencias... y as sucesivamente terminar todas las condiciones. Si no se cumple ninguna se ejecuta Grupo_n de sentencias. Este ltimo else es opcional. En ambos casos se contina ejecutando el resto del cdigo. Ilustraremos el uso de este condicional con un ejemplo:

<html> <TITLE>ejemplo5.html</TITLE> <head> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") }

function test(val, val2) {

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 22 de 60

var result = 0; if(val > val2) result = +1; else if(val < val2) result = -1; else result = 0; return result; } </script> <script language="JavaScript"> prt(test(10, 5)); prt(test(5, 10)); prt(test(5, 5)); </script> </body> </html>

3.1.2 Switch
Su sintaxis y funcionamiento vuelve a ser idntica al de Java: se compara el valor de una variable selector con el valor de todos los calores de los distintos case, si hay coincidencia se ejecuta el cuerpo de ese case y todos los que estn despus de l, salvo si nos encontramos con una sentencia tipo break. A diferencia que en Java la variable selector aqu puede ser cualquier tipo de dato, no slo, como era en Java, un entero.

switch(selector) { case valor1 : Grupo de sentencias1; break; case valor2 : Grupo de sentencias2; break; case valor3 : Grupo de sentencias3; break;

Java2, tutorial de javahispano (http://javahispano.org). case valor4 : Grupo de sentencias4; break; case valor5 : Grupo de sentencias5; break; // ... default: statement; }

Pgina 23 de 60

El script calculaNumDias de esta pgina web permite calcular los das que tiene cada mes empleado para ello un switch:

<html> <TITLE>ejemplo6.html</TITLE> <head> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } function calculaNumDias(mes) { var dias; switch(mes) { case 2: dias=28; break; case 1: case 3: case 5:

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 24 de 60

case 7: case 8: case 10: case 12: dias=31; break; default: dias=30; } return dias; } </script> <script language="JavaScript"> //Empleamos la funcin de abajo para averiguar los das de //Varios meses prt("Enero tiene "+ calculaNumDias(1) +" das"); prt("Febrero tiene "+ calculaNumDias(2) +" das"); prt("Abril tiene "+ calculaNumDias(4) +" das"); prt("Junio tiene "+ calculaNumDias(6) +" das"); prt("Julio tiene "+ calculaNumDias(7) +" das"); prt("Agosto tiene "+ calculaNumDias(8) +" das"); prt("Diciembre tiene "+ calculaNumDias(12) +" das"); </script> </body> </html>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 25 de 60

3.2 BUCLES
Son estructuras de control de flujo que nos permiten repetir un bloque de cdigo mientras se cumpla una determinada condicin. Veamos sus tipos.

3.2.1 Bucle while


Cuando en la ejecucin de un cdigo se llega a un bucle while se comprueba si se verifica su condicin; si se verifica se continua ejecutando el cdigo del bucle hasta que esta deje de verificarse. Su sintaxis es:

while(condicin){ Grupo de sentencias}

Ilustramos su funcionamiento con un ejemplo:

<html> <head> <TITLE>ejemplo7.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") } </script> <script language="JavaScript"> var r = 0; //Mientras que r sea menor que 0.99 while(r < 0.99) { //Genera un nuevo r aleatario entr 0 y 1. r = Math.random();

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 26 de 60

//Lo imprime por consola. prt(r); } </script> </body> </html>

3.2.2 Bucle do while


Su comportamiento es semejante al bucle while, slo que aqu la condicin va al final del cdigo del bucle, por lo que tenemos garantizado que el cdigo se va a ejecutar al menos una vez. Depender del caso concreto si es ms conveniente emplear un bucle while (conjunto de instrucciones que se repiten de 0 a n veces) o do while (conjunto de instrucciones que se repiten de 1 a n veces). La sintaxis de do while es:

do { Grupo de sentencias; }while(condicin);

Obsrvese como el ejemplo 9 implementado mediante un bucle do while independientemente del valor de r ejecutar al menos una vez el cdigo de su cuerpo:

<html> <head> <TITLE>ejemplo8.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>") }

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 27 de 60

</script>

<script language="JavaScript"> var r; //Idntico al ejemplo anterior, solo que ahora la condicin //est al final del bucle. do { r = Math.random(); prt(r); } while(r < 0.99); </script> </body> </html>

3.2.3 Bucle for


Su sintxis es el siguiente:

for(expresion1;expresion2;expresion3){ Grupo de sentecias;}

expresion1 es una asignacin de un valor a una variable, la variable-condicin del bucle. expresion2 es la condicin que se le impone a la variable del bucle y expresion3 indica una operacin que se realiza en cada iteracin a partir de la primera (en la primera iteracin el valor de la variable del bucle es el que se le asigna en la expresion1) sobre la variable del bucle. En el apartado 3.2.5 hay un cdigo que emplea un bucle de este tipo.

3.2.4 Bucle for in


Bucle sin equivalente en Java que nos permite recorrer todos los campos que hay dentro de un Objeto. Aunque ser en el tema 4 cuando expliquemos como trabajar con objetos en

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 28 de 60

JavaScript supongo que el lector ya est familiarizado con el concepto de Objeto, y sabe por lo tanto que un objeto tiene una serie de campos (variables). La sintaxis de este bucle es:

for(variable in Object){ //Operaciones con variable }

En el siguiente cdigo se creo un objeto Cliente que tienen 4 variables, y se emplea un bucle tipo for in para mostrarlas en el navegador web.

<html> <head> <TITLE>ejemplo9.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } //Definicin del objeto cliente function Cliente(nombre, apellido, edad, codigo){ this.nombre = nombre; this. apellido = apellido; this.edad = edad; this.codigo = codigo; } </script> <script language="JavaScript"> var cliente = new Cliente("Alfonso", "Alvarez", 43, 1232);

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 29 de 60

//Bucle for in for(var campo in cliente){ prt(campo); } </script> </body> </html>

3.2.5 Break y continue


No se tratan de un bucle, pero s de una sentencia ntimamente relacionada con estos. El encontrar una sentencia break en el cuerpo de cualquier bucle detiene la ejecucin del cuerpo del bucle y sale de ste, continundose ejecutando el cdigo que hay tras el bucle. Esta sentencia tambin se puede usar para forzar la salida del bloque de ejecucin de una instruccin condicional (esto ya se vi con switch). Continue tambin detiene la ejecucin del cuerpo del bucle, pero en esta ocasin no se sale del bucle, sino que se pasa a la siguiente iteracin de este. Observaremos el funcionamiento de ambos en un mismo ejemplo:

<html> <head> <TITLE>ejemplo9.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } </script>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 30 de 60

<script language="JavaScript"> //Bucle for que ejecuta 100 veces el cdigo que tiene en su //interior for(var i = 0; i < 100; i++) { if(i == 74) break; // teminamos aqui el bucle //Salto a la siguiente iteracin si i no es divisible entre 9 if(i % 9 != 0) continue; //Si I es divisible entre 9 se imprime prt(i); } var i = 0; // Lazo infinito del cual se sale con break: while(true) { i++; var j = i * 27; if(j == 1269) break; // Salimos del lazo if(i%10 != 0) continue;//Salto a la siguiente iteracin prt(i); } </script> </body> </html>

3.3 RETURN
Sus funciones son las mismas que en java . Cuando se llama a un procedimiento o mtodo, veremos que en JavaScript tenemos ambos, no slo mtodos como en Java, al encontrarse con una sentencia return se pasa el valor especificado al cdigo que llam a dicho mtodo o

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 31 de 60

funcin y se devuelve el control al cdigo invocador. Su misin tiene que ver con el control de flujo: se deja de ejecutar cdigo secuencialmente y se pasa al cdigo que invoc al mtodo; si se le pasa algn parmetro a return ese ser el valor que devuelva ese mtodo o procedimiento.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 32 de 60

4 FUNCIONES Y OBJETOS
Por motivos pedaggicos, no considero adecuado en un tutorial exponer 30 pginas con slo teora y sintaxis y sin un slo ejemplo, ya hemos empleado tanto funciones como objetos en los scripts que hemos ido recogiendo a lo largo del tutorial. De este modo el lector, si bien quizs no haya comprendido completamente el uso de objetos y/o funciones, si ha tenido la oportunidad de ver en funcionamiento las estructuras de control de flujo de JavaScript, as como de empezar a familiarizarse con el lenguaje y su sintaxis. Ahora ha llegado el momento de formalizar los conceptos de funcin y de objeto.

4.1 FUNCIONES
Una funcin, o procedimiento, es un pedazo de cdigo con un nombre, al cual se le pueden pasar unos argumentos, y que puede o no devolver, como resultado de llamarla, un dato. En JavaScript las funciones se declaran con la palabra reservada function:

function nombreFuncion (argumento1, argumento2){ //Cuerpo de la funcion return valor; //Esto es opcional, puede no devolver nada }

A diferencia que en Java no es necesario declarar qu tipo de dato devuelve una funcin, o si no devuelve nada, ya que toda funcin puede siempre devolver cualquier tipo de dato. Tampoco es necesario indicar de que tipo sern sus argumentos; a cualquier funcin podremos pasarle cualquier tipo de dato como argumento. Por un lado la forma de definir estas funciones es muy flexible, pero por otro lado son bastante propensas a cometer errores por pasarle argumentos que no debemos, o por que nos devuelven un tipo de dato que no esperbamos. Veamos un ejemplo de funcin:

function cuadrado (dato){ return dato*dato } Ahora veamos esta funcin en accin dentro de un pgina web, comprobaremos como podemos pasarle argumentos de todo tipo sin que se produzca ningn error:

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 33 de 60

<html> <head> <TITLE>ejemplo11.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } function cuadrado (dato){ return dato*dato } </script> <script language="JavaScript"> prt(cuadrado(4));//dato numerio prt(cuadrado("4"));//Har el cast a dato numerico y calculara //su cuadrado prt(cuadrado("W"));//No conseguir hacer la operacin, pero //no dar ningn tipo de ero </script> </body> </html>

La visualizacin de este documento html en un navegador ser:

16 16 NaN

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 34 de 60

4.2 OBJETOS
En JavaScrip es posible crear y manipular objetos, si bien no es un lenguaje completamente orientado a objetos, ya que carece de herencia y polimorfismo, y soporta muy deficientemente de la encapsulacin. Un objeto de JavaScript no es ms que un contenedor para variables y mtodos (funciones), que sern accesibles a travs un nombre. Los mtodos del objeto se definen como funciones, y en su contructor se asignan a este. El constuctor de un objeto es una funcin que asigna valores a this, as por ejemplo el constructor de un objeto Cliente puede ser:

function Cliente(nombre, apellido, edad, codigo){ this.nombre = nombre; this. apellido = apellido; this.edad = edad; this.codigo = codigo; }

Si queremos aadir un mtodo al cliente simplemente definimos una funcin y se la asignamos al objeto en el constructor:

function cambiaCodigoCliente(nuevoCodigo){ this.codigo = nuevoCodigo; } function Cliente(nombre, apellido, edad, codigo){ this.nombre = nombre; this. apellido = apellido; this.edad = edad; this.codigo = codigo; //le asignamos a este objeto un metodo this. cambiaCodigoCliente = cambiaCodigoCliente; }

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 35 de 60

La sintaxis para crear un objeto es idntica a la sintaxis de Java:

var cliente = new Cliente(Alfonso, Perz, 43, 122345);

Y el acceso a sus variables y mtodos (todos ellos pblicos, es decir, accesibles desde cualquier cdigo que tenga una referencia al objeto) es idntico a los accesos de Java:

nombre_objeto.nombreVariable; nombre_objeto.nombreMetodo();

Veamos todo esto en accin en un ejemplo. Obsrvese como se invoca el mtodo cambiaCodigoCliente, que modifica el valor de la variable codigo, inicialmente un dato numrico, le asignamos una cadena de texto sin ningn problema. Potente, flexible y extremadamente propenso a cometer errores difciles de localizar.

<html> <head> <TITLE>ejemplo12.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } function cambiaCodigoCliente(nuevoCodigo){ this.codigo = nuevoCodigo; } function Cliente(nombre, apellido, edad, codigo){ this.nombre = nombre;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 36 de 60

this. apellido = apellido; this.edad = edad; this.codigo = codigo; //le asignamos a este objeto un metodo this.cambiaCodigoCliente = cambiaCodigoCliente; }

</script> <script language="JavaScript"> var cliente = new Cliente("Alfonso", "Alvarez", 43, 1232); //acceso a una variable prt(cliente.nombre); //Acceso al cdigo prt(cliente.codigo); //invocamos un mtodo cliente.cambiaCodigoCliente("Ahora el cdigo es texto!!!!"); prt(cliente.codigo); </script> </body> </html>

Tambin es posible definir objetos simplemente creando un nuevo objeto de tipo Object y asignndoles variables y mtodos. Cada vez que asignemos un valor a una nueva variable de un objeto tambin la estaremos definiendo. Esto hace que sea fcil cometer errores de

programacin por creer que estamos asignado un valor a una variable de un objeto que ya existe (objeto.nombre, por ejemplo) cuando realmente, por causa de un fallo al teclear, estamos definiendo una nueva variable (porque, por ejemplo, tecleamos objeto.nomber).

var nombre_objeto = new Object(); nombre_objeto.nombreVariable = variable; nombre_objeto.nombreMetodo = funcion;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 37 de 60

Rehagamos el cdigo anterior creando el objeto cliente de este nuevo modo:

<html> <head> <TITLE>ejemplo13.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } function cambiaCodigoCliente(nuevoCodigo){ this.codigo = nuevoCodigo; } </script> <script language="JavaScript"> var cliente = new Object(); cliente.nombre = "Adolfo"; cliente. apellido = "Fernndez"; cliente.edad = 43; cliente.codigo = 12356; //le asignamos a este objeto un metodo cliente.cambiaCodigoCliente = cambiaCodigoCliente; //acceso a una variable prt(cliente.nombre); //Acceso al cdigo prt(cliente.codigo); //invocamos un mtodo

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 38 de 60

cliente.cambiaCodigoCliente("Ahora el cdigo es texto!!!!"); prt(cliente.codigo); </script> </body> </html>

4.3 DOCUMENT OBJECT MODEL


Los puntos que hemos abordado hasta ahora, la sintaxis bsica de JavaScript, estn estandarizados por la ECMA, por lo que debera funcionar correctamente en cualquier navegador web con capacidad para interpretar JavaScript, prcticamente cualquier navegador web actual (Netscape, Mozila, Konkeror, Opera, IExplorer) soporta JavaScript. Una parte muy importante de JavaScript es el Document Object Model (DOM en adelante), una jerarqua de objetos que el navegador construye para JavaScript. La mayor parte de estos objetos representan propiedades de la pgina web que se est visualizando y del propio navegador web, o los elementos que se visualizan en el documento html (imgenes, applets, formularios, capas). Sin embargo, y desgraciadamente, DOM no est estandarizado. Cada fabricante de navegadores web tiene libertad para implementarlo, lo que provoca

incompatibilidades entre navegadores, forzando a escribir scripts distintos para cada navegador y a chequear en que navegador se est ejecutado el script para decidir que versin de ste se ejecuta. En DOM cada objeto, por ejemplo el objeto document, que representa al propio documento html, tiene una serie de variables, que pueden o no ser otros objetos del DOM, y a los que por lo tanto se accede como document.nombre_objeto. As por ejemplo en el caso de document contiene a Image (imgenes), Applet (Applets Java), Form (formularios), Link (los link), etc. Si tuvisemos un documento html con un formulario con atributo name=registro, accederamos a el como document.registro.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 39 de 60

Figura 1 Principales elementos de la jerarqua de Document Object Model de JavaScript.

A su vez estos objetos pueden contener ms objetos, a los cuales accederemos como document.nombre_objeto.nombre_objeto2; por ejemplo, al botn de submit del formulario podramos acceder como document.registro.submit. En la Figura 2 se muestra como se

accede a los distintos componentes de DOM. Ya lo hemos empleado muchas veces en el tutorial, y ha llegado el momento de explicarlo: Qu es la sentencia document.write(), o window.document.write()?. Esta sentencia, que nos permita aadir contenido dinmicamente a la pgina web, lo que hace es invocar un metodo, write(), de uno de los objetos del DOM, document, el objeto que representa al documento html que se est visualizando en le navegador. Cuando este mtodo se invoca cuando el documento html an no ha sido completamente visualizado aade su argumento al cdigo html del documento. Si una vez ya visualizado el documento, en respuesta a un evento del usuario, invocamos este mtodo, generar un nuevo documento html con su parmetro, documento que se visualizar en el navegador.

Figura 2 Sintaxis para el acceso a los distintos componentes de DOM

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 40 de 60

Veamos un ejemplo en el cual se acceden y cambian los valores de los atributos de un par de objetos del DOM:

<html> <head> <TITLE>ejemplo13.html</TITLE> </head> <script language="JavaScript"> function cambiaObjetosDOM(color){ /*accedemos a la propiedad bgColor, color de fondo de la pgina y hacemos que tome el valor de la variable argumento*/ document.bgColor = color; /*Accedo a un campo de texto ( cuyo atributo NAME es texto) de un formulario de la pgina (con NAME = form) y modifico su propiedad value .*/ window.document.form.texto.value="No aparece Hola!"; } </script> </head> <body > <form NAME="form"> //Aunque el texto incial de este campo de es Hola los scripts lo modificarn <input type ="text" name ="texto" value ="Hola" > </form> <script language="JavaScript"> cambiaObjetosDOM("FF00FF"); </script> </body>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 41 de 60

</html>

4.3.1 Sobre la compatibilidad de los objetos del DOM


Como ya comentamos, si bien JavaScript en si es un estndar ECMA los objetos de DOM no estn estandarizados y varan de un navegador a otro, tanto en los objetos que existen , como en los eventos que puede manejar cada objeto y sus propiedades y mtodos. Y lo que an es peor, el DOM que soporta cada navegador cambia de una versin a otra del navegador, y no siempre la nueva versin del navegador soporta o funciona exactamente igual que en la ltima. De ah que haya Scripts que funcionan slo con la versin X de un determinado navegador. Un ejemplo concreto es un script que distribua S para detectar si el cliente tena o no un instalado Java Webstart en su equipo. Funcionaba bien para los ltimos navegadores de aquel momento, pero al salir la siguiente versin de IExplorer dej de funionar en l, y el usuario al entrar en la pgina nunca vea el link que arrancaba la aplicacin Java Webstart. Todos estos problemas nos obligan a revisar que soporta y que no cada navegador con el que queremos que funcionen nuestros Scripts. Si bien hacer programillas en JavaScipt es muy simple hacer programas que funcionen en todos los navegadores web es extraordinariamente complejo. Un buen camino para conseguirlo es emplear funcionalidad bsica y bien establecida, cuyo funcionamiento est bastante estandarizado y es bien conocido, y no los ltimas novedades que posiblemente slo las soporta, al menos por lo de ahora, el navegador X, y es posible que deje de soportarla en la siguiente versin.

4.3.2 Donde encuentro ms informacin sobre los DOMs ?


Aqu os dejo links que os ayudarn ha encontrar informacin sobre el soporte de JavaScript y los DOMs de los principales navegadores de Internet:

1.

JavaScript en Netscape: http://developer.netscape.com/tech/javascript/ a. DOM de Netscape : http://devedge.netscape.com/central/dom/

2.

JavaScript en Mozila: http://www.mozilla.org/js/ a. DOM de Mozila: http://devedge.netscape.com/central/dom/

3.

JavaScript en Opera: http://www.opera.com/docs/specs/js a. DOM de Opera : http://www.opera.com/docs/specs/js/dom/ http://msdn.microsoft.com/library/default.asp?url=/library/en-

4.

JavaScript de IExplorer:

us/script56/html/js56jsoriJScript.asp

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 42 de 60

5 GESTIN DE EVENTOS EN JAVASCRIPT


Los programillas de JavaScript suelen funcionar dirigidos por eventos, esto es, se ejecutan en respuesta a una determinada accin del usuario. Todos los que hemos desarrollado hasta ahora no funciona as, sino que se ejecutan siempre en cuanto se carga la pgina web. Evidentemente esto es muy poco flexible y poco potente. Eventos tpicos que se pueden gestionar con JavaScript son cambiar el tamao de la pgina, pulsar un botn de un formulario, ganar o perder el foco un componente de la pgina web, hacer clic en un link Para gestionar estos eventos, al igual que en Java, hemos de indicarle al objeto fuente del evento quien es su manejador, y ser ese manejador quien especifique el cdigo a ejecutar para gestionar ese evento. Para indicar quien es el manejador de un determinado evento de un objeto empleamos el tag de html que define ese objeto:

<tag atributo1 atributo2 onNombreEvento=cdigo JavaScript>

En la siguiente tabla se recogen los eventos ms comunes, cuando ocurren y su manejador

EVETO Click Change

OCURRE CUANDO El usuario hace clic en un elemeto de un formulario o link Se cambian los valores de un campo o rea de texto o elemento de seleccin.

MANEJADOR onClick onChange

Focus Blur mouseover mouseout select Submit Resize

Un elemento gana el foco Un componente pierde el foco El usuario posiciona el ratn sobre el elemento El usuario retira el ratn del elemento Seleccin de elementos de un elemento input de un formulario Pulsar el botn de submit de un formulario Cambio de tamao en la ventana

onFocus onBlur onMouseOver onMouseOut onSelect onSubmit onResize

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 43 de 60

Load Unload

Se carga la pgina en el navegador web El usuario sale de la pgina

onLoad onUnload

El siguiente documento html contiene un formulario con un bot n y un campo de texto sobre los cuales escuchamos y manejamos varios eventos empleando JavaScript.

<html> <head> <TITLE>ejemplo15.html</TITLE> </head> <body > <form NAME="form"> <!al hacer clic en este componente de texto El color de fondo de la pgina se vuelve verde --> <input type ="text" name ="texto" value ="Rojo" onClick="window.document.bgColor = 'FF0000';"><BR/><BR/> <!Al introducer el ratn en el botn cambia a Azul el color de fondo, al sacarlo a negro --> <input type ="button" name ="submit" value ="Azul" onMouseOver="window.document.bgColor = '0000FF';" onMouseOut="window.document.bgColor = '000000';"><BR/> </form> </body> </html>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 44 de 60

6 INTERFAZ DE USUARIO DE JAVASCRIPT


JavaScript provee de mecanismos, bastante limitados, para interactuar con el usuario en base a ventanas. Estas se suelen emplear o bien para mostrarle al usuario ciertos mensajes de advertencia, o bien para pedirle cierta informacin. Para mostrarle un mensaje de advertencia al usuario, sin esperar que ste nos de ningn tipo de realimentacin, empleamos la instruccin alert, a la cual le podemos pasar el texto que desemos mostrar al usuario. Veamos un ejemplo:

<HTML> <HEAD> <TITLE>ejemplo16.html</TITLE> </HEAD> <BODY> <A HREF="#" onClick="alert('Te dije que no hicieses click!!!')";> No hagas click aqu</A> </BODY> </HTML>

Si queremos algn tipo de realimentacin del usuario empleamos la instruccin prompt. Sus argumentos son una cadena de caracteres con el mensaje que queremos mostrar al usuario, y otra con un valor por defecto para el dato. Esta instruccin nos devuelve una variable de tipo String con el dato introducido por el usuario:

<HTML> <TITLE>ejemplo17.html</TITLE> <HEAD> <script language="JavaScript"> function insertarTextoUsuario(){ var texto;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 45 de 60

texto = prompt("Que opinas sobre esta web:","Que sea algo bonito"); alert("Gracias por tu opinin! \n Has opinado: " + texto); } </script> </HEAD> <BODY> <A HREF="#" onClick="insertarTextoUsuario()";>Escribir</A> </BODY> </HTML>

Empleando las funciones para la conversin de datos del apartado 2.5 podemos obtener entradas numricas del usuario empleando la funcin prompt. Desde JavaScrip tambin es posible abrir una pgina web en otra ventana del navegador. Para ello debemos emplear el mtodo window.open(). Veamos un ejemplo donde se emplea este mtodo:

<HTML> <HEAD> <TITLE>ejemplo18.html</TITLE> </HEAD> <SCRIPT LANGUAGE="javascript"> function abrirEnVentanaNueva(){ ourWindow=window.open("http://javahispano.org","", "toolbar=no,width=450,height=500,status=no,scrollbars=yes,men ubar=no");} </SCRIPT> </HEAD> <BODY> <FORM>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 46 de 60

<INPUT TYPE="BUTTON" VALUE="Ira a javaHispano!" onClick="abrirEnVentanaNueva();"> </FORM> </BODY> </HTML>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 47 de 60

7 DONDE SITUO MIS FUNCIONES Y OBJETOS DE JAVASCRIPT


En este apartado mostremos cual es el mejor sitio para definir las funciones y objetos de JavaScript, as como la estrategia a seguir para incrustar los Scripts en nuestras pginas web. Cuando el navegador visualiza una pgina web va ejecutando el JavaScript que encuentra en su seno. Si desde un script se referencia a una funcin o variable que se halla ms abajo en el documento html el navegador no tendr cargada esa funcin u objeto. Cuando tenga que ejecutar ese script, y se producir un error. En el documento html del ejemplo la funcin cuadrado() no ha sido cargada cuado es requerida para realizar una operacin, lo cual provocar que el script no funcione, y que posiblemente (depende de cada navegador) aparezca un molesto mensaje de error al visualizar el documento html.

<html> <head> <TITLE>ejemplo19.html</TITLE> </head> <body > <script language="JavaScript"> function prt(s) { document.writeln(s+"<BR/>"); } </script> <script language="JavaScript"> prt(cuadrado(4)); </script> <script language="JavaScript"> function cuadrado (dato){

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 48 de 60

return dato*dato } </script> </body> </html>

Debemos asegurarnos que tanto objetos, como funciones y variables globales han sido cargados cuando son usados. El mejor sistema para ello es definirlos todos en el HEAD del documento html. Como esta es la primera parte del documento en cargarse en memoria estaremos seguros de que se han cargado cuando los emplee cualquier script del documento. Modifiquemos el cdigo anterior siguiendo esta pauta; las dos funciones que se han empleado en l se han definido en el HEAD del documento html. A hora el cdigo se ejecutar sin ningn problema.

<html> <!-- en el HEAD defino todas las funciones, objetos y variables globales de JavaScript --> <head> <TITLE>ejemplo20.html</TITLE> <script language="JavaScript"> function cuadrado (dato){ return dato*dato } function prt(s) { document.writeln(s+"<BR/>"); } </script> </head> <body > <script language="JavaScript">

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 49 de 60

prt(cuadrado(4)); </script> </body> </html>

Otra buena prctica a la hora de incrustar los Scripts en el html es poner todo el cuerpo del script dentro de un par de comentarios de html. Esto evitar que los navegadores que no sean capaces de ejecutar el JavaScript, bien porque son muy antiguos y no soportan JavaScript, o simplemente porque no se ha implementado en ellos ese soporte, visualicen el cdigo del script como si se tratase de parte del documento html. De este modo el cuerpo del documento html anterior quedara as:

<body > <!--Esto previene la visualizacin del script como parte del documento <script language="JavaScript"> prt(cuadrado(4)); // Esto previene la visualizacin del script </script> </body -->

7.1 SEPARANDO LOS SCRIPTS Y EL HTML


Es fcil que, con un poco de prctica, desarrollemos Scripts que sean reutilizables en varios documentos html. Si tenemos un mismo s cript en varios documentos html es muy difcil

mantenerlo a largo plazo; un cambio en el script, bien porque has descubierto un bug, o porque has aadido o mejorado su funcionalidad, supondra hacer muchos de Copy Paste. En programacin el Copy Paste es la principal fuente de errores; un Copy Paste mal hecho supone un bug o un programa que no funciona, y lo q suele ser peor y ms frecuente: ue olvidarse de hacer un Copy Paste supone, no slo que parte de la aplicacin siga funcionando mal, sino que adems surjan comportamientos inconsistentes en nuestro cdigo: lo que en un sitio se hace de un modo en otro cdigo se hace de otro modo. Es de gran ayuda para mantener estos scripts reutilizables separarlos de las pginas web donde se van a emplear y localizarlos en un nico sitio. De este modo sern ms fciles de

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 50 de 60

mantener; con esta medida uno de los problemas del Copy Paste desaparece: los scripts quizs funcionen mal, pero nunca de modo inconsistente, ya que siempre se estar ejecutando el mismo cdigo. Para ejecutar un fragmento de JavaScript contenido en un archivo externo al documento html hemos de indicar el nombre del archivo en el atributo src del tag que incrusta el script dentro del documento html:

<script language="JavaScript" src = "archivo.js">

El archivo externo donde est el cdigo JavaScript ha de ser un archivo de texto con extensin js. El cdigo del apartado anterior, retirando todo el JavaScript del html quedara as:

<html> <head> <TITLE>ejemplo21.html</TITLE> </head> <body > <script language="JavaScript" src = "script.js"> </script> </body> </html>

Y el contenido del archivo script.js, situado en el mismo directorio que el documento html, sera:

function cuadrado (dato){ return dato*dato } function prt(s) {

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 51 de 60

document.writeln(s+"<BR/>"); } prt(cuadrado(4));

Si el archivo con el cdigo JavaScriopt no se situase en el mismo directorio que el documento html bastara con incluir el path del archivo en el atributo src de la etiqueta del script.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 52 de 60

8 UN EJEMPLO REAL: VALIDACIN DE FORMULARIOS HTML


Hasta ahora los cdigos de ejemplo que hemos empleado son muy simples y poco reales. Su propsito era mostrar la sintaxis bsica de JavaScript sin que la complejidad del cdigo despistase al lector de ste objetivo. En esta seccin

recogeremos un ejemplo ms real en el que se usa

JavaScript. Adems es una de las y aplicaciones portables ms entre

tiles,

navegadores, con las que yo me he encontrado para este lenguaje validacin web. Cuando Figura 3 Formulario que vamos a validar en este ejemplo. tenemos un de de script: la

formularios

formulario en una web una tarea necesaria es validar la informacin que el usuario introduce en l. Hay dos

aproximaciones para hacer esto: realizarla en el servidor, o en el cliente. Si la realizamos en el servidor habr que enviar los datos a travs de la red, que es bastante lento, el servidor tendr que procesarlos y enviar la respuesta nuevamente a travs de la red. Las desventajas de esta aproximacin son dos: primero, es lenta, ya que la red est de por medio, y carga ms an de trabajo a nuestro servidor. Hay ciertas validaciones que slo pueden hacerse en el servidor, porque, por ejemplo, involucran una consulta a u base de na datos, consulta en la que se implica informacin que no queremos arriesgarnos a enviar abiertamente por la red. Sin embargo muchas de las validaciones se pueden realizar en el cliente: comprobar si ha introducido todos los campos, si el email es vlido y a menudo todas las validaciones se pueden realizar en el cliente. Esto no slo es mucho ms rpido, lo que redunda en la satisfaccin del usuario, sin que rebaja la carga del servidor, que ahora no tiene que validar lo datos que se le envan, ni tendr que procesar (al menos no tantos) envos con informacin incorrecta o incompleta.

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 53 de 60

JavaScrip se puede emplear para realizar estas validaciones en el cliente, y eso ser lo que hagamos en este caso prctico. Partiremos del formulario de la Figura 3 y realizaremos las siguientes validaciones:

1. 2. 3.

Que est el nombre y que tenga al menos 3 caracteres. Que est el apellido y que tenga al menos 3 caracteres. Que est el email, que tenga al menos dos caracteres antes de la @, al menos 4 caracteres despus, contando el ., y que tenga al menos un punto despus de la @.

4. 5.

Que haya seleccionado el sexo. Que haya seleccionado la edad.

Adems cada vez que encontremos un error en una validacin de un campo del formulario haremos aparecer una ventana con un mensaje de error explicando cual es el problema. Aunque es redundante, y puede ser bastante agobiante para el usuario, el campo de texto del email se chequea automticamente cada vez que este pierde el foco. Adems muestra un mensaje de error al usuario y vuelve a requerir el foco. Esto le hemos hecho para sofisticar un poco ms el ejemplo y para ilustrar como se pueden conseguir este tipo de comportamientos, y no porque sea un buena prctica o necesario para la correcta validacin del usuario.

<html> <head> <!-- Aqu est el cdigo _JavaScript, en el head para que se cargue antes de visualizar la pgina--> <title> formulario.html</title> <script language="JavaScript"> //chequea que el texto tenga al menos 2 cracteresfunction chequeaNombre(texto){ if(texto.length < 2) return false; return true; }

//Chequea que se haya selccionda algo en la lista function chequeaSeleccionLista(texto){ if(texto =="--") return false;

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 54 de 60

return true; }

//chequea que el email est bien formado function chequeaMail(email){ var posicion_arroba = email.indexOf("@"); //Si hay almenos dos caracteres antes de la @ y hay @ if(posicion_arroba < 2){ return false; } //Si no hay al menos 4 catrecteres despus de la arroba if(email.length - posicion_arroba < 5){ return false; } //Si no hay un punto despus de la arroba if(email.indexOf(".", posicion_arroba) <0){ return false; } return true; }

/*Funcion que chequea el mail al perder el foco. Si es incorrecto muestra un mensaje de advertencia al usuario*/ function chequeaMailAlPerderFoco(){ if(!(chequeaMail(window.document.inscripcion.email.value))){ alert('Has puesto mal tu email'); window.document.inscripcion.email.focus() window.document.inscripcion.email.select();} }

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 55 de 60

/*Funcion invocada al hacer click en el botn de submit * Si devuelve true el formulario se envia, si no no se envia. */ function chequeaFormulario(){ var valido = true; var nombre = window.document.inscripcion.nombre.value; var apellido = window.document.inscripcion.apellido.value; var email = window.document.inscripcion.email.value; /*Como hay dos elementos con el mismmo atributo name no los puedo referenciar como window.document.inscripcion.sexo, ese elemento no existir. No me queda ms remedio que acceder al array elements, un propiedad del objeto formulario donde estan almacenados todos los objetos que contiene, y acceder a las posiciones donde estn los checkboxes*/ var hombre = window.document.inscripcion.elements[3].checked; var mujer = window.document.inscripcion.elements[4].checked; var edad = window.document.inscripcion.edad.value;

//Que los tres primeros datos sean correctos valido = valido && chequeaNombre(nombre); //Si no est bine avisamos al usario if(!valido){ alert("El nombre no ha sido bien introducido"); return false; } valido = valido && chequeaNombre(apellido);

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 56 de 60

//Si no est bine avisamos al usario if(!valido){ alert("El apellido no ha sido bien introducido"); return false; } //El cheque del mail es redundante. Sera mejor, para no agobiar al usuario,no chequerlo al perder el foco el campo de texto*/ valido = valido && chequeaMail(email); //que haya selciondo el sexo

valido = valido && (mujer || hombre); //Si no est bine avisamos al usario if(!valido){ alert("Especifique el sexo"); return false; } //que haya selciionada algo en la lista valido = valido && chequeaSeleccionLista(edad); //Si no est bine avisamos al usario if(!valido){ alert("Seleccione la edad"); return false; } return true; } </script> </head> <body > <H1>Formulario de inscripcin</H1>

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 57 de 60

<!--El formulario slo se enviar si chequeaFormulario devuelve "true"--> <form action = "" method="GET" name ="inscripcion" onSubmit="return chequeaFormulario();"> <TABLE width = 100%> <TR><TD width = 40%>Nombre: </TD> <TD width = 60%><input type = "text" name = "nombre" size ="20"></TD></TR>

<TD width = 40%>Apellido: </TD> <TD width = 60%><input type = "text" name = "apellido" size ="20"></TD></TR>

<TR><TD width = 40%>Direccin de email:</TD> <!--Listener en el campo de texto del email--> <TD> <input type = "text" name = "email" size onBlur="chequeaMailAlPerderFoco();"></TD></TR> <TR><TD width = 40%>Sexo</TD> <TD> <input type = "radio" name = "sexo" value = "Hombre" >Hombre <input type = "radio" name = "sexo" value = "Mujer" > Mujer</TD></TR> <TR><TD width = 40%>Edad:</TD> <TD> <select name = "edad" > <option value = "--" SELECTED >-<option value = "10-16" >10-16 <option value = "16-26" >16-26 <option value = "26-35" >26-35 <option value = "35-" >35-</TD></TR> </TABLE> ="20"

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 58 de 60

<BR/><BR/> <center><input type = "submit" name = "enviar" value = Enviar"> <input type = "reset" </form> </body> </html> value = "Reset" >

Java2, tutorial de javahispano (http://javahispano.org).

Pgina 59 de 60

9 INDICE:
Sobre este documento 1 Introduccin 1.1 2 Diferencias entre JaVA y javaScript 3 4 4 5 5 6 7 8 9 10 13 14 16 17 20 20 20 22 25 25 26 27 27 29 30 32

Varibales y tipos de datos en JavaScript 2.1 2.2 2.3 2.4 Variables mbito de las variables Comentarios en JavaScript Tipos de dato El Objeto String

2.4.1 2.5 2.6

Conversin entre tipos de dato Operadores Operadores lgicos

2.6.1 2.7 2.8 3

ARRAYS El Objeto Math

Control de flujo en JavaScript 3.1 Sentencias Condicionales If Switch

3.1.1 3.1.2 3.2

Bucles Bucle while Bucle do while Bucle for Bucle for in Break y continue

3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.3 4

return

Funciones y Objetos

Java2, tutorial de javahispano (http://javahispano.org). 4.1 4.2 4.3 Funciones Objetos Document Object Model Sobre la compatibilidad de los objetos del DOM Donde encuentro ms informacin sobre los DOMs ?

Pgina 60 de 60 32 34 38 41 41 42 44 47 49 52 59

4.3.1 4.3.2 5 6 7

Gestin de Eventos en JavaScript Interfaz de usuario de JavaScript Donde situo mis funciones y objetos de JavaScript 7.1 Separando los Scripts y el html

8 9

Un Ejemplo real: Validacin de formularios html Indice:

También podría gustarte