martes, mayo 08, 2012

Tutorial de desarrollo web, Parte XXXI: Operadores aritméticos. Bucles

Otra entrada más en este tutorial, cada vez más introducidos en el mundo de la programación. Antes de empezar, aquí les dejo las resoluciones a los ejercicios de la semana pasada, y podemos comenzar con la nueva entrega.
La semana pasada vimos los operadores lógicos usados en JavaScript y su orden de prioridades. Esta semana, antes de empezar, vamos a ver los operadores aritméticos, algo más fáciles pero, al fin y al cabo, igual de necesarios. Algunos son muy sencillos y llevámoslos usando toda la vida, mientras que otros son un tanto más extraños. Echémosle un vistazo:
  • Respetando la precedencia de operadores, los operadores con mayor precedencia con los negativos, los incrementos y los decrementos.
    • Los negativos se representan mediante un guión ("-") e indican un cambio de signo en el número o expresión que lo acompañe. Pongamos algunos ejemplos:
    • x = -1; // Resultado: -1
    • x = -(-3); // Resultado: 3
    • x = -(2 + 4); // Resultado: -6
    • Por supuesto, los paréntesis tienen preferencia, como ocurría con los operadores lógicos, así que, una vez hemos calculado el valor que se obtiene dentro del paréntesis, el operador de negación le cambiará el símbolo.
    • Los incrementos y los decrementos funcionan de forma idéntica, y significan que al valor que le acompaña hay que sumarle o restarle uno. El incremento se representa por un doble símbolo más ("++") y el decremento por un doble guión ("--"). Habrá que tener en cuenta que los incrementos o decrementos se pueden colocar antes o después del número, y eso significará que la operación se realizará antes o después de la operación actual. Veamos unos ejemplos:
    • x = 5;
    • y = x++;
    • Al final de este ejemplo, "x" valdrá 6, ya que hemos usado el incremento en la segunda línea. Sin embargo, "y" vale 5, ya que hemos puesto el incremento después de "x", por lo que el valor de "x" no se sumará hasta después de que esta operación se lleve a cabo. Sin embargo, si queremos que "y" guarde el mismo valor que "x" (sin tener que añadir otra línea), podríamos hacer:
    • x = 5;
    • y = ++x;
    • En este caso, el incremento, al colocarse antes de la "x", se ejecutará antes de la operación, por lo que ahora tanto "x" como "y" tienen guardado en su interior el número 6.
  • En segundo lugar tenemos los operadores de multiplicación, división y módulo, los cuales están en el segundo nivel de precedencia. Veamos cómo funcionan:
    • La multiplicación no creo que necesite mucha explicación. Se representa por el asterisco ("*") y multiplica dos números.
    • x = 2 * 3; // Resultado: 6
    • x = 3 * (-5); // Resultado: -15
    • x = 3 * -5; // Resultado: -15
    • x = -3 * -5; // Resultado: 15
    • Bueno, esto no es una clase de matemáticas, no creo que haga falta que explique mejor esto, ¿no?
    • El caso de la división es el mismo. Se representa con una barra ("/") y funciona como normalmente funciona una división:
    • x = 6 / 3; // Resultado: 2
    • x = 5 / 2; // Resultado 2.5
    • El módulo tal vez sea la operación que menos les suene, pero es una operación bastante simple que consiste en mostrar el resto de una división (¿recordáis vuestras clases de matemáticas de primaria?). Se representa por el símbolo del porcentaje ("%") y se puede usar así:
    • x = 5 % 3; // Resultado: 2
    • x = 20 % 10; // Resultado: 0
    • No tiene demasiada ciencia tampoco.
  • Finalmente y, como siempre, las más bajas en la cadena son las operaciones de suma y resta, que no hará falta que os explique. Aquí algunos ejemplos:
  • x = 3 + 7; // Resultado: 10
  • x = 5 - 3; // Resultado: 2
