Programacin I

01. Funciones I - Creacin y uso

QU SON LAS FUNCIONES?

Una funcin es, al igual que una variable, un espacio reservado en nuestro programa que encierra
una serie de instrucciones destinadas a cumplir una determinada accin.
Poseen un nombre que las identifican y nos permitir ejecutarlas al hacer referencia al mismo.
Desde los conceptos bsicos de la programacin, una funcin es un recurso pensado para resolver un
problema puntual que se almacena bajo un nombre propio.
Si tuvisemos que hacer los mismos pasos en dos partes distintas de un mismo documento (o en
documentos distintos tambin), podramos aprovechar este recurso para ponerle un nombre a esos
pasos y cuando necesitamos ejecutarlos le decimos al programa 'haz esto'.
Desde la programacin propiamente dicha, una funcin tiene dos partes bien definidas:
Un bloque de cdigo que encierra todas las acciones a realizar y la llamada a ejecucin de la misma.
Desde nuestra experiencia, algunas funciones que hemos usado son

prompt( ), confirm( ) y

alert( ) (cabe recordar que los mtodos son, en definitiva, funciones asociadas a objetos).

SINTAXIS
Al igual que todas las estructuras de JavaScript, para crear nuestra primera funcin tenemos que
respetar una sintaxis, para que el programa agregue la misma a su librera de cdigo disponible.
Un funcin se declara con la palabra reservada function, seguida por el nombre que tendr la
misma, un juego de parntesis (ms adelante en este mismo documento veremos la utilidad de los
mismos) y entre apertura y cierre de llaves todo el cdigo que se ejecutar cada vez que se solicite
la funcin.
Por ejemplo, si queremos hacer una funcin que muestre el mensaje 'hola a todos' podramos
ponerle el nombre saludar y crearla de la siguiente manera:

function saludar() {
document.write( 'Hola a todos' ) ;
}
Es bueno tener presente que esto es solo la declaracin de la funcin, la funcin est en memoria a
la espera de ser utilizada por nuestro programa.
Si ejecutamos en este momento el cdigo que hemos escrito, no tendremos ninguna salida impresa
en el HTML, dado que nos falta ejecutar (o invocar) al cdigo escrito, esto se hace simplemente con
el nombre de la funcin seguido por los parntesis:
Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
saludar(); //esto mostrar en pantalla 'Hola a todos'
Los nombres de la funciones respetan las mismas restricciones que los nombre de variables (son
case sensitive, no pueden empezar con nmeros, no pueden tener espacios, ni guin del medio, etc).
El cdigo encerrado dentro de las llaves de una funcin, no es otra cosa que JavaScript comn y
corriente, tal como viene escribindolo desde el cuatrimestre anterior. Por lo cual una funcin puede
tener adentro peticiones y muestras de datos (prompt, confirm, alert, document.write), operacin de
variables (comparaciones, concatenaciones, sumas, restas, etc.), estructuras de toma de decisiones
(if, switch), estructuras iterativas (for, for in, do, while) e incluso declaraciones o llamadas a otras
funciones pre-existentes.

Dado que las funciones se comportan como variables, tambin es posible declarar
una funcin con la siguiente sintaxis:

var saludar = function() { alert('hola'); }

VARIABLES EN LAS FUNCIONES

De ms est decir (pero hacemos la salvedad), que siguiendo el ejemplo anterior de mostrar un
saludo- no nos sirve de nada una funcin que siempre diga 'Hola a todos', dado que si se desea
saludar al usuario Germn, deberamos crear OTRA funcin que haga el document.write( )
respectivo.
Por este motivo, las funciones permiten trabajar con variables, pero debemos saber cmo trabaja
JavaScript con las variables dentro de las funciones para poder llegar al resultado esperado.
Todas las variables en JavaScript se mantienen en cascada, esto quiere decir que una variable
creada por fuera de una funcin existe (por herencia) dentro de una funcin:

var nombre = 'Germn';

function saludar( ){
document.write( 'Hola '+nombre); //usa la variable nombre de afuera de la funcin.
}
saludar( ); //se ejecuta la funcin.
Este concepto de la programacin, donde las variables creadas por fuera de una funcin existen
adentro de las mismas, se llama variable global.
Si bien es un recurso del cual disponemos, no es una de las soluciones ms seguras, ya que si
cometemos un error en nuestro cdigo JavaScript y modificamos dentro de la funcin la variable

Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
nombre, tambin estaremos modificndola por fuera, dado que ese estado global es tanto para la
lectura como para la escritura.

var nombre = 'Germn'; function saludar(){

nombre = prompt( 'Ingrese su nombre','' );//ac se pisa la variable externa.
document.write( 'Hola ' + nombre); //reemplaza la variable nombre de afuera.
}
saludar(); //se ejecuta la funcin.
document.write( nombre ); //ya no muestra Germn sino el dato recibido por prompt.
Para evitar este problema, deberamos tener presente que todas las variables que creemos dentro de
una funcin debera estar precedida por la palabra reservada var, si hacemos esto, la variable que
acabamos de definir ser privada de la funcin, y de esa manera SOLO EXISTIR DENTRO DE LA
MISMA (ms abajo se muestra un ejemplo).
Por otra parte, tambin hay que tener presente que las variables creadas adentro de una funcin no
se pueden pedir por fuera (eso significa que sea privada):

