JS FUNDAMENTOS 4

CODIGO BASE PARA PRUEBAS

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">      
    </head>
      <body style="color:white;background-color:black">
      <h2>Pagina para realizar pruebas con JavaScript</h2>
      <hr>
      <span id="Dato_001">Datos en etiqueta SPAN</span>
      <br>
      <p id="Dato_002">Datos en la etiqueta P </p>
      <script>
        // En esta sección se copia/escribe el codigo JavaScript

      </script>
      </body>
    </html>

Funciones

Muy a menudo necesitamos realizar acciones similares en muchos lugares del script.

Por ejemplo, debemos mostrar un mensaje atractivo cuando un visitante inicia sesión, cierra sesión y tal vez en otros momentos.

Las funciones son los principales “bloques de construcción” del programa. Permiten que el código se llame muchas veces sin repetición.

Ya hemos visto ejemplos de funciones integradas, como alert(message), prompt(message, default) y confirm(question). Pero también podemos crear funciones propias.

Declaración de funciones

Para crear una función podemos usar una declaración de función.

Se ve como aquí:

Codigo

<script>
function showMessage() 
{
  alert( '¡Hola a todos!' );
}
</script>

La palabra clave function va primero, luego va el nombre de función, luego una lista de parámetros entre paréntesis (separados por comas, vacía en el ejemplo anterior) y finalmente el código de la función entre llaves, también llamado “el cuerpo de la función”.

<script>
function name(parameter1, parameter2, ... parameterN) 
{
  // cuerpo de la funcion
 }
</script>

Nuestra nueva función puede ser llamada por su nombre: showMessage().

<script>
function showMessage() 
{
  alert( '¡Hola a todos!' );
}
showMessage();
showMessage();
</script>

La llamada showMessage() ejecuta el código de la función. Aquí veremos el mensaje dos veces.

Este ejemplo demuestra claramente uno de los propósitos principales de las funciones: evitar la duplicación de código…

Si alguna vez necesitamos cambiar el mensaje o la forma en que se muestra, es suficiente modificar el código en un lugar: la función que lo genera.

Variables Locales/Externas para funciones

Una variable declarada dentro de una función solo es visible dentro de esa función.

Codigo

<script>
function showMessage() 
{
  let message = "Hola, ¡Soy JavaScript!"; // variable local
  alert( message );
}

showMessage(); // Hola, ¡Soy JavaScript!

alert( message ); // <-- ¡Error! La variable es local para esta función
</script>

Una función también puede acceder a una variable externa o global, por ejemplo:

Codigo

<script>
let userName = 'Juan'; // variable externa  o global

function showMessage() 
{
  let message = 'Hola, ' + userName;
  alert(message);
}
showMessage(); // Hola, Juan
</script>

La función tiene acceso completo a la variable externa. Puede modificarlo también.

Codigo

<script>
let userName = 'Juan';

function showMessage() 
{
  userName = "Bob"; // (1) Cambió la variable externa

  let message = 'Hola, ' + userName;
  alert(message);
}

alert( userName ); // Juan antes de llamar la función

showMessage();

alert( userName ); // Bob, el valor fué modificado por la función
</script>

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior, modificalo

Para que en ciclo for (que se ejecute 8 veces) llame una funcion llamda IntroduzcaNumero.

la funcion IntroduzcaNumero debera solicitar un numero mediante PROMPT

Investiga como utilizar parseFloat

El numero debera convertirse en un numero flotante.

Debera acumular la sumatoria de los numeros en una variable externa

Al finalizar debera mostrar la sumatoria final en el HTML

Procura no copiar directamente la respuesta desde una IA

Parámetros

Podemos pasar datos arbitrarios a funciones usando parámetros.

En el siguiente ejemplo, la función tiene dos parámetros: parametro_from y parametro_text.

Codigo

<script>
function showMessage(parametro_from, parametro_text) { // parámetros: parametro_from, parametro_text
  alert(parametro_from + ': ' + parametro_text);
}

showMessage('Ann', '¡Hola!'); // Ann: ¡Hola! (*)
showMessage('Ann', "¿Cómo estás?"); // Ann: ¿Cómo estás? (**)
</script>

Cuando un valor es pasado como un parámetro de función, también se denomina argumento.

Para poner los términos claros:

