Современный учебник JavaScript

Перед вами учебник по JavaScript, начиная с основ, включающий в себя DOM, замыкания, ООП, тонкости и фишки. Правильный, современный. Хорошего чтения.

Часть 1. Базовый JS.

Основные "кирпичики" JavaScript, необходимые, чтобы что-то делать.

• Общая информация
  • Введение в JavaScript
  • Альтернативные технологии
  • Терминология, справочники, спецификации
• Основы JavaScript
  • Настройка рабочего места
  • Установка и настройка браузеров
  • Привет, мир!
    • ✔ Alert
  • Структура кода
  • Переменные и типы данных
    • ✔ Работа с переменными
    • ✔ Объявление переменных
  • Взаимодействие с пользователем: alert, prompt, confirm
    • ✔ Простая страница
  • Основные операторы
    • ✔ Инкремент и декремент, примеры
    • ✔ Результат присваивания
  • Операторы сравнения и логические значения
  • Условные операторы: if, '?'
    • ✔ if ("0")
    • ✔ Получить знак числа
    • ✔ Проверка логина
    • ✔ Перепишите 'if' в '?'
    • ✔ Перепишите 'if..else' в '?'
  • Логические операторы
    • ✔ Проверка if внутри диапазона
    • ✔ Проверка if вне диапазона
    • ✔ Вопрос про "if"
  • Циклы
    • Циклы while, for
      • ✔ Последнее значение цикла
      • ✔ Какие значения i выведет цикл while?
      • ✔ Какие значения i выведет цикл for?
      • ✔ Замените for на while
      • ✔ Повторять цикл, пока ввод неверен
    • Директивы 'break' и 'continue'
      • ✔ Вывести простые числа
  • Конструкция 'switch'
    • ✔ Переписать if'ы в switch
  • Функции
    • ✔ Перепишите функцию, используя оператор '?' или '||'
    • ✔ Функция min
    • ✔ Функция pow(x,n)
  • Рекурсия
    • ✔ Вычислить сумму чисел до данного
    • ✔ Вычислить факториал
    • ✔ Числа фибоначчи
  • Методы и свойства
  • Стиль кода
    • ✔ Ошибки в стиле
  • Как писать неподдерживаемый код?
• Пишем на JavaScript
  • Строки
    • ✔ Сделать первый символ заглавным
    • ✔ Проверьте спам
    • ✔ Усечение строки
  • Числа
    • ✔ Интерфейс sum
    • ✔ Сложение цен
    • ✔ Бесконечный цикл по ошибке
    • ✔ Случайное из интервала (0, b)
    • ✔ Случайное из интервала (a, b)
    • ✔ Случайное целое от min до max
  • Особенности функций в JavaScript
  • Именованные функциональные выражения
    • ✔ Проверка на NFE
    • ✔ Перезапись NFE по имени
  • Объекты
    • ✔ Первый объект
    • ✔ multiplyNumeric
    • ✔ Создайте калькулятор
    • ✔ Цепочка вызовов
    • ✔ Создать Summator при помощи конструктора
    • ✔ Создать Adder при помощи конструктора
  • Массивы: введение
    • ✔ Получить последний элемент массива
    • ✔ Добавить новый элемент в массив
    • ✔ Создание массива
    • ✔ Получить случайное значение из массива
    • ✔ Создайте калькулятор для нескольких значений
    • ✔ Поиск в массиве
    • ✔ Фильтр элементов 1
    • ✔ Фильтрация через функцию
    • ✔ Решето Эратосфена
    • ✔ Подмассив наибольшей суммы
  • Массивы: методы
    • ✔ Добавить класс в строку
    • ✔ Перевести текст вида border-left-width в borderLeftWidth
    • ✔ Функция removeClass
    • ✔ Фильтрация массива "на месте"
    • ✔ Сортировать в обратном порядке
    • ✔ Сортировать, четные вперед
    • ✔ Случайный порядок в массиве
    • ✔ Сортировка объектов
    • ✔ Массив частичных сумм
  • Дата и Время
    • ✔ Создайте дату
    • ✔ Имя дня недели
    • ✔ День недели в европейской нумерации
    • ✔ День 100 дней назад
    • ✔ Сколько секунд - до завтра?
    • ✔ Вывести текущую дату
    • ✔ Относительное форматирование даты
  • Преобразование типов, toString и valueOf
    • ✔ ['x'] == 'x'
    • ✔ Почему [] == [] неверно, а [ ] == ![ ] верно?
    • ✔ Вопросник по преобразованиям
  • Динамический "this"
    • ✔ Проверка синтаксиса
    • ✔ Вызов в контексте массива
  • Типы данных: получение и проверка
    • ✔ Полиморфная функция outputDate
    • ✔ Как будет работать isObject(undefined)?
