Изучаем javascript: Основы JavaScript

Содержание

изучаем JS с акцентом на практической составляющей / Хабр

aio350

22 фев 2021 в 15:11

Время на прочтение 3 мин

Количество просмотров

10K

Разработка веб-сайтов *JavaScript *Программирование *

Доброго времени суток, друзья!

Когда речь заходит об изучении JavaScript, будь то первое знакомство с языком или углубление имеющихся знаний, найти в «интернетах» теоретические материалы не составляет особого труда. Мой топ-5:

MDN Web Docs
«Современный учебник JavaScript» Ильи Кантора
«Вы не знаете JS» Кайла Симпсона
«JavaScript. Подробное руководство» Дэвида Флэнагана
«Learning JavaScript Design Patterns» by Addy Osmani

Однако, когда дело касается практических аспектов JavaScript, информацию приходится собирать буквально по крупицам.

Собственно, этим я и занимался на протяжении последних 4-5 месяцев.

Предлагаю вашему вниманию «Тотальный JavaScript».

Вот что вы найдете в этом репозитории:

Огромное количество сниппетов (утилит, вспомогательных функций), разделенных по типам данных — не могу назвать точного количества (порядка 4000 строк кода без комментариев и пробелов). Следует отметить, что не все функции являются настоящими сниппетами с точки зрения возможности их использования (как есть) в реальных приложениях, некоторые — всего лишь эксперименты, демонстирующие те или иные (безграничные?) возможности языка. Коллекция все время пополняется
230 практических вопросов — приводится пример кода, необходимо выполнить его в уме и решить, что будет выведено в консоль. Конечно, на практике мы редко занимается чем-то подобным, ведь гораздо легче и, главное, быстрее «законсолить» кусок «подозрительного» кода. Однако, на мой взгляд, умение решать подобные задачи как нельзя лучше демонстрирует понимание основных принципов и характерных особенностей работы JavaScript.
В качестве недостатка этого раздела отмечу почти полное отсутствие вопросов по классам и this. Постараюсь в ближайшем будущем его устранить
68 задач разного уровня сложности — подборка задач из учебника Ильи Кантора (большинство), немного адаптированных под нужды реальных приложений. Структура раздела, в основном, следует структуре учебника с небольшими лирическими отступлениями
Паттерны проектирования — подробное описание и примеры всех паттернов, которые называет Банда Четырех в своей книге «Паттерны объектно-ориентированного программирования», на JavaScript (также в разделе имеются примеры на TypeScript — смотрите исходный код). При подготовке данного раздела многое позаимствовано у Refactoring Guru, за что ему (или им) огромное спасибо

Что за черт, JavaScript? — список тонких моментов работы JavaScript. Этот раздел не слишком актуален, учитывая возможности современного JS, однако интересен тем, что позволяет узнать, каким был язык раньше, до того, как завоевал мир веб-разработки. Де факто, он остается прежним, но следование простым правилам (например, использование «const» или «let» вместо «var» или «===» вместо «==») позволяет решить большую часть проблем, с которыми сталкивались разработчики в прошлом

Уверен, что каждый найдет для себя что-нибудь интересное.

Также в репозитории имеется ссылка на приложение с вопросами (список и интерективная викторина) и задачами. Оно вполне работоспособное (и даже прогрессивное), но, признаюсь, нуждается в существенной переработке. Займусь этим, когда появится свободное время.

Как всегда, буду рад любой форме обратной связи. При обнаружении опечаток, ошибок, неточностей и, особенно, неработающего кода (код протестирован, но никто не застрахован от ошибок) не стесняйтесь писать в личку и делать «пуллы».

Благодарю за внимание. Всех, кому «дым отечества и сладок, и приятен», с наступающим праздником.

Теги:

javascript
snippets
task
problem
utils
helpers
patterns
education
learning
задачи
сниппеты
утилиты
изучение
образование

Хабы:

Разработка веб-сайтов
JavaScript
Программирование

Всего голосов 7: ↑6 и ↓1 +5

Комментарии 3

Igor Agapov @aio350