Un parámetro es una variable listada dentro de los paréntesis en la declaración de función (es un término para el momento de la declaración)
Un argumento es el valor que es pasado a la función cuando esta es llamada (es el término para el momento en que se llama).

Declaramos funciones listando sus parámetros, luego las llamamos pasándoles argumentos.

En el ejemplo de arriba, se puede decir: "la función showMessage es declarada con dos parámetros, y luego llamada con dos argumentos: from y "Hola"".

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior, pruebalo

Procura no copiar directamente la respuesta desde una IA

Devolviendo un valor

Una función puede devolver un valor al código de llamada como resultado.

El ejemplo más simple sería una función que suma dos valores:

Codigo

<script>
function sum(a, b) 
{
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3
</script>

La directiva return puede estar en cualquier lugar de la función. Cuando la ejecución lo alcanza, la función se detiene y el valor se devuelve al código de llamada (asignado al result anterior).

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior, modificalo

para que solicite mediante PROMPT dos valores numericos

los envie a una funcion llamada suma

dentro de la funcion deberan sumarse

debera devolverse el valor mediante la directiva result

El resultado de respuesta debe presentarse dentro del HTML.

Procura no copiar directamente la respuesta desde una IA

Nomenclatura de funciones

Las funciones son acciones. Entonces su nombre suele ser un verbo. Debe ser breve, lo más preciso posible y describir lo que hace la función, para que alguien que lea el código obtenga una indicación de lo que hace la función.

Es una práctica generalizada (en inglés) se debe comenzar una función con un prefijo verbal que describe vagamente la acción. Debe haber un acuerdo dentro del equipo sobre el significado de los prefijos.

Por ejemplo, funciones que comienzan con "show" usualmente muestran algo.

Funciones con nomenclatura inglesa :

"get…" – devuelven un valor,
"calc…" – calculan algo,
"create…" – crean algo,
"check…" – revisan algo y devuelven un boolean, etc.

<script>
  showMessage();     // muestra un mensaje
  getAge();          // devuelve la edad (la obtiene de alguna manera)
  calcSum();         // calcula una suma y devuelve el resultado
  createForm();      // crea un formulario (y usualmente lo devuelve)
  checkPermission(); // revisa permisos, y devuelve true/false
</script>

Una función – una acción

Una función debe hacer exactamente lo que sugiere su nombre, no más.

Dos acciones independientes por lo general merecen dos funciones, incluso si generalmente se convocan juntas (en ese caso, podemos hacer una tercera función que llame a esas dos).

Algunos ejemplos de cómo se rompen estas reglas:

getAge – está mal que muestre una alert con la edad (solo debe obtenerla).
createForm – está mal que modifique el documento agregándole el form (solo debe crearlo y devolverlo).
checkPermission – está mal que muestre el mensaje acceso otorgado/denegado(solo debe realizar la verificación y devolver el resultado).

En estos ejemplos asumimos los significados comunes de los prefijos.

Resumen

Una declaración de función se ve así:

Codigo

<script>
function name(parámetros_delimitados, por_coma) 
{
  /* codigo */
}
</script>

Los valores pasados a una función como parámetros se copian a sus variables locales.
Una función puede acceder a variables externas. Pero funciona solo de adentro hacia afuera. El código fuera de la función no ve sus variables locales.
Una función puede devolver un valor. Si no lo hace, entonces su resultado es undefined.

Para que el código sea limpio y fácil de entender, se recomienda utilizar principalmente variables y parámetros locales en la función, no variables externas.

Siempre es más fácil entender una función que obtiene parámetros, trabaja con ellos y devuelve un resultado que una función que no obtiene parámetros, pero modifica las variables externas como un efecto secundario.

Nomenclatura de funciones:

Un nombre debe describir claramente lo que hace la función. Cuando vemos una llamada a la función en el código, un buen nombre nos da al instante una comprensión de lo que hace y devuelve.
Una función es una acción, por lo que los nombres de las funciones suelen ser verbales.
Existen muchos prefijos de funciones bien conocidos como create…, show…, get…, check… y así. Úsalos para insinuar lo que hace una función.

Las funciones son los principales bloques de construcción de los scripts. Ahora hemos cubierto los conceptos básicos, por lo que en realidad podemos comenzar a crearlos y usarlos. Pero ese es solo el comienzo del camino. Volveremos a ellos muchas veces, profundizando en sus funciones avanzadas.