var nombre = 'Germn';

function saludar(){
var edad = prompt( 'Ingrese su edad', '' );
document.write( 'Hola ' + nombre);
}
saludar(); //se ejecuta la funcin.
document.write( "Tenes " + edad + " aos" ); // Error! edad is null or undefined
En el ejemplo anterior, se ejecuta la funcin saludar( ), al leer la primer instruccin de la funcin
pide un valor y se guarda en un espacio en memoria creado en el momento bajo la variable edad, se
muestra el saludo, y finaliza la funcin.
Luego de ejecutar la funcin se le pide al programa mostrar la edad recibida dentro de la funcin
saludar, pero el programa devolver un error.

Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
Queda claro, entonces, que toda variable definida por fuera de una funcin existe por carcter
hereditario dentro de una funcin, pero una variable creada por dentro de una funcin deja de
existir cuando la funcin termina su ejecucin.
Podramos decir, entonces, que las funciones se ejecutan en una capa propia, ajena al desarrollo del
programa principal, que se nutre de todos los recursos que el programa pueda brindar, pero no deja
sus propios recursos al programa base.
Un comportamiento interesante radica en las variables declaradas dentro de una funcin privadas
que, al mismo tiempo, existen por fuera de la misma globales.
En estos casos particulares, dado que la palabra reservada var dentro de una funcin genera una
variable propia de la funcin, la variable que est por fuera y la variable que est por dentro de la
funcin son dos datos distintos.

var nombre = 'Germn';

function saludar(){
var nombre = prompt( 'ingrese un nombre nuevo', '' ) ;
// Esto no pisa el valor 'Germn', crea una variable NUEVA Y PRIVADA
adentro de la funcin.
document.write( 'Usted ahora se llama ' + nombre ) ; //concatena con el
dato recibido
}
saludar( ); //ejecuto la funcin
document.write( nombre ) ; // sigue mostrando 'Germn'
Las variables globales son una EXCELENTE solucin cuando necesitamos "compartir" una variable
entre dos funciones diferentes.
Supongamos que en la funcin 1 tenemos que recibir un dato y en la segunda funcin nos vemos
obligados a mostrar o procesar ese valor, por ser global tendremos la garanta de que existir dentro
de ambas funciones.

FUNCIONES Y ELEMENTOS HTML

Hasta ahora, los ejemplos que mostramos, tenan la llamada a funcin correspondiente dentro del
mismo cdigo JavaScript, por lo cual su ejecucin responda a una lectura procedural (paso a paso,
hasta llegar a la llamada a funcin correspondiente).
Tcnicamente eso es lo mismo que venamos haciendo en primer cuatrimestre, salvo que tenamos
las acciones bien agrupadas en funciones.
Para poder romper con esta linealidad del cdigo y ofrecerle al usuario una interaccin con nuestra
pgina web, JavaScript est orientado a eventos; esto quiere decir que su gran fuerte radica en la
posibilidad de ejecutar un fragmento de cdigo cuando el HTML lo solicite.
Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
A diferencia de las rutinas que vienen desarrollando hasta ahora, el cdigo no se ejecutar en el
mismo momento que se carga el script, sino nicamente cuando se detecte el evento esperado.
Un evento, entonces, es una respuesta que ofrece el navegador ante determinada accin o situacin.
En algunos casos esta accin la dispara el usuario, interactuando con el mismo documento HMTL
(por ejemplo: hacer click en una foto o seleccionar una opcin de una etiqueta SELECT) o puede ser
una respuesta misma del navegador (por ejemplo: cuando una imagen no se puede cargar y dispara
un evento de tipo error).
En este documento nos vamos a concentrar en hacer funciones que se ejecuten a pedido del usuario
detectando el click sobre el elemento deseado.
Tenemos dos maneras de asociar uno o ms eventos a una etiqueta HTML:
1. Desde el mismo cdigo en JavaScript (se ver ms adelante en la cursada).
2. Como un atributo de la misma etiqueta HTML.
Como atributo del HTML los eventos son todos los que empiezan con el prefijo ON (onclick,
onmouseover, onblur, onfocus, onload, onerror, etc.).
Cuando a una etiqueta le asignamos un evento, HTML nos permite escribir entre las comillas TODO
EL CODIGO JAVASCRIPT que deseemos, siempre que respetemos la sintaxis del lenguaje.
Claro est que hacer algo como sto es un poco desprolijo (y en cierto punto, inentendible):

<a href="#" onclick="var nombre=prompt( 'ingresa tu nombre' , ''); var