JavaScript Developer

Изучаем JavaScript с нуля.

С чего начать изучение?

JavaScript — популярный мультипарадигменный язык программирования, поддерживающий объектно-ориентированный, функциональный и императивный стили. Сегодня он широко применяется в браузерах в качестве языка сценариев для придания веб-страницам интерактивности. В этой статье мы поговорим о том, как изучить JavaScript и с чего лучше начать.

Несколько советов

Изучать JavaScript можно разными способами. Вы можете записаться на соответствующие платные курсы или приступить к изучению самостоятельно. Курсы позволят изучить язык быстрее, т. к. самостоятельное изучение требует очень высокой мотивации, настойчивости и дисциплинированности. Кроме того, самостоятельное обучение имеет тенденцию длиться долго, если не бесконечно. Тем не менее при наличии желания и возможности такой подход тоже имеет право на жизнь.

Какой бы путь вы не выбрали, помните, что прежде, чем начать изучение, желательно пройти курс или самостоятельно изучить основы HTML и CSS. Считается, что после этого изучать JavaScript будет проще.

Если выбрали самостоятельное изучение, обязательно составьте план. Не приступайте к занятиям в чересчур утомлённом виде, иначе вы станете себя заставлять, а это плохо. Также в процессе обучения используйте современные техники управления временем, например, известный метод помидора (25 минут занимаетесь, 5 минут отдыхаете). Есть и другие методики, позволяющие повысить продуктивность.

Изучаем основы

Всё начинается с основ. Так как язык очень популярен, найти о нём информацию в интернете будет несложно. Но в этом-то и проблема, так как информации настолько много, что в ней легко потеряться. Дабы сократить поле поиска, обычно рекомендуют следующий список ресурсов: 1. MDN’s JavaScript Guide — руководство, охватывающее синтаксис, циклы, типы, циклы, выражения, функции, форматирование и многое другое. 2. You Don’t Know JS — здесь вы найдёте серию книг Кайла Симпсона. В них есть информация, которая поможет изучить язык программирования JavaScript на более глубоком уровне.

3. Eloquent JavaScript — крутейшая книга о JavaScript, но её лучше читать, когда получены базовые знания. 4. Free Code Camp — профессиональное сообщество программистов, где можно участвовать в чемпионатах, получать сертификаты, создавать проекты. 5. CodeCademy — неплохая платформа для обучения через решение задач. Хороша для новичка.

К сожалению, все эти ресурсы рассчитаны на тех, кто хорошо знает английский язык. Впрочем, в IT без английского сегодня никуда. Если же вас интересуют бесплатные курсы на русском, неплохой выбор есть на платформе Stepic.org.

Во время получения базовых знаний вы приступите к разработке первых простых программ. Главное — не лениться, и вы быстро почувствуете, что кое-что понимаете в этом языке программирования. Таким образом вы получите дополнительную мотивацию к изучению.

Когда сталкиваетесь с непосильной для вас задачей, изучайте форумы или обращайтесь за помощью на платформу вопросов и ответов StackOverflow. Не стесняйтесь спрашивать, вы ведь учитесь.

Я освоил основы. Что дальше?

Достигнув определённых успехов, нужно продолжать изучение на углубленном уровне. Здесь помогут следующие книги: 1.Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript. В этой книге рассказано про 68 подходов по написанию кода, причём каждый подход сопровождается примерами. 2. JavaScript — The Good Parts — довольно устаревшая книга. Но несмотря на это, она до сих пор учит писать эффективный и красивый код. 3. JavaScript Design Patters — здесь рассказано о том, как использовать современные шаблоны. Книга написана простым языком. 4. Test-Driven JavaScript Development — пожалуй, одна из лучших работ по обучению тестированию JavaScript-кода.

Книги книгами, но без практики никуда, поэтому нужно учиться и практиковаться одновременно. Обязательно создайте свой аккаунт на GitHub, старайтесь ежедневно писать пусть даже простой код, делитесь проектами, изучайте отзывы.

