Estructuras condicionales simples en JavaScript

Antes de empezar con las estructuras condicionales nos familiarizaremos con los operadores que podemos utilizar. Estos

operadores nos servirn para comparar dos valores dentro de las estructuras condicionales y sirven tan slo para nmeros:

> mayor
>= mayor o igual
< menor
<= menor o igual
!= distinto
== igual

Adems de stos operadores tenemos los operadores lgicos:

&& equivale a y
|| equivale a o

No os preocupis si aun no entendis alguna cosa, la mayora los veremos en ejemplos ms adelante y si no siempre

podis comentar con vuestras preguntas o enviar un mail desde el link de contacto que hay en la barra de men arriba en la

pgina.

Ahora empecemos con las estructuras condicionales. Hay tres tipos de estructuras condicionales: las simples, las

compuestas y las compuestas anidadas. Primero veamos la estructura general de una condicional simple:

if (condicin) {
Comandos
}

Vemos que toda estructura condicional empieza con if (si) seguido de la condicin entre parntesis (). Si la condicin se

cumple entonces se ejecutara lo que quede encerrado entre los signos {}, los comandos. Los signos {} marcan el inicio y el

fin de los comandos en una estructura condicional. Veamos un ejemplo:

Crea un programa en el que se pueda insertar la nota de un alumno y te diga si ste est aprobado o suspendido:

