Los loops son una de las cosas más útiles y necesarias en cualquier lenguaje de programación. Sirven para repetir una tarea un determinado número de veces. Así, podemos recorrer todos los elementos de una array con un loop for, etc.

Yo me voy a centrar en el loop for porque es el más usado y más útil, pero hay otros muchos: for..in, do..while, while, etc.

El loop for

El loop for tiene la siguiente sintaxis:

for( [variables]; [condiciones]; [variación] ){
	//código
}

En cada iteración, la variable toma un valor determinado por el incremento… Por ejemplo:

for(var i = 0; i <= 10; i++){
	window.console && console.log(i)
}

Si ejecutáis esto en la consola (ver parte 1 de esta serie), os saldrán valores del 1 al 10. Si no se os ha ocurrido, se puede usar para recorrer una array:

var miArray = ["valor1", "valor2", "valor3", "valor4", "valor5"];
//Recordad que array.length devuelve el número de ítems de la array
// i++ se usa para aumentar el valor de la variable
for( var i = 0; i < miArray.length; i++ ){
	console.log(miArray[i])
}

Así, os saldrían los valores de cada elemento de la array.

Consideraciones

En loops cortos, no importa demasiado en cuanto al rendimiento acceder a la longitud de la array una vez cada iteración, pero en loops largos en los que la array no cambie deberíamos «cachear» la longitud. En el siguiente ejemplo cachearíamos la longitud en una variable llamada len:

for(var i = 0, len = miArray.length; i < len; i++){
	// Super código con mi array
}

Con lo que sabemos…

Si has leído y entendido las anteriores entradas de esta serie, ahora mismo serías capaz de mostrar las entradas de un feed de blogger, que usa JSON:

function mostrarEntradas(json) {
	// Ésta función será el callback de nuestro script, y nos retornará un objeto Json, con una estructura determinada.
	var divContenedor = document.getElementById('contenedor-entradas'),
		entradas = json.feed.entry, // Aquí obtenemos la array con las entradas
		html = '', // Aquí almacenaremos el HTML
		num = entradas.length, // Cacheamos la longitud
		i = 0, // Creamos la variable (para ahorrar espacio)
		entradaActual; // Aquí almacenaremos la entrada en cada iteración del loop
	// El loop
	// lo mismo que for(var i = 0, num = entradas.length; i++)
	for(; i < num ; i++){
		entradaActual = entradas[i]; // Seleccionamos la entrada actual
		html += '<h5>' + entradaActual.title.$t + '</h5>';
		html += '<p class="fecha">' + entradaActual.published.$t + '</p>';
		html += '<p class="autor">Por ' + entradaActual.author[0].name.$t + '</p>';
		html += '<p>' + (entradaActual.summary || entradaActual.content ).$t + '</p>';
		// Omito el link porque hay que hacer otro loop más
	}
	// mostramos el resultado
	divContenedor.innerHTML = html;
}

Obviamente se puede complicar mucho más la cosa (link, imágenes, etc), pero lo básico estaría hecho. Para ejecutarlo sólo habría que poner algo como:

<div id="contenedor-entradas"></div>
<script src="http://urldetublog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=mostrarEntradas"></script>

He hecho un ejemplo para mostrar el blog que vosotros queráis:

Url del blog (sin acabar en /)
Mostrarlas
Limpiar