Основы веб-программирования

Министерство науки и высшего образования Российской Федерации 

НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ 
 
 
 
 
 
А.А. ЦЫГУЛИН 
 
 
 
 
ОСНОВЫ  
ВЕБ-ПРОГРАММИРОВАНИЯ 
 
 
Утверждено  
Редакционно-издательским советом университета  
в качестве учебного пособия 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
НОВОСИБИРСК 
2020 

УДК 004.655(075.8) 
         Ц 945 
 
 
 
Рецензенты: 
канд. техн. наук, доцент И.В. Самочернов 
канд. техн. наук, доцент А.В. Гунько 
 
 
Работа подготовлена на кафедре теоретической и прикладной  
информатики для студентов факультета прикладной математики  
и информатики направлений «Прикладная математика 
и информатика» и «Математическое обеспечение  
и администрирование информационных систем» 
 
 
 
 
 
Цыгулин А.А. 
Ц 945  
Основы веб-программирования: учебное пособие / А.А. Цыгулин. – Новосибирск: Изд-во НГТУ, 2020. – 64 с. 

ISBN 978-5-7782-4197-8 

В пособии приводится описание основных технологий веб-программирования, рассматриваются примеры разработки и отладки распределенных систем, содержатся практические задания. 
 
 
 
 
 
УДК 004.655(075.8) 
 
 
ISBN 978-5-7782-4197-8 
© Цыгулин А.А., 2020 
 
© Новосибирский государственный 
 
    технический университет, 2020 

ПРЕДИСЛОВИЕ 

Пособие предназначено для студентов дневной формы обучения 
факультета прикладной математики и информатики НГТУ направлений подготовки 01.03.02 «Прикладная математика и информатика» и 
02.03.03 «Математическое обеспечение и администрирование информационных систем» (дисциплина «Основы веб-программирования»). 
Учебное пособие содержит введение в проблематику веб-программирования.  
В разделах 1–3 описаны основные элементы и технологии вебпрограммирования. Рассматриваются вопросы создания структуры, 
представления html-страниц и программирования их динамического 
поведения. 
Раздел 4 посвящен отладке веб-программ и инструментам для изучения веб-документов. 
В разделе 5 представлены практические задания. Раздел ориентирован на закрепление теоретических знаний и развитие практических 
навыков использования HTML JS для решения задач веб-программирования. Каждое задание структурировано определенным образом: 
цель, порядок выполнения, варианты для самостоятельной работы, 
контрольные вопросы.  
Для успешного овладения материалом данного пособия необходимы базовые знания об устройстве и функционировании компьютерных 
сетей. 
В результате изучения пособия студент должен: 

знать 

 основные протоколы и технологии, на которых базируются вебсервисы; 

 структуру и назначение элементов HTML-документов; 
 синтаксис и назначение правил таблиц CSS; 
 основы синтаксиса и способы применения языка JavaScript; 
 способы и инструменты отладки веб-программ; 

уметь 

 создавать структурированные и оформленные динамические 
HTML-страницы; 
 создавать базовые веб-программы и сервисы; 

владеть 

 методами веб-программирования; 
 навыками применения отладчика для поиска ошибок в программах. 
Курс охватывает базовые сетевые технологии и инструменты разработки интерактивных веб-страниц. 

Программа 

Базовые интернет-технологии (протоколы, браузер, сервер) и их 
взаимодействие. 
HTML-разметка и CSS-стили. 
Технологии веб-разработки. 
Серверные технологии. 
Формы на странице. 
 
 

ВВЕДЕНИЕ 

Современный мир немыслим без Интернета, без сетевых приложений и сервисов. В основе большинства из них лежат сетевые технологии, протоколы IP, TCP, UDP, TLS, HTTP, WebSockets и многие другие. Понимание и грамотное использование этих технологий позволяет 
создавать сложные функциональные надежные и безопасные сервисы 
и приложения. 
Современная сеть Интернет – это миллиарды компьютеров и коммутаторов, соединенных линиями связи как проводными, так и беспроводными. В основе их взаимодействия лежит протокол IP, с помощью которого компьютеры могут обмениваться информацией. 
Введем несколько основных понятий: 
 сайт – набор данных и программ, объединенных общей темой; 
 WWW – набор соглашений для обмена информацией; 
 HTTP – основной набор соглашений для обмена информацией; 
 JavaScript – наиболее распространенный язык программирования 
