Funciones

Cuando se carga la página HTML, el navegador va leyendo línea por línea. Así, el script escrito se ejecuta nada más cargarse la página. Si queremos controlar cuándo se ejecutará las distintas partes del script, tendremos que separar los distintos bloques en partes independientes. También nos pueden servir para no repetir continuamente el mismo código en diferentes partes (por ejemplo, podemos hacer una función que muestre un mensaje informativo al usuario y coloque el foco del ratón en una parte de la p´gina. Estas partes de código independientes, son las que se llaman funciones.

Las funciones son una de las ventajas que tienen los lenguajes de programación. Una función es una serie de instrucciones como las que has visto hasta ahora englobadas bajo un mismo nombre (el nombre de la función). Una vez creada la función podemos utilizarla en cualquier parte del programa (incluso varias veces en lugares distintos) simplemente utilizando el nombre que le hemos asignado a la función. De esta forma, entre otras cosas, nos evitamos tener que volver a escribir el mismo grupo de instrucciones varias veces.

SINTAXIS:

   function nombre_funcion ( [argumento1, argumento2, ...] ) {
      //sentencias a ejecutar
   }
 

Como se puede observar, en la definición de una función encontramos tres partes:

• El nombre de la función. Dicho nombre irá precedido de la palabra reservada function. Los nombres de las funciones han de guardar las mismas reglas que vimos para el caso del nombre de las variables.
• La lista de argumentos. Irán encerrados entre paréntesis y separados por comas. Pueden ser variables de cualquier tipo u objetos.
• Las sentencias. Entre llaves se encontrará el conjunto de sentencias que se ejecutarán cuando la función sea llamada. En las sentencias de control vimos cómo no era obligatorio el uso de llaves ({ }) cuando sólo se tenÍa que ejecutar una sentencia; en el caso de las funciones el uso de éstas es siempre obligado.

Se dice que una variable es una variable local cuando se definen dentro de una función y que, por lo tanto, sólo podrá ser vista dentro de la función en que se define y si intentamos acceder a su valor fuera de ella, nos dará un error.  Por el contrario, decimos que una variable es global cuando se define fuera de cualquier función. En este caso se podrá acceder a su valor y modificarlo desde cualquiera de las funciones existentes, teniendo en cuenta que si alguna de ellas cambia su valor dicho cambio será visto por el resto de funciones.
Dentro de una función podemos escribir todas las instrucciones que necesitemos y, al final, podemos escribir un valor de retorno.La definición de una función, pues, no implica que ésta se ejecute, sino que será preciso que ésta sea llamada desde algún sitio. Esto se hace mediante la captura de eventos en la página. Aunque los veremos con más detenimiento luego, veamos un ejemplo de cómo se hace:

 
   <SCRIPT LANGUAJE="JavaScript">
      var num
      var num = prompt("Introduce número", "");
      document.write("El cuadrado es " + cuadrado(num))
      function cuadrado(numero) {

         return numero*numero;
      }
   </SCRIPT>
 

Este pequeño programa nos va a servir para calcular el cuadrado de un número. Vamos a analizarlo:

En primer lugar tenemos la línea  var num  nos va a servir para definir la variable num, donde vamos a introducir el número que queremos elevar al cuadrado.

La siguiente línea (prompt) hará que aparezca en pantalla una nueva ventana pidiéndonos que introduzcamos el valor de num (cualquier número en este caso).

Por último, la línea de  document.write  hará que se muestre en la ventana del navegador el resultado del cuadrado.

Fíjate que la parte entre paréntesis incluye  cuadrado(num). Lo que hace esta parte en realidad es llamar a la función 'cuadrado()' y además le 'pasa' lo que vale num (el número que hemos introducido).

Fíjate ahora en la siguiente parte del programa, justo donde comienza la función:

function cuadrado(numero)

La función se llama cuadrado y entre paréntesis aparece la palabra numero. Ésta va a ser la variable que va a utilizar la función para realizar los cálculos.

Como hemos llamado a la función con 'cuadrado(num)', la variable numero valdrá lo mismo que num.

Fíjate ahora que la única instrucción que contiene la función es:

return numero*numero

Esto significa que se va a multiplicar numero*numero y ese va a ser el valor que la función cuadrado devuelva a la llamada para que sea escrito en la página.

Veamos un ejemplo práctico:

Supongamos que estamos ejecutando el programa. Justo al llegar a la línea del prompt, aparece una pequeña ventana preguntándonos el valor de num

Supongamos que pulsamos un 5, o sea, que num valdrá 5.

En la siguiente línea vemos que document.write debe visualizar el resultado de cuadrado(num) es decir cuadrado(5). De esta forma se llama a la función.

La función se llama cuadrado(numero), por lo tanto, el 5 (que es lo que vale num) pasa a numero (es como si escribiéramos numero=num).

Por último, la línea dentro de la función dice

return numero*numero

O sea:

return 5*5 (que es lo que vale numero). Por lo tanto, el valor de la función es 25, y lo que escribe document.write será:  El cuadrado es 25 .

Si no tienes experiencia con lenguajes de programación, seguramente pensarás que el tema de las funciones es lioso... y lo es.

Si crees que no eres capaz de dominarlo, entonces necesitas practicar, crear tus propias funciones. Una vez que te hayan salido bien cuatro o cinco, verás que siempre es igual. Puedes comenzar realizando pequeñas modificaciones sobre la función que tienes en este capítulo e ir comprobando el resultado.

La mejor forma de aprender es experimentando.

Una función puede tener llamadas a otras funciones. Habitualmente para realizar ciertas comprobaciones u operar con las variables con las que está trabajando. La sentencia return sirve para devolver el resultado de las operaciones llevadas a cabo por una función. Si la sentencia return se utiliza sola, mandará salir de la función sin devolver nada; este es el caso, por ejemplo, de cuando se está cambiando el valor de alguna variable global(definida e inicializada su valor fuera de cualquier script).

Por ejemplo, un uso habitual de las funciones es la validación de un formulario (comprobar que los datos están correctamente rellenos); pues bien, si queremos que determinados campos sean de contenido numérico y además tengan un formato concreto, podríamos tener otra función a la que pasándole la cadena escrita realice dicha comprobación, e incluso le cambie el valor al campo dándole el formato deseado, y nos devuelva un booleano para saber si dicho campo está relleno y tiene un valor idóneo.

 
   function valida(parametro) {

      var numero = obtenNumero(parametro);
      if( numeroAlto(numero) )
         alert("número correcto");
      else
         alert("número no correcto");
   }
	
   function obtenNumero(numero) {
      var x = 100;
      return (x*numero)/2;
   }
	
   function numeroAlto(n) {
      if(n>150) return false;
      return true;
   }
 

En el ejemplo, cuando llamamos a la función valida(parametro), lo primero que hace es obtener el valor de la variable numero. Para ello llama a la función obtenNumero y le pasa el valor recibido (parametro).

La función obtenNumero(numero)tiene definida una variable x cuyo valor es 100 y devuelve el resultado de la operación: (x*numero)/2, es decir, suponiendo que el parámetro recibido 3, el resultado de (100*3)/2, o sea, 150.

La siguiente línea de la función valida (  if( numeroAlto(numero)   ), nos dice que si se cumple que el número obtenido es alto, se deben mostrar un mensaje diferente ("número correcto") de si no lo es ("número no correcto").

Lo que hace ésta función (numeroAlto(n)) es devolver un valor booleano, que será false cuando el valor pasado (n, que en este caso es 150) sea mayor que 150. Por lo tanto, en el ejemplo, el valor devuelto por esta función será true y el mensaje que se mostrará desde valida es: número correcto.