Manual Completo de DHTML y JavaScript

Curso de JavaScript - ndice

-1-

Indice 1 INTRODUCCIN .................................................................................... 3

1.1 Qu es JavaScript...................................................................... 3 1.2 Origen e incompatibilidades entre navegadores........................ 3 1.3 Editores HTML y JavaScript. ..................................................... 4 1.4 JavaScript y HTML..................................................................... 5

1.4.1 Pasos para crear un programa JavaScript. .................. 5 1.4.2 Dnde colocar los guiones. .......................................... 6 1.4.3 Comentarios en los guiones. ........................................ 7 1.4.4 Ocultar los guiones en los navegadores antiguos. ....... 8

1.5 Elementos de un programa........................................................ 9 2 ELEMENTOS BSICOS....................................................................... 13

2.1 Variables e identificadores....................................................... 13 2.2 Tipos de datos. ........................................................................ 16 2.3 Operadores y Expresiones. ..................................................... 19

2.3.1 Operador de concatenacin. ...................................... 20 2.3.2 Operadores aritmticos. ............................................. 20 2.3.3 Operadores de asignacin. ........................................ 23 2.3.4 Operadores de comparacin...................................... 24 2.3.5 Operadores lgicos. ................................................... 26 2.3.6 Orden de evaluacin de las expresiones. .................. 27

3 ESTRUCTURAS DE CONTROL........................................................... 31 3.1 Estructuras alternativas ........................................................... 31

3.1.1 Alternativa simple ....................................................... 31 3.1.2 Alternativa doble......................................................... 32 3.1.3 La instruccin ? .......................................................... 33 3.1.4 Alternativa mltiple ..................................................... 34

3.2 Estructuras repetitivas ............................................................. 37 3.2.1 Estructura while.......................................................... 37 3.2.2 Estructura do..while.................................................... 38 3.2.3 Estructura for.............................................................. 41 3.2.4 Bucle for..in ................................................................ 44

3.3 Utilizacin de arrays mediante estructuras de control.............. 45 3.3.1 Creacin de un Array ................................................. 46 3.3.2 Manipulacin de los elementos de un Array............... 46 3.3.3 Recorrido de los elementos de un Array .................... 47 3.3.4 Introduccin de los elementos del array desde la consola del usuario ................................................................................ 48 3.3.5 Bsqueda en un array ................................................ 49 3.3.6 El Objeto Array ........................................................... 52

3.4 Ejercicios propuestos............................................................... 53 4 FUNCIONES ......................................................................................... 62

4.1 Creacin de una funcin .......................................................... 62 4.1.1 Dnde declaramos una funcin?.............................. 63

4.2 Llamada a una funcin............................................................. 63 4.3 Argumentos ............................................................................. 64 4.4 Observaciones respecto a la utilizacin de funciones.............. 65 4.5 Variables locales y globales..................................................... 66 4.6 Funciones predefinidas............................................................ 66 4.7 Ejercicios ................................................................................. 68

Curso de JavaScript - ndice

-2-

5 OBJETOS ............................................................................................. 76 5.1 Definicin ................................................................................. 76 5.2 Jerarqua de objetos en JavaScript.......................................... 76

5.2.1 Referencia a los objetos............................................. 77 5.2.2 Los objetos del Navegador......................................... 78 5.2.3 Los objetos predefinidos ............................................ 81

5.3 Propiedades y mtodos de los objetos del navegador............. 83 5.3.1 El objeto Window........................................................ 83 5.3.2 El objeto Frame.......................................................... 92

5.3.2.1 Cargar mltiples marcos ............................... 97 5.3.3 El objeto Location....................................................... 98 5.3.4 El objeto History ....................................................... 100 5.3.5 El objeto Navigator ................................................... 101

5.4 Propiedades y mtodos de los objetos del documento.......... 103 5.4.1 El objeto Document .................................................. 103 5.4.2 Los objetos Link y Anchor ........................................ 108 5.4.3 El objeto Image ........................................................ 109 5.4.4 Los objetos del formulario ........................................ 113

5.4.4.1 Los objetos text, textarea y password......... 118 5.4.4.2 Los objetos button, reset y submit .............. 120 5.4.4.3 El objeto checkbox...................................... 120 5.4.4.4 El objeto radio............................................. 122 5.4.4.5 El objeto select ........................................... 124 5.4.4.6 El objeto hidden .......................................... 128

5.5 Propiedades y mtodos de los objetos del lenguaje.............. 128 5.5.1 El objeto String ......................................................... 128 5.5.2 El objeto Math .......................................................... 134 5.5.3 El objeto Date........................................................... 137

5.6 Objetos personalizados ......................................................... 141 5.7 Ejercicios ............................................................................... 142

6 EVENTOS ........................................................................................... 148 6.1 Definicin ............................................................................... 148 6.2 Lista de eventos ms comunes ............................................. 149 6.3 Ejemplos prcticos................................................................. 152

7 DHTML Y EFECTOS MULTIMEDIA ................................................... 159 7.1 Introduccin ........................................................................... 159 7.2 Definicin de estilos ............................................................... 160 7.3 Trabajar con DHTML. ............................................................ 164

7.3.1 Mover texto e imgenes ........................................... 164 7.3.2 Cambiar el color de texto al pasar el puntero del ratn por un link..................................................................................... 170 7.3.3 Ocultar y mostrar texto e imgenes.......................... 172 7.3.4 Mens deslizables.................................................... 176 7.3.5 Archivos JavaScript externos ................................... 180

8 APNDICE.......................................................................................... 184 8.1 Valores de los colores............................................................ 184 8.2 Objetos predefinidos .............................................................. 187 8.3 Referencia rpida a objetos JavaScript ................................. 191 8.4 Referencia rpida a eventos ms comunes........................... 197

9 GLOSARIO DE TRMINOS ............................................................... 198

Curso de JavaScript - Introduccin

-3-

1 INTRODUCCIN. 1.1 Qu es JavaScript.

JavaScript es un potente lenguaje de programacin basado en scripts y enfocado a Internet, que se utiliza fundamentalmente para:

realizacin de aplicaciones para la www. creacin de interfaces de usuario. aadir interactividad a las pginas web. generacin de HTML dinmico. control de eventos en pginas HTML etctera.

A menudo se llama a JavaScript lenguaje de escritura de guiones. Un guin

JavaScript es un programa incluido en una pgina HTML, el texto del guin no aparece en la pantalla del usuario. Los programas se sitan en una pgina web entre las etiquetas y , y se ejecutarn automticamente al abrir dicha pgina con un navegador. No se requiere compilador. Ser el propio navegador el encargado de interpretar y ejecutar el cdigo JavaScript. NOTA No debemos confundir el lenguaje JavaScript con el lenguaje Java. Algunas de las diferencias son:

JavaScript Java - Es un lenguaje sencillo. -Es un lenguaje ms complejo y completo; con

una estricta orientacin a objetos. - Diseado para desarrollar aplicaciones para la www.

- Diseado para desarrollar aplicaciones de propsito general.

- Lenguaje interpretado por el navegador. No requiere compilador.

- Lenguaje compilado.

- Ms flexible. No requiere declarar variables ni tipos (aunque es aconsejable hacerlo).

- Tiene reglas mucho ms rgidas. Hay que declarar todas las variables con sus tipos, etctera.

1.2 Origen e incompatibilidades entre navegadores.

JavaScript naci en Netscape bajo el nombre de LiveScript (primera versin de JavaScript). Desde su nacimiento ha ido evolucionando junto con los navegadores que lo soportan Navigator de Netscape e Internet Explorer de Microsoft.

Por su parte la empresa MicroSoft ha realizado una implementacin de este

lenguaje para su navegador denominada JScript. A continuacin se muestran las principales versiones del lenguaje

JavaScript y las versiones de los navegadores que lo soportan. Tambin se pueden observar las versiones de JScript equivalentes.

Versin de JavaScript

Versin de Navigator Versin de Internet Explorer

Versin de JScript


-4-

JavaScript 1.0 Navigator 2.0 Internet Explorer 3.0 Jscript 1 JavaScript 1.1 Navigator 3.0 Internet Explorer 3.02 Jscript 2 JavaScript 1.2 Navigator 4.0 Internet Explorer 4.0 Jscript 3 JavaScript 1.3 Navigator 4.5 Internet Explorer 5.0 JScript 5 JavaScript 1.4 Navigator 5.0 Internet Explorer 5.5... Jscript 5.5...

Nota: Para saber qu versin Jscript tenemos instalada consultamos las propiedades del archivo jscript.dll. Hacemos clic en la ficha versin para ver la versin. Cada nueva versin del navegador es capaz de ejecutar un programa

JavaScript escrito para esa versin o para cualquiera de las versiones anteriores (por ejemplo, Internet Explorer 5.0 y Navigator 4.0 pueden ejecutar programas escritos para JavaScript 1.2, 1.1 y 1.0.). Sin embargo, algunas caractersticas avanzadas de las versiones ms recientes de JavaScript pueden no estar soportadas por algunas versiones antiguas del navegador.

Por su parte, JScript tiene una compatibilidad ms restringida ya que se circunscribe al mbito del navegador de MicroSoft (utiliza caractersticas que no estn soportadas por los navegadores de NetScape).

1.3 Editores HTML y JavaScript.

Al ser JavaScript texto normal, se puede utilizar casi cualquier tipo de editor de textos. Lo mejor es empezar con un programa que slo admita texto normal como su formato estndar como por ejemplo el Bloc de Notas (NOTEPAD.EXE) de Windows 95, 98 o NT. Tambin podemos utilizar el Worpad de Windows 95, 98 o NT.

Figura1_1. Editor Bloc de Notas.

La Figura1_1, muestra el Bloc de Notas para escribir cdigo HTML con JavaScript. Con independencia del programa que usemos no debemos olvidar guardar el archivo con la extensin .htm o .html.

Tambin se puede usar alguno de los editores HTML como Adobe Golive, Microsoft Front Page, Home Page de FileMaker o Dreamweaver de Macromedia, etc.


-5-

Basta con conmutar a su modo Fuente HTML o HTML para empezar a escribir guiones.

Figura1_2. Editor Microsoft FrontPage 2000.

La Figura 1_2 muestra el editor FrontPage 2000 en su modo HTML, con un

documento htm, desde aqu se pueden crear y modificar guiones JavaScript y cdigo HTML.

1.4 JavaScript y HTML.