для веб-разработки; 
 браузер – клиентская программа для отображения веб-страниц, 
среда выполнения веб-приложений на стороне клиента; 
 сервер – специализированный компьютер, а также программа 
для обработки запросов браузера, среда выполнения веб-приложений 
на стороне сервера. 
Рассмотрим основной сценарий работы интернет-сервиса. На устройстве клиента, будь то стационарный компьютер или смартфон, работает клиентское приложение – программа, обеспечивающая пользо-

вательский интерфейс и локальную обработку данных. При необходимости клиентская программа делает запрос к серверу для передачи 
данных и получения ответа (например, при необходимости отобразить 
информацию о прогнозе погоды делается запрос к соответствующему 
серверу с указанием местоположения клиента и параметров прогноза). 
Сервер, получив запрос, выполняет необходимые действия и отправляет их результат программе-клиенту. Программа-клиент отображает 
полученные данные пользователю. Описанное взаимодействие называется клиент-серверным. 
Для передачи данных в сети Интернет используется протокол IP. 
Этот протокол обеспечивает возможность указать адрес источника и 
получателя. Адрес описывает вычислительный узел источника или 
приемника. Протокол IP может доставить данные от одного узла к другому. Для того чтобы данные попали на обработку в соответствующую 
программу, нужен еще один протокол, позволяющий указать, какой 
программе они адресованы. Для этого используется UDP- или TCPпротокол. У обоих протоколов есть пара номеров портов: отправителя 
и получателя. Номер порта указывает на программу (точнее, открытый 
этой программой сокет), запущенную на источнике сообщения или 
приемнике. 
Порты с номерами от 0 до 1023 используются для зарегистрированных системных сервисов. В Linux для использования портов  
от 0 до 1023 нужны права root. 
Порты от 1024 до 49151 распределяются IANA (Internet Assigned 
Numbers Authority) – специальной службой по назначению уникальных 
номеров. 
Порты с 49152 по 65535 могут быть использованы любой программой, так как эти порты свободны и обычно используются как динамические порты. Запущенные на хосте программы могут случайным образом выбрать порт из этого диапазона как временный, часто они 
используются клиентами как временные порты для связи с серверами. 
Протокол UDP позволяет передавать сообщения небольшой длины – 
датаграммы. При передаче данных подтверждение их приема не входит в задачу и реализуется на прикладном уровне. 

Длина датаграммы определяется дважды: в заголовке IP и UDP в 
16-битном поле, и в результате она ограничена числом 65507 (65535 – 
8 байт заголовка UDP – 20 байт заголовка IP). 
На практике необходимо учитывать ограничения интерфейса передачи данных, и если длина пакета с UDP превысит максимальный  
размер пакета Ethernet (MTU Maxim Transfer Unit, в большинстве случаев это 1500 байт), то такой пакет будет фрагментирован, т. е.  
разбит на несколько частей. Если промежуточные маршрутизаторы 
или оконечное устройство не поддерживает фрагментацию или если 
хотя бы одна часть будет потеряна, датаграмма не будет доставлена. 
Чтобы избежать фрагментации UDP-пакетов, следует ограничить размер датаграмм MTU – максимальный размер заголовка IP – размер заголовка UDP, т. е. 1500 – 60 – 8 = 1432 байта.  
В IPv6 пакеты UDP могут иметь больший размер. Максимальное 
значение составляет 4 294 967 295 байт (232 – 1), из которых 8 байт соответствуют заголовку, а остальные 4 294 967 287 байт – данным. 
Большинство современных сетевых устройств могут отправлять и 
принимать пакеты большей длины, вплоть до 65535 байт, такие пакеты 
называют «Jumbo-фреймы», однако точный максимальный размер обрабатываемых пакетов зависит от типа сетевого оборудования, и перед 
их использованием необходимо проверять возможность передачи таких пакетов или искать максимально допустимый размер передаваемых фреймов с помощью пробных посылок. 
Если требуется передать больше данных или целостность передачи 
требуется подтвердить, можно использовать протокол TCP. Протокол 
TCP предоставляет поток данных с предварительной установкой соединения, повторно запрашивает данные в случае их потери и устраняет дублирование при получении двух копий одного пакета, гарантируя 
тем самым, в отличие от UDP, целостность передаваемых данных и 
уведомление отправителя о результатах передачи. 
Как для UDP, так и для TCP номер порта определяет сервис, и его 
номер можно узнать в специальной таблице. Номера портов, используемые для конкретных специфических целей, выделяет и регистрирует 
IANA, однако на практике часто встречаются случаи их неофициального применения. 

