for

Цикл for чем-то напоминает револьвер. У нас есть определенное количество шагов(выстрелов). На каждом шаге происходит полезное действие(например ищем следующую мишень). После каждого шага(выстрела) счетчик увеличивается(происходит переход к следующему патрону)

Вот наглядный пример из кинофильма Deadpool https://www.youtube.com/watch?v=BYqjrMdkK8k

В случае с циклом while мы и можем и не знать сколько шагов(выстрелов) нам понадобится. Например неясно, сколько раз будет выполняться вот такой цикл

while(people>0) {
    kill();
}

Но в случае с for'ом количество шагов как правило известно. Единственное, что программисты считают выстрелы... шаги с нуля.

for (shots=0;shots<bullets;shots++) {
    kill();
}

Но конечно обычно в качестве счетчика используют переменную i, но если это сделает Ваш код более наглядным Вы можете отойти от этого правила.

Вот более стандартный пример с выводом значения счетчика в консоль.

var n=10;

for (i=0;i<n;i++) {
    console.log(i);
}

document.querySelectorAll

Допустим у нас несколько элементов с классом block и мы хотим всех их пронумеровать

var blocks = document.querySelectorAll('.block');

var n = blocks.length;

for (i=0;i<n;i++) {
    blocks[i].innerHTML = i;
}

Практика:

1. Вывести 10 синих блоков. Седьмой блок сделать зеленым.
2. Поменять цвета всех блок, начиная с заданного.
3. Поменять цвета всех блоков, до заданного.
4. Поменять все блоки, кроме блока с заданным номером.
5. Вывести 10 блоков, так чтобы их цвета чередовались
6. Вывести шахматную доску 7 на 7
7. Возвести 2 в степень n
8. Возвести a в степень b