JavaScript, al igual que Flash, Visual Basic Script, es una de las múltiples maneras que

han surgido para extender las capacidades del lenguaje HTML (lenguaje para el diseño de
páginas de Internet). Al ser la más sencilla, es por el momento la más extendida.
JavaScript no es un lenguaje de programación 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 cálculo. 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 programación en el servidor
con Node.js
JavaScript es un lenguaje interpretado que se embebe en una página 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 type="text/javascript">

</script>

Para imprimir caracteres sobre la página debemos llamar al comando 'write' del objeto
document. La información a imprimirse debe ir entre comillas y encerrada entre
paréntesis. Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página
HTML.
Es decir, si pedimos al navegador que ejecute esta página mostrará el texto 'Hola Mundo'.
Cada vez que escribimos una instrucción finalizamos con el carácter 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).
Nos acostumbraremos a prestar atención cada vez que escribamos en minúsculas o
mayúsculas para no cometer errores sintácticos. Ya veremos que los nombres de
funciones llevan letras en mayúsculas.

Variables.

Una variable es un depósito donde hay un valor. Consta de un nombre y
pertenece a un tipo (númerico, 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 lógicos (true,false)
Existen otros tipos de variables que veremos más adelante.

Las variables son nombres que ponemos a los lugares donde almacenamos
la información. En JavaScript, deben comenzar por una letra o un
subrayado (_), pudiendo haber además dígitos entre los demás caracteres.
Una variable no puede tener el mismo nombre de una palabra clave del
lenguaje.
Una variable se define anteponiéndole la palabra clave var:
var dia;
se pueden declarar varias variables en una misma línea:
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;

Elección del nombre de una variable:
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 elección 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 olvidaríamos.

Impresión de variables en una página HTML.
Para mostrar el contenido de una variable en una página utilizamos el objeto
document y llamamos a la función write.
En el siguiente ejemplo definimos una serie de variables y las mostramos en
la página:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var nombre='Juan';
var edad=10;
var altura=1.92;
var casado=false;
document.write(nombre);
document.write('<br>');
document.write(edad);
document.write('<br>');
document.write(altura);
document.write('<br>');
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
no deben ir encerradas entre comillas. Cada instrucción finaliza con un

punto y coma.
Las variables de tipo boolean pueden almacenar solo dos valores: true o
false.
El resultado al visualizar la página debe ser 4 líneas 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 página debemos utilizar la
función 'write' que pertenece al objeto document. Recordemos que el
lenguaje JavaScript es sensible a mayúsculas y minúsculas y no será lo
mismo si tipeamos:
Document.Write(nombre);
Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d
minúscula), lo mismo no existe la función 'Write' sino 'write', este es un error
muy común cuando comenzamos a programar en JavaScript

Entrada de datos por teclado.

Para la entrada de datos por teclado tenemos la función prompt. Cada vez
que necesitamos ingresar un dato con esta función, aparece una ventana
donde cargamos el valor. Hay otras formas más sofisticadas para la entrada
de datos en una página HTML, pero para el aprendizaje de los conceptos
básicos de JavaScript nos resultará más práctica esta función.
Para ver su funcionamiento analicemos este ejemplo:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var nombre;

var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
</body>
</html>
La sintaxis de la función prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la
ventana>,<valor
inicial a mostrar en la ventana>);
La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor
inicial a mostrar.
Estructuras secuenciales de programación.

Cuando en un problema sólo 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 números por teclado e imprimir su suma y su producto:
<html>
<head>
<script type="text/javascript">
var valor1;
var valor2;
valor1=prompt('Ingrese primer número:','');
valor2=prompt('Ingrese segundo número','');
var suma=parseInt(valor1)+parseInt(valor2);
var
producto=parseInt(valor1)*parseInt(valor2);
document.write('La suma es ');
document.write(suma);
document.write('<br>');

document.write('El producto es ');
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 numéricos ingresados por
teclado, debemos llamar a la función parseInt y pasar como parámetro las
variables valor1 y valor2 sucesivamente. Con esto logramos que el operador
más, sume las variables como enteros y no como cadenas de caracteres. Si
por ejemplo sumamos 1 + 1 sin utilizar la función 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 más 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.

Estructuras condicionales simples.

No todos los problemas pueden resolverse empleando estructuras
secuenciales. Cuando hay que tomar una decisión 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 pantalón ?
¿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 mañana, tarde o noche ?

Por supuesto que en un problema se combinan estructuras secuenciales y
condicionales.
Cuando se presenta la elección tenemos la opción de realizar una actividad
o no realizarla.
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:

write(nombre). nombre=prompt('Ingrese nombre:'. La condición debe ir entre paréntesis. Estructuras condicionales compuestas.''). nota=prompt('Ingrese su nota:'.write(' esta aprobado con un ').''). document. Otra cosa que hemos incorporado es el operador + para cadenas de caracteres: document.write(nombre+' esta aprobado con un '+nota). . recordemos que veníamos haciéndolo de la siguiente forma: document. Con esto hacemos más corto la cantidad de líneas de nuestro programa. if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota). } </script> </body> </html> Aparece la instrucción if en el lenguaje JavaScript. var nota. 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 condición del if deben intervenir una variable un operador relacional y otra variable o valor fijo. Si la condición se verifica verdadera se ejecuta todas las instrucciones que se encuentran encerradas entre las llaves de apertura y cerrado seguidas al if. document.write(nota).<html> <head> </head> <body> <script type="text/javascript"> var nombre.

