Unidad 10. JavaScript (VI)

10.6. Crear una archivo js

Tenemos ya tres funciones javascript que emplearemos en nuestro sitio. La que nos sirve para mostrar la imagen, tendrá que estar por lo menos en todas las páginas con galerías de imágenes, y las que muestran u ocultan el menú, tendrán que estar en todas las páginas. Por eso, vamos a poner las funciones en un archivo.

En la carpeta sitio_flores, creamos la subcarpeta carpeta js.

Ahora, abrimos por ejemplo el Bloc de notas de Windows (Inicio → Todos los programas → Accesorios → Bloc de notas). Copiamos las funciones de la página y guardamos el archivo en la carpeta js, pero renombrándolo como funciones.js.

Para acabar, quitamos toda la etiqueta <script> y su contenido de la página, y la cambiamos por la llamada a nuestro archivo:

<script type="text/javascript" src="../js/funciones.js"></script>

Observa que ponemos ../js porque estamos en la carpeta sitio_flores/flores. En páginas que estén en la raíz, como index.html o nosotros.html, pondremos js/funciones.js.

Comprueba que funciona.

10.7. El menú en JavaScript

Ya habrás comprobado lo molesto que resulta tener que cambiar todas las páginas cada vez que cambiamos el menú. Y no solo por la molestia, en un sitio con más páginas, es fácil que en alguna página cometamos un error. Por eso es mejor tener el menú en un único sitio. Y aprovechando que tenemos un archivo .js, vamos a meter ahí nuestro menú.

La idea es sencilla, igual que escribíamos el HTML para ver las fotos, vamos a escribir una función que escriba el HTML del menú, utilizando document.write().

Pero nuestra función necesitará parámetros, que serán aquello que hace que el menú de una página no sea exactamente igual que el de otra. Es decir, la pestaña que está activa. Además, debemos de saber si estamos en el raíz o en una subcarpeta.

Vamos a crear la función cargarMenu, con los parámetros pagina, con el nombre de la página, y sub, que será verdadero cuando esté en una subcarpeta.

function cargarMenu(pagina, sub) {
}

Realmente nos da igual el valor del parámetro sub, porque lo que haremos es enviar algo cuando estemos en la subcarpeta flores, y cuando no, ni siquiera lo pondremos al llamar a la función. Si no lo enviamos, su valor será null (nulo). Por lo tanto, para saber si estamos en el raíz, sólo tendremos que preguntar si sub == null.

Primero, copiamos el menú completo, con el submenú, con las rutas como si estuviésemos en el raíz. Por ejemplo href="nosotros.html" o href="flores/silvestres.html".

Para convertirlo a cadena de texto, encerramos cada línea entre comillas simples '  ', añadiendo al final de cada una un salto de línea (\n). Al final de cada una, excepto de la última, concatenamos con la siguiente (+). Todo eso, lo pasamos como parámetro a al método document.write().

document.write('<ul id="menu">\n'+
    '<li>...</li>\n'+
    '<li>...</li>\n'+
    ...
    '<li>...</li>\n'+
    '</ul>');

Todo el menú forma una cadena. Lo que vamos a hacer, es ir concatenando un valor u otro dependiendo de los aprámetros. Para ello, vamos a utilizar la forma reducida de la sentencia If:

variable = (condición) ? valor_si_se_cumple : valor_si_no;

Por una parte la clase. Para cada página, evaluaremos la variable pagina, y si es la página, concatenaremos la clase activa, si no, no. Por ejemplo, para la pestaña nosotros pondremos:

'<li'+((pagina=='nosotros') ? ' class="activa"':'')+'>...\n'+

Esto quiere decir, que entre <li y >, añadiremos  class="activa" (con un espacio delante) si la página es nosotros. Si no, no añadimos nada, lo que expresamos con una cadena vacía (abrir y cerrar comillas).

Esto, lo hacemos para cada pestaña. Pero con dos excepciones. Como tenemos dos páginas index, tenemos que poner algo más para que no se marquen las dos como activa. Podemos comprobar el parámetro sub. Si estamos en la página inicial del sitio, en la pestaña Inicio, no habremos pasado el parámetro, por lo que sub será null. Añadimos esta condición:

'<li'+((pagina=='index'&&sub==null) ? ' class="activa"':'')+'><a href="index.html">Inicio</a></li>\n'+

El otro caso es la pestaña Flores. Será la pestaña activa cuando estemos en cualquiera de las páginas de flores, es decir, siempre que sub no sea null.

'<li'+((sub!=null) ? ' class="activa"':'')+' onmouseover="verSubmenu();" onmouseout="ocultarSubmenu();"><a href="flores/index.html">Flores</a>\n'+

Por otro lado, como los enlaces son relativos a la página, tenemos que cambiarlo dependiendo de si estamos en la subcarpeta o no. Si lo estamos, es decir, si sub tiene algo, o lo que es lo mismo, si sub no es nulo (sub!=null), tenemos que subir todos los enlaces una carpeta, añadiendo a la dirección del enlace (href), al principio, ../. Por ejemplo:

<a href="'+((sub!=null) ? '../':'')+'index.html">Inicio</a>

La función completa, nos ha quedado así:

  function cargarMenu(pagina, sub) {
    document.write('<ul id="menu">\n'+
      '<li'+((pagina=='index'&&sub==null) ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'index.html">Inicio</a></li>\n'+
      '<li'+((sub!=null) ? ' class="activa"':'')+' onmouseover="verSubmenu();" onmouseout="ocultarSubmenu();"><a href="'+((sub==null) ? '../':'')+'flores/index.html">Flores</a>\n'+
      '<ul id="sub_flores">\n'+
      '<li'+((pagina=='exoticas') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/exoticas.html">Ex&oacute;ticas</a></li>\n'+
      '<li'+((pagina=='ornamentales') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/ornamentales.html">Ornamentales</a></li>\n'+
      '<li'+((pagina=='plantas') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/plantas.html">Plantas</a></li>\n'+
      '<li'+((pagina=='silvestres') ? ' class="activa"':'')+'><a href="'+((sub==null) ? '../':'')+'flores/silvestres.html">Silvestres</a></li>\n'+
      '</ul>\n'+
      '</li>\n'+
      '<li'+((pagina=='nosotros') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'nosotros.html">Nosotros</a></li>\n'+
      '<li'+((pagina=='contacto') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'contacto.html">Contacto</a></li>\n'+
      '<li'+((pagina=='noticias') ? ' class="activa"':'')+'><a href="'+((sub!=null) ? '../':'')+'noticias.html">Noticias</a></li>\n'+
      '</ul>\n');    
  }

Ahora, en la página HTML, quitamos el <ul> del menú, y en su lugar, llamamos a nuestra función con el siguiente código:

<script type="text/javascript">cargarMenu('silvestres', 'Sí');</script>

En este caso, estamos en la página silvestres.html, por lo que mandamos silvestres como pagina. Como parámetro sub, hemos enviamos Sí, pero podríamos haber puesto cualquier cosa. Lo importante es que no sea nulo.

Cuando estemos en una página del raíz, sólo enviamos la página, por ejemplo <script type="text/javascript">cargarMenu('nosotros');</script>.

 

Cambia el menú en cada página. Recuerda que también hay que poner la llamada al archivo js/funciones.js.