apellido=prompt('ingresa tu apellido',''); var email=prompt('ingresa tu
email',''); alert( 'TUS DATOS SON:\n\n\tNombre: '+nombre+'\n\tApellido:
'+apellido+'\n\tEmail: '+email);">CLICK Y TE PIDO NOMBRE, APELLIDO Y MAIL</a>
Por lo cual es ms ptimo tener encapsulada en una funcin todas las acciones que nos interesa
ejecutar y cuando se detecta el evento ejecutar dicha funcin.
En la etiqueta <script> tendramos algo como esto:

var nombre, apellido, email;

function pedirDatos( ){
nombre = prompt('ingresa tu nombre', '');
apellido = prompt('ingresa tu apellido', '');
email = prompt('ingresa tu email', '');
}
function mostrarDatos( ){
alert('TUS DATOS SON: ' + nombre + ' ' + apellido + ' ' + email);
}

Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
Y luego en algn lugar del HTML ejecutaramos cada funcin en el evento que nos interesa detectar.

<a href="#" onclick="pedirDatos( );">Pedir los datos del usuario</a>

<a href="#" onclick="mostrarDatos( );">Mostrar los datos del usuario</a>
IMPORTANTE:
Para trabajar con vnculos particularmente, es OBLIGATORIO anular la navegacin.
Los vnculos con el numeral, como bien sabemos, buscan en el HTML un ancla (cualquier otro
elemento que tenga como ID el mismo valor que est despus del numeral). Si luego del numeral no
ponemos nada, ese vnculo no van a ninguna parte (en realidad hace scroll al inicio de la pgina).
Retomando el ejemplo: cuando se haga click en el primer vnculo se ejecutar el cdigo de la funcin
pedirDatos( ) que mostrar las ventanas de ingreso de datos, recibiendo el nombre y el apellido del
usuario. Luego, al clickear el segundo vnculo, se ejecutar la funcin mostrarDatos( ) que mediante
el uso del alert( ) informar los datos recibidos en la primera funcin.
Y como ambas variables (nombre y apellido) fueron declaradas por AFUERA de las dos funciones,
existen "en cascada" tanto en pedirDatos( ) como en mostrarDatos( ) por ser consideradas
GLOBALES
Estas funciones que estn a la espera de un evento
desde el HTML se llaman Event Listener
(escuchadores de eventos).
De hecho, eso es lo que son: Funciones que
escuchan (y estn atentas) a los eventos que se
disparan en el HTML.
Un escuchador de eventos se podra comparar con
un pequeo empleado que est atento a todos los
eventos del HTML y ante una determinada accin,
ejecuta el cdigo asociado a la misma.

LISTADO DE EVENTOS
A continuacin se deja un listado de los eventos que existen en el HTML, as como la etiqueta a la
cual se puede asignar dicho evento y en qu instancia (del usuario o del navegador) se dispara.

Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar

Programacin I
01. Funciones I - Creacin y uso
MANEJADOR

ETIQUETAS APLICABLES

SE PRODUCE CUANDO...

onabort

Image

El usuario interrumpe la carga de una imagen

onblur

Button, Checkbox, File, Layer,

Password, Radio, Reset, Select,
Submit, Text, Textarea, window

Un elemento de formulario, una ventana o un

marco pierden el foco

onchange

File, Select, Text, Textarea

El valor de un campo de formulario cambia

onclick

Button, document, Checkbox, Link,

Radio, Reset, Submit

Se hace click en un objeto o formulario

ondblclick

document, Link

Se hace click doble en un objeto o formulario

ondragdrop

window

El usuario arrastra y suelta un objeto en la

ventana

onerror

Image, window

La carga de un documento o imagen produce un

error

onfocus

Button, Checkbox, File, Layer,

Password, Radio, Reset, Select,
Submit, Text, Textarea, window

Una ventana, marco o elemento de formulario

recibe el foco

onkeydown

document, Image, Link, Textarea

El usuario pulsa una tecla

onkeypress

document, Image, Link, Textarea

El usuario mantiene pulsada una tecla

onkeyup

document, Image, Link, Textarea

El usuario libera una tecla

onload

Image, Layer, window

El navegador termina la carga de una ventana

onmousedown

Button, document, Link

El usuario pulsa un botn del ratn

onmousemove

Ninguno (debe asociarse a uno)

El usuario mueve el puntero

onmouseout

Layer, Link

El puntero abandona una rea o enlace

onmouseover

Layer, Link

El puntero entra en una rea o imagen

onmouseup

Button, document, Link

El usuario libera un botn del ratn

onmove

window

Se mueve una ventana o un marco

onreset

Form

El usuario limpia un formulario

onresize

window

Se cambia el tamao de una ventana o marco

onselect

Text, Textarea

Se selecciona el texto del campo texto o rea de

texto de un formulario

onsubmit

Form

El usuario enva un formulario

onunload

window

El usuario abandona una pgina

Prof. Germn Rodrguez german.rodriguez@davinci.edu.ar