Відео курс JavaScript Базовий - відео курси ITVDN
ITVDN: курси програмування
Відеокурси з
програмування
Подписка

300+ курсов по популярным IT-направлениям

Вибери свою IT спеціальність

Підписка
Подписка

300+ курсов по популярным IT-направлениям

Про курс

JavaScript – це основа роботи сучасних вебдодатків та багатьох мобільних та десктопних додатків.

Курс JavaScript Базовий – логічне продовження JavaScript Стартовий. При проходженні даного курсу ви вивчите головні принципи використання JavaScript при побудові інтерфейсів користувача та при створенні сценаріїв, що використовують об'єктно-орієнтовані техніки та функціональні підходи.

Ці уроки стануть фундаментом для подальшого вивчення бібліотек та фреймворків, що базуються на мові JavaScript. Також знання, отримані на цьому курсі, допоможуть вам при вивченні та використанні такого фреймворку, як Angular або бібліотеки React.

До кожного уроку є практичні завдання, виконавши які ви не тільки закріпите матеріал, але побачите додаткові варіанти використання вивчених конструкцій.

Читати далі...
Переглянути безкоштовний урок

Цей курс входить до спеціальності:

Попередні Вимоги

Для розуміння матеріалів даного курсу потрібно знання базового синтаксису JavaScript (проходження курсу JavaScript Стартовий) та знання основ HTML та CSS.

Читати далі...

Ви навчитеся

  • Створювати веб-сторінки з повноцінним інтерфейсом користувача
  • Використовувати класи та успадкування класів, розуміти принципи об'єктно-орієнтованого підходу під час розробки JavaScript.
  • Працювати з функціями конструкторами та прототипами.
  • Працювати з функціями та використовувати замикання – розуміти, що таке лексичне оточення, контекст.
  • Працювати з DOM деревом, знаходити елементи, створювати, видаляти та змінювати стан існуючих елементів.
  • Працювати зі стилями через JavaScript код.
  • Використовувати події, застосовувати техніку делегування подій, працюючи з різними фазами події (Capture Phase та Bubble Phase).
  • Використовувати HTML template та шаблонізатор mustache.js.
  • Працювати з формами та перевіряти дані, введені у форми.
  • Працювати з даними на стороні клієнта, використовуючи cookies та Web Storage.
  • Обробляти винятки і створювати винятки.
  • Організувати асинхронний код за допомогою функцій зворотного дзвінка та Promise.
  • Створювати запити мережі за допомогою методу fetch
Читати далі...
Завантажити матеріали курсу Для отримання матеріалів курсу необхідно авторизуватися
Отримати сертифікат Для отримання сертифікату необхідно авторизуватися
  • Тривалість: 14 год 39 хв
  • Уроків: 20
  • Мова: українська

Що входить до курсу

  • 20 відео уроків
  • Домашні завдання
  • Тестування
  • Сертифікат

×

Ви відкрили доступ до тесту! Пройти тест

Ви дійсно бажаєте відкрити доступ до тестування за курсом JavaScript Базовий на 40 днів?

Увійдіть або зареєструйтеся для того, щоб продовжити перегляд безкоштовного відео

На цьому уроці буде розглянуто оточення, в якому виконується JavaScript код. Ви дізнаєтесь, що таке DOM та BOM. І найголовніше - навчитеся шукати потрібні вузли DOM дерева, що дозволить почати будувати динамічні веб-сторінки і впливати на вміст документа за допомогою JavaScript коду.

Читати далі...

Для того, щоб будувати динамічні сторінки, необхідно розуміти, як взаємодіяти з вузлами DOM дерева, а також розуміти, які властивості доступні для редагування цих вузлів. Не менш важливо - навчитися переходити від елемента до елемента на основі розташування знайденого елемента DOM дереві. На цьому уроці ви дізнаєтеся, як відбувається навігація по DOM дереву, а також типи вузлів і вивчіть їх основні властивості.

Читати далі...

На цьому уроці ви дізнаєтеся, як за допомогою JavaScript коду можна маніпулювати вмістом сторінки – додавати та видаляти елементи. Спочатку ви навчитеся створювати нові вузли, а потім дізнаєтеся, як за допомогою різних методів додавати створені вузли у потрібні частини сторінки. Цей урок дасть розуміння основ створення нового контенту для веб-сторінок за допомогою JavaScript коду.

