20 enero 2013

JavaScript para impacientes - 5.Funciones (1)


Hemos visto que podemos asociar un fragmento de programa a un clic sobre un elemento de una página web. El problema es que si el fragmento es muy grande, el resultado puede resultar difícil de leer. Una alternativa más compacta es crear pequeños "bloques de programa", que llamaremos funciones.

5.1. Una función básica

En su forma más básica, una función nos permite agrupar varias órdenes y dar un nombre a ese conjunto. Así, el ejemplo del apartado 4.5 se podría reescribir así:

<html>
<body>
<script>
function calcularSuma()
{
    var casilla1=document.getElementById("num1");
    var n1 = casilla1.value;
    var casilla2=document.getElementById("num2");
    var n2 = casilla2.value;
    var resultado=document.getElementById("resultado");
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" onclick='calcularSuma()'>Calcular suma</button>
 
    </form>
</body>
</html>
 

Ejercicios propuestos
  • 05.01.01 - Crea una versión usando funciones del ejercicio que cambia el color del fondo cada vez que el usuario haga clic sobre ella (ejercicio 04.05.01).
  • 05.01.02 - Crea una versión usando funciones del ejercicio que muestra un párrafo y dos botones para hacer el tamaño del texto más grande y más pequeño, respectivamente (ejercicio 04.05.02).
  • 05.01.03 - Crea una versión usando funciones del ejercicio que crea un párrafo y dos botones que sirvan para hacer ocultar y mostrar ese párrafo (ejercicio 04.05.03).
  • 05.01.04 - Crea una versión usando funciones del ejercicio que muestra tres casillas de texto y un botón que sume los números que haya escritas en esas tres casillas (04.05.04).
  • 05.01.05 - Crea una versión usando funciones del ejercicio que muestra dos casillas de texto y cuatro botones, que permitan calcular su suma, su diferencia, su multiplicación y su división (04.05.05).

5.2. Funciones "personalizables"

No siempre querremos que una función maneje los mismos datos. Por ejemplo, si queremos que una función compruebe si los datos que el usuario ha introducido en una casilla son válidos, es innecesario crear una función para cada casilla. Es preferible crear una única función a la que le podamos indicar qué casilla concreta ha de verificar. Para ese, podemos indicar "parámetros" a la función, que detallaremos en el paréntesis que sigue a su nombre, así:

<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num1', 'num2', 'resultado');">
            Calcular suma</button>
 
    </form>
</body>
</html>
 

En este caso, la función "calcularSuma" recibe tres datos: la primera casilla, la segunda casilla y la posición en la que queremos mostrar el resultado; al llamar a la función, deberemos rellenar esos detalles con los datos reales de las casillas que queramos usar. Así, podemos aplicar esa misma función a bloques distintos de casillas, como en este ejemplo:

<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script> 
 
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num1', 'num2', 'resultado');">
            Calcular suma</button>
    </form>
 
    <form>
        Primer numero alternativo:
        <input type="text" name="num3" id="num3" />
        <br />
 
        Segundo numero alternativo:
        <input type="text" name="num4" id="num4" />
        <br />
 
        <p id="resultado2">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num3', 'num4', 'resultado2');">
            Calcular suma</button>
    </form>
 
</body>
</html>
 

Ejercicios propuestos
  • 05.02.01 - Crea una variante del ejemplo previo, que multiplique los números de las casillas, en vez de sumarlos. La función deberá llamarse "calcularProducto".
  • 05.02.03 - Crea una versión mejorada del ejercicio 05.01.02, que muestre tres párrafos distintos, cada uno de ellos con dos botones para hacer el tamaño su texto más grande o más pequeño.
  • 05.02.03 - Crea una versión mejorada del ejercicio 05.01.03, que muestre tres párrafos distintos, con dos botones para cada uno, que sirvan para hacer ocultar y mostrar el párrafo correspondiente.

No hay comentarios: