Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 249

Visitas el mes pasado: 153

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




4. Estructuras básicas (III)

4.3 Funciones

javascript

Definición

Una función es una serie de instrucciones que se agrupan y pueden ejecutarse desde cualquier otra parte del código. Es decir, es un bloque de código que lo aislamos del resto para poder ejecutarlo una o varias veces desde otro punto del código.

El tipo de código javascript que hemos escrito hasta ahora es secuencial, es decir, el navegador lee el código según lo va encontrando en la página. Pero con las funciones no pasa lo mismo. Al leer el código, si se encuentra una función, el navegador lee sólo el nombre de la función, el resto del código lo guarda en memoria, pero no lo ejecuta. En instrucciones posteriores podemos "llamar" a esa función para que el código que contiene se ejecute.


Sintaxis de las funciónes

Para escribir una función en javascript tenemos dos opciones: La forma más común es:

function nombreFuncion() { .... }

Escribimos primero la palabra reservada function seguido del nombre que queramos darle a la función (En este caso nombreFunción), el cual va seguido de unos paréntesis (). Después, entre llaves se escriben las instrucciones que queremos que formen parte de la función { ... }.

los paréntesis sirven para pasar valores a la función, es decir, por ejemplo, si queremos sumar dos números podemos pasarselos a la función dentro del paréntesis, separados por comas. Ejemplo:

function sumar(num1,num2) {
         suma = num1 + num2;
         return suma;
         }
	

Un elemento nuevo nos aparece en esta función, la palabra clave return. Esta palabra indica un valor que devuelve la función después de ejecutarse. Es decir, podíamos haberle pedido a la función que escribiera la suma en algun sitio de la página o en una ventana de alerta, sin embargo lo que aquí queremos es simplemente obtener ese valor para usarlo más tarde. En este caso la función nos da un valor de retorno. Cada función puede dar sólo un valor de retorno, el cual será la variable que escribamos después de la palabra return.

Observa también la manera de escribir el código, distribuyendolo por líneas, pòniendo tabulaciones a todo lo que está dentro de la función, y poniendo la llave final en una línea aparte. Esto, aunque no es obligatorio, es muy recomendable, pues da claridad al código, y hace que al echarle un vistazo, tengamos localizadas las funciones rápidamente. Esta es la forma en la que lo suelen escribir la mayoría de los programadores, así que nosotros también lo haremos así.


llamar a una función

Llamar a una función es pedirle a javascript que ejecute el código que hay escrito dentro de ella. Para ello desde cualquier parte de la página escribimos en javascript el nombre de la función (paréntesis incluidos), con ello estamos llamando para que se ejecute la función.

Javascript es un lenguaje secuencial, por lo que el código de la función debe ser leído antes que su llamada (en caso contrario no encontrará la función).

Si llamamos a la función desde un evento, la función puede ponerse en cualquier parte del código, ya que el evento normalmente se produce después de haberse cargado la página. Por ejemplo, tenemos la siguiente función.

function buenosDias() {
         nombre = prompt("¿Cómo te llamas?");
         alert ("Buenos días " + nombre);
         }             

Pra ejecutar la función mediante un evento onclick se escribirá luego en cualquier parte de la página el siguiente código (HTML)

<p onclick="buenosDias()">Mensaje de bienvenida</p>

Hemos hecho este ejemplo en esta misma página, y puedes verlo funcionar pulsando en la siguiente línea:

Mensaje de bienvenida


Parámetros o argumentos

Algunas funciones, (como en el ejemplo anterior de la suma: function sumar(num1,num2) ), necesitan tener algunos datos para poder ejecutarse, éstos son los parámetros o argumentos, los cuales los indicaremos dentro del paréntesis.

Al llamar la función no es necesario que las variables para pasar los datos (argumentos) se llamen igual que las definidas al crear la función, ya que éstas funcionan como un array.

Así por ejemplo en la función anterior:

function sumar(num1,num2)

al llamarla debemos escribir dos valores (o variables) dentro del paréntesis, y separados por una coma:

sumar(a,b)

Asi, el valor de la variable a es tomado dentro de la función en la variable num1, (ya que las dos están en primer lugar), y el valor de la variable b es tomada por la variable num2. Dentro de la función se utilizarán sólo los valores definidos en ésta (num1 y num2) para hacer las operaciones o transformaciones necesarias.

Por lo tanto si debemos pasar parámetros (valores) a una función, no importa el nombre de la variable que le pasemos, sino el orden en que las pasamos para que se transformen en las variables que utiliza la función.

Aqui hemos visto un ejemplo que utiliza dos parámetros, pero se puede poner uno sólo, dos, tres, o los que necesitemos. El funcionamiento es el mismo.


Ejemplo en una página

En la página anterior (arrays) vimos una página de ejemplo en la que al pasar el ratón por encima de unos cuadrados te decía de que color era el cuadrado. Vamos a coger el mismo ejemplo y vamos a cambiarle, el código, de forma que mediante una función, éste se simplifica bastante, al no tener que repetir las instrucciones en cada atributo de evento. El código será el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Funciones</title> 
<style type="text/css">
h1 { font: bold 2em garamond; color: navy; text-align: center; }
p { font: bold 1.1em arial; text-align: center; }
#respuesta { font: bold 1.5em verdana; color: purple; text-align: center; }
#rojo, #amarillo, #verde, #azul { width: 225px; height: 225px; 
       border: 1px solid black; margin: 10px; float: left }
#rojo  { background-color: red; }
#amarillo  { background-color: yellow; }
#verde  { background-color: green; }
#azul  { background-color: blue; }
</style>
<script type="text/javascript">
function escribe(num) {
         var colores = ["ninguno","rojo","amarillo","verde","azul"];
         var texto = document.getElementById("respuesta")
         texto.innerHTML = colores[num]
         }
</script>
</head>
<body>
<h1>Te puedo decir dónde tienes el puntero del ratón:</h1>
<p>El ratón esta ahora encima del siguiente cuadrado:</p>
<h2 id="respuesta">ninguno</h2>
<div id="rojo" onmouseover="escribe(1)" onmouseout="escribe(0)"></div>
<div id="amarillo" onmouseover="escribe(2)" onmouseout="escribe(0)"></div>
<div id="verde" onmouseover="escribe(3)" onmouseout="escribe(0)"></div>
<div id="azul" onmouseover="escribe(4)" onmouseout="escribe(0)"></div>
</body>
</html>

Esta página de ejemplo podemos verla en el siguiente enlace:

Ejemplo de funcion


Como puedes ver la página queda exactamente igual que en el ejemplo anterior, pero el código javascript es distinto, ya que al usar una función:




En la página siguiente veremos otra estructura que nos permite elegir la opción de que un script se ejecute o no, según se cumplan determinadas condiciones

Condicionales



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com