Если в вашем городе случаются мастер-классы и конференции JavaScript-разработчиков, не пропускайте подобные встречи — они могут быть очень полезны.

Заключение

Изучение JavaScript – дело непростое, особенно если речь идёт о самостоятельном обучении. Но результат того стоит. При этом вам стоит понимать, что даже освоив этот язык программирования и устроившись на высокооплачиваемую работу, учиться вам придётся всегда — это необходимо, чтобы оставаться на плаву, ведь технологии постоянно меняются и обновляются. Как говорится, поток информации бесконечен, поэтому опытный разработчик учится постоянно. А чтобы ничего не пропустить, многие подписываются на специализированные издания типа JSK Daily, JavaScript World, Hashnode Times, Frontend Buzz, JavaScript Weekly.

Кроме того, всегда можно пойти на углубленные курсы для опытных разработчиков и перейти на более высокий профессиональный уровень. Сделать это вам поможет OTUS:

учебных онлайн-курсов по JavaScript | LinkedIn Learning, ранее Lynda.com

Все темы

Посмотрите наши обучающие видеоролики по JavaScript и научитесь программировать, создавать и создавать массивы и функции JavaScript. Узнайте, как писать код JavaScript для создания сайтов HTML5 и других интерактивных веб-сайтов.

Присоединяйся сейчас

Изучение JavaScript, 3-е издание [Книга]

Перейти к основному содержанию

Описание книги

Это захватывающее время для изучения JavaScript. Теперь, когда последняя спецификация JavaScript — ECMAScript 6.0 (ES6) — завершена, научиться разрабатывать высококачественные приложения на этом языке стало проще и приятнее, чем когда-либо. В этой практической книге программисты (как любители, так и профессионалы) знакомятся с ES6 без излишеств, а также с некоторыми соответствующими инструментами и методами.

Автор Итан Браун ( Веб-разработка с помощью Node и Express ) не только проведет вас через простые и понятные темы (переменные, поток управления, массивы), но также охватит сложные концепции, такие как функциональное и асинхронное программирование. Вы узнаете, как создавать мощные и отзывчивые веб-приложения на клиенте или с помощью Node.js на сервере.

Используйте ES6 уже сегодня и перекомпилируйте код в портативный ES5
Преобразуйте данные в формат, который может использовать JavaScript
Понимание основ использования и механики функций JavaScript
Изучение объектов и объектно-ориентированного программирования
Использование новых концепций, таких как итераторы, генераторы и прокси
Понимание сложностей асинхронного программирования
Работа с объектной моделью документа для браузерные приложения
Изучение основ Node. js для разработки серверных приложений

Содержание

Предисловие
1. Краткая история JavaScript
2. ES6
3. Для кого эта книга
4. Чем эта книга не является
5. Условные обозначения, используемые в этой книге
6. О’Рейли Сафари
7. Как с нами связаться
8. Благодарности
1. Ваше первое приложение
1. Когда начать
2. Инструменты
3. Комментарий к комментариям
4. Начиная
5. Консоль JavaScript
6. Рисование графических примитивов
7. Автоматизация повторяющихся задач
8. Обработка пользовательского ввода
9. Привет, мир
2. Разработка JavaScript
1. Предпосылки
  1. Корень вашего проекта
2. Что ты пытаешься сделать?
3. Узловые приложения
  1. Установка узла
  2. Запуск программ JavaScript с Node
  3. Управление пакетами: npm
4. Веб-приложения
5. Линтинг
6. Заключение
3. Литералы, переменные, константы и типы данных
1. Переменные и константы
2. Переменные или константы: что использовать?
3. Имена идентификаторов
4. Литералы
5. Примитивные типы и объекты
6. Числа
7. Струны
  1. Побег
8. Специальные символы
  1. Строки шаблона
  2. Многострочные строки
  3. Числа как строки
9. Булевы значения
10. Символы
11. нулевой и неопределенный
12. Объекты
13. Числовые, строковые и логические объекты
14. Массивы
15. Завершающие запятые в объектах и массивах
16. Даты
17. Обычные выражения
18. Карты и наборы
19. Преобразование типа данных
  1. Преобразование в числа
  2. Преобразование в строку
  3. Преобразование в логическое значение