Читати далі...

Об'єкти, які знаходяться в DOM дереві, створюються на основі HTML розмітки, а властивості для цих об'єктів визначаються через HTML атрибути. На цьому уроці ви дізнаєтесь, як отримати доступ до значень атрибутів і як змінити атрибути через код JavaScript. Дізнаєтеся навіщо потрібні data атрибути та розберете приклади використання data атрибутів на практиці.

Читати далі...

Мета цього уроку – навчитися використовувати CSS класи в JavaScript коді та змінювати оформлення елементів як за допомогою класів, так і за допомогою inline css стилів. Також, у цьому відео уроці буде розглянуто таке поняття, як обчислені стилі, розуміння яких важливе для JavaScript розробника, що вносить зміни в оформлення сторінки під час виконання сценарію.

Читати далі...

Побудова інтерфейсу користувача нерозривно пов'язане з реакцією на взаємодію з елементами управління – натисканням на кнопки, введенням значень у поля та іншими подібними діями. Щоб відреагувати на дію користувача, необхідно вміти обробляти події та знати, які елементи управління, можуть їх видати. На цьому уроці ви дізнаєтеся, що таке події і як обробляти події JavaScript, використовуючи властивості DOM елементів і метод addEventListener.

Читати далі...

Цей урок націлений на вивчення подій, які часто використовуються при побудові інтерфейсів користувача. Ви дізнаєтесь, як обробляти події миші, події натискання на клавіші клавіатури, а також навчитеся обробляти події, пов'язані із завантаженням документа. Цей урок орієнтований на практичне застосування різних подій і містить кілька цікавих прикладів побудови інтерфейсу, де використовуються події руху курсору та клавіатури.

Читати далі...

У DOM дереві подія проходить за певним маршрутом - від кореня дерева до елемента, який ініціював подію, а після цього подія йде у зворотний бік - до кореня DOM дерева. Використовуючи addEventListener в JavaScript, можна визначити, на якому саме етапі буде оброблятись подія. Це дозволяє створити ефективний код обробки подій кількох елементів керування. На цьому уроці будуть розглянуті етапи поширення події, способи встановлення обробників на різні етапи та приклади коду, що показують для чого це використовується.

Читати далі...

Сучасний інтерфейс користувача складається з безлічі HTML елементів з різними атрибутами і, зазвичай, його структура досить складна. Побудова такого інтерфейсу на чистому JavaScript не проста задача, яка може бути пов'язана з безліччю дрібних помилок. Щоб уникнути цих помилок та спростити генерацію розмітки, використовуються спеціальні бібліотеки – шаблонізатори. На цьому уроці ви навчитеся використовувати шаблонизатор mustache.js і дізнаєтеся про те, як користуватися HTML елементом template.

Читати далі...

Об'єкти – важлива частина розробки будь-якою об'єктно-орієнтованою мовою програмування. JavaScript включає різні ООП техніки, тому робота з об'єктами дуже важлива для написання повноцінних сценаріїв. На цьому уроці ви навчитеся створювати об'єкти з однаковою структурою за допомогою функцій конструкторів. А також дізнаєтеся про те, що таке прототип і яку роль він грає в роботі багатьох механізмів JavaScript.

Читати далі...

Функції конструктори та прототипи, які ви вивчали на минулому уроці, важливі для правильного розуміння роботи багатьох конструкцій у JavaScript. Сьогодні замість функцій конструкторів на практиці застосовують класи та інші сучасні можливості, пов'язані з ними. На цьому уроці ви дізнаєтеся, що клас - це, по суті, розширення функцій конструкторів і це дуже зручний спосіб роботи з об'єктами, який дозволяє за допомогою невеликого обсягу коду визначити властивості та методи і правильно скористатися прототипами.

Читати далі...