• Функции, замыкания
  • Аргументы функций
    • ✔ Проверка на аргумент-undefined
  • Статические переменные и фабричные методы
    • ✔ Счетчик объектов
  • Функции "изнутри", замыкания
    • ✔ Window и переменная
    • ✔ Window и переменная 2
    • ✔ Window и переменная 3
    • ✔ Функция и переменная
    • ✔ вопрос по var
    • ✔ var window
    • ✔ Вызов "на месте"
  • Использование замыканий
    • ✔ Создать счетчик со статической переменной
    • ✔ Сумма через замыкание
    • ✔ Функция - строковый буфер
    • ✔ Сумма произвольного количества скобок
    • ✔ Перекрытие переменной
    • ✔ Армия функций
  • Инструкция "with"
    • ✔ With + функция
    • ✔ With + переменные
  • Декораторы
    • ✔ Логирующий декоратор (1 аргумент)
    • ✔ Логирующий декоратор (много аргументов)
    • ✔ Кеширующий декоратор
• Дополнительные темы
  • Запуск кода из строки "eval"
    • ✔ Eval-калькулятор
  • Исключения
    • ✔ Eval-калькулятор с ошибками
  • Таймеры: "setTimeout" и "setInterval"
    • ✔ Функция-задержка
    • ✔ Отбивка
    • ✔ Тормозилка
  • Привязка функции к объекту и карринг: "bind/bindLate"
  • Тест: повторение тонких мест
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник
    • ✔ JS-вопросник

---

Часть 2. Документ, события, интерфейсы

Учимся работать с интерфейсом и посетителем.

• CSS для JavaScript-разработчика
  • О чём пойдёт речь
  • Единицы измерения "px", "em", "%" и другие
    • ✔ Масштабируемый компонент
  • Свойства "font-size" и "line-height"
    • ✔ Отступ размером со строку
  • Свойство "outline"
  • Свойство "box-sizing"
  • Свойство "margin"
    • ✔ Расположить текст внутри INPUT
  • Свойство "display"
  • Лишнее место под IMG
  • Свойство "float"
    • ✔ Разница inline-block и float
    • ✔ Дерево с многострочными узлами
    • ✔ Постраничная навигация (CSS)
    • ✔ Добавить рамку, сохранив ширину
  • Свойство "overflow"
  • Свойство "position"
    • ✔ Модальное окно
  • Особенности "height" в процентах
  • CSS без IE6
  • CSS-спрайты
  • Техники центрирования
    • ✔ Поместите мяч в центр поля (CSS)
    • ✔ Форма + модальное окно
    • ✔ vertical-align + table-cell + position = ?
  • Семантическая вёрстка виджетов
