InfoTic: Javascript Parte LIX

JavaScript permite definir funciones dentro de otras funciones:

<html>
<head>
<script type="text/javascript">


  function generarListaOrdenada(vec)
  {
    function comienzo()
    {
      s='<ol>';
    }
  
    function fin()
    {
      s=s+'</ol>';
    }
    
    var s='';
    comienzo();
    var f;
    for(f=0;f<vec.length;f++)
    {
      s=s+'<li>'+vec[f]+'</li>';
    }
    fin();
    return s;
  }


  onload=function() {
    var opciones=['Opción a','Opción b','Opción c','Opción d'];
    document.getElementById('div1').innerHTML=generarListaOrdenada(opciones);
  }

</script>

</head>
<body>
<div id="div1"></div>
</body>
</html>

Como vemos en el ejemplo la función generarListaOrdenada contiene el algoritmo propiamente dicho y además declara dos funciones llamadas comienzo y fin.

Las funciones anidadas solo pueden ser llamadas desde el interior de la función que las contiene. En este ejemplo la función generarListaOrdenada tiene por objetivo generar un string con una serie de marcas HTML que genere una lista ordenada.

Lo primero en la función generarListaOrdenada es declarar las dos funciones anidadas:

    function comienzo()
    {
      s='<ol>';
    }
  
    function fin()
    {
      s=s+'</ol>';
    }

Pero lo primero que se ejecuta al llamar a la función generarListaOrdenada es:

    var s='';
    comienzo();
    var f;
    for(f=0;f<vec.length;f++)
    {
      s=s+'<li>'+vec[f]+'</li>';
    }
    fin();
    return s;

Es decir primero se define la variable local s y se inicializa con un string vacío. Seguidamente se llama a la función comienzo que tiene por objetivo cargar en la variable s el valor '<ol>'.

Cuando finaliza de ejecutarse la función interna continua con el for definido en la función generarListaOrdenada:

    for(f=0;f<vec.length;f++)
    {
      s=s+'<li>'+vec[f]+'</li>';
    }

Finalmente cuando sale del for se llama a la segunda función anidada llamada fin:

    fin();

Las funciones anidadas pueden acceder a las variables locales de la función que las contiene (en este caso pueden acceder a la variable s)

Luego la función generarListaOrdenada completa queda con la sintaxis:

  function generarListaOrdenada(vec)
  {
    function comienzo()
    {
      s='<ol>';
    }
  
    function fin()
    {
      s=s+'</ol>';
    }
    
    var s='';
    comienzo();
    var f;
    for(f=0;f<vec.length;f++)
    {
      s=s+'<li>'+vec[f]+'</li>';
    }
    fin();
    return s;
  }

A la función generarListaOrdenada la llamamos desde la función anónima que definimos para el evento onload de la página. Cargamos en el elemento div definido dentro de la página el código HTML que genera una lista ordenada:

  onload=function() {
    var opciones=['Opción a','Opción b','Opción c','Opción d'];
    document.getElementById('div1').innerHTML=generarListaOrdenada(opciones);
  }

Las funciones anidadas no se las puede llamar desde fuera de la función que las contiene, por ejemplo produce un error si intentamos llamar a la función "comienzo" desde fuera de la función generarListaOrdenada:

  onload=function() {
    var opciones=['Opción a','Opción b','Opción c','Opción d'];
    comienzo();
    document.getElementById('div1').innerHTML=generarListaOrdenada(opciones);
  }

InfoTic

lunes, 4 de septiembre de 2017

Javascript Parte LIX

No hay comentarios.:

Publicar un comentario