Веб-разработка открывает двери в разные профессии, от фронтенд-разработчиков до веб-дизайнеров.
Создание пользовательских интерфейсов, которые каждый день встречаются нам в смарт-устройствах и приложениях, – это задача фронтенд-разработчиков. Вам могут показаться простыми дизайн и функциональность. Однако, за каждым элементом скрыта работа профессионалов своего дела.
Создание пользовательских интерфейсов, которые каждый день встречаются нам в смарт-устройствах и приложениях, – это задача фронтенд-разработчиков. Вам могут показаться простыми дизайн и функциональность. Однако, за каждым элементом скрыта работа профессионалов своего дела.
Всё начинается с языков разметки HTML, стилей CSS и языка программирования JavaScript. Эти три кита веб-разработки позволяют создавать как простые, так и сложные веб-сайты. В этой статье узнаете, как создать интерактивные проекты, используя данные базовые инструменты. Пройдем все этапы: от идеи до реализации.
В процессе разработки применяются следующие технологии:
HTML
Это язык гипертекстовой разметки, который используется для оформления большинства веб-страниц.
Гипертекст – текст, «который разветвляется сам по себе или выполняет действия по запросу».
Язык разметки - набор символов, вставляемых в текст для передачи информации о его выводе или строении.
Гипертекст – текст, «который разветвляется сам по себе или выполняет действия по запросу».
Язык разметки - набор символов, вставляемых в текст для передачи информации о его выводе или строении.
HTML отвечает за структуру веб-страницы, используя систему тегов. Эти теги состоят из имени, заключённого между знаками «меньше» и «больше». Например: <h1>, <p> и <ul>.
Как и в обычном текстовом редакторе, где можно выделить текст курсивом или изменить его цвет, веб-разработчики применяют теги в коде для создания различных элементов страницы.
Подробнее про теги рассматривали в этой статье.
Как и в обычном текстовом редакторе, где можно выделить текст курсивом или изменить его цвет, веб-разработчики применяют теги в коде для создания различных элементов страницы.
Подробнее про теги рассматривали в этой статье.
Файлы с расширением `.html` позволяют интернет-браузерам понимать, что перед ними код страницы сети. Этот код браузер анализирует, выстраивая элементы по своим местам и превращая их в визуальное содержание.
Главные теги HTML:
Тег <html> представляет собой глобальный контейнер, в который помещается всё содержимое веб-страницы. Тег <head> используется для размещения различной информации, которая не отображается на странице, но критически важна для оформления контента. В этом разделе указывается кодировка, подключаются таблицы стилей и JavaScript-файлы. Таким образом, именно здесь определяется всё необходимое для полноценной работы страницы. Четыре следующих тега размещаются именно в тег head.
Тег <link> – позволяет подключать внешние файлы, например, иконки или таблицы стилей CSS.
Тег <script> – используется для подключения файлов с расширением .js (JavaScript).
Тег <title> – отвечает за название страницы, который будет отображаться в браузерах и поисковых системах.
Тег <meta> – одиночный тег, содержащий служебную информацию, такую как кодировка и ключевые слова.
Тег <body> – представляет собой основное тело страницы. Это контейнер для всего материала, который будет непосредственно показан на веб-странице.
Теги для работы с текстом и списками:
Тег <p> – создает абзац, отделяя его от других элементов небольшими вертикальными отступами. Это главный элемент для хранения текстового контента.
Теги <h1 - h6> – используются для выделения заголовков различного уровня.
Тег <blockquote> – предназначен для оформления больших цитат, которые могут содержать и другие теги. Например, может включать несколько абзацев.
Более детально разобрали в этой статье.
Тег <html> представляет собой глобальный контейнер, в который помещается всё содержимое веб-страницы. Тег <head> используется для размещения различной информации, которая не отображается на странице, но критически важна для оформления контента. В этом разделе указывается кодировка, подключаются таблицы стилей и JavaScript-файлы. Таким образом, именно здесь определяется всё необходимое для полноценной работы страницы. Четыре следующих тега размещаются именно в тег head.
Тег <link> – позволяет подключать внешние файлы, например, иконки или таблицы стилей CSS.
Тег <script> – используется для подключения файлов с расширением .js (JavaScript).
Тег <title> – отвечает за название страницы, который будет отображаться в браузерах и поисковых системах.
Тег <meta> – одиночный тег, содержащий служебную информацию, такую как кодировка и ключевые слова.
Тег <body> – представляет собой основное тело страницы. Это контейнер для всего материала, который будет непосредственно показан на веб-странице.
Теги для работы с текстом и списками:
Тег <p> – создает абзац, отделяя его от других элементов небольшими вертикальными отступами. Это главный элемент для хранения текстового контента.
Теги <h1 - h6> – используются для выделения заголовков различного уровня.
Тег <blockquote> – предназначен для оформления больших цитат, которые могут содержать и другие теги. Например, может включать несколько абзацев.
Более детально разобрали в этой статье.
Пример HTML-документа:
Так отображается в браузере
HTML позволяет структурировать страницы на отдельные блоки, в которых можно размещать текст (например, данную статью), изображения или внедрять видео. Некоторые люди до сих пор считают HTML языком программирования, но это не так, так как с его помощью невозможно создать сложные эффекты или полноценные программы.
Оформление с CSS
Для однообразной стилистики элементов, которые формируют блоки текста, применяются CSS-стили. Они могут быть внедрены прямо в HTML (инлайн) или подключены как отдельный файл с расширением `.css`. Во втором случае, тег <link> обеспечивает связь с внешней стилевой таблицей. Это практичный подход, так как он разделяет содержимое и оформление, уменьшает риск ошибок и позволяет кэшировать CSS-файл для ускорения загрузки страницы.
CSS – это неотъемлемый спутник гипертекстовой разметки, позволяющий более детально настраивать внешний вид почти всех видимых элементов: шрифты, их цвет, размещение изображений, текстовое обтекание, тени кнопок и множество других визуальных параметров. Подробнее тут.
JavaScript в веб-разработке
JavaScript – это язык программирования, предназначенный для создания интерактивных частей веб-сайта.
Новичкам в программировании часто советуют начинать именно с JavaScript. Причины этого кроются в его относительной простоте и в то же время в наличии всех основных концепций программирования, таких как объектно-ориентированное программирование и различные структуры данных. Этот язык становится мостом между начинающими и миром разработки интерактивных интерфейсов.
Новичкам в программировании часто советуют начинать именно с JavaScript. Причины этого кроются в его относительной простоте и в то же время в наличии всех основных концепций программирования, таких как объектно-ориентированное программирование и различные структуры данных. Этот язык становится мостом между начинающими и миром разработки интерактивных интерфейсов.
JavaScript – это динамический язык программирования, предназначенный для того, чтобы делать веб-страницы интерактивными и анимированными. Этот инструмент позволяет реагировать на действия пользователей и обогащать пользовательский интерфейс: формы обратной связи, динамические галереи изображений или анимации переходов между страницами.
Разнообразие использования JavaScript ограничено лишь воображением разработчика и функционалом браузеров. Важно не путать JavaScript с Java – это различные языки с разными целями.
Разнообразие использования JavaScript ограничено лишь воображением разработчика и функционалом браузеров. Важно не путать JavaScript с Java – это различные языки с разными целями.
Написание кода на JavaScript не требует знания сложных математических дисциплин. Всё, что нужно, – это знания основных арифметических действий, таких как плюс, минус, умножение и деление, которым учат в начальной и средней школе. Для веб-разработки также важно понимание циклов, но они не включают в себя сложные формулы, а основаны на элементарной логике.
Как начать?
Подготовим рабочую среду к написанию самого кода. Выбираем текстовый редактор Visual Studio Code как один из лучших бесплатных и широко распространенных вариантов.
Чтобы начать работу с Visual Studio Code, сначала необходимо скачать и установить его на свой компьютер.
Чтобы начать работу с Visual Studio Code, сначала необходимо скачать и установить его на свой компьютер.
Зайдите на https://code.visualstudio.com/
Для Windows нажмите на одну из синих кнопок для скачивания установщика. Если вы используете Mac OS или Linux, выберите пункт «Другие платформы» и скачайте соответствующий дистрибутив.
Для Windows нажмите на одну из синих кнопок для скачивания установщика. Если вы используете Mac OS или Linux, выберите пункт «Другие платформы» и скачайте соответствующий дистрибутив.
Запустите файл установщика (VSCodeUserSetup для Windows) и следуйте стандартным инструкциям: несколько раз нажмите «Далее», выбирая предпочтительные опции
После установки откройте VSCode.
Для добавления рабочего пространства нажмите на пункт File (Файл) → Add Folder to Workspace... (Добавить папку в рабочее пространство).
Для добавления рабочего пространства нажмите на пункт File (Файл) → Add Folder to Workspace... (Добавить папку в рабочее пространство).
Создайте новую папку с именем personal_page на удобно расположенном диске (например, на рабочем столе или в документах). После создания папки выберите её и нажмите «Добавить».
В панели Explorer (Обозреватель) вы увидите своё рабочее пространство с пустой папкой personal_page.
Щёлкните правой кнопкой на заголовке personal_page и выберите «New File» (Создать файл) трижды, чтобы создать следующие файлы:
index.html
styles.css
script.js
index.html
styles.css
script.js
Чтобы улучшить работу с VSCode, рекомендуется установить расширения для автозавершения кода, форматирования и других возможностей.
Перейдите в раздел расширений, нажав на иконку, которая выглядит как квадратный пазл с правой стороны боковой панели, и введите названия популярных расширений, например:
Live Server – для запуска локального сервера и мгновенного просмотра изменений в браузере.
Prettier – для автоматического форматирования кода.
HTML/CSS/JS Prettify – улучшение читаемости вашего кода.
Перейдите в раздел расширений, нажав на иконку, которая выглядит как квадратный пазл с правой стороны боковой панели, и введите названия популярных расширений, например:
Live Server – для запуска локального сервера и мгновенного просмотра изменений в браузере.
Prettier – для автоматического форматирования кода.
HTML/CSS/JS Prettify – улучшение читаемости вашего кода.
Практика веб-разработки
На примере простой игры подробно разберем каждый этап создания программы и освоим несколько языковых конструкций. Игра будет под названием "Угадай число". Она завершится, если игрок правильно угадает число или исчерпает все свои попытки. По окончании игры игрок сможет сыграть в игру ещё раз.
Создайте копию кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Игра "Угадай число"</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.form input[type="number"] {
width: 200px;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Игра Угадай число</h1>
<p>Мы выбрали случайное число от 1 до 100. Попробуйте угадать за 10 ходов или меньше. Мы скажем вам, если ваша догадка была слишком высокой или слишком низкой.</p>
<div class="form">
<label for="guessField">Введите предположение: </label>
<input type="number" min="1" max="100" required id="guessField" class="guessField">
<input type="submit" value="Отправить предположение" class="догадкаОтправить">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script>
// Your JavaScript goes here
</script>
</body>
</html
Если вы откроете файл в текстовом редакторе
и браузере, вы увидите обычный заголовок, небольшой текст с описанием и пустую форму ввода, которая пока не функционирует.
Весь необходимый для работы код мы будем размещать внутри тега <script>.
Создадим переменную `randomNumber`, которая будет хранить случайное число от 1 до 100. Используем математический алгоритм для генерации случайного числа.
Переменные служат для хранения данных, таких как текст или числа. Для создания переменной используется слово `let`, после которого указывается имя переменной. Присвоение значения переменной осуществляется с помощью оператора `=`, за который следует необходимое значение.
Переменные служат для хранения данных, таких как текст или числа. Для создания переменной используется слово `let`, после которого указывается имя переменной. Присвоение значения переменной осуществляется с помощью оператора `=`, за который следует необходимое значение.
Для работы с элементами на странице обозначим переменные, связанные с соответствующими классами в HTML-структуре:
Три переменные, предназначенные для хранения ссылок на элементы параграфов в HTML-документе.
Эти переменные используются для динамической вставки данных в указанные элементы, примеры которых можно увидеть в коде ниже:
Для организации ввода предположений и их отправки используются специальные элементы. Включают в себя поле для ввода текста и кнопку для подтверждения выбора. В последствии они помогают нам контролировать процесс предположений.
Завершают список переменных два важных элемента: один отвечает за подсчёт количества сделанных попыток, которое начинается с единицы, а другой — за кнопку перезапуска игры, которая будет создана позже.
В JavaScript для создания функции применяется ключ `function`, за которым следует имя функции и пара круглых скобок. Тело функции заключается в фигурные скобки `{}`, и внутри них находится код, который выполняется при каждом вызове функции. Добавьте строки ниже предыдущего JavaScript:
Функции — это ключевые элементы программирования, позволяющие многократно использовать код без необходимости его повторного написания.
Заменим текущую функцию checkGuess() на версию:
Запускайте функцию `checkGuess` для начала процесса проверки введённого числа. Преобразование к числу осуществляется с использованием функции `Number()` для гарантии, что полученное значение действительно является числом.
В первый раз, когда пользователь делает попытку, на экран будет выведен текст, сообщающий о предыдущих догадках. Затем, каждое число, введённое пользователем, будет добавляться к этому списку.
В первый раз, когда пользователь делает попытку, на экран будет выведен текст, сообщающий о предыдущих догадках. Затем, каждое число, введённое пользователем, будет добавляться к этому списку.
Затем код проверяет, меньше ли догадка пользователя, чем загаданное число. Если это так, выводится сообщение о том, что предположение неверное и слишком низкое. В обратном случае, если догадка выше задуманного числа, пользователю сообщается о том, что его ответ слишком высок.
Когда пользователь угадывает верный ответ, система выдаёт сообщение: «Поздравляем! Вы ответили верно!» В этом случае фон сообщения окрашивается в зелёный цвет. После этого игра завершается.
Если у игрока было сделано 10 попыток и он так и не смог угадать правильный ответ, появляется сообщение: «Игра окончена!» и происходит завершение игры.
В случае неправильного ответа игроку выводится сообщение: «Неверно!» и фон сообщения становится красным, указывая на ошибку. Игра продолжается, пока не будет достигнут лимит попыток или не будет дан верный ответ.
Расширили нашу программу новым условным блоком `else if () {}`. Он задействуется, когда пользователь совершает свой последний ход. В этом случае, помимо стандартных действий, игроку отображается сообщение «GAME OVER».
Функция `checkGuess()` уже хорошо спроектирована, однако она не будет выполняться до тех пор, пока мы ее не активируем.
Активация функции через события
Для запуска этой функции нам нужно связать ее с определенным событием, таким как клик по кнопке «Отправить ответ». События в браузере, например клики или загрузка страницы, могут инициировать выполнение кода. В этом контексте «прослушиватели событий» отслеживают наступление событий, а «обработчики событий» выполняют соответствующие действия.
Для того чтобы кнопка "Отправить предположение`" начала реагировать на клики, вам необходимо привязать к ней функцию `checkGuess()` как обработчик событий. Для этого после закрытия функции `checkGuess`, вставьте следующий код:
guessSubmit.addEventListener("click", checkGuess);
Теперь, если вы сохраните изменения и обновите страницу, на которой находится ваша игра, она должна заработать.
Однако, без функции `setGameOver()`, которая ещё не определена, игра начнёт давать сбои, как только вы угадаете загаданное число или исчерпаете все попытки.
Для того чтобы добавить возможность завершения текущей игровой сессии, нам необходимо внести изменения в код JavaScript. Ниже приведены шаги для создания функции `setGameOver`, которая будет выполнять эту задачу.
В конце скрипта определите функцию с названием `setGameOver`. Эта функция будет отключать возможность ввода в текстовое поле и деактивировать кнопку отправки. Чтобы игрок мог начать игру заново, создайте новую кнопку с помощью
Для того чтобы добавить возможность завершения текущей игровой сессии, нам необходимо внести изменения в код JavaScript. Ниже приведены шаги для создания функции `setGameOver`, которая будет выполнять эту задачу.
В конце скрипта определите функцию с названием `setGameOver`. Эта функция будет отключать возможность ввода в текстовое поле и деактивировать кнопку отправки. Чтобы игрок мог начать игру заново, создайте новую кнопку с помощью
`document.createElement(«button»)`
Установите для этой кнопки текст, который будет приглашать пользователя начать новую игру, например, «Начать новую игру».
Для обеспечения корректного завершения игры, система блокирует дальнейший ввод данных со стороны пользователя. Это достигается путем установки флага `disabled` в значение `true` для текстового поля и кнопки отправки. Такие меры предотвращают возможность продолжения отправки предположений после того, как игра закончилась, что могло бы нарушить ее правила и нормальное функционирование.
Функция начала новой игры
Функция `resetGame` обнуляет счетчик попыток, устанавливая его в значение 1. Она находит все параграфы с результатами, используя селектор `.resultParas p` и очищает их содержимое, задавая пустую строку. После этого функция удаляет кнопку сброса, активируя поля ввода и кнопку отправки, чтобы пользователь мог снова ввести предположение. Поле ввода очищается для новой попытки.
В последний десяток лет профессия веб-разработчика занимает высокие позиции на рынке труда.
Стартовая зарплата фронтенд-разработчика варьируется и зависит от множества факторов, включая местоположение, навыки и компанию. Согласно информации с ресурса Хабр-Карьера, начинающие профессионалы в сфере IT по всей России в среднем зарабатывают около 70 тысяч рублей в месяц. Однако в таких крупных городах, как Москва и Санкт-Петербург, этот показатель начинается отметки в 90 тысяч рублей. Основная причина такой разницы – более высокие стандарты квалификации и уровень конкуренции на рабочие места в больших городах.
Стартовая зарплата фронтенд-разработчика варьируется и зависит от множества факторов, включая местоположение, навыки и компанию. Согласно информации с ресурса Хабр-Карьера, начинающие профессионалы в сфере IT по всей России в среднем зарабатывают около 70 тысяч рублей в месяц. Однако в таких крупных городах, как Москва и Санкт-Петербург, этот показатель начинается отметки в 90 тысяч рублей. Основная причина такой разницы – более высокие стандарты квалификации и уровень конкуренции на рабочие места в больших городах.
Веб-разработка HTML, CSS и JavaScript — это невероятно увлекательный и полезный навык. Начиная с нуля, вы можете освоить создание собственных веб-сайтов и приложений, а также подготовиться к будущей карьере в IT.