• Документ
  • Окружение: DOM, BOM и JS
  • Полезные браузерные объекты
  • DOM-элементы и их свойства
    • Дерево DOM
    • Навигация в DOM, свойства-ссылки
      • ✔ DOM children
      • ✔ Проверка существования детей
      • ✔ Вопрос по навигационным ссылкам
      • ✔ Найти следующий элемент
    • Основные свойства: тип, тег и содержимое узла
      • ✔ В инлайн скрипте lastChild.nodeType
      • ✔ Каким будет результат?
    • Атрибуты и пользовательские свойства
      • ✔ Получите пользовательский атрибут
    • Интерактивное путешествие по DOM
    • Добавление и удаление узлов
      • ✔ createTextNode vs innerHTML
      • ✔ Удаление элементов
      • ✔ insertAfter
      • ✔ removeChildren
      • ✔ Создать список
      • ✔ Создайте дерево из объекта
      • ✔ Создать календарь в виде таблицы
    • Мультивставка: "insertAdjacentHTML" и "DocumentFragment"
      • ✔ Вставка insertAdjacentHTML/DocumentFragment
    • document.write
      • ✔ Загрузите скрипт с передачей разрешения экрана
    • Поиск элементов в DOM
      • ✔ Длина коллекции после удаления элементов
      • ✔ Поиск элементов
      • ✔ Проверка находится ли элемент внутри другого
      • ✔ Дерево
      • ✔ Сравнение количества элементов
      • ✔ Бенчмаркинг методов поиска в DOM
  • Внешний вид и местоположение элементов
    • Стили и классы, getComputedStyle
      • ✔ Поставьте класс ссылкам
      • ✔ Скругленая кнопка со стилями из JavaScript
    • Размеры и прокрутка элементов
      • ✔ Узнать ширину полосы прокрутки
      • ✔ Подменить div с таким же размером
      • ✔ Поместите мяч в центр поля
      • ✔ Расширить элемент
      • ✔ В чём отличие "width" и "clientWidth" ?
    • Размеры и прокрутка для страницы
    • Координаты
• События и интерфейсы
  • События: основы
    • Введение в браузерные события
      • ✔ Спрятать при клике
      • ✔ Спрятаться
      • ✔ Раскрывающееся меню
      • ✔ Спрятать сообщение
      • ✔ Карусель
    • Получение объекта события
    • Всплытие и перехват
    • Действия браузера по умолчанию
    • Отмена выделения, невыделяемые элементы
    • Делегирование событий
      • ✔ Скрытие сообщения с помощью делегирования
      • ✔ Раскрывающееся дерево
      • ✔ Галерея изображений
      • ✔ Поймайте переход по ссылке
      • ✔ Сортировка таблицы
      • ✔ Функция делегирования
  • События мыши
    • Введение: клики, кнопка, координаты
      • ✔ Список с выделением
      • ✔ Дерево: проверка клика на заголовке
    • События движения: "mouseover/out/move/leave/enter"
      • ✔ Выделение кнопки при заходе и клике
    • Колёсико мыши: "mousewheel"
    • Устранение IE-несовместимостей: "fixEvent"
  • Основы Drag'n'Drop
    • ✔ Слайдер
  • Drag'n'Drop объектов
  • События клавиатуры
    • ✔ Поле только для цифр
    • ✔ Отследить одновременное нажатие
  • Формы
    • Навигация по формам
    • Свойства элементов
      • ✔ Добавьте опцию к селекту
      • ✔ Валидация формы
    • События "change", "input", "propertychange"
      • ✔ Автовычисление процентов по вкладу
    • Метод и событие "submit"
      • ✔ Свой "prompt"
    • События и методы "focus/blur"
      • ✔ Плейсхолдер
      • ✔ Мышонок на "клавиатурном" приводе
      • ✔ Поле, предупреждающее о включенном CapsLock
      • ✔ Горячие клавиши
      • ✔ Красивый плейсхолдер для INPUT
  • Поток выполнения, вложенные события
  • Событие "onscroll"
    • ✔ Аватар наверху при прокрутке
    • ✔ Кнопка вверх-вниз
    • ✔ Загрузка видимых изображений
  • События "onload", "onbeforeunload" и "onerror"
    • ✔ Красивый "ALT"
    • ✔ Загрузить изображения с коллбэком
    • ✔ Скрипт с коллбэком
    • ✔ Скрипты с коллбэком
  • Событие загрузки документа "onDOMContentLoaded"
  • JS-Анимация
    • ✔ Анимируйте карусель
    • ✔ Анимировать лого
    • ✔ Анимируйте мяч
    • ✔ Анимируйте падение мяча с отскоками вправо
  • CSS-анимация
    • ✔ Анимировать лого (CSS)
