jairogarcíarincón
Contenidos
- Esquema de funcionamiento de un servicio web
- Lenguaje de marcas HTML
- Estructura de un documento HTML
- Hojas de estilo CSS (1/2)
- Hojas de estilo CSS (2/2)
- Diseño responsive con media-queries
- Ejercicios de Repaso HTML/CSS
- Introducción a JavaScript
- Elementos del lenguaje JavaScript
- Los operadores en JavaScript
- La gramática en JavaScript
- Ejercicios de repaso Javascript
El orden en que se ejecutan las instrucciones de un programa en JavaScript es, por defecto, secuencial: instrucción tras instrucción (como un guión o script).
Así un programa se escribirá como una sucesión de instrucciones o sentencias, utilizando un punto y coma para indicar el final de la instrucción. Pueden agruparse una serie de sentencias en un bloque encerrándolas entre llaves.
A veces es necesario alterar este orden y para ello se utilizan las instrucciones de control: condicionales, selección y bucles.
Una sentencia condicional es una instrucción en la que se hace una comparación y según el resultado verdadero o falso (true o false) de la misma el programa seguirá ejecutando unas u otras instrucciones. La sentencia condicional mas simple que podemos escribir es aquella que ejecuta u omite una serie de sentencias dependiendo de si la comprobación da verdadero o falso. La sintaxis básica es:
var diaSemana = 2;
//Método if -else if - else
if (diaSemana == 1){
console.log("Hoy es lunes");
}
else if (diaSemana == 2){
console.log("Hoy es martes");
}
else if (diaSemana == 3){
console.log("Hoy es miércoles");
}
else if (diaSemana == 4){
console.log("Hoy es jueves");
}
else if (diaSemana == 5){
console.log("Hoy es viernes");
}
else if (diaSemana == 6){
console.log("Hoy es sábado");
}
else if (diaSemana == 7){
console.log("Hoy es domingo");
}
else{
console.log("Día de la semana no válido");
}
//Método switch
var diaSemana = 2;
switch (diaSemana){
case 1 : console.log("Hoy es lunes");
break;
case 2 : console.log("Hoy es martes");
break;
case 3 : console.log("Hoy es miércoles");
break;
case 4 : console.log("Hoy es jueves");
break;
case 5 : console.log("Hoy es viernes");
break;
case 6 : console.log("Hoy es sábado");
break;
case 7 : console.log("Hoy es domingo");
break;
default : console.log("Día de la semana no válido");
break;
}
En la sentencia switch hemos introducido 3 elementos nuevos:
- case, que nos indica cada una de las acciones a realizar en función de los posibles valores que puede tomar la variable
- default, que nos indica la acción a realizar cuando el valor de la variable no es ninguno de los anteriores.
- break, que nos permite salir del bucle una vez que se ha encontrado la acción a realizar (para evitar recorrerlo entero)
A veces es necesario repetir un mismo conjunto de sentencias varias veces. Por ejemplo para borrar todos los elementos de un array simplemente debemos hacer delete en cada uno de ellos, es una sentencia que se repetirá tantas veces como largo sea el array. Este es un típico trabajo para las estructuras repetitivas o bucles. En esencia la ejecución de un bucle consiste en ejecutar repetidas veces una misma parte del programa (cuerpo del bucle) hasta que se cumpla una determinada condición, en cuyo caso se acaba la repetición y el programa continúa con su flujo normal. Existen varias sentencias de bucles:
while
En esta estructura el programa primero comprueba la condición: si es cierta pasa a ejecutar el cuerpo del bucle, y si es falsa pasa a la instrucción siguiente a la sentencia while. Como siempre, un ejemplo lo aclarará todo:
var lista = new Array(10);
var i=0; //indice para recorrer el array
while (i < 10){
lista[i] = i;
i++;
}
En este ejemplo mientras que el valor almacenado en i sea menor que 10 (la longitud del array) irá almacenando en cada elemento del array lista el valor de i e incrementando el valor del índice, que también es i. Cuando este valor sea 10 el programa no entrará en el cuerpo del bucle. Si no se incrementara el valor de i el bucle no acabaría nunca, el programa quedaría ejecutando indefinidamente el cuerpo del bucle y podría llegar a bloquear el navegador.
do while
Se trata de un bucle en el que la condición se comprueba tras la primera iteración, es decir que el cuerpo del bucle se ejecuta siempre al menos una vez. El ejemplo anterior quedaría como sigue:
var lista = new Array(10);
var i=0; //indice para recorrer el array
do{
lista[i] = i;
i++;
}
while (i < 10);
for
Esta sentencia utiliza una variable de control a modo de contador para controlar la repetición del cuerpo del bucle. La sentencia da un valor inicial a este contador y en cada iteración lo modifica según le indiquemos y comprueba la condición, si se cumple ejecuta el cuerpo del bucle, si no lo salta y continúa por la siguiente sentencia. Veamos el ejemplo anterior usando esta sentencia:
var lista = new Array(10);
var i=0; //indice para recorrer el array
for (i = 0; i < 10; i++){
lista[i] = i;
i++;
}
Como vemos el cuerpo del bucle no incrementa la variable i, esto se indica en la cabecera de la sentencia. Este código hace exactamente lo mismo que el anterior.
for in
Se trata de una variante de la sentencia for utilizada para iterar o recorrer todos los elementos de un objeto (no de un array). Usa una variable de control que en cada iteración toma el valor del elemento del objeto recorrido. En otros lenguajes esta sentencia se llama foreach. Por ejemplo si pruebas este código podrás ver todos los elementos del objeto document de JavaScript:
var item;
for (item in document){
document.write(item + "<br>");
}
break y continue
Aunque procuremos usara una programación estructurada alguna vez puede ser necesario interrumpir la repetición de un bucle o forzar una iteración del mismo, esto puede lograrse mediante las sentencias break y continue. Son sentencias aplicables a cualquiera de las estructuras de bucle en JavaScript.
La sentencia break interrumpe la iteración actual y envía al programa a la instrucción que sigue al bucle. Este ejemplo escribiría el contenido del array lista hasta encontrar una letra z.
var lista = new Array ('a','b','c','z','x','f');
var item;
for (item in lista){
if (lista[item] == "z"){
break;
}
document.write(lista[item] + "<br>");
}
La sentencia continue interrumpe la iteración actual y envía al programa a la comprobación de la condición, si esta es cierta continúa con la siguiente iteración. Este ejemplo escribiría el contenido del array saltándose la letra z;
var lista = new Array ('a','b','c','z','x','f');
var item;
for (item in lista){
if (lista[item] == "z"){
continue;
}
document.write(lista[item] + "<br>");
}
Para una mejor comprensión, se propone la visualización de los siguientes videos del canal de YouTube Ada Lovecode:
Ejercicios propuestos
1. Crear una función que recoja dos números, realice la división y muestre el resultado. Si el divisor es 0, debe devolver el mensaje "Resultado: infinito".
2. Modifica el ejercicio 8 de la clase anterior para que devuelva "El nombre "nombre" no se encuentra en el array" si no está en el array o "El nombre "nombre" está en la posición X del array".
3. Crea, con una sentencia switch, una función que nos permite saber en qué mes estamos a partir del entero introducido (Retornando algo similar a console.log("Estamos en el mes de octubre");
4. Crea, con una sentencia while, una función que escriba 100 veces "No debo hablar en clase", cada frase en una línea.
5. Crea, con una sentencia for, una función que escriba las tablas de multiplicar del 1 al 10, cada operación una en una línea (1x1 = 1 hasta 10x10 = 100).
6. Crea un array con los números del 1 al 100 mediante un bucle for. Muéstralo por pantalla mediante un bucle while hasta que el número sea 27.
7. Declara un array con las letras de la A a la Z mediante el bucle while. Utilizando una sentencia for, escribe por pantalla cada letra separada por un espacio, saltándote las 5 vocales.
Publicado el 21 de Noviembre de 2024
aplicacionesweb