Más adelante veremos qué sucede cuando preguntamos cuál de dos string es mayor. tanto por la rama del verdadero como por la rama del falso. num2=prompt('Ingrese el segundo número:'. num1=parseInt(num1). if (num1>num2) { document. num2=parseInt(num2). En una estructura condicional compuesta tenemos entradas.''). Lo más importante que hay que tener en cuenta es que se realizan las actividades de la rama del verdadero o las del falso. Es decir tenemos actividades por el verdadero y por el falso de la condición.''). } else { document. Ejemplo: Realizar un programa que lea dos números distintos y muestre el mayor de ellos: <html> <head> </head> <body> <script type="text/javascript"> var num1. salidas.write('el mayor es '+num2). num1=prompt('Ingrese el primer número:'.num2. En el lenguaje JavaScript una variable puede ir cambiando el tipo de dato que almacena a lo largo de la ejecución del programa. Estamos en presencia de una ESTRUCTURA CONDICIONAL . } </script> </body> </html> La función prompt retorna un string por lo que debemos convertirlo a entero cuando queremos saber cual de los dos valores es mayor numéricamente.Cuando se presenta la elección tenemos la opción de realizar una actividad u otra.write('el mayor es '+num1). operaciones. NUNCA se realizan las actividades de las dos ramas.

nota2=prompt('Ingrese 2da.nota2. Si el promedio es <4 mostrar "Reprobado".''). nota:'. nota:'. Solución: <html> <head> </head> <body> <script type="text/javascript"> var nota1. Si el promedio es >=4 y <7 mostrar "Regular". nota:'.''). .nota3. //Convertimos los 3 string en enteros nota1=parseInt(nota1). La estructura condicional compuesta tiene la siguiente codificación: if (<condición>) { <Instruccion(es)> } else { <Instruccion(es)> } Es igual que la estructura condicional simple salvo que aparece la palabra clave ?else? y posteriormente un bloque { } con una o varias instrucciones.COMPUESTA ya que tenemos actividades por la rama del verdadero y del falso. en caso que la condición resulte falsa se ejecuta la instrucción o bloque de instrucciones que indicamos después del else. nota3=prompt('Ingrese 3ra.''). Estructuras condicionales anidadas. Ejemplo: Confeccionar un programa que pida por teclado tres notas de un alumno. nota2=parseInt(nota2). calcule el promedio e imprima alguno de estos mensajes: Si el promedio es >=7 mostrar "Promocionado". Si la condición del if es verdadera se ejecuta el bloque que aparece después de la condición. nota1=prompt('Ingrese 1ra. nota3=parseInt(nota3). Decimos que una estructura condicional es anidada cuando por la rama del verdadero o el falso de una estructura condicional hay otra estructura condicional.

Los comentarios en JavaScript los hacemos disponiendo dos barras previas al comentario (los comentario en tiempo de ejecución no son tenidos en cuenta y tienen por objetivos de documentar el programa para futuras modificaciones): //Convertimos los 3 string en enteros Si queremos disponer varias líneas de comentarios tenemos como alternativa: . por la rama del falso aparece otra estructura condicional. var pro. } else { if (pro>=4) { document. pro=(nota1+nota2+nota3)/3.write('reprobado'). Se ingresan tres string por teclado que representan las notas de un alumno. En caso que la condición nos de falso. porque todavía debemos averiguar si el promedio del alumno es superior o igual a cuatro o inferior a cuatro. Primeramente preguntamos si el promedio es superior o igual a 7. if (pro>=7) { document.write('regular').write('promocionado'). } else { document. } } </script> </body> </html> Analicemos el siguiente programa. se transformas a variables enteras y se obtiene el promedio sumando los tres valores y dividiendo por 3 dicho resultado. en caso afirmativo por la rama del verdadero de la estructura condicional mostramos un mensaje que indique 'Promocionado' (con comillas indicamos un texto que debe imprimirse en pantalla).

num2=prompt('Ingrese segundo número:'. linea de comentario 2. Cuando vinculamos dos o más condiciones con el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura condicional. plantear algoritmos más cortos y comprensibles. . num2=parseInt(num2). num3=prompt('Ingrese tercer número:'.'').num3.write('el mayor es el '+num1). if (num1>num2 && num1>num3) { document.''). Recordemos que la condición debe ir entre paréntesis en forma obligatoria. Veamos un ejemplo: Confeccionar un programa que lea por teclado tres números distintos y nos muestre el mayor de ellos.num2.write('el mayor es el '+num2). <html> <head> </head> <body> <script type="text/javascript"> var num1. Se emplea cuando en una estructura condicional se disponen dos condiciones. num3=parseInt(num3). } else { if (num2>num3) { document. traducido se lo lee como "Y". El operador &&. */ Es decir encerramos el bloque con los caracteres /* */ Operadores lógicos && (y) en las estructuras condicionales. La utilización de operadores lógicos permiten en muchos casos. num1=prompt('Ingrese primer número:'. etc. num1=parseInt(num1).'')./* linea de comentario 1.

Recordemos que la condición debe ir entre paréntesis en forma obligatoria. Si una de las condiciones simples da falso. traducido se lo lee como "Y".write('el mayor es el '+num3). Veamos un ejemplo: Confeccionar un programa que lea por teclado tres números distintos y nos muestre el mayor de ellos. La utilización de operadores lógicos permiten en muchos casos. Operadores lógicos && (y) en las estructuras condicionales. <html> <head> </head> <body> . En caso de ser Falsa la condición de la rama del falso. plantear algoritmos más cortos y comprensibles. no se requieren operadores lógicos. } } </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. El operador &&. } else { document. analizamos el contenido de num2 y num3 para ver cual tiene un valor mayor. la CONDICION COMPUESTA da Falso y continúa por la rama del falso. Se emplea cuando en una estructura condicional se disponen dos condiciones. Es decir que se mostrará el contenido de num1 si y sólo si num1>num2 y num1>num3. al haber una condición simple. Cuando vinculamos dos o más condiciones con el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura condicional. En esta segunda estructura condicional.

num3=prompt('Ingrese tercer número:'. En caso de ser Falsa la condición de la rama del falso. analizamos el contenido de num2 y num3 para ver cual tiene un valor mayor. Es decir que se mostrará el contenido de num1 si y sólo si num1>num2 y num1>num3.write('el mayor es el '+num1). num2=prompt('Ingrese segundo número:'.''). Si una de las condiciones simples da falso.''). } } </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.write('el mayor es el '+num3).num3.write('el mayor es el '+num2). la CONDICION COMPUESTA da Falso y continúa por la rama del falso. num3=parseInt(num3). num2=parseInt(num2). num1=prompt('Ingrese primer número:'. num1=parseInt(num1). if (num1>num2 && num1>num3) { document.'').<script type="text/javascript"> var num1. } else { document. } else { if (num2>num3) { document.num2. .

').write('debe ingresar un valor comprendido entre 1 y 5. break. break. Con un ejemplo sencillo veremos cual es su sintaxis. valor=prompt('Ingrese un valor comprendido entre 1 y 5:'. default:document. //Convertimos a entero valor=parseInt(valor). no se requieren operadores lógicos. } </script> </body> .write('tres'). break. Estructuras switch. case 4: document. case 3: document. break. Luego mostrar en castellano el valor ingresado. Confeccionar un programa que solicite que ingrese un valor entre 1 y 5. De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es igual a cierto valor. break. case 2: document.write('dos').write('cuatro').write('cinco'). al haber una condición simple. case 5: document.En esta segunda estructura condicional.''). Mostrar un mensaje de error en caso de haber ingresado un valor que no se encuentre en dicho rango.write('uno'). switch (valor) { case 1: document. La instrucción switch es una alternativa para remplazar los if/else if. <html> <head> </head> <body> <script type="text/javascript"> var valor. No podemos preguntar por mayor o menor.

bgColor='#ff0000'. break.bgColor='#00ff00'. break. case 'verde': document. luego pintar el fondo de la ventana con dicho color: <html> <head> </head> <body> <script type="text/javascript"> var col. De todos modos el default es opcional en esta instrucción. . break. switch (col) { case 'rojo': document.</html> Debemos tener en cuenta que la variable que analizamos debe ir después de la instrucción switch entre paréntesis. verde o azul). azul)' . en caso de verificar dicho valor la variable que analiza el switch. Es importante disponer la palabra clave 'break' al finalizar cada caso. La instrucciones que hay después de la palabra clave 'default' se ejecutan en caso que la variable no se verifique en algún case.bgColor='#ff0000'. Ingresar por teclado el nombre de un color (rojo.''). verde. col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo. } </script> </body> </html> Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar: case 'rojo': document.bgColor='#0000ff'. case 'azul': document. las instrucciones a ejecutar. break. Cada valor que se analiza debe ir luego de la palabra clave 'case' y seguido a los dos puntos. Plantearemos un segundo problema para ver que podemos utilizar variables de tipo cadena con la instrucción switch.

nunca finalizará el programa. El bloque se repite MIENTRAS la condición sea Verdadera. si la misma resulta verdadera se ejecutan las operaciones que indicamos entre las llaves que le siguen al while. Estructura repetitiva (while) Hasta ahora hemos empleado estructuras SECUENCIALES y CONDICIONALES. Importante: Si la condición siempre retorna verdadero estamos en presencia de un ciclo repetitivo infinito. Ejemplo: Realizar un programa que imprima en pantalla los números del 1 al 100. verde y azul). Pero esta solución es muy larga.La o las sentencias que se repiten.Para cambiar el color de fondo de la ventana debemos asignarle a la propiedad bgColor del objeto document el color a asignar (el color está formado por tres valores hexadecimales que representan la cantidad de rojo. incrementamos nuevamente la variable y así sucesivamente. La mejor forma de resolver este problema es emplear una estructura repetitiva: <html> <head> . Dicha situación es un error de programación. En caso que la condición sea Falsa continúa con la instrucción siguiente al bloque de llaves. Una ejecución repetitiva de sentencias se caracteriza por: . luego imprimimos la variable. Existe otro tipo de estructuras tan importantes como las anteriores que son las estructuras REPETITIVAS. Inicializamos una variable con el valor 1. Sin conocer las estructuras repetitivas podemos resolver el problema empleando una estructura secuencial. Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones varias veces. Funcionamiento del while: En primer lugar se verifica la condición. .El test o prueba de condición antes de cada repetición. que motivará que se repitan o no las sentencias. luego 00 para verde y azul (podemos utilizar algún software de graficación para que nos genere los tres valores). en este caso al valor de rojo le asignamos ff (255 en decimal) es decir el valor máximo posible.

Es muy importante analizar este programa: La primera operación inicializa la variable x en 1. x=1. x=x+1.write(x). El bloque de instrucciones contiene dos salidas al documento y una operación. uno en cada línea. si x contiene 1 luego de ejecutarse esta operación se almacenará en x un 2. se sale de la estructura repetitiva y continúa el algoritmo. se ejecuta el bloque de instrucciones. Al ejecutarse la condición. en este caso. retorna VERDADERO. } </script> </body> </html> Para que se impriman los números. seguidamente comienza la estructura repetitiva while y disponemos la siguiente condición ( x <= 100). finaliza el programa. Al finalizar el bloque de instrucciones que contiene la estructura repetitiva. Es decir. se lee MIENTRAS la variable x sea menor o igual a 100. Lo más difícil es la definición de la condición de la estructura while y qué .write('<br>'). Mientras la condición retorne verdadero. document. La operación x = x + 1 se lee como "en la variable x se guarda el contenido de x más 1". Se imprime el contenido de x y seguidamente se incrementa la variable x en uno.</head> <body> <script type="text/javascript"> var x. se verifica nuevamente la condición de la estructura repetitiva y se repite el proceso explicado anteriormente. porque el contenido de x (1) es menor o igual a 100. agregamos la marca HTML de <br>. Al ser la condición verdadera se ejecuta el bloque de instrucciones que contiene la estructura while. al retornar falso la verificación de la condición. while (x<=100) { document.

Probemos algunas modificaciones de este programa y veamos qué cambios se deberían hacer para: 1 . 4 . . Una vez planteado el programa debemos verificar si el mismo es una solución válida al problema (en este caso se deben imprimir los números del 1 al 100 en la página). No existe una RECETA para definir una condición de una estructura repetitiva.Imprimir los números del 1 al 500.Imprimir los números del 50 al 100. 2 . La variable x debe estar inicializada con algún valor antes que se ejecute la operación x = x + 1.100).. Problema: Desarrollar un programa que permita la carga de 5 valores por teclado y nos muestre posteriormente la suma. Explicaremos el concepto de un acumulador con un ejemplo.8 . Observar que si. Importante: Podemos observar que el bloque repetitivo puede no ejecutarse si la condición retorna falso la primera vez. disponemos la condición x >=100 ( si x es mayor o igual a 100) no provoca ningún error sintáctico pero estamos en presencia de un error lógico porque al evaluarse por primera vez la condición retorna falso y no se ejecuta el bloque de instrucciones que queríamos repetir 100 veces. 100 101 Cuando x vale 101 la condición de la estructura repetitiva retorna falso. por ejemplo.bloque de instrucciones se va a repetir.Imprimir los números del 2 al 100 pero de 2 en 2 (2.4. Concepto de acumulador. solucionando problemas. El contador x nos indica en cada momento la cantidad de valores impresos en la página. 3 . en este caso finaliza el diagrama. La variable x recibe el nombre de CONTADOR.. sino que se logra con una práctica continua.. para ello podemos hacer un seguimiento del flujo del diagrama y los valores que toman las variables a lo largo de la ejecución: x 1 2 3 4 . <html> .Imprimir los números del -50 al 0. Un contador es un tipo especial de variable que se incrementa o decrementa con valores constantes durante la ejecución del programa.6.

</script> </body> </html> En este problema. a semejanza de los anteriores. suma=suma+valor. Cada ciclo que se repita la estructura repetitiva. } document. También aparece el concepto de ACUMULADOR (un acumulador es un tipo especial de variable que se incrementa o decrementa con valores variables durante la ejecución del programa). var suma=0. valor=parseInt(valor). Los números que toma la variable valor dependerá de qué cifras cargue el operador durante la ejecución del programa. x=x+1.<head> </head> <body> <script type="text/javascript"> var x=1. while (x<=5) { valor=prompt('Ingrese valor:'. Hemos dado el nombre de suma a nuestro acumulador. La prueba del diagrama se realiza dándole valores a las variables: valor suma x 0 0 (Antes de entrar a la estructura repetitiva estos son los valores). llevamos un CONTADOR llamado x que nos sirve para contar las vueltas que debe repetir el while. 5 5 1 16 21 2 7 28 3 10 38 4 2 40 5 Este es un seguimiento del programa planteado.write("La suma de los valores es "+suma+"<br>").''). Hay que tener en cuenta que cuando en la variable valor se carga el primer . var valor. la variable suma se incrementa con el contenido ingresado en la variable valor.

a diferencia del while que está en la parte superior. Esta estructura repetitiva se utiliza cuando conocemos de antemano que por lo menos una vez se ejecutará el bloque repetitivo. . <html> <head> </head> <body> <script type="text/javascript"> var valor. Finalizar el programa cuando se cargue el valor 0. } else { if (valor<100) { document. al cargarse el segundo valor (16). document. el valor anterior 5 se pierde. es decir igual que el while. y nos muestre un mensaje de cuántos dígitos tiene el mismo. valor=parseInt(valor). por ello la necesidad de ir almacenando en la variable suma el valor acumulado de los valores ingresados. do { valor=prompt('Ingrese un valor entre 0 y 999:'.write('El valor '+valor+' tiene '). Finaliza la ejecución del bloque repetitivo cuando la condición retorna falso.write('Tiene 1 digitos').''). la cual ejecuta al menos una vez su bloque repetitivo.write('Tiene 2 digitos').valor (en este ejemplo es el valor 5). Estructura repetitiva (do/while) La sentencia do/while es otra estructura repetitiva. a diferencia del while que puede no ejecutar el bloque. La condición de la estructura está abajo del bloque a repetir. if (valor<10) { document. Problema: Escribir un programa que solicite la carga de un número entre 0 y 999.

</script> </body> </html> En este problema por lo menos se carga un valor. . Ejemplo: cargar 10 números. Por lo general se inicializa una variable. } while(valor!=0). etc. hay que decir que la ejecución de la sentencia break dentro de cualquier parte del bucle provoca la salida inmediata del mismo. ingresar 5 notas de alumnos. Pero hay otra estructura repetitiva cuyo planteo es más sencillo en ciertas situaciones. si es mayor a 10 pero menor a 100 se trata de un valor de dos dígitos. en caso contrario se trata de un valor de tres dígitos. } else { document. <Condición> . <Incremento o Decremento>) { <Instrucciones> } Esta estructura repetitiva tiene tres argumentos: variable de inicialización.El segundo paso es evaluar la (Condición).write('Tiene 3 digitos'). } } document.Primero se ejecuta por única vez el primer argumento . Sintaxis: for (<Inicialización> . . Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones. en caso de ser verdadera se ejecuta el bloque. Conocemos de antemano la cantidad de veces que queremos que el bloque se repita. en caso contrario continúa el programa. Si se carga un valor menor a 10 se trata de un número de una cifra. Funcionamiento: . condición y variable de incremento o decremento. Estructura repetitiva (for) Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while. Este bloque se repite mientras se ingresa en la variable 'valor' un número distinto a 0. Por último.write('<br>').

<html> <head> </head> <body> <script type="text/javascript"> var f.que decrementa en uno una variable). lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces . Funciones En programación es muy frecuente que un determinado procedimiento de cálculo definido por un grupo de sentencias tenga que repetirse varias veces.El cuarto paso es ejecutar el tercer argumento (Incremento o Decremento). Ejemplo: Mostrar por pantalla los números del 1 al 10. . } </script> </body> </html> Inicialmente f se la inicializa con 1. Como la condición 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). hubiera sido lo mismo poner f=f+1 pero este otro operador matemático nos simplifica las cosas. .El tercer paso es la ejecución de las instrucciones. ya sea en un mismo programa o en otros programas. Este tipo de estructura repetitiva se utiliza generalmente cuando sabemos la cantidad de veces que deseamos que se repita el bloque. Importante: Tener en cuenta que no lleva punto y coma al final de los tres argumentos del for. .f++) { document. por lo que el navegador no avisará.Luego se repiten sucesivamente del Segundo al Cuarto Paso. for(f=1.write(f+" "). 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 -. El disponer un punto y coma provoca un error lógico y no sintáctico.f<=10.

es escribir aquellos grupos de sentencias una sola y única vez bajo la forma de una FUNCION. Con funciones podemos segmentar un programa en varias partes. imprimirla. planteamos un algoritmo. Hasta ahora hemos visto como resolver un problema planteando un único algoritmo. argumento n) { <código de la función> } Debemos buscar un nombre de función que nos indique cuál es su objetivo (Si la función recibe un string y lo centra. Las funciones son los únicos tipos de subprogramas que acepta JavaScript. argumento2. Un programa es una cosa compleja de realizar y por lo tanto es importante que esté bien ESTRUCTURADO y también que sea inteligible para las personas.aparezca dicho proceso.. Con el nombre llamamos a la función. puede tener o no parámetros. La herramienta más potente con que se cuenta para facilitar. aunque resulte que sólo se le llame o use una vez. es decir. Podemos cargar una variable. Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto: 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' La solución sin emplear funciones es: . etc. Frente a un problema. etc. Incluso los programas más sencillos tienen la necesidad de fragmentarse. Los parámetros son valores que se envían y son indispensables para la resolución del mismo. Si un grupo de sentencias realiza una tarea bien definida. Consta de un nombre y parámetros. consultarla. Una función es un conjunto de instrucciones que resuelven una parte del problema y que puede ser utilizado (llamado) desde diferentes partes de un programa. hacemos referencia a la misma. Veremos que una función puede variar bastante en su estructura. La función realizará alguna operación con los parámetros que le enviamos. reducir y dividir el trabajo en programación. . modificarla. éste puede constar de pequeños algoritmos. entonces puede estar justificado el aislar estas sentencias formando una función. Tienen la siguiente estructura: function <nombre de función>(argumento1. tal vez deberíamos llamarla centrarTitulo).. retornar un valor..

mostrarMensaje().<html> <head> </head> <body> <script type="text/javascript"> document. document. mostrarMensaje().write("Ingrese su documento correctamente<br>"). document.write("Cuidado<br>").write("Ingrese su documento correctamente<br>"). . document.write("Cuidado<br>"). document.write("Ingrese su documento correctamente<br>"). document. </script> </body> </html> Empleando una función: <html> <head> </head> <body> <script type="text/javascript"> function mostrarMensaje() { document. document.write("Cuidado<br>"). } mostrarMensaje().write("Cuidado<br>").write("Ingrese su documento correctamente<br>").

x2) { var inicio. Es importante notar que para que una función se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()).</script> </body> </html> Recordemos que JavaScript es sensible a mayúsculas y minúsculas. una función que tiene datos de entrada.inicio++) { document. Funciones con parámetros.write(inicio+' '). <html> <head> </head> <body> <script type="text/javascript"> function mostrarComprendidos(x1.inicio<=x2. Si fijamos como nombre a la función mostrarTitulo (es decir la segunda palabra con mayúscula) debemos respetar este nombre cuando la llamemos a dicha función. Si no se llama a la función. Cargar por teclado esos dos valores. Las funciones nos ahorran escribir código que se repite con frecuencia y permite que nuestro programa sea más entendible. A una función la podemos llamar tantas veces como necesitemos. for(inicio=x1. } } . Cada vez que se llama una función se ejecutan todas las líneas contenidas en la misma. Explicaremos con un ejemplo. Ejemplo: Confeccionar una función que reciba dos números y muestre en la página los valores comprendidos entre ellos de uno en uno. las instrucciones de la misma nunca se ejecutarán.

. 'Perú'. 'Venezuela'. ARRAYS JAVASCRIPT (ARREGLOS). 'Chile'. valor1=prompt('Ingrese valor inferior:'. 'Colombia'. en JavaScript podemos trabajar con arrays (también llamados arreglos. var valor1. 'Colombia'. valor2=parseInt(valor2). O podemos hacerlo todo en una sola línea: var pais = ['Mexico'. Los arrays son de gran importancia ya que permiten organizar series de datos que comparten el mismo nombre pero se diferencian por un índice.valor2). 'Costa Rica']. 'Perú'. valor1=parseInt(valor1). 'Costa Rica']. vectores o matrices). 'Argentina'. 'Chile'. </script> </body> </html> El programa de JavaScript empieza a ejecutarse donde definimos las variables valor1 y valor2 y no donde se define la función. 'España'. Luego de cargar los dos valores por teclado se llama a la función mostrarComprendidos y le enviamos las variables valor1 y valor2. Es importante notar que a la función la podemos llamar la cantidad de veces que la necesitemos. 'Argentina'. Al igual que en la mayor parte de los lenguajes de programación. valor2=prompt('Ingrese valor superior:'. mostrarComprendidos(valor1. bien como array con un contenido inicial o bien como array vacío: var pais. Los nombres de los parámetros.valor2. Los parámetros x1 y x2 reciben los contenidos de las variables valor1 y valor2. DECLARACIÓN E INICIALIZACIÓN DE ARRAYS La declaración de un array se hace de misma forma que se declara cualquier variable: var nombreDelArray.''). El array adquiere condición de tal cuando la variable se inicializa con forma de array. en este caso se llaman x1 y x2. 'España'. en este caso le pasamos los valores valor1 y valor2.''). no necesariamente se deben llamar igual que las variables que le pasamos cuando la llamamos a la función. 'Venezuela'. pais = ['Mexico'.

ciudad[1] que tiene valor undefined. 'Santiago'. 'Mexico D. Ciudad[0] que tiene valor Buenos Aires. lo que dará lugar a que JavaScript no se ejecute. 'Santiago'. Un array puede inicializarse dejando ciertos índices sin un contenido definido. var capital = [ . 1 y 2. . pais[5]. ciudad[1] con valor México D. En este ejemplo fruta[0] no ha sido definido por lo que si intentamos invocarlo su valor es undefined. Esta declaración supone que el array capital tiene 4 elementos que son ciudad[0] con valor undefined. . 'Santiago'. pais[0] = 'Mexico'. Cada elemento tiene un índice. .F. Es válido: var pais = []. Por tanto los 8 elementos del array anterior son: pais[0]. Si queremos definir el array con un quinto elemento vacío se recomienda hacerlo así: var capital = [ . También sería posible hacerlo dejando una coma final libre pero esto es menos recomendable y en algunos navegadores puede dar lugar a errores: var capital = [ . 'Mexico D. "Madrid"]..'. . se deja un espacio separado por comas como en este ejemplo: var ciudad = ["Buenos Aires". En este caso se entiende que se añadirán contenidos a posteriori. Esta declaración supone que el array tiene 3 elementos. declarando el elemento de índice 3 sin haber definido los índices 0. . pais[2].'. undefined]. Por ejemplo: var capital = [ . ciudad[2] con valor undefined y ciuedad[3] con valor Santiago. 'Mexico D. no podemos empezar a usar índices asociados a la variable como si se tratara de un array. .F. pais[6] y pais[7]. pais[4]. Para ello. Los elementos no definidos toman valor “undefined”.]. Para que JavaScript comprenda que una variable es un array hay que indicárselo explícitamente. pais[3]. Una coma final no genera un nuevo elemento. 'Santiago']. Si lo hacemos se entiende como un error en el código. Sin embargo no es válido: var pais. pais[1]. ARRAYS CON ELEMENTOS SIN DEFINIR Podemos dar valor a un elemento de un array sin que los anteriores elementos estén definidos como hemos hecho en el ejemplo. También podemos inicializar un array vacío de dos formas distintas: var fruta = []. y ciudad [2] que tiene valor Madrid. var fruta = new Array(). Ambas expresiones tienen el mismo efecto: crean un array vacío.'. ].F.F.'. ¿Por qué? Porque en este código no hemos declarado explícitamente que pais sea un array.F. Por ejemplo fruta[3] = 'manzana'. 'Mexico D. . Si no lo hemos declarado. comenzando los índices por el número 0. En este caso la coma final es ignorada y el array sigue teniendo 4 elementos.En este ejemplo decimos que hemos declarado un array de 8 elementos. pais[0] = 'Mexico'.

Hemos definido mes[0] como undefined. Por ejemplo var mes = []. y por ello se dice que los arrays en JavaScript no tienen tipo. Normalmente los arrays contendrán elementos de un tipo. Los arrays por defecto siempre empiezan por el índice 0.length devuelve 26. mes[8]='agosto'.22. También sería posible definir doce variables como mes1. por ejemplo valores numéricos. Por tanto cuando tengamos que recorrer los meses no podremos hacerlo de forma automatizada usando índices. 33. mes8. mes[11]='noviembre'. pero en JavaScript no es así. mes2. 'nube'. ya que aquí no existen índices (aunque el nombre de la variable lleve un número eso no significa que ese número sea un índice). mes6. mes12. A diferencia de en otros lenguajes. oficina[25] = 'Oficial José Vargas Corononado’. En este array el elemento de índice cero es de tipo texto. ya que estas doce variables funcionan como variables que no tienen relación entre sí. mes[10]='octubre'. mes10. mes[1] = 'enero'. USO DE LOS ARRAYS Los arrays son de gran utilidad para automatizar los cálculos y procesos. mes5. mes[9]='septiembre'. Pero no pueden existir arrays que contengan indistintamente elementos de distinto tipo. o un array de cadenas de texto. será preferible usar un array a usar variables independientes. mes[4] = 'abril'. true. mes[6] = 'junio'. mes[5]='mayo'. el elemento de índice tres es un valor booleano. ¿Por qué? Porque en general es preferible dejar constancia de que si mes[0] tiene valor undefined es porque el programador ha decidido que sea así. sino que el número de elementos del array se ajusta dinámicamente según las necesidades. Por ejemplo un array puede ser un array de enteros. mes9. JavaScript admite que los elementos de un array sean elementos de naturaleza compleja (objetos). Si escribimos pais[40] cuando sólo hemos definido hasta el índice 7. PROPIEDAD LENGTH DE LOS ARRAYS La propiedad length de un array indica el número máximo de elementos en el array de acuerdo con el índice máximo existente (independientemente de que los elementos del array tengan contenido o no). 3. . Por ejemplo si definimos var oficina = []. Sin embargo esto es algo que desde el punto de vista de la programación es en general indeseable. mes[12]='diciembre'.33. etc. Por ejemplo se admite algo como esto: var datos = ['Frío'. mes11. false. TIPADO DE LOS ARRAYS En otros lenguajes de programación un array contiene un tipo de datos y se dice que el array es de ese tipo. o incluso que un elemento de un array sea otro array. la propiedad oficina. número de elementos para el array (de 1 a 25 más el correspondiente al 0). mes3. intentar acceder a un índice de array inexistente devuelve un error. mes[2]='febrero'.ACCESO A ÍNDICES NO EXISTENTES En otros lenguajes de programación. mes[3]='marzo'. el de índice 1 es un valor numérico. mes4. mes7. mes[0] = undefined. -11. mes[7]='julio'. el resultado es que pais[40] devuelve undefined. pero en ocasiones nos interesará que contengan elementos de distintos tipos. 'variado']. los arrays en JavaScript no tienen un número fijo de elementos. Esto sí es posible en JavaScript. de esta manera no hay duda respecto a que pueda ser un error o un olvido. por lo que siempre algo pueda expresarse con un nombre seguido de un índice. pero en determinadas ocasiones algunos programadores prescinden de ese índice.

'Venezuela'. mes =[]. msg = msg + 'En el índice 3 de datos tenemos: ' + datos[3] + ' y es un texto \n\n'. 'variado']. ejemplo [0]= 1. msg = 'El país de índice 2 es: ' + pais[2] + '\n\n'. alert('Contenido de ejemplo: '+ ejemplo). alert (msg).33. false. p. mes[4] = 'abril'. 33. fruta[30] = 'manzana'. 3.ej. msg2 = 'Mostramos el array país: ' + pais + '\n\n'.com</title> <meta charset="utf-8"> <script type="text/javascript"> function mostrarMensaje1() { var mes. msg2 = msg2 + 'Mostramos el array datos: ' + datos + '\n\n'. 'España'. msg2 = msg2 + 'Valor length en el array pais es: ' + (pais. msg = msg + 'En el índice 0 de fruta tenemos: ' + fruta[0] + ' y en el índice 30 '+ fruta[30] + '\n\n'. msg = msg + 'En el indice 2 de datos tenemos: ' + datos[2] + ' y es booleano\n\n'. var msg. fruta[2] = undefined. var fruta = []. var pais = ['Mexico'. mes[12]='diciembre'. 'nube'. 'Chile'. 'Argentina'. MÁS SOBRE LOS ARRAYS Los arrays son elementos de gran importancia dentro de JavaScript y aún queda mucho que estudiar sobre ellos. mes[9]='septiembre'. msg2 = msg2 + 'Mostramos el array fruta: ' + fruta + '\n\n'. mes[6] = 'junio'.length) + ' y en el array fruta es ' + fruta. pero más adelante volveremos a explicar más cosas relacionadas con los arrays. EJEMPLO Escribe el siguiente código y guárdalo en un archivo de extensión html (puedes cambiar la ruta de la imagen si lo deseas): <html> <head> <title>Curso JavaScript aprenderaprogramar.length +'\n\n'. msg = msg + 'En el índice 0 de fruta tenemos: ' + fruta[0] + ' y en el índice 30 '+ fruta[30] + '\n\n'. -11. . mes[2]='febrero'. msg = msg + 'En el índice 40 de datos tenemos: ' + datos[40] + '\n\n'. mes[10]='octubre'. alert (msg2). fruta[1] = 'pera'. alert('Contenido de ejemplo: '+ ejemplo). mes[3]='marzo'. true. var ejemplo = new Array(). msg2 = msg2 + 'Mostramos el array mes: ' + mes + '\n\n'. mes[5]='mayo'. ejemplo [2]= 44. De momento el conocimiento adquirido nos sirve para seguir avanzando. mes[7]='julio'. msg = msg + 'En el indice 1 de datos tenemos: ' + datos[1] + ' (numérico). mes[0] = undefined. 'Costa Rica']. mes[8]='agosto'.22. var datos = ['Frío'. 'Colombia'. mes[11]='noviembre'. msg2. 'Perú'. multiplica por 2: ' + (datos[1]*2) + '\n\n'. msg2 = msg2 + 'Intentamos sumar o concatenar arrays: ' + (pais + fruta) +'\n\n'. mes[1] = 'enero'.

España.. Un array puede tener elementos intermedios no definidos.. Esto no significa que el array se un texto ni un tipo String..... multiplica por 2: 66 En el indice 2 de datos tenemos: false y es booleano En el índice 3 de datos tenemos: nube y es un texto En el índice 40 de datos tenemos: undefined En el índice 0 de fruta tenemos: undefined y en el índice 30 undefined En el índice 0 de fruta tenemos: undefined y en el índice 30 manzana Mostramos el array país: Mexico. p.33.Colombia. </p> </div> </body> </html> Visualiza el resultado y comprueba que la página web se muestra con normalidad y que JavaScript se ejecuta con normalidad cuando haces click sobre la imagen.Chile....pera..false..ej.imgur..abril.-11.">Aquí otro párrafo de texto.Chile..... El resultado esperado esque se muestre lo siguiente (compruébalo): El país de índice 2 es: Argentina En el indice 1 de datos tenemos: 33 (numérico).Venezuela.septiembre.julio. Cuando tratamos de mostrar por pantalla un array..} </script> </head> <body> <div> <p>Aquí un párrafo de texto situado antes de la imagen..Argentina. En el caso de elementos no definidos.nube.true....jpg" alt="Notepad++" title="Notepad++.. dentro de un div contenedor</p> <img onclick="mostrarMensaje1()" src="http://i.España.Perú.octubre..manzana Valor length en el array pais es: 8 y en el array fruta es 31 Contenido de ejemplo: Contenido de ejemplo: 1...... luego de hacer un proceso.. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.. Son comunes los casos donde una función.diciembre Intentamos sumar o concatenar arrays: Mexico.Venezuela.Perú..mayo.Costa Rica Mostramos el array fruta: .....marzo.. se produce una conversión automática a texto. Funciones que retornan un valor.noviembre.manzana Mostramos el array datos: Frío.22....com/afC0L..Colombia.Argentina.. sino simplemente que el intérprete hace una conversión automática para tratar de ofrecer un resultado... al mostrarse el array se muestran espacios separados por comas.junio.agosto.. retorne un valor.3..variado Mostramos el array mes: .. un útil editor de texto"> <p onclick ="alert('Alerta JavaScript')" style="color: #D2691E.44 Fíjate en las siguientes cuestiones: un array en JavaScript puede contener elementos de distintos tipos...febrero..pera.Costa Rica.. El contenido de un elemento no definido es undefined....enero.33. .....

write(r).""). valor=parseInt(valor). </script> . document. else if (x==5) return "cinco". <html> <head> </head> <body> <script type="text/javascript"> function convertirCastellano(x) { if (x==1) return "uno". valor=prompt("Ingrese un valor entre 1 y 5". else return "valor incorrecto". else if (x==3) return "tres".Ejemplo 1: Confeccionar una función que reciba un valor entero comprendido entre 1 y 5. else if (x==2) return "dos". } var valor. var r. else if (x==4) return "cuatro". Luego retornar en castellano el valor recibido. r=convertirCastellano(valor).

default:return "valor incorrecto". ya que la misma retorna un valor. la función queda codificada de la siguiente manera: function convertirCastellano(x) { switch (x) { case 1:return "uno". pero sólo puede retornar un único valor. La instrucción switch analiza el contenido de la variable x con respecto al valor de cada caso. ejecuta el bloque seguido de los 2 puntos hasta que encuentra la instrucción return o break. case 3:return "tres".año) { var s='Hoy es '+dia+' de '.mes. . Cuando se llama a la función. } } Esta es una forma más elegante que una serie de if anidados. mes y año y retorne un string con un formato similar a: "Hoy es 10 de junio de 2013". debemos asignar el nombre de la función a una variable. switch (mes) { case 1:s=s+'enero '.</body> </html> Podemos ver que el valor retornado por una función lo indicamos por medio de la palabra clave return. En la situación de ser igual. La estructura condicional if de este ejemplo puede ser remplazada por la instrucción switch. case 2:return "dos". case 4:return "cuatro". <html> <head> </head> <body> <script type="text/javascript"> function formatearFecha(dia. case 5:return "cinco". Ejemplo 2: Confeccionar una función que reciba una fecha con el formato de día. Una función puede tener varios parámetros. break.

return s. } document. case 12:s=s+'diciembre '. case 2:s=s+'febrero '. break. break. break. case 8:s=s+'agosto '. } //fin del switch s=s+'de '+año. Definimos e inicializamos una variable con: var s='Hoy es '+dia+' de '.2013)). case 7:s=s+'julio '. break. mes y año.6. case 6:s=s+'junio '. case 9:s=s+'septiembre '. break. break. break. break. case 3:s=s+'marzo '. Luego le concatenamos o sumamos el mes: . </script> </body> </html> Analicemos un poco la función formatearFecha.write(formatearFecha(11. Llegan tres parámetros con el día. case 10:s=s+'octubre '. case 4:s=s+'abril '. break. case 11:s=s+'noviembre '. case 5:s=s+'mayo '. break. break.

Propiedades y métodos.2013). Se relacionan entre si. Las segundas son miembros de una clase. Para acceder a los métodos y propiedades de un objeto debemos utilizar la siguiente sintaxis: objeto. Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas métodos). Guardamos en la variable 'fec' el string devuelto por la función. Observemos como acumulamos lo que tiene 's' más el string 'enero '. si el parámetro mes tiene un uno. Objetos Son todas las cosas con identidad propia. Cuando se llama a la función directamente. métodos) que deben cumplir.propiedad objeto. Las primeras son entes más abstractos que definen un conjunto determinado de objetos. Esto último lo podemos hacer en dos pasos: var fec= formatearFecha(11.s=s+'enero '. poseyendo las mismas propiedades que la clase a la cual pertenecen. En caso de hacer s='enero ' perderíamos el valor previo que tenía la variable s. Por último concatenamos el año: s=s+'de '+año.6. JavaScript simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos. Atributos o propiedades . Esto. al valor devuelto se lo enviamos a la función write del objeto document. document. Son ejemplares (instancias) de una clase y conocen a la clase a la cual pertenecen. El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos).write(fec). A partir de esta estructura se ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo.metodo(parametros) Conceptos Básicos. Poseen características (atributos) y tienen responsabilidades (funciones. Como veremos. Programación orientada a objetos.

precio. . Un método está determinado por la clase del objeto receptor. Son las responsabilidades que debe cumplir la clase. color. El objetivo de un método es ejecutar las actividades que tiene encomendada la clase.Atributos (Propiedades). puede variar de una clase a otra. es decir. todos los objetos de una clase usan el mismo método en respuesta a mensajes similares. etc.. responsabilidades: comodidad. etc. Clases Una clase es un molde para objetos que poseen las mismas características (que pueden recibir los mismos mensajes y responden de la misma manera). Una clase es una representación de una idea o concepto. largo. responsabilidades: mostrar título. etc. Un método consiste en el nombre de la operación y sus argumentos.achicarse etc. ancho. respuestas a mensajes para satisfacer peticiones. responsabilidades: abrirse. Responsabilidades o Métodos..Ventana: atributos: tamaño. Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo método) en respuesta a mensajes similares. Unidad que encapsula códigos y datos para los métodos (operaciones). La interpretación de un mensaje (selección del método ejecutado) depende del receptor y puede variar con distintos receptores. seguridad.Casa: atributos: tamaño. Deben ser mínimos para poder realizar todas las operaciones que requiere la aplicación. color. Es un algoritmo (conjunto de operaciones) que se ejecuta en respuesta a un mensaje.Mesa: atributos: altura. responsabilidades: contener elementos. Las clases están definidas por: . El nombre del método identifica una operación que se ejecuta. La clase a la cual pertenece un objeto determina el comportamiento del objeto.Son las características. etc.. cerrarse. Ejemplos de objetos del mundo de la programación: .. cualidades distintivas de cada objeto. Una clase tiene encomendadas actividades que ejecutan los métodos.Ventana: atributos: tamaño. etc. . Ejemplos de objetos del mundo real: .Comportamiento (operaciones o métodos) y . etc. . cantidad de habitaciones.

hora. 25) El objeto Date dispone. . día. getDay() Devuelve el día de la semana de la fecha en forma de número que va del 0 (domingo) al 6 (sábado) Ejemplo: Mostrar en una página la fecha y la hora actual. el año de la fecha. entre otros. <HTML> <HEAD> <SCRIPT type="text/javascript"> function mostrarFechaHora() { . por ejemplo: navidad06 = new Date(2006. respectivamente. Clase Date JavaScript dispone de varias clases predefinidas para acceder a muchas de las funciones normales de cualquier lenguaje. Una aplicación es un conjunto de objetos de determinadas clases. 11. Se invoca así: fecha = new Date(). Éste se devuelve como número de 4 dígitos excepto en el caso en que esté entre 1900 y 1999. segundo). mes. obtenidas del reloj de nuestra computadora.//creación de un objeto de la clase Date fecha = new Date(año. el mes. dia. en cuyo caso devolverá las dos últimas cifras. Esta clase nos permitirá manejar fechas y horas. getFullYear() setFullYear(año) Realizan la misma función que los anteriores. minuto y segundo de la fecha. el objeto fecha contendrá la fecha y hora actuales. de los siguientes métodos: getYear() setYear(año) Obtiene y coloca. ya que siempre devuelven números con todos sus dígitos. minuto. como puede ser el manejo de vectores o el de fechas. fecha = new Date(año. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Si no utilizamos parámetros. respectivamente. mes. Así.Relaciones con otros objetos. getMonth() setMonth(mes) getDate() setDate(dia) getHours() setHours(horas) getMinutes() setMinutes(minutos) getSeconds() setSeconds(segundos) Obtienen y colocan. hora. pero sin tanta complicación. dia).

getSeconds()).write((fecha.write('<br>'). document. document. Con un único nombre se define un vector y por medio de un subíndice hacemos referencia a cada elemento del mismo (componente). document. document.write(fecha. </SCRIPT> </HEAD> <BODY> </BODY> </HTML> En este problema hemos creado un objeto de la clase Date.write('Hoy es ').getFullYear()).getHours()+':'). Luego llamamos una serie de métodos que nos retornan datos sobre la fecha y hora actual del equipo de computación donde se está ejecutando el navegador. <html> <head> </head> <body> .getDate()+'/'). document.write(fecha. document. } //Llamada a la función mostrarFechaHora().getMonth()+1)+'/'). document. document.write(fecha.write(fecha. 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 función). document.write(fecha.<nombre de método>(parámetros) Clase Array Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos. Es bueno notar que para llamar a los métodos disponemos: <nombre de objeto>.getMinutes()+':').write('Es la hora '). var fecha fecha=new Date().

} var sueldos. for(f=0.length. calcularGastos(sueldos). v=prompt('Ingrese sueldo:'. cargar(sueldos).write('Total de gastos en sueldos:'+total). } document. sueldos[f]=parseInt(v).f<sueldos.<script type="text/javascript"> function cargar(sueldos) { var f. </script> . var f.length.f<sueldos. } } function calcularGastos(sueldos) { var total=0.length. for(f=0.f++) { var v. sueldos=new Array(5).f++) { total=total+sueldos[f].f<sueldos.write('Listado de sueldos<br>'). for(f=0.write(sueldos[f]+'<br>'). } document.f++) { document.'').

dias) { var num. num=prompt('Ingrese número de mes:'.</body> </html> Recordemos que el programa comienza a ejecutarse a partir de las líneas que se encuentran fuera de la funciones: var sueldos.write('Tiene '+dias[num-1]+' días'). imprimimos en la página los valores y el total de gastos.write('Corresponde al mes:'+meses[num-1]). Lo primero. Para conocer el tamaño del vector accedemos a la propiedad length de la clase Array. document. document.''). Llamamos a la función cargar enviándole el vector. En la segunda función sumamos todas las componentes del vector. calcularGastos(sueldos). a través de un ciclo for recorremos las distintas componentes del vector y almacenamos valores enteros que ingresamos por teclado. Ejemplo 2: Crear un vector con elementos de tipo string. En otra función solicitar el ingreso de un número entre 1 y 12. sueldos=new Array(5). document. indicándole que queremos almacenar 5 valores. En la función. cargar(sueldos). Almacenar los meses de año. Mostrar a qué mes corresponde y cuántos días tiene dicho mes. } . definimos una variable y posteriormente creamos un objeto de la clase Array. <html> <head> </head> <body> <script type="text/javascript"> function mostrarFecha(meses.write('<br>'). num=parseInt(num).

meses[4]='Mayo'. dias[8]=30. dias[7]=31. meses=new Array(12). meses[5]='Junio'. uno para almacenar los meses y otro los días. dias[3]=30. Decimos que se trata de vectores paralelos porque en la . var dias. dias[1]=28. dias[10]=30. meses[8]='Septiembre'. meses[7]='Agosto'. meses[9]='Octubre'. meses[11]='Diciembre'. dias[5]=30. meses[3]='Abril'. var meses. meses[10]='Noviembre'. dias=new Array(12). meses[2]='Marzo'. </script> </body> </html> En este problema definimos dos vectores. dias[4]=31. dias[11]=31. meses[0]='Enero'. meses[6]='Julio'. meses[1]='Febrero'. mostrarFecha(meses. dias[9]=31. dias[0]=31. dias[6]=31. dias[2]=31.dias).

sqrt(25) 5 Genera un valor aleatorio comprendido entre 0 random Math.random() Ej.E) 1 Devuelve el entero más pequeño mayor o igual ceil Math.round(-2.pow(2. la cantidad de días del mes de enero.E y Math.min(2. acos. log Exponenciación y logaritmo.abs(-2) 2 sin. Recordar que los vectores comienzan a numerarse a partir de la componente cero. cos. Clase Math Esta clase es un contenedor que tiene diversas constantes (como Math. base E Math.floor(-2. Ejemplo: Confeccionar un programa que permita cargar un valor comprendido entre 1 y 10.57 atan exp.PI) -1 tan argumento en radianes asin.PI) y los siguientes métodos matemáticos: Resultado Expresión de Método Descripción del ejemplo ejemplo abs Valor absoluto Math. max Math.ceil(-2. siendo el primer argumento la pow Math. Luego generar un valor aleatorio entre 1 y 10.7) -2 al argumento Devuelve el entero más grande menor o igual al floor Math.7345 y 1. Funciones trigonométricas inversas Math. 0. Funciones trigonométricas. reciben el Math.componente cero del vector meses almacenamos el string 'Enero' y en el vector dias. disponemos como subíndice el valor ingresado menos 1. esto debido a que normalmente el operador de nuestro programa carga un valor comprendido entre 1 y 12. Es importante notar que cuando imprimimos.cos(Math.4) 2 argumentos Exponenciación.7) -3 argumento Devuelve el entero más cercano o igual al round Math.asin(1) 1.write('Corresponde al mes:'+meses[num-1]).3) 8 base y el segundo el exponente sqrt Raíz cuadrada Math. mostrar un mensaje con el número sorteado e indicar si ganó o perdió: . document.7) -3 argumento Devuelve el menor (o mayor) de sus dos min.log(Math.

write('Lo siento se sorteó el valor '+num+' y usted eligió el '+selec).write('Ganó el número que se sorteó es el '+ num). con la función parseInt. selec=parseInt(selec). nos genera un valor aleatorio comprendido entre un valor mayor a 0 y menor a 10.random() por 10. obtenemos sólo la parte entera. . Al multiplicar Math. Concatenación de cadenas (+) JavaScript permite concatenar cadenas utilizando el operador +. Finalmente sumamos uno.random()*10)+1. luego.<html> <head> </head> <body> <script type="text/javascript"> var selec=prompt('Ingrese un valor entre 1 y 10'.'').random()*10)+1. else document. var num=parseInt(Math. Con un simple if validamos si coinciden los valores (el generado y el ingresado por teclado) Clase String Un string consiste en uno o más caracteres encerrados entre simple o doble comillas.''). </script> </body> </html> Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo siguiente: var num=parseInt(Math. El valor que cargó el operador se encuentra en: var selec=prompt('Ingrese un valor entre 1 y 10'. if (num==selec) document.

toLowerCase() Convierte todos los caracteres del String que invoca el método a minúsculas: cadena1=cadena1. En este ejemplo. Dos de las cadenas concatenadas son cadenas literales. var nom='Juan'.5). var caracterPrimero=nombre. cadena1 tiene todos los caracteres convertidos a minúsculas.toUpperCase(). Luego de esto. if (pos!=-1) document.El siguiente fragmento de código concatena tres cadenas para producir su salida: var final='La entrada tiene ' + contador + ' caracteres.charAt(0). "cadena3" contendrá los caracteres 2. 3. cadena1 tiene todos los caracteres convertidos a mayúsculas. substring (posinicial. Propiedad length Retorna la cantidad de caracteres de un objeto String. La del medio es un entero que automáticamente se convierte a cadena y luego se concatena con las otras. Comienzan a numerarse de la posición cero. document. .write(nom. //Resultado 4 Métodos charAt(pos) Retorna el carácter del índice especificado.indexOf('Pablo'). var pos=nombre. desde el carácter 'posinicial' hasta el 'posfinal'-1: cadena3=cadena1. 4 sin incluir el 5 de cadena1 (Cuidado que comienza en cero).toLowerCase().length). posfinal) Retorna un String extraída de otro. Luego de esto. var nombre='Rodriguez Pablo'. o -1 en caso de no estar.write ('Está el nombre Pablo en la variable nombre').'. toUpperCase() Convierte todos los caracteres del String que invoca el método a mayúsculas: cadena1=cadena1. Tener en cuenta que puede retornar 0 si la subcadena coincide desde el primer carácter. indexOf (subCadena) Devuelve la posición de la subcadena dentro de la cadena.substring(2. var nombre='juan'.

document.write('La cadena convertida a mayúsculas es:'+cadena.write('<br>').write('<br>'). </script> </body> . document.write('La cadena ingresada es:'+cadena).write('<br>'). document.write('<br>'). <html> <head> </head> <body> <script type="text/javascript"> var cadena=prompt('Ingrese una cadena:'.length).write('La cantidad de caracteres son:'+cadena.write('No se ingresó la subcadena hola').charAt(0)). document. document. document. document.3)).write('El primer carácter es:'+cadena. document.indexOf('hola')!=-1) document. document.toLowerCase()). document.write('<br>').toUpperCase()). document.'').write('Se ingresó la subcadena hola').write('La cadena convertida a minúsculas es:'+cadena.Ejemplo: Cargar un string por teclado y luego llamar a los distintos métodos de la clase String y la propiedad length.write('<br>').write('Los primeros 3 caracteres son:'+cadena.write('<br>'). document. if (cadena.substring(0. else document. document.

Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos.. Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara. evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web).</html> Formularios y Eventos. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibirá los datos ingresados por el usuario... por ejemplo si se presiona un botón). . mostraremos un contador: <html> <head> </head> <body> <script type="text/javascript"> var contador=0.. Suponemos que conoce las marcas para la creación de formularios en una página web: form <form> . TEXTAREA (editor de varias líneas). dispondremos un botón y cada vez que se presione. Vamos a hacer un problema muy sencillo empleando el lenguaje Javascript. El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas). </form> text <input type="text"> password <input type="password"> textarea <textarea> . Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador. etc.. </select> hidden <input type="hidden"> El navegador crea un objeto por cada control visual que aparece dentro de la página. </textarea> button <input type="button"> submit <input type="submit"> reset <input type="reset"> checkbox <input type="checkbox"> radio <input type="radio"> select <select> .. El uso de Javascript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados.

se llama a la función incrementar. en la misma incrementamos la variable contador en uno. En este caso cada vez que presionamos el botón. La función alert crea una ventana que puede mostrar un mensaje. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento. Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona: <html> <head></head> <body> <script type="text/javascript"> function mostrar() { .function incrementar() { contador++. Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. } </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> </body> </html> A los eventos de los objetos HTML se les asocia una función. Controles FORM. BUTTON y TEXT. dicha función se ejecuta cuando se dispara el evento respectivo. alert('El contador ahora vale :' + contador). Ahora veremos la importancia de definir un id a todo control de un formulario. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado).

.getElementById('edad'). var ed=document. El método getElementById nos retorna una referencia del objeto HTML que le pasamos como parámetro.getElementById('edad').getElementById('edad').getElementById('nombre'). var nom=document.value.value. var ed=document.getElementById('nombre').value. La propiedad "id" es un identificar único para cualquier marca HTML que luego nos permite desde Javascript acceder a dicho elemento. Luego de extraer los valores ingresados por el operador los mostramos utilizando la función alert: var nom=document. Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. alert('Y la edad:' + ed). 1 BUTTON. alert('Ingresó el nombre:' + nom).value. 2 TEXT.value. } </script> <form> Ingrese su nombre: <input type="text" id="nombre"><br> Ingrese su edad: <input type="text" id="edad"><br> <input type="button" value="Confirmar" onClick="mostrar()"> </form> </body> </html> En este problema tenemos cuatro controles: 1 FORM. La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT: var nom=document.value. var ed=document.getElementById('nombre'). a partir de este objeto accedemos a la propiedad value que almacena el valor ingresado por el operador en el control TEXT. alert('Y la edad:' + ed). alert('Ingresó el nombre:' + nom). El evento que se dispara al presionar el botón se llama mostrar.

por ejemplo.value. } else { alert('Largo de clave correcta'). Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres. if (clave.length<5) { alert('La clave no puede tener menos de 5 caracteres!!!'). La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla. Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres. } } </script> <form> Ingrese una clave: <input type="password" id="clave"> . <html> <head> </head> <body> <script type="text/javascript"> function verificar() { var clave=document. es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos. La mayoría de las veces este dato se procesa en el servidor.Control PASSWORD Esta marca es una variante de la de tipo "TEXT". es decir.getElementById('clave').

text. numerando a partir de cero).getElementById('select1'). Para determinar el string seleccionado: document. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado.selectedIndex]. Si queremos mostrar los caracteres ingresados debemos acceder mediante el método getElementById a la marca HTML clave: var clave=document. Normalmente. a este valor no lo mostraremos dentro de la página.options[document. sino se perdería el objetivo de este control (ocultar los caracteres tipeados).getElementById('clave').getElementById('selec t1'). Esto lo hacemos cuando ocurre el evento onChange.value.<br> <input type="button" value="Confirmar" onClick="verificar()"> </form> </body> </html> En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edición sólo vemos asteriscos.getElementById('select1'). pero realmente en memoria se almacenan los caracteres tipeados. Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista. Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un . al string de una determinada posición. if (clave. Para determinar la posición del índice seleccionado en la lista: document. a la que accedemos por medio de un subíndice.length<5) Control SELECT Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible. Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres. Es decir que el objeto select1 tiene otra propiedad llamada options.selectedIndex.

value=seleccio n.options[seleccion. document.getElementById('select1').text.valor a cada string).selectedIndex]. document.value. Un ejemplo completo que muestra el empleo de un control SELECT es: <html> <head> </head> <body> <script type="text/javascript"> function cambiarColor() { var seleccion=document.options[document.getElementById('text2').options[seleccion. } </script> <form> <select id="select1" onChange="cambiarColor()"> <option value="0xff0000">Rojo</option> <option value="0x00ff00">Verde</option> <option value="0x0000ff">Azul</option> </select> <br> Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br> .getElementById('select1').getElementById('text3').selectedIndex].value.value=seleccio n.getElementById('selec t1'). document.value=seleccio n. Y por último con esta expresión accedemos al valor asociado al string: document.getElementById('text1').selectedIndex].selectedIndex.

y cómo acceder luego a sus valores desde Javascript. Control CHECKBOX El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado). Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onChange="cambiarColor()". Texto seleccionado:<input type="text" id="text2"><br> Valor asociado:<input type="text" id="text3"><br> </form> </body> </html> Se debe analizar en profundidad este problema para comprender primeramente la creación del objeto SELECT en HTML. <html> <head> </head> <body> <script type="text/javascript"> function contarSeleccionados() { var cant=0. Analizando la función cambiarColor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT. Por cada opción del objeto SELECT tenemos una línea: Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string. . Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador. Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Para conocer su funcionamiento y ver como podemos acceder a su estado desde Javascript haremos un pequeña página.

checked) { cant++.getElementById('checkbox2'). if (document. } if (document. } if (document.getElementById('checkbox4').checked) { cant++.getElementById('checkbox3'). } alert('Conoce ' + cant + ' lenguajes').getElementById('checkbox1').checked) { cant++.Net <br> <input type="button" value="Mostrar" onClick="contarSeleccionados()"> .checked) { cant++. } </script> <form> <input type="checkbox" id="checkbox1">JavaScript <br> <input type="checkbox" id="checkbox2">PHP <br> <input type="checkbox" id="checkbox3">JSP <br> <input type="checkbox" id="checkbox4">VB. } if (document.

Control RADIO Los objetos RADIO tienen sentido cuando disponemos varios elementos.checked) { cant++.getElementById('checkbox1').</form> </body> </html> Cuando se presiona el botón se llama a la función Javascript contarSeleccionados(). } Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if.getElementById('checkbox1').checked==true) { cant++. Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario: <html> <head> </head> <body> <script type="text/javascript"> function mostrarSeleccionado() { if (document. Mostramos finalmente el resultado final. } . En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked del elemento que almacena true o false según esté o no seleccionado el control: Disponemos un 'if' para cada checkbox: if (document. } Como la propiedad checked almacena un true o false podemos utilizar dicho valor directamente como valor de la condición en lugar de codificar: if (document.getElementById('radio1'). Sólo uno puede estar seleccionado del conjunto.checked) { alert('no tienes estudios').

} if (document.getElementById('radio2'). } } </script> <form> <input type="radio" id="radio1" name="estudios">Sin estudios <br> <input type="radio" id="radio2" name="estudios">Primarios <br> <input type="radio" id="radio3" name="estudios">Secundarios <br> <input type="radio" id="radio4" name="estudios">Universitarios <br> <input type="button" value="Mostrar" onClick="mostrarSeleccionado()"> </form> </body> </html> .checked) { alert('tienes estudios primarios').getElementById('radio3').checked) { alert('tienes estudios secundarios').getElementById('radio4').checked) { alert('tienes estudios universitarios'). } if (document. if (document.

} } .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 estén relacionados entre si) Luego podemos acceder a cada elemento mediante el método getElementById para consultar la propiedad checked: if (document.getElementById('radio1'). <html> <head> </head> <body> <script type="text/javascript"> function controlarCaracteres() { if (document. } Igual que el checkbox.le ngth>2000) { alert('curriculum muy largo'). Ejemplo: Solicitar la carga del mail y el curriculum de una persona. 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. según esté o no seleccionado el control radio.value. la propiedad checked retorna true o false.checked) { alert('no tienes estudios'). salvo que permite el ingreso de muchas líneas de texto. Mostrar un mensaje si el curriculum supera los 2000 caracteres. Control TEXTAREA Este control es similar al control TEXT.getElementById('curriculum'). } else { alert('datos correctos').

value=='') . Mostrar en las propiedades value de los controles text los mensajes "nombre" y "mail" respectivamente. mostrar un mensaje de alerta si el mismo está vacío.</script> <form> <textarea id="curriculum" rows="10" cols="50" ></textarea> <br> <input type="button" value="Mostrar" onClick="controlarCaracteres()"> </form> </body> </html> Para saber el largo de la cadena cargada: if (document.value.length>2000) accedemos a la propiedad length. Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona.getElementById('curriculum'). Eventos onFocus y onBlur El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco. <html> <head></head> <body> <script type="text/javascript"> function vaciar(control) { control.value=''. al abandonar el mismo. Cuando el control tome foco borrar el contenido actual. } function verificarEntrada(control) { if (control.

accedemos a la propiedad value y borramos su contenido. También cargamos las propiedad value para mostrar un texto dentro del control. Esto nos permite definir una única función para vaciar los dos controles. De forma similar. En la función propiamente dicha. para el evento onBlur llamamos a la función verificarEntrada donde analizamos si se ha ingresado algún valor dentro del control. en caso de tener un string vacío procedemos a mostrar una ventana de alerta. para el evento onFocus la función vaciar. alert('Debe ingresar datos'). Para probar estos eventos implementaremos una página que cambie el . Le indicamos. } </script> <form> <input type="text" id="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="nombre"><br> <input type="text" id="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="mail"> <br> <input type="button" value="Confirmar"> </form> </body> </html> A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur. 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. pasando como parámetro la palabra clave this que significa la dirección del objeto que emitió el evento.

color de fondo del documento. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo del documento: <html> <head></head> <body> <script type="text/javascript"> function pintar(col) { document.html" 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. .bgColor=col. function pintar(col) { document.bgColor=col.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> - <a href="pagina1. } </script> <a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> La función 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a> - <a href="pagina1. Implementaremos una función que cambie el color con un valor que llegue como parámetro.

col) { objeto. pero en éste.'#0000ff')" onMouseOut="pintar(this.bgColor=col.'#ff0000')" onMouseOut="pintar(this. la referencia a la casilla que queremos que se coloree (this): <td onMouseOver="pintar(this.'#ffffff')">rojo</td> <td onMouseOver="pintar(this. } </script> <table border="1"> <tr> <td onMouseOver="pintar(this.'#00ff00')" onMouseOut="pintar(this.'#ffffff')">verde</td> <td onMouseOver="pintar(this.'#ff0000')" onMouseOut="pintar(this.} 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> <body> <script type="text/javascript"> function pintar(objeto. le pasamos como parámetro a la función.'#ffffff')">azul</td> </tr> </table> </body> </html> La lógica es bastante parecida a la del primer problema.'#ffffff')">rojo</td> Evento onLoad El evento onLoad se ejecuta cuando cargamos una página en el navegador. Uno de los usos más frecuentes es para fijar el foco en algún control de un .

getElementById('nombre'). Este evento está asociado a la marca body.focus().getElementById('nombre').formulario.focus(). } </script> <form> Ingrese su nombre: <input type="text" id="nombre"><br> Ingrese su edad: <input type="text" id="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html> En la marca body inicializamos el evento onLoad con la llamada a la función activarPrimerControl: <body onLoad="activarPrimerControl()"> La función da el foco al control text donde se cargará el nombre: function activarPrimerControl() { document. para que el operador no tenga que activar con el mouse dicho control. } El objeto window. La página completa es: <html> <head></head> <body onLoad="activarPrimerControl()"> <script type="text/javascript"> function activarPrimerControl() { document. .

[Variable=][window. 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 anteponiéndole el nombre del objeto window. Ej: valor=window.""). Podemos especificar el tamaño de la ventana.Al objeto window lo hemos estado usando constantemente. seguida del método o en forma resumida indicando solamente el nombre del método (como lo hemos estado haciendo). separada por comas. Si queremos tener acceso a ella desde la ventana donde la creamos. la ventana se abrirá con una página en blanco. sino simplemente invocamos el método: el navegador automáticamente sabrá que pertenece al objeto window. open y close: abre o cierra una ventana del navegador. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco. propiedades) Permite crear (y abrir) una nueva ventana. deberemos asignarle una variable. etc. . Representa la ventana del navegador. esto es posible ya que el objeto window es el objeto de máximo nivel.]open(URL. window es un objeto global y tiene los siguienes métodos: alert: Muestra un diálogo de alerta con un mensaje (a esta responsabilidad la hemos utilizado desde los primeros temas) prompt: Muestra un diálogo para la entrada de un valor de tipo string (utilizado desde el primer momento) confirm: Muestra un diálogo de confirmación con los botones Confirmar y Cancelar. Las propiedades son una lista. su contenido. o valor=prompt("Ingrese valor". Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los programas tipeados de la segunda forma.prompt("Ingrese valor". nombre."").

document. ventana.'status=yes.width=400. } function confirmar() { var respuesta=confirm("Presione alguno de los dos botones"). } function mostrarAlerta() { alert("Esta ventana de alerta ya la utilizamos en otros problemas. ventana.write("Estoy escribiendo en la nueva ventana<br>").height =250.write("Esto es lo primero que aparece<br>"). if (respuesta==true) .document.").El siguiente programa muestra varios de los métodos disponibles del objeto window: <html> <head></head> <body> <script type="text/javascript"> function abrir() { var ventana=open().menubar=yes'). ventana.write("Segunda linea"). } function abrirParametros() { var ventana=open(''.''.document.

alert("presionó aceptar"). else alert("presionó cancelar").<br> <form> <br> <input type="button" value="open()" onClick="abrir()"> <br> <input type="button" value="open con parámetros" onClick="abrirParametros()" > <br> <input type="button" value="alert" onClick="mostrarAlerta()"> <br> <input type="button" value="confirm" onClick="confirmar()"> <br> <input type="button" value="prompt" onClick="cargarCadena()"> </form> </body> </html> Propiedad location del objeto window . alert("Usted ingreso "+cad).""). } function cargarCadena() { var cad=prompt("cargue una cadena:". } </script> Este programa permite analizar la llamada a distintas responsabilidades del objeto window.

si queremos ingresar al periódico. En caso que el visitante presione el botón afirmativo. redireccionamos al sitio de La Nación.El objeto location colabora directamente con el objeto window: Cuando le asignamos una nueva dirección a la propiedad location del objeto window. Implementaremos un pequeño ejemplo para ver la utilidad de esta propiedad: Supongamos que tenemos un hipervínculo que al ser presionado entre al periódico La Nación. en caso contrario mostramos un mensaje: <html> <head> </head> <body> <script type="text/javascript"> function verificarEntrada() . el navegador redirecciona a dicha página. pero primero muestre una ventana de confirmación.

location='http://www.alert('No hay problema'). } } </script> <a href="javascript:verificarEntrada()">Ingresar a La Nación</a> </body> </html> Lo primero que tenemos que indicar es que para llamar a una función de javascript desde un hipervínculo debemos anteceder la palabra javascript seguida de dos puntos y por último. la función confirm retorna true y por lo tanto se ejecuta el verdadero del if: if (window.lanacion.confirm('Desea salir del sitio e ingresar al periódico La Nación?')) { window.location='http://www. el nombre de la función: <a href="javascript:verificarEntrada()">Ingresar a La Nación</a> La función verificarEntrada() muestra la ventana con los botones confirmar y cancelar (recordar que el método confirm del objeto window hace esto en forma automática). } else { window.com.confirm('Desea salir del sitio e ingresar al periódico La Nación?')) { window.alert('No hay problema'). Si se presiona el botón confirmar.lanacion. } else { window. } .ar'. { if (window.com.ar'.

history. Luego. tiene el mismo comportamiento que presionar el botón "Atrás" del navegador. //Avanza o retrocede en la lista de páginas visitadas.Propiedad history del objeto window El objeto history colabora directamente con el objeto window: El objeto history almacena todas las páginas que visitamos.history.back().go(). Cuenta con las siguientes funciones: window.forward(). Llamar a la función back. window.history. //Avanza a la página siguiente almacenada en la cache de la máquina. sin tener que pedirlas nuevamente al servidor. con una serie de funciones. //Retrocede a la página anterior window. El siguiente ejemplo nos permite cargar una segunda página y luego retroceder a la primera página sin tener que solicitarla nuevamente al servidor: . podemos extraer de la memoria de la computadora las páginas ya visitadas.

la primera vez. La segunda página: <html> <head> <title>Problema</title> <script type="text/javascript"> function retornar() { window. . mediante el método go y pasándole un valor negativo. retrocedemos a la primera página sin tener la necesidad de recargarla.go(1).html">Ir a la página 2</a> <br> <br> <a href="javascript:avanzar()">Extraer del cache la segunda página</a> </body> </html> En esta primera página. } </script> </head> <body> <a href="pagina2.history.<html> <head> <title>Problema</title> <script type="text/javascript"> function avanzar() { window.history.go(-1). debemos cargar la segunda página seleccionando el hipervínculo pagina2. } </script> </head> <body> <a href="javascript:retornar()">Retornar</a> </body> </html> En la segunda página.

} Propiedad screen del objeto window El objeto screen colabora directamente con el objeto window: El objeto screen ofrece información acerca del monitor donde se está ejecutando el navegador.history. } else { alert('no hay otra página en la cache hacia adelante').go(1).history. La propiedades principales del objeto screen son: availHeight : El alto de la pantalla en pixeles disponible para el navegador.length>0) { window.Podemos mejorar el ejemplo accediendo al atributo length (almacena la cantidad de páginas de la lista) del objeto history: if (window. .

es la forma más completa. document.write('colorDepth :' + screen. document. pero más tediosa de escribir (recordar que el objeto window es el principal y lo podemos obviar cuando accedemos a sus propiedades o métodos) Propiedad navigator del objeto window . document. document.colorDepth).width + '<br>'). document. width : El ancho de la pantalla en pixeles. El siguiente programa muestra el valor almacenado en las cinco propiedades que tiene el objeto screen: <html> <head> <title>Problema</title> </head> <body> <script type="text/javascript"> document.availWidth + '<br>').screen.availHeight + '<br>').write('width :' + screen. colorDepth : Representa el número de bits usados para representar los colores.write('height :' + screen.write('Valores de las propiedades del objeto screen:<br>').width etc. </script> </body> </html> No olvidar que el objeto screen es una propiedad del objeto window.height + '<br>').write('availWidth :' + screen. por lo que haber dispuesto la sintaxis: window. height : El alto de la pantalla en pixeles.write('availHeight :' + screen.availWidth : El ancho de la pantalla en pixeles disponible para el navegador.

write('Valores de las propiedades del objeto navigator:<br>'). document. FireFox. document.write('plugins :' + navigator.write('appName :' + navigator. Este pequeño programa muestra los valores de las propiedades antes anunciadas: <html> <head> <title>Problema</title> </head> <body> <script type="text/javascript"> document.write('appVersion :' + navigator. appVersion : almacena la versión del navegador. platform : almacena la plataforma donde el navegador se está ejecutando.js) .Contiene información sobre el navegador web. Opera. document. </script> </body> </html> Archivo JavaScript externo (*.plugins.appVersion + '<br>').length + '<br>').write('cookieEnabled :' + navigator. cookieEnabled : almacena si las cookies están activas en el navegador.cookieEnabled + '<br>'). La implementación de este objeto varía entre navegadores (IExplorer. document. etc.) Las propiedades comunes a estos navegadores son: appName : almacena el nombre oficial del navegador. plugins : almacena un array de los plugin cargados en el navegador.appName + '<br>').

} 2 . } function retornarHora() { var fecha fecha=new Date(). var cadena=fecha.getMinutes()+':'+fecha.El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML. return cadena.Facilita el mantenimiento de las funciones al encontrarse en archivos separados.js: <html> <head> <title>Problema</title> <script type="text/javascript" src="funciones. return cadena. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos. Esto trae muchos beneficios: . .Reutilización de funciones en muchos archivos.getHours()+':'+fecha. </script> </body> </html> Es decir debemos disponer el siguiente código para importar el archivo *.getYear().getMonth()+1)+'/'+fecha.write('<br>').js: <script type="text/javascript" src="funciones. .js y tipear las funciones en la misma: function retornarFecha() { var fecha fecha=new Date().write('La hora es:'+retornarHora()).Crear un archivo con extensión *.getSeconds(). La mecánica para implementar estos archivos externos en JavaScript es: 1 .write('La fecha de hoy es:'+retornarFecha()).Nos obliga a ser más ordenados. var cadena=fecha.getDate()+'/'+(fecha. document. document.Creamos un archivo html que utilizará las funciones contenidas en el archivo *.js"></script> .js"></script> </head> <body> <script type="text/javascript"> document.

html): . podemos llamar dentro de la página HTML.js. a las funciones que contiene el archivo externo *. Como podemos ver.js y la página html (pagina1. el archivo html queda mucho más limpio. Luego.Mediante la propiedad src indicamos el nombre del archivo a importar. Tipear los dos archivos y los almacenamos en una carpeta del disco duro: funciones. en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora(). Si quiere probar en su equipo este ejemplo puede descargar el editor de texto NotePad++.

html y veremos como se llaman las funciones contenidas en el archivo js: .Procedemos a abrir desde el navegador el archivo: pagina1.

Programación orientada a objetos en JavaScript. es decir la herencia. El lenguaje JavaScript no es un lenguaje orientado a objetos completo. no está implementada en el lenguaje. Desarrollaremos una clase que represente un cliente de un banco. Veremos la sintaxis para la declaración de una clase y la posterior definición de objetos de la misma. La clase cliente tiene como atributos: nombre saldo y las responsabilidades o métodos de la clase son: Constructor (inicializamos los atributos del objeto) depositar extraer Luego debemos implementar los siguientes métodos (normalmente el constructor se utiliza el caracter mayúscula): . Pero el otro pilar de la programación orientada a objetos. Finalmente nos permite definir objetos de estas clases. pero permite definir clases con sus atributos y responsabilidades.

saldo=saldo. this.saldo+dinero. .nombre=nombre. this.saldo=this. } De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave this.saldo=saldo.saldo) { this. } function extraer(dinero) { this. this. this.saldo-dinero. this. } function extraer(dinero) { this.saldo-dinero.saldo) { this.nombre=nombre.saldo=saldo. Con la palabra clave 'this' diferenciamos los atributos de los parámetros (los atributos deben llevar la palabra clave this) this. this.extraer=extraer.extraer=extraer. this. implementamos todos los métodos de la clase: function depositar(dinero) { this. } function depositar(dinero) { this.depositar=depositar.nombre=nombre. } El nombre de la clase coincide con el nombre de la función principal que implementamos (también llamado constructor de la clase): function cliente(nombre.extraer=extraer. } A esta función llegan como parámetro los valores con que queremos inicializar los atributos. También en el constructor inicializamos la referencia a todos los métodos que contendrá la clase (esto es muy importante y necesario para entender porque las otras dos funciones pertenecen a esta clase): this.function Cliente(nombre.saldo=this.saldo=this. Por último.saldo=this.depositar=depositar.depositar=depositar.saldo+dinero. this.

1200). document.saldo=saldo.write('Saldo actual:'+cliente1. Para definir un objeto de la clase Cliente tenemos: var cliente1.nombre=nombre. cliente1=new Cliente('diego'.saldo+'<br>').write('Nombre del cliente:'+cliente1. document. document. cliente1. this. </script> </body> </html> Hemos dividido la declaración de la clase en un bloque Javascript distinto a donde definimos un objeto de la misma.nombre+'<br>'). .saldo=this.depositar=depositar.depositar(120). this.Ahora veamos el archivo HTML completo donde además definiremos un objeto de la clase planteada: <html> <head> <title>Problema</title> <script type="text/javascript"> function Cliente(nombre.saldo=this.saldo+'<br>'). document.saldo+dinero.saldo-dinero. } </script> </head> <body> <script type="text/javascript"> var cliente1.saldo) { this. this.saldo+'<br>'). cliente1.write('Saldo luego de extraer $1000---- >'+cliente1. } function extraer(dinero) { this. esto no es obligatorio. pero podemos ver que queda más claro.extraer=extraer.extraer(1000). } function depositar(dinero) { this.write('Saldo luego de depositar $120---- >'+cliente1.

document. document. En JavaScript podemos definir varias clases en un mismo programa. this. la clase tiene por objetivo la carga por el teclado del número deseado. Podemos decir que la ventaja que podemos obtener con el planteo de clases es hacer nuestros programas mucho más organizados.saldo+'<br>'). Por otra parte crearemos una clase Bolillero que sortee un valor aleatorio entre 1 y 10 (que representa el valor extraído del bolillero). Luego las llamadas a métodos le antecedemos el nombre del objeto llamado cliente1: document.cargarnumero=cargarnumero.verificarsigano=verificarsigano.saldo+'<br>').1200). entendibles y fundamentalmente.nombre=nombre.write('Saldo luego de extraer $1000---- >'+cliente1. document.saldo+'<br>').nombre+'<br>'). .write('Saldo actual:'+cliente1. cliente1.write('Nombre del cliente:'+cliente1. cliente1. La codificación de las dos clases es: <html> <head> <title>Problema</title> <script type="text/javascript"> //clase Numeroquiniela *********************************************** * function Numeroquiniela(nombre) { this. Plantearemos una clase Numeroquiniela que representa una persona que elige un número de quiniela y además registra su nombre.write('Saldo luego de depositar $120---- >'+cliente1. Definición de varias clases. this.extraer(1000).depositar(120). Vamos a desarrollar un programa que contenga dos clases. poder reutilizar clases en distintos proyectos. cliente1=new Cliente('diego'.

this. else return false. } function cargarnumero() { this.numero=parseInt(Math.sortear=sortear. } </script> </head> <body> <script type="text/javascript"> var numeroquiniela1.numero=prompt("Que número de quiniela quiere?". } //clase Bolillero *********************************************** * function Bolillero() { this.numero==num) return true. .numero=-1. } function verificarsigano(num) { if (this."").random()*10)+1. } function sortear() { this.

nume ro)) { document.write(numeroquiniela1.numero +'<br>'). numeroquiniela2=new Numeroquiniela("ana"). . numeroquiniela2.numero + '<br>'). document. que es avisarnos si a ganado según el número sorteado. var numeroquiniela2.nombre + ' a ganado <br>'). bolillero=new Bolillero(). if (numeroquiniela1.write(numeroquiniela2.nombre + ' eligió ' + numeroquiniela2. numeroquiniela1=new Numeroquiniela("juan"). var bolillero. bolillero. numeroquiniela1.nombre + ' a ganado <br>').nume ro)) { document. } </script> </body> </html> Al constructor de la clase Numeroquiniela llega como parámetro el nombre de la persona que la compra (podíamos cargarlo por teclado al nombre también).numero +'<br>'). document. Al número que selecciona lo cargamos por teclado.verificarsigano(bolillero.verificarsigano(bolillero.cargarnumero(). document.nombre + ' eligió ' + numeroquiniela1.sortear().cargarnumero().write(numeroquiniela1.write('Numero sorteado:' + bolillero.write(numeroquiniela2. La clase Numeroquiniela además tiene otra responsabilidad. } if (numeroquiniela2.

} function retornarhipervinculo() { var cadena. . cadena='<a href=' + this. vector[1]=new Hipervinculo('http://www.titulo) { this.msn.retornarhipervinculo=retornarhipervinculo. La clase hipervínculo es: <script type="text/javascript"> function Hipervinculo(direccion.direccion=direccion.com'. Con un ejemplo veremos la sintaxis para trabajar con los mismos.direccion + '>' + this.'msn'). vector[0]=new Hipervinculo('http://www.'google'). } </script> Luego el bloque donde se usa la clase Hipervínculo es: <script type="text/javascript"> var vector=new Array(3). Podemos crear vectores con componente de tipo objeto.google.Por otro lado en la página html definimos dos objetos de la clase Numeroquiniela y uno de la clase Bolillero: Vectores con componentes de tipo objeto. return cadena.com'. this.titulo=titulo. Desarrollaremos una clase que represente un hipervínculo y luego definiremos un vector con componentes de tipo hipervinculo.titulo + '</a>'. this.

document. la dirección del sitio y el texto a mostrar en la página.write(vector[f].length. vector[2]=new Hipervinculo('http://www.f++) { document.yahoo. for(var f=0.f<vector.retornarhipervinculo() ). deposito: 0.write('<br>'). Veamos con un ejemplo esta técnica: <html> <head> </head> <body> <script type="text/javascript"> var cliente1= { nombre: 'Juan'. Luego recorremos con un 'for' las componentes del vector e imprimimos en la página cada hipervínculo.'yahoo').com'. } </script> Creamos un objeto de la clase Array y luego guardamos en cada componente un objeto de la clase hipervínculo (pasándole como parámetros al constructor. Esta forma se la llama Objetos literales Esta metodología consiste en definir una lista de propiedades y sus valores. imprimir: function () { . Creación de objetos literales Veremos ahora otra forma muy utilizada en Javascript para definir objetos.

document.write(this.nombre+'<br>');
document.write(this.deposito+'<br>');
},
depositar: function(monto) {
this.deposito=this.deposito+monto;
},
extraer: function(monto) {
this.deposito=this.deposito-monto;
}
};

cliente1.imprimir();
cliente1.depositar(1000);
document.write('Estado luego de depositar
1000 pesos</br>');
cliente1.imprimir();
cliente1.extraer(200);
document.write('Estado luego de extraer 200
pesos</br>');
cliente1.imprimir();

</script>

</body>
</html>

En este ejemplo hemos creado un objeto literal llamado cliente1, la sintaxis
mínima para crear un objeto vacío sería:
var cliente1= {};

Es decir creamos una variable llamada cliente1 y le asignamos un bloque
encerrado entre llaves vacío. Es importante notar el punto y coma al final de
la llave de cerrado (como ocurre cuando asignamos un valor a una variable)

Veamos ahora si decimos que el objeto cliente1 define la propiedad nombre,
luego nuestro objeto quedará definido con la sintaxis:
var cliente1= {

nombre: 'Juan'
};

Decimos que la propiedad nombre almacena el string 'Juan', del lado
izquierdo indicamos el nombre de la propiedad y del lado derecho de los
dos puntos indicamos el valor de la propiedad del objeto (el valor puede ser
de cualquier tipo, en este caso es de tipo string pero podría ser de tipo
number, boolean, object, Array etc.)

Ahora si agregamos una segunda propiedad a nuestro objeto cliente1
llamada deposito (que representa la cantidad de dinero que tiene
depositado el cliente1) la sintaxis queda:
var cliente1= {
nombre: 'Juan',
deposito: 0
};

Como podemos observar separamos por coma cada inicialización de
propiedad del objeto (menos para la última propiedad donde aparece la "}".

Las funciones del objeto también definimos una sintaxis similar a la
declaración de sus propiedades:
var cliente1= {
nombre: 'Juan',
deposito: 0,
imprimir: function ()
{
document.write(this.nombre+'<br>');
document.write(this.deposito+'<br>');
},
depositar: function(monto) {
this.deposito=this.deposito+monto;
},
extraer: function(monto) {
this.deposito=this.deposito-monto;
}
};

Del lado izquierdo de los dos puntos indicamos el nombre de la función y del
lado derecho utilizamos la palabra clave function junto con los parámetros.

En la función podemos acceder a las propiedades del objeto antecediendo
la palabra clave this.

Ahora solo nos falta hacer la llamada a las funciones del objeto cliente1:
cliente1.imprimir();

cliente1.depositar(1000);
document.write('Estado luego de depositar 1000 pesos</br>');
cliente1.imprimir();
cliente1.extraer(200);
document.write('Estado luego de extraer 200 pesos</br>');
cliente1.imprimir();

Array: Diferentes formas de crearlos

Como hemos visto un array o arreglo es una estructura de datos que
permite almacenar elementos y luego acceder a los mismos por medio de
subíndices.

Recordemos que Javascript administra los array mediante un objeto
especializado llamado Array.

Un array puede almacenar en sus componentes elementos de datos
distintos y su tamaño puede crecer a lo largo de la ejecución del programa.

Tenemos muchas formas de inicializar un array en Javascript según nuestra
situación particular, veamos con ejemplos diferentes formas:

Creación de un array sin elementos:
var vector1=new Array();

Otra sintaxis para crear un array sin elementos:
var vector2=[];

Creación de un array indicando la cantidad de componentes iniciales que
podrá almacenar:
var vector3=new Array(5);

Creación e inicialización llamando al constructor Array y pasando como
parámetros los valores a almacenar en las componentes:
var vector4=new Array(1,70,'juan');

Creación e inicialización de un array utilizando los corchetes:
var vector5=[1,70,'juan'];

vector1[0]=1. document. var vector5=[1. var vector2=[]. document. vector2[0]=1.'juan']. document.70.write(vector3[0]+'<br>'). vector3[0]=1. document. cargue algunos elementos y muestre la primer componente de cada uno de ellos: <html> <head> </head> <body> <script type="text/javascript"> var vector1=new Array().70.'juan').write(vector2[0]+'<br>').write(vector4[0]+'<br>'). var vector3=new Array(5). </script> </body> </html> Array: densos .write(vector1[0]+'<br>').write(vector5[0]+'<br>').Para probar las distintas formas de creación de array implementaremos un programa que cree 5 Array. var vector4=new Array(1. document.

Problema Crear un vector vacío. La propiedad length almacena la cantidad de componentes que tiene el vector. Una propiedad de suma utilidad trabajando los vectores sin dejar subíndices sin utilizar es la propiedad length. var indice=0. do { valor=prompt('Ingrese un valor entero (0 para finalizar)'. mostrar dicha suma y el tamaño del vector. var valor. No almacenar dicho valor en el vector.Todos los vectores donde almacenamos en forma contigua todos sus elementos son llamados array densos. Mediante una estructura repetitiva solicitar la carga de elementos por teclado hasta que se ingrese el cero. valor=parseInt(valor). } } while (valor!=0). Luego sumar todas las componentes del vector. if (valor!=0) { vec[indice]=valor.''). Almacenar elementos siguiendo esta premisa tiene como ventaja poder acceder a sus elementos mediante una estructura repetitiva disponiendo el contador del for como subíndice. indice++. var f. . <html> <head> </head> <body> <script type="text/javascript"> var vec=[].

var suma=0.write('La suma de los valores ingresados es:'+suma). } . indice++.length+' valores<br>').f++) { suma=suma+vec[f].length. } document. valor=parseInt(valor).write('Se ingresaron '+vec. document. indice++. if (valor!=0) { vec[indice]=valor. for(f=0. Creamos una estructura repetitiva do/while que se ejecutará hasta que ingresemos en la variable valor el cero: do { valor=prompt('Ingrese un valor entero (0 para finalizar)'. </script> </body> </html> Definimos un vector vacío: var vec=[]. Cada vez que se ingresa un valor distinto a cero se lo asignamos a una componente del vector y para que ocupen posiciones consecutivas definimos un contador llamado indice que se inicializa en cero previo a la estructura repetitiva: if (valor!=0) { vec[indice]=valor.'').f<vec. } } while (valor!=0).

Cuando salimos del do/while mostramos el atributo length del vector y sumamos sus componentes para mostrar dicho acumulador.length+'<br>'). Array: no densos o dispersos Hasta ahora siempre que inicializamos los array no dejamos espacios sin utilizar. Este tipo de array se los llama array dispersos ya que no tenemos todas las componentes contiguas ocupadas. Veamos con un ejemplo que pasa con la propiedad length y cuando accedemos a componentes que no existen en el vector: <html> <head> </head> <body> <script type="text/javascript"> var vec=[].f++) { document. Javascript permite crear array e inicializar componentes no contiguas.f<vec.write(vec[f]+'<br>'). for(f=0. vec[10]=200.write('Atributo length:'+vec. Por ejemplo podemos crear un vector e inicializar las componentes con subíndice 5 y 10: var vec=[]. vec[10]=200. vec[5]=100. document.length. var f. } . vec[5]=100.

</script> </body> </html> Si ejecutamos este programa la salida en la página será: Atributo length:11 undefined undefined undefined undefined undefined 100 undefined undefined undefined undefined 200 Como podemos ver el atributo length almacena teniendo en cuenta la posición más grande asignada (en nuestro ejemplo vec[10]) Por otro lado cuando accedemos a componentes no inicializadas obtenemos el valor "undefined". Almacenar en un vector. no significa que se reservan más de veinte millones de componentes para los otros elementos del vector. utilizar como subíndice el nro de cliente y almacenar el monto depositado. Sumar todos los depósitos recorriendo el vector e identificando las componentes cargadas (es decir las que tienen un valor distinto a null). <html> . Imprimir la suma total depositada y la cantidad de clientes que depositaron. luego si asignamos como subíndice el dni de una persona: dni[20438470]=100. Es bueno tener en cuenta que las componentes no inicializadas no reservan espacio en memoria. Problema Ingresar por teclado un nro de cliente y el monto a depositar. La reserva de espacio sucede a medida que ocupamos espacios del vector.

var nro.''). depositos[nro]=monto. for(var f=0.write('Cantidad de depósitos:'+canti+'<br>').f++) { if (depositos[f]!==undefined) { suma=suma+depositos[f]. nro=parseInt(nro).<head> </head> <body> <script type="text/javascript"> var depositos=[]. } } while (nro!=0).length. do { nro=prompt('Ingrese nro de cliente'. if (nro!=0) { monto=prompt('Ingrese monto a depositar'.monto. canti++. var canti=0.f<depositos. } } document.write('Total depositado por todos los clientes:'+suma). document. </script> </body> </html> . var suma=0. monto=parseInt(monto).'').

los mismos tienen una serie de métodos que nos facilitan trabajar con ellos. vec[1]=20.f<depositos.f++) { if (depositos[f]!==undefined) { suma=suma+depositos[f]. depositos[nro]=monto. cuando ingresamos en la variable nro un valor distinto a cero procedemos a almacenar en el vector en la posición indicada por nro el valor cargado en monto: do { nro=prompt('Ingrese nro de cliente'.'').Como vemos el do/while finaliza cuando ingresamos un 0. Para insertar elementos en un vector hemos visto que con solo asignar un valor al vector en un determinado índice el dato queda almacenado y eventualmente el atributo length modificado: var vec=[].length. //imprime 2 . } } while (nro!=0). Cuando sale del do/while mediante un ciclo for analizamos cada una de las componentes posibles del vector verificando si el valor es distinto a undefined (es importante notar que debemos utilizar el operador relacionar !== en lugar de != ya que no funcionaría cuando una componente almacene null): for(var f=0. if (nro!=0) { monto=prompt('Ingrese monto a depositar'.''). vec[0]=10.length). monto=parseInt(monto). nro=parseInt(nro). canti++.write(vec. } } Array: métodos push y pop Como los Array en Javascript son objetos. document.

20. //imprime 4 vec.length+'<br>').length). Almacenar todos los valores ingresados en un vector empleando el método push. Este método añade el valor al final del vector: var vec=[].write(vec. Podemos inclusive llamar al método push pasando más de 1 parámetro: var vec=[]. Una variante para resolver este mismo problema es utilizar el método push del objeto Array. vec. //imprime 2 El método inverso llamado pop extrae el último elemento del Array y decrementa en uno el atributo length: var vec=[]. document.40). <html> <head> </head> <body> .push(20). //imprime 2 Automáticamente cuando llamamos al método push el valor que le pasamos en el parámetro se almacena en el vector y se incrementa el atributo length. Mostrar la suma de sueldos ingresados. //imprime 2 El método pop() además de eliminar el último elemento del vector retorna el valor almacenado en dicha componente.length+'<br>'). document.write(vec. Si llamamos al método pop y el vector está vacío retorna el valor undefined. //imprime 3 document.Esta sintaxis tenemos que tener cuidado como variamos el subíndice para no dejar componentes vacías si queremos implementar un array denso. vec. document.push(10).write(vec.length+'<br>'). //imprime un 30 document.write(vec.length).30.pop()+'<br>'). vec. vec.pop(). document.write(vec.push(10.20). Problema Realizar la carga de sueldos por teclado hasta que se ingrese el cero.write(vec.push(10.

} } while (monto!=0).push(monto).length. var suma=0. for(var f=0. do { monto=prompt('Ingrese el sueldo (0 para finalizar):'.push(monto).write('El total en sueldos ingresado es:'+suma). </script> </body> </html> De esta forma no llevamos un contador para indicar la posición donde se debe almacenar la componente en el vector: sueldos. monto=parseInt(monto).'').<script type="text/javascript"> var sueldos=[]. } document. Array: métodos unshift y shift . var monto.f++) { suma=suma+sueldos[f].f<sueldos. if (monto!=0) { sueldos.

Se finaliza la carga de datos al ingresar el cero. do { valor=prompt('Ingresar un valor (0 para finalizar):'.''). Cuando sale del do/while extraer el último valor ingresado que es el cero del vector. if (valor<100) { vec. Imprimir el vector en la página <html> <head> </head> <body> <script type="text/javascript"> var vec=[]. } else { vec.push(valor).unshift(valor).shift(). Problema Ingresar valores por teclado. El método shift extrae el primer elemento del vector y desplaza hacia delante el resto de elementos del vector. . vec. var f. } } while (valor!=0). Los valores menores a 100 ingresarlos al principio del vector y los mayores o iguales a 100 ingresarlos al final. var valor. valor=parseInt(valor).Así como el método push inserta un elemento al final del vector el método unshift inserta un elemento al principio el vector y desplaza el resto una posición.

} Fuera del do/while procedemos a extraer el primer elemento del vector que es el cero: vec.write(vec[f]+'<br>'). } </script> </body> </html> Si el valor es menor a 100 procedemos a llamar al método unshift que lo inserta al principio del vector en caso contrario se inserta al final mediante el método push: if (valor<100) { vec.f++) { document.f++) { document.write(vec[f]+'<br>').f<vec. Finalmente procedemos a imprimir en forma completa el vector: for(f=0. Al comando delete le pasamos el nombre del vector y la posición que queremos borrar: .length. } else { vec.shift().push(valor).f<vec.length. for(f=0. } Array: instrucción delete Javascript tiene una instrucción que permite eliminar un elemento de un vector llamada delete.unshift(valor).

Si luego tratamos de acceder a dicha posición el resultado es el valor undefined. for(f=0. } for(f=0. inclusive tratar de acceder a las componentes que acabamos de borrar. var f.f++) { var valor=parseInt(Math.f<10. for(f=0.f=f+2) { delete vec[f]. <html> <head> </head> <body> <script type="text/javascript"> var vec=[]. } document. vec. . Luego borrar los elementos de las posiciones pares e imprimir el vector antes y después de borrar las componentes.push(valor).write(vec[f]+'<br>'). } document.write('Vector antes de borrar<br>').f++) { document.f<10.f<10. Problema Crear un vector de 10 elementos y almacenar valores aleatorios en el mismo. Cuando se elimina una componente no se modifica la propiedad length y el vector se convierte en no denso.write('Vector luego de borrar las posiciones pares<br>').random()*1000). Con el comando anterior estamos eliminando la componente de la posición 3 del vector. delete vec[3].

push(valor).f<10.f++) { var valor=parseInt(Math. } Por último procedemos a mostrar el vector donde podemos comprobar que al tratar de acceder a componentes que se han eliminado el resultado es el valor undefined. el resultado completo de la ejecución del programa es: Vector antes de borrar 931 354 246 876 802 980 957 307 998 640 Vector luego de borrar las posiciones pares undefined 354 . } </script> </body> </html> Creamos y cargamos el vector con 10 enteros aleatorios: var vec=[].f=f+2) { delete vec[f].f++) { document. for(f=0. vec.write(vec[f]+'<br>'). for(f=0.random()*1000).f<10. var f. } Procedemos a borrar los elementos de las posiciones pares del vector utilizando el comando Javascript delete (veamos que dentro del for incrementamos f en 2 en cada vuelta del ciclo): for(f=0.f<10.

La sintaxis más sencilla y por defecto es para ordenar una lista de string: <html> <head> </head> <body> <script type="text/javascript"> var nombres=['marcos'. } .'carlos' ].write(nombres[f]+'<br>').f<nombres. for(f=0.f++) { document.'ana'.'luis'.f++) { document.undefined 876 undefined 980 undefined 307 undefined 640 Array: métodos sort y reverse Otro método muy útil de la clase Array es sort. } nombres.write('Vector antes de ordenarlo<br>').f<nombres.write('Vector después de ordenarlo<br>'). document.write(nombres[f]+'<br>').'jorge'.length. for(f=0. document.sort(). var f.length.

'jorge'.sort(). for(f=0. Luego con llamar simplemente al método sort el mismo se encarga de intercambiar las componentes de tal forma que el menor alfabéticamente se encuentra al principio y así sucesivamente: nombres. document.f<vec.f++) { document.</script> </body> </html> Como vemos creamos un vector con una lista de string: var nombres=['marcos'. var f.5. else .length.v2) { if (v1>v2) return 1. } vec.write(vec[f]+'<br>').'luis'.write('Vector antes de ordenarlo<br>').sort(function(v1.'carlos'].3. Para ordenar una lista de enteros se complica el algoritmo ya que debemos pasar al método sort una función anónima indicando como implementar la comparación entre elementos: <html> <head> </head> <body> <script type="text/javascript"> var vec=[100.90].'ana'.60.

document. else return 0.write('Vector después de ordenarlo<br>'). Esta función debe retornar un valor mayor a cero si queremos que se intercambien los elementos y cero si queremos dejar los dos elementos del vector sin ser intercambiados.v2) { if (v1>v2) return 1. El siguiente método a analizar en este concepto es reverse(). Los parámetros v1 y v2 son los elementos que se comparan.f++) { document.write(vec[f]+'<br>'). Ordenarlos de menor a mayor.length. Nos puede ser de utilidad si tenemos ordenado un vector en orden ascendente y lo queremos en forma descendente. Problema Crear un vector con 10 elementos enteros con valores aleatorios. }). <html> . for(f=0. }). Luego invertir el vector para verlo de mayor a menor. Si v1 es mayor a v2 significa que queremos intercambiarlos para que el mayor se desplace hacia el final del vector.f<vec. return 0.sort(function(v1. como podemos intuir este método invierte el orden de los elementos del vector. } </script> </body> </html> Como vemos al método sort hemos pasado una función que retorna un 1 o 0: vec.

for(f=0. } vec. for(f=0. for(f=0.f<vec.write(vec[f]+'<br>'). } vec.<head> </head> <body> <script type="text/javascript"> var vec=new Array(10).length. var f.f++) { document.write(vec[f]+'<br>').f<vec. document.write('Vector ordenado en forma ascendente<br>').f<vec.f++) { document.length.length. document. }). } </script> </body> </html> .f++) { vec[f]=parseInt(Math.write('Vector ordenado en forma descendente<br>').random()*1000).v2) { if (v1>v2) return 1.sort(function(v1.reverse(). else return 0.

el anteúltimo pasa a ser segundo y así sucesivamente) .El resultado de ejecutar el programa es: Vector ordenado en forma ascendente 32 131 329 364 488 515 860 864 919 919 Vector ordenado en forma descendente 919 919 864 860 515 488 364 329 131 32 Como vemos luego de imprimirlo en forma ordenada procedemos a llamar al método reverse() que invierte los elementos del vector (es decir el último pasa a ser primero.