Buscar:Buscar

Ejemplos de funciones

Un ejemplo de una función sencilla a la que se envía un argumento, y de paso un ejemplo de switch

Vamos a crear una función que realice cuatro operaciones aritméticas con los valores que introduzca un usuario. Se podría crear una función para cada operación, pero para simplificar el código es mejor crear una sola que obtenga los valores de los campos de formulario con los valores con los que operar, y que luego realice la operación elegida. ¿Y cómo sabe la función qué operación realizar? Eso es justo lo que pasamos como argumento.

La función sería ésta:

    function operar(x){
        var valor_01 = eval(document.getElementById('campo_01').value);
        var valor_02 = eval(document.getElementById('campo_02').value);
        switch(x){
            case('sumar'):
                var resultado = valor_01 + valor_02;
                break;
            case('restar'):
                var resultado = valor_01 - valor_02;
                break;
            case('multiplicar'):
                var resultado = valor_01 * valor_02;
                break;
            case('dividir'):
                var resultado = valor_01 / valor_02;
                break;
        }
        document.getElementById('total').value = 'El resultado de '+x+' '+valor_01+' y '+valor_02+' es '+resultado+'.';
    }
            

Y el código para los botones, éste:

    <button onclick="operar('sumar');">+</button>
    <button onclick="operar('restar');">–</button>
    <button onclick="operar('multiplicar');">x</button>
    <button onclick="operar('dividir');">/</button>
        

Cualquiera de los botones lanza la función. Ésta primero recoge los valores de los campos —veremos getElementById más adelante, al igual que lo que es eval() al tratar el objeto Global—, que es algo que tiene que hacer para cualquier caso. Después el switch busca la coincidencia del argumento enviado con los casos, y en cuanto ésta se da la comprobación se rompe —break—. Por último, a la caja de resultados se le asigna el valor final.

Introduzca un número: Introduzca otro número: +–x/

Un ejemplo de función al que se envían dos argumentos, y que devuelve un valor por medio de return

Ahora vamos a crear una tabla con un vínculo en cada celda. Cuando el usuario haga clic en el vínculo, se lanzará un mensaje de alerta que indicará la columna y la fila correspondientes.

La función es la siguiente:

    function coordenadas(x,y){
        var mensaje = 'La celda está situada en la columna '+x+' y en la fila '+y;
        return mensaje;
    }
        

Y cada vínculo contiene el alert que invoca la función, y dos valores a enviar como parámetros, la columna y la fila. Por ejemplo, el de la primer celda es:

    <a href="#" onclick="alert(coordenadas(1,1));return false;">Celda</a>
        

Al hacer clic se lanza la alerta, que ejecuta la función coordenadas. La función recibe el número de columna y de fila, y devuelve el texto a mostrar. El alert lo recibe, y en ese momento la invocación de la función se sustituye por el mensaje, que es lo que muestra el cuadro de diálogo del navegador.

Al hacer clic sobre las celdas, se mandan los dos parámetros y la función devuelve una alerta

	Columna 01	Columna 02	Columna 03
Línea 01	Celda	Celda	Celda
Línea 02	Celda	Celda	Celda
Línea 03	Celda	Celda	Celda

En los vínculos incluyo un return false; para devolver al navegador. Con ello se evita el funcionamiento por defecto para los vínculos, que sería seguir el href="#", y que en este caso enviaría al principio del documento.

Volver al curso

(cc) CodexExempla.org, 2007–2024 Mapa del sitio | XHTML | CSS | AA