CC BY
267
К ВОПРОСУ О ВЕБ-РАЗРАБОТКАХ
1 2
Арисова Д.А. , Чернова С.В. Email: [email protected]
1Арисова Дарья Андреевна - студент; 2Чернова Светлана Владимировна - старший преподаватель, факультет информационных систем и технологий, Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования Поволжский государственный университет телекоммуникаций и информатики,
г. Самара
Аннотация: в статье анализируется такая область программирования, как веб-разработка. Она делится на два подтипа: бэк-энд и фронт-энд. В данной статье разбираются составляющие фронт-энда, так называемой внешней оболочки вебсайта. Рассматриваются основные инструменты для создания хороших интерактивных и адаптивных сайтов. Идет рассмотрение основных языков программирования для создания сайтов, а также специальных библиотек для упрощения написания кода. В тексте работы разъясняется, что такое язык гипертекстовой разметки HTML, язык стилей CSS, язык JavaScript, а также что собой представляет библиотека jQuery и Ajax.
Ключевые слова: веб-разработка, дизайн, сайты, верстка, html, css, javascript, jquery, ajax.
ABOUT WEB DEVELOPMENT 12 Arisova D.A.1, Chernova S.V.2
1Arisova Darya Andreevna - Student;
2Chernova Svetlana Vladimirovna - Senior Lecturer, FACULTY OF INFORMATION SYSTEMS AND TECHNOLOGY, FEDERAL STATE BUDGET EDUCATIONAL INSTITUTION OF HIGHER PROFESSIONAL EDUCATION
POVOLZHSKIY STATE UNIVERSITY OF TELECOMMUNICATIONS AND INFORMATICS,
SAMARA
Abstract: the article analyzes such a programming area as web development. It is divided into two subtypes: back-end and front-end. This article deals with the components of the front-end, the so-called external shell of the website. We consider the basic tools for creating good, interactive and responsive sites. There is a consideration of the main programming languages for creating websites, as well as special libraries to simplify writing code. The text of the work explains what the HTML hypertext markup language is, the CSS style language, the JavaScript language, and what is the jQuery library and Ajax are. Keywords: web development, design, html, css, javascript, jquery, ajax.
УДК 004.43
Веб-разработка - востребованная и интересная область программирования и делится она на два типа: фронт-энд и бэк-энд. Бэк-энд разработчик занимается программным кодом на стороне сервера, т.е. занимается обработкой, хранением и выдачей данных. Фронт-энд специалист разрабатывает внешний функционал, с которым взаимодействует пользователь в браузере. Поговорим о некоторых составляющих фронт-энда.
Первым составляющим является язык гипертекстовой разметки HTML (Hyper Text Markup Language). С помощью этого языка осуществляется разметка структуры вебстраницы. Он представляется как набор элементов, начало и конец каждого из которых при этом обозначается специальными тегами (К примеру, «<html> </html>»).
Открывающие теги зачастую снабжены атрибутами, которые подробно характеризуют элемент. В атрибутах прописывают идентификаторы и классы, для последующего удобного обращения к элементам на веб-странице. Идентификатор всегда индивидуален и в коде его название нельзя повторять, класс же может быть указан у разных элементов одинаковым. Например, «<p id='psuti' dass='university'>Поволжский Государственный Университет Телекоммуникаций и Информатики^^». Контентом в данном случае является название университета, уникальный идентификатор дает четко понять, что является содержимым данного тега, а класс в данном случае определяет «класс университетов). Таким образом, получается, что класс, задающий университеты, может использоваться в тексте кода несколько раз, а идентификатор будет персональным и нигде в коде мы его больше не встретим. В HTML существует тег, который позволяет создавать блоки («<div> </div>»). Блоки - это очень полезный инструмент при верстке сайта, с их помощью можно распределять контент на веб-странице как угодно и где угодно. Имеется в виду расположение блока, его внешний вид, а также вид его содержимого.
Второй составляющей являются каскадные таблицы стилей CSS (Cascading Style Sheets). С помощью таблиц стилей формируется внешний вид документа. Используя их, устанавливаются правила, которые указывают как должен отображаться контент элементов на странице. Правила CSS состоят из двух компонентов: селектора и блока объявлений в фигурных скобках. Селекторы представляют собой обращение к тому или иному тегу, идентификатору или классу. В блоке объявлений размещаются свойства и их значения, которые мы хотим как-либо изменить. Например, ширину, высоту и размещение блока на странице, устанавливаемую фоном картинку, размер текста, шрифт и так далее. Файл со стилями подключается в HTML с помощью тега «link», который будет располагаться внутри тега «head»: «<link href="style.css" rel="stylesheet">».
Третья составляющая - это язык JavaScript. Этот язык позволяет добавить веб -страницам дополнительную интерактивность, позволить странице реагировать на действия пользователя. Язык JavaScript осуществляет доступ к контенту через названия тегов, идентификаторов или классов, чтобы в последующем их видоизменить (добавить элемент, удалить, заменить и т.д.). К примеру, чтобы добавить столбец в таблицу, нужно вначале получить доступ к таблице, а затем и к каждой строке, чтобы последовательно через цикл создать в каждой строке элемент «td».
Посредством JavaScript производится программирование правил (правила, которые беспрекословно выполнит браузер) и реагирование на события (такие как нажатие на кнопку или ссылку, действия при полной загрузке веб-страницы, введение данных в форму и так далее). Показ слайд-шоу, перезагрузка фрагмента страницы, фильтрация данных - это и многое другое программируется с помощью этого языка. Подключение файла javascript производится перед закрывающим тегом «body» с помощью тега «script»: «<script src="add.js"></script>».
Интересным этапом при изучении фронт-энда является ознакомление с объектной моделью документа (DOM). DOM не является ни частью HTML, ни JavaScript. Эта модель объясняет нам, как браузер структурирует веб-страницу и как можно получать доступ к её содержимому и изменять его. Дерево DOM имеет 4 типа узлов: узел документа (объект document представляет всю страницу), узлы элементов (обращение через теги HTML), текстовые узлы (обратившись к узлу элемента, получаем доступ к тексту) и узлы атрибутов (атрибуты тегов - id и class) [1, 192].
Библиотека jQuery позволяет быстро решать множество возникающих задач, относящихся к JavaScript. Она обеспечивает совместимость со всеми основными браузерами, дает более упрощенный доступ к элементам нежели DOM, методы библиотеки обеспечивают обновление структуры страницы, анимирование элементов и их перебор в одной строчке кода [1, 300]. Кроме того, благодаря jQuery излишне
писать дополнительный код для поддержки старых версий браузеров, поскольку в библиотеке содержатся методы для подключения обработчиков событий. Можно обойтись и без этой библиотеки, используя только JavaScript, но jQuery дает возможность упростить написание кода.
При необходимости загрузки данных в определенном месте страницы без ее полной перезагрузки на помощь приходит Ajax (Asynchronous JavaScript and XML). Примером может служить поиск Google, который выводит примеры запросов еще до окончания ввода текста в поисковой строке. Таким образом повышается скорость взаимодействия. Данные при этом загружаются быстрее, веб-страница не перезагружается полностью и все еще остается доступной для использования [1, 374]. Порядок работы осуществляется таким образом: браузер отправляет запрос серверу, сервер возвращает ответ в одном из форматов данных (HTML, XML, JSON), которые браузер обрабатывает и добавляет на страницу.
Для освоения фронт-энда нужно многое изучить, в том числе и основы дизайна, чтобы уметь делать эстетически красивые продукты. Но если выучить языки и разобраться в основных библиотеках можно стать хорошим разработчиком, к которому горами будут сыпаться заказы.
Список литературы /References
1. Дакетт Джон. JavaScript и jQuery. Интерактивная веб-разработка / Джон Дакетт [пер. с англ. М.А. Райтмана]. М.: Издательство «Э», 2017. 640 с.
2. Дакетт Джон. HTML и CSS. Разработка и создание веб-сайтов / Джон Дакетт [пер. с англ. М.А. Райтмана]. М.: Издательство «Э», 2013. 480 с.