var nota;
nota=prompt('Nota del alumno','');
if (nota>=5)
{
alert("El alumno ha aprobado con un
"+nota)
}
Ahora analicemos el cdigo lnea por lnea:

var nota;

nota=prompt('Nota del alumno','');

Estos dos comandos ya los conocemos, el primero sirve para definir nota como una variable y el segundo lo que hace es

crear una entrada de datos por teclado con el comando prompt y luego almacena sta informacin en la variable ya

definida nota.

if (nota>=5)

Aqu vemos el comando if seguido de la condicin. La condicin como podemos ver est entre parntesis y lo que hace es

comparar la variable nota con el numero 5 utilizando el operador >= (mayor o igual). Para que esto se entienda mejor

tratemos de traducir lo que sta lnea nos dice:

if (nota>=5)

Si la nota s mayor o igual a 5

alert("El alumno ha aprobado con un "+nota)

El cdigo ahora empieza con el signo {. Como hemos dicho antes lo que este signo nos marca es el inicio de los comandos

en una estructura condicional.

En la siguiente lnea vemos el comando alert el cual ya hemos visto en ocasiones anteriores. Recordemos que sirve para

mostrar datos por pantalla en una ventana. Dentro de ste comando vemos algo nuevo, el signo + seguido de la variable.

Hacemos esto para hacer que el comando alert pueda ejecutar una cadena de texto

Y a la vez mostrar por pantalla el resultado de la variable nota. A esto se le llamaconcatenar.

Ahora veamos traducido lo que todo el programa hara tal y como hemos hecho antes.

if (nota>=5)

{
alert("El alumno ha aprobado con un "+nota)

Si la nota es mayor o igual a 5

Di que el alumno ha aprobado con X nota.

Ahora veamos el cdigo a la prctica:

Al clicar se os pedir que insertis una nota (del 0 al 10). Si la nota es igual o superior a 5 se mostrar una segunda ventana

justo despus que dir que el alumno ha aprobado. En caso de que la nota sea 4 o menor no se mostrar esta segunda

ventana.
Estructuras condicionales compuestas y anidadas en JavaScript
Una vez hemos aprendido cmo funcionan las estructuras condicionales simples es muy fcil aprender el funcionamiento de

las estructuras condicionales compuestas. De nuevo, veamos un ejemplo de cmo es su estructura general:

if (condicin)
{
comandos
}
else
{
comandos
}

La primera parte de la estructura la conocemos ya, lo nico que vemos de nuevo es else. Lo que else marca es que en caso

de que no se cumpla la condicin se ejecuten otra serie de comandos distinta. Veamos un ejemplo de cmo usarlo:

Crea un programa en el que se inserten dos nmeros y l elija cual es el mayor de los dos:

var primero;
var segundo;
numero1=prompt('Inserta el primer
numero','');
numero2=prompt('Inserta el segundo
numero,'');
if (numero1>numero2) {
alert(numero1+" es mayor que "+numero2);
}
else {
alert(numero2+" es mayor que "+numero1);
}

El programa nos dir si el primer nmero es mayor que el segundo, en caso de que no sea as nos dir que el segundo

nmero era mayor que el primero. Aqu tenis el resultado del programa anterior:

Ahora que hemos visto las estructuras condicionales compuestas veamos la estructura de una condicional anidada:

if (condicin)
{
comandos
}
 else
{
if (condicin)
{
comandos
}
else
{
if (condicin)
{
comandos
}
}
}

Vemos que se crea una condicin, si esta no se cumple se sigue a otra condicin y as sucesivamente hasta que nosotros

queramos que acabe el programa. Ahora vemosla con un ejemplo:

Crea un programa en el que se inserten 3 nmeros y te muestre el mayor de los tres.

var primero,segundo,tercero;
primero=prompt('Primer nmero','');
segundo=prompt('segundo nmero','');
tercero=prompt('tercer nmero','');
if (primero>segundo && primero>tercero)
{
alert(primero+" es mayor que "+segundo+" y "+tercero);
}
else
{
if (tercero>segundo && tercero>primero)
{
alert(tercero+" es mayor que "+segundo+" y "+primero);
}
else
{
alert(segundo+" es mayor que "+tercero+" y "+primero);
}
}

He usado el operador lgico &&, ste lo que hace es que se tenga que cumplir ms de una condicin para que se ejecuten

los comandos de la estructura if:

if (primero>segundo && primero>tercero)

Aqu la variable primero tiene que ser ms grande que segundo y adems la misma variable tiene que ser mayor

que tercero para que se cumpla la condicin. A continuacin dejo el resultado del programa anterior:
Estructura switch en JavaScript
La estructura switch nos sirve para cuando queremos que un programa haga algo muy concreto dependiendo del valor que

tenga una variable. La estructura general es la siguiente:

switch (variable)
{
case X: comandos
break;
case Y: comandos
break;
case Z: comandos
break;
default: comandos
break;
}

Y ahora veamos un ejemplo de un programa en el que podamos usar la estructura switch, por ejemplo, queremos que al

insertar un nmero del 1 al 5 el programa nos lo escriba con letras:

var numero;
numero=prompt('Inserte un nmero del 1 al 5','');
numero=parseInt(numero);
switch (numero)
{
case 1: alert('uno');
break;
case 2: alert('dos');
break;
case 3: alert('tres');
break;
case 4: alert('cuatro');
break;
case 5: alert('cinco');
break;
default: alert('El nmero debe estar entre el 1 y el
5!');
break;
}

Lo que la estructura switch hace es comparar la variable numero con cada caso que nosotros queramos ponerle, en nuestro

idioma sera algo as:

En caso de que la variable sea 1 entonces diremos "uno".

En caso de que la variable sea 2 entonces diremos "dos".

[...]

En caso de la variable no coincida con ningn caso entonces diremos "El nmero debe estar entre el 1 y el 5!".

En el cdigo anterior adems vemos un comando nuevo, parseInt(numero). Esto lo que hace es que el programa trate la

variable numero como un valor numrico entero y no como una cadena de texto. Si no hicisemos esto tendramos que

poner el nmero de cada caso entre "" de esta manera:

case "x": comandos

El resultado del programa anterior es este:

Estructura while en JavaScript
Esta estructura tiene similitudes con la estructura if, el rasgo distintivo que tiene es que la estructura tiene la capacidad de

repetirse una y otra vez mientras queramos. Empecemos de nuevo por lo general:

while (condicin)
{
comandos
}

Lo que el comando while dice es que mientras la condicin se cumpla los comandos se ejecutaran una y otra vez. Ahora

veamos qu tiene de til esto, vamos a hacer un programa que nos escriba los diez primeros nmeros de la tabla del 13 por

pantalla:

var resultado, multiplicador;

x=0;
multiplicador=0;
while (multiplicador<10)
{
resultado=multiplicador * 13;
document.write(multiplicador+"x13="+resultado);
document.write('
');
multiplicador=multiplicador+1;
}

while (multiplicador<10)

multiplicador=multiplicador+1;

Las lneas clave aqu son estas dos, como podemos ver en el cdigo los comandos dentro del bucle while se van repitiendo

una y otra vez siempre que la variablemultiplicador sea menor que 10. La variable multiplicador adems la utilizamos para

multiplicarla por 13 cada vez para que nos d un resultado que imprimimos por pantalla. Cuando el bucle llegue a 9

(teniendo en cuenta que hemos empezado en el nmero 0 se habr ejecutado ya 10 veces) entonces parar y podremos

ver tranquilamente el resultado por pantalla.

document.write(multiplicador+"x13="+resultado);

Recordemos que el comando document.write imprime por pantalla a diferencia del comando alert, que nos mostraba una
ventana con el resultado.

document.write('<br>');

Finalmente, esta linea nos sirve para que nuestro documento ejecute la etiqueta de html <br> dejando asi cada operacin

en una lnea distinta haciendo que se pueda ver con mucha ms claridad todo.

Para ver lo que se nos muestra clicad en el siguiente botn:

ver resultado

(puede que no funcione ya que me temo que blogger bloquea el cdigo por alg
Primeros pasos para crear una pequea web
Ahora que tenemos unos conocimientos basicos tanto de html como de javascript, podemos hacer una pequea web con un

proposito concreto. Haremos un ejemplo ficticio en el que hacemos una pgina para una protectora de animales, de forma

que la gente podr enviar solicitudes fcilmente para ayudar como voluntarios. Para disearla primero debemos seguir unos

pasos:

Definir el propsito de nuestra web: Esta pequea web estar orientada a que la gente pueda contactar con

nosotros fcilmente a la vez que demos la informacin necesaria de una forma clara.

Definir cual sera el contenido: Contendr una parte de informacin y un formulario de contacto. La informacin

que proporcionaremos a los voluntarios potenciales ser el lugar en el que pueden ayudar y los horarios de

asistencia as como informacin sobre los trabajos que desarrollaran a lo largo de esas horas. En el formulario

pediremos el nombre del voluntario, su edad y la experiencia.

Decidir cmo la presentaremos: sta parte es muy importante ya que una web ha de ser agradable visualmente a

la vez que rpida. Por ahora nosotros incluiremos simplemente una imagen relacionada con la informacin que

proporcionamos y el formulario al final de pgina.

Finalmente, crear la pagina: Ahora ya solo debemos escribir el texto y crear el formulario de contacto. Ahora nos

centraremos en el formulario ya que el contenido puede ser el que queramos.

<form action="pagina2.php" method="post">

Nombre:
<input type="text" name="nombre">
Edad:
<input type="text" name="edad" size = "4">
<textarea name ="exp">Experiencia</textarea>
<input type="submit" value="enviar datos">
</form>

Y el resultado del cdigo anterior:

Nombre:

Edad:

enviar datos

Y que hay del contenido de la "pagina2.php"? Pondre el cdigo php necesario para crear un formulario que funcione sin

explicarlo todavia:
<?php
$a = "nuestromail@ejemplo.com";
$asunto = $_REQUEST['nombre'];
$cuerpo = "Edad " . $_REQUEST['edad'] . " Experiencia: " . $_REQUEST['exp'];
mail($a, $asunto, $cuerpo)
?>
Estructura y comandos bsicos de un programa en JavaScript
Todo programa en JavaScript ha de seguir una serie de pautas antes de poder ejecutarse. Para explicar lo mas esencial de

este lenguaje de programacin empezaremos por un programa de lo ms sencillo y lo explicaremos lnea por lnea. El

programa que viene a continuacin no es muy til, pero ir bien para introducirse en este lenguaje:

<Script language="javascript">
docmument.write("hello world");
</Script>

Y ahora expliqumoslo:

<Script language="javascript">

Esta primera lnea lo nico que marca es que, dentro de una pgina hecha en HTML vamos a insertar un cdigo en

JavaScript.

docmument.write="hello world";

La segunda es el primero comando en JavaScript que veremos document.write. La funcin es simplemente la de mostrar un

texto o una variable en pantalla. Si lo que queremos mostrar es un texto tendremos que poner las comillas (" ") en cambio

no hacen falta si lo que queremos es mostrar una variable. El punto y coma (;) se deber poner al final de cada comando en

JavaScript.

</Script>

La ltima lnea simplemente marca el fin del cdigo en JavaScript. Como podemos ver el programa no es til ya que lo

nico que hace es mostrar por pantalla hello world. Aqu podemos ver el resultado:

hello world

Ahora para ver bien cmo las variables funcionan pondremos un ejemplo de un programa que cumpla la misma funcin,

pero en este caso usaremos una variable. Veamos como lo haramos en ste caso.

<Script language="javascript">
var saludo;
saludo="hello world";
docmument.write(saludo);
</Script>
En ste cdigo vemos algunas lneas nuevas:

var saludo;

sta lnea sirve tan slo para marcar que a partir de ahora saludo ser una variable.

saludo="hello world";

Ahora vemos como saludo pasa a tener el valor de hello world almacenado.

docmument.write(saludo);

Ahora imprimimos en pantalla la variable saludo. Como se trata de una variable no hace falta ponerle las comillas (" "). Y

como ahora veremos el resultado ser el mismo:

hello world

Ahora aclarar que las variables no necesitan las comillas (" ") tal y como he dicho antes, pero si lo que queremos es

mostrar la palabra saludo podramos ponerla entre comillas de sta manera

document.write("saludo");

As el programa no tratara a la palabra saludo como una variable sino como una cadena de texto.

Para finalizar con esta pequea introduccin os mostrar como entrar datos desde el teclado a un programa de javascript.

Primero veremos la sintaxis del comando:

<script language="javascript">
prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto');
</script>

ms adelante en el tutorial se explicar cmo ejecutar javascript usando un botn como ese.
Pero haciendo eso los datos no van a parar a ningn lado as que lo que tenemos que hacer es que lo que insertemos por

teclado quede almacenado dentro de una variable. sto lo conseguimos con lo siguiente:

datos=prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto');

Ahora los datos quedaran almacenados dentro de la variable a la que hemos llamadodatos y podemos hacer un pequeo

programa para demostrar que realmente los datos han sido procesados. sto es muy sencillo:

<script language="javascript">
datos=prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto');
alert(datos);
</script>

Y por ltimo en esta primera leccin aclarar que como podis ver, alert lo nico que hace es mostrar una ventana con la

informacin que queramos, el este caso le hemos dicho que nos muestre el valor de la variable datos que antes hemos

definido. Tambien he de decir que he puesto los dos comandos por separado en dos botones distintos para que se distinga

bien lo que est pasando, primero ejecutamos uno y luego el otro.