función
Ing. Jaime Quispe Tupa
Objetivos
Definición.
Una función es una porción de código reusable que puede ser
llamada en cualquier momento desde nuestro programa. De
esta manera se evita la necesidad de estar escribiendo el
mismo código una y otra vez. Esto nos ayudará a escribir
código modular en JavaScript.
JavaScript soporta todas las características necesarias para
escribir código modular usando funciones. Por ejemplo, en
JavaScript se tiene las siguientes funciones: alert(), write(),
definidas en su núcleo una sola vez pero que son llamadas a
cada momento y en cualquier parte de nuestro programa.
Definición de una
función
Antes de poder usar una función necesitamos definirla. La
forma más común de definir una función es usando la palabra
reservada “function” seguido de un único nombre de función, y
de los parámetros deseados (puede ser sin parámetros), y un
bloque de instrucciones dentro de llaves.
Sintaxis:
function nombre_funcion(parametros)
{ instrucciones; }
Ejemplo:
function sumar(){
var num1 = 5;
var num2 = 8;
suma = num1 + num2;
alert("La suma es: "+suma);
}
En JavaScript existen dos maneras de definir una función
las cuales pueden ser mediante: declaración de función o
una expresión de función.
Declaración de Función
Se le asigna un nombre a la función. Dicha función se debe
cargar en el ámbito de la aplicación antes de la ejecución del
código.
Ejemplo:
function Saludar(){
alert("Hola a todos");
}
Expresión de Función
Aquí se crea una función anónima y se le asigna a una
variable. Esta función no se encuentra lista hasta que esa
línea en particular sea evaluada durante la ejecución del
código.
Ejemplo:
var Cantar = function(){
alert("Yo canto muy bien");
}
Llamado de funciones
Para invocar una función desde cualquier parte de nuestro
programa, solo es necesario escribir el nombre de la
función creada seguido de paréntesis( en caso de tener
parámetros indicarlos dentro, separados por comas).
Ejemplo:
Sumar();
Saludar();
Cantar();
Funciones con
parámetros
Hasta ahora sólo hemos creado funciones sin parámetros. A
continuación los parámetros pueden ser capturados dentro de la
función y hacer cualquier tipo de manipulación sobre estas.
Una función puede tener muchos parámetros separados por
comas.
Ejemplo
function 1:
Saludar(nombre, edad){
[Link] = nombre;
[Link] = edad;
[Link]("Hola mi nombre es: "+ [Link] + " y tengo: " + [Link]
+ " años." );
}
Saludar(“Juniors”, 24);
Ejemplo 2
function Sumar(num1,num2){
var resultado= num1 + num2;
alert(“La suma es: ”+ resultado);
}
Sumar(8,9);
Funciones con la
Instrucción return
Una función JavaScript puede tener la instrucción return. Esta
es requerida si queremos que la función dada nos retorne un
valor. La instrucción return debe ser la última línea en una
función.
Ejemplo:
function Valores(a,b,c){
return a+b+c; }
var suma = Valores(3,4,5); // esta función nos retorna el valor de 12
Mostrar un mensaje
JavaScript tiene algunas funciones predefinidas, como es el
caso de alert() (la cual hemos visto anteriormente) con la
que podremos mostrar un mensaje al usuario.
alert("Hola mundo\nEsta es otra línea");
Pedir confirmación al
usuario
Otra función interna es confirm(), con la que podemos mostrar
un cuadro de diálogo para preguntar al usuario alguna cuestión
cuyo resultado será un valor lógico true o false, que quedará
guardado en la variable que indiquemos (aunque también lo
podemos obtener directamente en una sentencia condicional).
[Link] ok = confirm("¿Enviar los datos?");
[Link]( ok == true )
3.{
4....
5.}
[Link]
7.{
8....
9.}
Pedir datos
Otra de las funciones internas de JavaScript es prompt(), con
la que podemos pedir un dato al usuario.
En el primer parámetro debemos poner el texto que deseamos
que aparezca en el cuadro de diálogo, y en el segundo un
valor por defecto (opcional).
[Link] valor = prompt("Dime la contraseña", "");
[Link]( valor == "33PPXX" )
3.{
[Link]("La contraseña es correcta");
5.}
[Link]
7.{
[Link]("Contraseña no válida: [" + valor + "]");
9.}
Ejecutar una función al
cargarse la página
Si deseamos que se ejecute una función en JavaScript al
cargarse la página web, la escribiremos en el atributo onload
de la etiqueta HTML body. A continuación te mostramos un
ejemplo:
1.<html>
2.<head>
3.<title>Curso de JavaScript</title>
4.</head>
5. <body onload="alert('Hola');">
6.<p>Tutorial de JavaScript</p>
7. </body>
8.</html>
La función eval()
La función eval() de JavaScript es usada para evaluar una
expresión como otro código fuente. Por ejemplo:
[Link] n1 = eval("10 * 10");
[Link](n1); // Devuelve 100
[Link] n2 = eval( "n1 + (40 * 2)");
[Link]( n2 ); // Devuelve 180
5.// Al procesarse esta línea se mostrará el alert() con
el texto y el resultado de la suma:
[Link]( alert("La suma de 2 y 3 es igual a " + (2+3)) );
7.// Se mostrará el alert() con el texto y el resultado de
la suma, como en el ejemplo anterior:
[Link]( "alert('La suma de 2 y 3 es igual a ' + (2+3))" );
Ejecutar una función
cada cierto tiempo
Con las funciones setInterval() y setTimeout() podremos definir otra
función que procese un código JavaScript que se ejecute cada
cierto tiempo. Para cancelarlas usaremos clearInterval() y
clearTimeout(), respectivamente.
La diferencia entre ellas es que mientras la función definida con
setTimeout() se procesará sólo una vez transcurrido el periodo de
tiempo indicado, setInterval() la procesará nuevamente (ya que el
contador se inicializa cada vez).
En ambas hemos de indicar el periodo de tiempo en milisegundos
(1 segundo = 1.000 milisegundos) tras los cuales se ejecutará la
función definida.
A continuación te mostramos un ejemplo, usando setTimeout():
[Link] temporizador;
[Link] iniciar() {
3. temporizador = setTimeout("mensaje()", 5000);
4.}
[Link] detener() {
6. clearTimeout( temporizador );
7.}
[Link] mensaje() {
[Link]("Han transcurrido 5 segundos.");
10.}
Explicación: a los cinco segundos de que llamemos a la función
iniciar() se ejecutará la función mensaje(). En caso de que
deseáramos cancelarlo deberíamos ejecutar la función detener():
observa que la variable 'temporizador' ha sido definida fuera de
ambas funciones, para así poder acceder a ella desde
clearTimeout().
Otro ejemplo, usando setInterval():
1.<html>
2.<head>
3.<title>Curso de JavaScript</title>
4.<script type="text/javascript">
5. var temporizador;
6.
7. function iniciar() {
8. temporizador = setInterval("mensaje()", 5000);
9. }
10.
11. function detener() {
12. clearInterval( temporizador );
13. }
[Link] mensaje() {
[Link]("Han transcurrido 5 segundos.");
16.}
17.</script>
18.</head>
19.<body>
20. <input type="button" value="Iniciar temporizador" onclick="iniciar();" />
21. <input type="button" value="Detener temporizador" onclick="detener();" />
22.</body>
23.</html>