• Основы ООП
  • Смысл и применимость ООП
  • Внутренний и внешний интерфейс
    • ✔ Добавить публичные методы к меню
    • ✔ Создайте графический компонент: голосовалку
• Практика создания виджетов
  • Свои события, подписка-уведомление
    • ✔ Голосовалка "на событиях"
  • Шаблонизация
    • ✔ Шаблон для таблицы с пользователями
  • Правила создания виджетов
  • Практика, практика, практика!
    • ✔ Подсказка над элементом
    • ✔ Подсказка, следующая за курсором
    • ✔ Менять размер картинки при помощи мыши
    • ✔ Выбор фрагмента картинки мышью
    • ✔ Меню с анимированным раскрытием
    • ✔ Слайдер (компонент)
    • ✔ Переносимые окна
    • ✔ Переносимые окна 2
    • ✔ Селектор даты
    • ✔ Календарь
    • ✔ Двойной календарь со стрелками

---

Часть 3. Паттерны разработки

Строим из кирпичиков дома.

• Наследование
  • Прототипное наследование
    • ✔ Прототип после создания
    • ✔ Изменяем прототип после создания
    • ✔ Аргументы по умолчанию
  • Прототипы встроенных объектов
  • Свойство "constructor"
    • ✔ Создать объект тем же конструктором
  • Оператор "instanceof"
  • Наследование на "классах"
    • ✔ Хомяки с __proto__
  • Функциональный паттерн наследования
    • ✔ Добавить цвет в голосовалку
    • ✔ Добавить двойной голос в голосовалку
  • Функциональный паттерн без "new"
  • Обобщение и сравнение паттернов
• Паттерны для ООП
  • Универсальная ООП-обёртка
  • Примеси: статические и динамические
  • Расширение через плагины [в работе]
  • Компонентная архитектура [в работе]
    • ✔ Таблица с редактируемыми ячейками и меню
• Ура, я знаю JavaScript!
  • Что изучать дальше

---

Часть 4. Дополнительно

• Оптимизация
  • Управление памятью в браузере
  • Утечки памяти
  • Оптимизация положения скриптов, async, defer [в работе]
    • ✔ Кролики оффлайн
• Разное
  • Мини-библиотека функций учебника
  • Выделение: Range, TextRange и Selection
  • Побитовые операторы
  • Применяем ООП: Drag'n'Drop++
    • ✔ Реализуйте drag'n'drop картинок в контейнер
  • Свойство dataSet для data-* атрибутов
  • Кривые Безье
  • Хорошие книги
  • Внутри браузера: getElementsBy и querySelector

---

Часть 5. Неоконченные главы

• Окна и Фреймы (англ, кто б перевёл)
  • Popup windows
  • Browser window properties and methods
  • Focus/blur methods and events
  • Frames and iframes
  • The "Same Origin" security policy
  • Cross-window messaging with postMessage
  • The Clickjacking attack, X-Frame-Options
• Регулярные выражения [в работе]
  • Введение
  • Символьные классы
    • ✔ Найдите время
  • Специальные символы
  • Флаги
  • Наборы и диапазоны символов
    • ✔ Java[^script]
    • ✔ Найдите время
  • Цифровые квантификаторы
    • ✔ Регулярное выражение для цвета
  • Quantifiers +, * and ?
    • ✔ Find all numbers with decimal point
    • ✔ Find all numbers including decimal point
  • Greedy and Lazy
    • ✔ Difference "[^"]*" and ".*?"
    • ✔ Find HTML comments
    • ✔ Opening HTML tag with attributes
  • Ahchors and multiline mode
    • ✔ ^$
  • Word boundary
  • Infinite backtracking problem
    • ✔ Fix slow regexp
  • Groups
    • ✔ Regexp for web color #abc #abcdef
    • ✔ Parse an expression
    • ✔ Matching tags
  • Alternation
    • ✔ Match languages
    • ✔ Test a clanned nick
    • ✔ Match a string with quotes
  • Regular expressions methods
  • Practice
    • ✔ Replace <img..> with <img../>
    • ✔ Replace optionally invalid tags