Miércoles, 16 Noviembre 2016 16:10

JavaScript: Definición y llamado de funciones (i)

Valora este artículo
(0 votos)

Banner Tutoriales en JavaScript: Definiendo y usando variales

Las Funciones en JavaScript

Cuando se prevé que un conjunto de instrucciones será ejecutado repetidas veces dentro del código de cualquier lenguaje de programación, lo correcto es crear una función, en nuestro caso en JavaScript, que pueda ser llamada cada vez que la necesitemos, con lo que no solamente ahorraremos tiempo de desarrollo, sino también con las futuras modificaciones del mismo, la coherencia de las instrucciones escritas, etc.

¿Qué es una función?

Una función consiste en un conjunto de líneas de código que puede ser invocado luego haciendo uso de un nombre que asignaremos a ésta. Cada vez que la función sea invocada JavaScript provocará que el conjunto de código que la conforman sea ejecutado para realizar las tareas para las que fueron creadas.

Ejemplo: Usar dos botones para cambiar contenidos y recargar en una página web

   <!doctype html>
     <html>
          <head>
               <meta charset="utf-8">
               <title>Creando y llamando funciones en JavaScript</title>
               <script>
                    //javascript
                    function funcionCambiar() {
                         document.getElementById("cambioParrafo").innerHTML = "Contenido de párrafo cambiado";
                         document.getElementById("cambioDiv").innerHTML = "Contenido de div cambiado";
                         }
                    function funcionReiniciar() {
                         window.location.reload(true);
                         }
               </script>
          </head>
          <body>
               <h1>Definiendo y llamando funciones</h1>
               <p id="cambioParrafo">Párrafo de ejemplo</p>
               <div id="cambioDiv">Div de ejemplo</div>
               <p><button type="button" onclick="funcionCambiar()">Cambiar contenidos</button></p>
               <p><button type="button" onclick="funcionReiniciar()">Recargar página</button></p>
               <p>Nota: Hacer clic en el botón superior para cambiar contenido del párrafo y el div que se muestran más arriba.</p>
          </body>
     </html>

Sentencias usadas en el script de ejemplo:

  • La palabra reservada function:
         function nombreDeLaFuncion(parametro1, parametro2,... parametroN]) {
              lista de sentencias que ejecutará la función al ser llamada
              }

    • function declara una función;
    • nombreDeLaFunion es el nombre asignado a la función que se está creando;
    • parametro1, parametro2,... parametroN son los parámetros (opcionales) que se le podrán pasar a la función para que los utilice al momento de procesar la "lista de sentencias que ejecutará la función al ser llamada"
  • El evento onclick:
         onclick="funcionCambiar()
    • Los eventos en JavaScript permiten detectar acciones del usuario con elementos específicos de la interfaz de usuario afectados por éstos; en nuestro ejemplo hemos asociado dos eventos de tipo click con dos botones de la interfaz de nuestra página a través de la palabra reservada onclick (anteponiendo el prefijo on a la palabra click), con lo que llamaremos a las dos funciones creadas en la cabecera del head de nuestra página web.
    • Existen eventos de diferentes tipos que pueden ser disparados ant distintas siguaciones. Algunos ejemplos de éstos eventos y disparadores son los siguientes: 
      • Eventos asociados a elementos del DOM y momentos en los que permiten disparar acciones:
        • onload / Al cargar completamente una página (body)
        • onblur / Al momento de deseleccionar un elemento
        • onchange / Al momento en que un elemento pierde el foco, luego de haber sido modificado
        • onfocus / Al momento en que un elemento recibe el foco
        • onreset / Al momento de inicializar (resetear) un formulario
        • onresize / Cuando cambia el tamaño de la ventana del navegador [Ejemplo 1]
        • onselect / Al momento de seleccionar un texto dentro del campo de un formulario (ver enlace)
        • onsubmit / Al momento de enviar los datos de un formulario (submit)
        • onunload / Al abandonar una página web [Enlace 2]
      • Eventos asociados a acciones realizadas con el mouse sobre uno o más elementos del DOM:
        • onclick / Al hacer clic (pulsar y soltar un botón del mouse) con el mouse
        • ondblclick / Al hacer doble clic con el mouse
        • onmousedown / Al pulsar un botón del mouse
        • onmousemove / Al mover el puntero del mouse
        • onmouseup / Al soltar el botón del mouse sobre un elemento del DOM
        • onmouseout / Cuando el puntero del mouse sale fuera del área de un elemento del DOM [Ejemplo 1]
        • onmouseover / Cuando el puntero del mouse pasa por encima de un elemento del DOM [Ejemplo 1]
      • Eventos asociados a acciones realizadas al teclado sobre el body y elementos de un formulario:
        • onkeydown / Al presionar una tecla
        • onkeypress / Al presionar y soltar una tecla
        • onkeyup / Al soltar una tecla previamente presionada
    • Lista y notas ampliada de manejadores de eventos: http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

Nota: Esta entrada se encuentra actualizada y publicada como recurso didáctico dentro del Campus Virtual de Formación Gráfica (CVFG).

Saludos para todos!
Plácido Luna

Visto 265 veces Modificado por última vez en Sábado, 17 Junio 2017 02:02