Tecnología de Programac ión

V Ciclo

JavaScript FUNCIONES Son una serie de instrucciones que englobamos dentro de un mismo proceso, este proceso se podrá luego ejecutar desde cualquier otro sitio con sólo llamarlo. Por ejemplo, en una página web puede haber una función para cambiar el color del fondo y desde cualquier punto de la página podríamos llamarla para que nos cambie el color cuando lo deseemos. Podemos decir también que una función es un módulo de un programa separado del cuerpo principal, que realiza una tarea específica y que puede regresar un valor a la parte principal del programa u otra funcion o procedimiento que la invoque. Las funciones se utilizan constantemente, no sólo las que escribes tú, sino tambi también én las que ya están están defini definidas das en el sistem sistema, a, pues pues todos todos los lenguaj lenguajes es de programación suelen tener muchas funciones para realizar procesos habituales, como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo a otro. Ya hemos visto alguna función en nuestros ejemplos de la sesión Nº 02. Por ejemplo, cuando hacíamos un document.write() en realidad estábamos llamando a la función write() asociada al documento de la página, que escribe un texto en la página. El desarrollo web siempre tiene dos interacciones: la que se produce en el lado del servidor y la que se produce en el lado del cliente, esta segunda cada vez tiene más relevancia para conseguir una mejor experiencia del usuario y JavaScript es el respon responsab sable le de esto. esto. JavaSc JavaScrip riptt es una de esas esas tecnol tecnologí ogías as que se pensó pensó para para abordar pequeños problemas, pero que por cuestiones de compatibilidad compatibilidad y aceleración tecnológica, se ha convertido en una tecnología versátil a la vez necesaria para poder afrontar las exigencias de la actualidad.

Sintaxis: Características importantes en la sintaxis de una función: a) Una declarac declaración ión de función función siempre siempre empiez empieza a con la palabra palabra clave clave function. b) El sigui siguien ente te punto punto es el nombr nombre e de la func funció ión. n. El nomb nombre re de la funci función ón es import importan ante, te, porqu porque e es lo que debes debes record recordar ar para para utili utilizar zarla la y reutil reutiliza izarr su código. Debe ser una descripción precisa de lo que la función hace. c) Inmediata Inmediatamente mente despué después s del nombre nombre de la función función viene viene un par de paréntesi paréntesis. s. Dentro de ellos viene la lista de argumentos de la función, la cual te permite hacer la función más genérica y reutilizable; puedes aplicarla a más situaciones más fácilmente. d) Finalm Finalment ente e viene viene un par de llaves llaves que contien contienen en código código:: esto esto signific significa a un bloque de código en JavaScript. Todo lo que está en el bloque será ejecutado cuando la función sea llamada, en orden, en la misma forma que cualquier otra porción de código en JavaScript.

Ing. Ricardo More Reaño

Tecnología de Programac ión

V Ciclo

La forma general de una función es : function Nombredelafunción(parámetros) { cuerpo de instrucciones; return [dato, var, expresión]; } Utilizando una función: Luego de definir la función, para llamarla desde alguna parte del código se escribe:

Nombredelafunción(); Ejemplo 1: Esta es una función sin parámetros:

<script type="text/javascript"> function bienvenida(){ document.write("

Hola, este es un ejemplo de función

"); } //llamando a la función bienvenida();
FUNCIONES CON JAVASCRIPT 2013 Ejemplo 2: Esta es una función sin parámetros; pero observará que la función está dentro del encabezado y se le ha llamado desde el cuerpo del documento(body):

<script type="text/javascript"> function bienvenida(){ document.write("

Hola, este es un ejemplo de función

"); } <script type="text/javascript"> //llamando a la funcion bienvenida();
Ing. Ricardo More Reaño

Tecnología de Programac ión

V Ciclo

FUNCIONES CON JAVASCRIPT 2013 Ahora Ud. pruebe este ejemplo escribiendo sólo la función en un archivo (.js) y luego enlazarlo desde un archivo (.html)

Ejemplo 3: Ejemplo de una función con parámetros (argumentos):

<script type="text/javascript"> function suma(a,b){ return a + b; }; var res; //llamando a la función suma  res=suma(6,25); document.write("La suma es: "+res);
FUNCIONES CON JAVASCRIPT 2013 Ejemplo 4: Ahora el ejemplo anterior; pero ingresando los valores por teclado y escribiendo la función en un archivo (.js) y enlazarlo desde un archivo (.html) Escribir y guardar como: suma.js

function suma(a,b) { return a+b; } Escribir y guardar como: llamarsuma.html

<script type="text/javascript" src="suma.js"> <script type="text/javascript"> var n1,n2; n1=parseFloat(prompt("Ingresar primer número: "));

Ing. Ricardo More Reaño

Tecnología de Programac ión

V Ciclo

n2=parseFloat(prompt("Ingresar segundo número: ")); var res; res=suma(n1,n2); alert("La suma es: "+res);
La función está en el archivo --------> suma.js

EVENTOS EN JAVASCRIPT Los eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la página cuando se produzcan. Cuando un usuario visita una página web e interactúa con ella se producen los eventos y con Javascript se puede definir qué puede ocurrir cuando se produzcan. El manejo de eventos permite tener páginas interactivas, con ellos podemos responder a las acciones de los usuarios. En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Los eventos se capturan mediante los manejadores de eventos. En este tipo de programación, los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador), a continuación, el script responde a la acción del usuario normalmente procesando esa información y generando un resultado. JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos" como se menciona en el párrafo anterior.

Los eventos más utilizados en las aplicaciones web tradicionales son onload para esperar a que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios. Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva. La siguiente tabla resume los eventos más importantes definidos por JavaScript:

Ing. Ricardo More Reaño

Tecnología de Programac ión

V Ciclo

Manejadores de eventos Las funciones o código JavaScript que se definen para cada evento se denominan "manejador de eventos" o “event handlers” y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores: a) Manejadores como atributos de los elementos HTML. b) Manejadores como funciones JavaScript externas. c) Manejadores "semánticos ".

a) Manejadores de eventos como atributos HTML Se trata del método más sencillo que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento HTML. Se quiere mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón

Ing. Ricardo More Reaño

Tecnología de Programac ión

V Ciclo

Ahora si hacemos doble clic(Estamos utilizando ondblclick en lugar de onclic)

b) Manejadores de eventos y variable this JavaScript define una variable especial llamada this que se crea automáticamente y que se emplea en algunas técnicas avanzadas de programación. En los eventos, se puede utilizar la variable this para referirse al elemento HTML que ha provocado el evento. Esta variable es muy útil para ejemplos como el siguiente: cuando el usuario pasa el ratón por encima del