Tutorial Javascript Básico parte 3

En esta última entrega del tutorial de Javascript básico, se verán los condicionales y bucles, esenciales para cualquier lenguaje de programación.

Los condicionales sirven para tomar decisiones en tu código para llevar a cabo diferentes acciones.

La declaración básica más común es IF-ELSE y su sintaxis es la siguiente:

if (condición) {
  código a ejecutar si la condición es verdadera
} else {
  ejecuta este otro código si la condición es falsa
}

La condición que se va a comprobar retornará siempre un valor verdadero o falso.

Imagina que quieres ir al cine a ver la película de Jurassic World, pero no hay entradas, en ese caso eliges ver la nueva de los Minions: El origen de Gru, en pseudocódigo (una forma de expresar los distintos pasos que va a realizar un programa) podríamos decir esto: SI hay entradas para Jurassic World ENTONCES comprar entrada para Jurassic World SI NO comprar entrada para Minions: El origen de Gru.

Esto se puede traducir en el siguiente código:

if hayEntradas("Jurassic World") { // SI hay entradas para Jurassic World
  comprarEntradas("Jurassic World");  //ENTONCES
}
else { // SI NO
  comprarEntradas("Minions: El origen de Gru");
}

Como condicional tenemos la palabra reservada IF (que significa SI) y ELSE (que significa SI NO), todo lo que está entre corchetes es su bloque de código { bloque de código } .

Pero podemos querer tener más opciones a la hora de comprar entradas, por ejemplo, podemos querer una entrada para ver Lightyear antes que para Minions: El origen de Gru, por lo que se tendría que encadenar otro elemento:

if hayEntradas("Jurassic World") { // SI hay entradas para Jurassic World
  comprarEntradas("Jurassic World");  //ENTONCES
}
else if (hayEntradas("Lightyear)) { // SI hay entradas para Lightyear
 comprarEntradas("Lightyear");  //ENTONCES
}
else { // SI NO
  comprarEntradas("Minions: El origen de Gru");
}

Concatenando las palabras clave else if podremos añadir una nueva condición que comprobar en el caso de que la primera devuelva falso.

Demos un paso más y veamos el condicional SWITCH, que se usará en lugares donde haya que hacer elección entre varias opciones. La sintaxis básica es la siguiente:

switch (expresion) {
  case choice1:
    ejecuta este código
    break;

  case choice2:
    ejecuta este código
    break;

  // Se pueden incluir todos los casos que quieras

  default:
    por si acaso, corre este código
}

Como vemos en este código, la expresión puede devolver una serie de valores, dichos valores se recogerán, por ejemplo, supongamos la tirada de un dado de 6 caras:

switch(tirarDado()){
  case 1:
     console.log("Ha salido 1");
     break;
  case 2:
     console.log("Ha salido 2");
     break;
  case 3:
     console.log("Ha salido 3");
     break;
  case 4:
     console.log("Ha salido 4");
     break;
  case 5:
     console.log("Ha salido 5");
     break;
  case 6:
     console.log("Ha salido 6");
     break;
 default:
    console.log("El dado se ha perdido!");
}

La ejecución se hace de manera lineal, esto quiere decir que va de arriba a abajo. Si nos olvidamos poner un break (para “romper” la ejecución del switch), ¡el programa ejecutará la siguiente línea!

Otra cosa que podemos hacer, es agrupar los casos, por ejemplo, si decidimos agruparlos por pares e impartes:

switch(tirarDado()){
  case 1: //Al ser una ejecución lineal y no haber un break
  case 3: //Se ejecuta la siguiente línea, tampoco hay un break....
  case 5: //Por lo que se ejecuta esta parte
     console.log("Ha salido IMPAR");
     break; //Para finalizar o romper la ejecución del switch
  case 2:
  case 4:
  case 6:
     console.log("Ha salido PAR");
     break;
 default:
    console.log("El dado se ha perdido!");
}

De esta forma, si sale 1, 3 o 5 ejecutará el mismo código.

El siguiente paso es conocer cómo son los bucles e iteraciones que tiene Javascript.

Los bucles e iteraciones son la forma más rápida de hacer algo repetidamente.

Existen varios tipos de bucles, veremos los más básicos:

  • For
  • While
  • Do While

Empezamos por la declaración for que se puede traducir en PARA y su sintaxis es la siguiente:

for ([expresiónInicial]; [expresiónCondicional]; [expresiónDeActualización])
{
 //código a ejecutar X veces
}

Tiene una expresión inicial o lugar de partida, una condicional que va a indicar la cantidad de veces que se va a repetir y una actualización o incremento que conseguirá hacer que finalice el bucle:

/*
Para i = 0 // Expresión inicial
Mientras i sea menor que 5 //Condición
Sumar 1 a i //Actualización o incremento
*/
for (let i = 0; i< 5; i++) {
 console.log(i); //Este código mostrará los números del 0 al 4
}

El siguiente que vamos a ver es while que se puede traducir en MIENTRAS, su sintaxis es la siguiente:

while (condición) {
 //Código a ejecutar
}

El código se ejecutara mientras la condición sea verdadera, pongamos el mismo ejemplo anterior:

var i = 0; //Esto equivale a la expresión inicial de un for

while(i<5) { //Mientras i sea menor que 5
   console.log(i); //Este código mostrará los números del 0 al 4
   i++; //Actualización o incremento
}

El siguiente que vamos a ver es do while que se puede traducir en HACER MIENTRAS y su sintaxis es la siguiente:

do
 {
  //Código a ejecutar
}
while (condición);

Funciona prácticamente igual que while con la diferencia que aquí se va a ejecutar el código al menos una vez ya que la comprobación se hace después de la ejecución del código y no antes.

var i=0;

do {
 console.log(i);
i++;
} while(i<5);

Hay que tener cuidado con los bucles infinitos, ya que pueden ocasionar que el programa falle y se quede bloqueado, en los ejemplos anteriores, si no existiera una expresión de actualización o de incremento (incrementando el valor de i en 1 en cada pasada del bucle), la ejecución se quedaría bloqueada en ese punto, a esto se le conoce como bucle infinito.

Es muy importante conocer, al menos en teoría, el funcionamiento de los condicionales y los bucles, pues es algo que se va a aplicar a todo el proceso de desarrollo, se use Javascript o los eventos.

Con esta parte dejaré por finalizados los tutoriales básicos de Javascript, en una entrega posterior crearé un pequeño ejemplo para ver las formas en las que Construct puede usar Javascript y dejaré un ejemplo básico con el que se podrá ver su uso.

¡Hasta la próxima!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad