Показать задачи

Язык JavaScript

• Введение
  • Введение в JavaScript
  • Справочники и спецификации
  • Редакторы кода
  • Консоль разработчика
• Основы JavaScript
  • Привет, мир!
    • Вызвать alert
    • Покажите сообщение с помощью внешнего скрипта
  • Структура кода
  • Строгий режим — "use strict"
  • Переменные
    • Работа с переменными
    • Придумайте правильные имена
    • Какие буквы (заглавные или строчные) использовать для имён констант?
  • Типы данных
    • Шаблонные строки
  • Взаимодействие: alert, prompt, confirm
    • Простая страница
  • Преобразование типов
  • Базовые операторы, математика
    • Постфиксная и префиксная формы
    • Результат присваивания
    • Преобразование типов
    • Исправьте сложение
  • Операторы сравнения
    • Операторы сравнения
  • Условное ветвление: if, '?'
    • if (строка с нулём)
    • Название JavaScript
    • Покажите знак числа
    • Перепишите 'if' в '?'
    • Перепишите 'if..else' в '?'
  • Логические операторы
    • Что выведет alert (ИЛИ)?
    • Что выведет alert (ИЛИ)?
    • Что выведет alert (И)?
    • Что выведет alert (И)?
    • Что выведет этот код?
    • Что выведет этот код (||=, &&=)?
    • Проверка значения из диапазона
    • Проверка значения вне диапазона
    • Вопрос об "if"
    • Проверка логина
  • Операторы нулевого слияния и присваивания: '??', '??='
  • Циклы while и for
    • Последнее значение цикла
    • Какие значения выведет цикл while?
    • Какие значения выведет цикл for?
    • Выведите чётные числа
    • Замените for на while
    • Повторять цикл, пока ввод неверен
    • Вывести простые числа
  • Конструкция "switch"
    • Напишите "if", аналогичный "switch"
    • Переписать условия "if" на "switch"
  • Функции
    • Обязателен ли "else"?
    • Перепишите функцию, используя оператор '?' или '||'
    • Функция min(a, b)
    • Функция pow(x,n)
  • Function Expression
  • Стрелочные функции, основы
    • Перепишите с использованием функции-стрелки
  • Особенности JavaScript
• Качество кода
  • Отладка в браузере
  • Советы по стилю кода
    • Плохой стиль
  • Комментарии
  • Ниндзя-код
  • Автоматическое тестирование c использованием фреймворка Mocha
    • Что не так с этим тестом?
  • Полифилы
• Объекты: основы
  • Объекты
    • Привет, object
    • Проверка на пустоту
    • Объекты-константы?
    • Сумма свойств объекта
    • Умножаем все числовые свойства на 2
  • Копирование объектов и ссылки
  • Сборка мусора
  • Методы объекта, "this"
    • Использование "this" в литерале объекта
    • Создайте калькулятор
    • Цепь вызовов
  • Конструктор, оператор "new"
    • Две функции - один объект
    • Создайте калькулятор при помощи конструктора, new Calculator
    • Создайте new Accumulator
  • Опциональная цепочка '?.'
  • Тип данных Symbol
  • Преобразование объектов в примитивы
• Типы данных
  • Методы примитивов
    • Можно ли добавить свойство строке?
  • Числа
    • Сумма пользовательских чисел
    • Почему 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
    • Тормозящий (throttling) декоратор
  • Привязка контекста к функции
    • Связанная функция как метод
    • Повторный bind
    • Свойство функции после bind
    • Исправьте функцию, теряющую "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
    • Перепишите, используя async/await
    • Вызовите async–функцию из "обычной"
• Генераторы, продвинутая итерация
  • Генераторы
    • Псевдослучайный генератор
  • Асинхронные итераторы и генераторы
• Модули
  • Модули, введение
  • Экспорт и импорт
  • Динамические импорты
• Разное
  • Proxy и Reflect
    • Ошибка при чтении несуществующего свойства
    • Получение элемента массива с отрицательной позиции
    • Observable
  • Eval: выполнение строки кода
    • Eval-калькулятор
  • Каррирование
  • Ссылочный тип
    • Проверка синтаксиса
    • Объясните значение "this"
  • Побитовые операторы
    • Побитовый оператор и значение
    • Проверка, целое ли число
    • Симметричны ли операции ^, |, &?
    • Почему результат разный?
  • BigInt
  • Юникод, внутреннее устройство строк
  • Intl: интернационализация в JavaScript
    • Отсортируйте массив с буквой ё
  • WeakRef и FinalizationRegistry

Браузер: документ, события, интерфейсы

• Документ
  • Браузерное окружение, спецификации
  • DOM-дерево
  • Навигация по DOM-элементам
    • Дочерние элементы в DOM
    • Вопрос о соседях
    • Выделите ячейки по диагонали
  • Поиск: getElement*, querySelector*
    • Поиск элементов
  • Свойства узлов: тип, тег и содержимое
    • Считаем потомков
    • Что содержит свойство nodeType?
    • Тег в комментарии
    • Где в DOM-иерархии "document"?
  • Атрибуты и свойства
    • Получите атрибут
    • Сделайте внешние ссылки оранжевыми
  • Изменение документа
    • createTextNode vs innerHTML vs textContent
    • Очистите элемент
    • Почему остаётся "aaa"?
    • Создайте список
    • Создайте дерево из объекта
    • Выведите список потомков в дереве
    • Создайте календарь в виде таблицы
    • Цветные часы с использованием setInterval
    • Вставьте HTML в список
    • Сортировка таблицы
  • Стили и классы
    • Создать уведомление
  • Размеры и прокрутка элементов
    • Найти размер прокрутки снизу
    • Узнать ширину полосы прокрутки
    • Поместите мяч в центр поля
    • В чём отличие CSS-свойств width и clientWidth
  • Размеры и прокрутка окна
  • Координаты
    • Найдите координаты точек относительно окна браузера
    • Покажите заметку рядом с элементом
    • Покажите заметку около элемента (абсолютное позиционирование)
    • Расположите заметку внутри элемента (абсолютное позиционирование)
