Курсы по изучению JavaScript

Циклы + canvas фигуры циклами

Прокрутить вниз

Веб-разработка сегодня одно из самых интересных, увлекательных и перспективных направлений, поэтому многие дети и подростки с радостью посещают курсы, где их обучают правильной разработки проектов. Анализируя сегодняшний рынок специалистов, на разработчиков высокий спрос, а это значит, что занятия веб-разработкой не только весьма интересны, но и в будущем прибыльны. Веб-разработка включает в себя обучение верстке сайтов, реализация их с помощью JavaScript и настройка серверной части — все это уже сейчас может освоить Ваш ребенок, посещая курсы по изучению JavaScript.

JavaScript — один из самых интересных динамических языков программирования, который напрямую связан с реализацией работы веб-сайтов, и, как и другие области программирования, он имеет свои особенности и тонкости.

В этой статье мы рассмотрим с Вами работу с циклами в JavaScript, а также как с помощью этого динамического языка программирования и CANVAS Вы можете создавать фигуры.

Курсы по изучению JavaScript: Циклы

Циклы, используемые в языке программировании JavaScript, помогают выполнять повторяющиеся вычисления. Благодаря циклам, могут выполняться одни и те же процессы или даже блоки с заданными инструкциями конкретное количество раз, которое задает программист или до тех пор, пока условие будет истинным.

Рассмотрим подробнее, какие циклы существуют в JavaScript:

  • Цикл for

Данный цикл выполняет итерации, проходясь по элементам массивов или каких-либо объектов, похожих на массивы, например, arguments и HTMLCollection.
Условия проходят проверку перед каждой итерацией цикла, если проверка прошла удачно, код, находящийся в цикле, будет выполняться, если неудачно — код выполняться не будет, и программа продолжит работать начиная с первой строки, которая идет после цикла.
Пример использования цикла for:
for (var i = 0; i < 7; i++) {
console.log(i + «: Hello, World!»);
}

При введении данного кода, на экране вы получите фразу “Hello, World!”, написанную 7 раз.
Рассмотрим, как работает этот цикл.

Цикл for содержит 3 операции:

  • Инициализация, которая записывается как “var i = 0;”. Здесь происходит объявление переменной, которая служит счетчиком, данная переменная будет проходить проверку тогда, когда будет выполняться цикл. Она инициализируется значением 0. Обычно для обозначения счетчиков цикла используют такие переменные как i, j и k.
  • Дальше идет проверка условия, которая записывается как “i < 7;”. Это условное выражение, в случае, когда оно возвращает true, тело цикла выполняет заданную работу. Если Вы посмотрите на наш пример кода, Вы догадаетесь, что в том случае проверка условий будет выполняться до тех пор, пока значение на счетчике будет меньше 7.
  • Последний этап, который выглядит как i++. Этот этап называется приращением счетчика, где происходит увеличение значение используемой переменной var i добавление к ней единицы. Вместо операции инкремента (увеличение значения переменной), может происходить операция декремента (уменьшение значения переменной).

 

  • Цикл for…in

Этот цикл используется для обхода свойств элементов, которые не являются массивами. Подобные обходы называются перечислениями. В таком случае, Вам необходимо использовать метод hasOwnProperty(), который будет фильтровать свойства, унаследованные от прототипа.
Рассмотрим для примера следующий код:
var user = {
name: ‘Alice’,
age: 25,
country: ‘Ukraine’
};

for (var prop in user) {
console.log(prop + «: » + user[prop]);
}

Допустим, что в подобном сценарии до или после создания объекта user, прототип объекта Object был расширен с помощью метода clone().
if (typeof Object.prototype.clone === ‘undefined’) {
Object.prototype.clone = function () {};
}
Из-за того, что наследование прототипа все время проходит проверку интерпретатором, все объекты имеют доступ к новому методу.
Для избежания обнаружения подобного метода при перечислении свойств объекта user, используйте метод hasOwnProperty(), для фильтра свойств прототипа.
var user = {
name: ‘Ann’,
age: 23,
country: ‘USA’
};
if (typeof Object.prototype.clone === ‘undefined’) {
Object.prototype.clone = function () {};
}
for (var prop in user) {
if (user.hasOwnProperty(prop)) {
console.log(prop + «: » + user[prop]);
}
}