Los programas JavaScript se encuentran en pginas HTML. El navegador reconoce un programa JavaScript cuando se encuentra con una etiqueta . A partir de ese momento ser el intrprete JavaScript el encargado de interpretar y ejecutar el cdigo hasta la etiqueta .

1.4.1 Pasos para crear un programa JavaScript.

Para crear un programa JavaScript debemos seguir los siguientes pasos:

1. Crearemos una pgina HTML utilizando cualquier editor, por ejemplo el Bloc de Notas. (Tambin podemos utilizar una pgina ya creada y continuar con el paso siguiente).

2. Insertaremos dentro de la pgina HTML las etiquetas y en el lugar donde se situar el cdigo JavaScript.

3. Introduciremos el cdigo JavaScript entre dichas etiquetas. 4. Salvaremos el programa poniendo especial cuidado para que el editor

mantenga la extensin .htm 5. Para ejecutar el programa solamente tendremos que abrir el archivo con el

navegador.


-6-

Ejemplo1_1.htm: El siguiente cdigo HTML:

Mi primer guin Esto es HTML document.write("Esto es JavaScript.") Esto es HTML

Producir como resultado la aparicin de tres lneas en la pantalla.

Esto es HTML Esto es JavaScript. Esto es HTML

La lnea central se ha escrito desde un programa JavaScript mediante la instruccin:

document.write("Esto es JavaScript.")

De hecho, esta es la nica instruccin que contiene el programa.

El modificador LANGUAGE con el valor "JavaScript" no es obligatorio pero

permite indicar al navegador cul es el lenguaje de SCRIPT que vamos a utilizar incluyendo tambin la versin. Por defecto se asume que "JavaScript" equivale a "JavaScript1.1".

(Tambin se podra haber puesto LANGUAGE=JAVASCRIPT sin usar comillas.)

1.4.2 Dnde colocar los guiones.

Los guiones se pueden colocar en dos sitios de la pgina HTML:

En la cabecera de la pgina entre las etiquetas y o En el cuerpo de la pgina entre las etiquetas y .

En el ejemplo anterior el guin se escribi entre las etiquetas y

. Cuando el script se incluye en la cabecera de una pgina ste suele estar

estructurado en forma de funciones que se ejecutan slo cuando se las invoca desde otro script o cuando se produce el evento al que estn asociadas.

Cuando el script se incluye en el cuerpo de una pgina, las instrucciones que lo

forman se ejecutan en el momento de la carga de la pgina en el navegador.


-7-

Ejemplo1_2.htm: El siguiente script incluye una funcin en la cabecera del documento HTML, desde el script del cuerpo de la pgina se llama a la funcin en el momento de la carga de la pgina en el navegador:

Mi primer guin function vertexto(){ document.write("Esto es JavaScript.") } Esto es HTML vertexto() Esto es HTML

El resultado que se obtiene al visualizar la pgina es el mismo que el obtenido en el Ejemplo1_1.htm.

1.4.3 Comentarios en los guiones.

JavaScript permite aadir comentarios al cdigo que no sern ejecutados ni visualizados por el navegador. Estos comentarios sirven para explicar el cdigo del programa; por ejemplo, para aclarar una expresin compleja, para indicar cul es el contenido de una variable, etctera. Se visualizarn cuando editemos el archivo HTML.

Los comentarios pueden ser: De una lnea. Se indican mediante dos barras inclinadas a la derecha (//). Todo

lo que aparezca detrs de dichas barras hasta el final de la lnea ser considerado comentario y, por tanto, ser ignorado por el navegador. Ejemplo: // Esto es un comentario document.write("Esto es JavaScript.")//otro comentario

De varias lneas. En este caso deberemos indicar el comienzo del comentario mediante los caracteres barra inclinada a la derecha y asterisco (/*). Tambin indicaremos el final del comentario, en este caso mediante la secuencia de caracteres inversa: asterisco y barra inclinada a la derecha (*/), tal como podemos observar en el siguiente fragmento de cdigo:


-8-

/* Este es un ejemplo de comentario de varias lneas */

1.4.4 Ocultar los guiones en los navegadores antiguos.

Los navegadores antiguos como Netscape1.x, las versiones anteriores de Microsoft Internet Explorer 3 no entienden JavaScript. Por ello conviene incluir el cdigo de los scripts dentro de un comentario HTML, para que aquellos navegadores que no reconozcan la etiqueta no muestren las sentencias del mismo como texto plano.

Un comentario HTML tiene la siguiente sintaxis:

Ejemplo:

El comentario empieza con los caracteres:

Para ocultar JavaScript a los navegadores antiguos escribiremos los

comentarios como se expone a continuacin: La ltima lnea de comentario empieza con //, indicando que es un comentario JavaScript, y termina con -->, que finaliza un comentario HTML. En Netscape Navigator es necesario incluir un comentario JavaScript antes de finalizar el comentario HTML.

Ejemplo1_3.htm: El siguiente ejemplo muestra el uso de comentarios HTML para ocultar guiones JavaScript:

Mi primer guin


-9-

// Fin de ocultacin del guin --> Esto es HTML Esto es HTML

1.5 Elementos de un programa.

En una primera aproximacin podemos decir que un programa es un conjunto de instrucciones que realiza una determinada tarea para la que ha sido diseado. Los programas, por tanto, se componen bsicamente de instrucciones que determinan las acciones que se realizaran durante la ejecucin del programa.

Tradicionalmente estas instrucciones se catalogan como:

Instrucciones declarativas o declaraciones: declaran los objetos que van a intervenir en el programa (por ejemplo las variables).

Instrucciones de asignacin: se utilizan para asignar valores. Instrucciones de entrada / salida: que permiten introducir / enviar datos

desde / hasta un dispositivo. Instrucciones de control: determinan la secuencia ejecucin del programa.

Veamos un ejemplo: Ejemplo1_4.htm: El siguiente programa permite al usuario introducir un importe en pesetas y calcula y visualiza el importe equivalente en euros.

Mi primer programa

var ImportePtas; var ImporteEuros; ImportePtas=prompt("Introduce el importe en pesetas:", 1); if (ImportePtas > 0) { ImporteEuros = ImportePtas / 166.33; alert(ImporteEuros); } else


-10-

{ alert("Importe erroneo"); } // Fin del programa.

Podemos observar que el programa realiza las siguientes tareas:

- La etiqueta indica el comienzo del script. - Las instrucciones: var ImportePtas;

var ImporteEuros; Declaran las variables ImportePtas e ImporteEuros para que puedan ser utilizadas posteriormente.

- La instruccin:

ImportePtas = prompt("Introduce el importe en pesetas: ",1); Visualizar el texto "Introduce el importe en pesetas: ", permitiendo al usuario introducir un importe. Dicho importe ser asignado a la variable ImportePtas.

- La instruccin if (ImportePtas > 0) es una instruccin de control. Comprueba el resultado de la condicin (ImportePtas > 0); si es verdadero ejecutar las instrucciones que se encuentran encerradas entre las llaves que aparecen a continuacin; en caso contrario ejecutar las instrucciones que siguen a la clusula else.

- La instruccin: ImporteEuros = ImportePtas/166.33;

Asigna a la variable ImporteEuros el resultado de dividir el valor de la variable ImportePtas entre 166.33.

- Las instrucciones: alert(ImporteEuros); y alert("Importe erroneo");

Visualizan el contenido de la variable ImporteEuros, o el texto "Importe erroneo", respectivamente, dependiendo de cul haya sido el resultado de evaluar la condicin (ImportePtas > 0)

- Los caracteres // sirven para escribir comentarios en el programa. Estos comentarios no se ejecutan. Su utilidad es servir como de ayuda al programador al documentar el programa.

- La etiqueta determina el final del script.

INSTRUCCIONES DE ENTRADA Y SALIDA EN JAVASCRIPT: A lo largo de estas primeras unidades utilizaremos con frecuencia instrucciones para visualizar o introducir datos; por ello vamos a anticipar en este punto algunas caractersticas de formato y funcionamiento de estas instrucciones:


-11-

La instruccin document.write("mensaje") permite escribir un texto en el documento actual. Ya hemos visto un ejemplo de utilizacin en el epgrafe JavaScript y HTML en esta misma unidad.

La instruccin alert se emplea para mostrar mensajes o visualizar datos.

Esta instruccin abre una ventana y muestra en ella el mensaje o texto especificado en la llamada. Tambin incluye un botn de Aceptar que sirve para cerrar la ventana. Por ejemplo, la instruccin: alert("Importe erroneo"); dar como resultado la siguiente ventana:

Con Microsoft Internet Explorer Con Netscape Navigator

Figura1_3a y Figura1_3b. Ejemplo de ejecucin de alert

La instruccin prompt muestra una ventana de dilogo que incluye:

- Un texto o mensaje. - Un rea de entrada de datos. - Dos botones: uno de Aceptar y otro de Cancelar.

Su sintaxis es: prompt("mensaje", valorpordefecto); Esta instruccin retorna un valor que normalmente se asignar a una variable segn el formato: variable = prompt("mensaje", valorpordefecto); Donde:

mensaje: es un texto o mensaje que queremos que aparezca. valor_por_defecto: es una cadena, o un nmero que se asumir por defecto en el caso de que no se introduzca ningn dato.

Descripcin: muestra una ventana de dialogo y espera a recibir una entrada de datos por parte del usuario. La ventana se cierra pulsando uno de los dos botones:

- Aceptar: acepta la entrada del usuario (o la entrada por defecto en su caso).

- Cancelar cancela la entrada que pudiese haber introducido el usuario y asume la entrada por defecto.

Si no se especifica ningn valor en valor_por_defecto se asumir un valor indefinido (). Es conveniente especificar siempre un valor por defecto, aunque sea 0 " ". En el ejemplo anterior, la instruccin:

ImportePtas = prompt("Introduce el importe en pesetas:",1);


-12-

Dar como resultado la aparicin de la siguiente ventana:

Figura1_4a y Figura1_4b. Ejemplo de ejecucin de prompt.

Con Microsoft Internet Explorer

Con Netscape Navigator

El navegador esperar a que el usuario introduzca un valor o acepte el valor por defecto y lo asignar a la variable ImportePtas tal como se indica al principio de la instruccin.

Curso de JavaScript Elementos Bsicos.

-13-

2 ELEMENTOS BSICOS.

Los elementos bsicos con los que nos encontraremos en un programa JavaScript se resumen a continuacin:

Variables Posiciones de memoria a las que se asigna un nombre y a las que se puede acceder para obtener un valor.

Operadores Smbolos que pueden usarse para calcular o comparar valores. Ejemplo: Suma + 1000

Expresiones Son combinaciones de variables, constantes y operadores que devuelven un valor realizando determinadas operaciones.

Ejemplo: Suma = Suma +1000

Sentencias o Instrucciones

Una sentencia puede incluir cualquier elemento de la grmatica de JavaScript.

Funciones Secuencia de sentencias que tienen un nombre y que puede ejecutarse las veces que sea necesario llamndola por su nombre.

El lenguaje presenta algunas normas o reglas que deben seguirse:

Distingue maysculas de minsculas. No es lo mismo definir una variable suma que Suma.

Los comentarios son iguales que en C/C++: /* ... */ para encerrar un bloque y // para comentarios de una lnea.

Cada sentencia ha de terminar en punto y coma (;). (Aunque no es estrictamente obligatorio)

Se pueden agrupar sentencias utilizando llaves { sentencia1; sentencia2; ... }

2.1 Variables e identificadores.

Las variables son elementos fundamentales en cualquier lenguaje de programacin. Sirven para guardar y manipular informacin. Podemos representar una variable como un recipiente en el que se puede depositar informacin que puede ser consultada o cambiada en cualquier momento de la ejecucin del programa.

En realidad una variable consiste en un conjunto de posiciones de memoria

reservadas que a las que damos un nombre llamado identificador de la variable que nos permitir manipular la informacin.

Con una variable se pueden realizar las siguientes operaciones:

CREACIN DE LA VARIABLE.


-14-

Las variables se crean normalmente al comienzo del programa utilizando la palabra var seguida del nombre de la variable que queremos crear, como en los siguientes ejemplos:

var nombre; var edad;

Se pueden declarar dos o ms variables en una instruccin. En estos casos se indicar la palabra reservada var y, a continuacin, la lista de las variables que queremos declarar (los nombres separados por comas):

var nombre, edad;

El nombre o identificador de la variable podr estar formado por:

- letras (maysculas y minsculas), - caracteres de subrayado (_), - el smbolo de dlar ($) - y nmeros (del 0 al 9); - pero no podr comenzar por un nmero. - Tampoco podr coincidir el nombre con alguna de las palabras

reservadas del lenguaje (nombres de comandos, etctera). A continuacin se muestran algunos ejemplos de identificadores vlidos y otros

ilegales:

Ejemplos de identificadores vlidos Ejemplos de identificadores ilegales var vApellido1; var 1Apellido; var $1Apellido; var #1Apellido; var _Apellido var Apellido1;

NOTA Como JavaScript diferencia maysculas y minsculas en los identificadores es muy fcil confundirse por ello debemos seguir dos normas: 1- Declarar todos los identificadores al comienzo del programa para poder comprobar rpidamente cualquier duda 2- Establecer un criterio a la hora de construir identificadores y seguirlo siempre (Determinar cuando se utilizan maysculas, minsculas y sub-guiones, etctera). A la hora de establecer este criterio deberemos valorar tambin la legibilidad del programa.

ALMACENAMIENTO DE INFORMACIN EN LA VARIABLE.

Para guardar informacin en una variable se utilizar el operador de asignacin (=) precedido por el nombre de la variable y seguido por el valor que queremos asignar. Ejemplos:

Nombre = 'Miguel'; Edad = 17;


-15-

Atencin: cuando guardamos informacin en una variable, cualquier otro valor que dicha variable tuviese anteriormente se perder (salvo que lo guardemos en otra variable antes de hacer la asignacin). JavaScript permite asignar un valor a una variable en el mismo momento de su declaracin. Ejemplo:

var Nombre = 'Miguel'; Tambin permite asignar valor a una variable que no ha sido previamente declarada. NuevoNombre = 'Alfonso';

En el ejemplo anterior NuevoNombre no ha sido declarada previamente, sin embargo, al encontrar esta expresin JavaScript crear implcitamente la nueva variable y le asignar el valor indicado. Esta prctica es, de todo punto de vista, desaconsejable; de hecho, la mayora de los lenguajes de programacin la consideran ilegal. Debemos acostumbrarnos a declarar todas las variables que vayamos a utilizar al comienzo del programa.

CONSULTA O UTILIZACIN DEL VALOR CONTENIDO EN LA VARIABLE.

Una vez declarada una variable podemos hacer referencia a su contenido para visualizarlo, o para emplearlo con otras expresiones.

Ejemplo2_1.htm:

Ejemplo2_1

/* Ejemplo creacin y manejo de variables */ var Num1 = 5; var Num2 = 7; var Suma; Suma = Num1+Num2; alert(Suma);

Este programa crea tres variables (Num1, Num2 y Suma), inicializando las dos primeras en el momento de su creacin y asignado el valor de la suma de estas a la variable Suma. Finalmente muestra una ventana de alerta con el valor de la variable Suma.


-16-

Figura2_1. Ejecucin de una instruccin alert que incluye una expresin numrica.

Nota: JavaScript elimina automticamente las variables al finalizar el programa en el que se han declarado .

2.2 Tipos de datos. La informacin que maneja un programa puede ser de distintos tipos: TEXTO o CADENAS :

Son cadenas de caracteres. Se pueden delimitar con comillas simples o dobles indistintamente. A continuacin podemos observar algunos ejemplos:

Ej: "Pulse una tecla para continuar", 'Cristina', "alk&d28" Se pueden realizar operaciones de concatenacin mediante el operador + Ej.: "Hola " + "Mundo"

dar como resultado "Hola Mundo"

Tambin podemos incluir dentro de una cadena caracteres especiales como salto de lnea (\n), salto de pgina (\f), tabulador (\t) o retorno de carro (\r).

Ej.: "Hola \nMundo" en una instruccin alert producir el siguiente resultado:

Figura2_2. Ejemplo utilizacin de \n

Si dentro de una cadena queremos incluir algn carcter de comilla simple o doble podremos utilizar una de las siguientes opciones:

a) Escribir el carcter directamente siempre que sea distinto del utilizado para

