Show tasks

Мова програмування JavaScript

• Вступ
  • Вступ до JavaScript
  • Довідники й специфікації
  • Редактори коду
  • Інструменти розробника
• Основи JavaScript
  • Привіт, світ!
    • Показати сповіщення
    • Показати повідомлення із зовнішнього скрипту
  • Структура коду
  • Сучасний режим, "use strict"
  • Змінні
    • Робота зі змінними
    • Придумайте правильні імена
    • Використовувати великі чи маленькі букви для імен констант?
  • Типи даних
    • Лапки у рядках
  • Взаємодія: alert, prompt, confirm
    • Проста сторінка
  • Перетворення типу
  • Базові оператори, математика
    • Постфіксна та префіксна форми
    • Результат присвоєння
    • Перетворення типу
    • Виправте додавання
  • Оператори порівняння
    • Оператори порівняння
  • Умовні розгалуження: if, '?'
    • if (рядок з нулем)
    • Назва JavaScript
    • Покажіть знак
    • Перепишіть 'if' на '?'
    • Перепишіть 'if..else' на '?'
  • Логічні оператори
    • Який результат АБО?
    • Який результат alerts, об'єднаних АБО?
    • Який результат І?
    • Який результат alerts, об'єднаних за допомогою І?
    • Результат АБО І АБО
    • Перевірте діапазон
    • Перевірте значення поза діапазоном
    • Питання про "if"
    • Перевірте логін
  • Оператор об’єднання з null '??'
  • Цикли: while і for
    • Останнє значення циклу
    • Яке значення виведе цикл "while"?
    • Яке значення виведе цикл "for"?
    • Виведіть парні числа
    • Замініть цикл "for" на "while"
    • Повторяти цикл, доки ввід невірний
    • Вивести прості числа
  • Конструкція "switch"
    • Перепишіть конструкцію "switch" в аналогічну з використанням "if"
    • Перепишіть умови "if" в конструкцію "switch"
  • Функції
    • Чи потрібен "else"?
    • Перепишіть функцію, використовуючи '?' або '||'
    • Функція min(a, b)
    • Функція pow(x, n)
  • Функціональні вирази
  • Стрілкові функції, основи
    • Перепишіть з використанням стрілкових функцій
  • Особливості JavaScript
• Якість коду
  • Налагодження в браузері
  • Стандарт оформлення коду
    • Поганий стиль
  • Коментарі
  • Ніндзя-код
  • Автоматичне тестування за допомогою Mocha
    • Що не так з цим тестом?
  • Поліфіли та транспілятори
• Об’єкти: основи
  • Об’єкти
    • Привіт, object
    • Перевірка на порожнечу
    • Сума властивостей об’єкта
    • Помножте числові значення властивостей на 2
  • Копіювання об’єктів та посилання
  • Збирання сміття
  • Методи об’єкта, "this"
    • Використання "this" в об’єктному літералі
    • Створіть калькулятор
    • Ланцюг викликів
  • Конструктори, оператор "new"
    • Дві функції - один об’єкт
    • Створити Калькулятор за допомогою конструктора
    • Створити Accumulator
  • Опціональний ланцюжок '?.'
  • Тип даних Символ
  • Перетворення об’єктів в примітиви
