Frontend-разработка — один из самых простых способов войти в IT-сферу. Рассмотрим, что делает frontend-разработчик и какие знания ему необходимы.
Что такое Frontend?
Любое приложение или сайт логически делится на две части: Frontend и Backend. Frontend — это видимая пользователю часть сайта или веб-приложения. Это то, с чем он взаимодействует: кнопки, визуальные элементы и прочее. Когда пользователь нажимает кнопку, запрос отправляется на сервер (Backend). Сервер обрабатывает запрос, выполняет необходимую логику (например, обращается к базе данных, использует API) и возвращает результат пользователю. Таким образом, Frontend — это клиентская часть, а Backend — серверная. Клиент запрашивает и отображает данные, а сервер непосредственно с ними работает. Веб-браузер часто является клиентской частью, и frontend-разработчик пишет код для работы в браузере и взаимодействия с Backend. Например, всё, что вы видите на YouTube — результат работы frontend-разработчиков: плеер, картинки, заголовки, кнопки и т.д.
Основы Frontend-разработки: HTML, CSS и JavaScript
Frontend-разработка базируется на трёх основных технологиях: HTML, CSS и JavaScript.
HTML (HyperText Markup Language)
HTML — язык гипертекстовой разметки. Он используется для разметки веб-страницы, разделения её на логические блоки (заголовки, блоки с контентом, футер и т.д.). HTML-теги, заключённые в угловые скобки, указывают браузеру, как отображать элементы.
Например, тег <p> обозначает параграф:
<p>Это текст параграфа.</p>
Теги могут быть вложенными:
<p>Это текст с <a href=»#»>ссылкой</a>.</p>
Внутри тегов могут быть атрибуты, предоставляющие дополнительную информацию. Например, атрибут href в теге <a> указывает на ссылку, а src в теге <img> — на путь к изображению. Некоторые элементы HTML не требуют закрывающего тега.
Структура HTML-документа иерархична:
- <html> — корневой элемент, содержащий всё остальное.
- <head> — содержит метаданные (невидимые на странице, но важные для браузера, например, заголовок страницы).
- <body> — содержит видимый контент.
- <div> — контейнер для группировки элементов.
Пример простой HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф текста.</p>
</body>
</html>Этот код сохраняется в формате .html и открывается в браузере.
CSS (Cascading Style Sheets)
CSS — каскадные таблицы стилей — язык для оформления HTML-элементов. Он определяет внешний вид элементов: цвета, шрифты, размеры, расположение и т.д.
Существует три способа подключения стилей:
- Внутристрочный: стиль указывается непосредственно внутри тега HTML с помощью атрибута style. Неудобно для больших проектов.
- Внутри <head>: стиль прописывается внутри тега <style> в секции <head>.
- Внешний файл: стиль выносится в отдельный файл (например, style.css), который подключается к HTML с помощью тега <link>. Это наиболее распространённый и удобный способ.
В CSS используются селекторы для выбора элементов и свойства для их стилизации. Например:
p {
font-size: 40px;
color: blue;
}Классы позволяют применять стили к нескольким элементам:
<p class="special">Первый параграф</p>
<p class="special">Второй параграф</p>
<p>Третий параграф</p>.special {
color: red;
}ID используется для уникальных элементов:
<p id="unique">Уникальный параграф</p>#unique {
color: green;
}CSS обладает каскадностью, псевдоселекторами и возможностью адаптации под разные размеры экрана (медиа-запросы).
JavaScript
JavaScript добавляет интерактивность веб-страницам. Он позволяет реагировать на действия пользователя (клики, нажатия клавиш и т.д.), изменять содержимое страницы и отправлять запросы на сервер. JavaScript не имеет отношения к Java, несмотря на схожее название.
JavaScript выполняется в браузере. Его можно добавить в HTML двумя способами:
- Внутри тега <script>.
- В отдельном файле, подключённом через тег <script src=»script.js»></script>.
Пример обработки события клика на кнопке:
<button id="myButton">Нажми меня</button>
<script>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Кнопка нажата!");
});
</script>JavaScript интерпретируется браузером на лету, но для оптимизации используется Just-In-Time компиляция (JIT). JavaScript поддерживает асинхронное программирование и динамическую типизацию. Он также является объектно-ориентированным языком.
Расширение возможностей JavaScript
Node.js позволяет использовать JavaScript на сервере. Он использует движок V8 (как и Chrome), что позволяет запускать JavaScript-код на сервере и добавлять бэкенд-логику к frontend-приложениям.
JavaScript также используется для разработки десктопных (Electron) и мобильных (React Native, Flutter) приложений.
JavaScript-фреймворки и TypeScript
Существует множество JavaScript-фреймворков, упрощающих и ускоряющих разработку. Самый популярный — React (библиотека, а не фреймворк), используемый для создания одностраничных приложений (SPA) и прогрессивных веб-приложений (PWA). React основан на компонентах и декларативном программировании. Другие популярные фреймворки: Angular, Vue.js и Svelte.
TypeScript — расширение JavaScript с дополнительными возможностями, такими как статическая типизация, что повышает надёжность кода.
Frontend-разработка — это динамичная и постоянно развивающаяся область, требующая постоянного обучения и освоения новых инструментов и технологий. Знание HTML, CSS и JavaScript — основа для успешной работы frontend-разработчиком.