Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta. Una de sus mayores ventajas es que se pueden reutilizar fácilmente.
La estructura básica de una función JavaScript se puede dividir en tres partes:
Nombre: el nombre de la función.
Argumentos: las variables o constantes a utilizar.
Sentencias: las instrucciones de la función (lo que queremos que haga).
En este artículo también veremos:
Declaraciones de funciones: (describir o definir la función).
Llamadas a funciones: (cuando y como dar la orden de que se ejecuten).
Estructura
Las funciones en JavaScript se declaran (se definen) mediante la palabra reservada function
, seguida del nombre de la función. Después se añaden dos paréntesis ()
en cuyo interior irán los argumentos (si procede). Por último, las llaves { }
que se utilizan para encerrar todas las sentencias ó instrucciones que vamos a ordenar que se ejecuten en nuestra función.
Algo así:
1 2 3 |
function nombre(argumentos){ sentencias o instrucciones } |
Ahora veamos parte por parte…
Nombre
Hay algunas reglas a la hora de poner nombre a una función, próximamente veremos a fondo esta sección, pero para empezar vale con saber que:
- El nombre debe empezar por una letra minúscula y no puede contener espacios.
- No se pueden usar palabras reservadas para el lenguaje de programación que usemos.
Unos ejemplos de nombres que SI son válidos:
1 2 3 4 5 |
function sumar() { } //válido function sumar_numeros() { } //válido, guiones bajos para separar palabras function sumarNumeros() { } //válido, mayúsculas para separar palabras |
Unos ejemplos de nombres que NO son válidos:
1 2 3 4 5 6 7 |
function sumar numeros() { } //NO válido, no puede haber espacios function 1suma() { } //NO válido, no puede empezar con un número function alert() { } //NO válido, "alert" es una palabra reservada de javascript function var() { } //NO válido, "var" es una palabra reservada de javascript |
Es útil poner nombres descriptivos a las funciones pero ojo con pasarse…
Argumentos
Los argumentos son una serie de valores que no hemos definido dentro de la función, sino que se reciben de otra parte, de otra función u otro enunciado. Pueden ser números o cadenas de texto indistintamente. Se especifican entre los paréntesis (
)
que van detrás del nombre de la función y van separados por comas. No todas las funciones necesitan argumentos para funcionar, pero son una más de las útiles ventajas que ofrecen las funciones… y pronto lo veremos.
Ejemplos:
1 2 3 4 5 6 7 |
function sumar(num1, num2) { //los argumentos de esta funcion son: num1 y num2 } function cambiar(text1, text2, text3) { //los argumentos de esta funcion son: text1, text2 y text3 } |
Los argumentos sirven para hacer cosas con ellos dentro de la función. Hay que pensar en ellos como variables que pueden contener distintos valores dependiendo de las circunstancias.
Como ejemplo, podemos poner un campo de texto para que el usuario escriba su nombre, pasar esa variable como argumento de una función y mostrar un mensaje de bienvenida personalizado. Más abajo veremos algún ejemplo.
Sentencias
Esta es la parte de la función donde debemos incluir las instrucciones y operaciones necesarias para el cometido de la función. Van justo después de los paréntesis encerradas entre llaves {
}
y separadas entre si por el símbolo punto y coma ;
.
Un ejemplo con cuatro sentencias:
1 2 3 4 5 6 |
function sumar() { var primer_numero = 3; //se define un primer número var segundo_numero = 2; //se define un segundo número var total_suma = primer_numero + segundo_numero; //se suman alert(total_suma); //se muestra el resultado } |
Declaraciones
Para declarar una función (definir como será) lo haremos una sola vez, por ejemplo:
Creamos una función llamada saludo()
, que mostrará una ventana con un texto de bienvenida.
1 2 3 |
function saludo() { alert('Hola y bienvenid@ a Blog.'); } |
Ya hemos definido como será la funcion saludo()
, pero la función por si sola no hará nada.
Para eso debemos
Llamadas
Al llamar a una función lo que hacemos es decir que se ejecuten las
1 |
saludo(); |
Hay que saber que primero hay que declarar la función y despues llamarla para que se ejecute correctamente:
El siguiente ejemplo funcionaría correctamente:
1 2 3 4 5 6 7 8 9 |
//primero declaramos la funcion saludo function saludo() { alert('Hola y bienvenid@ al Blog.'); } //aqui podría haber más funciones u otros códigos... o no //aqui llamamos a la función saludo para que se ejecute saludo(); |
Si lo hacemos a la inversa (primero llamarla y después declararla) no funcionará, ya que cuando la funcion se quiere ejecutar aún no sabe lo que tiene que hacer.
El siguiente ejemplo no funcionaría:
1 2 3 4 5 6 7 |
//llamada a la funcion saludo(); //daría un error al no estar declarada //aqui declaramos la funcion saludo... demasiado tarde function saludo() { alert('Hola y bienvenid@ al Blog.'); } |
Pero también podemos decidir cuando y bajo que circunstancias ejecutar una función, otra de las útiles ventajas del uso de funciones.
En el siguiente ejemplo creamos un botón en HTML para llamar a la funcion saludo()
con el evento onclick
del botón.
1 2 3 4 5 6 7 8 |
<!--primero declaramos la función en Javascript--> <script type="text/javascript"> function saludo() { alert('Hola y bienvenid@ al Blog.'); } </script> <!--despues la llamamos con un boton en HTML--> <input type="button" onclick="saludo()" value="Hola" /> |
Un ejemplo con argumentos sería el de la función sumarNumeros()
que mencionábamos antes. El mismo ejemplo nos servirá para ver la utilidad de reutilizar la función en diferentes casos:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> //creamos la funcion sumarNumeros con dos argumentos; num1 y num2 function sumarNumeros(num1, num2){ //creamos una variable que es la suma de los numeros var total = num1 + num2; //pintamos el resultado total en otro input document.getElementById("resultado").value = total; } </script> <!--creamos un boton para llamar a la funcion pasandole como argumentos dos numeros--> <input type="button" onclick="sumarNumeros(5, 3)" value="Sumar 5 y 3"> <!--pintamos un input de texto para mostrar el resultado de la suma--> <input type="text" id="resultado"> |
Podemos cambiar el valor de los argumentos y reutilizar la funcion:
1 2 3 4 5 |
<input type="button" onclick="sumarNumeros(12, 38)" value="Sumar 12 y 38"> <input type="button" onclick="sumarNumeros(20, 66)" value="Sumar 20 y 66"> <input type="button" onclick="sumarNumeros(85, 90)" value="Sumar 85 y 90"> <!--pintamos un input de texto para mostrar el resultado de la suma--> <input type="text" id="resultado"> |
Ahora imagina que esos argumentos no son fijos, sino que se pueden modificar sobre la marcha y reutilizar la función todas la veces que quieras…
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> function sumarNumeros(num1, num2){ var total = parseInt(num1) + parseInt(num2); document.getElementById("resultado").value = total; } </script> <input type="text" placeholder=" 0" id="numero1"> <span> + </span> <input type="text" placeholder=" 0" id="numero2"> <input type="button" value="Sumar" onclick="sumarNumeros(document.getElementById('numero1').value,document.getElementById('numero2').value)"> <input type="text" placeholder=" resultado" id="resultado" > |
+
Este ejemplo solo funciona con números enteros, si introducimos letras u otros caracteres fallará, dara un NaN, que quiere decir “Not A Number” o lo que es lo mismo “No es un Número”. Hay que poner condicionales para que si lo que se escribe no son números se muestre un mensaje de error del tipo “Solo se pueden sumar números”. El NaN, que nos puede ser útil, lo veremos más adelante…
Empieza a parecer útil esto de las funciones, ¿verdad…?
De momento esto es todo, ahora toca ver cada parte de las funciones por separado: Nombres, Argumentos y Sentencias, así como las Declaraciónes y las Llamadas a funciones…