• Введение в события
  • Введение в браузерные события
    • Скрыть элемент по нажатию кнопки
    • Спрятать себя
    • Какой обработчик запустится?
    • Передвиньте мяч по полю
    • Создать раскрывающееся меню
    • Добавить кнопку закрытия
    • Карусель
  • Всплытие и погружение
  • Делегирование событий
    • Спрячьте сообщения с помощью делегирования
    • Раскрывающееся дерево
    • Сортируемая таблица
    • Поведение "подсказка"
  • Действия браузера по умолчанию
    • Почему не работает return false?
    • Поймайте переход по ссылке
    • Галерея изображений
  • Генерация пользовательских событий
• Интерфейсные события
  • Основы событий мыши
    • Выделяемый список
  • Движение мыши: mouseover/out, mouseenter/leave
    • Улучшенная подсказка
    • "Умная" подсказка
  • Drag'n'Drop с событиями мыши
    • Слайдер
    • Расставить супергероев по полю
  • Клавиатура: keydown и keyup
    • Отследить одновременное нажатие
  • События указателя
  • Прокрутка
    • Бесконечная страница
    • Кнопка вверх/вниз
    • Загрузка видимых изображений
• Формы, элементы управления
  • Свойства и методы формы
    • Добавьте пункт к выпадающему списку
  • Фокусировка: focus/blur
    • Редактируемый div
    • Редактирование TD по клику
    • Мышь, управляемая клавиатурой
  • События: change, input, cut, copy, paste
    • Депозитный калькулятор
  • Отправка формы: событие и метод submit
    • Модальное диалоговое окно с формой
• Загрузка документа и ресурсов
  • Страница: DOMContentLoaded, load, beforeunload, unload
  • Скрипты: async, defer
  • Загрузка ресурсов: onload и onerror
    • Загрузите изображения с колбэком
• Разное
  • MutationObserver: наблюдатель за изменениями
  • Selection и Range
  • Событийный цикл: микрозадачи и макрозадачи
    • Что код выведет в консоли?
    • Что код выведет в консоли?

Тематические разделы

• Фреймы и окна
  • Открытие окон и методы window
  • Общение между окнами
  • Атака типа clickjacking
• Бинарные данные и файлы
  • ArrayBuffer, бинарные массивы
    • Соедините типизированные массивы
  • TextDecoder и TextEncoder
  • Blob
  • File и FileReader
• Сетевые запросы
  • Fetch
    • Получите данные о пользователях GitHub
  • FormData
  • Fetch: ход загрузки
  • Fetch: прерывание запроса
  • Fetch: запросы на другие сайты
    • Почему нам нужен Origin?
  • Fetch API
  • Объекты URL
  • XMLHttpRequest
  • Возобновляемая загрузка файлов
  • Длинные опросы
  • WebSocket
  • Server Sent Events
• Хранение данных в браузере
  • Куки, document.cookie
  • LocalStorage, sessionStorage
    • Автосохранение поля формы
  • IndexedDB
• Анимация
  • Кривые Безье
  • CSS-анимации
    • Анимировать самолёт (CSS)
    • Анимировать самолёт с перелётом (CSS)
    • Анимированный круг
    • Анимация круга с помощью колбэка
  • JavaScript-анимации
    • Анимируйте прыгающий мячик
    • Анимируйте мячик, прыгающий вправо
• Веб-компоненты
  • С орбитальной высоты
  • Пользовательские элементы (Custom Elements)
    • Элемент "живой таймер"
  • 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<имя>
  • Альтернация (или) |
    • Найдите языки программирования
    • Найдите пары BB-кодов
    • Найдите строки в кавычках
    • Найдите весь тег
  • Опережающие и ретроспективные проверки
    • Найдите неотрицательные целые
    • Вставьте после фрагмента
  • Катастрофический возврат
  • Поиск на заданной позиции, флаг "y"
  • Методы RegExp и String
• CSS для JavaScript-разработчика
  • О чём пойдёт речь
  • Единицы измерения: px, em, rem и другие
  • Все значения свойства display
  • Свойство float
    • Разница inline-block и float
    • Дерево с многострочными узлами
    • Постраничная навигация (CSS)
    • Добавить рамку, сохранив ширину
  • Свойство position
    • Модальное окно
  • Центрирование горизонтальное и вертикальное
    • Поместите мяч в центр поля (CSS)
    • Форма + модальное окно
    • vertical-align + table-cell + position = ?
  • Свойства font-size и line-height
  • Свойство white-space
  • Свойство outline
  • Свойство box-sizing
  • Свойство margin
    • Нерабочие margin?
    • Расположить текст внутри INPUT
  • Лишнее место под IMG
  • Свойство overflow
  • Особенности свойства height в %
  • Знаете ли вы селекторы?
    • Выберите элементы селектором
    • Отступ между элементами, размер одна строка
    • Отступ между парами, размером со строку
  • CSS-спрайты
  • Правила форматирования CSS