Javascript S

Qu es JavaScript?
JavaScript, al igual que Flash, Visual Basic Script, es una de las mltiples
maneras que han surgido para extender las capacidades del lenguaje HTML
(lenguaje para el diseo de pginas de Internet). Al ser la ms sencilla, es
por el momento la ms extendida. JavaScript no es un lenguaje de
programacin propiamente dicho como C, C++, Delphi, etc. Es un lenguaje
script u orientado a documento, como pueden ser los lenguajes de macros
que tienen muchos procesadores de texto y planillas de clculo. No se
puede desarrollar un programa con JavaScript que se ejecute fuera de un
Navegador, aunque en este momento comienza a expandirse a otras reas
como la programacin en el servidor con Node.js
JavaScript es un lenguaje interpretado que se embebe en una pgina web
HTML. Un lenguaje interpretado significa que a las instrucciones las analiza
y procesa el navegador en el momento que deben ser ejecutadas.
Nuestro primer programa ser el famoso "Hola Mundo", es decir un

programa que muestre en el documento HTML el mensaje "Hola Mundo".
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write('Hola Mundo');
</script>
</body>
</html>
El programa en JavaScript debe ir encerrado entre la marca script e

inicializada la propiedad type con la cadena text/javascript:
</script>
Para imprimir caracteres sobre la pgina debemos llamar al comando 'write'

del objeto document. La informacin a imprimirse debe ir entre comillas y
1
encerrada entre parntesis. Todo lo que indicamos entre comillas aparecer
tal cual dentro de la pgina HTML.
Es decir, si pedimos al navegador que ejecute esta pgina mostrar el texto
'Hola Mundo'.
Cada vez que escribimos una instruccin finalizamos con el carcter punto y
coma.
ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE

A MAYUSCULAS Y MINUSCULAS. NO ES LO MISMO ESCRIBIR:
document.write que DOCUMENT.WRITE (la primera forma es la correcta, la
segunda forma provoca un error de sintaxis).
Variables.
Una variable es un depsito donde hay un valor. Consta de un nombre y

pertenece a un tipo (nmerico, cadena de caracteres, etc.)
Tipos de variable:
Una variable puede almacenar:
Valores Enteros (100, 260, etc.)
Valores Reales (1.24, 2.90, 5.01, etc.)
Cadenas de caracteres ('Juan', 'Compras', 'Listado', etc.)
Valores lgicos (true,false)
Existen otros tipos de variables que veremos ms adelante.
Las variables son nombres que ponemos a los lugares donde almacenamos
la informacin. En JavaScript, deben comenzar por una letra o un
subrayado (_), pudiendo haber adems dgitos entre los dems caracteres.
Una variable no puede tener el mismo nombre de una palabra clave del
lenguaje.
Una variable se define anteponindole la palabra clave var:
var dia;
se pueden declarar varias variables en una misma lnea:
var dia, mes, anio;
a una variable se la puede definir e inmediatamente inicializarla con un
valor:
var edad=20;
o en su defecto en dos pasos:
var edad;
edad=20;
Eleccin del nombre de una variable:
2
Debemos elegir nombres de variables representativos. En el ejemplo
anterior los nombres dia, mes, anio son lo suficientemente claros para
darnos una idea acabada sobre su contenido, una mala eleccin de
nombres hubiera sido llamarlas a,b y c. Podemos darle otros buenos
nombres. Otros no son tan representativos, por ejemplo d, m, a.
Posiblemente cuando estemos resolviendo un problema dicho nombre nos
recuerde que almacenamos el dia, pero pasado un tiempo lo olvidaramos.
Impresin de variables en una pgina HTML.

Para mostrar el contenido de una variable en una pgina utilizamos el objeto
document y llamamos a la funcin write.
En el siguiente ejemplo definimos una serie de variables y las mostramos en
la pgina:
<html>
<head>
</head>
<body>
<scripttype="text/javascript">
varnombre='Juan';
varedad=10;
varaltura=1.92;
varcasado=false;
document.write(nombre);
document.write('<br>');
document.write(edad);
document.write(altura);
document.write(casado);
</script>
</body>
</html>
Cuando imprimimos una variable, no la debemos disponer entre simples
comillas (en caso de hacer esto, aparecer el nombre de la variable y no su
contenido)
Los valores de las variables que almacenan nombres (es decir, son cadenas
de caracteres) deben ir encerradas entre comillas simples o dobles. Los
valores de las variables enteras (en este ejemplo la variable edad) y reales
3
no deben ir encerradas entre comillas. Cada instruccin finaliza con un
punto y coma.
Las variables de tipo boolean pueden almacenar solo dos valores: true o
false.
El resultado al visualizar la pgina debe ser 4 lneas similares a stas:
Juan
10
1.92
false
Es decir que se muestran los contenidos de las 4 variables. Una variable es

de un tipo determinado cuando le asignamos un valor:
var edad=10;
Es de tipo entera ya que le asignamos un valor entero.
var nombre='juan';
Es de tipo cadena.
Para mostrar el contenido de una variable en una pgina debemos utilizar la
funcin 'write' que pertenece al objeto document. Recordemos que el
lenguaje JavaScript es sensible a maysculas y minsculas y no ser lo
mismo si tipeamos:
Document.Write(nombre);
Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d
minscula), lo mismo no existe la funcin 'Write' sino 'write', este es un error
muy comn cuando comenzamos a programar en JavaScript
Entrada de datos por teclado.
Para la entrada de datos por teclado tenemos la funcin prompt. Cada vez
que necesitamos ingresar un dato con esta funcin, aparece una ventana
donde cargamos el valor. Hay otras formas ms sofisticadas para la entrada
de datos en una pgina HTML, pero para el aprendizaje de los conceptos
bsicos de JavaScript nos resultar ms prctica esta funcin.
Para ver su funcionamiento analicemos este ejemplo:
<html>
<head>
</head>
<body>
4
varnombre;
varedad;
nombre=prompt('Ingresesunombre:','');
edad=prompt('Ingresesuedad:','');
document.write('Hola');
document.write('asiquetienes');
document.write(edad);
document.write('aos');
</script>
</body>
</html>
La sintaxis de la funcin prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la
ventana>,<valor
inicial a mostrar en la ventana>);
La funcin prompt tiene dos parmetros: uno es el mensaje y el otro el valor
inicial a mostrar.
Estructuras secuenciales de programacin.
Cuando en un problema slo participan operaciones, entradas y salidas se

la denomina estructura secuencial.
El problema anterior, donde se ingresa el nombre de una persona y su edad
se trata de una estructura secuencial.
Ejemplo de otro algoritmo con estructura secuencial: Realizar la carga de
dos nmeros por teclado e imprimir su suma y su producto:
<html>
<head>
varvalor1;
varvalor2;
valor1=prompt('Ingreseprimernmero:','');
valor2=prompt('Ingresesegundonmero','');
varsuma=parseInt(valor1)+parseInt(valor2);
var
producto=parseInt(valor1)*parseInt(valor2);
5
document.write('Lasumaes');
document.write(suma);
document.write('Elproductoes');
document.write(producto);
</script>
</head>
<body>
</body>
</html>
Lo primero que debemos tener en cuenta es que si queremos que el
operador + sume los contenidos de los valores numricos ingresados por
teclado, debemos llamar a la funcin parseInt y pasar como parmetro las
variables valor1 y valor2 sucesivamente. Con esto logramos que el operador
ms, sume las variables como enteros y no como cadenas de caracteres. Si
por ejemplo sumamos 1 + 1 sin utilizar la funcin parseInt el resultado ser
11 en lugar de 2, ya que el operador + concatena las dos cadenas.
En JavaScript, como no podemos indicarle de qu tipo es la variable,
requiere mucho ms cuidado cuando operamos con sus contenidos.
Este problema es secuencial ya que ingresamos dos valores por teclado,
luego hacemos dos operaciones y por ltimo mostramos los resultados.
Es de fundamental importancia realizar los programas. Viendo slo

los problemas resueltos en este curso de estudio no alcanza para
convertirse en un programador de aplicaciones.
PROBLEMAS
1. Realizar la carga del lado de un cuadrado, mostrar por

pantalla el permetro del mismo (El permetro de un cuadrado se
calcula multiplicando el valor del lado por cuatro)
2. Escribir un programa en el cual se ingresen cuatro nmeros,
calcular e informar la suma de los dos primeros y el producto del
tercero y el cuarto.
3. Realizar un programa que lea cuatro valores numricos e
informar su suma y producto.
4. Se debe desarrollar un programa que pida el ingreso del
precio de un artculo y la cantidad que lleva el cliente. Mostrar lo
6
que debe abonar el comprador (Ingresar por teclado un precio sin
decimales, es decir un entero: 2, 7, 90 etc.)
Problema1.
<html>
<head>
</head>
<body>
varlado;
lado=prompt('Ingresemedidadellado:','');
varperimetro;
perimetro=lado*4;
document.write('Supermetroes:');
document.write(perimetro);
</script>
</body>
</html>
Estructuras condicionales simples.
No todos los problemas pueden resolverse empleando estructuras

secuenciales. Cuando hay que tomar una decisin aparecen las estructuras
condicionales.
En nuestra vida diaria se nos presentan situaciones donde debemos decidir.
Elijo la carrera A o la carrera B ?
Me pongo este pantaln ?
Entro al sitio A o al sitio B ?
Para ir al trabajo, elijo el camino A o el camino B ?
Al cursar una carrera, elijo el turno maana, tarde o noche ?
Por supuesto que en un problema se combinan estructuras secuenciales y