Sencillo, ¿no? Todavía hay alguna pequeña curiosidad sobre algún operador aritmético, pero los veremos en otro momento, para no quemar tanto con tantas ideas.
Bueno, ahora que conocemos los operadores aritméticos, vamos a por algo con un poco más de chicha. Antes que nada explicarles que la programación posee dos tipos de sentencias (aunque se han desarrollado varias sentencias de cada uno de estos tipos). Uno de estos dos tipos lo vimos la semana pasada, se trataba de la sentencia condicional gracias a la cual un programa tomaría un camino u otro dependiendo de ciertas condiciones que le hubiéramos introducido. El otro tipo consiste en obligar a un programa a repetir una misma acción múltiples veces hasta que se cumpla una determinada condición: la sentencia cíclica o bucle.
El bucle más básico (el que veremos hoy) es el conocido como el bucle while y, al igual que la sentencia condicional, contendrá en su interior una condición, de modo que las acciones se repetirán hasta que se cumpla determinada condición. Veamos un ejemplo:

var x = 0;
while(x < 10)
{
document.write(x++);
}

Al comenzar este código, declaramos la variable "x" y la asignamos a 0. Luego creamos un bucle y le decimos que, mientras x sea menor que 10, debe repetir lo que se encuentre en su interior. Vemos que en su interior tiene un "write" que imprime en pantalla el valor de "x" mientras le suma uno (recordemos que, al estar el incremento después de la "x", el valor se sumará después de haberse imprimido).
De esta manera, al llegar al final del bucle (o sea, tras imprimir el valor de "x" y hacer la respectiva suma), la condición se volverá a evaluar. Ahora "x" valdría 1. ¿1 es menor que 10? Por supuesto que sí. Pues la acción se repetiría hasta que "x" deje de ser menor que 10.
¡CUIDADO CON LOS BUCLES INFINITOS!
Un gran problema que tienen estas estructuras es la posibilidad de crear un bucle infinito. Imaginemos por ejemplo, esto:

var x = 0;
while(x < 10)
{
document.write(x);
}

Este bucle nunca terminaría, ya que la "x" nunca llegará a 10, sino que seguirá siendo 0 siempre. Debemos asegurarnos, antes de entrar en un bucle, de que se va a poder salir de alguna manera. Si no, no hagamos bucles.
¿Alguna dificultad con esto? No, ¿verdad? Eso me parecía a mí. Pues que sepáis que lo que hemos dado hasta ahora es la base de la programación y que realmente con todo esto, poco es lo que no podréis hacer. A partir de ahora, empezaremos a ver estructuras complejas, veremos formas alternativas de las sentencias que hemos visto que proporcionarán, en ocasiones concretas, una mayor sencillez, veremos variables complejas, etcétera. Pero todo, si queremos, podemos reducirlo a lo que hemos aprendido hasta el momento (claro que, quedarnos sólo con esto, sería un poco coñazo).
¿Sorprendidos? Yo no lo estaría tanto. Recordemos que el ordenador precisa de instrucciones simples, y que todo debe llegar a convertirse en ceros y unos (o sea, en "no corriente" y "corriente"), por lo que, realmente, con bastante poco podemos hacer mucho. Pero bueno, para iros quitando la sorpresa, ahora los ejercicios para la semana que viene:

EJERCICIO 1

Un clásico de la programación es el calcular si un año es bisiesto o no, así que es lo que vamos a hacer: por prompt le pediremos al usuario que introduzca un número y calcularemos si ese año fue (o será) bisiesto, mostrando por pantalla un mensaje que diga una cosa o la otra. Para ello, os explico cuándo un año es bisiesto:
Un año es bisiesto si es divisible por 4 pero no por 100. Sin embrago, los años divisibles por 400, excepcionalmente, sí son bisiestos.
Bueno, es un poco coñazo, lo sé, pero todos los que hemos estudiado programación hemos pasado por aquí. ¿Que cómo se calcula si un número es divisible por otro? Tendréis que romperos la cabeza un poco, la pista está en los operadores aritméticos que hemos dado esta semana.

EJERCICIO 2

Hacía tiempo que no hacíamos 2 ejercicios, pero es que en el anterior no entraban bucles. En este ejercicio tendremos que pedir al usuario un número por prompt y, cuando lo haya introducido, deberemos escribir todos los números desde el 0 hasta el que ha introducido, tanto si es éste positivo o negativo. ¡Mucho cuidado con los bucles infinitos!

No hay comentarios: