Результати пошуку за запитом: начальный курс c
Підсумки акції "HTML марафон"
Автор: Редакція ITVDN
Дорогие друзья!
С 8 по 13 ноября на ITVDN проходил HTML5 & CSS3 марафон. Необходимым условием для получения награды было выполнение всех практических заданий на интерактивном тренажере ITVDN по курсу “HTML5, CSS3 Starter” (с максимальными баллами при наименьшем количестве попыток).
Для участия в соревновании зарегистрировались 433 человека, а к финишу пришли только 26 из них (завершили задания на 100%). Вместо 5 победителей мы решили наградить всех, кто попал в первую 10-ку!
Имена победителей:
Нилов Кирилл
Давыдов Максим
Евтеев Иван
Агафонов Иван
Макеев Олег
Высоцкий Евгений
Гнатченко Дмитрий
Vasilenko Vladimir
Родин Андрей
Варов Алексей
Также хочется отметить тех, кто дошел до финиша, хотя и не с максимальными баллами:
Кулинич Юлия
Хисамова Лариса
Pasichnyk Oleksandr
Климчук Сергій
Азоркин Дмитрий
Kabakov Evgeniy
Николай
Миронович Валерий
Нигматулин Руслан
Yudina Lara
Хондока Юрий
Суворова Анастасия
Хомченко Рома
Ртищев Иван
Скориков Владислав
Мулявин Иван
В рейтинге представлены только те участники, которые начали и закончили прохождение всех заданий тренажера “HTML5, CSS3 Starter” в период с 8 по 13 ноября.
Победителей мы награждаем подарочными сертификатами - это бесплатная подписка ITVDN на пакет “Стартовый”, благодаря которой открывается доступ ко всем видео курсам на 3 месяца.
Мы благодарим всех, кто принял участие в нашем марафоне и поздравляем победителей! Желаем вам успехов в изучении веб-технологий!
15 ноября сертификаты будут отправлены победителям на емейл, указанный при регистрации.
Результати акції «70 відеокурсів у подарунок»
Автор: Редакція ITVDN
В период с 5 по 15 января 2017 года на ITVDN проходила акция «70 видеокурсов в подарок». В акции приняли участие 481 человек, из которых с помощью сервиса random.org было выбрано 70 победителей. Все победители получат в подарок те видеокурсы, которые они указали в анкете. Курсы будут открыты с 17 января 2017 года на 30 дней.
Имена победителей акции:
Колісник Ігор
Елена Осмоловская
Боровенский Александр
Алькен Абиев
Василий Дякив
Михаил Лютов
Яўгенi Новiк
Alexandr Zakharyk
Дмитрий Цыбенко
Никита Ермаков
Руслан, Вишневский
Станислав Волков
Ян Кучинский
Сулейманов Расим
Гамзат Расулов
Oleh Petraniuk
Богдан Жилко
Андрей, Фатеев
Сергей Костенко
Георгій,Фретеучан
Василик Виталий
Кирилл Кузьменко
Маританна Вазанова
Артем Зинченко
Абылай Куракбаев
Владимир Ганич
Никита Могильников
Alexandr Babintsev
Дмитрий Мендельсон
Владислав Москаленко
Богдан Турко
Владислав Яськов
Вячеслав Одиноков
Илья, Глаговский
Кудайбергенов Бибарс
Георгий Шемякин
Игорь Ольхов
Игорь Реутов
Денис Прилипко
Sergey Zarva
Kuziv Marian
Артём Курилов
Олександр Шевчук
Виктория Задорожняя
Иван Огуречников
Лавречко Олександр
Мария Лазарева
Цибульский Сергій
Максим Мурзак
Валерий Волков
Александр Хурса
Арман,Элоян
elina rozhkova
Artsiom Yurkevich
Артур, Шайдуллин
Viacheslav Dosuzhiy
Андрей Ткаченко
Михаил Шумский
Мороз Виктор
Олег Васильевич
Иван Кот
Анатолий Парубец
Руслан Добров
Вадим Рыбалко
Дергачёв Павел
Алексей Мачехин
Vova Popov
Денис Коротин
Спивак Валентин
Глущенко Віталій
Видео запись розыгрыша смотрите здесь.
Оксана Третьяк и Aibek Nurbaev были дисквалифицированы из-за невыполнения условий акции.
Для 5 человек, которые попали в список победителей – это Станислав Волков, Виктория Задорожняя, Artsiom Yurkevich, Андрей Ткаченко, Глущенко Віталій - курсы будут открыты, после предоставления доступа к страницам в соц. сетях для того, чтобы мы убедились в выполнении условий акции.
Благодарим всех за участие в акции!
Оставайтесь на ITVDN!
Результати акції «50 тисяч передплатників ITVDN на YouTube»
Автор: Редакція ITVDN
С 26 июля по 29 июля 2016 года мы проводили акцию, заданием которой было указать дату, когда количество подписчиков канала ITVDN на YouTube достигнет знаменательной отметки 50 тысяч.
Максимальное количество 50 тысяч было достигнуто утром 30 июля 2016 года.
В акции приняли участие 336 человек из которых 52 человека ответили верно.
Денис Хайруллин
Павел Шакотько
Даниэль Вольницкий
Valerii Savchenko
Александр Домась
Борисенко Андрей
Sergey Zaporozhets
Алексей Исак
Кривенко Сергей
Владимир Безбожный
Виталий Чепель
Сергей Вильгодский
Мария Гнитецкая
Bogdan Zubar
Олег Сирота
Евгений Лысяный
Дмитрий Григоренко
Алексей Лепишин
Vasiliy Kozmin
Андрей Громов
Валерий Стефаник
Sasha Hovrin
Иван Кривошея
Андрей Гергец
Дияс Нурдыканов
Anna Popovska
Юра Манин
Кирилл Котляров
Алексей Лапенок
Миша Харченко
Игорь Михайлов
Андрей Стрельник
Ганна Стискун
Дмитрий Шемендюк
Алексей Ягур
Екатерина Семенко
Евгений Куриленко
Molodiy Volodymyr
Богдан Скочко
Андрей Куликовский
Юрий Невмержицкий
Андрей Гришин
Denis Shestopalov
Антон Щелоков
Олег Костенецкий
Александр Ревазов
Иван Голоднюк
Anna Kaleniuk
Akim Zaytsev
Мирослава Марчук
Виталий Новый
Александр
Каждый, кто правильно назвал дату, получает в подарок курс, который он указал в анкете. Доступ к курсам будет открыт 2 августа 2016 года.
Спасибо, что остаетесь с нами.
14 квітня запрошуємо до Дніпропетровська (КДЦ "Менора") для обговорення розвитку та перспектив ІТ-індустрії України та регіону разом зі спікерами-експертами галузі, а саме:
Автор: Редакція ITVDN
Стоян Боев (Инновационные методики ИТ продаж: техники привлечения новых клиентов, CEO, ICB-Interconsult Bulgaria, Болгария)
Ларс Нильсен (Глобальные тренды ИТ индустрии, Co-Founder and CDO, Sitecore Corporation, Дания)
Ганс Корт (Искусство продаж ИТ-услуг крупным международным клиентам, International Sales Director at TotalSoft, Румыния)
Александр Шарко (Операционный директор Archer Software)
Александр Вытищенко (старший менеджер по программной инженерии, EPAM Systems)
Александр Рыженко (глава Агентства по вопросам электронного правительства, Украина)
Елена Минич (директор Департамента инноваций и интеллектуальной собственности Министерства экономического развития и торговли Украины)
Тарас Вервега (член правления, SoftSеrve, Украина)
Александра Альхимович (заместитель директора компании Luxoft Украина)
Валерий Шаров (директор компании ISD)
Андрей Колодюк (основатель инвестиционной компании AVentures Capital)
Виктор Валеев (директор, Ассоциация «ИТ Украины»)
Дмитрий Овчаренко (управляющий партнер SBT Systems Ukraine, вице-президент Ассоциации по правовым вопросам)
Виктор Левандовский (генеральный директор InternetDevels)
Константин Лежнин (заместитель главы правления по вопросам розничного бизнеса УкрСиббанк BNP Paribas Group)
Олег Кужман (первый заместитель председателя Днепропетровской областной государственной администрации)
Вся информация: IT SPRING FORUM
Организатор - Ассоциация "IT Украины" - крупнейшее объединение IT компаний Украины
Ключевые темы для обсуждения:
- Какие прогнозы развития и ключевые международные тренды Software Development области в 2016 году;
- Как увеличить объем продаж, выход на новые рынки (международный опыт и подходы);
- Как повысить эффективность управления компанией;
- Как развить ИТ отрасль в Днепропетровске в контексте государственной политики.
Мы хотим объединить глобальность рассматриваемых проблем отрасли с практическим видением путей их решения, помочь сформировать предложения по развитию бизнеса и реакции на глобальные тренды в мире и Украине. ТОП спикеры, эксклюзивные эксперты, мастер-классы и живое общение с коллегами - все это для участников мероприятия.
Стоимость участия в конференции для ИТ-компаний до 3.04 - 90 у. о. по курсу НБУ. Для участников Ассоциации скидка в размере 40%. На второго участника скидка в размере 20%.Стоимость участия для НЕ ИТ-компаний до 3.04 - 110 у. о. по курсу НБУ. Указанные скидки не суммируются.
Изучайте программирование на ITVDN. Новогодняя выгода
Автор: Редакция ITVDN
UPD. Акция продлена до 5 января.
Новый год — это всегда что-то особенное: встречи с друзьями, отдых, прогулки и путешествия. Даже во время войны мы ждем праздников и готовим подарки для наших близких и друзей.
Мы тоже приготовили подарок для вас! Встречайте — новый акционный пакет подписки «Premium Plus 14 мес».
Что вы получите в пакете «Premium Plus 14 мес»:
✅ Доступ к 300+ видеокурсам на 14 месяцев
✅ Загрузка учебных материалов
✅ Доступ ко всем практикумам
✅ Тестирования и сертификаты по 24 курсам
✅ Проверка 20 домашних заданий
✅ Консультация с тренером 120 минут
🔥 Возможность скачивания видеоуроков
🎁 Подарочный сертификат Unlimited Month
Полная стоимость такого набора услуг — 240 USD
Акционная стоимость — 100 USD
Акционные бонусы в пакете «Premium Plus 14 мес»:
🔥 Бонус 1. Вы можете загружать видеоуроки на свои устройства и смотреть их даже при отсутствии электричества. Загруженные уроки остаются у вас навсегда.
🔥 Бонус 2. Срок подписки увеличен! Вы получаете доступ к курсам на 14 месяцев.
🔥 Бонус 3. Подарочный сертификат Unlimited Month — подписка на 1 месяц, которую вы можете использовать для себя или подарить другу.
Рекомендуем использовать «Оплату частями»
Воспользуйтесь удобным вариантом оплаты частями от Монобанка или ПриватБанка. Вы получите полный пакет по акционной цене без комиссий и сможете распределить оплату на несколько месяцев.
Сроки акции: с 24 по 31 декабря 2024 года
Нужна помощь? — Получите бесплатную консультацию!
✅ Telegram: @itvdn_support
✅ Email: support@itvdn.com
✅ Телефон: +38 044 344 16 22 или +44 204 577 32 36
Ко Дню Независимости – 50% скидка на IT-обучение
Автор: Редакция ITVDN
Дорогие украинцы!
24 августа – День Независимости нашего государства. И впервые украинцы встречают этот праздник, будучи в состоянии полномасштабной войны. Мы гордимся нашим народом, гордимся его единством, стойкостью, несокрушимостью и силой духа. Именно эти национальные черты позволяют успешно давать отпор врагу, а в будущем – именно они приведут нас к победе.
IT-специалисты сегодня вносят очень весомый вклад в экономику страны и поддержку армии. Сила всей страны состоит из силы каждого отдельного человека, и мы готовы помочь каждому, кто хочет стать сильным, овладевая программированием и современными технологиями.
Мы делаем обучение удобным и доступным для каждого.
В честь Дня Независимости 24 августа пакет подписки “Премиум” на год можно будет приобрести за половину стоимости.
Что входит в пакет подписки:
Доступ ко всем видео курсам, представленным в Каталоге (более 230)
Возможность обучения по всем специальностям
Доступ к интерактивным практикумам
Исходный код учебных проектов
Презентации, опорный конспект, ДЗ
Проверка выполненных задач
Консультации с тренером
Онлайн тестирование и сертификация
Доступ к новым курсам, которые будут выходить во время действия подписки.
Акционная цена:
Премиум (12 мес.) – 85 USD (вместо 169,99)
Акция действует только один день – 24 августа. Успейте воспользоваться возможностью. Подарочные сертификаты также доступны по акционной цене.
Купить Премиум за 85 USD
Искренне поздравляем всех украинцев с Днем Независимости! Слава Украине!
P.S. Граждане россии и белоруссии не могут участвовать в акции.
Лови великі знижки!
Автор: Редакція ITVDN
Привет, друзья!
Июль в разгаре и мы надеемся, что вы проводите его в большим удовольствием. И, хотя наши возможности путешествовать все еще ограничены условиями карантина, лето есть лето. Пусть оно дарит вам самые приятные впечатления!
И одно из этих впечатлений пусть будет от ITVDN!
Внимание – скидки!
С 16 по 23 июля у нас будет очень интересная акция.
В течение недели на разные пакеты подписок будут появляться большие скидки. Но меняться они будут также внезапно и непредсказуемо, как погода летом.
К примеру, утром может быть суперцена на подписку FrontEnd, а вечером на пакет Базовый. Поэтому чаще заходите на сайт и Ловите большие скидки на те пакеты, которые вам интересны.
Ну а для тех, кто очень любит постоянство, мы гарантируем скидки на пакет Стартовый -самый популярный среди новичков.
Напомним, пакет Стартовый – это доступ ко всем курсам и сервисам ITVDN на 3 месяца.
Скидки на пакет Стартовый:
16, 17 и 18 июля скидка 35% (цена во время акции 32,5 USD )
19, 20 и 21 июля скидка 30% (цена во время акции 35 USD )
22 и 23 июля скидка 25% (цена во время акции 37,5 USD )
Если вы впервые на нашем сайте и вам нужна помощь в выборе пакета подписки или специальности, вы можете получить бесплатную консультацию. Также смотрите все пакеты подписки, все специальности, и все видео курсы в Каталоге.
Надеемся, вам понравится наша акция.
Учитесь на ITVDN – это очень удобно и доступно для каждого!
Купить подписку по акционной цене
Акція «Супер знижки до Дня програміста»
Автор: Редакція ITVDN
13 сентября 2017 года - 256-й день в году и наш любимый праздник - День программиста.
Дорогие друзья! Примите наши теплые поздравления с праздником! Желаем вам интересных задач и гениальных решений. Дружных команд и мудрых руководителей. Пусть жизнь будет полна интересных открытий и сбываются даже самые смелые мечты. Пусть будет мир, взаимопонимание и достаток в ваших домах. Мы любим и ценим вас. Вы меняете нашу жизнь, делая ее более динамичной и красочной, вы создаете для нас новые продукты и сервисы, помогая быстрее решать много повседневных задач. Спасибо вам!
ITVDN отмечает этот праздник большими скидками на подписку для всех, кто хочет изучать программирование.
Условия акции
В течение трех дней - с 13 по 15 сентября 2017 года на ITVDN действуют большие скидки на подписку 6 и 12 месяцев. Вы можете изучать программирование на Javа, С#, JavaScript, Python, PHP, самые современные технологии и фреймворки, тратя на это всего $8.5 в месяц.
- 13 сентября - скидка 40%
- 14 сентября - скидка 35%
- 15 сентября - скидка 30%
В пакете подписки ITVDN на 6 или 12 месяцев вы получите:
- Полный доступ к более 100 видео курсов по программированию
- Практические примеры, конспект и задания к каждому уроку
- Онлайн тестирование с возможностью получения сертификата от Testprovider.com
- Возможность формирования практических навыков с помощью Тренажера ITVDN
- Консультации с тренером
Еще одно важное преимущество подписки на 6 или 12 месяцев – все новые курсы будут доступны для вас сразу после их появления на ITVDN.
Чтобы приобрести подписку на год по специальной цене, воспользуйтесь промо-кодами.
- 13 сентября - подписка на год за $102 (промо-код DEV0001) подписка на 6 мес за $54 (промо-код DEV0002)
- 14 сентября - подписка на год за $110,5 (промо-код DEV0003) подписка на 6 мес за $58,5 (промо-код DEV0004)
- 15 сентября - подписка на год за $119 (промо-код DEV0005) подписка на 6 мес за $63 (промо-код DEV0006)
Асинхронне програмування на JavaScript
Автор: Дмитро Охріменко
План:
1. Різниця між синхронним та асинхронним кодом
2. Багатозадачність процеси й потоки, у чому різниця
3. Особливості багатозадачності в JavaScript
4. Асинхронні операції на практиці HTTP-запит як найпоширеніший кейс
5. Підходи до написання асинхронного коду:
Promise
Async/Await
Observable
6. Практичні поради
Різниця між синхронним та асинхронним кодом
Для початку давайте визначимо ці два терміни:
Синхронний код - це код, який виконується послідовно, функція за функцією.
Асинхронний код - код, який може виконуватися паралельно: наступна функція запускається, не чекаючи завершення попередньої.
Щоб провести аналогію з реального життя, уявімо кухаря. Якщо кухар працює синхронно, то поки він не завершить приготування однієї страви, не переходить до наступної. Але це неефективно й призводить до втрати часу. Якщо ж кухар діє асинхронно, то поки м’ясо запікається в духовці, а на плиті закипає вода, він нарізає овочі. Тобто він один, але не стоїть без діла - виконує інші задачі, поки щось готується саме.
Уявімо, що кухар - це процесор. А запікання м’яса в духовці - це завантаження файлу з мережі. Кухар може просто стояти й дивитись, як м’ясо готується. А може нарізати овочі, перевіряти, чи не з’явились нові замовлення, або скролити стрічку в соцмережі. Так само і з програмами: поки мережева карта завантажує файл, процесор не мусить чекати - він може малювати інтерфейс, оновлювати прогрес-бар чи виконувати обчислення у фоні. Але для цього потрібно правильно написати код - так, щоб він міг працювати асинхронно.
Код який виконується синхронно
```js
console.log("Початок");
console.log("Дія");
сonsole.log("Кінець");
```
Результат:
Початок
Дія
Кінець
Код який виконується асинхронно. і
``js
console.log("Початок");
setTimeout(() => { // за допомогою setTimeout ми відкладаємо запуск коду на певний час
console.log("Дія через 2 секунди");
}, 2000);
сonsole.log("Кінець");
```
Результат:
Початок
Кінець
Дія через 2 секунди
Це не та багатозадачність, як у деяких інших мовах програмування. Тут не використовуються додаткові потоки, а все працює завдяки механізму подій. Але про це детальніше дал
Багатозадачність: процеси й потоки, у чому різниця
Багатозадачність в операційній системі - це можливість запускати та керувати кількома задачами одночасно. Наприклад, працювати в браузері, слухати музику, завантажувати файл і паралельно редагувати код у Visual Studio.
На практиці процесор дуже швидко перемикається між усіма цими задачами, створюючи ілюзію одночасного виконання. Якщо процесор багатоядерний - деякі задачі справді можуть виконуватись паралельно.
Багатозадачність тісно пов'язана з двома важливими поняттями - процесами та потоками.
Процес (process) - це окремий екземпляр програми у пам'яті, який має власні ресурси: виділену область оперативної пам'яті, дескриптори файлів, змінні оточення тощо.
Потік (thread) - це одиниця виконання всередині процесу. Потоки одного процесу працюють незалежно, але мають спільний доступ до пам'яті та ресурсів процесу.
Процеси дозволяють запускати різні програми одночасно - наприклад, Google Chrome, Visual Studio Code і т.д.
Потоки дають змогу виконувати кілька задач усередині однієї програми. Наприклад, у Visual Studio Code один потік відповідає за оновлення інтерфейсу, інший перевіряє помилки в коді, ще один формує підказки під час написання. Це, звісно, спрощений приклад - у реальності VS Code використовує ще й окремі процеси для розширень і мовних серверів.
Операційна система керує як процесами, так і потоками. Вона розподіляє процесорний час між ними, ставить у чергу, може призупиняти виконання або відновлювати його за потреби.
Давайте трохи адаптуємо наш приклад з кухарем із попереднього посту. Уявімо, що процес - це ресторан, а потік - це кухар. Ресторан має все необхідне для приготування їжі: кухонне приладдя, продукти, рецепти (це можна розглядати як пам’ять і доступ до інших ресурсів). Кухар читає рецепт і, використовуючи ресурси ресторану, готує страву - так само, як потік виконує інструкції нашої програми, використовуючи ресурси процесу. Якщо ресторан хоче готувати кілька страв одночасно, йому потрібно більше кухарів, які працюють паралельно на одній кухні. Аналогічно, якщо програма повинна виконувати кілька задач одночасно - завантажувати файли, обробляти введення, оновлювати інтерфейс - вона може використовувати кілька потоків.
Коли ми створюємо програму і хочемо зробити її зручною для користувача, а також ефективною з точки зору використання ресурсів, які виділяє операційна система на процес, ми іноді починаємо використовувати потоки та прийоми багатопотокового програмування. Це велика окрема тема, і ми її зараз чіпати не будемо. Одна з причин - у JavaScript немає прямого доступу до потоків.
Уточнення. Якщо ви хочете використовувати JavaScript і все ж таки працювати з потоками - у вас є Web Workers:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
А якщо JavaScript виконується не в браузері (наприклад, у Node.js), тоді можна використовувати модуль `worker_threads`. Але варто розуміти, що це не частина стандарту мови, а можливість середовища виконання.
Додаткові корисні ресурси по цій темі:
https://www.youtube.com/@CoreDumpped - канал з короткими відео про те як працює комп'ютер.
Modern Operating System by Andrew Tanenbaum - принцип побудови та роботи операційних систем (може бути викликом для новачка, але нормально як для технічної книжки)
Особливості багатозадачності в JavaScript
JavaScript працює в одному потоці - це означає, що в будь-який момент часу виконується лише один фрагмент коду. Увесь код, який ми пишемо, виконується у call stack: це структура, в яку потрапляють усі функції, що викликаються.
Якщо одна з функцій виконується довго (наприклад, важке обчислення), усі інші задачі - включно з обробкою кліків, рендерингом чи відповідями від сервера - будуть чекати, поки call stack не звільниться.
Щоб не блокувати цей єдиний потік, браузер надає асинхронні API (setTimeout, fetch, Web API). Коли ми викликаємо, скажімо, fetch(), у стек додається лише короткий виклик цієї функції. Власне мережевий запит виконується в окремому потоці, який створює браузер. Тобто, один потік виконує задачі які є у call stack, а інший потік чекає поки відповідь поверне сервер.
Але асинхронна операція колись завершиться і треба механізм який віддасть нашому головному потоку результат роботи іншого потоку. Коли це стається колбек або проміс‑резолвер не додається одразу у call stack. Спершу він потрапляє до черги подій (task queue). За роботою черги стежить event loop. Його правило просте - поки стек порожній дістати першу задачу із черги і покласти у стек.
Так ми досягаємо псевдобагатозадачності: основний потік виконує короткі шматки коду послідовно, а довгі операції «живуть» поза стеком. Коли довгі операції завершуються вони формують чергу задач, які треба виконати а event loop ці задачі закидає до стеку, коли call stack стає порожнім.
Це максимально спрощене пояснення, і без візуалізації може здатися складним. Якщо хочете краще зрозуміти, дуже раджу подивитись відео Jake Archibald — "In The Loop" на YouTube (англійською). https://www.youtube.com/watch?v=8aGhZQkoFbQ
Або приходьте на мій курс JavaScript Поглиблений, де ми розбираємо це на практиці.
Також корисна стаття на MDN, де ці процеси описані докладніше.
Асинхронні операції на практиці: HTTP-запит як найпоширеніший кейс
Один з прикладів асинхронної операції - це запит на сервер через HTTP-протокол. Якщо організовувати запит через JavaScript у браузері без використання React, Angular або Vue.js, то це можна зробити за допомогою:
fetch
XMLHttpRequest
Спеціалізована бібліотека, наприклад, Axios
Ось так буде виглядати простий код написаний на fetch
```js
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => console.log(data));
```
А так на axios (axios одразу повертає розпарсений JSON як response.data, на відміну від fetch, де потрібно викликати .json() вручну)
```js
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => console.log(response.data));
```
Якщо розглянути саме fetch то ось що відбулося під капотом:
fetch створює HTTP запит вказавши HTTP метод, заголовки, тіло тощо
Цей запит передається у вбудовану систему Web API - окрему від JavaScript середу, яка працює в іншому потоці.
JavaScript не чекає відповіді - основний потік продовжує виконувати інший код
fetch повертає Promise - об'єкт, що представляє асинхронну операцію, результат якої з’явиться пізніше
Коли відповідь від сервера приходить, Web API кладе callback в чергу.
Event Loop перевіряє, чи call stack порожній, і виконує цю мікрозадачу.
Така поведінка дозволяє браузеру одночасно виконувати інші задачі, не чекаючи завершення запиту.
Про використання асинхронного коду в JavaScript є [безкоштовний урок на YouTube](https://www.youtube.com/watch?v=cvR1EQ1R0EQ)
Також більше про синтаксис Promise можна дізнатися в уроці [Асинхронний код. Promise](https://itvdn.com/ua/video/javascript-essential-ua/js-promise-ua) на ITVDN, а детальніше про варіанти організації такого коду буде написано далі.
Підходи до написання асинхронного коду
Складність роботи з асинхронним кодом полягає в тому, що обробка результату операції відбувається не відразу, а через певний час після її запуску. Ми ініціюємо асинхронну операцію й можемо виконувати інші завдання, але все одно маємо якось дізнатися про її завершення та обробити результат. Проблема в тому, що в цей момент програма вже виконує інші дії.
Тому для обробки асинхронних операцій використовується push-модель взаємодії: отримувача даних (наш код) викликає провайдер даних - окремий механізм, який керує асинхронною операцією. По суті, розробнику потрібно відреагувати на подію завершення асинхронної операції. Для цього існує кілька підходів:
callback-функція
Promise
async/await (синтаксичний цукор над Promise)
Observables
Використання функцій зворотнього виклику (callback)
Почнемо з callback-функцій. Це найпростіший підхід, але він може призвести до заплутаного коду, особливо коли одна асинхронна операція запускає іншу, і так утворюється ланцюг.
Уявімо, що маємо функцію downloadImage(url, callback), яка завантажує зображення асинхронно, не блокуючи основний потік. Перший параметр - це адреса зображення, яке потрібно завантажити, а другий - функція, яку буде викликано після завершення завантаження. При цьому саме зображення буде передане як параметр у callback.
Приклад використання:
```js
downloadImage(url1, image => document.body.append(image))
```
На перший погляд усе просто. Але якщо потрібно завантажити кілька зображень послідовно, код стає менш зрозумілим:
```js
downloadImage(url1, image => {
document.body.append(image);
downloadImage(url2, image => {
document.body.append(image);
downloadImage(url3, image => {
document.body.append(image);
})
})
});
```
Така вкладена структура швидко ускладнюється, особливо якщо замість одного рядка з DOM-змінами з’являється додаткова логіка. Подібний стиль називають "Pyramid of Doom", і його краще уникати.
Один зі способів спростити обробку асинхронних викликів - це використання Promise.
Використання Promise
Promise - це об’єкт, який представляє асинхронну операцію. У перекладі з англійської promise означає «обіцянка». Можна уявити, що це обіцянка від браузера надати в майбутньому або результат операції, або помилку, пов’язану з її виконанням.
Приклад використання: перепишемо попередню функцію downloadImage, щоб вона повертала Promise.
```js
let promise = downloadImage(url1);
promise.then(image => document.body.append(image));
```
Тут ми все одно використовуємо callback-функцію, але передаємо її вже в метод .then() об’єкта promise. Це важливий момент:
тепер асинхронна операція має об’єктне представлення, яке можна передавати як параметр у різні частини коду;
можна будувати ланцюжки промісів, позбуваючись вкладеності, яка виникала з callback.
Приклад:
```js
downloadImage(url1) // отримуємо проміс
.then(image => { // вказуємо що робити коли promise перейде в стан resolved
document.body.append(image);
return downloadImage(url2); // виконуємо метод, який повертає promise
})
.then(image => { // результат роботи попереднього промісу передається як значення
document.body.append(image);
return downloadImage(url3);
})
.then(image => {
document.body.append(image);
});
```
Тепер код виглядає лінійним і набагато зручнішим для супроводу.
У прикладах вище ми не розглядали, як саме створюється Promise, адже важливо зрозуміти мотивацію використання цих об’єктів. Тим більше, що більшість API браузера вже повертають готові проміси. Наприклад:
```js
fetch('<https://jsonplaceholder.typicode.com/users>')
.then(res => res.json());
```
Якщо хочете детальніше розібратися зі створенням Promise вручну - перегляньте документацію на MDN або мій відео урок на ITVDN.
Async/await
Супроводжувати синхронний код завжди простіше, ніж асинхронний. У 2012 році в мові C# з’явився синтаксичний цукор, який значно спростив роботу з асинхронними операціями: замість вкладених callback можна було використовувати послідовний синтаксис з новими ключовими словами async та await. Згодом цю концепцію перейняли й інші мови програмування, зокрема Python та JavaScript. В JavaScript підтримку async/await додали у 2017 році.
Призначення ключових слів
async - додається до функції та вказує, що вона завжди повертає Promise.
await - використовується перед об’єктом-промісом, щоб "дочекатися" результату перед виконанням наступних рядків коду.
Перепишемо попередній приклад із завантаженням зображень, використовуючи async/await:
```js
let image = null;
image = await downloadImage(url1);
document.body.append(image);
image = await downloadImage(url2);
document.body.append(image);
image = await downloadImage(url3);
document.body.append(image);
```
Тепер код виглядає як звичайний синхронний: немає вкладених callback, усе читається рядок за рядком. Можна подумати, що await "зупиняє" виконання, очікуючи на результат промісу. Насправді ж код не блокує основний потік - під капотом він перетворюється на машину станів, де кожен стан описує дію до або після await.
Ще одна перевага async/await - знайомий синтаксис для обробки помилок:
```js
try {
let image = null;
image = await downloadImage(url1);
document.body.append(image);
image = await downloadImage(url2);
document.body.append(image);
image = await downloadImage(url3);
document.body.append(image);
} catch (ex) {
// обробка помилки
}
```
У результаті асинхронний код виглядає так само зрозуміло, як і синхронний, що значно спрощує його супровід.
Observable
Observable - це ще один підхід до організації асинхронного коду. Назва походить від однойменного патерна проєктування (Observer pattern), який описує створення об’єктів, за якими можна «спостерігати», отримуючи від них сповіщення. Тобто це реалізація подієвої моделі за допомогою ООП.
У сучасному JavaScript ця ідея пішла далі й стала основою реактивного програмування та бібліотеки RxJS.
Якщо Promise представляє одне майбутнє значення (успішне або помилкове), то Observable - це потік значень, які можуть з’являтися з часом.
Можна уявити:
Promise - це одна посилка, яку ви отримаєте в майбутньому;
Observable - це підписка на журнал, нові випуски якого надходитимуть регулярно.
Щоб створити Observable, використовують конструктор або готові оператори RxJS. Наприклад, функція downloadImages(urls) може завантажувати кілька картинок і відправляти їх «у потік» по мірі завантаження:
```js
import { Observable } from 'rxjs';
function downloadImages(urls) {
return new Observable(subscriber => {
urls.forEach(url => {
downloadImage(url, image => {
subscriber.next(image); // надсилаємо картинку у потік
});
});
subscriber.complete(); // повідомляємо, що потік завершено
});
}
```
Щоб використати Observable, на нього треба підписатися за допомогою subscribe:
```js
downloadImages([url1, url2, url3])
.subscribe({
next: image => document.body.append(image), // що робити з новим значенням
error: err => console.error(err), // обробка помилок
});
```
Переваги Observable
працюють із потоком даних, а не з одним результатом;
підтримують підключення операторів трансформації (фільтрація, мапінг, комбінування потоків);
можна легко скасувати виконання (відписатися від потоку).
Нижче приклад обробки даних через оператори. В RxJS оператори підключаються через метод pipe:
```js
import { filter, map } from 'rxjs/operators';
downloadImages([url1, url2, url3])
.pipe(
filter(image => image.width > 100), // пропускаємо лише великі картинки
map(image => {
image.classList.add('highlight');
return image;
})
)
.subscribe({
next: image => document.body.append(image),
error: err => console.error(err),
complete: () => console.log('Готово')
});
```
Таким чином, як і у випадку з Promise, можна будувати ланцюжки обробки. Але Observable значно гнучкіші: вони дозволяють працювати не лише з одним значенням, а з динамічною послідовністю даних у часі.
Для глибшого занурення рекомендую офіційний гайд Observable на RxJS.dev. та відео уроки Observables. Частина 1, та Observables. Частина 2[1]
Практичні поради по работі за асинхроним кодом
Не змішуйте підходи без потреби
Якщо почали писати з async/await, не вставляйте всередину .then() без особливої причини. Це ускладнює читання.
Обробляйте помилки
Використовуйте try/catch для async/await або .catch() для Promise. У випадку Observable завжди додавайте обробку error у subscribe().
Скасовуйте непотрібні операції
Для Observable використовуйте unsubscribe(), коли потік більше не потрібен. Для fetch можна застосувати AbortController, щоб зменшити навантаження й уникнути витоків пам’яті.
Уникайте "Pyramid of Doom"
Замість вкладених callback застосовуйте Promise, async/await або Observable.
Використовуйте паралельне виконання
Якщо операції незалежні, запускайте їх одночасно через Promise.all().
Ізолюйте логіку обробки
Розділяйте завантаження даних та маніпуляції з DOM. Це спростить тестування й повторне використання коду.
Логуйте стан і помилки
Під час розробки виводьте у консоль ключові події асинхронних операцій, щоб відстежувати їх послідовність.
Пам’ятайте про event loop
Розуміння різниці між мікрозадачами й макрозадачами допоможе прогнозувати порядок виконання коду.
Перевіряйте сумісність середовища
Деякі API можуть бути відсутні у певних середовищах (наприклад, fetch у Node.js доступний лише починаючи з версії 18).
Чи не пізно починати навчання після 30 років?
Автор: Редакція ITVDN
Коли мова заходить про зміну професії або навчання з нуля, багато хто ставить собі запитання: «А чи не запізно вже? Мені ж 30, а в когось у цьому віці вже 10 років досвіду».
Цей страх знайомий дуже багатьом. Але насправді він не має під собою серйозних підстав.
Міф 1. Після 30 вже занадто пізно
Як думають:
У 20 років люди швидше сприймають нову інформацію, легше адаптуються до змін і мають більше часу «на помилки». А після 30 начебто потрібно просто «триматися» за стабільність і не ризикувати.
Насправді:
30 — це навіть кращий вік для початку. У вас вже є:
життєвий досвід і вміння робити усвідомлений вибір;
чітке розуміння своїх сильних і слабких сторін;
внутрішня мотивація, яка базується не на чужих очікуваннях, а на особистих цілях.
Більшість студентів після 30 кажуть, що навчаються ефективніше, ніж у 20. Чому? Бо вони знають, навіщо їм ці знання: щоб отримати нову роботу, підняти зарплату, відкрити власний проєкт чи просто відчути розвиток.
Університети часто жартують: у 18 років студенти приходять «за компанію», а в 30+ — «за результатом». І це працює на користь.
Міф 2. Роботодавці не беруть “новачків” у цьому віці
Як думають:
Компанії шукають молодих і «гнучких». Якщо вам 30–35, ви вже «застаріли» для першої роботи в новій сфері.
Насправді:
У сучасному ІТ-ринку головне — знання й уміння. Паспортний вік ніхто не питає на співбесіді, а от портфоліо та практичні навички — так.
Більше того, дорослі новачки часто навіть цікавіші для роботодавців, ніж студенти без досвіду. Чому? Тому що вони приносять із собою бекграунд:
менеджери — вміють організовувати процеси й команду;
бухгалтери — розуміють цифри та відповідальність;
маркетологи — вміють мислити клієнтоорієнтовано;
вчителі — знають, як навчатися і навчати інших.
Ці навички часто стають потужною конкурентною перевагою. У багатьох командах сьогодні працюють спеціалісти, які прийшли в ІТ у 32, 35 і навіть у 40+.
Є навіть окремий термін — «career switcher» (той, хто змінює кар’єру). Для багатьох компаній це вже норма, а не виняток.
Міф 3. Вчитись після 30 складніше
Як думають:
Пам’ять вже «не та», концентрація падає, часу менше — значить, вчитися буде надто важко.
Насправді:
Так, у дорослому віці навчання виглядає інакше. Але сучасні формати роблять його максимально доступним:
гнучкі графіки — ви самі обираєте, коли навчатися;
курси у записі — можна зупинити, переглянути ще раз, повторити;
онлайн-заняття з викладачем — підтримка й пояснення «наживо»;
практика замість теорії — ви бачите результат одразу у власному коді чи проєкті.
Крім того, дорослі студенти виграють завдяки своїй дисципліні. Вони вміють планувати час, поєднувати навчання з роботою чи сім’єю, краще розуміють пріоритети.
І головне: мотивація у 30+ набагато сильніша. Якщо ви сіли вчитися після роботи чи вихідними, значить, вам це справді потрібно. І саме ця мотивація «тягне» далі навіть тоді, коли матеріал стає складним.
Чому саме після 30 варто задуматися про нову професію?
Свідомий вибір. Ви вже знаєте, що вам подобається, а що — ні. Це означає, що новий напрям ви оберете осмислено, а не «бо всі так роблять».
Фінансова стабільність. У більшості випадків у вас вже є певний дохід, і ви можете інвестувати у своє навчання.
Кар’єрні перспективи. Навіть якщо ви починаєте з нуля, через 1–2 роки ви можете отримати першу роботу в ІТ. А далі — все залежить від вашої наполегливості.
Особистий розвиток. Навчання тримає мозок у тонусі, розвиває нові навички, допомагає залишатися гнучким у світі, що швидко змінюється.
Реальні історії
У нашій практиці багато прикладів студентів, які почали навчання після 30 і сьогодні успішно працюють в ІТ.
Олена, 34 роки, бухгалтер у минулому. Пройшла курси FrontEnd і через 7 місяців отримала першу роботу в аутсорсинговій компанії.
Андрій, 37 років, колишній вчитель. Вивчив Python і сьогодні працює у стартапі, розробляє автоматизацію для освітніх процесів.
Сергій, 41 рік, колишній військовий. Завдяки курсам QA тестування змінив професію і зараз працює тестувальником у міжнародній компанії.
Ці історії доводять: вік — це лише цифра. Головне — бажання та готовність вчитися.
Чому варто обрати саме наші курси?
Актуальні програми. Усі курси створені практикуючими спеціалістами й регулярно оновлюються.
Гнучкий формат. Ви можете обирати коли та де навчатись.
Практика з перших уроків. Усі студенти виконують реальні завдання й проєкти, що формують портфоліо.
Кар’єрний сервіс. Ми допомагаємо скласти резюме, підготуватись до співбесіди та навіть пропонуємо стажування.
Висновок
Починати новий шлях після 30 — це не пізно. Навпаки, це часто найкращий момент: ви маєте мотивацію, досвід і бажання змінити життя.
Якщо ви давно думали про ІТ чи іншу сферу — саме зараз час спробувати.
👉 Ваші 30, 35 чи навіть 45 можуть стати точкою відліку для нової, успішної кар’єри.