Aninhar um loop consiste colocar esse loop dentro de outro. O aninhamento de loops é necessário para fazer determinados processamentos um pouco mais complexos dos que os que vimos nos exemplos anteriores e com certeza que em sua experiência como programador já deve ter utilizado ou senão, utilizará em um futuro.

Um loop aninhado tem a estrutura como a que segue abaixo. Vamos explicá-lo através destas linhas:

for (i=0;i<10;i++){
    for (j=0;j<10;j++) {
    document.write(i + "-" + j)
    }
}

A execução funcionará da seguinte forma. Para começar inicia-se o primeiro loop, com o que a variável i valerá 0 e a seguir inicia-se o segundo loop, com o que a variável j valerá também 0. Em cada repetição imprime-se o valor da variável i, um hífen ("-") e o valor da variável j, como as duas variáveis valem 0, se imprimirá o texto "0-0" na página web.

O loop que está aninhado (mais para dentro) é o que mais se executa, neste exemplo, para cada repetição do loop mais externo, o loop aninhado se executará por completo uma vez, ou seja, fará suas 10 repitições. Na página web se escreveriam estes valores, na primeira repetição do loop externo e desde o princípio:

0-0
0-1
0-2
0-3
0-4
0-5
0-6
0-7
0-8
0-9

Para cada repetição do loop externo se executarão as 10 repetições do loop interno ou aninhado. Vimos a primeira repetição, agora veremos as seguintes repetições do loop externo. Em cada uma acumula uma unidade na variável i, com o que sairiam estes valores.

1-0
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9

E logo estes:

2-0
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9

Assim até que terminem os dois loops, que seria quando se alcançasse o valor 9-9.

Vejamos um exemplo muito parecido ao anterior, embora um pouco mais útil. Trata-se de imprimir na página todas as tabelas multiplicar. Do 1 ao 9, ou seja, a tabela do 1, a do 2, do 3...

for (i=1;i<10;i++){
    document.write("<br><b>La tabla del " + i + ":</b><br>")
    for (j=1;j<10;j++) {
       document.write(i + " x " + j + ": ")
       document.write(i*j)
       document.write("<br>")
    }
}

Com o primeiro loop controlamos a tabela atual e com o segundo loop a desenvolvemos. No primeiro loop escrevemos um título, em negrito, indicando a tabela que estamos escrevendo, primeiro a do 1 e logo as outras em ordem crescente até o 9. Com o segundo loop escrevo cada um dos valores de cada tabela. Pode-se ver o exemplo em funcionamento neste link.