-
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
-
Curso de JavaScript - Introduccin
-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.
-
Curso de JavaScript - Introduccin
-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.
-
Curso de JavaScript - Introduccin
-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.
-
Curso de JavaScript - Introduccin
-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:
-
Curso de JavaScript - Introduccin
-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
-
Curso de JavaScript - Introduccin
-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
-
Curso de JavaScript - Introduccin
-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:
-
Curso de JavaScript - Introduccin
-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);
-
Curso de JavaScript - Introduccin
-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.
-
Curso de JavaScript Elementos Bsicos.
-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;
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Elementos Bsicos.
-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:
-
Curso de JavaScript Elementos Bsicos.
-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).
-
Curso de JavaScript Elementos Bsicos.
-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)
-
Curso de JavaScript Elementos Bsicos.
-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:
-
Curso de JavaScript Elementos Bsicos.
-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)
);
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Elementos Bsicos.
-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 (/=)
-
Curso de JavaScript Elementos Bsicos.
-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:
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Elementos Bsicos.
-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).
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Elementos Bsicos.
-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
-
Curso de JavaScript Elementos Bsicos.
-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
-
Curso de JavaScript Elementos Bsicos.
-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.
-
Curso de JavaScript Estructuras de control
-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;
-
Curso de JavaScript Estructuras de control
-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:
-
Curso de JavaScript Estructuras de control
-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;
...
-
Curso de JavaScript Estructuras de control
-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:
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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:
-
Curso de JavaScript Estructuras de control
-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;
-
Curso de JavaScript Estructuras de control
-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)
-
Curso de JavaScript Estructuras de control
-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 ...
}
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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);
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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.
-
Curso de JavaScript Estructuras de control
-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]
-
Curso de JavaScript Estructuras de control
-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:
-
Curso de JavaScript Estructuras de control
-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*/
-
Curso de JavaScript Estructuras de control
-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]).
-
Curso de JavaScript Estructuras de control
-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;
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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.
-
Curso de JavaScript Estructuras de control
-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:
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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
-
Curso de JavaScript Estructuras de control
-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