Lic.

Gerardo Guadarrama Gonzlez

Funciones
Cuando se desarrolla una aplicacin compleja, es
muy habitual utilizar una y otra vez las mismas
instrucciones.
Cuando una serie de instrucciones se repiten una y
otra vez, se complica demasiado el cdigo fuente de
la aplicacin, ya que:
El cdigo de la aplicacin es largo porque muchas
instrucciones estn repetidas.
Si se quiere modificar alguna de las instrucciones
repetidas, se deben hacer tantas modificaciones
como veces se haya escrito esa instruccin, se
convierte en un trabajo muy pesado y propenso a
cometer errores.

var resultado;
var numero1 = 3;
var numero2 = 5;
// Se suman los nmeros y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
numero1 = 10;
numero2 = 7;
// Se suman los nmeros y se muestra el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);

El cdigo anterior no recomendable. La solucin que

proponen las funciones consiste en extraer las
instrucciones que se repiten y sustituirlas por una
instruccin.
Se crea una funcin llamada suma_y_muestra de la
siguiente forma:
function suma_y_muestra()
{
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}

El programa utilizando funciones quedara de la

forma:
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
var resultado;
var numero1 = 3;
var numero2 = 5;
suma_y_muestra();
numero1 = 10;
numero2 = 7;
suma_y_muestra();

Argumentos y valores de retorno

Las funciones ms sencillas no necesitan ninguna
informacin para producir sus resultados. Sin
embargo, la mayora de funciones de las aplicaciones
reales deben acceder al valor de algunas variables
para producir sus resultados.
Las variables que necesitan las funciones se llaman
argumentos. Antes de que pueda utilizarlos, la
funcin debe indicar cuntos argumentos necesita y
cul es el nombre de cada uno.
Adems, al invocar la funcin, se deben incluir los
valores que se le van a pasar a la funcin.

Los argumentos se indican dentro de los parntesis

que van detrs del nombre de la funcin y se separan
con una coma (,).
Siguiendo el ejemplo anterior, la funcin debe indicar
que necesita dos argumentos, correspondientes a los
dos nmeros que tiene que sumar:
function
suma_y_muestra(primerNumero,
segundoNumero) { ... }

A continuacin, para utilizar el valor de los

argumentos dentro de la funcin, se debe emplear el
mismo nombre con el que se definieron los
argumentos:
function
suma_y_muestra(primerNumero,
segundoNumero) { ... }
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado);
}

// Definicin de la funcin
function
suma_y_muestra(primerNumero,
segundoNumero) { ... }
var resultado = primerNumero + segundoNumero;
alert("El resultado es " + resultado);
}
// Declaracin de las variables
var numero1 = 3;
var numero2 = 5;
// Llamada a la funcin
suma_y_muestra(numero1, numero2);

Afortunadamente, las funciones no solamente puede

recibir variables y datos, sino que tambin pueden
devolver los valores que han calculado. Para devolver
valores dentro de una funcin, se utiliza la palabra
reservada return. Aunque las funciones pueden
devolver valores de cualquier tipo, solamente pueden
devolver un valor cada vez que se ejecutan.
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos
gastosEnvio;
return precioTotal;
}

Como la funcin devuelve un valor, en el punto en el

que se realiza la llamada, debe indicarse el
nombre de una variable en el que se guarda el valor
devuelto:
var precioTotal = calculaPrecioTotal(23.34);

*Ejercicio 15
-En un programa denominado ejercicio15.html realice
lo siguiente:
- Solicite se ingrese un precio para algn artculo.
- Mediante una funcin calcule el precio total con la

siguiente frmula:
precioTotal = ( precio * 1.16 ) + gastosEnvio;
- Despliegue el resultado.

*Ejercicio 16
-En un programa denominado ejercicio16.html realice
lo siguiente:
- Escribir el cdigo de una funcin a la que se pasa
como parmetro un nmero entero y devuelve como
resultado una cadena de texto que indica si el
nmero es par o impar.
- Mostrar por pantalla el resultado devuelto por la
funcin.

*Ejercicio 17
-En un programa denominado ejercicio17.html realice
lo siguiente:
- Definir una funcin que determine si la cadena de
texto que se le pasa como parmetro es un
palndromo, es decir, si se lee de la misma forma
desde la izquierda y desde la derecha. Ejemplo de
palndromo complejo: "La ruta nos aporto otro paso
natural"

mbito de las variables

El mbito de una variable (llamado "scope" en ingls)
es la zona del programa en la que se define la
variable. JavaScript define dos mbitos para las
variables: global y local.
El siguiente ejemplo ilustra el comportamiento de los
mbitos:
function creaMensaje() {
var mensaje = Mensaje de prueba;
}
creaMensaje();
alert(mensaje);

El ejemplo anterior define en primer lugar una

