Головна сторінка / Блог / Мови програмування / JavaScript / Курс з JavaScript - розберися в теорії та закріпи на практиці!

Курс з JavaScript - розберися в теорії та закріпи на практиці!

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

Що робить цей курс з JavaScript особливим?

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

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

Кожен матеріал супроводжується такими елементами:

  1. Список перевірених джерел - книги, статті та навчальні матеріали для теоретичного вивчення теми.
  2. Добірку практичних завдань - вправи, проекти та завдання для закріплення знань на практиці.
  3. Конспект теорії — короткий виклад ключових моментів із різних джерел, щоб можна було швидко освіжити знання у майбутньому.

На кого розрахований цей цикл статей?

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

Як краще використовувати матеріали?

  1. Вивчайте матеріали із джерел - виберіть найбільш зручні для вас ресурси і ознайомтеся з теорією.
  2. Практикуйтесь — обов'язково вирішуйте завдання та спробуйте застосовувати знання на практиці.
  3. Використовуйте конспект - повертайтеся до нього за потреби освіжити знання з теми.

Використовувані ресурси

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

MDN Web Docs

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

Книга "Ви не знаєте JS"

You Don't Know JS (оригінал), Ви не знаєте JS(переклад) - Це серія книг з JavaScript, яка допомагає глибше зрозуміти мову, виходячи за рамки базових знань. На відміну від більшості підручників, які фокусуються на поверхневому поясненні та простих прикладах, ці книги розбирають концепції мови у деталях. Книги написані простою та зрозумілою мовою, але при цьому вимагають уважності та вдумливого підходу. Для практики рекомендується самостійно повторювати приклади з книги та виконувати вправи.

Freecodecamp

freecodecamp.org - справжня знахідка. Тут є і навчальні відео, і статті, і навіть практичні завдання, які перевіряються на правильність автоматичними тестами. Але... Він англомовний, тому у кого з англійською погано доведеться користуватися перекладачем. Ми користуватимемося практичними завданнями, а не теорією, тому особливих проблем у вивченні не повинно бути. Але все ж таки опис завдання там англійською, тому можемо порекомендувати плагін для chrome браузера. Це все той же google перекладач, але у форматі плагіна. Виділивши щось на сторінці, у вас біля мишки з'явиться іконка перекладача, натиснувши на неї, ви отримаєте переклад. Тобто не потрібно буде бігати для перекладу між вкладками браузера.

Бонус! Якщо виконати всі завдання в рамках розділу JavaScript Algorithms and Data Structures, отримайте сертифікат від Freecodecamp! Це стане чудовим доповненням вашого портфоліо. У налаштуваннях можна подивитися, які саме вправи необхідно виконати для отримання сертифіката.

Увага

Freecodecamp оновили програму JavaScript Algorithms and Data Structures і деякі посилання на практичні завдання в наших статтях вестимуть на вправи з позначкою legacy (застаріле). Варто зазначити, що попередні вправи не втратили актуальності. Після оновлення змінився редактор та метод проходження завдань. Практичну ж користь можна отримати як від старих, так і від нових вправ. Радимо спробувати все, адже що більше практики, то краще.

Codepen

codepen.io - За допомогою цього онлайн-редактора ви зможете детально вивчити, як працює код. Редактор складається з 4 частин, в яких можна писати html, css, js код. У четвертому відображається результат вашої роботи. Тобто не потрібно нічого встановлювати та запускати. Для перевірки якогось коду або своєї гіпотези йдемо в codepen і дивимося на результат виконання. Якщо зареєструватися на соdepen, з'явиться можливість зберігати роботу та ділитися нею за посиланням.

Ще мить. Для використання freecodecamp потрібно буде зареєструватися на ньому. Процес реєстрації простий, вводимо свою пошту, після чого підтверджуємо її за інструкцією в листі. При повторному візиті вводимо пошту, а потім – код, який буде надіслано у відповідь. Раджу зробити це прямо зараз, щоб потім не гаяти часу, а відразу приступити до виконання завдань.

Зміст

Цей цикл статей доповнюватиметься новими матеріалами в міру їх готовності. Зазирайте в блог, щоб не пропустити свіжі публікації, та ділитесь зворотним зв'язком — це допоможе зробити статті ще кращими.

Нижче наведено зміст з доступними статтями з циклу. Посилання будуть оновлюватися з виходом нових матеріалів.

  • Вступ
  • Типи даних у ECMAScript
  • Змінні (очікується)
  • Перетворення типів (очікується)
  • Математичні оператори (очікується)
  • Оператори для роботи з рядками (очікується)
  • Оператори порівняння та умовне розгалуження (очікується)
  • Цикли (очікується)
  • Функції (очікується)
  • Блокова область видимості (очікується)
  • Hoisting (очікується)
  • Об'єкти (очікується)
  • This (очікується)
  • Object descriptors (очікується)
  • Object prototype. Делегування поведінки (очікується)
  • Масиви (очікується)
  • ES5 and beyond (очікується)
  • Асинхронний код (очікується)
  • Колбеки (очікується)
  • Промисли (очікується)
  • Генератори (очікується)
  • DOM & BOM (очікується)

Ukrainian
Перейдіть до верхньої частини