Hola a todos,
Si habeís seguido el curso de html habreís visto que hay cosas que este lenguaje no permite hacer. Una de ellas es poder repetir código en distintos sitios. Si os preguntais que necesidad hay en ello os pondré un ejemplo muy sencillo: MENÚS.
Debido al cambio de estilo que le estoy haciendo al blog me he encontrado que tengo diversos menús que se repiten en diferentes páginas. Cualquier cambio que haga tengo que copypastearlo en todas las páginas. Si son 3 páginas, ok, si son 20 o 30 ya empezamos a tener un problema (ni os cuento si son 200 o 300).
La forma más fácil que he encontrado es mediante javascript. JavaScript es un lenguaje de programación web que no tiene nada que ver con el lenguaje Java y que sirve para complementar HTML en aquellos puntos en que este flaquea.
Ya os iré explicando mejor como funciona.. por ahora os pongo un ejemplo de como repetir un menu en html para que veais como va... espero que os guste:
En el head hemos de poner el código javascript:
<script type='text/javascript'>
var menuEjemplos="<li><a href='http://lordpakus.blogspot.com.es/p/ejemplos-de-cc-sencillos.html'> Ejemplos sencillos en C/C++ </a>";
menuEjemplos+="<ul>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com.es/2013/09/ejemplos-de-cc-sencillos-calcular.html'> Perímetro y área de un circulo </a></li> ";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-histograma-de.html'> Histograma de un arreglo de carácteres sin if ni case </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-resolucion-de.html'> Resolución de ecuaciones de segundo grado </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-operaciones.html'> Operaciones matemáticas básicas </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-factura.html'> Facturación sencilla </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-interseccion.html'> Intersección recta- circunferencia </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-transcribir.html'> Transcribir números a letras </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-calculo-de.html'> Cálculo de interés bancario </a></li>";
menuEjemplos+="<li><a href='http://lordpakus.blogspot.com/2013/09/ejemplos-de-cc-sencillos-ascii-art.html'> ASCII Art </a></li>";
menuEjemplos+="</ul>";
menuEjemplos+="</li>";
function ExpandEjemplos(n)
{
if(n) {n.innerHTML=menuEjemplos;}
else {document.write(menuEjemplos);document.close();}
}
</script>
En el body hemos de poner la llamada a la función que nos interesa:
<script type='text/javascript'>
ExpandEjemplos();
</script>
El ejemplo de como funciona lo teneis en el menú de este blog. Todos los menus de la serie de ejemplos C/C++ tienen links a los otros capítulos de la serie y el menú general también, pero código html solo hay uno. Esto hace que si se añade un capítulo nuevo solo tengo que modificar una linea y si quiero cambiar el orden o la estructura solo lo tengo que hacer en un sitio.
Espero que os haya servido para abrir boca de la potencia que tiene javascript... poco a poco os iré explicando mejor como funciona.
Nos vemos
0 comentarios :
Publicar un comentario