◐ Shell
Open
reader mode
source ↗
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-калькулятор
Каррінг
Посилальний тип
Перевірка синтаксису
Поясніть значення "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", пошук на заданій позиції
Методи регулярних виразів та рядків