condicionales.
Cuando se presenta la eleccin tenemos la opcin de realizar una actividad
o no realizarla.
7
En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay
actividades y por el camino del falso no hay actividades. Por el camino del
verdadero pueden existir varias operaciones, entradas y salidas, inclusive
ya veremos que puede haber otras estructuras condicionales.
Ejemplo: Realizar la carga de una nota de un alumno. Mostrar un mensaje
que aprob si tiene una nota mayor o igual a 4:
<html>
<head>
</head>
<body>
varnombre;
varnota;
nombre=prompt('Ingresenombre:','');
nota=prompt('Ingresesunota:','');
if(nota>=4)
{
document.write(nombre+'estaaprobadocon
un'+nota);
}
</script>
</body>
</html>
Aparece la instruccin if en el lenguaje JavaScript. La condicin debe ir
entre parntesis. Si la condicin se verifica verdadera se ejecuta todas las
instrucciones que se encuentran encerradas entre las llaves de apertura y
cerrado seguidas al if.
Para disponer condiciones en un if podemos utilizar alguno de los siguientes
operadores relacionales:
> mayor
>= mayor o igual
< menor
<= menor o igual
!= distinto
== igual
Siempre debemos tener en cuenta que en la condicin del if deben
intervenir una variable un operador relacional y otra variable o valor fijo.
Otra cosa que hemos incorporado es el operador + para cadenas de
caracteres:
document.write(nombre+' esta aprobado con un '+nota);
8
Con esto hacemos ms corto la cantidad de lneas de nuestro programa,
recordemos que venamos hacindolo de la siguiente forma:
document.write(' esta aprobado con un ');
document.write(nota);
PROBLEMAS
1. Se ingresan tres notas de un alumno, si el promedio es

mayor o igual a siete mostrar el mensaje 'Promocionado'. Tener
en cuenta que para obtener el promedio debemos operar
suma=nota1+nota2+nota3; y luego hacer promedio=suma/3;
Cuando cargamos una nota y queremos convertir
inmediatamente el valor ingresado a entero podemos hacer:
nota1=prompt('Ingrese primer nota:','');
nota1=parseInt(nota1);
2. Solicitar que se ingrese dos veces una clave. Mostrar un
mensaje si son iguales (tener en cuenta que para ver si dos
variables tienen el mismo valor almacenado debemos utilizar el
operador ==)
Problema1.
<html>
<head>
</head>
<body>
varnota1;
varnota2;
varnota3;
nota1=prompt('Ingreseprimernota','');
nota2=prompt('Ingresesegundanota','');
nota3=prompt('Ingresetercernota','');
varsuma;
9
suma=nota1+nota2+nota3;
varpromedio;
promedio=suma/3;
if(promedio>=7)
{
document.write('Promocionado');
}
</script>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
varclave1;
varclave2;
clave1=prompt('Ingreseunaclave:','');
clave2=prompt('Repitaelingresodelaclave:','');
if(clave1==clave2)
{
document.write('Ingresolasdosclavesiguales');
}
</script>
</body>
</html>
10
Operadores lgicos && (y) en las estructuras condicionales.
El operador &&, traducido se lo lee como "Y". Se emplea cuando en una

estructura condicional se disponen dos condiciones.
Cuando vinculamos dos o ms condiciones con el operador "&&" las dos
condiciones deben ser verdaderas para que el resultado de la condicin
compuesta de Verdadero y contine por la rama del verdadero de la
estructura condicional.
Recordemos que la condicin debe ir entre parntesis en forma obligatoria.
La utilizacin de operadores lgicos permiten en muchos casos, plantear
algoritmos ms cortos y comprensibles.
Veamos un ejemplo: Confeccionar un programa que lea por teclado tres
nmeros distintos y nos muestre el mayor de ellos.
<html>
<head>
</head>
<body>
varnum1,num2,num3;
num1=prompt('Ingreseprimernmero:','');
num2=prompt('Ingresesegundonmero:','');
num3=prompt('Ingresetercernmero:','');
num1=parseInt(num1);
if(num1>num2&&num1>num3)
{
document.write('elmayoresel'+num1);
}
else
{
if(num2>num3)
{
}
else
11
{
}
}
</script>
</body>
</html>
Podemos leerla de la siguiente forma:
Si el contenido de la variable num1 es mayor al contenido de la variable
num2 Y si el contenido de la variable num1 es mayor al contenido de la
variable num3 entonces la CONDICION COMPUESTA resulta Verdadera.
Si una de las condiciones simples da falso, la CONDICION COMPUESTA
da Falso y contina por la rama del falso.
Es decir que se mostrar el contenido de num1 si y slo si num1>num2 y
num1>num3.
En caso de ser Falsa la condicin de la rama del falso, analizamos el
contenido de num2 y num3 para ver cual tiene un valor mayor.
En esta segunda estructura condicional, al haber una condicin simple, no
se requieren operadores lgicos.
PROBLEMAS
1. Realizar un programa que pida cargar una fecha cualquiera,

luego verificar si dicha fecha corresponde a Navidad (se debe
cargar por separado el dia, el mes y el ao)
2. Se ingresan tres valores por teclado, si todos son iguales se
imprime la suma del primero con el segundo y a este resultado
se lo multiplica por el tercero (tener en cuenta que puede haber
tres condiciones simples)
3. Se ingresan por teclado tres nmeros, si todos los valores
ingresados son menores a 10, imprimir en la pgina la leyenda '
Todos los nmeros son menores a diez'.
4. Escribir un programa que pida ingresar la coordenada de un
punto en el plano, es decir dos valores enteros x e y.
Posteriormente imprimir en pantalla en qu cuadrante se ubica
dicho punto. (1 Cuadrante si x > 0 Y y > 0 , 2 Cuadrante: x <
0 Y y > 0, etc.)
12
5. De un operario se conoce su sueldo y los aos de
antigedad. Se pide confeccionar un programa que lea los datos
de entrada e informe
a) Si el sueldo es inferior a 500 y su antigedad es igual o
superior a 10 aos, otorgarle un aumento del 20 %, mostrar el
sueldo a pagar.
b) Si el sueldo es inferior a 500 pero su antigedad es menor a
10 aos, otorgarle un aumento de 5 %.
c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la
pgina sin cambios.
Problema1.
<html>
<head>
</head>
<body>
vardia,mes,ao;
dia=prompt('Ingreseda','');
dia=parseInt(dia);
mes=prompt('Ingresemes','');
mes=parseInt(mes);
ao=prompt('Ingreseao','');
ao=parseInt(ao);
if(dia==25&&mes==12)
{
document.write('Lafechaingresadacorrespondea
navidad');
}
else
{
document.write('Lafechaingresadanocorrespondea
navidad');
}
</script>
13
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
varnum1,num2,num3;
num1=prompt('Ingreseprimervalor','');
num2=prompt('Ingresesegundovalor','');
num3=prompt('Ingresetercervalor','');
if(num1==num2&&num1==num3)
{
varresu=(num1+num2)*num3;
document.write('Lasumadelosdosprimerosvalores
ymultiplicadodichasumaporelterceroes:'+resu);
}
</script>
</body>
</html>
Problema3.
14
<html>
<head>
</head>
<body>
varnum1,num2,num3;
if(num1<10&&num2<10&&num3<10)
{
document.write('Todoslosnmerosingresadosson
menoresa10.');
}
</script>
</body>
</html>
Problema4.
<html>
<head>
</head>
<body>
varx,y;
x=prompt('Ingresecoordenadax','');
x=parseInt(x);
15
y=prompt('Ingresecoordenaday','');
y=parseInt(y);
if(x>0&&y>0)
{
document.write('Seencuentraenelprimer
cuadrante');
}
else
{
if(x<0&&y>0)
{
document.write('Seencuentraenelsegundo
cuadrante');
}
else
{
if(x<0&&y<0)
{
document.write('Seencuentraeneltercer
cuadrante');
}
else
{
if(x>0&&y<0)
{
document.write('Seencuentraenelcuarto
cuadrante');
}
else
{
document.write('Seencuentrasobreuneje');
}
}
}
}
</script>
</body>
16
</html>
Problema5.
<html>
<head>
</head>
<body>
varsueldo,antiguedad;
sueldo=prompt('Ingreseelsueldodelempleado','');
sueldo=parseInt(sueldo);
antiguedad=prompt('Ingreselaantigedaddel
empleado','');
antiguedad=parseInt(antiguedad);
if(sueldo<500&&antiguedad>=10)
{
document.write('Seleotorgaunaumentodel20%');
varsueldototal=sueldo+sueldo*0.20;
document.write('Elsueldototales:'+sueldototal);
}
else
{
if(sueldo<500&&antiguedad<10)
{
document.write('Seleotorgaunaumentodel5%');
varsueldototal=sueldo+sueldo*0.05;
document.write('Elsueldototal
es:'+sueldototal);
}
else
{
17
document.write('Elsueldoquedasin
cambios:'+sueldo);
}
}
</script>
</body>
</html>
Operadores lgicos || (o) en las estructuras condicionales.
Traducido se lo lee como "O". Si la condicin 1 es Verdadera o la condicin

2 es Verdadera, luego ejecutar la rama del Verdadero.
Cuando vinculamos dos o ms condiciones con el operador "O", con que
una de las dos condiciones sea Verdadera alcanza para que el resultado de
la condicin compuesta sea Verdadero.
Ejemplo: Se carga una fecha (da, mes y ao) por teclado. Mostrar un
mensaje si corresponde al primer trimestre del ao (enero, febrero o marzo).
Cargar por teclado el valor numrico del da, mes y ao por separado.
<html>
<head>
</head>
<body>
vardia,mes,ao;
dia=prompt('Ingreseda:','');
mes=prompt('Ingresemes:','');
ao=prompt('Ingreseao:','');
dia=parseInt(dia);
mes=parseInt(mes);
ao=parseInt(ao);
if(mes==1||mes==2||mes==3)
{
18
document.write('correspondealprimer
trimestredelao.');
}
</script>
</body>
</html>
La carga de una fecha se hace por partes, ingresamos las variables dia,
mes y ao.
PROBLEMA
1. Se ingresan por teclado tres nmeros, si al menos uno de

los valores ingresados es menores a 10, imprimir en la pgina la
leyenda 'Alguno de los nmeros son menores a diez'.
Problema1.
<html>
<head>
</head>
<body>
varnum1,num2,num3;
if(num1<10||num2<10||num3<10)
{
document.write('Algunodelosnmerossonmenoresa
diez');
19
}
</script>
</body>
</html>
Estructura repetitiva (while)
Hasta ahora hemos empleado estructuras SECUENCIALES y

CONDICIONALES. Existe otro tipo de estructuras tan importantes como las
anteriores que son las estructuras REPETITIVAS.
Una estructura repetitiva permite ejecutar una instruccin o un conjunto de
instrucciones varias veces.
Una ejecucin repetitiva de sentencias se caracteriza por:

- La o las sentencias que se repiten.
- El test o prueba de condicin antes de cada repeticin, que motivar que
se repitan o no las sentencias.
Funcionamiento del while: En primer lugar se verifica la condicin, si la

misma resulta verdadera se ejecutan las operaciones que indicamos entre
las llaves que le siguen al while.
En caso que la condicin sea Falsa contina con la instruccin siguiente al
bloque de llaves.
El bloque se repite MIENTRAS la condicin sea Verdadera.
Importante: Si la condicin siempre retorna verdadero estamos en presencia

de un ciclo repetitivo infinito. Dicha situacin es un error de programacin,
nunca finalizar el programa.
20
Ejemplo: Realizar un programa que imprima en pantalla los nmeros del 1 al
100.
Sin conocer las estructuras repetitivas podemos resolver el problema

empleando una estructura secuencial. Inicializamos una variable con el
valor 1, luego imprimimos la variable, incrementamos nuevamente la
variable y as sucesivamente. Pero esta solucin es muy larga.
La mejor forma de resolver este problema es emplear una estructura
repetitiva:
<html>
<head>
</head>
<body>
varx;
x=1;
while(x<=100)
{
document.write(x);
x=x+1;
}
</script>
</body>
</html>
Para que se impriman los nmeros, uno en cada lnea, agregamos la marca
HTML de <br>.
Es muy importante analizar este programa:
La primera operacin inicializa la variable x en 1, seguidamente comienza la
estructura repetitiva while y disponemos la siguiente condicin ( x <= 100),
se lee MIENTRAS la variable x sea menor o igual a 100.
Al ejecutarse la condicin, retorna VERDADERO, porque el contenido de x
(1) es menor o igual a 100.
Al ser la condicin verdadera se ejecuta el bloque de instrucciones que
contiene la estructura while. El bloque de instrucciones contiene dos salidas
21
al documento y una operacin. Se imprime el contenido de x y
seguidamente se incrementa la variable x en uno.
La operacin x = x + 1 se lee como "en la variable x se guarda el contenido

de x ms 1". Es decir, si x contiene 1 luego de ejecutarse esta operacin se
almacenar en x un 2.
Al finalizar el bloque de instrucciones que contiene la estructura repetitiva,

se verifica nuevamente la condicin de la estructura repetitiva y se repite el
proceso explicado anteriormente.
Mientras la condicin retorne verdadero, se ejecuta el bloque de
instrucciones; al retornar falso la verificacin de la condicin, se sale de la
estructura repetitiva y contina el algoritmo, en este caso, finaliza el
programa.
Lo ms difcil es la definicin de la condicin de la estructura while y qu

bloque de instrucciones se va a repetir. Observar que si, por ejemplo,
disponemos la condicin x >=100 ( si x es mayor o igual a 100) no provoca
ningn error sintctico pero estamos en presencia de un error lgico porque
al evaluarse por primera vez la condicin retorna falso y no se ejecuta el
bloque de instrucciones que queramos repetir 100 veces.
No existe una RECETA para definir una condicin de una estructura

repetitiva, sino que se logra con una prctica continua, solucionando
problemas.
Una vez planteado el programa debemos verificar si el mismo es una

solucin vlida al problema (en este caso se deben imprimir los nmeros del
1 al 100 en la pgina), para ello podemos hacer un seguimiento del flujo del
diagrama y los valores que toman las variables a lo largo de la ejecucin:
x
1
2
3
4
.
.
100
101 Cuando x vale 101 la condicin de la estructura
repetitiva retorna falso, en este caso finaliza el
diagrama.
La variable x recibe el nombre de CONTADOR. Un contador es un tipo
especial de variable que se incrementa o decrementa con valores
22
constantes durante la ejecucin del programa. El contador x nos indica en
cada momento la cantidad de valores impresos en la pgina.
Importante: Podemos observar que el bloque repetitivo puede no ejecutarse
si la condicin retorna falso la primera vez.
La variable x debe estar inicializada con algn valor antes que se ejecute la
operacin x = x + 1.
Probemos algunas modificaciones de este programa y veamos qu cambios
se deberan hacer para:
1 - Imprimir los nmeros del 1 al 500.
2 - Imprimir los nmeros del 50 al 100.
3 - Imprimir los nmeros del -50 al 0.
4 - Imprimir los nmeros del 2 al 100 pero de 2 en 2 (2,4,6,8 ....100).
<html>
<head>
</head>
<body>
var x;
x=1;
while (x<=100)
{
document.write(x);
x=x+1;
}
</script>
</body>
</html>
PROBLEMA
1. Realizar un programa que imprima 25 trminos de la serie 11

- 22 - 33 - 44, etc. (No se ingresan valores por teclado).
2. Mostrar los mltiplos de 8 hasta el valor 500. Debe aparecer
en pantalla 8 -16 -24, etc.
Problema1.
23
<html>
<head>
</head>
<body>
varserie;
serie=11;
varx;
x=1;
while(x<=25)
{
document.write(serie);
x=x+1;
serie=serie+11;
}
</script>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
varmultiplo8;
multiplo8=8;
while(multiplo8<=500)
{
document.write(multiplo8);
24
multiplo8=multiplo8+8;
}
</script>
</body>
</html>
Estructura repetitiva (for)
Cualquier problema que requiera una estructura repetitiva se puede resolver

empleando la estructura while. Pero hay otra estructura repetitiva cuyo
planteo es ms sencillo en ciertas situaciones.
Esta estructura se emplea en aquellas situaciones en las cuales
CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque
de instrucciones. Ejemplo: cargar 10 nmeros, ingresar 5 notas de alumnos,
etc. Conocemos de antemano la cantidad de veces que queremos que el
bloque se repita.
Por ltimo, hay que decir que la ejecucin de la sentencia break dentro de
cualquier parte del bucle provoca la salida inmediata del mismo.
Sintaxis:
for (<Inicializacin> ; <Condicin> ; <Incremento o Decremento>)
{
<Instrucciones>
}
Esta estructura repetitiva tiene tres argumentos: variable de inicializacin,
condicin y variable de incremento o decremento.
Funcionamiento:
- Primero se ejecuta por nica vez el primer argumento .
Por lo general se inicializa una variable.
- El segundo paso es evaluar la (Condicin), en caso de ser
verdadera se ejecuta el bloque,
en caso contrario contina el programa.
- El tercer paso es la ejecucin de las instrucciones.
25
- El cuarto paso es ejecutar el tercer argumento (Incremento o
Decremento).
- Luego se repiten sucesivamente del Segundo al Cuarto Paso.
Este tipo de estructura repetitiva se utiliza generalmente cuando sabemos la
cantidad de veces que deseamos que se repita el bloque.
Ejemplo: Mostrar por pantalla los nmeros del 1 al 10.
<html>
<head>
</head>
<body>
varf;
for(f=1;f<=10;f++)
{
document.write(f+"");
}
</script>
</body>
</html>
Inicialmente f se la inicializa con 1. Como la condicin se verifica como
verdadera se ejecuta el bloque del for (en este caso mostramos el contenido
de la variable f y un espacio en blanco). Luego de ejecutar el bloque pasa al
tercer argumento del for (en este caso con el operador ++ se incrementa en
uno el contenido de la variable f, existe otro operador -- que decrementa en
uno una variable), hubiera sido lo mismo poner f=f+1 pero este otro
operador matemtico nos simplifica las cosas.
Importante: Tener en cuenta que no lleva punto y coma al final de los tres
argumentos del for. El disponer un punto y coma provoca un error lgico y
no sintctico, por lo que el navegador no avisar.
PROBLEMAS
26
1. Confeccionar un programa que lea 3 pares de datos, cada par
de datos corresponde a la medida de la base y la altura de un
tringulo. El programa deber informar:
a) De cada tringulo la medida de su base, su altura y su
superficie.
b) La cantidad de tringulos cuya superficie es mayor a 12.
2. Desarrollar un programa que solicite la carga de 10 nmeros
e imprima la suma de lo ltimos 5 valores ingresados.
3. Desarrollar un programa que muestre la tabla de multiplicar

del 5 (del 5 al 50).
4. Confeccionar un programa que permita ingresar un valor del
1 al 10 y nos muestre la tabla de multiplicar del mismo (los
primeros 12 trminos)
Ejemplo: Si ingreso 3 deber aparecer en pantalla los valores 3, 6,
9, hasta el 36.
5. Realizar un programa que lea los lados de 4 tringulos, e
informar:
a) De cada uno de ellos, qu tipo de tringulo es: equiltero (tres
lados iguales), issceles (dos lados iguales), o escaleno (ningn
lado igual)
b) Cantidad de tringulos de cada tipo.
c) Tipo de tringulo del que hay menor cantidad.
6. Escribir un programa que pida ingresar coordenadas (x,y)
que representan puntos en el plano. Informar cuntos puntos se
han ingresado en el primer, segundo, tercer y cuarto cuadrante. Al
comenzar el programa se pide que se ingrese la cantidad de
puntos a procesar.
7. Se realiza la carga de 10 valores enteros por teclado. Se
desea conocer:
a) La cantidad de valores negativos ingresados.
b) La cantidad de valores positivos ingresados.
c) La cantidad de mltiplos de 15.
d) El valor acumulado de los nmeros ingresados que son pares.
8. Se cuenta con la siguiente informacin:
Las edades de 5 estudiantes del turno maana.
Las edades de 6 estudiantes del turno tarde.
Las edades de 11 estudiantes del turno noche.
Las edades de cada estudiante deben ingresarse por teclado.
a) Obtener el promedio de las edades de cada turno (tres
promedios).
27
b) Imprimir dichos promedios (promedio de cada turno).
c) Mostrar por pantalla un mensaje que indique cual de los tres
turnos tiene un promedio de edades mayor.
Problema1.
<html>
<head>
</head>
<body>
varf;
varbase;
varaltura;
varsuperficie;
varconta1=0;
for(f=1;f<=3;f++)
{
base=prompt('Ingreselabase:','');
base=parseInt(base);
altura=prompt('Ingreselaaltura:','');
altura=parseInt(altura);
superficie=base*altura/2;
if(superficie>12)
{
conta1++;
}
document.write('Tringulonro:'+f+'<br>');
document.write('Base:'+base+'<br>');
document.write('Altura:'+altura+'<br>');
document.write('Superficie:'+superficie+'<br>');
}
document.write('Cantidaddetringulosconsuperficie
mayora12:'+conta1);
</script>
28
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
//Desarrollarunprogramaquesolicitelacargade10
nmeroseimprimalasumadelo
//ltimos5valoresingresados.
varsuma=0;
varf;
varvalor;
for(f=1;f<=10;f++)
{
valor=prompt('Ingreseunnro:','');
valor=parseInt(valor);
if(f>5)
{
suma=suma+valor;
}
}
document.write('Lasumadelosltimoscincovalores
ingresadoses:'+suma);
</script>
</body>
</html>
29
Problema3.
<html>
<head>
</head>
<body>
//Desarrollarunprogramaquemuestrelatablade
multiplicardel5(del5al50).
vartabla=5;
varf=1;
for(f=1;f<=10;f++)
{
document.write(tabla+'');
tabla=tabla+5;
}
</script>
</body>
</html>
Problema4.
<html>
<head>
</head>
<body>
/*Confeccionarunprogramaquepermitaingresarun
valordel1al10y
30
nosmuestrelatablademultiplicardelmismo(los
primeros12trminos)
Ejemplo:Siingreso3deberaparecerenpantallalos
valores3,6,9,hastael36.*/
vartabla;
varf;
varconta;
tabla=prompt('Ingreseunvalordel1al10:','');
tabla=parseInt(tabla);
conta=tabla;
for(f=1;f<=12;f++)
{
document.write(conta+'');
conta=conta+tabla;
}
</script>
</body>
</html>
Problema5.
<html>
<head>
</head>
<body>
/*Realizarunprogramaquelealosladosde4
tringulos,einformar:
a) Decadaunodeellos,qutipodetringuloes:
equiltero(tresladosiguales),issceles(dos
ladosiguales),oescaleno(ningnladoigual)
b) Cantidaddetringulosdecadatipo.
c) Tipodetringulodelquehaymenorcantidad.*/
31
varcant1=0;
varcant2=0;
varcant3=0;
varlado1;
varlado2;
varlado3;
varf;
for(f=1;f<=4;f++)
{
lado1=prompt('Ingreseprimerlado:','');
lado1=parseInt(lado1);
lado2=prompt('Ingresesegundolado:','');
lado3=prompt('Ingresetercerlado:','');
if(lado1==lado2&&lado1==lado3)
{
document.write('Tringuloequilatero.<br>');
cant1++;
}
else
{
if(lado1==lado2||lado1==lado3||lado2==lado3)
{
document.write('Tringuloissceles.<br>');
cant2++;
}
else
{
document.write('Tringuloescaleno.<br>');
cant3++;
}
}
}
document.write('Cantidaddetringulos
equilteros:'+cant1+'<br>');
32
issceles:'+cant2+'<br>');
escalenos:'+cant3+'<br>');
if(cant1<cant2&&cant1<cant3)
{
document.write('Seingresaronmenostringulos
equilteros');
}
else
{
if(cant2<cant3)
{
issceles');
}
else
{
escalenos');
}
}
</script>
</body>
</html>
Problema6.
<html>
<head>
</head>
<body>
/*Escribirunprogramaquepidaingresarcoordenadas
33
(x,y)querepresentanpuntosenelplano.
Informarcuntospuntossehaningresadoenelprimer,
segundo,tercerycuartocuadrante.
Alcomenzarelprogramasepidequeseingresela
cantidaddepuntosaprocesar.*/
varcuad1=0;
varcuad2=0;
varcuad3=0;
varcuad4=0;
varx;
vary;
varf;
varcant;
cant=prompt('Cuantospuntosprocesar:','');
cant=parseInt(cant);
for(f=1;f<=cant;f++)
{
x=prompt('Ingresecoordenadax:','');
x=parseInt(x);
y=prompt('Ingresecoordenaday:','');
y=parseInt(y);
if(x>0&&y>0)
{
cuad1++;
}
else
{
if(x<0&&y>0)
{
cuad2++;
}
else
{
if(x<0&&y<0)
{
cuad3++;
}
34
else
{
if(x>0&&y<0)
{
cuad4++;
}
}
}
}
}
document.write('Cantidaddepuntosingresadosenel
primercuadrante:'+cuad1+'<br>');
segundocuadrante:'+cuad2+'<br>');
tercercuadrante:'+cuad3+'<br>');
cuartocuadrante:'+cuad4+'<br>');
</script>
</body>
</html>
Problema7.
<html>
<head>
</head>
<body>
/*Serealizalacargade10valoresenterospor
teclado.Sedeseaconocer:
a) Lacantidaddevaloresnegativosingresados.
b) Lacantidaddevalorespositivosingresados.
35
c) Lacantidaddemltiplosde15.
d) Elvaloracumuladodelosnmerosingresadosque
sonpares.*/
varcantnegativos=0;
varcantpositivos=0;
varmult15=0;
varsumapares=0;
varf;
varvalor;
for(f=1;f<=10;f++)
{
valor=prompt('Ingreseunvalor:','');
if(valor<0)
{
cantnegativos++;
}
else
{
if(valor>0)
{
cantpositivos++;
}
}
if(valor%15==0&&valor!=0)
{
mult15++;
}
if(valor%2==0)
{
sumapares=sumapares+valor;
}
}
document.write('Cantidaddevalores
negativos:'+cantnegativos+'<br>');
document.write('Cantidaddevalores
positivos:'+cantpositivos+'<br>');
36
document.write('Cantidaddemltiplosde
15:'+mult15+'<br>');
document.write('Sumadelosvalorespares
ingresados:'+sumapares+'<br>');
</script>
</body>
</html>
Problema8.
<html>
<head>
</head>
<body>
/*Secuentaconlasiguienteinformacin:
Lasedadesde5estudiantesdelturnomaana.
Lasedadesde6estudiantesdelturnotarde.
Lasedadesde11estudiantesdelturnonoche.
Lasedadesdecadaestudiantedebeningresarsepor
teclado.
a)Obtenerelpromediodelasedadesdecadaturno
(trespromedios)
b)Imprimirdichospromedios(promediodecada
turno).
c)Mostrarporpantallaunmensajequeindiquecual
delos
tresturnostieneunpromediodeedadesmayor.*/
varsuma1=0;
varedad;
varf;
for(f=1;f<=5;f++)
37
{
edad=prompt('Edaddeestudiantedelturno
maana:','');
edad=parseInt(edad);
suma1=suma1+edad;
}
varsuma2=0;
for(f=1;f<=6;f++)
{
tarde:','');
suma2=suma2+edad;
}
varsuma3=0;
for(f=1;f<=11;f++)
{
noche:','');
suma3=suma3+edad;
}
varpromedio1=suma1/5;
document.write('Promediodeedadesdealumnosdel
turnomaana:'+promedio1+'<br>');
turnotarde:'+promedio2+'<br>');
turnonoche:'+promedio3+'<br>');
if(promedio1>promedio2&&promedio1>promedio3)
{
document.write('Elturnomaanatieneunpromedio
mayordeedades');
}
else
{
38
if(promedio2>promedio3)
{
document.write('Elturnotardetieneunpromedio
mayordeedades');
}
else
{
document.write('Elturnonochetieneunpromedio
mayordeedades');
}
}
</script>
</body>
</html>
Estructura repetitiva (do/while)
La sentencia do/while es otra estructura repetitiva, la cual ejecuta al menos

una vez su bloque repetitivo, a diferencia del while que puede no ejecutar el
bloque.
Esta estructura repetitiva se utiliza cuando conocemos de antemano que por
lo menos una vez se ejecutar el bloque repetitivo.
La condicin de la estructura est abajo del bloque a repetir, a diferencia del
while que est en la parte superior.
Finaliza la ejecucin del bloque repetitivo cuando la condicin retorna falso,
es decir igual que el while.
Problema: Escribir un programa que solicite la carga de un nmero entre 0 y

999, y nos muestre un mensaje de cuntos dgitos tiene el mismo. Finalizar
el programa cuando se cargue el valor 0.
39
<html>
<head>
</head>
<body>
varvalor;
do{
valor=prompt('Ingreseunvalorentre0y
999:','');
document.write('Elvalor'+valor+'tiene
');
if(valor<10)
{
document.write('Tiene1digitos');
}
else
{
if(valor<100)
{
}
else
{
}
}
}while(valor!=0);
</script>
</body>
</html>
En este problema por lo menos se carga un valor. Si se carga un valor
menor a 10 se trata de un nmero de una cifra, si es mayor a 10 pero menor
40
a 100 se trata de un valor de dos dgitos, en caso contrario se trata de un
valor de tres dgitos. Este bloque se repite mientras se ingresa en la variable
'valor' un nmero distinto a 0.
PROBLEMAS
1. Realizar un programa que acumule (sume) valores

ingresados por teclado hasta ingresa el 9999 (no sumar dicho
valor, solamente indica que ha finalizado la carga). Imprimir el
valor acumulado e informar si dicho valor es cero, mayor a cero o
menor a cero.
2. En un banco se procesan datos de las cuentas corrientes de
sus clientes. De cada cuenta corriente se conoce: nmero de
cuenta, nombre del cliente y saldo actual. El ingreso de datos debe
finalizar al ingresar un valor negativo en el nmero de cuenta.
Se pide confeccionar un programa que lea los datos de las cuentas
corrientes e informe:
a) De cada cuenta: nmero de cuenta, nombre del cliente y estado
de la cuenta segn su saldo, sabiendo que:
3. Estado de la cuenta 'Acreedor' si el saldo es >0.
4. 'Deudor' si el saldo es <0.
5. 'Nulo' si el saldo es =0.
b) La suma total de los saldos acreedores.
6. Se realiz un censo provincial y se desea procesar la
informacin obtenida en dicho censo. De cada una de las personas
censadas se tiene la siguiente informacin: nmero de documento,
edad y sexo ('femenino' o 'masculino')
Se pide confeccionar un programa que lea los datos de cada
persona censada (para finalizar ingresar el valor cero en el nmero
de documento) e informar:
7.
8. a) Cantidad total de personas censadas.
9. b) Cantidad de varones.
10. c) Cantidad de mujeres.
11. d) Cantidad de varones cuya edad vara entre 16 y 65 aos.
Problema1.
<html>
<head>
</head>
<body>
41
varvalor;
varsuma=0;
do{
valor=prompt('Ingreseunvalor(9999parafinalizar)','');
if(valor!=9999)
{
suma=suma+valor;
}
}while(valor!=9999);
document.write('Valoracumuladototal:'+suma);
if(suma>0)
{
document.write('Elvaloracumuladoesmayoracero');
}
else
{
if(suma==0)
{
document.write('Elvaloracumuladoescero');
}
else
{
document.write('Elvaloracumuladoesmenoracero');
}
}
</script>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
varnrocuenta;
varnombre;
varsaldo=0;
varacumula=0;
varsaldoacre=0;
do{
nrocuenta=prompt('Ingresenrodecuenta:','');
nrocuenta=parseInt(nrocuenta);
if(nrocuenta>=0)
{
42
nombre=prompt('Nombredelcliente:');
saldo=prompt('Saldoactual:','');
saldo=parseInt(saldo);
if(saldo>0)
{
saldoacre=saldoacre+saldo;
document.write(nombre+'tienesaldoacreedor<br>');
}
else
{
if(saldo<0)
{
document.write(nombre+'tienesaldodeudor<br>');
}
else
{
document.write(nombre+'tienesaldonulo<br>');
}
}
acumula=acumula+saldo;
}
}while(nrocuenta>0);
document.write('Sumatotaldesaldosacreedores:'+saldoacre);
</script>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
vardocumento;
varedad;
vartotalpersonas=0;
varcantvarones=0;
varcantmujeres=0;
varcantvaronesgrandes=0;
do{
documento=prompt('Ingresenrodedocumento:','');
documento=parseInt(documento);
if(documento>0)
{
edad=prompt('Ingreselaedad:','');
43
sexo=prompt('Ingreseelsexo(masculino/femenino):','');
if(sexo=='masculino')
{
cantvarones=cantvarones+1;
if(edad>=16&&edad<=65)
{
cantvaronesgrandes=cantvaronesgrandes+1;
}
}
if(sexo=='femenino')
{
cantmujeres=cantmujeres+1;
}
totalpersonas=totalpersonas+1;
}
}while(documento!=0);
document.write('Totaldepersonascensadas:'+totalpersonas+'<br>');
document.write('Cantidaddevarones:'+cantvarones+'<br>');
document.write('Cantidaddemujeres:'+cantmujeres+'<br>');
document.write('Cantidaddevaronesentre16y65aos:
'+cantvaronesgrandes+'<br>');
</script>
</body>
</html>
Clase Array
Un vector es una estructura de datos que permite almacenar un

CONJUNTO de datos.
Con un nico nombre se define un vector y por medio de un subndice
hacemos referencia a cada elemento del mismo (componente).
Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y

luego mostrar el total de gastos en sueldos (cada actividad en una funcin).
<html>
<head>
</head>
<body>
44
functioncargar(sueldos)
{
varf;
for(f=0;f<sueldos.length;f++)
{
varv;
v=prompt('Ingresesueldo:','');
sueldos[f]=parseInt(v);
}
}
functioncalcularGastos(sueldos)
{
vartotal=0;
varf;
{
total=total+sueldos[f];
}
document.write('Listadodesueldos<br>');
{
document.write(sueldos[f]+'<br>');
}
document.write('Totaldegastosen
sueldos:'+total);
}
varsueldos;
sueldos=newArray(5);
cargar(sueldos);
calcularGastos(sueldos);
</script>
45
</body>
</html>
Recordemos que el programa comienza a ejecutarse a partir de las lneas
que se encuentran fuera de la funciones:
var sueldos;
sueldos=new Array(5);
cargar(sueldos);
calcularGastos(sueldos);
Lo primero, definimos una variable y posteriormente creamos un objeto de
la clase Array, indicndole que queremos almacenar 5 valores.
Llamamos a la funcin cargar envindole el vector. En la funcin, a travs
de un ciclo for recorremos las distintas componentes del vector y
almacenamos valores enteros que ingresamos por teclado.
Para conocer el tamao del vector accedemos a la propiedad length de la
clase Array.
En la segunda funcin sumamos todas las componentes del vector,
imprimimos en la pgina los valores y el total de gastos.
Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los

meses de ao. En otra funcin solicitar el ingreso de un nmero entre 1 y
12. Mostrar a qu mes corresponde y cuntos das tiene dicho mes.
<html>
<head>
</head>
<body>
functionmostrarFecha(meses,dias)
{
varnum;
num=prompt('Ingresenmerodemes:','');
num=parseInt(num);
document.write('Correspondeal
mes:'+meses[num1]);
46
document.write('Tiene'+dias[num1]+'
das');
}
varmeses;
meses=newArray(12);
meses[0]='Enero';
meses[1]='Febrero';
meses[2]='Marzo';
meses[3]='Abril';
meses[4]='Mayo';
meses[5]='Junio';
meses[6]='Julio';
meses[7]='Agosto';
meses[8]='Septiembre';
meses[9]='Octubre';
meses[10]='Noviembre';
meses[11]='Diciembre';
vardias;
dias=newArray(12);
dias[0]=31;
dias[1]=28;
dias[2]=31;
dias[3]=30;
dias[4]=31;
dias[5]=30;
dias[6]=31;
dias[7]=31;
dias[8]=30;
dias[9]=31;
dias[10]=30;
dias[11]=31;
mostrarFecha(meses,dias);
47
</script>
</body>
</html>
En este problema definimos dos vectores, uno para almacenar los meses y
otro los das. Decimos que se trata de vectores paralelos porque en la
componente cero del vector meses almacenamos el string 'Enero' y en el
vector dias, la cantidad de das del mes de enero.
Es importante notar que cuando imprimimos, disponemos como subndice el
valor ingresado menos 1, esto debido a que normalmente el operador de
nuestro programa carga un valor comprendido entre 1 y 12. Recordar que
los vectores comienzan a numerarse a partir de la componente cero.
document.write('Corresponde al mes:'+meses[num-1]);
PROBLEMAS
1. Desarrollar un programa que permita ingresar un vector de 8

elementos, e informe:
El valor acumulado de todos los elementos del vector.
El valor acumulado de los elementos del vector que sean mayores
a 36.
Cantidad de valores mayores a 50.
2. Realizar un programa que pida la carga de dos vectores
numricos. Obtener la suma de los dos vectores, dicho resultado
guardarlo en un tercer vector del mismo tamao. Sumar
componente a componente.
El tamao del vector es a eleccin.
Problema1.
<html>
<head>
</head>
<body>
functioncargar(vec)
48
{
varf;
for(f=0;f<vec.length;f++)
{
varvalor;
valor=prompt('Ingresecomponente:','');
vec[f]=parseInt(valor);
}
}
functionsumar(vec)
{
varf;
varsuma=0;
{
suma=suma+vec[f];
}
document.write('Valoracumuladodelas
componentes:'+suma+'<br>');
}
functionsumarMayor36(vec)
{
varf;
varsuma=0;
{
if(vec[f]>36)
{
suma=suma+vec[f];
}
}
document.write('Valoracumuladodelascomponentes
mayoresa36:'+suma+'<br>');
}
functioncantidadMayores50(vec)
{
varf;
varcant=0;
49
{
if(vec[f]>50)
{
cant=cant+1;
}
}
document.write('Cantidaddecomponentesmayoresa
50:'+cant+'<br>');
}
varvec;
vec=newArray(8);
cargar(vec);
sumar(vec);
sumarMayor36(vec);
cantidadMayores50(vec);
</script>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
functioncargarVectores(vec1,vec2)
{
varf;
for(f=0;f<vec1.length;f++)
{
varvalor;
valor=prompt('Ingresecomponentedelprimer
vector:','');
50
vec1[f]=parseInt(valor);
}
for(f=0;f<vec2.length;f++)
{
varvalor;
valor=prompt('Ingresecomponentedelsegundo
vector:','');
vec2[f]=parseInt(valor);
}
}
functionsumarVectores(vec1,vec2,vecsuma)
{
varf;
for(f=0;f<vecsuma.length;f++)
{
vecsuma[f]=vec1[f]+vec2[f];
}
}
functionimprimirVector(vecsuma)
{
varf;
for(f=0;f<vecsuma.length;f++)
{
document.write(vecsuma[f]+'');
}
}
varvec1;
vec1=newArray(5);
varvec2;
vec2=newArray(5);
varvecsuma;
vecsuma=newArray(5);
cargarVectores(vec1,vec2);
sumarVectores(vec1,vec2,vecsuma);
imprimirVector(vecsuma);
</script>
</body>
51
</html>
Formularios y Eventos.
El uso de Javascript en los formularios HTML se hace fundamentalmente

con el objetivo de validar los datos ingresados. Se hace esta actividad en el
cliente (navegador) para desligar de esta actividad al servidor que recibir
los datos ingresados por el usuario.
Esta posibilidad de hacer pequeos programas que se ejecutan en el
navegador, evitan intercambios innecesarios entre el cliente y el servidor
(navegador y sitio web).
Suponemos que conoce las marcas para la creacin de formularios en una
pgina web:
form <form> ... </form>
text <input type="text">
password <input type="password">
textarea <textarea> ... </textarea>
button <input type="button">
submit <input type="submit">
reset <input type="reset">
checkbox <input type="checkbox">
radio <input type="radio">
select <select> ... </select>
hidden <input type="hidden">
El navegador crea un objeto por cada control visual que aparece dentro de
la pgina. Nosotros podemos acceder posteriormente desde JavaScript a
dichos objetos.
El objeto principal es el FORM que contendr todos los otros objetos: TEXT
(editor de lneas), TEXTAREA (editor de varias lneas), etc.
Nuestra actividad en JavaScript es procesar los eventos que generan estos
controles (un evento es una accin que se dispara, por ejemplo si se
presiona un botn).
Vamos a hacer un problema muy sencillo empleando el lenguaje Javascript;
dispondremos un botn y cada vez que se presione, mostraremos un
contador:
<html>
<head>
52
</head>
<body>
varcontador=0;
functionincrementar()
{
contador++;
alert('Elcontadorahoravale:'+contador);
}
</script>
<form>
<inputtype="button"onClick="incrementar()"
value="incrementar">
</form>
</body>
</html>
A los eventos de los objetos HTML se les asocia una funcin, dicha funcin
se ejecuta cuando se dispara el evento respectivo. En este caso cada vez
que presionamos el botn, se llama a la funcin incrementar, en la misma
incrementamos la variable contador en uno. Hay que tener en cuenta que a
la variable contador la definimos fuera de la funcin para que no se inicialice
cada vez que se dispara el evento.
La funcin alert crea una ventana que puede mostrar un mensaje.
PROBLEMA
1. Crear un formulario con tres botones con las leyendas "1",

"2" y "3". Mostrar un mensaje indicando qu botn se presion.
Problema1.
<html>
<head>
53
</head>
<body>
functionpresion1()
{
alert('Sepresionelbotn1');
}
functionpresion2()
{
}
functionpresion3()
{
}
</script>
<form>
<inputtype="button"onClick="presion1()"value="Boton
1">
2">
3">
</form>
</body>
</html>
Controles FORM, BUTTON y TEXT.
Hasta ahora hemos visto como crear un formulario con controles de tipo
BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar
caracteres por teclado).
Ahora veremos la importancia de definir un id a todo control de un
54
formulario.
Con un ejemplo veremos estos controles: Confeccionar un formulario que
permita ingresar el nombre y edad de una persona:
<html>
<head></head>
<body>
functionmostrar()
{
var
nom=document.getElementById('nombre').value;
vared=document.getElementById('edad').value;
alert('Ingreselnombre:'+nom);
alert('Ylaedad:'+ed);
}
</script>
<form>
Ingresesunombre:
<inputtype="text"id="nombre"><br>
Ingresesuedad:
<inputtype="text"id="edad"><br>
<inputtype="button"value="Confirmar"
onClick="mostrar()">
</form>
</body>
</html>
En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT.
El evento que se dispara al presionar el botn se llama mostrar.
La funcin 'mostrar' accede a los contenidos de los dos controles de tipo
TEXT:
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
55
Para hacer ms clara la funcin guardamos en dos variables auxiliares los
contenidos de los controles de tipo TEXT.
La propiedad "id" es un identificar nico para cualquier marca HTML que
luego nos permite desde Javascript acceder a dicho elemento.
El mtodo getElementById nos retorna una referencia del objeto HTML que
le pasamos como parmetro. a partir de este objeto accedemos a la
propiedad value que almacena el valor ingresado por el operador en el
control TEXT.
Luego de extraer los valores ingresados por el operador los mostramos
utilizando la funcin alert:
var nom=document.getElementById('nombre').value;
var ed=document.getElementById('edad').value;
alert('Ingres el nombre:' + nom);
alert('Y la edad:' + ed);
PROBLEMAS
1. Crear un programa que permita cargar un entero en un text

y al presionar un botn nos muestre dicho valor elevado al cubo
(emplear la funcin alert).
2. Cargar dos nmeros en objetos de tipo text y al presionar un
botn, mostrar el mayor.
3. Cargar un nombre y un apellido en sendos text. Al presionar
un botn, concatenarlos y mostrarlos en un tercer text (Tener en
cuenta que podemos modificar la propiedad value de un objeto
TEXT cuando ocurre un evento)
Problema1.
<html>
<head>
</head>
<body>
functioncalcularCubo()
{
varv=document.getElementById('num').value;
56
v=parseInt(v);
varcubo=v*v*v;
alert(cubo);
}
</script>
<form>
Ingreseunvalor:
<inputtype="text"id="num">
<br>
<inputtype="button"value="Calcularcubo"
onClick="calcularCubo()">
</form>
</body>
</html>
Problema2.
<html>
<head>
</head>
<body>
functionmostrarMayor()
{
varnum1=document.getElementById('num1').value;
varnum2=document.getElementById('num2').value;
if(num1>num2)
{
alert('Elmanores'+num1);
}
else
{
alert('Elmanores'+num2);
57
}
}
</script>
<form>
Ingreseprimervalor:
<inputtype="text"id="num1">
<br>
Ingresesegundovalor:
<inputtype="text"id="num2">
<br>
<inputtype="button"value="mostrarmayor"
onClick="mostrarMayor()">
</form>
</body>
</html>
Problema3.
<html>
<head>
</head>
<body>
functionconcatenar()
{
varnom=document.getElementById('nombre').value;
varape=document.getElementById('apellido').value;
document.getElementById('resultado').value=nom+ape;
}
</script>
<form>
Ingresenombre:
<inputtype="text"id="nombre">
<br>
Ingreseapellido:
58
<inputtype="text"id="apellido">
<br>
<inputtype="button"value="Concatenardatosingresados"
onClick="concatenar()">
<br>
<inputtype="text"id="resultado">
</form>
</body>
</html>
Control PASSWORD
Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental

es que cuando se carga un texto en el campo de edicin slo muestra
asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y
para que otros usuarios no vean los caracteres que tipeamos.
La mayora de las veces este dato se procesa en el servidor. Pero podemos

en el cliente (es decir en el navegador) verificar si ha ingresado una
cantidad correcta de caracteres, por ejemplo.
Ejemplo: Codificar una pgina que permita ingresar una password y luego
muestre una ventana de alerta si tiene menos de 5 caracteres.
<html>
<head>
</head>
<body>
functionverificar()
{
var
clave=document.getElementById('clave').value;
if(clave.length<5)
{
59
alert('Laclavenopuedetenermenosde5
caracteres!!!');
}
else
{
alert('Largodeclavecorrecta');
}
}
</script>
<form>
Ingreseunaclave:
<inputtype="password"id="clave">
<br>
<inputtype="button"value="Confirmar"
onClick="verificar()">
</form>
</body>
</html>
En este problema debemos observar que cuando ingresamos caracteres
dentro del campo de edicin slo vemos asteriscos, pero realmente en
memoria se almacenan los caracteres tipeados. Si queremos mostrar los
caracteres ingresados debemos acceder mediante el mtodo
getElementById a la marca HTML clave:
var clave=document.getElementById('clave').value;
Normalmente, a este valor no lo mostraremos dentro de la pgina, sino se
perdera el objetivo de este control (ocultar los caracteres tipeados).
Si necesitamos saber la cantidad de caracteres que tiene un string
accedemos a la propiedad length que retorna la cantidad de caracteres.
if (clave.length<5)
PROBLEMA
1. Disponer dos campos de texto tipo password. Cuando se

presione un botn mostrar si las dos claves ingresadas son iguales
60
o no (es muy comn solicitar al operador el ingreso de dos veces
de su clave para validar si las escribi correctamente, esto se hace
cuando se crea una password para el ingreso a un sitio o para el
cambio de una existente).
Tener en cuenta que podemos emplear el operador == para ver si
dos string son iguales.
Problema1.
<html>
<head>
</head>
<body>
functionverificar()
{
varclave1=document.getElementById('clave1').value;
varclave2=document.getElementById('clave2').value;
if(clave1==clave2)
{
alert('Lasdosclavesingresadassoniguales');
}
else
{
alert('Lasdosclavesingresadassondistintas');
}
}
</script>
<form>
Ingreseclave:
<inputtype="password"id="clave1">
<br>
Repitalaclave:
<inputtype="password"id="clave2">
<br>
<inputtype="button"value="Verificarclave"
</form>
61
</body>
</html>
Control SELECT
Este otro objeto visual que podemos disponer en un FORM permite realizar
la seleccin de un string de una lista y tener asociado al mismo un valor no
visible. El objetivo fundamental en JavaScript es determinar qu elemento
est seleccionado y qu valor tiene asociado. Esto lo hacemos cuando
ocurre el evento onChange.
Para determinar la posicin del ndice seleccionado en la lista:

document.getElementById('select1').selectedIndex;
Considerando que el objeto SELECT se llama select1 accedemos a la
propiedad selectedIndex (almacena la posicin del string seleccionado de la
lista, numerando a partir de cero).
Para determinar el string seleccionado:
document.getElementById('select1').options[document.getElementById('sel
ect1').selectedIndex].text;
Es decir que el objeto select1 tiene otra propiedad llamada options, a la que
accedemos por medio de un subndice, al string de una determinada
posicin.
Hay problemas en los que solamente necesitaremos el string almacenado

en el objeto SELECT y no el valor asociado (no es obligatorio asociar un
valor a cada string).
Y por ltimo con esta expresin accedemos al valor asociado al string:
document.getElementById('select1').options[document.getElementById('sel
ect1').selectedIndex].value;
Un ejemplo completo que muestra el empleo de un control SELECT es:
<html>
<head>
</head>
<body>
62
functioncambiarColor()
{
var
seleccion=document.getElementById('select1');
document.getElementById('text1').value=seleccio
n.selectedIndex;
n.options[seleccion.selectedIndex].text;
n.options[seleccion.selectedIndex].value;
}
</script>
<form>
<selectid="select1"
onChange="cambiarColor()">
<optionvalue="0xff0000">Rojo</option>
<optionvalue="0x00ff00">Verde</option>
<optionvalue="0x0000ff">Azul</option>
</select>
<br>
Nmerodendiceseleccionadodelobjeto
SELECT:<inputtype="text"id="text1"><br>
Textoseleccionado:<inputtype="text"
id="text2"><br>
Valorasociado:<inputtype="text"
id="text3"><br>
</form>
</body>
</html>
63
Se debe analizar en profundidad este problema para comprender
primeramente la creacin del objeto SELECT en HTML, y cmo acceder
luego a sus valores desde Javascript.
Es importante para el objeto SELECT definir qu funcin llamar cuando
ocurra un cambio: onChange="cambiarColor()".
Por cada opcin del objeto SELECT tenemos una lnea:
Donde Rojo es el string que se visualiza en el objeto SELECT y value es el

valor asociado a dicho string.
Analizando la funcin cambiarColor() podemos ver cmo obtenemos los

valores fundamentales del objeto SELECT.
PROBLEMAS
1. Confeccionar una pgina que muestre un objeto SELECT con

distintos tipos de pizzas (Jamn y Queso, Muzzarella, Morrones).
Al seleccionar una, mostrar en un objeto de tipo TEXT el precio de
la misma.
2. Generar un presupuesto de un equipo de computacin a
partir de tres objetos de tipo SELECT que nos permiten
seleccionar:
Procesador (Intel I3 - $400, Intel I5 $600, Intel I7 $800).
Monitor (Samsung 20' - $250, Samsung 22' - $350, Samsung 26' -
$550)
Disco Duro(500 Gb - $300, 1 Tb - $440, 3 Tb - $500)
Para cada caracterstica indicamos string a mostrar (Ej. Intel I3) y
el valor asociado a dicho string (Ej. 400).
Al presionar un botn "Calcular" mostrar el presupuesto en un
objeto de tipo TEXT.
3. Confeccionar una pgina que permita seleccionar una pizza y
la cantidad de unidades. Luego al presionar un botn calcular el
importe a pagar.
Utilizar un objeto de la clase SELECT para la seleccin de la pizza,
pudiendo ser:
Queso: $ 4.
Jamn y queso: $ 6.
Especial: $ 10.
64
A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en
otro objeto de la clase TEXT mostrar el importe total a abonar.
4. Confeccionar una pgina que permita tomar un examen
mltiple choice. Se debe mostrar una pregunta y seguidamente un
objeto SELECT con las respuestas posibles. Al presionar un botn
mostrar la cantidad de respuestas correctas e incorrectas
(Disponer 4 preguntas y sus respectivos controles SELECT)
Problema1.
<html>
<head>
</head>
<body>
functionmostrarSeleccionPizza()
{

document.getElementById('mensaje').value=document.getEle
mentById('pizza').options[document.getElementById('pizza
').selectedIndex].text;
}
</script>
<form>
Pizzas:
<selectid="pizza"onChange="mostrarSeleccionPizza()">
<option>JamonyQueso</option>
<option>Muzzarella</option>
<option>Morrones</option>
</select>
<br>
<inputtype="text"id="mensaje">
</form>
</body>
</html>

65
Problema2.
<html>
<head>
</head>
<body>
functioncalcularPresupuesto()
{
varele1=document.getElementById('procesador')
varprecio1=ele1.options[ele1.selectedIndex].value;
varele2=document.getElementById('monitor')
varele3=document.getElementById('discoduro')
precio1=parseInt(precio1);
varsuma=precio1+precio2+precio3;
document.getElementById('resultado').value=suma;
}
</script>
<form>
Procesador:
<selectid="procesador">
<optionvalue="400">IntelI3</option>
</select>
<br>
Procesador:
<selectid="monitor">
<optionvalue="250">MonitorSamsung20'</option>
</select>
<br>
Discoduro:
66
<selectid="discoduro">
<optionvalue="300">DiscoDuro500Gb</option>
<optionvalue="440">DiscoDuro1Tb</option>
<optionvalue="500">DiscoDuro3Tb</option>
</select>
<br>
<inputtype="button"value="CalcularPresupuesto"
onClick="calcularPresupuesto()">
<br>
</form>
</body>
</html>
Problema3.
<html>
<head>
</head>
<body>
functioncalcularPresupuesto()
{
varprecio=document.getElementById('pizza').value;
precio=parseInt(precio);
var
cantidad=document.getElementById('cantidad').value;
cantidad=parseInt(cantidad);
vartotal=precio*cantidad;
document.getElementById('resultado').value=total;
}
</script>
<form>
Seleccionelapizza:
<selectid="pizza">
67
<optionvalue="4">Queso</option>
<optionvalue="6">JamonyQueso</option>
<optionvalue="10">Especial</option>
</select>
<br>
Cantidaddepizzas:
<inputtype="text"id="cantidad">
<br>
<inputtype="button"value="Calcularcosto"
onClick="calcularPresupuesto()">
<br>
</form>
</body>
</html>
Problema4.
<html>
<head>
</head>
<body>
functionverificar()
{
varcorrectas=0;
varele1=document.getElementById('pregunta1');
if(ele1.options[ele1.selectedIndex].value==3)
{
correctas++;
}
{
68
correctas++;
}
{
correctas++;
}
{
correctas++;
}
alert('Cantidadderespuestas
correctas:'+correctas);
}
</script>
<form>
Comosedicerojoeningles:<br>
<selectid="pregunta1">
<optionvalue="1">blue</option>
<optionvalue="2">green</option>
<optionvalue="3">red</option>
</select>
<br>
Comosediceventanaeningles:<br>
<optionvalue="1">window</option>
<optionvalue="2">door</option>
<optionvalue="3">bedroom</option>
</select>
<br>
Comosedicegatoeningles:<br>
<optionvalue="1">dog</option>
<optionvalue="2">cat</option>
<optionvalue="3">lion</option>
</select>
<br>
Comosedicehombreeningles:<br>
<optionvalue="1">women</option>
<optionvalue="2">man</option>
69
<optionvalue="3">child</option>
</select>
<br>
<inputtype="button"value="Controlar"
</form>
</body>
</html>
Control CHECKBOX
El control CHECKBOX es el cuadradito que puede tener dos estados

(seleccionado o no seleccionado).
Para conocer su funcionamiento y ver como podemos acceder a su estado
desde Javascript haremos un pequea pgina.
Ejemplo: Confeccionar una pgina que muestre 4 lenguajes de
programacin que el usuario puede seleccionar si los conoce. Luego
mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado
el operador.
<html>
<head>
</head>
<body>
functioncontarSeleccionados()
{
varcant=0;
if
(document.getElementById('checkbox1').checked)
{
cant++;
}
70
if
{
cant++;
}
if
{
cant++;
}
if
{
cant++;
}
alert('Conoce'+cant+'lenguajes');
}
</script>
<form>
<inputtype="checkbox"
id="checkbox1">JavaScript
<br>
<inputtype="checkbox"id="checkbox2">PHP
<br>
<inputtype="checkbox"id="checkbox3">JSP
<br>
<inputtype="checkbox"id="checkbox4">VB.Net
<br>
<inputtype="button"value="Mostrar"
onClick="contarSeleccionados()">
</form>
</body>
</html>
71
Cuando se presiona el botn se llama a la funcin Javascript
contarSeleccionados(). En la misma verificamos uno a uno cada control
checkbox accediendo a la propiedad checked del elemento que almacena
true o false segn est o no seleccionado el control:
Disponemos un 'if' para cada checkbox:
if (document.getElementById('checkbox1').checked)
{
cant++;
}
Como la propiedad checked almacena un true o false podemos utilizar dicho
valor directamente como valor de la condicin en lugar de codificar:
if (document.getElementById('checkbox1').checked==true)
{
cant++;
}
Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if.
Mostramos finalmente el resultado final.
PROBLEMA
1. Confeccionar una pgina que muestre tres checkbox que

permitan seleccionar los deportes que practica el usuario (Ftbol,
Bsket, Tenis) Mostrar al presionar un botn los deportes que a
elegido.
Problema1.
<html>
<head>
</head>
<body>
functionverificar()
{
vardeportes='';
if(document.getElementById("checkbox1").checked)
{
deportes=deportes+'Ftbol';
}
72
{
deportes=deportes+'Bsquet';
}
{
deportes=deportes+'Tenis';
}
alert('Losdeportesseleccionadosson:'+deportes);
}
</script>
<form>
Seleccionelosdeportesquepractica:<br>
<inputtype="checkbox"id="checkbox1">Ftbol<br>
<inputtype="checkbox"id="checkbox2">Bsquet<br>
<inputtype="checkbox"id="checkbox3">Tenis<br>
<inputtype="button"value="Controlar"
</form>
</body>
</html>
Control RADIO
Los objetos RADIO tienen sentido cuando disponemos varios elementos.

Slo uno puede estar seleccionado del conjunto.
Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los
estudios que tiene un usuario:
<html>
<head>
</head>
<body>
73
functionmostrarSeleccionado()
{
if
(document.getElementById('radio1').checked)
{
alert('notienesestudios');
}
if
{
alert('tienesestudiosprimarios');
}
if
{
alert('tienesestudiossecundarios');
}
if
{
alert('tienesestudiosuniversitarios');
}
}
</script>
<form>
<inputtype="radio"id="radio1"
name="estudios">Sinestudios
<br>
name="estudios">Primarios
<br>
name="estudios">Secundarios
74
<br>
name="estudios">Universitarios
<br>
onClick="mostrarSeleccionado()">
</form>
</body>
</html>
Es importante notar que todos los objetos de tipo RADIO tienen definida la
propiedad name con el mismo valor (esto permite especificar que queremos
que los radios estn relacionados entre si)
Luego podemos acceder a cada elemento mediante el mtodo
getElementById para consultar la propiedad checked:
if (document.getElementById('radio1').checked)
{
alert('no tienes estudios');
}
Igual que el checkbox, la propiedad checked retorna true o false, segn est
o no seleccionado el control radio.
PROBLEMA
1. Confeccionar una pgina que muestre dos objetos de la clase

RADIO solicitando que seleccione si es mayor de 18 aos o no. Al
presionar un botn mostrar un alert indicando si puede ingresar al
sitio o no.
Problema1.
<html>
<head>
</head>
<body>
functionverificar()
{
75
if(document.getElementById('radio1').checked)
{
alert('Eresmayordeedadyporlotantopuede
ingresar');
}
if(document.getElementById('radio2').checked)
{
alert('Noeresmayordeedadyporlotantono
puedeingresar');
}
}
</script>
<form>
Esmayordeedad?
<br>
<inputtype="radio"id="radio1"name="edad">si<br>
<inputtype="radio"id="radio2"name="edad">no<br>
<inputtype="button"value="Verificar"
</form>
</body>
</html>
Control TEXTAREA
Este control es similar al control TEXT, salvo que permite el ingreso de

muchas lneas de texto.
La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos
permiten indicar la cantidad de filas y columnas a mostrar en pantalla.
Ejemplo: Solicitar la carga del mail y el curriculum de una persona. Mostrar
un mensaje si el curriculum supera los 2000 caracteres.
<html>
<head>
76
</head>
<body>
functioncontrolarCaracteres()
{
if
(document.getElementById('curriculum').value.le
ngth>2000)
{
alert('curriculummuylargo');
}
else
{
alert('datoscorrectos');
}
}
</script>
<form>
<textareaid="curriculum"rows="10"cols="50"
></textarea>
<br>
onClick="controlarCaracteres()">
</form>
</body>
</html>
Para saber el largo de la cadena cargada:
if (document.getElementById('curriculum').value.length>2000)
accedemos a la propiedad length.
77
PROBLEMA
1. Confeccionar una pgina de visitas a un sitio, solicitar

ingresar el nombre de una persona, su mail y los comentarios
(TEXTAREA). Mostrar luego llamando a la funcin alert los datos
ingresados.
Problema1.
<html>
<head>
</head>
<body>
functionverificar()
{
varnombre=document.getElementById('nombre').value;
varmail=document.getElementById('mail').value;
var
comentarios=document.getElementById('comentarios').value
;
alert(nombre+'\n'+mail+'\n'+comentarios);
}
</script>
<form>
Ingresenombre:
Ingresemail:
<inputtype="text"id="mail"><br>
Comentarios:<br>
<textareaid="comentarios"rows="20"
cols="100"></textarea><br>
<inputtype="button"value="confirmar"
</form>
</body>
</html>
78
Eventos onFocus y onBlur
El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur

cuando el objeto pierde el foco.
Ejemplo: Implementar un formulario que solicite la carga del nombre y la
edad de una persona. Cuando el control tome foco borrar el contenido
actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo
est vaco. Mostrar en las propiedades value de los controles text los
mensajes "nombre" y "mail" respectivamente.
<html>
<head></head>
<body>
functionvaciar(control)
{
control.value='';
}
functionverificarEntrada(control)
{
if(control.value=='')
alert('Debeingresardatos');
}
</script>
<form>
<inputtype="text"id="nombre"
onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"
value="nombre"><br>
79
<inputtype="text"id="edad"
onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"value="mail">
<br>
<inputtype="button"value="Confirmar">
</form>
</body>
</html>
A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur.
Tambin cargamos las propiedad value para mostrar un texto dentro del
control. Le indicamos, para el evento onFocus la funcin vaciar, pasando
como parmetro la palabra clave this que significa la direccin del objeto
que emiti el evento. En la funcin propiamente dicha, accedemos a la
propiedad value y borramos su contenido. Esto nos permite definir una
nica funcin para vaciar los dos controles.
De forma similar, para el evento onBlur llamamos a la funcin
verificarEntrada donde analizamos si se ha ingresado algn valor dentro del
control, en caso de tener un string vaco procedemos a mostrar una ventana
de alerta.
PROBLEMA
1. Solicitar que se ingrese el nombre y la clave de un usuario.

Mostrar una ventana de alerta si en la clave se ingresan menos de
7 caracteres o ms de 20.
Problema1.
<html>
<head>
</head>
<body>
functionverificar(control)
80
{
if(control.value.length<7||
control.value.length>20)
{
alert('cantidaddecaracteresnovalidoenla
clave(debenserentre720caracteres)');
}
}
</script>
<form>
Ingresenombredeusuario:
<inputtype="text"id="usuario"><br>
Ingreseclave:
<inputtype="password"id="clave"
onBlur="verificar(this)"><br>
<inputtype="button"value="confirmar">
</form>
</body>
</html>
Eventos onMouseOver y onMouseOut
El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse

sobre un elemento HTML y el evento onMouseOut cuando la flecha
abandona el mismo.
Para probar estos eventos implementaremos una pgina que cambie el

color de fondo del documento.
Implementaremos una funcin que cambie el color con un valor que llegue
como parmetro. Cuando retiramos la flecha del mouse volvemos a pintar
de blanco el fondo del documento:
<html>
<head></head>
<body>
81
functionpintar(col)
{
document.bgColor=col;
}
</script>
<ahref="pagina1.html"
onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
onMouseOver="pintar('#00ff00')"
onMouseOut="pintar('#ffffff')">Verde</a>
onMouseOver="pintar('#0000ff')"
onMouseOut="pintar('#ffffff')">Azul</a>
</body>
</html>
Las llamadas a las funciones las hacemos inicializando las propiedades
onMouseOver y onMouseOut:
<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
La funcin 'pintar' recibe el color e inicializa la propiedad bgColor del objeto
document.
function pintar(col)
{
document.bgColor=col;
}
Otro problema que podemos probar es pinta de color el interior de una
casilla de una tabla y regresar a su color original cuando salimos de la
misma:
<html>
<head></head>
82
<body>
functionpintar(objeto,col)
{
objeto.bgColor=col;
}
</script>
<tableborder="1">
<tr>
<tdonMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">rojo</td>
<tdonMouseOver="pintar(this,'#00ff00')"
onMouseOut="pintar(this,'#ffffff')">verde</td>
<tdonMouseOver="pintar(this,'#0000ff')"
onMouseOut="pintar(this,'#ffffff')">azul</td>
</tr>
</table>
</body>
</html>
La lgica es bastante parecida a la del primer problema, pero en ste, le
pasamos como parmetro a la funcin, la referencia a la casilla que
queremos que se coloree (this):
<td onMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">rojo</td>
PROBLEMA
1. Modificar el segundo problema resuelto (las casillas de la

tabla que cambian el color cuando ingresamos con el mouse) para
permitir llamar mediante hipervnculos a distintos programas que
administran web-mail (gmail, hotmail y yahoo)
Problema1.
83
<html>
<head></head>
<body>
functionpintar(objeto,col)
{
objeto.bgColor=col;
}
</script>
<tableborder="1">
<tr>
<tdonMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">
<ahref="http://www.hotmail.com">Hotmail</a>
</td>
<tdonMouseOver="pintar(this,'#00ff00')"
<ahref="http://www.yahoo.com">Yahoo</a>
</td>
<tdonMouseOver="pintar(this,'#0000ff')"
<ahref="http://www.gmail.com">GMail</a>
</td>
</tr>
</table>
</body>
</html>
Evento onLoad
El evento onLoad se ejecuta cuando cargamos una pgina en el navegador.

Uno de los usos ms frecuentes es para fijar el foco en algn control de un
formulario, para que el operador no tenga que activar con el mouse dicho
control.
Este evento est asociado a la marca body.
La pgina completa es:
84
<html>
<head></head>
<bodyonLoad="activarPrimerControl()">
functionactivarPrimerControl()
{
document.getElementById('nombre').focus();
}
</script>
<form>
Ingresesunombre:
Ingresesuedad:
<inputtype="text"id="edad"><br>
<inputtype="button"value="Confirmar">
</form>
</body>
</html>
En la marca body inicializamos el evento onLoad con la llamada a la funcin
activarPrimerControl:
<body onLoad="activarPrimerControl()">
La funcin da el foco al control text donde se cargar el nombre:
function activarPrimerControl()
{
document.getElementById('nombre').focus();
}
PROBLEMA
1. Confeccionar una pgina que muestre un mensaje con la

funcin alert inmediatamente despus que se cargue.
Problema1.
85
<html>
<head>
</head>
<bodyonLoad="mostrarMensaje()">
functionmostrarMensaje()
{
alert('Lapginaestcargada');
}
</script>
<h1>Bienvenidos</h1>
</body>
</html>
El objeto window.
Al objeto window lo hemos estado usando constantemente. Representa la

ventana del navegador.
window es un objeto global y tiene los siguienes mtodos:
alert: Muestra un dilogo de alerta con un mensaje
(a esta responsabilidad la hemos utilizado desde los primeros
temas)
prompt: Muestra un dilogo para la entrada de un valor de tipo string
(utilizado desde el primer momento)
confirm: Muestra un dilogo de confirmacin con los botones Confirmar y
Cancelar.
open y close: abre o cierra una ventana del navegador.
Podemos especificar el tamao de la ventana, su contenido, etc.
[Variable=][window.]open(URL, nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener
acceso a ella
desde la ventana donde la creamos, deberemos asignarle una
variable,
sino simplemente invocamos el mtodo: el navegador automticamente
sabr
que pertenece al objeto window.
86
El parmetro URL es una cadena que contendr la direccin de la
ventana
que estamos abriendo: si est en blanco, la ventana se abrir con
una pgina
en blanco.
Las propiedades son una lista, separada por comas, de algunos de
los
siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Es bueno hacer notar que a todas estas funciones las podemos llamar
anteponindole el nombre del objeto window, seguida del mtodo o en
forma resumida indicando solamente el nombre del mtodo (como lo hemos
estado haciendo), esto es posible ya que el objeto window es el objeto de
mximo nivel.
Ej:
valor=window.prompt("Ingrese valor","");
o
valor=prompt("Ingrese valor","");
Para reducir la cantidad de caracteres que se tipean normalmente
encontraremos los programas tipeados de la segunda forma.
El siguiente programa muestra varios de los mtodos disponibles del objeto

window:
<html>
<head></head>
<body>
functionabrir()
{
varventana=open();
ventana.document.write("Estoyescribiendo
enlanuevaventana<br>");
ventana.document.write("Segundalinea");
87
}
functionabrirParametros()
{
var
ventana=open('','','status=yes,width=400,height
=250,menubar=yes');
ventana.document.write("Estoesloprimero
queaparece<br>");
}
functionmostrarAlerta()
{
alert("Estaventanadealertayala
utilizamosenotrosproblemas.");
}
functionconfirmar()
{
varrespuesta=confirm("Presionealgunode
losdosbotones");
if(respuesta==true)
alert("presionaceptar");
else
alert("presioncancelar");
}
functioncargarCadena()
{
varcad=prompt("cargueunacadena:","");
alert("Ustedingreso"+cad);
}
</script>
88
Esteprogramapermiteanalizarlallamadaa
distintasresponsabilidadesdelobjeto
window.<br>
<form>
<br>
<inputtype="button"value="open()"
onClick="abrir()">
<br>
<inputtype="button"value="opencon
parmetros"onClick="abrirParametros()">
<br>
<inputtype="button"value="alert"
onClick="mostrarAlerta()">
<br>
<inputtype="button"value="confirm"
onClick="confirmar()">
<br>
<inputtype="button"value="prompt"
onClick="cargarCadena()">
</form>
</body>
</html>
PROBLEMA
1. Confeccionar una pgina que permita abrir otra ventana

cuando se presiona un botn. Dicha ventana debe tener como
ancho 600 pixeles y alto 300 pixeles.
Problema1.
<html>
<head>
89
</head>
<body>
functionabrirVentana()
{
varventana=open('','','width=600,height=300');
}
</script>
<form>
<inputtype="button"value="abrirventana"
onClick="abrirVentana()">
</form>
</body>
</html>
90

Javascript S

Cargado por

Copyright:

Formatos disponibles

Javascript S

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript S

Cargado por

Copyright:

Formatos disponibles

Qu es JavaScript?

Nuestro primer programa ser el famoso "Hola Mundo", es decir un

El programa en JavaScript debe ir encerrado entre la marca script e

Para imprimir caracteres sobre la pgina debemos llamar al comando 'write'

ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE

Una variable es un depsito donde hay un valor. Consta de un nombre y

Eleccin del nombre de una variable:

Impresin de variables en una pgina HTML.

Es decir que se muestran los contenidos de las 4 variables. Una variable es

Entrada de datos por teclado.

Estructuras secuenciales de programacin.

Cuando en un problema slo participan operaciones, entradas y salidas se

Es de fundamental importancia realizar los programas. Viendo slo

1. Realizar la carga del lado de un cuadrado, mostrar por

Estructuras condicionales simples.

No todos los problemas pueden resolverse empleando estructuras

Por supuesto que en un problema se combinan estructuras secuenciales y

1. Se ingresan tres notas de un alumno, si el promedio es

El operador &&, traducido se lo lee como "Y". Se emplea cuando en una

1. Realizar un programa que pida cargar una fecha cualquiera,

Operadores lgicos || (o) en las estructuras condicionales.

Traducido se lo lee como "O". Si la condicin 1 es Verdadera o la condicin

1. Se ingresan por teclado tres nmeros, si al menos uno de

Estructura repetitiva (while)

Hasta ahora hemos empleado estructuras SECUENCIALES y

Una ejecucin repetitiva de sentencias se caracteriza por:

Funcionamiento del while: En primer lugar se verifica la condicin, si la

Importante: Si la condicin siempre retorna verdadero estamos en presencia

Sin conocer las estructuras repetitivas podemos resolver el problema

La operacin x = x + 1 se lee como "en la variable x se guarda el contenido

Al finalizar el bloque de instrucciones que contiene la estructura repetitiva,

Lo ms difcil es la definicin de la condicin de la estructura while y qu

No existe una RECETA para definir una condicin de una estructura

Una vez planteado el programa debemos verificar si el mismo es una

1. Realizar un programa que imprima 25 trminos de la serie 11

Estructura repetitiva (for)

Cualquier problema que requiera una estructura repetitiva se puede resolver

Ejemplo: Mostrar por pantalla los nmeros del 1 al 10.

3. Desarrollar un programa que muestre la tabla de multiplicar

Estructura repetitiva (do/while)

La sentencia do/while es otra estructura repetitiva, la cual ejecuta al menos

Problema: Escribir un programa que solicite la carga de un nmero entre 0 y

1. Realizar un programa que acumule (sume) valores

Un vector es una estructura de datos que permite almacenar un

Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y

Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los

1. Desarrollar un programa que permita ingresar un vector de 8

El uso de Javascript en los formularios HTML se hace fundamentalmente

1. Crear un formulario con tres botones con las leyendas "1",

Controles FORM, BUTTON y TEXT.

1. Crear un programa que permita cargar un entero en un text

Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental

La mayora de las veces este dato se procesa en el servidor. Pero podemos

1. Disponer dos campos de texto tipo password. Cuando se

Para determinar la posicin del ndice seleccionado en la lista:

Hay problemas en los que solamente necesitaremos el string almacenado

Donde Rojo es el string que se visualiza en el objeto SELECT y value es el

Analizando la funcin cambiarColor() podemos ver cmo obtenemos los

1. Confeccionar una pgina que muestre un objeto SELECT con