Для реализации многих сервисов существуют широко известные 
программы. Например, для реализации http-сервисов имеются программы (http-серверы): 
Apache HTTP-сервер (назван именем группы племен североамериканских индейцев апачей, кроме того, является искаженным сокращением от англ. a patchy server, среди русских пользователей общепринято переводное апа́ч); 
IIS (Internet Information Services, до версии 5.1 – Internet Information 
Server) – проприетарный набор серверов для нескольких служб Интернета от компании Microsoft; IIS распространяется с Windows NT; 
Nginx (engine x – англ. Engine X, по-русски произносится как 
э́нгинкс [8] или э́нжин-икс [9]) – веб-сервер и почтовый прокси-сервер, 
работающий на Unix-подобных операционных системах (тестировалась сборка и работа на FreeBSD, OpenBSD, Linux, Solaris, macOS, AIX 
и HP-UX); 
Node.js – программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код) и содержащая в себе сервер http. 
 

 

Для персональных компьютеров разработано несколько популярных программ, реализующих клиентскую часть сервисов HTTPбраузеров. 
NCSA Mosaic (или просто Mosaic) – один из первых (первая версия 
вышла в 1993 году) веб-браузеров с графическим интерфейсом пользователя и функцией клиента для более ранних интернет-протоколов, 
таких как FTP, NNTP и Gopher; за поддержку нескольких интернетпротоколов он и получил свое название. 
Google Chrome («хром») – браузер, разрабатываемый компанией 
Google, в 2019 году самый популярный браузер для персональных 
компьютеров. 
Mozilla Firefox – свободный браузер на движке Gecko, разработкой 
и распространением которого занимается Mozilla Corporation. Второй 
по популярности браузер в мире и первый среди свободного ПО. 
Microsoft Edge – браузер от компании Microsoft, впервые выпущенный в 2015 году одновременно с самой первой версией Windows 10. 
 

 
 
Для обмена данными браузеры и http-серверы используют протокол http, а для того чтобы указать, какие конкретно данные запрашиваются у сервера, используется единый указатель ресурса URL (от 
англ. Uniform Resource Locator – унифицированный указатель ресурса). 

URL был предложен в 1990 году и стал основой современной всемирной паутины, изначально URL использовался для указания местоположения файлов во всемирной паутине, URL описан в документе 
RFC 3986 и сейчас используется для указания адреса практически любого ресурса Интернета.  

Структура URL 

Локатор URL разрабатывался как естественная схема именования 
адреса расположения файлов в сети, он легко расширяется и одинаково 
обрабатывается различными программами, поэтому использует ограниченный набор ASCII-символов, не использует многие служебные 
символы, пробелы и некоторые знаки препинания. 
URL имеет следующую форму записи: 
 
<схема>:[//[<логин>[:<пароль>]@]<хост>[:<порт>]][/<URL-путь>] 
[?<параметры>][#<якорь>] 
 
В этой записи: 
схема – схема обращения к ресурсу, в большинстве случаев имеется в виду сетевой протокол; 
логин – имя пользователя, используемое для доступа к ресурсу; 
пароль – пароль указанного пользователя; 
хост – полностью прописанное доменное имя хоста в системе DNS 
или IP-адрес хоста в форме четырех групп десятичных чисел, разделенных точками, числа – целые в интервале от 0 до 255; 
порт – порт хоста для подключения; 
URL-путь – уточняющая информация о месте нахождения ресурса, 
зависит от протокола; 
параметры – строка запроса с передаваемыми на сервер (методом 
GET) параметрами. Начинается с символа ?, разделитель параметров – 
знак &.  

Пример 

?параметр_1=значение_1&параметр_2=значение_2&параметр_3= 
значение_3