delimitar la cadena. Por ejemplo si queremos que aparezca el texto: 'Ests en "Mi PC"' Podemos hacerlo tal como aparece aqu usando comillas simples para delimitar la cadena.

b) Escapar el carcter que queremos que no sea interpretado. Por ejemplo: "Ests en \"Mi PC\"".

En los dos casos el resultado ser el mismo:


-17-

Figura2_3. Visualizacin del carcter " en una alerta

Cuando necesitemos utilizar el carcter \ como tal dentro de una cadena deberemos escaparlo utilizando el mismo carcter dos veces (\\). Ejemplo: alert("No existe el fichero

a:\\drivers\\configura.dat");

Figura2_4. Visualizacin de \ dentro de una alerta.

NMEROS:

Son valores numricos que se pueden expresar en cualquiera de los formatos

habituales. Permiten realizar operaciones aritmticas utilizando los operadores apropiados.

Un valor numrico se suele representar mediante una serie de dgitos que

pueden ir precedidos de un signo (+ -) y que pueden llevar un punto decimal. A continuacin podemos ver algunas expresiones numricas vlidas:

45 389.347 -18 +6789.89 -8768.3243

JavaScript tambin admite la notacin exponencial para representar valores numricos en formato de coma flotante:

56.987E+12 23634E-6 -484.2382E-20 Se pueden representar nmeros en base distinta de la decimal, por ejemplo en

hexadecimal, o en octal. Para expresar un nmero hexadecimal antepondremos el prefijo 0x (cero equis); y para expresar un nmero octal antepondremos un 0 (cero).


-18-

0xF34 (en hexadecimal) 0567 (en octal) Por ejemplo, la siguiente instruccin: alert(0xF34 +"\n"+ 0567);

Producir el siguiente resultado:

Figura2_5. El nmero 0xF34 (hexadecimal) y el 0567 (octal) se transforman a decimal.

Observamos que JavaScript ha transformado el F34 (hexadecimal pues va precedido por 0x) a su correspondiente valor decimal 3892. Tambin ha trasformado el 567 (octal pues va precedido por 0) al valor correspondiente en decimal: 375.

Atencin: debemos tener cuidado al utilizar 0 (cero) al comienzo de un nmero ya que JavaScript interpretar que se trata de un nmero octal. Por ejemplo, el siguiente fragmento de cdigo:

alert(315 +"\n"+ 227 +"\n"+ 045);

Dar como resultado:

Figura2_6. Si el primer dgito de un nmero es 0 JavaScript podr interpretar que est en octal y har las trasformaciones oportunas.

Observamos que mientras los nmeros 315 y 227 no han sido transformados, el 045 ha sido transformado a 35 ya que al anteponer un 0 al nmero JavaScript lo interpretar como octal.

Aunque los tipos cadena y numrico son los ms habituales, JavaScript soporta tambin otros tipos:

BOOLEANO (BOOLEAN)


-19-

Son valores lgicos que representan el valor verdadero (true) o falso (false). Normalmente estos valores se obtienen como resultado de una comparacin, o de la evaluacin de una expresin lgica.

OBJETO (OBJECT)

Contienen objetos que pueden tener propiedades y mtodos. NULO (NULL)

El valor null nos puede servir para averiguar si hemos inicializado o no una variable, comprobndolo con un if. INDEFINIDO (Undefined).

Un valor indefinido es el que corresponde a una variable que ha sido creada

pero no le ha sido asignado un valor.

2.3 Operadores y Expresiones.

Los operadores sirven para manejar o transformar la informacin formando expresiones.

Las expresiones son combinaciones de objetos como variables, constantes y

operadores que devuelven un valor realizando determinadas operaciones.

Normalmente en una expresin encontramos: Operandos son los objetos cuyo valor se manipula u opera. Operador u operadores son los objetos que determinan el tipo de operacin a

realizar:

Por ejemplo, la expresin 2 + 3 combina dos constantes numricas mediante la operacin de suma.

Todas las expresiones producen o devuelven un resultado de un cierto tipo

que estar determinado por el tipo de objetos que manipula y por las operaciones realizadas. Podemos establecer la siguiente clasificacin:

Tipo de expresin Tipo de valor devuelto Ejemplo Expresiones de cadena Cadena de caracteres 'Hola' + 'Mundo'

Expresiones aritmticas . Numrico 34 / 7 Expresiones relacionales o de comparacin

Lgico 3 < 5

Expresiones lgicas Lgico 3 < 5 && 5 < 7 Expresiones de asignacin. El valor asignado Num1 = 5 Observaciones:


-20-

No todas las expresiones requieren de la utilizacin de operadores, en realidad tan solo se requiere que devuelva un valor. En este sentido podemos considerar que una constante o una variable constituyen por s solas una expresin.

En las expresiones pueden intervenir otros elementos como funciones que estudiaremos ms adelante.

En JavaScript se emplean los siguientes operadores:

2.3.1 Operador de concatenacin.

Para unir cadenas de caracteres se emplea el operador de concatenacin (+). Por ejemplo la expresin "Buenos" + "Das" dar como resultado "BuenosDias".

2.3.2 Operadores aritmticos.

Se utilizan con datos de tipo numrico y devuelven siempre un valor numrico. Son los conocidos: suma (+), resta (-), multiplicacin (*), divisin (/), divisin entera (\) y mdulo o resto de la divisin entera (%). Ejemplo2_2.htm: Ejemplo de operadores aritmticos.

Ejemplo2_2 /* Ejemplo operadores aritmticos*/ var Num1 = 2, Num2 = 4, Num3 = 6; alert(

" Num1 \t" + (Num1) +"\nNum2 \t" + (Num2) +"\nNum3 \t" + (Num3) +"\nNum1 + Num2 \t" + (Num1 + Num2) +"\nNum3 / Num2 \t" + (Num3 / Num2) +"\nNum3 % Num2 \t" + (Num3 % Num2) +"\nNum1 + 2 \t" + (Num1 + 2) +"\nNum1 \t" + (Num1)

);


-21-

Figura2_7. Expresiones con operadores aritmticos.

JavaScript dispone tambin de operadores de incremento (++) y

decremento (--) que resultan muy tiles para realizar, de manera eficaz, operaciones muy frecuentes en programacin como son las que realizan los contadores:

INCREMENTO (++) incrementa el valor del operando en una unidad. En

realidad realiza dos operaciones: suma uno al operando y el resultado lo guarda en la variable que figura como operando.

Por ejemplo, la instruccin Conta++; aumentar en 1 el valor de Conta.

Este operador modifica el valor del operando incluyendo una asignacin de

manera implcita (a diferencia de los operadores anteriores que debe realizarse la asignacin de manera explcita).

El uso de este operador requiere que el operando sea una variable ya que

de lo contrario no se podr realizar la asignacin tal como ocurre en la siguiente instruccin: 5++;

El comportamiento de este operador cuando es el nico que interviene en

la expresin es relativamente sencillo. A continuacin veremos cmo se comporta cuando forma parte de una expresin ms compleja. Estudiemos la siguiente expresin:

Total = Conta++;

Suponiendo que Total y Conta son variables y que Conta tiene el valor 25 justo al llegar a esta lnea del programa, el comportamiento de esta instruccin ser el siguiente:

1. Se asigna el valor de la variable Conta a la variable Total, por tanto,

esta ltima quedar con el valor 25. 2. Se incrementa el valor de la variable Conta, con lo que sta quedar

con el valor 26.

Al finalizar la ejecucin de la instruccin la variable Conta valdr 26 y la variable Total tendr el valor 25. Conta primero devuelve su valor a la expresin y despus se reliza el incremento. Esta operacin recibe el nombre de post-incremento.


-22-

El comportamiento de este operador se modifica cuando se sita delante del operando como aparece en la siguiente expresin:

Total = ++Conta;

Al situar el operador delante del operando se realizar en primer lugar el incremento y posteriormente la variable Conta devolver su valor. Esta operacin recibe el nombre de pre-incremento.

DECREMENTO (--) el comportamiento de este operador es igual que el operador de incremento con la diferencia de que en lugar de sumar uno en cada operacin se resta una unidad. Tambin permite situarlo delante o detrs del operador. Su utilizacin es menos frecuente.

Ejemplo2_3.htm: El siguiente programa y su resultado muestran el comportamiento de los operadores de incremento y las diferencias entre el pre-incremento y el post-incremento.

Ejemplo2_3

/* Ejemplo incrementos*/ var Num1 = 2, Num2 = 4, Num3 = 6, Num4 = 8; var Num5, Num6; Num1++; ++Num2; Num5 = Num3++; Num6 = ++Num4; alert( " Num1: \t" + (Num1) +"\nNum2: \t" + (Num2) +"\nNum3: \t" + (Num3) +"\nNum4: \t" + (Num4) +"\nNum5: \t" + (Num5) +"\nNum6: \t" + (Num6) );

La ejecucin de este programa producir el siguiente resultado:

Figura2_8. Comportamiento de los operadores de pre y post incremento.


-23-

En el programa anterior podemos realizar las siguientes observaciones:

- Num1 y Num2 quedan incrementados en una unidad al aplicar el post-incremento y pre-incremento.

- Num3 y Num4 ven incrementado tambin su valor por las expresiones de post y pre-incremento en las que participan (Num5 = Num3++ y Num6 = ++Num4); quedando el primero con un valor de 7 y el segundo con un valor de 9.

- Num5 y Num6 tambin modifican su valor como resultado de las asignaciones arriba indicadas; pero mientras que Num5 toma el valor antes del incremento, Num6 toma el valor despus del incremento.

2.3.3 Operadores de asignacin.

Para asignar un valor a una variable se utiliza el operador de asignacin (=). As, podemos asignar a la variable Importe el valor 5 empleando dicho operador (Importe = 5;).

En JavaScript podemos tambin utilizar operadores que adems de la

asignacin realizan otras tareas como sumar, restar, multiplicar, dividir, etctera. El todos los casos el formato de utilizacin es el siguiente:

operando1 operador operando2

La variable que figura como operando1 recibe el resultado de realizar una cierta operacin (suma, resta, multiplicacin, etctera) entre dicha variable y el operando2.

ASIGNACIN Y SUMA (+=) Este suma el valor de la variable que figura a su

izquierda (operando1) al valor de la expresin que figura a su derecha (operando2) y asigna el resultado a la variable (operando1).

Ejemplo: consideremos el siguiente fragmento de programa y el resultado.

var Importe = 1; Importe += 5;

Declaramos la variable importe y le asignamos el valor 1. En la lnea siguiente utilizamos el operador (+=) que sumar los valores situados a ambos lados y asignar el resultado de la suma a la variable Importe situada a su izquierda. Podemos comprobar la instruccin Importe += 5; es equivalente a escribir Importe = Importe + 5;. Los dems operadores de asignacin tienen un comportamiento muy similar:

ASIGNACIN Y RESTA (-=) Ej.: A -= B; equivale a A = A B;

ASIGNACIN Y MULTIPLICACIN (*=)

Ej.: A *= B; equivale a A = A * B;

ASIGNACIN Y DIVISIN (/=)


-24-

Ej.: A /= B; equivale a A = A / B;

ASIGNACIN Y MDULO (%=) Ej.: A %= B; equivale a A = A % B;

Ejemplo2_4.htm: El siguiente programa muestra el funcionamiento de los operadores de asignacin +=, -=, *=, /= y %=. En el programa se utilizan cinco variables llamadas Suma, Resta, Multi, Divi y Modu ; se realizan las correspondientes operaciones de asignacin y despus se visualiza en una ventana los nombres de las variables y su valor.

Ejemplo2_4 /* Ejemplo operadores asignacin*/ var Suma = 6, Resta = 6, Multi = 6, Divi = 6, Modu = 6; Suma += 2; Resta -= 2; Multi *= 2; Divi /= 2; Modu %= 5; alert( " Suma \t" + (Suma) +"\nResta\t" + (Resta) +"\nMulti\t" + (Multi) +"\nDivi \t" + (Divi) +"\nModu \t" + (Modu) );

El resultado de la ejecucin del programa ser:

Figura2_9. Resultado de la ejecucin del programa.

2.3.4 Operadores de comparacin Se emplean para comparar dos valores, y devuelven, a su vez, un valor que es

el resultado de la comparacin (verdadero true o falso false). Los utilizaremos frecuentemente en programacin cuando debamos tomar decisiones en funcin del valor de un objeto del programa (Ejemplo: si SALARIO es menor de 4000000 entonces APLICAR_BONIFICACION).

El formato genrico de estas operaciones es:


-25-

operando1 operador_de_comparacion operando2

En JavaScript estn disponibles los siguientes operadores de comparacin: Igual (==) Distinto () Mayor que (>) Menor que (=) Menor o igual ( B devolver el valor true si el valor de A es mayor que el valor de B, de lo contrario devolver false;...).variando nicamente la condicin de la comparacin. Observaciones:

El valor (true o false) que devuelven estos operadores es de tipo BOOLEANO.

Debemos hacer algo con el valor que devuelven: asignarlo a otra variable (de tipo BOOLEANO), ejecutar una instruccin de control (como veremos ms adelante), visualizarlo, etctera.

No debemos confundir el operador de igualdad (==) que es un operador de comparacin, con el operador de asignacin (=).

Los operadores de comparacin se utilizan frecuentemente con cadenas de caracteres (Nombre == 'Miguel') para realizar bsquedas, comprobaciones, etctera. En estos casos las comprobaciones se basan en el valor de los caracteres en los cdigos ASCII y UNICODE.


-26-

Nota: A partir de la versin 1.3 JavaScript dispone tambin de los operadores de comparacin estrictamente igual (===) y estrictamente distinto (!==). Las expresiones lgicas se utilizan habitualmente en las instrucciones de control de flujo del programa para determinar las acciones a realizar en funcin del valor de una expresin. Supongamos que disponemos de tres variables A, B y C. Todas ellas tienen un cierto valor, y queremos asignar a la variable C la diferencia entre A y B pero slo en el caso de que A sea menor que B. En JavaScript lo indicaremos mediante la instruccin: if (A < B) {C = B A}; La clusula if se utiliza para realizar o no determinadas acciones en funcin de una condicin. La estudiaremos ms adelante junto con otras estructuras de control de flujo; por el momento podemos anticipar el siguiente formato bsico:

if (condicin) {acciones};

Donde condicin es cualquier expresin que devuelva un valor de tipo booleano y acciones son las instrucciones que se ejecutarn (en el caso de que solamente sea una instruccin se puede omitir los corchetes).

2.3.5 Operadores lgicos.

Ya hemos explicado que los operadores de comparacin devuelven un valor de tipo lgico verdadero/falso (true/false). En ocasiones se necesita trabajar con varias expresiones de comparacin (por ejemplo cuando queremos formar una condicin comprobacin o bsqueda que cumpla dos condiciones) en estos casos debemos recurrir a los operadores lgicos AND (&&), OR (||) y NOT (!).

Supongamos que queremos comprobar si el SALARIO de un empleado supera una determinada cantidad (150000), y si, adems, tiene ms de dos hijos, para realizar una determinada accin (APLICAR_PCTIRPF2). En este caso emplearemos el operador lgico AND. Este operador devolver el valor true cuando los dos operandos o expresiones son verdaderas. Simplificando podemos decir que se utiliza cuando queremos que se cumplan las dos condiciones.

Ejemplo: Si el SALARIO > 150000 AND NUMERO_HIJOS > 2 entonces APLICAR_PCTIRPF2

Cuando lo que queremos es comprobar que se cumple alguna de las dos

condiciones utilizaremos el operador OR (||). Este operador devolver el valor true cuando alguno de los dos operandos o expresiones es verdadero (cuando se cumple la primera condicin, o la segunda o ambas).

Ejemplo: Si OFICIO == 'Vendedor' OR CATEGORIA == 'Director' entonces AP_COCHE_EMPRESA.

En el ejemplo anterior se ejecutar el procedimiento AP_COCHE_EMPRESA

cuando se cumple alguna de las condiciones ( el OFICIO es 'Vendedor' o la categora es 'Director).


-27-

El operador NOT (!) se usa para negar una condicin o expresin lgica. As, para comprobar que un empleado no est casado podemos hacerlo: ...NOT CASADO... (suponiendo que existe la variable CASADO de tipo BOOLEANO). NOTA El formato que se aplica en los ejemplos anteriores no se ajusta a la sintaxis del lenguaje JavaScript. Se trata de un formato pseudocodificado, a medio camino entre el lenguaje natural y los lenguajes de programacin. Es muy intuitivo y nos servir para ilustrar conceptos sin necesidad de introducir otros nuevos. A continuacin incluimos los comandos equivalentes en JavaScript. if (SALARIO > 150000 && NUMERO_HIJOS > 2) APLICAR_PCTIRPF2; if(OFICIO =='Vendedor' || CATEGORIA == 'Director') APCOCHE_EMPRESA; if !CASADO ...; A continuacin se detallan las tablas de valores de los operadores lgicos AND, OR y NOT.

Operador AND: && Operador OR: || Operador NOT: ! Operando1

Operando2

Resultado Operando1

Operando2

Resultado Operando1 Resultado

true true true true true true

true false false true false true

true false

false true false false true true

false false false false false false

false true

Resumiendo, podemos afirmar que:

El operador AND devolver true cuando los dos operandos sean verdaderos, y false en cualquier otro caso.

El operador OR devolver true cuando alguno de los operandos sea verdadero (con independencia de que el otro sea verdadero o falso); y false cuando los dos operandos sean falsos.

El operador NOT devuelve true cuando el operando es falso, y false cuando el operando es true.

Podemos formar expresiones lgicas en las que intervengan varios operadores

lgicos de manera similar a como se hara con expresiones aritmticas en las que intervienen varios operadores aritmticos. En todo caso deberemos tener en cuenta la prioridad o precedencia del operador ya que puede afectar al resultado de la operacin, como veremos en el siguiente apartado.

2.3.6 Orden de evaluacin de las expresiones.

Cuando en una expresin se realizan varias operaciones, el orden de evaluacin de los operandos puede determinar el resultado de dicha expresin.


-28-

Por ejemplo, la expresin 12 + 24 / 6 dar un resultado distinto si se realiza primero la suma y despus la divisin (6), que si se invierte el orden de evaluacin (primero la divisin y luego la suma en cuyo caso el resultado ser 16).

JavaScript tiene asignado un orden de prioridad o precedencia a cada uno de

los operadores que determina el orden en el que se evaluarn en una expresin. La tabla siguiente muestra los operadores disponibles agrupados y ordenados de mayor a menor por su orden de precedencia. Prioridad Operador Operacin 1 ++, --, -, ! incremento, decremento, cambio de signo,

negacin 2 *, / , % multiplicacin, divisin, mdulo 3 +, - suma y resta 4 < , > , = mayor, menor, mayor o igual, menor o igual 5 ==, != igual, distinto 6 && conjuncin 7 || inclusin 8 =, +=, -=, *=, /=, %= asignacin, asignacin y suma, etctera. Observaciones:

Los operadores ++ y varan su comportamiento en una expresin dependiendo de si se aplican antes (pre-) o despus (post-).

Los operadores que se encuentran en el mismo grupo tienen la misma precedencia. En estos casos no se garantiza el orden de evaluacin. Si queremos que se evalen en algn orden concreto deberemos utilizar parntesis

Podemos comprobar que la expresin de nuestro ejemplo en JavaScript dar

como resultado 6 ya que la divisin se realiza antes que la suma. Esta es la prioridad establecida por defecto. Se puede cambiar utilizando

parntesis. En la expresin anterior, si queremos que la suma se realice antes que la divisin, lo indicaremos: (12 + 24) / 6; en este caso el resultado ser 16 NOTA: JavaScript permite expresiones como: 100000 >= SALARIO = 100000 && SALARIO


-29-

Num3 Num4 == Num2 + Num1 Num1 > Num2 || Num3 < Num4 Num3 + Num4 != 8 && Num1 / Num3 > 9 Num3 + Num4 != 8 && !(Num1 / Num3 > 9) A continuacin, escribir un programa que visualice el resultado de cada una de las expresiones.

SOLUCIN: 6 + Num3 / Num4 Primero se realiza la divisin y despus la

suma. El resultado ser: 6.666 -6 + Num3 / Num4 Primero que se realiza el cambio de signo,

despus se evala igual que la anterior. El resultado ser: -5.333

Num4 / Num2++ Se trata de una divisin en la que uno de los operandos es un post-incremento, por tanto, se realiza la divisin con el valor antes del incremento. El resultado ser: 3 Una vez realizada la divisin se llevar a cabo el incremento de Num2. Para que se realizase primero el incremento escribiremos: Num4 / ++Num2; en cuyo caso el resultado ser 1.5

Num3 Num4 == Num2 + Num1 Primero se evala por un lado la suma y por otro la resta. Despus se compara el resultado de ambas. El resultado ser false

Num1 > Num2 || Num3 < Num4 En primer lugar se realizan las dos comparaciones. Despus se opera con los valores obtenidos (false || true) El resultado ser: true

Num3 + Num4 != 8 && Num1 / Num3 > 9 Primero se realizan la suma por un lado y la divisin por otro. Despus se realizan las dos comparaciones. Por ltimo, se aplica el operador && a los resultados obtenidos (de las comparaciones). El resultado ser: false

Num3 + Num4 != 8 && !(Num1 / Num3 > 9)

Es igual que el anterior pero despus de evaluar las comparaciones ( y antes de aplicar el operador &&) se realizar la negacin de la segunda comparacin. El resultado ser: true

El programa solicitado es (pruebaexpre.htm): Prueba de expresiones /* Prueba de expresiones */ var Num1 = 0, Num2 = 1, Num3 = 2, Num4 = 3; alert( (6 + Num3 / Num4) + "\n" + (-6 + Num3 / Num4) + "\n" + (Num4 / Num2++) + "\n" + /* Observacion el valor de Num2 quedar modificado


-30-

despus de esta expresin */ (Num3 - Num4 == Num2 + Num1) + "\n" + (Num1 > Num2 || Num3 < Num4) + "\n" + (Num3 + Num4 != 8 && Num1 / Num3 > 9) + "\n" + (Num3 + Num4 != 8 && !(Num1 / Num3 > 9)) ); Como resultado de la ejecucin del programa se visualizarn los siguientes resultados:

Figura2_11. Ejemplo de ejecucin del programa.

Cabe destacar que, tal como se observa en el programa, el valor de Num2 vara despus de aplicar el post-incremento. Por tanto, el resto de las operaciones se ven contaminadas por este. No obstante slo afecta a la expresin siguiente y, en este caso, el resultado final es el mismo.

Curso de JavaScript Estructuras de control

-31-

3 ESTRUCTURAS DE CONTROL.

JavaScript dispone de estructuras que permiten controlar el flujo de ejecucin del programa en funcin de ciertas condiciones. Por ejemplo, si se cumple una condicin se realizarn ciertas acciones, y si no se cumple se realizarn otras (estructuras alternativas); o repetir una secuencia de comandos un cierto nmero de veces (estructuras repetitivas). Este tipo de estructuras recibe el nombre de estructuras de control.

3.1 Estructuras alternativas

Determinan la ejecucin de una u otra parte del programa dependiendo de que se cumpla o no una cierta condicin. A su vez las estructuras alternativas se subdividen en simples, dobles, etctera como veremos a continuacin..

3.1.1 Alternativa simple

Si se cumple una determinada condicin se ejecutar un conjunto de instrucciones (que en caso contrario no se ejecutaran). Formato genrico:

if (condicin)

{

instrucciones

};

Diagrama de flujo:

Donde:

- condicin es cualquier expresin que devuelva un valor lgico (true/false).

- instrucciones es un bloque de una o ms instrucciones que se ejecutarn solo en el caso de que se cumpla la condicin. (Si se trata de una sola instruccin podemos prescindir de las llaves ({}).

Ejemplo3_1.htm: A continuacin escribiremos un programa que leer (mediante prompt) una nota introducida por teclado y, si la nota es igual o mayor que 5 visualizar una ventana con el texto APROBADO!, en caso contrario no har nada.


-32-

Ejemplo3_1 // Ejemplo de estructura alternativa simple. var Nota; Nota = prompt("Introduce la nota del alumno: ", 0); if (Nota >= 5) { alert("APROBADO!"); } // Fin del programa.

3.1.2 Alternativa doble

Si se cumple la condicin se ejecutar el primer bloque de instrucciones, si no se cumple se ejecutar el segundo bloque.

Formato genrico:

if (condicin)

{

instrucciones1

}

else

{

instrucciones2

};

Diagrama de flujo:

Ejemplo3_2.htm: A continuacin escribiremos un programa que leer (mediante prompt) una nota introducida por teclado y, si la nota es igual o mayor que 5 visualizar una ventana con el texto APROBADO!, en caso contrario visualizar una ventana con el texto suspenso!.

Ejemplo3_2 // Ejemplo de estructura alternativa doble. var Nota;


-33-

Nota = prompt("Introduce la nota del alumno: ", 0); if (Nota >= 5) { alert("APROBADO!"); } else { alert("suspenso!"); } // Fin del programa.

Todas las estructuras de control se pueden anidar. A continuacin veremos

un ejemplo en el que se utiliza el anidamiento de estructuras para realizar comprobaciones adicionales. La zona sombreada corresponde a la estructura anidada. Ejemplo3_3.htm:

Ejemplo3_3 // Ejemplo de anidamiento de estructuras alternativas. var Nota; Nota = prompt("Introduce la nota del alumno: ", 0); if (Nota >= 5 && Nota = 0 && Nota < 5) { alert("suspenso!"); } else { alert("Nota erronea"); } } // Fin del programa.

3.1.3 La instruccin ?.

En JavaScript est disponible la instruccin ? llamada instruccin de prueba de condicin. Se puede utilizar en algunas ocasiones en lugar de los la alternativa doble. Su formato genrico es:


-34-

(condicin) ? ExpresionSiVerdadera : ExpresionSiFalsa

Donde - Condicin : es cualquier expresin que devuelve un valor true o false. - ExpresionSiVerdadera: es una expresin que se ejecutar en el caso

de que la condicin tenga el valor true. - ExpresionSiFalsa: igual que la anterior pero solo se ejecutar cuando

la condicin es falsa.

Por ejemplo, la alternativa doble del ejemplo anterior puede sustituirse por la siguiente expresin: (Nota >= 0 && Nota < 5) ? alert("suspenso!") : alert("Nota erronea");

Empleando esta instruccin podemos evitar el riesgo de una divisin por cero as:

(Num1 > 0) ? Num3 = Num2/Num1 : Num3 = 0;

3.1.4 Alternativa mltiple

Esta estructura est disponible a partir de la versin JavaScript1.3. Tiene el siguiente formato:

switch (expresin)

{ case valor1:

instrucciones1;

break;

case valor2:

instrucciones1;

break;

case valor3:

instrucciones1;

break;

...


-35-

case valorn:

instruccionesn;

break;

[default:

instrucciones;]

};

Donde: - expresin es cualquier expresin vlida con la que se compararn los

valores que acompaan a la clusula case. - valor1,..valorn son valores que suponemos puede tomar la expresin a los

que les siguen la instruccin o instrucciones que queremos que se ejecute en cada caso.

- default es una clusula opcional, se ejecutarn las instrucciones que la siguen en el caso de que el valor no coincidiese con ninguno de los casos contemplados.

El funcionamiento de esta estructura es el siguiente: 1.- calcula el valor de expresin.

2.- comprueba desde el principio cada valor que acompaa a las clusulas case hasta encontrar alguno que coincida con el valor de expresin.

3.- cuando encuentra un valor que coincida con expresin ejecuta las instrucciones correspondientes hasta que encuentra la clusula break.

4.- si no encuentra ningn valor que coincida con expresion ejecuta las instrucciones correspondientes a la cusula default (si existe, en caso contrario no har nada).

5.- sale del bloque de la estructura switch..case.

Observaciones:

La clusula break que aparece en este formato no es obligatoria pero si no se utiliza cambiar el funcionamiento de la estructura switch ..case. Esta clusula es la responsable la salida del bloque una vez que se ejecuten las instrucciones de una de las clusulas case. Si no se pone, se seguirn ejecutando todas las instrucciones hasta llegar al final. Es decir las clusulas case sin break actuaran como puntos de entrada a la estructura, siendo la salida la misma en todos los casos.

Para una misma clusula case se pueden especificar diversos valores en lugar de un nico valor, en este caso se indicarn los valores separados por comas segn el formato:


-36-

case valor1, valor2, valor3: Ejemplo3_4.htm: el siguiente programa muestra la utilizacin de una estructura alternativa mltiple anidada dentro de una estructura alternativa doble.

Ejemplo3_4 // Ejemplo de estructura alternativa mltiple // (Anidada dentro de una alternativa doble). var Nota; var Calificacion = " "; Nota = prompt("Introduce la nota del alumno: ", 0); Nota = Math.round(Nota); if (Nota >= 0 && Nota


-37-

3.2 Estructuras repetitivas

En ocasiones necesitaremos que un bloque de instrucciones se ejecute varias veces seguidas; en estos casos utilizaremos estructuras repetitivas o bucles. En JavaScript disponemos de las siguientes:

3.2.1 Estructura while.

La estructura while ejecuta un bloque de instrucciones y repite dicha ejecucin mientras que se cumpla una condicin. Formato genrico:

while(condicin)

{

instrucciones

}

Diagrama de flujo:

Donde: - condicin es la condicin cuyo valor deber ser true para que se produzca

la entrada en el bucle y que ser comprobado antes de cada nueva ejecucin del bloque de instrucciones.

- instrucciones es el bloque de instrucciones que se ejecutar.

Funcionamiento: 1.- Al encontrar la estructura while lo primero que hace (antes de entrar por primera vez en el bucle) es evaluar la condicin: si es verdadera entra en el bucle y ejecuta el bloque de instrucciones, pero si es falsa ni siquiera llegar a entrar en el bucle. 2.- Una vez ejecutadas las instrucciones del bucle se evala de nuevo la condicin para determinar si se vuelve a ejecutar el bloque o no (si es verdadera se ejecuta, si es falsa deja de ejecutarse). Este punto se repite hasta que la condicin deja de ser verdadera. 3.- Cuando al evaluar la condicin el resultado es false, el flujo del programa va a la lnea siguiente al final del bucle.

Ejemplo3_5.htm: utilizando esta estructura podemos asegurarnos que el usuario introducir una nota correcta introduciendo las instrucciones de captura de datos dentro de un bucle while del que solamente saldr cuando la nota introducida sea correcta..

Ejemplo3_5


-38-

// Ejemplo de estructura while var Nota = -1; // Inicializamos a 1 para que entre la primera vez // en el bucle while (Nota < 0 || Nota > 10) { Nota = prompt("Introduce la nota del alumno: ", 0); Nota = Math.round(Nota) if (Nota < 0 || Nota > 10) { alert("Nota erronea") } } // A partir de aqu podemos procesar la nota ya // comprobada. alert("La nota " + Nota + " es correcta");

Observaciones:

Debemos asegurarnos de que en algn momento se produzca la salida del bucle ya que de lo contrario estaramos ante un bucle sin fin. Por ejemplo, si en lugar de la condicin while (Nota < 0 || Nota > 10) hubisemos escrito: while (Nota > 0 || Nota < 10) el bucle hubiese estado iterando constantemente y no finalizara nunca.

Para que esta salida se produzca se deber modificar el valor de la expresin. En nuestro caso la modificacin se produce al leer un nuevo valor del teclado.

Se puede forzar una salida del bucle en cualquier momento mediante la clusula break.

Tambin se puede forzar a realizar un nuevo ciclo an sin terminar todas las instrucciones del bucle mediante la clusula continue. Pero ninguna de estas dos ltimas opciones es recomendable ya que dificultan la legibilidad de los programas y, por tanto, su posterior mantenimiento.

3.2.2 Estructura do..while.

La estructura do..while es similar a la anterior pero en este caso la comprobacin se produce despus de ejecutar el bloque de instrucciones.

Formato genrico:

do

Diagrama de flujo:


-39-

{

instrucciones

}

while(condicion)

La nica diferencia entre la estructura while y la estructura do..while est en la primera vez que se ejecuta el bucle:

- la estructura while comprueba la condicin antes de entrar por primera vez en el bucle y si la condicin no se cumple, no entrar.

- la estructura do..while ejecuta el bucle la primera vez sin comprobar la condicin.

Para las dems iteraciones el funcionamiento es idntico en ambas estructuras

(nicamente se producen variaciones en el caso de utilizar la clusula continue).

A continuacin veremos el ejemplo anterior utilizando un bucle do..while. // Ejemplo de estructura do..while var Nota; /* En este caso no hace falta inicializar Nota con un valor erroneo pues entrar en el bucle de todas formas */ do { Nota = prompt("Introduce la nota del alumno: ", 0); Nota = Math.round(Nota) if (Nota < 0 || Nota > 10) { alert("Nota erronea") } } while (Nota < 0 || Nota > 10) alert("La nota " + Nota + " es correcta");

Ejemplo3_6.htm: El siguiente programa leer una secuencia de nmeros introducidos por teclado y calcula y visualiza su suma. (La secuencia terminar cuando el nmero introducido sea 0):

Ejemplo3_6 // Ejemplo de acumulador var Num = 0; var Suma = 0;


-40-

do { Num = parseInt(prompt("Introduce un nmero (cero para finalizar): ", 0)); Suma = Suma + Num; } while (Num != 0) alert("La suma es :" + Suma);

Observaciones:

- En este programa hemos empleado dos variables: Num y Suma. La primera se encargar de leer los nmeros introducidos y la segunda de acumular la suma.

- Para convertir el valor introducido a un valor numrico se emplea la funcin parseInt sobre el valor devuelto por la funcin prompt antes de realizar la asignacin.

Este es un ejemplo tpico de acumulador. Se trata de una variable (en este

caso la variable Suma) con la que se realizan las siguientes operaciones: - 1 Inicializacin: el acumulador debe ser inicializado (Suma = 0)antes de

comenzar su funcin. - 2 Acumulacin: normalmente se realiza dentro de una estructura repetitiva

y consiste en incrementar el acumulador (Suma = Suma + Num;) Un acumulador es una estructura que se utiliza con frecuencia en

programacin, tambin se utilizan con frecuencia los contadores. Veamos un ejemplo: Ejemplo3_7.htm: El siguiente programa, es igual que el anterior pero devolver, adems, la media de los valores introducidos. Para calcular la media se necesita contar el nmero de valores que han sido introducidos.

Ejemplo3_7 // Ejemplo de acumulador y contador var Num = 0; var Suma = 0; var Conta = 0; var Media = 0; do { Num = parseInt(prompt("Introduce nmero (cero para finalizar): ", 0)); if (Num != 0) { Conta = Conta + 1; Suma = Suma + Num; } } while (Num != 0)


-41-

Conta > 0 ? Media = Suma / Conta : Media = 0; alert("La suma es :" + Suma + "\n La media es: " + Media);

Observamos que en este caso se ha empleado una estructura alternativa dentro

del bucle para evitar que el contador se incremente cuando el nmero introducido es 0. Podamos haber utilizado otras opciones como restar uno al contador al final, o emplear otra estructura repetitiva, como por ejemplo un bucle while: Ejemplo3_8.htm:

Ejemplo3_8 // Ejemplo de acumulador y contador var Num = 0; var Suma = 0; var Conta = 0; var Media = 0; Num = parseInt(prompt("Introduce nmero (cero para finalizar): ", 0)); while(Num != 0) { Conta = Conta + 1; Suma = Suma + Num; Num = parseInt(prompt("Introduce nmero (cero para finalizar): ", 0)); } Conta > 0 ? Media = Suma / Conta : Media = 0; alert("La suma es :" + Suma + "\n La media es: " + Media);

3.2.3 Estructura for.

La estructura for ejecuta un bucle un nmero determinado de veces controlando automticamente el nmero de iteraciones. La utilizaremos siempre que sepamos previamente el nmero de veces que se ejecutar el bucle. Su formato genrico es el siguiente:

for (VariableControl = ValorInio; CondicinContinuacin; ExpresinIncremento)

{ instrucciones ...

}


-42-

Donde:

- VariableControl: es una variable interna o local al bucle (no hay que declararla previamente) que se utiliza normalmente como contador del numero de ejecuciones del bucle en cada momento.

- ValorInicio: es el valor inicial que tomar la VariableControl. - CondicionContinuacion: es una condicin que ser comprobada antes de

realizar cada ejecucin del bucle. Si se cumple, se ejecutar el bloque de instrucciones; en caso contrario pasar el control a la lnea siguiente al final de la estructura.

- ExpresionIncremento: es una expresin que modificar el valor de la variable de control. Normalmente se trata de una simple suma pero puede ser cualquier expresin que permita en algn momento la salida del programa.

Ejemplo3_9.htm: Veamos un ejemplo sencillo.

Ejemplo3_9 // Ejemplo de estructura for for (i = 1; i


-43-

{ document.write(i + "*"); i = i + 1; } El resultado ser exactamente el mismo.

Ejemplo3_10.htm: Escribiremos un programa que lee un nmero y calcula y visualiza su factorial. (Sabiendo que el factorial de un nmero N se calcula : 1 * 2 * 3 ..* N y que factorial de 0 = ).

Ejemplo3_10 // Ejemplo factorial Num = 0; Fact = 1; Num = parseInt(prompt("Introduce nmero:", 0)); for (i = 2; i = 0; i = i - 1) { Cad2 = Cad2 + Cad1.charAt(i); } document.write(Cad2);


-44-

Observamos que el programa, despus de leer la cadena, va cogiendo uno a uno los caracteres de esta, comenzando por el final y terminando por el principio, y va construyendo de esta forma la nueva cadena (Cad2). La estructura para empleada en esta ocasin es decreciente, esto es, comienza con un valor igual a la longitud de la cadena menos uno (no olvidemos que mientras length devuelve la longitud total de la cadena, chartAt empieza a contar desde el 0). De esta forma, si ejecutamos el programa e introducimos la cadena "HOLA" obtendremos el siguiente resultado:

ALOH

3.2.4 Bucle for..in.

Puede ser considerado como una modificacin del bucle for. Nos facilita el procesamiento de matrices y colecciones de objetos. La sintaxis es la siguiente:

for (variable in [objeto|array] ) { instruccin(es); } Donde:

- Variable: es la variable contador usada para repetir sobre los elementos del array o las propiedades de un objeto.

- objeto|array:objeto o array del que se desean conocer sus elementos/propiedades.

- instruccin(es): conjunto de instrucciones que se repetirn. Al igual que en un bucle for normal se utiliza una variable para iterar. En el

caso de que se est trabajando con un objeto la variable contador del bucle for se sustituye por una variable de tipo cadena que contiene el nombre de cada una de las propiedades del objeto manejado en el bucle for..in. Si se est trabajando con arrays la variable ser de carcter numrico y contendr la posicin del elemento en el array.

En este bucle no es necesario definir la condicin de terminacin ya que las

instrucciones se ejecutarn siempre que existan propiedades del objeto o elementos en el array. Tampoco es necesario incrementar la variable contador ya que se actualiza automticamente.

Ejemplo3_12.htm: Ejemplo del bucle for..in para obtener informacin sobre los elementos de dos arrays: Probando bucle for..in


-45-

for(i in Alumnos) { document.write(Alumnos[i]+" ** "); document.write(Apellidos[i]+""); } // Fin de ocultar guin -->

La salida generada es la siguiente:

MIGUEL ** GIL ELENA ** SANCHEZ JORGE ** RODRIGUEZ CRISTINA ** ALONSO IGNACIO ** VEGA ALICIA ** REY

3.3 Utilizacin de arrays mediante estructuras de control.

JavaScript dispone de una estructura denominada Array, parecida a las variables, pero en este caso se trata de guardar varios elementos de informacin similares (por ejemplo los nombres de los 20 alumnos de un aula, o sus notas, etctera).

Podemos definir un Array como una serie de elementos todos del mismo tipo

que ocupan posiciones contiguas en la memoria del ordenador. A estos elementos se accede mediante un nombre o identificador comn para todos los elementos que identifica el Array, y un nmero o ndice que hace referencia al elemento del Array.

A continuacin veremos una representacin grfica de un Array que contiene los

nombres de 6 alumnos: Alumnos

MIGUEL ELENA JORGE CRISTINA IGNACIO ALICIA Alumnos[0] Alumnos[1] Alumnos[2] Alumnos[3] Alumnos[4] Alumnos[5]

Observamos que hay seis elementos de informacin (el Array tiene seis

elementos). Todos ellos comparten un mismo identificador (Alumnos) pero cada uno tiene, adems, un ndice que hace referencia al elemento en particular. Podemos apreciar tambin que el primer elemento es el 0, el segundo el 1, y as sucesivamente. As, cuando hagamos referencia a Alumnos[4] estaremos refirindonos al elemento que ocupa la posicin 5 cuyo contenido en este caso es "IGNACIO".

Esta estructura se utiliza con frecuencia en programacin, por ello profundizaremos en sus caractersticas y utilizacin.


-46-

3.3.1 Creacin de un Array

Para crear un array utilizaremos el siguiente formato: var NombreDelArray = new Array (NumeroDeElementos)

Donde :

- NombreDelArray es el nombre o identificador del array. - NumeroDeElementos es un nmero que indica el nmero de

elementos que contendr.

Para crear el Array Alumnos que contendr 6 elementos, escribiremos: var Alumnos = new Array (6);

Ahora tenemos creada la estructura y las posiciones de memoria estn reservadas y disponibles, aunque vacas, porque todava no hemos introducido en ellas ningn valor.

3.3.2 Manipulacin de los elementos de un Array

Una vez creada la estructura podemos manipular los elementos del array como si se tratase de variables (con la particularidad del ndice) para introducir, cambiar o consultar los valores que contienen.

Para introducir informacin en un elemento utilizaremos normalmente un

operador de asignacin. Por ejemplo, para introducir el valor "MIGUEL" en el elemento Alumnos[0] escribiremos: Alumnos[0] = "MIGUEL"; de manera similar se introducirn todos los elementos del Array:

Alumnos[0] = "MIGUEL"; Alumnos[1] = "ELENA"; Alumnos[2] = "JORGE"; Alumnos[3] = "CRISTINA"; Alumnos[4] = "IGNACIO"; Alumnos[5] = "ALICIA";

Podemos hacer referencia a cualquiera de los objetos del Array bien para

cambiar su valor, o bien para utilizarlo en expresiones como si se tratase de cualquier otra variable, con la particularidad apuntada de la utilizacin del ndice. As, podemos escribir las siguientes expresiones:

alert(Alumnos[4]);

Visualiza una ventana de alerta con el contenido de Alumnos[4]

Alumnos[4] = prompt("Nombre del alumno", " ")

Lee un nuevo nombre de la consola y lo introduce en el elemento Alumnos[4]


-47-

var DosPrimeros = Alumnos[0] + Alumnos[1];

Crea la variable DosPrimeros e introduce en ella el resultado de concatenar Alumnos[0] + Alumnos[1];

Alumnos[2] > Alumnos[3]

Es una expresin que compara el contenido de ambos elementos y determina si el primero es mayor que el segundo segn su valor ASCII en cuyo caso el resultado ser true, en caso contrario false.

En general, para hacer referencia a un elemento de un Array emplearemos el formato genrico:

NombreDelArray [Indice]

El ndice no tiene que ser necesariamente una constante numrica (2, 10, 35) se puede referenciar mediante cualquier expresin numrica que devuelva un entero. As, por ejemplo, las siguientes expresiones seran expresiones vlidas (suponiendo que i sea una variable numrica entera): Alumnos[ i ] Hace referencia al elemento i (si i vale 2, al dos, etctera). Alumnos[ i + 1]

Hace referencia al elemento siguiente al elemento i (si i vale 2, har referencia el elemento 3).

Alumnos[ i ] > Alumnos [ i + 1 ] Compara el elemento i con el siguiente.

3.3.3 Recorrido de los elementos de un Array Las variables numricas enteras, en combinacin con estructuras de control repetitivas se utilizan frecuentemente para recorrer los elementos de un array. En efecto, supongamos la siguiente estructura:

for (i = 0; i < 6; i = i + 1) { document.write(Alumnos[i]); }

El bucle for se ejecutar 6 veces con la instruccin document.write. Para cada

una de estas ejecuciones la variable i tomar uno de los valores correspondientes al ndice del Array (0, 1, 2, 3, 4 y 5).

En los arrays est disponible la propiedad length que devuelve el nmero de elementos que tiene un array (incluyendo los elementos vacos, si hubiese). Su formato genrico es:

NombreDelArray.length

Utilizando esta propiedad podemos escribir una estructura que recorrera cualquier array completo:


-48-

for (i = 0; i < NombreDelArray.length; i = i + 1) { Tratamiento_del_elemento_NombreDelArray[i]); }

Ejemplo3_13.htm: Veamos un ejemplo completo de creacin del Array, inicializacin de los elementos e impresin de los mismos:

Ejemplo3_13

/* Ejemplo Arrays 1*/ var Alumnos = new Array (6); Alumnos[0] = "MIGUEL"; Alumnos[1] = "ELENA"; Alumnos[2] = "JORGE"; Alumnos[3] = "CRISTINA"; Alumnos[4] = "IGNACIO"; Alumnos[5] = "ALICIA"; for ( i = 0; i < 6; i++) { document.write(Alumnos[i] + "*"); }

El resultado de la ejecucin de este programa ser:

MIGUEL*ELENA*JORGE*CRISTINA*IGNACIO*ALICIA*

3.3.4 Introduccin de los elementos del array desde la consola del usuario.

Hasta el momento hemos trabajado con un array cuyos datos se

introducen directamente desde el cdigo JavaScript. Pero en ocasiones necesitaremos que sea el usuario quien introduzca los elementos del array.

A continuacin estudiaremos un programa en el que el usuario introduce los datos que se guardan en el array de manera secuencial (cada elemento a continuacin del anterior) (Figura3_1). Ejemplo3_14.htm:

Ejemplo3_14 /* Ejemplo Arrays Con valores introducidos por el usuario*/


-49-

var Alumnos = new Array (6); for ( i = 0; i < 6; i++) { Alumnos[i] = prompt("Introduce nombre del alumno "+i, ""); } for ( i = 0; i < 6; i++) { document.write(Alumnos[i] + "*"); }

Figura3_1. Se introducen los datos por teclado

JavaScript tambin permite crear un array e introducir los elementos

simultaneamente desde el cdigo declarando el nombre y enumerando a continuacin en una lista los elementos:

var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE", "CRISTINA","IGNACIO", "ALICIA");

El array se dimensionar implcitamente en funcin del nmero de

elementos. Por su parte, los elementos definidos as se asociarn con el ndice segn la posicin que ocupan el la lista (el primero ser el 0, el segundo el 1, y as sucesivamente).

3.3.5 Bsqueda en un array.

Podemos realizar bsquedas en un array basndonos en los siguientes criterios:

- Bsqueda a partir del ndice. (Sabiendo cul es el ndice, obtener el elemento).

- Bsqueda de un elemento para obtener su posicin (o simplemente saber que existe).

La primera no plantea ningn problema ya que si conocemos el ndice el acceso al elemento correspondiente es automtico. (Por ejemplo, si buscamos el elemento 3 accedemos a l como Alumnos[3]).


-50-

La segunda implica un recorrido del array comparando uno a uno cada elemento con el valor que se busca hasta obtener dicho valor o llegar al final sin obtener un resultado satisfactorio. En este caso hay que emplear algunas lneas de programa:

... Vbusca = ... // Vbusca es la variable que suponemos // contiene el valor a buscar Ultimo = NombreDelArray.length -1 i = 0; while (NombreDelArray[i] != Vbusca && i < Ultimo) { i = i + 1; }

La salida del bucle se produce por una de las siguientes circunstancias: ha

llegado al ltimo elemento; o bien, ha encontrado en valor buscado. Deberemos, por tanto, comprobar si realmente ha encontrado lo que buscaba o no.

if (NombreDelArray[i] == Vbusca) { ...Tratamiento en caso de encontrar el elemento. } else { ...Tratamiento en caso de NO encontrar el elemento. }

Ejemplo3_15.htm: El siguiente ejemplo pide introducir un nombre de alumno por teclado, si el nombre de alumno existe en la lista se visualizar el mensaje Encontrado, si no existe se visualizar el mensaje de No encontrado

Ejemplo3_15 /************ Ejemplo bsqueda en Arrays**************/ var Alumnos = new Array ("MIGUEL", "ELENA", "JORGE", "CRISTINA","IGNACIO", "ALICIA"); Ultimo = Alumnos.length - 1; Vbusca =""; i= 0; /************ Entrada del nombre a buscar ************/ Vbusca = prompt("Introduce el nombre del alumno", " "); /******************** Bsqueda ***********************/ i = 0;


-51-

while ( Alumnos[i] != Vbusca && i < Ultimo) { i = i + 1; } /************** Comprobacin y visualizacin *********/ if (Alumnos[i] == Vbusca) { alert("Encontrado el alumno: " + Vbusca + " con el nmero: " + i); } else { alert("No encontrado el alumno: " + Vbusca); }

3.3.6 El Objeto Array

El objeto array es un objeto predefinido por el lenguaje que nos va a permitir construir arrays, como ya hemos visto. Como todo objeto, dispone de una serie de propiedades y mtodos. Dentro de las propiedades hemos utilizado una que es la propiedad length, que de devuelve el nmero de elementos del array. De los mtodos podemos destacar algunos como:

join(separador). Genera una cadena con todas las cadenas de cada uno de los elementos del array separadas por el separador especificado.

reverse(). Invierte el orden de los elementos del array. Invierte el orden de los elementos del array.

sort(). Ordena los elementos del array siguiendo un orden lexicogrfico.

(Para obtener ms informacin del objeto consultar el Apndice.)

Ejemplo3_16.htm: El siguiente ejemplo muestra el uso de los mtodos descritos anteriormente: Probando el objeto Array


-52-

La salida generada es la siguiente:

MIGUEL*ELENA*JORGE*CRISTINA*IGNACIO*ALICIA ALICIA,IGNACIO,CRISTINA,JORGE,ELENA,MIGUEL ALICIA,CRISTINA,ELENA,IGNACIO,JORGE,MIGUEL

Nota: en esta unidad se han empleado las siguientes funciones:

parseInt(cadena) Devuelve un nmero entero a partir de la cadena especificada. La funcin finalizar la conversin cuando encuentre un carcter que no sea un dgito. Se estudia en la unidad siguiente.

charAt(ndice) Devuelve el carcter situado en la posicin especificada por 'indice' (el primer carcter ocupa la posicin 0). Se estudia en el tema de Objetos.

Math.round(N) Redondeo. Devuelve el nmero entero ms prximo al nmero N. Se estudia en el tema de Objetos.

3.4 Ejercicios propuestos. 1) Ejercicio3_1.htm: Escribir un programa que lea tres nmeros (Num1, Num2 y Num3) y visualice el mayor de los tres. Ejercicio3_1 2) Ejercicio3_2.htm: Programa que lea un nmero entero positivo y escriba la tabla de multiplicar de ese nmero.


