5.1 Estructuras de control en Javascript
Para realizar cosas más complejas en nuestros scripts se utilizan las estructuras de control.
Con ellas podemos realizar tomas de decisiones y bucles.
5.1.1 Toma de decisiones
Sirven para realizar unas acciones u otras en función del estado de las variables. Se enuncian mediante:
- IF
- SWITCH
5.1.2 Bucles
Los bucles se utilizan para realizar ciertas acciones repetidamente. En javascript existen varios tipos de bucles:
- FOR
- WHILE
- DO WHILE
5.2 Estructura IF en Javascript
IF es una estructura de control que sirve para realizar unas u otras operaciones en función de una expresión.
La sintaxis de la estructura IF es la siguiente.
if (expresión) {
//acciones a realizar en caso positivo
//...
}
Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluación de la sentencia devuelva resultados negativos.
if (expresión) {
//acciones a realizar en caso positivo
//...
} else {
//acciones a realizar en caso negativo
//...
}
Las llaves engloban las acciones que queremos realizar en caso de que se cumplan o no las expresiones.
Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado en cada uno de los bloques de instrucciones a ejecutar en los casos positivos y negativos.
Ejemplo de condicionales IF:
if (credito >= precio) {
document.write("has comprado el artículo " + nuevoArtículo)//enseño compra
carrito += nuevoArticulo //introduzco el artículo en el carrito de la compra
credito -= precio //disminuyo el crédito según el precio del artículo
} else {
document.write("se te ha acabado el crédito") //informo que te falta dinero
window.location = "carritodelacompra.html" //voy a la página del carrito
}
En este ejemplo lo que hago es comprobar si tengo crédito para realizar una supuesta compra. Para ello miro si el crédito es mayor o igual que el precio del artículo, si es así informo de la compra, introduzco el artículo en el carrito y resto el precio al crédito acumulado. Si el precio del artículo es superior al dinero disponible informo de la situación y mando al navegador a la página donde se muestra su carrito de la compra.
5.2.1 Expresiones condicionales
La expresión a evaluar se coloca siempre entre paréntesis y está compuesta por variables que se combinan entre si mediante operadores condicionales. Los operadores condicionales relacionaban dos variables y devolvían siempre un resultado boleano.
Las expresiones condicionales se pueden combinar con las expresiones lógicas para crear expresiones más complejas. Las expresiones lógicas tienen como operandos a los boleanos que devuelven otro valor boleano. Son los operadores negación lógica, Y lógico y O lógico.
if (bateria < 0.5 && redElectrica == 0)
document.write("tu ordenador portatil se va a apagar en segundos")
Lo que hacemos es comprobar si la batería de nuestro supuesto ordenador es menor que 0.5 (está casi acabada) y también comprobamos si el ordenador no tiene red eléctrica (está desenchufado). Luego, el operador lógico los relaciona con un Y, de modo que si está casi sin batería Y sin red eléctrica, informo que el ordenador se va a apagar.
5.3.1 Sentencias IF anidadas
Para hacer estructuras condicionales más complejas podemos anidar (colocar) estructuras IF dentro de otras estructuras IF.
Por ejemplo, si deseo comprobar si un número es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos números son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todavía tendré que ver cuál de los dos es mayor. Veamos este ejemplo en código:.
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos números son iguales")
}else{
if (numero1 > numero2) {
document.write("El primer número es mayor que el segundo")
}else{
document.write("El primer número es menor que el segundo")
}
}
if (bateria < 0.5 && redElectrica == 0)
document.write("tu ordenador portatil se va a apagar en segundos")
Lo que hacemos es comprobar si la batería de nuestro supuesto ordenador es menor que 0.5 (está casi acabada) y también comprobamos si el ordenador no tiene red eléctrica (está desenchufado). Luego, el operador lógico los relaciona con un Y, de modo que si está casi sin batería Y sin red eléctrica, informo que el ordenador se va a apagar.
5.3 Estructura IF (parte II)
La estructura if es de las más utilizadas para tomar decisiones en función de la evaluación de una sentencia.
5.3.1 Sentencias IF anidadas
Para hacer estructuras condicionales más complejas podemos anidar (colocar) estructuras IF dentro de otras estructuras IF.
Por ejemplo, si deseo comprobar si un número es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos números son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todavía tendré que ver cuál de los dos es mayor. Veamos este ejemplo en código:.
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos números son iguales")
}else{
if (numero1 > numero2) {
document.write("El primer número es mayor que el segundo")
}else{
document.write("El primer número es menor que el segundo")
}
}
5.4 Estructura SWITCH de Javascript
La estructura de control switch es utilizada para tomar decisiones en función de distintos estados o valores de una variable.
Switch es una estructura que permite hacer múltiples operaciones dependiendo del estado de una variable. Ésta se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia. Su sintaxis es la siguiente:
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}
Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que día de la semana es. Si el día es 1 (lunes) sacar un mensaje indicándolo, si el día es 2 (martes) debemos sacar un mensaje distinto y así sucesivamente para cada día de la semana, menos en el 6 (sábado) y 7 (domingo) que queremos mostrar el mensaje "es fin de semana". Para días mayores que 7 indicaremos que ese día no existe:
switch (dia_de_la_semana) {
case 1:
document.write("Es Lunes")
break
case 2:
document.write("Es Martes")
break
case 3:
document.write("Es Miércoles")
break
case 4:
document.write("Es Jueves")
break
case 5:
document.write("Es viernes")
break
case 6:
case 7:
document.write("Es fin de semana")
break
default:
document.write("Ese día no existe")
}
En el caso 6 en realidad no indicamos ninguna instrucción, pero como tampoco colocamos un break se ejecutará la sentencia o sentencias del caso siguiente, que corresponden con la sentencia indicada en el caso 7, que informa que es fin de semana.
5.5 Bucle FOR
Se utiliza para repetir mas instrucciones un determinado número de veces:
for (inicialización; condición; actualización) {
//sentencias a ejecutar en cada iteración
}
//sentencias a ejecutar en cada iteración
}
El bucle FOR tiene tres partes:
Después del for se colocan las sentencias que queremos que se ejecuten en cada iteración, acotadas entre llaves:
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("<br>")
}
En este caso se inicializa la variable i a 0. Como condición para realizar una iteración, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualización se incrementará en 1 la variable i.
Si queremos escribir los números del 1 al 1.000 de dos en dos se escribirá el siguiente bucle:
for (i=1;i<=1000;i+=2)
document.write(i)
Si queremos contar descendentemente del 343 al 10 utilizaríamos este bucle:
for (i=343;i>=10;i--)
document.write(i)
En este caso decrementamos en una unidad la variable i en cada iteración, comenzando en el valor 343 y siempre que la variable tenga un valor mayor o igual que 10.
5.5.1 Ejercicio de ejemplo del bucle for
Un bucle que escriba en una página web los encabezamientos desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x":
<H1>Encabezado de nivel 1</H1>
<H2>Encabezado de nivel 2</H2>
<H3>Encabezado de nivel 3</H3>
<H4>Encabezado de nivel 4</H4>
<H5>Encabezado de nivel 5</H5>
<H6>Encabezado de nivel 6</H6>
Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteración escribiremos el encabezado que toca:
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
}
5.6.1 Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Sólo se indica la condición que se tiene que cumplir para que se realice una iteración.
while (condición){
//sentencias a ejecutar
}
Un ejemplo de código:
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
Lo más sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero tenemos que inicializar la variable que vamos a utilizar en la condición de iteración del bucle. Con la variable inicializada podemos escribir el bucle, que comprobará para ejecutarse que la variable color sea distinto de "rojo".
Nota: Hemos utilizado en este ejemplo la función prompt de Javascript, que sirve para mostrar una caja de diálogo donde el usuario debe escribir un texto.
5.6.2 Bucle DO...WHILE
El bucle do...while se utiliza cuando no sabemos cuantas veces se habrá de ejecutar el bucle. La sintaxis es la siguiente:
do {
//sentencias del bucle
} while (condición)
El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.
var color
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
5.6.3 Ejemplo de uso de los bucles while
En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos sumando a esa variable un número aleatorio
del 1 al 100 hasta que sumemos 1.000 o más, imprimiendo el valor de la variable suma después de cada operación. Será
necesario utilizar el bucle WHILE porque no sabemos exactamente el número de iteraciones que tendremos que realizar (dependerá de los valores aleatorios que se vayan obteniendo).
var suma = 0
while (suma < 1000){
suma += parseInt(Math.random() * 100)
document.write (suma + "<br>")
}
Javascript tiene diferentes estructuras de control para implementar bucles, como FOR, WHILE y DO...WHILE, pero faltan algunas posibilidades de control de las repeticiones de los bucles. Son las instrucciones break y continue:
5.7.1 Break
Este ejemplo escribe los números del 0 al 9 y en cada iteración del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situación en la cual se sale del bucle y deja la cuenta por donde se había quedado.
for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no")
break
}
5.7.2 Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las líneas que haya por debajo de la palabra continue.
var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Este ejemplo, en condiciones normales contaría hasta desde i=0 hasta i=7, pero cada vez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no. Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en 1 la variable i, ya que se ignorarían las sentencia que hayan por debajo del continue.
5.7.3 Ejemplo adicional de la sentencia break
Un ejemplo más práctico sobre estas instrucciones se puede ver a continuación. Se trata de un bucle FOR planeado para llegar hasta 1.000 pero que lo vamos a parar con break cuando lleguemos a 333.
for (i=0;i<=1000;i++){
document.write(i + "<br>")
if (i==333)
break;
}
for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
La ejecución funcionará de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa el segundo bucle, con lo que la variable j valdrá también 0. En cada iteración se imprime el valor de la variable i, un guión ("-") y el valor de la variable j, como las dos variables valen 0, se imprimirá el texto "0-0" en la página web.
Veamos un ejemplo que imprime en la página todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...
for (i=1;i<10;i++){
document.write("<br><b>La tabla del " + i + ":</b><br>")
for (j=1;j<10;j++) {
document.write(i + " x " + j + ": ")
document.write(i*j)
document.write("<br>")
}
}
Con el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del 1 y luego las demás en orden ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada tabla.
- La primera parte es la inicialización, donde se coloca la variable que utilizaremos para llevar la cuenta de las veces que se ejecuta el bucle.
- La segunda parte es la condición que se debe cumplir para que continúe la ejecución del bucle.
- Por último la actualización, sirve para indicar los cambios que queramos ejecutar en las variables cada vez que termina la iteración del bucle, antes de comprobar si se debe seguir ejecutando.
Después del for se colocan las sentencias que queremos que se ejecuten en cada iteración, acotadas entre llaves:
var i
for (i=0;i<=10;i++) {
document.write(i)
document.write("<br>")
}
En este caso se inicializa la variable i a 0. Como condición para realizar una iteración, se tiene que cumplir que la variable i sea menor o igual que 10. Como actualización se incrementará en 1 la variable i.
Si queremos escribir los números del 1 al 1.000 de dos en dos se escribirá el siguiente bucle:
for (i=1;i<=1000;i+=2)
document.write(i)
Si queremos contar descendentemente del 343 al 10 utilizaríamos este bucle:
for (i=343;i>=10;i--)
document.write(i)
En este caso decrementamos en una unidad la variable i en cada iteración, comenzando en el valor 343 y siempre que la variable tenga un valor mayor o igual que 10.
5.5.1 Ejercicio de ejemplo del bucle for
Un bucle que escriba en una página web los encabezamientos desde <H1> hasta <H6> con un texto que ponga "Encabezado de nivel x":
<H1>Encabezado de nivel 1</H1>
<H2>Encabezado de nivel 2</H2>
<H3>Encabezado de nivel 3</H3>
<H4>Encabezado de nivel 4</H4>
<H5>Encabezado de nivel 5</H5>
<H6>Encabezado de nivel 6</H6>
Para ello tenemos que hacer un bucle que empiece en 1 y termine en 6 y en cada iteración escribiremos el encabezado que toca:
for (i=1;i<=6;i++) {
document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">")
}
5.6 Bucles WHILE y DO WHILE
Diferentes usos de los dos tipos de bucles WHILE5.6.1 Bucle WHILE
Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Sólo se indica la condición que se tiene que cumplir para que se realice una iteración.
while (condición){
//sentencias a ejecutar
}
Un ejemplo de código:
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}
Lo más sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero tenemos que inicializar la variable que vamos a utilizar en la condición de iteración del bucle. Con la variable inicializada podemos escribir el bucle, que comprobará para ejecutarse que la variable color sea distinto de "rojo".
Nota: Hemos utilizado en este ejemplo la función prompt de Javascript, que sirve para mostrar una caja de diálogo donde el usuario debe escribir un texto.
5.6.2 Bucle DO...WHILE
El bucle do...while se utiliza cuando no sabemos cuantas veces se habrá de ejecutar el bucle. La sintaxis es la siguiente:
do {
//sentencias del bucle
} while (condición)
El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.
var color
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")
5.6.3 Ejemplo de uso de los bucles while
En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos sumando a esa variable un número aleatorio
del 1 al 100 hasta que sumemos 1.000 o más, imprimiendo el valor de la variable suma después de cada operación. Será
necesario utilizar el bucle WHILE porque no sabemos exactamente el número de iteraciones que tendremos que realizar (dependerá de los valores aleatorios que se vayan obteniendo).
var suma = 0
while (suma < 1000){
suma += parseInt(Math.random() * 100)
document.write (suma + "<br>")
}
5.7 Break y continue
Dos instrucciones que sirven para parar y continuar con la siguiente iteración del bucle respectivamente.Javascript tiene diferentes estructuras de control para implementar bucles, como FOR, WHILE y DO...WHILE, pero faltan algunas posibilidades de control de las repeticiones de los bucles. Son las instrucciones break y continue:
- break: Significa detener la ejecución de un bucle y salirse de él.
- continue: Sirve para detener la iteración actual y volver al principio del bucle para realizar otra iteración, si corresponde.
5.7.1 Break
Este ejemplo escribe los números del 0 al 9 y en cada iteración del bucle pregunta al usuario si desea continuar. Si el usuario dice cualquier cosa continua, excepto cuando dice "no", situación en la cual se sale del bucle y deja la cuenta por donde se había quedado.
for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no")
break
}
5.7.2 Continue
Sirve para volver al principio del bucle en cualquier momento, sin ejecutar las líneas que haya por debajo de la palabra continue.
var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no")
continue
i++
}
Este ejemplo, en condiciones normales contaría hasta desde i=0 hasta i=7, pero cada vez que se ejecuta el bucle pregunta al usuario si desea incrementar la variable o no. Si introduce "no" se ejecuta la sentencia continue, con lo que se vuelve al principio del bucle sin llegar a incrementar en 1 la variable i, ya que se ignorarían las sentencia que hayan por debajo del continue.
5.7.3 Ejemplo adicional de la sentencia break
Un ejemplo más práctico sobre estas instrucciones se puede ver a continuación. Se trata de un bucle FOR planeado para llegar hasta 1.000 pero que lo vamos a parar con break cuando lleguemos a 333.
for (i=0;i<=1000;i++){
document.write(i + "<br>")
if (i==333)
break;
}
5.8 Bucles anidados en Javascript
Anidar un bucle consiste en meter ese bucle dentro de otro.for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
La ejecución funcionará de la siguiente manera. Para empezar se inicializa el primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa el segundo bucle, con lo que la variable j valdrá también 0. En cada iteración se imprime el valor de la variable i, un guión ("-") y el valor de la variable j, como las dos variables valen 0, se imprimirá el texto "0-0" en la página web.
Veamos un ejemplo que imprime en la página todas las tablas de multiplicar. Del 1 al 9, es decir, la tabla del 1, la del 2, del 3...
for (i=1;i<10;i++){
document.write("<br><b>La tabla del " + i + ":</b><br>")
for (j=1;j<10;j++) {
document.write(i + " x " + j + ": ")
document.write(i*j)
document.write("<br>")
}
}
Con el primer bucle controlamos la tabla actual y con el segundo bucle la desarrollamos. En el primer bucle escribimos una cabecera, en negrita, indicando la tabla que estamos escribiendo, primero la del 1 y luego las demás en orden ascendente hasta el 9. Con el segundo bucle escribo cada uno de los valores de cada tabla.
No hay comentarios:
Publicar un comentario