• Типи даних
  • Методи примітивів
    • Чи можна додати властивість до рядка?
  • Числа
    • Сума чисел від відвідувача
    • Чому 6.35.toFixed(1) == 6.3?
    • Повторюйте, поки вхід не буде числом
    • Випадковий безкінечний цикл
    • Випадкове число від min до max
    • Довільне ціле число від min до max
  • Рядки
    • Переведіть перший символ у верхній регістр
    • Перевірка на спам
    • Урізання тексту
    • Виділіть гроші
  • Масиви
    • Чи скопійовано масив?
    • Операції з масивами.
    • Виклик в контексті масиву
    • Сума введених чисел
    • Максимальний підмасив
  • Методи масивів
    • Переведіть текст виду border-left-width в borderLeftWidth
    • Фільтрація за діапазоном
    • Фільтрація за діапазоном "на місці"
    • Сортувати за спаданням
    • Скопіювати і впорядкувати масив
    • Створити розширюваний калькулятор
    • Трансформувати в масив імен
    • Трансформувати в обʼєкти
    • Відсортувати користувачів за віком
    • Перемішайте масив
    • Вирахувати середній вік
    • Залишити унікальні елементи масиву
    • Створення об’єкта з ключем з масиву
  • Ітеративні об’єкти
  • Map та Set
    • Фільтрувати унікальні елементи масиву
    • Відфільтруйте анаграми
    • Перебираємо ключі
  • WeakMap та WeakSet
    • Зберігати мітки "непрочитане"
    • Зберігати дати читання
  • Object.keys, values, entries
    • Підсумуйте властивості
    • Порахуйте властивості
  • Деструктуроване присвоєння
    • Деструктуроване присвоєння
    • Максимальна зарплата
  • Дата і час
    • Створити дату
    • Показати день тижня
    • Європейський день тижня
    • Який день місяця був багато днів тому?
    • Останній день місяця?
    • Скільки секунд пройшло сьогодні?
    • Скільки секунд до завтра?
    • Формат відносної дати
  • Методи JSON, toJSON
    • Перетворіть об’єкт в JSON і назад
    • Виключити зворотні посилання
• Розширена робота з функціями
  • Рекурсія та стек
    • Сума всіх чисел до даного
    • Розрахувати факторіал
    • Числа Фібоначчі
    • Вивести одинозв’язаний список
    • Вивести одинозв’язаний список у зворотному порядку
  • Залишкові параметри та синтаксис поширення
  • Область видимості змінної, замикання
    • Чи побачить функція останні зміни?
    • Які змінні доступні?
    • Чи лічильники незалежні?
    • Об’єкт лічильника
    • Функція у if
    • Сума із замиканням
    • Чи видно змінну?
    • Функції фільтрації
    • Сортувати за полем
    • Армія функцій
  • Застаріле ключове слово "var"
  • Глобальний об’єкт
  • Об’єкт функції, NFE
    • Встановити і зменшити лічильник
    • Сума з довільною кількістю дужок
  • Синтаксис "new Function"
  • Планування: setTimeout та setInterval
    • Вивід кожної секунди
    • Що покаже setTimeout?
  • Декоратори та переадресація виклику, call/apply
    • Декоратор-шпигун
    • Затримуючий декоратор
    • Декоратор debounce
    • Дросельний (throttle) декоратор
  • Прив’язка контексту до функції
    • Прив’язана функція як метод
    • Друга прив’язка
    • Властивість функції після прив’язки
    • Виправте функцію, яка втратила 'this'
    • Часткове застосування для логіну
  • Повторення стрілкових функцій
• Властивості об’єкта, їх конфігурація
  • Прапори та дескриптори властивостей
  • Гетери і сетери властивостей
• Прототипи, наслідування
  • Успадкування через прототипи
    • Робота з прототипами
    • Алгоритм пошуку
    • Де буде записано?
    • Чому обидва хом’ячка наситились?
  • F.prototype
    • Заміна властивості "prototype"
    • Створення нового об’єкта з одинаковим конструктором
  • Вбудовані прототипи
    • Додайте метод "f.defer(ms)" до функцій
    • Додайте декоруючий метод "defer()" до функцій
  • Методи прототипів, об’єкти без __proto__
    • Додайте toString до об’єкту-словника
    • Різниця між викликами
• Класи
  • Базовий синтаксис класу
    • Перепишіть клас
  • Наслідування класу
    • Помилка створення екземпляра
    • Покращений годинник
  • Статичні властивості та методи
    • Клас розширює об’єкт?
  • Приватні та захищені властивості та методи
  • Розширення вбудованих класів
  • Перевірка класу: "instanceof"
    • Дивний instanceof
  • Міксини
• Обробка помилок
  • Робота з помилками, "try...catch"
    • Finally чи просто код?
  • Нестандартні помилки, розширення Error
    • Успадкувати від SyntaxError