-53-

Por ejemplo si escribimos el nmero 7 la salida generada ser la siguiente:

TABLA DE MULTIPLICAR DEL 7

7 * 0 07 * 1 77 * 2 147 * 3 217 * 4 287 * 5 357 * 6 427 * 7 497 * 8 567 * 9 63

7 * 10 70

Las tablas se irn creando y llenando desde el cdigo JavaScript con la orden document.write() y entre parntesis las rdenes HTML para crear tablas.

El cdigo es el siguiente: Ejercicio3_2 3) Ejercicio3_3.htm: Programa que lea un importe y escriba el desglose del cambio en unidades monetarias de 5000, 2000, 1000, 500, 200, 100, 50, 25, 10, 5 y 1.

Por ejemplo si escribimos la cantidad 3459 la salida generada ser la siguiente:


-54-

DESGLOSES DE LA CANTIDAD: 3459

Unidades de 5000 : 0Unidades de 2000 : 1Unidades de 1000 : 1Unidades de 500 : 0 Unidades de 200 : 2Unidades de 100 : 0 Unidades de 50 : 1 Unidades de 25 : 0 Unidades de 10 : 0 Unidades de 5 : 1 Unidades de 1 : 4

Las tabla se ir creando y llenando desde el cdigo JavaScript igual que en el ejercicio anterior. Se validar la entrada del IMPORTE a una cantidad mayor o igual que 0. Se ha definido un array de nombre Desgloses que contiene las cantidades a desglosar. La cantidad introducida IMPORTE se ir dividiendo por los elementos de este array para obtener las unidades correspondientes para cada desglose (CANTIDAD = Math.floor(IMPORTE / Desgloses[i]);), este proceso se hace en un bucle for, que finalizar cuando recorramos dicho array. En cada paso del bucle el IMPORTE ir cambiando, ser igual al resto de dividir el IMPORTE anterior entre el Desglose (IMPORTE = IMPORTE% Desgloses[i];). Cuando las unidades (CANTIDAD) sean mayores que cero se visualizarn en negrita y cursiva.