funcin llamada creaMensaje que crea una variable
llamada mensaje. A continuacin, se ejecuta la
funcin mediante la llamada creaMensaje(); y
seguidamente, se muestra mediante la funcin
alert() el valor de una
variable llamada mensaje.
Sin embargo, al ejecutar el cdigo anterior no se
muestra ningn mensaje por pantalla. La razn es
que la variable mensaje se ha definido dentro de la
funcin creaMensaje() y por tanto, es una variable
local que solamente est definida dentro de la
funcin.

Adems de variables locales, tambin existe el

concepto de variable global, que est definida
en
cualquier punto del programa (incluso dentro de
cualquier funcin).
var mensaje = Mensaje de prueba;
function muestraMensaje() {
alert(mensaje);
}
*Ejemplo 18

La programacin de aplicaciones que contienen

formularios web siempre ha sido una de las tareas
fundamentales de JavaScript. De hecho, una de las
principales razones por las que se invent el lenguaje
de programacin JavaScript fue la necesidad de
validar los datos de los formularios directamente en
el navegador del usuario. De esta forma, se evitaba
recargar la pgina cuando el usuario cometa errores
al rellenar los formularios.

Propiedades
bsicas
de
formularios
y
elementos
JavaScript dispone de numerosas propiedades y
funciones que facilitan la programacin de
aplicaciones que manejan formularios. En primer
lugar, cuando se carga una pgina web, el navegador
crea automticamente un array llamado forms y que
contiene la referencia a todos los formularios de la
pgina.
Para acceder al array forms, se utiliza el objeto
document, por lo que document.forms es el array
que contiene todos los formularios de la pgina.

Como se trata de un array, el acceso a cada

formulario se realiza con la misma sintaxis de los
arrays. La siguiente instruccin accede al primer
formulario de la pgina:
document.forms[0];
Adems del array de formularios, el navegador crea
automticamente un array llamado elements por
cada uno de los formularios de la pgina. Cada array
elements contiene la referencia a todos los
elementos (cuadros de texto, botones, listas
desplegables, etc.) de ese formulario.

Utilizando la sintaxis de los arrays, la siguiente

instruccin obtiene el primer elemento del primer
formulario de la pgina:
document.forms[0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El
siguiente
ejemplo
muestra
cmo
obtener
directamente el ltimo elemento del primer
formulario de la pgina:
document.forms[0].elements[document.forms[0].ele
ments.length-1];

Aunque esta forma de acceder a los formularios es

rpida y sencilla, tiene un inconveniente muy grave.
Qu sucede si cambia el diseo de la pgina y en el
cdigo HTML se cambia el orden de los formularios
originales o se aaden nuevos formularios?
El problema es que "el primer formulario de la
pgina" ahora podra ser otro formulario diferente al
que espera la aplicacin.

Una forma de evitar los problemas del mtodo

anterior consiste en acceder a los formularios de una
pgina a travs de su nombre (atributo name) o a
travs de su atributo id. El objeto document permite
acceder
directamente
a
cualquier
formulario
mediante su atributo name:
var formularioPrincipal = document.formulario;
Var formularioSecundario = document.otro_form;
<form name="formulario" >
...
</form>
<form name="otro_form" >
...
</form>

Accediendo de esta forma a los formularios de la

pgina, el script funciona correctamente aunque se
reordenen los formularios o se aadan nuevos
formularios a la pgina. Los elementos de los
formularios tambin se pueden acceder directamente
mediante su atributo name:
var formularioPrincipal = document.formulario;
var
primerElemento
=
document.formulario.elemento;
<form name="formulario">
<input type="text" name="elemento" />
</form>

*Ejercicio 19
Dentro de las etiquetas body de un archivo html inserte lo
siguiente:
<form name="formulario" id="formulario" >
<input type="text" name="elemento" id="elemento" />
</form>
Cree una funcion que contega lo siguiente:
var formularioPrincipal =
document.getElementById("formulario");
var primerElemento =
document.getElementById("elemento");

Los eventos ms utilizados en el manejo de los

formularios son los siguientes:
onclick: evento que se produce cuando se pincha
con el ratn sobre un elemento.
Normalmente se utiliza con cualquiera de los tipos de
botones que permite definir XHTML
(<input type="button">, <input type="submit">,
<input type="image">).

 onchange: evento que se produce cuando el

usuario cambia el valor de un elemento de texto
(<input type="text"> o <textarea>).
Tambin se produce cuando el usuario selecciona una
opcin en una lista desplegable (<select>). Sin
embargo, el evento slo se produce si despus de
realizar el cambio, el usuario pasa al siguiente campo
del formulario.

 onfocus: evento que se produce cuando el usuario

selecciona un elemento del formulario.
onblur: evento complementario de onfocus, ya que
se produce cuando el usuario ha deseleccionado un
elemento por haber seleccionado otro elemento del
formulario.
Tcnicamente, se dice que el elemento anterior "ha
perdido el foco.

 onkeydown: Pulsar una tecla (sin soltar)

onkeypress: Pulsar una tecla
onkeyup: Soltar una tecla pulsada

*Ejercicio 20

 onload: La pgina se ha cargado completamente

*Ejercicio 21