20. Заключение
4. Управление потоком
1. Учебник по управлению потоком
  1. в то время как циклы
  2. Блочные операторы
  3. пробел
  4. Вспомогательные функции
  5. оператор if…else
  6. do…в то время как Цикл
  7. для цикла
  8. если Заявление
  9. Собираем все вместе
2. Операторы управления потоком в JavaScript
  1. Исключения потока управления
  2. Цепочка операторов if…else
  3. Метасинтаксис
  4. Дополнительно для циклических паттернов
  5. операторы переключения
  6. для. .. в цикле
  7. for… цикла
3. Полезные шаблоны потока управления
  1. Использование continue для сокращения условной вложенности
  2. Использование break или return, чтобы избежать ненужных вычислений
  3. Использование значения индекса после завершения цикла
  4. Использование индексов по убыванию при изменении списков
4. Заключение
5. Выражения и операторы
1. Операторы
2. Арифметические операторы
3. Приоритет оператора
4. Операторы сравнения
5. Сравнение чисел
6. Конкатенация строк
7. Логические операторы
  1. Истинные и ложные ценности
8. И, ИЛИ и НЕ
  1. Оценка короткого замыкания
  2. Логические операторы с небулевыми операндами
  3. Условный оператор
  4. Оператор запятой
9. Оператор группировки
  1. Побитовые операторы
  2. оператор typeof
  3. недействительный оператор
  4. Операторы присваивания
10. Присвоение деструктуризации
11. Операторы объектов и массивов
12. Выражения в строках шаблона
13. Выражения и шаблоны потока управления
  1. Преобразование операторов if. ..else в условные выражения
  2. Преобразование операторов if в сокращенные логические выражения ИЛИ
14. Заключение
6. Функции
1. Возвращаемые значения
2. Звонок или ссылка
3. Аргументы функции
  1. Делают ли аргументы функцию?
  2. Разрушающие аргументы
  3. Аргументы по умолчанию
4. Функции как свойства объектов
5. это ключевое слово
6. Функциональные выражения и анонимные функции
7. Обозначение стрелки
8. звоните, обращайтесь и связывайтесь
9. Заключение
7. Объем
1. Объем против существования
2. Лексическая и динамическая область видимости
3. Глобальный охват
4. Область блока
5. Маскировка переменных
6. Функции, замыкания и лексическая область видимости
7. Немедленно вызываемые функциональные выражения
8. Объем функций и подъем
9. Функция подъема
10. Временная мертвая зона
11. Строгий режим
12. Заключение
8. Массивы и обработка массивов
1. Обзор массивов
2. Управление содержимым массива
  1. Добавление или удаление отдельных элементов в начале или конце
  2. Добавление нескольких элементов в конце
  3. Получение подмассива
  4. Добавление или удаление элементов в любой позиции
  5. Вырезание и замена в массиве
  6. Заполнение массива определенным значением
  7. Реверсирование и сортировка массивов
3. Поиск массива
4. Основные операции с массивами: карта и фильтр
5. Магия массива: уменьшить
6. Методы массива и удаленные или никогда не определенные элементы
7. Соединение строк
8. Заключение
9. Объекты и объектно-ориентированное программирование
1. Перечисление свойств
  1. для … в
  2. Object.keys
2. Объектно-ориентированного программирования
  1. Создание класса и экземпляра
  2. Динамические свойства
  3. Классы — это функции
  4. Прототип
  5. Статические методы
  6. Наследование
  7. Полиморфизм
  8. Перечисление свойств объекта, новый взгляд
  9. Строковое представление
3. Множественное наследование, миксины и интерфейсы
4. Заключение
10. Карты и наборы
1. Карты
2. Слабые карты
3. Наборы
4. Слабые сеты
5. Отказ от объектной привычки
11. Исключения и обработка ошибок
1. Объект ошибки
2. Обработка исключений с помощью try and catch
3. Выбрасывание ошибок
4. Обработка исключений и стек вызовов
5. попробуй… поймай… наконец
6. Пусть исключения будут исключительными
12. Итераторы и генераторы
1. Протокол итерации
2. Генераторы
  1. Выражения yield и двусторонняя связь
  2. Генераторы и обратка