Успадкування – концепція ООП мов програмування, за якою функціональність одного класу може бути передано до іншого класу. З появою ключового слова class в JavaScript успадкування стало дуже простим і не вимагає написання великої кількості коду, пов'язаного із прототипами, як це було раніше. На цьому уроці ви дізнаєтеся, як працює успадкування та використовується ключове слово extends. Важливою частиною цього уроку буде розгляд роботи статичних властивостей та методів.

Читати далі...

На цьому уроці буде детально розглянуто поняття контексту функції. Ви дізнаєтеся, які можливі значення може приймати ключове слово this. Як поводиться контекст глобальних функцій у строгому режимі, а також дізнаєтеся, як користуватися методами call, apply і bind для зміни контексту функції, що викликається. Функції - важливий інструмент JavaScript, так як ця мова включає в себе техніки функціонального програмування. Хороше розуміння функцій дає можливість краще розуміти та використовувати різні шаблони кодування JavaScript.

Читати далі...

Замикання – корисний механізм будь-якої функціональної мови програмування. У JavaScript замикання працюють на основі внутрішніх структур, які створюються під час виконання функцій – контекстів виконання та лексичних оточень. Цей відео урок присвячений механізмам, які лежать в основі роботи функцій та показує приклади того, як використовується замикання у сценаріях JavaScript.

Читати далі...

На цьому уроці ви навчитеся працювати з HTML формами через JavaScript код та отримувати значення, введені користувачем. Також ви дізнаєтеся навіщо потрібні HTML форми і як вони працюють при надсиланні значень на сервер.

Читати далі...

Перевірка даних – основна роль JavaScript, коли йдеться про HTML форми. Дані, введені користувачем, можуть не відповідати очікуванням розробника. Користувач може не ввести якесь обов'язкове значення або вказати дані в неправильному форматі, наприклад, коли потрібно ввести адресу електронної пошти та номер телефону. На  цьому уроці ви дізнаєтеся про події, які будуть корисними при перевірці даних, а також розгляньте кілька підходів в організації процесу перевірки введених значень, у тому числі вивчіть перевірку даних без застосування JavaScript за допомогою HTML5 атрибутів для валідації.

Читати далі...

На цьому уроці буде вивчено основні варіанти зберігання даних на стороні клієнта. Cookies - найпростіший спосіб зберегти невеликий обсяг даних, але значення, записані в cookies, відправляються на сервер при кожному запиті, тому такий спосіб зберігання даних більше підходить для відстеження дій користувача та авторизації користувача на сайті. WebStorage – це більш сучасний API для роботи з браузером, який дозволяє зберегти більше даних, ніж cookies та призначений лише для збереження значень та не пов'язаний із відправкою даних на сервер.

Читати далі...

У будь-якій програмі можуть виникнути помилки під час виконання. Такі помилки часто неможливо передбачити, наприклад, при надсиланні запиту на сервер зникло з'єднання і відправити запит не вийде або JSON дані містять помилку і відновити на основі цих даних об'єкт вже неможливо. Усі ситуації, через які не можна продовжити виконання коду, називаються винятками, а два ключові слова try/catch – спосіб обробити помилку в коді та надати альтернативний спосіб виконання сценарію.

Читати далі...

На цьому відео уроці йтиметься про організацію асинхронного коду. Ви дізнаєтеся про те, як можна обробити результат асинхронної операції за допомогою функції зворотного виклику та зрозумієте недоліки такого підходу при описі складної логіки. Але більшість уроку присвячена використанню об'єктів Promise, з допомогою яких код виходить простіше і дозволяє уявити кожну асинхронну операцію як окремий об'єкт.

Читати далі...

Сучасний веб-додаток, написаний за допомогою JavaScript, неможливо уявити без взаємодії з серверною стороною. На цьому уроці для кращого розуміння принципів роботи з мережевими запитами, будуть розглянуті основи HTTP протоколу. Ви дізнаєтеся, як виглядає запит і відповідь, які бувають HTTP дієслова і на що вони впливають, а також дізнаєтеся про основні статус коди, які надходять у відповіді сервера. Головне завдання уроку – показати, як користуватися методом fetch та надіслати HTTP запит на сервер, після чого опрацювати отриману відповідь.

Читати далі...
ПОКАЗАТИ ВСЕ

Відгуки наших студентів

DOU

Відгуки в DOU

4,9/5 - 195 відгуків

