Scribd
Cargar
55 vistas

Procedimientos y Funciones en JavaScript

Este documento explica las funciones en JavaScript. Indica que las funciones pueden realizar acciones y devolver valores, a diferencia de los procedimientos Sub en VBScript que solo pueden realizar acciones. Describe cómo definir funciones mediante la palabra clave "function" y los parámetros, y cómo invocar funciones mediante eventos como clicks. También explica la importancia de la instrucción "return" para devolver valores de una función.

Cargado por

Franklin Iván Tarrillo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
55 vistas

Procedimientos y Funciones en JavaScript

Este documento explica las funciones en JavaScript. Indica que las funciones pueden realizar acciones y devolver valores, a diferencia de los procedimientos Sub en VBScript que solo pueden realizar acciones. Describe cómo definir funciones mediante la palabra clave "function" y los parámetros, y cómo invocar funciones mediante eventos como clicks. También explica la importancia de la instrucción "return" para devolver valores de una función.

Cargado por

Franklin Iván Tarrillo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

UNIVERSIDAD NACIONAL DE INGENIERÍA

FACULTAD DE INGENIERÍA AMBIENTAL

Procedimientos y funciones

En JavaScript no pueden definirse procedimientos Sub como en


VBScript, pero sí funciones (function). A cambio, aquí las
funciones pueden realizar tanto acciones como devolver valores,
mientras que en VBScript solamente los procedimientos Sub
pueden realizar acciones. Dentro de una función no se puede
definir otra función, pero sí pueden realizarse llamadas a cuantas
sea necesario. Para declarar una función simplemente se escribe
la instrucción function y a continuación el nombre que tendrá
seguido de un par de paréntesis que contendrán los argumentos,
si los los hay. Por ejemplo:

function mensaje() y si tiene argumentos: function sumar(a, b)

Los argumentos pueden ser variables, o directamente cadenas,


números e incluso objetos.
Después de haber definido el nombre de la función, se escribe un
par de llaves, dentro de las cuales irán todas las líneas que
compongan el código de nuestra función. Por ejemplo:
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
Las funciones de javaScript reciben los argumentos por valor, es
decir, que si la función cambia el valor de los parámetros
recibidos, este cambio no se reflejará globalmente, sino que sólo
será efectivo en el ámbito de la propia función, ni siquiera si la
misma función es llamada desde otro punto del programa.

No hay que confundir la declaración de funciones con el


objeto Function() de javaScript. Fíjate en que el nombre de este
objeto comienza por "F" mayúscula. Se verá en el
apartado Objetos.

Normalmente las funciones se invocarán capturando un evento,


es decir, un suceso que se produce y es detectado en la ventana
del navegador. Uno de los eventos más comunes es el que detecta
la pulsación (onClick) del puntero del ratón sobre un objeto, por
ejemplo, un botón de un formuulario. En el siguiente ejemplo
veremos cómo escribir una página que captura un evento en el

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL

botón de un formulario que llama a una función. Esta función


invoca el método alert del objeto window:

<HTML>
<HEAD>
<TITLE>Capturar evento de boton</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function mensaje() {
alert("Esto es un mensaje de JavaScript")
}
// -->
</SCRIPT>

</HEAD>
<BODY>

<FORM NAME="Formulario1">
<INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
onClick="mensaje()">
</FORM>

</BODY>
</HTML>

Y al pulsar el botón, se obtiene:

Al ser capaz function de realizar acciones tanto como de devolver


valores, es necesaria una instrucción que le indique lo que debe
hacer: return. Solamente si aparece esta instrucción al final de la
función, ésta devolverá el valor que tenga programado, si no, realizará las
tareas que tenga encomendadas, pero no se podrá obtener de ella una
respuesta. Por ejemplo:

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL

<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

</BODY>
</HTML>

Se obtiene:

undefined

Como puedes ver, se ha definido una función con dos argumentos: a y b que
serán sumados. No obstante, cuando es invocada para escribir el resultado de la
suma, se obtiene una desconcertante respuesta: undefined . Esto es debido a que
no se le ha dicho que entregue el resultado, sino solamente que lo calcule. Pero
si se escribe:

<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
sumar = a + b
return sumar
}

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL
// -->

</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

</BODY>
</HTML>

Esta vez sí se obtiene lo esperado:

En el ejemplo, la función devuelve el resultado de la suma en una variable que


se llama igual que la propia función: sumar, pero también se puede hacer sobre
una variable con distinto nombre. Por ejemplo, funcionaría igual así:

<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
resultado = a + b
return resultado
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

</BODY>
</HTML>

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL

También es posible devolver directamente el resultado de la suma sin depositar


el valor previamente en ninguna variable ni en el nombre de la función:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return a + b
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

</BODY>
</HTML>

En JavaScript las funciones que tienen argumentos, como la del ejemplo,


automáticamente son provistas de un vector conteniendo los valores de los
argumentos. Y te preguntarás qué es eso de un "vector". Un vector es algo
parecido a una matriz o array, y en este caso nos permite acceder a los valores
de los argumentos a y b por otra via que no es utilizarlos directamente. Estos
vectores, cuando hay que automatizar procedimientos, pueden resultar muy
útiles. En el caso del vector de nuestra función, y como todos los vectores y
arrays, la numeración del índice comienza por el cero, y por supuesto, el orden
de los valores en el vector es el mismo que el de los argumentos en la función,
es decir, el índice 0 corresponde al argumento a y el índice 1 corresponde al b.
Este ejemplo es equivalente al anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL

function sumar(a, b) {
return arguments[0] + arguments[1]
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

</BODY>
</HTML>

La palabra arguments, como ya habrás supuesto, es reservada y no puede


emplearse como nombre de variable ni de función, y tiene una
propiedad: length que nos indica la longitud del índice del vector. Por
ejemplo, si modificamos un poco la función anterior:
<HTML>
<HEAD><TITLE>Prueba de JavaScript</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function sumar(a, b) {
return arguments.length
}
// -->
</SCRIPT>
</HEAD>

<BODY>

<SCRIPT LANGUAGE=JavaScript>
<!--
document.write(sumar(2, 2))
// -->
</SCRIPT>

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA


UNIVERSIDAD NACIONAL DE INGENIERÍA
FACULTAD DE INGENIERÍA AMBIENTAL

</BODY>
</HTML>

Se obtiene 2 que es el número de argumentos que tiene la función. Fíjate en


que este contador no empieza en el cero, puesto que devuelve 2.

Mg.Pd. Jorge Luis Huamán Vera UNI - FIA

También podría gustarte