JavaScript

¡Buenas tardes de nuevo diseñoadictos¡

No podía irme sin hablarlos sobre un nuevo tema, el cual le dará el toque final a vuestra página web. Se trata del lenguaje de programación JavaScript, el cual usamos para programar el comportamiento de una página web.

Os preguntareis cuáles son sus usos. Estos son algunos de los miles que puede tener:

• ·        Responder a eventos locales dentro de la página, como pulsar un botón.
• ·        La realización de cálculos en tiempo real.
• ·        La validación de formularios dentro de una página.
• ·        Mostrar mensajes, crear animaciones, etc.

Para que podáis observar con mayor claridad su función, vamos a realizar uno de estos ejemplos para la página web que hemos creado en la entrada anterior. En este caso realizaremos dos botones, de tal manera que si pulsamos uno u otro nuestra página se verá con colores distintos. Para ello seguiremos los siguientes pasos:

1.   Creamos un nuevo archivo en bloc de notas, igual que el archivo “final.css”, creado en la entrada anterior. A este le llamamos “final3.css”, la única diferencia es que debemos cambiarle los colores.

2.   Guardamos el archivo en la carpeta creada en la entrada anterior. Lo guardamos con las mismas características que el archivo “final.css”.

3.   A continuación, abrimos el archivo “index.html”. En él introduciremos la información para crear los botones.

a.   Primero añadiremos un identificador al link del estilo. Irá situado como podéis observar en la imagen.

<link href="final.css" rel="stylesheet" type="text/css" id="estilo">

b.   En segundo lugar, introducimos un script con una función, para realizar el cambio de colores. Copiamos el siguiente texto, al igual que en la imagen.

<script type=”text/javascript” language=”JavaScript”>

function cambio(archivo){

document.getElementById(“estilo”).href= archivo;

}

</script>

c.    Por último, creamos los botones. Podemos crear tantos como deseemos. En este caso, creamos dos, ya que tenemos dos archivos CSS uno para cada estilo de colores. Copiamos y pegamos el siguiente texto como en la imagen.

<button type=”button” oneclick=”cambio(‘final.css’)”>Estilo original!</button>

<button type=”button” oneclick=”cambio(‘final.css’)”>ESTILO NUEVO!</button>

4.   Este es mi resultado:

a.   Estilo original

b.   Estilo nuevo