Evgeniy Brizhevskiy
Evgeniy Brizhevskiy
5/5
Пройшов курс Основы работы с Git. Чудовий курс для початківців. Команди для роботи пояснені у зрозумілій формі з живими прикладами. Дякую за курс.
Почитати оригінал
Facebook

Відгуки в Facebook

5,0/5 - 704 відгуки

Александр Тетеро
Александр Тетеро
5/5
Много хороших курсов, особенно радует то, что часто информация преподносится под иным углом и отлично дополняет другие курсы. Получается восполнить пробелы в знаниях, получить дополнительную практику, а также проверить знания на тестах и попрактиковаться на тренажерах. Отдельно приятно наличие системы бонусов.
Почитати оригінал
Google

Відгуки в Google

4,9/5 - 814 відгуки

Анатолий Давлюд
Анатолий Давлюд
5/5
Отличные курсы! Очень подробно разжеваны все детали, учиться интересно. Рекомендую!
Почитати оригінал

Купуй передплатуз доступом до всіх курсів та сервісів

Бібліотека сучасних IT знань у зручному форматі

Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

Стартовий
  • Усі відеокурси на 3 місяці
  • Тестування з 10 курсів
  • Перевірка 5 домашніх завдань
  • Консультація з тренером 30 хв
59.99 $
Придбати
Базовий
  • Усі відеокурси на 6 місяців
  • Тестування з 16 курсів
  • Перевірка 10 домашніх завдань
  • Консультація з тренером 60 хв
89.99 $
Придбати
Преміум
  • Усі відеокурси на 12 місяців
  • Тестування з 24 курсів
  • Перевірка 20 домашніх завдань
  • Консультація з тренером 120 хв
169.99 $
Придбати

Запитання і відповіді

У чому перевага онлайн курсів програмування у порівнянні з офлайн?
Яка вартість навчання?
Скільки часу знадобиться, щоб опанувати програмування?
Скільки часу знадобиться, щоб опанувати ІТ-спеціальність?
З якого курсу розпочинати навчання?
Як керувати своїм часом та організувати ефективне онлайн-навчання з тренером?
Чи є у вас допомога з працевлаштуванням після закінчення навчання?
Чи можливе персональне навчання з тренером ITVDN?
З якого віку можна навчатися на платформі?
Чи потрібні знання англійської мови для навчання?Чи потрібні знання англійської мови для навчання?
Якого рівня можна досягти, пройшовши навчання зі спеціальності?
Коли закінчиться підписка, що далі? Доступу до уроків не буде?
Чи додаються знижки на придбання підписки?
У чому перевага онлайн курсів програмування у порівнянні з офлайн?

Онлайн курси мають низку переваг перед офлайн форматом:

  1. Незалежність від локації. Онлайн дозволяє навчатися де завгодно.
  2. Збереження часу та грошей на дорогу. Ви економите час та гроші з поїздок на курси та назад.
  3. Онлайн курси дешевші. Немає потреби в приміщенні та ноутбуках для студентів, тому вартість нижча
  4. Комфортний темп навчання, постійний доступ до інформації. Навчання у вашому темпі будь-коли і будь-де 24/7. Також є доступ до записаних уроків, чого немає в офлайн форматі.
Яка вартість навчання?

На ITVDN є 2 формати навчання: Live Online та відео курси. Ціна навчання залежить від обраного вами способу навчання.

Якщо ви хочете навчатися самостійно у форматі відео курсів, вартість навчання складе в середньому 10-15 USD на місяць в залежності від обраного вами пакету підписки.

Live Online – це онлайн навчання з тренером у групах разом із іншими студентами. Навчання у даному форматі коштує в середньому 6-7 USD за одну годину.

Скільки часу знадобиться, щоб опанувати програмування?

Залежить від того, скільки уваги програмуванню ви виділятимете щоденно, яка саме це мова і який у вас досвід кодингу. Середній час на опанування однієї мови за умови регулярних занять хоча б 2 год/день:

  • новачки – від 3 до 6 місяців;
  • ті, хто мають базові знання з іншої мови – від 1 до 3 місяців;
  • професійні програмісти – до 1 місяця.

