javascript-basico-3-minTutoriales JavaScript

JavaScript básico #3: funciones

Importante: Pueden probar los scripts y crear los suyos mediante las herramientas para desarrolladores en su navegador favorito, si no saben cómo usarlas vean la introducción a JavaScript
Ahora que sabemos qué es una variable, procederemos a hablar sobre las funciones JavaScript.

¿Qué son las funciones JavaScript?

Las funciones de JavaScript son un bloque de código creado para realizar una tarea en particular que sólo se ejecuta cuando "algo" invoca (llama, ejecuta) la función. Las funciones nos permiten crear un simple código para después utilizarlo, ahorrándonos así escribir el mismo código múltiples veces.

Reglas básicas

1. Debe tener un nombre (identificador)
2. No es como una variable, debe finalizar con (); para ejecutar la función: ejemplo();

Mi primera función

//creamos la funcion
function mifuncion() { alert("Hola, soy una funcion"); }
//la ejecutamos
mifuncion();


Funciones avanzadas

Una vez que ha quedado en claro qué es una función, comenzaremos con las funciones personalizadas.
//creamos la funcion
function personalizada(texto) { alert(texto); }
//la ejecutamos
personalizada("Hola, soy una alerta personalizada");



Como podrán ver, se creo un apartado llamado "texto", se podría considerar una variable…..la cual puede ser personalizada cambiando así el mensaje mostrado por la alerta javascript.

Ejemplo más complicado…

Esta vez, utilizaremos la sentencia return (regresar)
<!-- agregamos un elemento html de prueba-->
<p id="demo"></p>

<!-- agregamos el script -->
<script>
//creamos la función
function sumar(a, b) { return a+b; }
//la ejecutamos
document.getElementById("demo").innerHTML = sumar(500, 150);
</script>



en el ejemplo, utilizamos a y b como espacios personalizados y la función suma los valores ingresados.

Utilizar como variables

Como se puede apreciar en el ejemplo anterior, se utilizó la función como si fuese una variable…eso es posible gracias a la sentencia return.
//creamos la función
function variable(contenido){ return contenido;}
//la utilizamos como variable y en contenido ingresamos location.hostname (pagina actual)
var demo = variable(location.hostname);
//mostramos el resultado (contenido de la variable)
alert(demo);


Aclaro, sería más sencillo simplemente utilizar alert(location.hostname);, pero en este caso, se trata de un ejemplo.

Función para cambiar el titulo actual

Finalizaremos el articulo con una demostración de lo que es posible realizar mediante una funcion.
//creamos la funcion
function titulo(nombre) {document.title = nombre;}
//la ejecutamos
titulo("un nuevo titulo");