Постепенно осваивая азы и переходя к большему набору оперируемых понятий, объектов в JS, я начал понимать, что возможности реализовать одно и то же может быть решена по-разному. Эта статья как раз и явилась итогом такого понимания, когда я ознакомился с оператором switch. По своему принципу его можно ассоциировать с блоком операторов if, разве что при соблюдении какого-то определенного условия он сразу будет улетать в конец блока. Это и плюс и минус, все зависит от того, какие задачи перед вами стоят.
Не буду подробно рассказывать о этих плюсах и минусах, а лучше расскажу еще раз о функционале оператора и приведу пример его работы. А уж выводы вы сможете сделать и без меня.
Оператор switch синтаксис
Сразу же расскажу о построении кода с этим оператором и об алгоритме работы. Вот так можно его использовать.
switch(i) {
case i=0:
document.getElementById('id1').style.color = 'red'; i++;
break;
case i=1:
document.getElementById('id1').style.color = 'green'; i++;
break;
case i=2:
document.getElementById('id1').style.color = 'pink';
default:
i=0;
}
При этом i - описывает то условие, которое будем контролировать. Каждый case подразумевает случай к сравнению, ну и под ним будет написано то, что выполнять. В конце, если не одно из условий не работает, то можно добавить default, со своим правилом, но default не обязательно писать в конце блока!
Что же, в качестве примера я выполнил изменение стиля, кусок кода как раз и выдран из рабочего скетча.
Пример работы оператора switch для JS
Пример работы, который связан с изменением условий будет отражен в этом абзаце. По замыслу код JS меняет стиль, и это отражается в смене цвета. Надеюсь код еще работает и вы сами можете воочию наблюдать за этим. Осталось напомнить, что в коде есть переменные, которые могут влиять на визуализацию. Во-первых, это цвета, во-вторых, их количество, которое будет зависеть от количества условий case и значения i. В-третьих, это время обновления, то есть переход от одного условия ко второму. Может быть есть что-то еще из особенностей, но пока более ничего в голову не приходит...
Код для изменения условий JS
Что же, теперь непосредственно к коду. В нем я считаю все понятно, по крайней мере нет откровенно "темных" пятен. Кнопка в принципе там не нужна, так как функция начинает работать от setInterval, но пусть будет, на тот случай, если функцию надо будет запустить один раз, без условия setInterval.
Осталось провести кое какие аналогии, про которые уже упоминал, но было это сделано беспредметно. Этот код вполне может заменить код из этой вот статьи "Cмена картинки, ссылки при обновлении страницы на JS". Разве что картинки или цифры будут выводиться не беспорядочно, а по порядку, в соответствии с изменениями i.