• Проміси, async/await
  • Введення: колбеки
  • Проміси
    • Чи можливо "перевиконати" проміс?
    • Затримка на промісах
    • Анімація круга за допомогою проміса
  • Ланцюжок промісів
    • Проміс: then проти catch
  • Проміси: обробка помилок
    • Помилка в setTimeout
  • Promise API
  • Промісифікація
  • Мікрозадачі
  • Async/await
    • Перепишіть, використовуючи async/await
    • Перепишіть "rethrow", використовуючи async/await
    • Викличте async-функцію зі "звичайної"
• Генератори, розширена ітерація
  • Генератори
    • Псевдовипадковий генератор
  • Асинхронні ітератори та генератори
• Модулі
  • Вступ до модулів
  • Експорт та імпорт
  • Динамічні імпорти
• Різне
  • Proxy та Reflect
    • Помилка під час зчитування неіснуючої властивості
    • Доступ до масиву[-1]
    • Observable
  • Eval: виконання рядка коду
    • Eval-calculator
  • Каррінг
  • Посилальний Тип
    • Перевірка синтаксису
    • Поясніть значення "this"
  • BigInt
  • Юнікод, внутрішня будова рядків
  • WeakRef та FinalizationRegistry

Браузер: документ, події, інтерфейси

• Документ
  • Браузерне середовище, специфікації
  • DOM дерево
  • Навігація по DOM
    • Діти у DOM
    • Питання про сусідів
    • Виділіть усі діагональні клітинки
  • Пошук: getElement*, querySelector*
    • Пошук елементів
  • Властивості вузлів: тип, тег та вміст
    • Підрахувати нащадків
    • Що в nodeType?
    • Тег у коментарі
    • Де "document" в ієрархії?
  • Атрибути та властивості
    • Отримайте атрибут
    • Зробіть зовнішні посилання помаранчевими
  • Внесення змін в документ
    • createTextNode проти innerHTML проти textContent
    • Очистіть елемент
    • Чому "aaa" залишається?
    • Створіть список
    • Створіть дерево з об’єкту
    • Показати нащадків в дереві
    • Створіть календар
    • Розфарбуйте годиник за допомогою setInterval
    • Вставте HTML в список
    • Відсортуйте таблицю
  • Стилі та класи
    • Створити сповіщення
  • Розмір і прокрутка елемента
    • Що прокрутиться від низу?
    • Яка ширина смуги прокрутки?
    • Помістіть м'яч у центр поля
    • Відмінності: CSS ширина проти clientWidth
  • Розміри вікна і прокрутка
  • Координати
    • Знайти координати поля відносно вікна
    • Покажіть примітку біля елемента
    • Покажіть примітку біля елемента (абсолютне позиціювання)
    • Розташуйте примітку всередині елемента (абсолютне позиціювання)
• Вступ до подій
  • Вступ до подій браузера
    • Приховати елемент після натискання кнопки
    • Сховати себе
    • Який обробник запуститься?
    • Пересуньте м’яч по полю
    • Створіть меню, що розкривається
    • Додати кнопку закриття
    • Карусель
  • Бульбашковий механізм (спливання та занурення)
  • Делегування подій
    • Приховайте повідомлення за допомогою делегування
    • Деревоподібне меню
    • Sortable table
    • Поведінка підказки
  • Типові дії браузера
    • Чому "return false" не працює?
    • Зловіть посилання
    • Галерея зображень
  • Запуск користувацьких подій
• Події інтерфейсу
  • Події миші
    • Список для виділення
  • Переміщення миші: mouseover/out, mouseenter/leave
    • Покращена поведінка спливаючої підказки
    • "Розумна" підказка
  • Drag'n'Drop з подіями миші
    • Слайдер
    • Розставте супергероїв полем
  • Події вказівника
  • Клавіатура: keydown та keyup
    • Розширені комбінації гарячих клавіш
  • Прокрутка
    • Нескінченна сторінка
    • Кнопка вгору/вниз
    • Завантаження видимих зображень