Цикл while

Данный цикл предварительно выполняет проверку условий. Если условные выражения вычисляются в true, код внутри цикла будет выполняться, как и было задумано.
После того, как итерация была завершена, условия снова проходят проверку, и процесс будет повторяться пока проверка условий не покажет false.
Рассмотрим следующий пример кода:
var i = 1;
var msg = »;
while (i < 10) {
msg+= i + ‘ x 5 = ‘ + (i * 5) + ‘<br>’;
i++;
}
document.write(msg);

Такой код поможет Вам вывести в консоль таблицу умножения на цифру 5.

Цикл do…while

Такой цикл осуществляет проверку условий продолжения после окончания работы цикла. В отличие от while, в этом цикле действия выполняются минимум один раз, из-за того, что условия проверяются в конце, а не в начале.
do…while применяется не так часто, как цикл while, из-за того, что такие ситуации, когда нужно хотя-бы одноразовое выполнение цикла встречаются редко.
Вы можете ознакомиться с примером кода, который мы для Вас написали, чтобы увидеть случай однократного выполнения цикла, даже тогда, когда условие может не выполняться.
Пример кода:
var result = »;
var i = 0;
do {
i += 1;
result += i + ‘ ‘;
} while (i < 5);
document.write(result);

Бесконечный цикл

При надобности, Вы можете создать бесконечные циклы, чтобы они не завершались. Такой цикл может работать до тех пор, пока работает компьютер. Для того чтобы цикл остановился тогда, когда это будет нужно, Вы можете заранее позаботиться о том, чтобы в какой-то момент во время проверки условий было false.

Рассмотрим пример бесконечного цикла:
for (var i = 25; i > 15; i++) {
document.write(«Hello, World!”<br>»);
}
В таком случае, на экран будет выводиться заданная надпись бесконечно, так как переменная i никогда не будет меньше 15.

Вложенные циклы

Подобные циклы находятся внутри другого цикла. Вложенные циклы можно создавать с помощью циклов for и цикла while.

Пример вложенного цикла:
for (var count = 1; count < 3; count++) {
document.write(count + «. Строка цикла<br>»);
for (var nestcount = 1; nestcount< 3; nestcount++) {
document.write(«Строка вложенного цикла<br>»);
}
}

Создание геометрической фигуры с помощью JavaScript и Canvas

Мы рассмотрели создание циклов на динамическом языке программирования JavaScript, теперь, если параллельно с ним использовать тег canvas, Вы можете поработать над созданием какой-либо геометрической фигуры.
Рассмотрим следующий код:
for (var i = 1; i <= 10; i++) {
ctx.moveTo(50, 15*i);
ctx.lineTo(150, 15*i);
}

ctx.stroke();
Такая конструкция поможет Вам вывести на экран 10 линий. Используя циклы, Вы можете создать любые необходимые Вам геометрические фигуры, которые Вам необходимы.
Таким образом, онлайн курсы кодинга помогут Вашему ребенку освоить самые интересные разделы программирования и приблизиться к мечте стать профессионалом.

Записать ребенка на курсы программирования — лучшее решение, так как большинство детей с удовольствием играют в компьютерные игры, в целом являются активными пользователи интернет-пространства, а некоторые умудряются самостоятельно осваивать программирование.

Курсы по изучению JavaScript

В нашей статье мы подробно разобрали циклы в динамическом языке программирования JavaScript и как их можно применять для рисования геометрических фигур.
Также мы советуем пройти тест по этой теме, который можно найти вверху нашей страницы. Результатом прохождения теста является сертификат, который Вы можете обменять у администратора на коины. А затем обменять сами коины на подарки.