Найкращий варіант інвестиції часу – 8 годин щоденно (20% теорії + 80% практики). Більше практики – швидше опанування програмування.

Скільки часу знадобиться, щоб опанувати ІТ-спеціальність?

Для опанування ІТ-спеціальності треба виділити не менше 500 годин, з яких близько 100 годин – на перегляд відео уроків або відвідування онлайн занять із ментором, а 400 – на виконання практичних завдань за пройденими темами.

В залежності від того, скільки часу ви готові виділяти на навчання в день, ви зможете пройти програму за 3-8 місяців. Якщо у вас є певна база знань з ІТ, кількість необхідного часу буде меншою.

Також тривалість навчання залежить від обраної вами спеціальності, оскільки набір технологій, які ви маєте вивчити, буде різним. 

З якого курсу розпочинати навчання?

Починати варто з тих, які містять в назві слово “Стартовий”. Такі курси мають вступний матеріал для знайомства з мовою або технологією.

Якщо ж ви плануєте навчатися за конкретною спеціальністю у форматі відео курсів, перейдіть на сторінку спеціальності і прокрутіть до заголовку “Відео курси за спеціальністю …”. Нижче буде список відео курсів, котрі відсортовано в порядку необхідності вивчення.

Ще нижче ви знайдете Roadmap зі спеціальності – путівник, на якому зображені відео курси у вигляді дерева, що також вас легко зорієнтує у послідовності проходження курсів.

Як керувати своїм часом та організувати ефективне онлайн-навчання з тренером?

Якщо ви обираєте Live Online навчання з тренером, все дуже просто:

  • відвідуйте всі заняття, вчасно виконуйте д/з;
  • додатково дивіться відео уроки на ITVDN;
  • після кожного уроку проходьте коротке тестування;
  • практикуйтеся в Інтерактивному практикумі;
  • спілкуйтеся з одногрупниками в ході вирішення д/з, задавайте питання ментору на уроках та поза ними;
  • в кінці кожного курсу складайте екзамен на TestProvider (та отримуйте Сертифікати);
  • в кінці всього навчання проходьте екзамен зі спеціальності і отримайте Диплом.
Чи є у вас допомога з працевлаштуванням після закінчення навчання?

Ми маємо спеціальний розділ – “Вакансії”, котрий допомагає нашим студентам шукати першу роботу в ІТ. Детальніше про можливості та призначення розділу за посиланням.

А для тих, хто навчається онлайн з ментором, у нас додатково передбачена індивідуальна допомога HR-фахівця щодо підготовки до працевлаштування з першого дня навчання і до отримання першого job-оферу. Вона включає в себе допомогу в оформленні соцмереж, підготовці резюме, проведення пробної співбесіди, надання порад щодо пошуку роботи та самопрезентації тощо. 

Чи можливе персональне навчання з тренером ITVDN?

На жаль, дана послуга на ITVDN не передбачена, однак ви можете замовити індивідуальну консультацію з нашим ментором. Деталі ви знайдете за посиланням.

З якого віку можна навчатися на платформі?

На ITVDN відсутні курси для дітей, тому комфортний вік для початку навчання за нашими матеріалами – від 14 років.

Чи потрібні знання англійської мови для навчання?Чи потрібні знання англійської мови для навчання?

Ніяких вимог до вашого рівня англійської ми не висуваємо, оскільки всі навчальні матеріали йдуть російською або українською мовами. При цьому базові знання англійської будуть корисні для комфортного пошуку інформації в гуглі, читання документацій в інтернеті тощо.

Якого рівня можна досягти, пройшовши навчання зі спеціальності?

На ITVDN можна пройти повне навчання з нуля до спеціаліста рівня Trainee/Junior. Якщо ви вже практикуючий розробник, наші відео курси допоможуть поглибити ваші знання до рівня Middle.

Коли закінчиться підписка, що далі? Доступу до уроків не буде?

Після закінчення дії вашої підписки доступ до відео курсів, на жаль, буде закрито. Однак ви зможете користуватися тими навчальними матеріалами, які ви завантажили на свій девайс під час навчання.

Чи додаються знижки на придбання підписки?

Ні, знижки не додаються.

Notification success