Repetir código en html/javascript

Dudas y comentarios sobre otros lenguajes de programación. Si algún lenguaje recibe suficientes preguntas le añadimos nueva categoría.
Responder
Mensaje
Autor
Avatar de Usuario
Requiem
Mensajes: 706
Registrado: 11/04/2006 11:00 pm
Contactar:

Repetir código en html/javascript

#1 Mensaje por Requiem » 22/09/2013 8:36 am

Hola a todos,
Estoy reformando mi blog: http://lordpakus.blogspot.com.es/ pero ahora me encuentro con un problema... Cada vez que escribo un nuevo artículo tengo que linkarlo manualmente en otros 10 o 15 artículos del mismo tipo. alguien sabe de alguna manera en que ponga el código html en algún sitio y que se replique para al resto de artículos.??

Lo he estado mirando con javascript de hacer algo del estilo:
<script type='text/javascript'>
var menuEjemplos="<li><a href='http://lordpakus.blogspot.com.es/p/ejem ... illos.html'> Ejemplos sencillos en C/C++ </a>";
menu+="<ul>";
menu+="<li><a href='http://lordpakus.blogspot.com.es/2013/0 ... cular.html'> Perímetro y área de un circulo </a></li> ";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... ma-de.html'> Histograma de un arreglo de carácteres sin if ni case </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... on-de.html'> Resolución de ecuaciones de segundo grado </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... iones.html'> Operaciones matemáticas básicas </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... ctura.html'> Facturación sencilla </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... ccion.html'> Intersección recta- circunferencia </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... ribir.html'> Transcribir números a letras </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... lo-de.html'> Cálculo de interés bancario </a></li>";
menu+="<li><a href='http://lordpakus.blogspot.com/2013/09/e ... i-art.html'> ASCII Art </a></li>";
menu+="</ul>";
menu+="</li>";
</script>

Y entonces donde yo quiero repetir el código le pongo lo siguiente:
<script>
document.write(menuEjemplos);
</script>

Pero no hay manera que me funciona correctamente.

Alguien que sepa de html que me quiera echar una mano??

Gracias a todos
Imagen

polly
Mensajes: 619
Registrado: 19/07/2007 3:42 pm
Ubicación: Valladolid (Spain)
Contactar:

#2 Mensaje por polly » 26/10/2013 3:52 am

Una mejor alternativa sería:

Código: Seleccionar todo

<html>
   <head>
      <script type='text/javascript'>
        var links = [
          { link : "http://milink.com",
            descripcion: "Mi descripcion"
          },  
          { link: "http://milink2.com",
            descripcion: "Mi descripcion 2"
          }
        ];

        function plantilla(link, descripcion) {
           return "<li><a href='" + link + "'>" + descripcion + "</a></li>";
        }

        var html = "<ul>";
        for (var i = 0; i < links.length; i += 1) {
            html += plantilla(links[i].link, links[0].descripcion);
        }
        html += "</ul>";

        document.write(html);
      </script>
   </head>
   <body>
   </body>
</html>

Guardas los enlaces y sus descripciones en el objeto "links". La función "plantilla" genera en enlace y luego iteras el objecto "links" para imprimirlo.
Aunque el uso de "document.write" está desaconsejado (creo que borra todo el contenido de la página y escribe lo que pases como parámetro). De manera que te recomiendo que uses la API DOM o si quieres algo más fácil usa jQuery.

Y ya que has mencionado que estás renovando tu blog, te recomiendo que eches un vistazo a http://pages.github.com/. Puedes crearte una cuenta en GitHub y tendrás gratis un dominio "nombredeusuario.github.io". La única pega es que solo puedes subir contenido estático (html+css+javascript) y nada de php por ejemplo.
enrmarc

Responder

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado