23 enero 2013

JavaScript para impacientes - Funciones (2)


5.3. Valor devuelto por una función

Una función no sólo es un bloque de órdenes. También puede devolver un resultado, como ocurre "en el mundo real" con las funciones matemáticas. Ese valor devuelto se podrá usar en cualquier punto de un programa en el que pudiéramos emplear una variable. Por ejemplo, podemos crear una función que calcule (y devuelva) la suma de tres números y usarla para sumar lo que el usuario teclee en 3 casillas:


<html>
<body>
<script language="JavaScript">
function sumar(num1, num2, num3)
{
    var suma = parseInt(num1)+parseInt(num2)+
        parseInt(num3);
    return suma;
}
 
function sumarCasillas(numero1, numero2, numero3, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var casilla3=document.getElementById( numero3 );
    var n3 = casilla3.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma1: " +sumar(n1,n2,n3);
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        Tercer numero:
        <input type="text" name="num3" id="num3" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="sumarCasillas('num1', 'num2', 'num3', 'resultado');">
            Calcular suma</button>
 
    </form>
</body>
</html>
 


Ejercicios propuestos
  • 05.03.01 - Crea una función que calcule el mayor de 3 números. Con ella, crea una página que muestre tres casillas al usuario, permita que éste introduzca tres valores y escriba cuál es el mayor de ellos.
  • 05.03.02 - Crea una función que calcule el perímetro de un cuadrado, a partir de su lado. Crea también otra función que calcule la superficie de un cuadrado a partir de su lado. Con ellas, crea una página que muestre una casilla al usuario, en la que éste deberá introducir el lado del cuadrado, y cuando se haga clic en un botón, se mostrará el perímetro y el área de ese cuadrado.
  • 05.03.03 - Crea un programa similar al 05.03.02, pero que calcule la longitud de una circunferencia y la superficie de un círculo, ambos a partir de su radio.

5.4. Algunas funciones predefinidas

Tenemos muchas funciones predefinidas, que nos pueden hacer la vida más sencilla. Bastantes de ellas son numéricas, y otras, que veremos en el próximo apartado, permiten manipular textos. Entre las numéricas, ya habíamos visto las que permiten generar números al azar (Math.random) y quedarnos con la parte entera de un número (Math.floor):


<html>
<body>
<script language="JavaScript">
    var azar1 = Math.random();
    document.write("Al azar entre 0 y 1: " + azar1  + "<br />");
 
    var azar2 = Math.random() * 5;
    document.write("Al azar entre 0 y 5, con decimales: " 
        + azar2  + "<br />");
 
    var azar3 = Math.floor( Math.random() * 6 );
    document.write("Al azar entre 0 y 5, entero: " 
        + azar3  + "<br />");

    var azar4 = Math.floor( Math.random() * 8 )+1;
    document.write("Al azar entre 1 y 8, entero: " 
        + azar4  + "<br />");

    var azar5 = Math.floor( Math.random() * 11 )+10;
    document.write("Al azar entre 10 y 20, entero: " 
        + azar5  + "<br />");

</script>
</body>
</html>
 


Otras funciones matemáticas que pueden resultar útiles son:


<html>
<body>
<script language="JavaScript">
document.write("Raiz de 5: " + Math.sqrt(5)  + "<br />");
document.write("Valor absoluto de -1: " + Math.abs(-1)  + "<br />");
document.write("Dos elevado al cubo: " + Math.pow(2,3)  + "<br />");
document.write("Logaritmo natural de 10: " + Math.log(10)  + "<br />");
document.write("Coseno de 45 grados (PI/4 radianes): " + 
    Math.cos( Math.PI/4 )  + "<br />");
document.write("Seno de 60 grados: " + 
    Math.sin( 60 * (Math.PI / 180) )  + "<br />");
</script>
</body>
</html>
 


Y también tenemos muchas funciones para manejar fechas y horas, como por ejemplo:


<html>
<body>
<script language="JavaScript">
var hoy = new Date();
document.write("Dia del mes: " + hoy.getDate()  + "<br />");
document.write("Numero de mes: " + (hoy.getMonth()+1)  + "<br />");
document.write("Anyo con 4 cifras: " + hoy.getFullYear()  + "<br />");
document.write("Dia de la semana (0=domingo): " + hoy.getDay()  + "<br />");
document.write("Hora (0 a 24): " + hoy.getHours()  + "<br />");
document.write("Minutos: " + hoy.getMinutes()  + "<br />");
document.write("Segundos: " + hoy.getSeconds()  + "<br />");
document.write("Milisegundos: " + hoy.getMilliseconds()  + "<br />");
 
var otraFecha = new Date(2000, 2, 1);
document.write("Dia de la semana del 1-feb-2001: " + 
    otraFecha.getDay()  + "<br />");
</script>
</body>
</html>
 


Ejercicios propuestos
  • 05.04.01 - Crea un programa que permita convertir de grados a radianes (usando la equivalencia: PI radianes = 180 grados).
  • 05.04.02 - Crea un programa que pida al usuario una fecha (día, mes y año) y diga a qué día de la semana corresponde (como cifra del 0 -domingo- al 6 -sábado).
  • 05.04.03 - Mejora el programa 05.04.02 para que muestre el nombre del día de la semana, en vez de la cifra numérica.

No hay comentarios: