Los comportamientos que hemos visto ocurren en el punto donde se hace uso del script durante la carga. Lo que nos interesa es, por una parte, controlar que esas acciones ocurran bajo demanda y una vez cargada la página. Por otra parte, poder reutilizar las opciones. Para eso vamos a utilizar funciones.
Una función es un trozo de código reutilizable al que podemos llamar cuando queramos. Por ejemplo
<script>
function saluda()
{
alert("Hola");
}
saluda();
</script>
Con esto hemos definido la función saluda que no recibe ningún parámetro y que cada vez que la llamamos muestra una ventana de dialogo que dice "Hola". La llamada la hacemos con saluda();
Esto es poco útil. Si queremos que se muestre un mensaje concreto cada vez, podemos utilizar un parámetro...
<script>
function di(algo)
{
alert(algo);
}
di('Hola');
</script>
De esta forma , cuando usemos di('Hola') aparecerá una ventana de dialogo en la que pondrá Hola. Si usamos di('En un lugar de la mancha...') aparecerá una ventana de dialogo en la que pondrá En un lugar de la mancha...
También podemos utilizar varios parámetros. De esta forma:
<script>
function di(unaCosa, otraCosa)
{
alert(unaCosa+" "+otraCosa);
}
di('Hola', 'Mundo');
di('Mundo', 'Hola');
</script>
NOTA: Date cuenta de que entre las cadenas he metido otra cadena con un espacio en blanco... si no saldrían las dos cadenas pegadas. Pruébalo.
Tendrá como resultado dos ventanas, la primera dirá "Hola Mundo" y la segunda "Mundo Hola".
Ahora bien. Esto, puede ser útil para muchas cosas, pero parece más interesante si somos capaces de utilizarlo bajo demanda. Es decir, cuando se produzca un evento.
Por ejemplo, podemos utilizar el parámetro onClick en una etiqueta HTML para que se llame a una función cuando se haga click sobre el elemento.
<script>
function di(unaCosa, otraCosa)
{
alert(unaCosa+" "+otraCosa);
}
</script>
<div onClick="di('Hola','Caracola');">Dime cosas...</div>
En este ejemplo tenemos que cuando hacemos click en el DIV que contiene la frase Dime cosas... aparecerá el dialogo con la frase Hola Caracola.
NOTA: Es importante tener en cuenta que cuando llamamos a una función, esta debe estar definida previamente. Eso es de vital importancia cuando tenemos que llamar a una función durante la carga. No podemos llamar a una función que no ha sido generada... PERO lo que estamos haciendo es llamar a la función cuando se hace click, esto es, después de la carga. Por lo que cualquier función del código ya habrá sido definida. En resumen, si utilizamos eventos como onClick, estos se ejecutan cuando el usuario hace click, por lo que la página ya ha sido cargada y la función ha sido definida en el código, tanto si estaba antes como si estaba después que la vinculación de la llamada al evento click.
Combinando esto con lo visto con anterioridad, podemos hacer un ejemplo en el que un bloque cambie su color de fondo cuando hacemos click sobre otros bloques...
<script>
function pintaDe(color)
{
var elemento;
elemento = document.getElementById("pizarra");
elemento.style.backgroundColor=color;
}
{
var elemento;
elemento = document.getElementById("pizarra");
elemento.style.backgroundColor=color;
}
</script>
<div id="pizarra" style="width: 100px; height: 100px; border: 1px solid black"></div>
<div id="pizarra" style="width: 100px; height: 100px; border: 1px solid black"></div>
<span onClick="pintaDe('red')">R</span>
<span onClick="pintaDe('green')">G</span>
<span onClick="pintaDe('blue')">B</span>
Que si funciona aqui... tendremos:
Que vendría a ser lo mismo para el cambio de cualquier otra de las propiedades CSS. Pero que para que funcione tenemos que tener en cuenta de qué forma hay que pasar el parámetro. Es decir...
elemento.style.width espera un valor del tipo 100px
elemento.style.backgroundImage espera un valor del tipo url('imagen.jpg')
...