3. Заключение
13. Функции и сила абстрактного мышления
1. Функции как подпрограммы
2. Функции как подпрограммы, возвращающие значение
3. Функции как… Функции
4. Ну и что?
  1. Функции — это объекты
5. IIFE и асинхронный код
6. Функциональные переменные
  1. Функции в массиве
  2. Передать функцию в функцию
  3. Возврат функции из функции
7. Рекурсия
8. Заключение
14. Асинхронное программирование
1. Аналогия
2. Обратные вызовы
  1. setInterval и clearInterval
  2. Область действия и асинхронное выполнение
  3. Обратные вызовы с первой ошибкой
  4. Обратный ад
3. Обещания
  1. Создание обещаний
  2. Использование промисов
  3. События
  4. Цепочка обещаний
  5. Предотвращение невыполненных обещаний
4. Генераторы
  1. Шаг вперед и два шага назад?
  2. Не пишите свой собственный генератор запуска
  3. Обработка исключений в обработчиках генераторов
5. Заключение
15. Дата и время
1. Даты, часовые пояса, временные метки и эпоха Unix
2. Создание объектов даты
3. Момент.js
4. Практический подход к датам в JavaScript
5. Даты построения
  1. Создание дат на сервере
  2. Создание дат в браузере
6. Передача дат
7. Отображение дат
8. Компоненты даты
9. Сравнение дат
10. Дата Арифметика
11. Удобные относительные даты
12. Заключение
16. Математика
1. Форматирование чисел
  1. Фиксированные десятичные дроби
  2. Экспоненциальное обозначение
  3. Фиксированная точность
  4. Различные базы
  5. Расширенное форматирование чисел
2. Константы
3. Алгебраические функции
  1. Возведение в степень
  2. Логарифмические функции
  3. Разнообразный
  4. Генерация псевдослучайных чисел
4. Тригонометрические функции
5. Гиперболические функции
17. Регулярные выражения
1. Сопоставление и замена подстроки
2. Построение регулярных выражений
3. Поиск с помощью регулярных выражений
4. Замена регулярными выражениями
5. Входное потребление
6. Чередование
7. Соответствие HTML
8. Наборы символов
9. Именованные наборы символов
10. Повторение
11. Метасимвол точки и экранирование
  1. Настоящий подстановочный знак
12. Группировка
13. Ленивые совпадения, жадные совпадения
14. обратные ссылки
15. Замена групп
16. Замена функций
17. Анкеровка
18. Сопоставление границ слов
19. Прогнозы
20. Динамическое построение регулярных выражений
21. Заключение
18. JavaScript в браузере
1. Объектная модель документа
2. Немного терминологии дерева
3. DOM «Получить» методы
4. Запрос элементов DOM
5. Управление элементами DOM
6. Создание новых элементов DOM
7. Элементы стиля
8. Атрибуты данных
9. События
  1. Захват событий и всплытие
  2. Категории событий
10. Аякс
11. Заключение
19. Узел
1. Основы узла
2. Модули
3. Основные модули, файловые модули и модули npm
4. Настройка модулей с помощью функциональных модулей
5. Доступ к файловой системе
6. Процесс
7. Операционная система
8. Дочерние процессы
9. Потоки
10. Веб-серверы
11. Заключение
20. Конфигурация свойств объекта и прокси
1. Свойства аксессора: геттеры и сеттеры
2. Атрибуты свойств объекта
3. Защита объектов: замораживание, запечатывание и предотвращение расширения
4. Прокси
5. Заключение
21. Дополнительные ресурсы
1. Онлайн-документация
2. Периодика
3. Блоги и учебные пособия
4. Переполнение стека
5. Участие в проектах с открытым исходным кодом
6. Заключение
А. Терминал
B.