Как только вы познакомились с HTML и CSS, самое время перейти к изучению JavaScript (сокращенно JS).
JavaScript - это полноценный язык программирования, который применяется к HTML документу, и обеспечивает динамику и интерактивность на веб-сайтах. Был разработан в 1995 году Брэнданом Эйхом.
С помощью JS вы можете создавать слайдеры фотографий, модальные окна, валидацию форм, галереи изображений, выпадающие меню, подсказки и многое другое.
Используя JS фреймворки (React, Vue.js или Angular) вы сможете создавать SPA (Single Page Application - одностраничное приложение) или PWA (Progressive Web App - прогрессивное веб приложение).
Node.js позволяет использовать язык JavaScript на серверной части (back-end).
Другие варианты применения JS:
- прикладное ПО для телевизионных приставок
- embedded programming
- программирование роботов
- нативные и гибридные приложения для мобильных платформ
- приложения для Windows
- программирование терминалов оплаты
- программирование игр на платформе Unity
Что такое ECMAScript?
JavaScript создавался как скриптовый язык для Netscape. После чего он был отправлен в ECMA International для стандартизации (ECMA — это ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий). Это привело к появлению нового языкового стандарта, известного как ECMAScript.
Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта. На данный момент самая популярная версия.
ES — это сокращение для ECMAScript. Каждое издание ECMAScript получает аббревиатуру ES с последующим его номером. Всего существует 8 версий ECMAScript.
ES1 была выпущена в июне 1997 года, ES2 — в июне 1998 года, ES3 — в декабре 1999 года, а версия ES4 — так и не была принята. Не будем углубляться в эти версии, так как они морально устарели, а рассмотрим только последние четыре.
ES5 был выпущен в декабре 2009 года, спустя 10 лет после выхода третьего издания. Среди изменений можно отметить:
- поддержку строгого режима (strict mode);
- аксессоры getters и setters;
- возможность использовать зарезервированные слова в качестве ключей свойств и ставить запятые в конце массива;
- многострочные строковые литералы;
- новую функциональность в стандартной библиотеке;
- поддержку JSON.
Версия ES6/ES2015 вышла в июне 2015 года. Это также принесло некую путаницу в связи с названием пакета, ведь ES6 и ES2015 — это одно и то же. С выходом этого пакета обновлений комитет принял решение перейти к ежегодным обновлениям. Поэтому издание было переименовано в ES2015, чтобы отражать год релиза. Последующие версии также называются в соответствии с годом их выпуска. В этом обновлении были сделаны следующие изменения:
- добавлено деструктурирующее присваивание;
- добавлены стрелочные функции;
- в шаблонных строках можно объявлять строки с помощью ` (обратных кавычек). Шаблонные строки могут быть многострочными, также могут интерполироваться;
- let и const — альтернативы var для объявления переменных. Добавлена «временная мертвая зона»;
- итератор и протокол итерации теперь определяют способ перебора любого объекта, а не только массивов. Symbol используется для присвоения итератора к любому объекту;
- добавлены функции-генераторы. Они используют yield для создания последовательности элементов. Функции-генераторы могут использовать yield* для делегирования в другую функцию генератора, кроме этого они могут возвращать объект генератора, который реализует оба протокола;
- добавлены промисы.
ES2016 (ES7) вышла в июне 2016 года. Среди изменений в этой версии ECMAScript можно отметить:
- оператор возведения в степень **;
- метод Array.prototype.includes, который проверяет, содержится ли переданный аргумент в массиве.
Спустя еще год выходит версия ES2017 (ES8). Данный стандарт получил следующие изменения:
- асинхронность теперь официально поддерживается (async/await);
- «висячие» запятые в параметрах функций. Добавлена возможность ставить запятые в конце списка аргументов функций;
- добавлено два новых метода для работы со строками: padStart() и padEnd(). Метод padStart() подставляет дополнительные символы слева, перед началом строки. А padEnd(), в свою очередь, справа, после конца строки;
- добавлена функция Object.getOwnPropertyDescriptors(), которая возвращает массив с дескрипторами всех собственных свойств объекта;
- добавлено разделение памяти и объект Atomics.
На данный момент самой популярной и поддерживаемой многими браузерами является ES6.
Где изучать JavaScript?
На мой взгляд, самым лучшим ресурсом на русском языке для изучения JS является javascript.ru
Не лишним будет посетить developer.mozilla.org
Для начинающих также могу посоветовать code-basics.ru
Уже знакомый вам по изучению CSS канал на Youtube Sorax.
Для владеющих английским языком посоветую следующие ресурсы:
Уже знакомый нам freecodecamp.org
Прекрасно подойдет eloquentjavascript.net
Jquery
jQuery это популярная библиотека JavaScript. Она была создана Джоном Резигом в 2006 году с целью облегчить разработчикам использование JavaScript на веб-сайтах. С jQuery вы будете делать намного больше с меньшими затратами.
Написание кода может стать утомительным, особенно если в него включено много строк. jQuery сжимает несколько строк кода в одну функцию, поэтому вам не нужно переписывать целые блоки кода для выполнения одной задачи.
Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.
Что такое JS-framework и зачем он нужен?
JS-framework — это инструменты для построения динамических веб/мобильных/настольных приложений на языке Javascript. Как и к любым другим инструментам,
разработчики прибегают к использованию js-фреймворков там, где невозможно/очень сложно/очень долго выполнять задачу обычными средствами. В подавляющем большинстве случаев, фреймворки используются для написания, так называемых, Single Page Applications. Т.е. все, что проиходит на сайте, проиходит на одной страничке, без прямого перехода с нее.
С их помощью можно разрабатывать как полноценные сайты, так и функциональные модули (различные онлайн-инструменты). Конечно, полноценные фреймворки лучше подходят для первой задачи, а для второй рекомендуется использовать более легковесные фреймворки или библиотеки.
Давайте сначала немного поговорим именно о фреймворках. Они предоставляют четкую структуру приложения и реализуются с использованием так называемых «паттернов проектирования» (понятие перекочевавшее больше из бэкенда, но явно имеющее место во фронтенд разработке с использованием js-фреймворков). Наиболее широко рапространены следующие паттерны: MVC (Model-View-Controller), MVP (Model-View-Presenter) и MVVM (Model-View-ViewModel). В интернете имеется огромное количество информации, подробно описывающее каждый из них, и раскрытие этой темы не является основной задачей статьи, потому кому будет интересно — может самостоятельно ознакомиться с этими понятиями.
Преимущества построения приложения на JS-фреймворке:
- можно легко реализовать SPA (Single Page Application);
- использование js-фреймворка обязывает нас иметь структуру приложения (скажем решительное «нет» спагетти-коду);
- кода становится заметно меньше и он чище, что позитивно отражается на скорости разработки, а также поддержке и устранении ошибок в коде приложения;
- наличие структуры подразумевает модульность приложения, а это дает возможность проще работать над приложением нескольким разработчикам одновременно;
- следующее преимущество больше вытекает из использования самого javascript, но значительно усиливается при использовании фреймворка: возможность быстро создать мобильное и/или настольное кроссплатформенное приложение из веб-версии с помощью систем типа PhoneGap или Apache Cordova.
Из существенных недостатков можно выделить только временно неполную поддержку поисковыми системами, но эта задача редко совпадает с задачей по реализации SPA (Single Page Application), тем более, что ведущие поисковые системы (как минимум, Google), уже практически полностью решили эту проблему.
На данный момент наиболее популярными фреймворками являются:
React
React — это эффективная и гибкая декларативная библиотека JavaScript для сборки UI от команды Facebook. Она позволяет без усилий создавать интерактивный пользовательский интерфейс. React не просто поддерживает сборку объектно-центричных приложений — он ее поощряет. Кроме того, создатели фреймворка со всей серьезностью отнеслись к обратной совместимости, так что в долговечности своего приложения можете быть уверены. По графику выше хорошо видно, что за последние несколько лет уровень осведомленности о React значительно повысился. Вот почему библиотека станет отличной отправной точкой вашего путешествия во фронтенд-разработку.
Vue.js
Vue.js, прогрессивный фреймворк для сборки пользовательских интерфейсов, созданный Эваном Ю и еще 234 энтузиастами, набрал больше 121 тысячи звезд на GitHub. Он включает доступную корневую библиотеку, которая в первую очередь решает задачи уровня представления, и экосистему дополнительных библиотек, позволяющую создавать сложные и объемные одностраничные приложения (Single-Page Applications).
Angular
Angular — фреймворк от компании Google, получивший почти 44 тысячи звезд на GitHub. Представляет собой платформу, упрощающую сборку приложений в веб. В Angular сочетаются декларативные шаблоны, внедрение зависимости, двустороннее связывание данных и лучшие практики решения проблем разработки. Эта платформа позволяет собирать приложения для веб, мобильных устройств и настольных ПК. В ней предлагается самый удобный и понятный для начинающих интерфейс командной строки (CLI) и даже консоль (Console) — клиент с графическим интерфейсом.
Фреймворки стоит изучать после освоения нативного JavaScript. Подробнее, о каждом из вышеперечисленных фреймворков, я поговорю в дальнейшем, в отдельных публикациях.