• Форми та інтерактивні елементи
  • Властивості та методи форми
    • Додайте нову опцію до елемента `<select>`
  • Фокусування: focus/blur
    • div, який можна відредагувати
    • Редагувати TD по кліку
    • Миша, керована з клавіатури
  • Події: change, input, cut, copy, paste
    • Калькулятор депозиту
  • Форми: подія та метод submit
    • Модальна форма
• Завантаження документа і ресурсів
  • Сторінка: DOMContentLoaded, load, beforeunload, unload
  • Скрипти: async, defer
  • Завантаження ресурсів: onload та onerror
    • Завантажте зображення з колбеком
• Різне
  • Mutation Observer (спостерігач за мутаціями)
  • Selection і Range
  • Цикл подій (event loop): мікрозавдання (microtasks) та макрозавдання (macrotasks)
    • Що буде результатом цього коду?

Додаткові статті

• Frames and windows
  • Спливаючі вікна та методи window
  • Міжвіконна комунікація
  • Clickjacking атака
• Binary data, files
  • ArrayBuffer, бінарні масиви
    • Concatenate typed arrays
  • TextDecoder та TextEncoder
  • Blob
  • File та FileReader
• Network requests
  • Fetch
    • Отримати користувачів з GitHub
  • FormData
  • Fetch: Хід завантаження
  • Fetch: Переривання
  • Fetch: Запити між різними джерелами
    • Навіщо нам Origin?
  • Fetch API
  • URL об’єкти
  • XMLHttpRequest
  • Відновлюване завантаження файлу
  • Тривале опитування
  • WebSocket
  • Server Sent Events
• Зберігання даних у браузері
  • Файли cookies, document.cookie
  • LocalStorage, sessionStorage
    • Автозбереження поля форми
  • IndexedDB
• Animation
  • Крива Безьє
  • CSS-анімації
    • Animate a plane (CSS)
    • Animate the flying plane (CSS)
    • Анімований круг
    • Коло анімоване за допомогою функції.
  • JavaScript-анімації
    • Animate the bouncing ball
    • Animate the ball bouncing to the right
• Веб компоненти
  • З висоти орбітального польоту
  • Кастомні елементи
    • Елемент таймера в режимі реального часу
  • Тіньовий DOM (Shadow DOM)
  • Елемент template
  • Слоти тіньового DOM, композиція
  • Стилізація тіньового DOM
  • Тіньовий DOM та події
• Регулярні вирази
  • Вступ: шаблони та прапори
  • Символьні класи
  • Юнікод: прапорець "u" та клас \p{...}
  • Якорі: початок рядка ^ і кінець $
    • Регулярний вираз ^$
  • Багаторядковий режим якорів ^ $, прапора "m"
  • Межа слова: \b
    • Знайдіть час
  • Екранування, спеціальні символи
  • Набори та діапазони [...]
    • Java[^script]
    • Знайдіть часовий формат hh:mm або hh-mm
  • Квантифікатори +, *, ? та {n}
    • Як знайти розділовий знак три крапки "..." ?
    • Регулярний вираз для кольорів в HTML
  • Жадібні та ліниві квантифікатори
    • Збіг для /d+? d+?/
    • Знайти HTML коментарі
    • Знайти HTML теги
  • Групи захоплення
    • Перевірити MAC-адресу
    • Знайти колір у форматі #abc або #abcdef
    • Знайти всі числа
    • Розберіть вираз
  • Зворотні посилання в шаблоні: \N і \k<ім’я>
  • Альтернація (АБО) |
    • Знайдіть мову програмування
    • Знайдіть пари ВВ-тегів
    • Знайдіть рядки у лапках
    • Знайдіть цілий тег
  • Перевірка уперед та назад
    • Знайдіть цілі невід'ємні числа
    • Вставка після Head
  • Катастрофічний пошук з поверненням
  • Липкий прапорець "y", пошук на заданій позиції
  • Методи регулярних виразів та рядків