Para obtener la parte entera del importe se ha usado la funcin floor del objeto Math. Nota: La funcin floor(n) devuelve el entero obtenido de redondear 'n' al valor entero inmediatamente inferior. Para usarla se necesita anteponer el objeto Math (Math.floor(n)). Mas informacin de este objeto en el tema de Objetos.

El cdigo es el siguiente: Ejercicio3_3


-55-

for (i=0; i0) Unidades="" + Unidades + ""; document.write(""+ Unidades + ""); } document.write(""); // Fin de ocultar guin --> 4) Ejercicio3_4.htm: El siguiente ejercicio crear una tabla con un color de fondo elegido por el usuario y escribir un texto en ella con el color elegido por el usuario. Los colores y cdigos son los siguientes:

Color Cdigo

TABLA

rosa (R) azul claro (A) amarillo claro (Y) verde claro (V)

hotpink lightblue lightyellow lightgreen

TEXTO

rosa (R) azul claro (A) amarillo claro (Y) verde claro (V)

Red blue yellow green

Si se teclea algn valor distinto a: R, A, Y V se definirn estos colores:

para la tabla lightgrey y para el texto black.

Los colores se pedirn mediante una orden prompt(). Si no se elige uno de los colores se tomar un valor por defecto. Una vez que se sepan los colores se crearn la tabla y el texto con la orden document.write().

El cdigo es el siguiente: Ejercicio3_4


-56-

case 'V':COLORTABLA="lightgreen"; break; default:COLORTABLA="lightgrey"; } switch(COLORTEXTO){ case 'R':COLORTEXTO="red"; break; case 'A':COLORTEXTO="blue"; break; case 'Y':COLORTEXTO="yellow"; break; case 'V':COLORTEXTO="green"; break; default:COLORTEXTO="black"; } document.write(""); document.write("TEXTO CON COLOR"); document.write(""); document.write(""); document.write("COLOR DE FONDO DE LA TABLA : "+ COLORTABLA + ""); document.write("COLOR DEL TEXTO : "+ COLORTEXTO +""); // Fin de ocultacin del guin -->

Por ejemplo: si elegimos como color de fondo azul claro y como color de texto azul, la

Documents

Manual Completo de DHTML y JavaScript