1.3. JavaScript. Начало программирования

И снова привет! Сегодняшняя тема — JavaScript. Прочитав название статьи, Вы можете задать вопрос — почему «Начало программирования», ведь до этого было изучение HTML и CSS, и была какая-никакая практика? И до ответа на этот вопрос Вы наверняка догадаетесь, если вспомните мои замечания в предыдущих статьях, или если я просто покажу Вам этот мем:

Да, именно так, HTML — не язык программирования, ровно как и CSS. HTML — язык гипертекстовой разметки (см. 1.1. HTML. Начало), а CSS — формальный язык описания внешнего вида документа (см. 1.2. CSS. Более подробно).

Может появиться и второй вопрос — зачем нужен JavaScript в web-разработке? Ответ — он нужен для реализации логики, вычислений и для расширения технических возможностей. И сейчас, по традиции, я подробно разъясню компактное высказывание.

Допустим, есть задача создать корзину в интернет-магазине, я сейчас не говорю о серверной части, где будет происходить процессинг (обработка) заказа, я имею в виду только клиентскую часть, то есть то, что будет выполняться на «фронте», то есть в браузере у пользователя. И сейчас порассуждаем, чем нам в этом сможет помочь JavaScript.

Например, мы хотим, чтобы при нажатии на кнопку «Добавить в корзину», произошло нечто, что зафиксировало бы где-то товар, с которым была ассоциирована эта кнопка, чтобы потом отобразить этот товар на странице корзины, где потом можно будет изменить количество товара (например, добавили товар «Кружка 404 Not Found», и в корзине увеличиваем количество с 1 на 2, т. е. в итоге в заказе будет два товара «Кружка 404 Not Found»), и увидеть итоговую сумму (количество товара умножаем на его стоимость).

Для решения этой задачи нам как раз и понадобится логика, вычисления и расширение технических возможностей, которые дает JavaScript:

1. Событие нажатия на кнопку «Добавить в корзину»
Обработка события нажатия на кнопку — это техническая возможность, предоставляемая JavaScript’ом. Т. е. можно написать код, который бы ждал нажатия на нужную кнопку, и как только пользователь бы на нее нажал, выполнилась бы функция, где была бы написана необходимая логика (реализацию которой обеспечивает JavaScript), выполняющая добавление товара в корзину.

2. Логика добавления товара в корзину
На странице, в рамках каких-то элементов (которые создались после выполнения HTML-кода, где они были описаны с помощью тегов) и каких-то их атрибутов, будет присутствовать информация о товаре, например как-то так:

 <span id="32" data-price="500">Кружка 404 Not Found</span>

Где «id» и «data-price» — это атрибуты, в которых хранятся id товара на сервере и цена, соответственно. Так вот содержимое элемента «span», т. е. название товара («Кружка 404 Not Found») и эти атрибуты, можно считать с помощью JavaScript, и добавить их значения в lacalStorage (это такое хранилище в браузере у пользователя, где сайт может хранить нужную для себя информацию) или в cookies (cookie-файлы, тоже вариант хранения информации в браузере у пользователя, имеющий некоторые отличия в работе от localStorage, которые пока не важны для понимания). Описанное выше тоже относится к техническим возможностям, которые предоставляет JavaScript.

3. Логика отображения товаров на странице корзины
На странице корзины будет достаточно просто прочитать значения из localStorage или из файлов cookie с помощью JavaScript, а потом добавить эти данные на страницу в какие-то элементы, что тоже без проблем сделает JavaScript. В итоге товары будут видны в корзине.

4. Логика изменения количества товара и вычисление суммы
Здесь JavaScript позволит изменять количество товара с помощью событий по нажатию на кнопочки «+» и «-» на карточке товара, а также позволит произвести вычисление суммы всего заказа (вот и вычисления, которые позволяет делать JavaScript), и добавление этой суммы в элемент, предназначенный для отображения суммы заказа.

Это лишь малая часть того, для чего можно использовать JavaScript. Ведь его можно использовать и на сервере, в рамках Node.js, и реализовать там логику процессинга (обработки) заказа. Кстати, хорошая идея, мы как раз прошли первый цикл знакомства с HTML, CSS и JavaScript, и именно интернет-магазин мы и реализуем в последующих статьях, как практику. И front-end и back-end интернет-магазина. Однако до этого я должен буду объяснить, что такое Git, и как все настроить, там же будет и база данных…

В общем, будет интересно, и идея в том, чтобы показать то, как можно сделать front-end часть на чистом JavaScript, CSS и HTML, а back-end на простеньком фреймворке express.js, а потом перейти к более крутым решениям, в виде React + Sass + TypeScipt + Server Side Rendering + написание unit-тестов (как front-end, с функцией рендеринга на сервере), и NestJS + база данных PostgreSQL + написание unit-тестов + написание end-2-end-тестов (как back-end).

Далее теория будет идти как комментарий к практике, и сосредоточимся на том, ради чего и существует web-разработка — на создании web-приложений. Много базовых вещей будет опущено, так как быстро начнем пользоваться модными и актуальными штуками, но также я готовлю и промежуточные статьи по базовым знаниям — например, вопросы и подробные ответы на них с реальных собеседований на позицию Senior Full-Stack Web-Developer, которые позволят обрести глубокое понимание принципов работы web-приложений в целом, и различных технологий по отдельности и на front-end’е и на back-end’е. Разумеется, и структуры данных, алгоритмы сортировок, поиска и т. д., позволят Вам провести целый ряд вечеров с удовольствием.

До скорых встреч!

Следующая статья цикла — в процессе написания
Предыдущая статья цикла — 1.2. CSS. Более подробно
Содержание