Tutorial JavaScript para principiantes 1

Este tutorial es de lo más básico y esta orientado a alguien que no sabe mucho de JavaScript, como yo. Hace años que no uso JS y estoy en proceso de reaprender lo olvidado y quiero compartirlo.

Vamos a escribir un script para cambiar el color de una caja, luego lo explico.

<html>
<head>
<title>JavaScript Tutorial #1</title>
</head>

<style type="text/css">
    /* modificamos el estilo de nuestra caja
       para ver mejor el efecto */
    #caja {
        padding: 20px;
    }
</style>

<body>

<div id="caja">Esta es nuestra caja</div>
<a href="#" onclick="cambiarColor('caja')">
Cambia el color!</a>

<script type="text/javascript">

    // crear una función que acepte un
    // parámetro    
    function cambiarColor(e) {
        // asignamos a una variable el
        // objeto que vamos a manipular
        elemento = document.getElementById(e);
        // cambiamos el color de fondo del elemento
        elemento.style.backgroundColor = 'red';
    }

</script>

</body>
</html>

Cargamos la página y hacemos click en “Cambia el color!”, el color debe cambiar.

Es importante que le asignemos un id al elemento que queremos manipular para poder acceder al elemento usando su id. En este caso <div id=”caja”>.

Lo que hace el script es crear una función (function) llamada cambiarColor:

Una función es un grupo de instrucciones que podemos asignarle cualquier nombre, siempre y cuando ese nombre no esté reservado por una función existente.

La (e) es un parámetro que podemos usar dentro de la función. En nuestra función la e es una variable que contiene el id del elemento al cual le queremos cambiar el color, en este caso e es igual a caja.

Si volvemos al HTML podemos ver:

<a href="#" onclick="cambiarColor('caja')">
Cambia el color!</a>

Esto significa que al hacer click (onclick) en el elemento a vamos a llamar la función cambiarColor con el parámetro “caja”.

La función cambiarColor(e) hace lo siguiente:

elemento = document.getElementById(e);

Aquí estamos asignando (=) a la variable elemento el objeto que nos da el método getElementById(e). Con document lo que le estamos diciendo es que el elemento que queremos está en el documento.

elemento.style.backgroundColor = 'red';

Esto es como JavaScript usa CSS. En CSS la propiedad para cambiar el valor del color del fondo es “background-color”. En JS es un poco diferente, todos los guiones (-) desaparecen, y se escribe con mayúscula la primer letra para separar palabras.

En HTML DOM Style object están todas las propiedades del objeto “style”.

Mejorando la función

Hasta el momento nuestra función cambia el color del fondo solo a rojo, vamos a mejorarla para poder especificar cualquier color.

function cambiarColor(e,c) {
    elemento = document.getElementById(e);
    elemento.style.backgroundColor = c;
}

Esta función acepta dos parámetros: e y c: e es el elemento que queremos manipular y el nuevo parámetro c es el color que le queremos asignar.

Para que esto funcione también hay que modificar el HTML agregando el nuevo parámetro:

<a onclick="cambiarColor('caja', 'green')">
Cambiar color!</a>

Con el segundo parámetro (‘green’) es posible especificar cualquier color, y no está limitado a nombres de colores, también acepta hexadecimal ‘#ff0000’ o RGB ‘rgb(255,0,0)’.

Dos colores

Hagamos algo nuevo con lo aprendido, queremos que la función nos permita cambiar el fondo entre uno y otro color específicos. Por ejemplo esto puede servir para ocultar spoilers.

<html>
<head><title>Spoilers</title></head>
<body>
    <h2>Spoiler bajo!</h2>
    <!-- hay que asignar fondo negro y letras
         negras para ocultar el texto -->
    <div id="spoiler"
         style="background-color: black;
                color: black;
                margin: 10px;
                padding: 10px">
        Al final el Titanic se hunde!
    </div>

<span style="border: 1px dashed #aaa;
             padding: 4px;
             cursor: pointer"
      onclick="revelaSpoiler('spoiler',
                             'black',
                             'yellow')">
    Muestra spoiler
</span>

<script type="text/javascript">

    function revelaSpoiler(e, colorOculto, colorPublico) {

        // asignar el objeto a la variable
        // elemento
        elemento = document.getElementById(e);

        // asignar el color actual a la
        // variable colorActual
        colorActual = elemento.style.backgroundColor;

        // es el colorActual igual al
        // colorOculto?
        if ( colorActual == colorOculto ) {
            // si lo es, asignarle el
            // colorPublico
            elemento.style.backgroundColor = colorPublico;
        } else {
            // no es igual, asignarle el
            // colorOculto
            elemento.style.backgroundColor = colorOculto;
        }
    }

</script>

</body>
</html>

No se de que nos pueda servir volver a ocultar un spoiler… pero bueno, la idea es mostrar que se puede hacer:

Al final el Titanic se hunde!

Muestra spoiler

La función revelaSpoiler acepta tres parámetros: e el elemento que deseamos cambiar, colorOculto y colorPublico.

Dentro de la función estamos asignando a la variable colorActual el color que tiene actualmente el elemento.

Luego comparamos (con if) si el colorActual es igual (==) al colorOculto, si sí es igual entonces quiere decir que nuestro elemento “spoiler” está oculto y hay que asignarle el colorPublico para poderlo leer.

De otra forma (else) le asignamos el colorOculto para volverlo a ocultar.

Si ves en la página del DOM verás que hay otras propiedades modificables, como width, height, o display que también serviría para ocultar algo (elemento.style.display = ‘none’ y elemento.style.display = ‘block’).

Y así concluye el primer tutorial JavaScript. Correcciones y sugerencias son bienvenidas.

Leer completa…