Unidad 10. JavaScript (IV)

10.4. Funciones

La mayoría de las veces, en vez de escribir cada vez el código JavaScript directamente en el evento, nos resultará más útil definir una función.

En una definición muy coloquial, una función sería como asignar un nombre a un conjunto de instrucciones, al que luego nos referiremos con ese nombre. Estas instrucciones, realizaran una acción, nos devolverá un valor, etc...

Resultan especialmente útiles cuando queremos utilizar las mismas instrucciones en varios lugares, ya que sólo tendremos que escribirlas una vez.

Por ejemplo, en nuestro ejemplo, vamos a crear las siguientes funciones, que colocamos en una etiqueta script dentro del head:

<script type="text/javascript">
  function verSubmenu(){
    document.getElementById('sub_flores').style.display='block';
  }
  function ocultarSubmenu(){
    document.getElementById('sub_flores').style.display='none';
  }
</script>

Y en los eventos correspondientes, llamamos a esas funciones:

<ul id="menu">
 <li><a href="../index.html">Inicio</a></li>
 <li class="activa" onmouseover="verSubmenu();" onmouseout="ocultarSubmenu();">
  <a href="index.html">Flores</a>
  <ul id="sub_flores">
  ...
  </ul>
 </li>
  ...
</ul>

Las funciones tienen los siguientes elementos:

function nombreDeLaFunción (param1, param2,..., paramn){
	instrución JavaScript;
	instrución JavaScript; 
	...;
 } 

• function es una palabra reservada, que indica que a continuación vamos a definir la función.
• nombreDeLaFunción, es el nombre que le queramos dar, sin espacios. Se suele escribir en minúsculas, y el inicio de cada palabra (excepto la primera) en mayúsculas.
• (param1, param2,..., paramn). Entre paréntesis ( ), y separados por comas, le podemos pasar a la función tantos parámetros como queramos. Los parámetros son valores que damos a la función para que los utilice. Por ejemplo, para crear una función que calcule el área de un rectángulo, le deberemos de pasar dos parámetros, el alto y el ancho. Aunque la función no necesite parámetros, siempre pondremos los paréntesis.
  Si en nuestro ejemplo tuviésemos varios submenús, no crearíamos una función para cada uno, le pasaríamos como parámetro el ID del submenú que queramos mostrar.

  function verSubmenu(id_submenu){
    document.getElementById(id_submenu).style.visibility='visible';
  }

• Entre llaves { }, están las instrucciones de la función, cada una terminada en punto y coma (;). En las instrucciones podemos utilizar valores constantes, variables , operadores , estructuras de programación , etc... como en cualquier lenguaje de programación. Si queremos que la función devuelva un valor, lo haremos con la palabra reservada return. Por ejemplo, la siguiente función convierte de kilómetros a millas:

  function conversorKmMillas(km){
    return km*0.62;
  }

En código JavasScript podemos introducir comentarios. Si son de una línea, basta con escribir // para que comience el comentario. Si lo queremos más extenso, podemos utilizar /* para abrir el comentario y */ para cerrarlo.

 

Una vez definida, podemos llamar a nuestra función directamente desde un evento (onclick="miFuncion('parámetro');"), utilizando una etiqueta scrit en el body (<script type="text/javascript">miFuncion('párametro');</script>), y también podemos utilizarla como parte de otra función o instrucción.