• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Estructura básica de una función Javascript

Publicada en 10 sep 2014 de Josetxu

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í:

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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:

JavaScript
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.

JavaScript
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 llamar a la función.

Llamadas

Al llamar a una función lo que hacemos es decir que se ejecuten las sentencias ó instrucciones que hemos definido anteriormente para esa función. Para llamarla solo tenemos que nombrarla con los paréntesis a continuación y los argumentos (si fueran necesarios) dentro de los paréntesis:

JavaScript
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:

JavaScript
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:

JavaScript
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.

XHTML
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:

XHTML
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:

XHTML
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…

XHTML
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…

Publicado en: Javascript | Etiquetas: Básico, Funciones |
« Estructura básica de CSS
» Comentar código

Artículos Relacionados

  • Funciones básicas en Javascript: [alert()] y [prompt()]Funciones básicas en Javascript: [alert()] y [prompt()]
  • Funciones básicas en PHP: [echo] y [print]Funciones básicas en PHP: [echo] y [print]
  • Funciones básicas en PHP: [include()] y [require()]Funciones básicas en PHP: [include()] y [require()]
  • Crear pestañas de contenido o ‘tabs’ fácilmente con javascriptCrear pestañas de contenido o ‘tabs’ fácilmente con javascript
  • Comentar códigoComentar código
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