Tutorial de JavaScript : Conceptos

Cuando definimos una función podemos emplear letras minúsculas, mayúsculas, números siempre y cuando no ocupe la primer posición en el nombre, el caracter '_' y el caracer '$'

Una convención muy extendida cuando se define una función es comenzar la primera palabra en minúscula y a partir de la segunda palabra disponer el primer caracter en mayúsculas:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        function calcularPerimetro(lado) {
            let per = lado * 4;
            return per;
        }

        let l = parseInt(prompt('Ingrese valor del lado:'));
        document.write(calcularPerimetro(l));
    </script>

</body>

</html>

El nombre de la función en este ejemplo es: calcularPerimetro
Como vemos la primer palabra "calcular" hemos utilizado todo minúsculas y en la segunda palabra disponemos en mayúsculas el primer caracter "Perimetro".

Las funciones estándares de JavaScript tienen esta convención:

parseInt
parseFloat
prompt

Los métodos de distintas clases (Date, String) también cumplen esta convención:

 getFullYear()

 toUpperCase()
 toLowerCase()
 indexOf()

 etc.

Siempre es conveniente utilizar nombres de funciones que sean significativas con el algoritmo que implementan: calcularPerimetro, sumar, calcularRaizCuadrada etc.

La regla de definir un nombre de función lo más claro posible puede saltearse con funciones que se utilizan constantemente (por ejemplo la librería JQuery de JavaScript define una función que tiene como nombre solo el caracter $)
Emplear un solo caracter para definir un nombre de función solo se aconseja para funciones de uso masivo.

Problema

Definir una función llamada $ que reciba como parámetro el id de un elemento HTML y retorne la referencia del mismo.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body id="cuerpo">
    <h1 id="titulo"></h1>
    <p id="parrafo"></p>
    <script>
        function $(ele) {
            return document.getElementById(ele);
        }

        function inicio() {
            $('cuerpo').style.backgroundColor = '#ffff00';
            $('titulo').innerHTML = 'Prueba';
            $('parrafo').innerHTML = 'Contenido del párrafo';
        }

        inicio();
    </script>

</body>

</html>

La función $ recibe como parámetro el id de un elemento HTML y mediante el método getElementById extrae la referencia y lo retorna:

        function inicio() {
            $('cuerpo').style.backgroundColor = '#ffff00';
            $('titulo').innerHTML = 'Prueba';
            $('parrafo').innerHTML = 'Contenido del párrafo';
        }

La función inicio se ejecuta luego que la página está completamente cargada. Llama a la función $ pasando el id del body de la página y con el valor devuelto accedemos a la propiedad style del objeto:

            $('cuerpo').style.backgroundColor = '#ffff00';

De forma similar accedemos a al título y el párrafo:

            $('titulo').innerHTML = 'Prueba';
            $('parrafo').innerHTML = 'Contenido del párrafo';

Funciones: caracteres válidos para su nombre

Retornar