Las funciones pueden ser invocadas dentro de un guión de JavaScript las veces que sea necesario, con distintos argumentos o inclusive con los mismos, si eso ayuda a resolver un problema.
Se dice que la principal ventaja de la utilización de funciones es que contribuye a la modularidad optimizando el código haciendo que se escriba una sola vez invocando únicamente a la función en otras secciones del guión, en lugar de tener que volver a escribir todas las instrucciones.
Existen varias formas de definir funciones en JavaScript, pero la más usual, similar a la utilizada en la mayoría de lenguajes de programación, es la que se muestra en la siguiente sintaxis:
function nombrefuncion(listaargumentos) {
bloqueinstrucciones;
}
Donde:
- function: es la palabra clave de JavaScript para crear una función.
- nombrefuncion: es el identificador o nombre que se le asigna a la función y con el cual será invocada desde otras secciones del guión.
- listaargumentos: son los parámetros o argumentos que recibe la función cada vez que se desee invocar. Los argumentos son opcionales; es decir, puede crear una función que no necesite argumentos, aunque en la mayor parte de casos los necesitará.
- bloqueinstrucciones: son las sentencias que realizarán la tarea para la que la función ha sido diseñada.
Veamos un primer ejemplo de función:
Archivo: hora.js
function hora(){
//Crear una variable para la fecha utilizando
//la función predefinada de JavaScript
//Date() que devuelve la fecha actual
var fecha = new Date();
var horas = fecha.getHours();
var minutos = fecha.getMinutes();
var segundos = fecha.getSeconds();
var horaActual = horas + ":" + minutos + ":" + segundos;
return horaActual;
}
Analicemos lo que esta función realiza y cómo lo hace. Primero se coloca el encabezado de la función con la palabra clave function seguida del nombre o identificador de la función, que en este caso es hora().
A continuación se crea una variable fecha a la que se le asigna lo que el constructor del objeto Date() devuelva, que es precisamente un objeto fecha.
Luego, utilizando los métodos del objeto Date() se extraen la hora, los minutos y los segundos. Estos métodos son getHours() para obtener la hora, getMinutes() para obtener los minutos y getSeconds() para obtener los segundos.
Finalamente se concatena la hora completa con el valor de las horas, los minutos y segundos de la forma como es usual mostrar la hora, separando cada componente con el signo dos puntos. Luego se devuelve la cadena con la hora completa utilizando la sentencia return.
Ahora hay que utilizar esta función e invocarla desde otro script para poder mostrar la hora actual en la página web. Este sería el código de la página web que hay que construir para probar la función:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Hora actual</title>
<script type="text/javascript" src="js/hora.js">
</script>
</head>
<body>
<header>
<h1>
<script type="text/javascript">
if(confirm("¿Quiere saber la hora")){
document.write("Son las " + hora());
}
</script>
</h1>
</header>
</body>
</html>
Note que el script js se guardó en una carpeta llamada js y por eso en la etiqueta script en el atributo src se ha utilizado la ruta js/hora.js.
Las siguientes imágenes muestran la ejecución del script en el navegador utilizando la página hora.html que se describió previamente mostrando el código:
Utilización de argumentos en las funciones
En JavaScript, así como en todos los lenguajes las funciones pueden recibir argumentos o parámetros, que deben indicarse cuando se va a invocar la función y ser proporcionados en el mismo orden en que se definió en la función.Como ya se indicó en alguna entrada anterior de este blog, JavaScript es un lenguaje con tipología débil y por esta razón cuando se definen los argumentos de una función, no se les indica ningún tipo de dato en particular.
Es así como una función que recibe argumentos en JavaScript se declara de la siguiente forma:
function distancia(x1, y1, x2, y2){
var dx = x2 - x1;
var dy = y2 - y1;
return Math.sqrt(dx*dx + dy*dy);
}
Si observa, entre los paréntesis junto al nombre de la función se proporciona la lista de argumentos separados por comas, en este caso son: x1, y1, x2 y y2. En ningún lado se indica de qué tipo son estos argumentos, para JavaScript no es necesario. El valor específico que se le pase a la función cuando sea invocada indicará el tipo de valor a asiganar a cada argumento
Veamos un ejemplo completo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mostrar su nombre</title>
<style type="text/css">
table {
border-collapse:collapse;
border:outset 3px MidnightBlue;
background-color:LightBlue;
font: normal 14px Arial,Helvetica,"Liberation Sans";
margin: 12px auto;
width:25%;
}
tr {
border:solid 1px MidnightBlue;
}
td {
border:solid 1px MidnightBlue;
text-align: center;
}
.envio {
background-color:#e69cF6;
}
form input[type=text] {
width: 240px;
}
</style>
<script type="text/javascript">
function muestranombre(nombre, apellido){
alert("Eres " + nombre + " " + apellido);
cnombre.value="";
cnombre.focus();
}
</script>
</head>
<body>
<form action="javascript:void(0);" name="frmnombre">
<table>
<tr>
<td>Nombre:</td>
<td>
<input type="text" name="cnombre" placeholder="(Su nombre)" />
</td>
</tr>
<tr>
<td>Apellido:</td>
<td>
<input type="text" name="capellido" placeholder="(Su apellido)" />
</td>
</tr>
<tr>
<td colspan="2" class="envio">
<input type="button" value="Ver" name="btnMostrar" onclick="muestranombre(document.frmnombre.cnombre.value, document.frmnombre.capellido.value);" />
</td>
</tr>
</table>
</form>
</body>
</html>
Al ejecutar el script en el navegador podrá verificar el funcionamiento del script anterior:
Variables estáticas
Aunque el nombre no lo parezca una variable estática se crea a partir de una propiedad de objetos que las funciones tienen en JavaScript. La característica más importante que tienen las variables estáticas es que su valor puede persistir entre distintas llamadas que se realicen a la función.Esto solo puede entenderse con un ejemplo concreto, que mostramos a continuación:
function doSum(x, y){
//Definiendo la variable estática
//Note que la variable se crer como si fuera una propiedad de la función
doSum.totalSum = doSum.totalSum + x + y;
return (doSum.totalSum);
}
Nombre este archivo como suma.js y guárdelo dentro de una carpeta js que debe crear en la carpeta donde estará alojado el documento HTML.
Creamos un documento HTML para probar la función:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Suma con variable estática</title>
<link rel="stylesheet" type="text/css" href="css/suma.css" />
<script type="text/javascript" src="js/suma.js"></script>
</head>
<body>
<header>
<h1>Variables estáticas</h1>
</header>
<section>
<article>
<script type="text/javascript">
//Definiendo la variable estática en el script para mantener
//la suma en ejecución durante todas las llamadas
doSum.totalSum = 0;
document.write("Primera llamada: " + doSum(3,7) + "<br />");
document.write("Segunda llamada: " + doSum(5,9) + "<br />");
document.write("Tercera llamada: " + doSum(50,21) + "<br />");
</script>
</article>
</section>
</body>
</html>
Llamemos al documento web anterior sumaestatica.html.
Agregamos una hoja de estilos para que el resultado tenga una buena apariencia:
* {
border: none;
margin: 0;
padding: 0;
}
body {
font: Normal 18px Arial,Helvetica,"Liberation Sans";
}
h1 {
color: #2d3265;
font: Bold 24px "Myriad Pro";
text-align: center;
}
article {
background: rgba(88,71,184,1);
background: -moz-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(88,71,184,1)), color-stop(35%, rgba(127,120,235,1)), color-stop(71%, rgba(109,91,240,1)), color-stop(100%, rgba(117,181,230,1)));
background: -webkit-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
background: -o-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
background: linear-gradient(135deg, rgba(88,71,184,1) 0%, rgba(127,120,235,1) 35%, rgba(109,91,240,1) 71%, rgba(117,181,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5847b8', endColorstr='#75b5e6', GradientType=1 );
border: 6px outset #2d3265;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-o-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-ms-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: ;
color: #f5eb82;
margin: 18px auto;
padding: 12px 16px;
width: 28%;
}
Nombremos la hoja de estilos como suma.css dentro de una carpeta css que deberá crear dentro de la carpeta donde está alojado el documento HTML.
Probemos el sitio web en un navegador:
Examinaremos otros temas avanzados sobre funciones como funciones como objetos, funciones anónimas y en futuras entradas, cuando hayamos visto objetos, arreglos, etc.
No hay comentarios:
Publicar un comentario
Con mucho agrado les presento este pequeño manual en forma de blog sobre el lenguaje JavaScript. Espero comentarios de su parte que ayuden a mejorar este trabajo. Aclaro que me he enfocado en un inicio en el JavaScript puro, sin framework. Tal vez más adelante y dedicando algún tiempo en aprenderlos, pueda adentrarme en algún manual de framework JavaScript posteriormente.