https://pastein.ru/t/WtZ
Загрузка данных
\documentclass[12pt]{article}
\usepackage{fontspec}
\usepackage[english,russian]{babel}
\usepackage{graphicx}
\usepackage{hyperref}
\usepackage{verbatim}
\usepackage{indentfirst}
\usepackage{listings}
\usepackage{xcolor}
% Настройка шрифтов
\setmainfont{Times New Roman}
\setmonofont{Courier New}
% Настройка полей
\usepackage[a4paper, left=2.5cm, right=1.5cm, top=2cm, bottom=2cm]{geometry}
% Настройка межстрочного интервала
\linespread{1.5}
% Отступ абзаца
\setlength{\parindent}{1.25cm}
% Настройка подписей рисунков
\usepackage{caption}
\addto\captionsrussian{%
\renewcommand{\figurename}{Рисунок}%
}
\DeclareCaptionLabelFormat{dash}{#1 #2 -- }
\captionsetup[figure]{
labelformat=dash,
labelsep=none,
name={Рисунок}
}
% --- Настройка листингов кода ---
\definecolor{codegreen}{rgb}{0,0.6,0}
\definecolor{codegray}{rgb}{0.5,0.5,0.5}
\definecolor{codepurple}{rgb}{0.58,0,0.82}
\definecolor{backcolour}{rgb}{0.95,0.95,0.92}
\lstset{
backgroundcolor=\color{backcolour},
commentstyle=\color{codegreen},
keywordstyle=\color{magenta},
numberstyle=\tiny\color{codegray},
stringstyle=\color{codepurple},
basicstyle=\ttfamily\footnotesize,
breakatwhitespace=false,
breaklines=true,
captionpos=b,
keepspaces=true,
numbers=left,
numbersep=5pt,
showspaces=false,
showstringspaces=false,
showtabs=false,
tabsize=2,
frame=single,
extendedchars=true,
literate={а}{{\selectfont\char1072}}1 {б}{{\selectfont\char1073}}1 {в}{{\selectfont\char1074}}1 {г}{{\selectfont\char1075}}1 {д}{{\selectfont\char1076}}1 {е}{{\selectfont\char1077}}1 {ё}{{\selectfont\char1079}}1 {ж}{{\selectfont\char1081}}1 {з}{{\selectfont\char1082}}1 {и}{{\selectfont\char1083}}1 {й}{{\selectfont\char1084}}1 {к}{{\selectfont\char1085}}1 {л}{{\selectfont\char1086}}1 {м}{{\selectfont\char1087}}1 {н}{{\selectfont\char1088}}1 {о}{{\selectfont\char1089}}1 {п}{{\selectfont\char1090}}1 {р}{{\selectfont\char1091}}1 {с}{{\selectfont\char1092}}1 {т}{{\selectfont\char1093}}1 {у}{{\selectfont\char1094}}1 {ф}{{\selectfont\char1095}}1 {х}{{\selectfont\char1096}}1 {ц}{{\selectfont\char1097}}1 {ч}{{\selectfont\char1098}}1 {ш}{{\selectfont\char1099}}1 {щ}{{\selectfont\char1100}}1 {ъ}{{\selectfont\char1101}}1 {ы}{{\selectfont\char1102}}1 {ь}{{\selectfont\char1103}}1 {э}{{\selectfont\char1104}}1 {ю}{{\selectfont\char1105}}1 {я}{{\selectfont\char1106}}1 {А}{{\selectfont\char1040}}1 {Б}{{\selectfont\char1041}}1 {В}{{\selectfont\char1042}}1 {Г}{{\selectfont\char1043}}1 {Д}{{\selectfont\char1044}}1 {Е}{{\selectfont\char1045}}1 {Ё}{{\selectfont\char1046}}1 {Ж}{{\selectfont\char1047}}1 {З}{{\selectfont\char1048}}1 {И}{{\selectfont\char1049}}1 {Й}{{\selectfont\char1050}}1 {К}{{\selectfont\char1051}}1 {Л}{{\selectfont\char1052}}1 {М}{{\selectfont\char1053}}1 {Н}{{\selectfont\char1054}}1 {О}{{\selectfont\char1055}}1 {П}{{\selectfont\char1056}}1 {Р}{{\selectfont\char1057}}1 {С}{{\selectfont\char1058}}1 {Т}{{\selectfont\char1059}}1 {У}{{\selectfont\char1060}}1 {Ф}{{\selectfont\char1061}}1 {Х}{{\selectfont\char1062}}1 {Ц}{{\selectfont\char1063}}1 {Ч}{{\selectfont\char1064}}1 {Ш}{{\selectfont\char1065}}1 {Щ}{{\selectfont\char1066}}1 {Ъ}{{\selectfont\char1067}}1 {Ы}{{\selectfont\char1068}}1 {Ь}{{\selectfont\char1069}}1 {Э}{{\selectfont\char1070}}1 {Ю}{{\selectfont\char1071}}1 {Я}{{\selectfont\char1072}}1
}
\begin{document}
% --- Титульный лист ---
\thispagestyle{empty}
\begin{center}
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ \\
РОССИЙСКОЙ ФЕДЕРАЦИИ
\vspace{20pt}
Федеральное государственное бюджетное образовательное учреждение \\
высшего образования \\
«Сибирский государственный университет телекоммуникаций и информатики»
\vspace{20pt}
Кафедра телекоммуникационных систем и вычислительных средств \\
(ТСиВС)
\end{center}
\vspace{3cm}
\begin{center}
\textbf{Лабораторная работа №13} \\[10pt]
по дисциплине \\
\textbf{«WEB-Технологии / Дизайн интерфейсов»} \\[10pt]
по теме: \\
\textbf{«Погружение в разработку на JavaScript»}
\end{center}
\vspace{3cm}
\begin{flushleft}
\textbf{Студент:} \\
\textit{Группа № ИКС-532 \hfill Колесов Г.А.}
\vspace{20pt}
\textbf{Преподаватель:} \\
\textit{Должность: старший преподаватель \hfill Андреев А.В.}
\end{flushleft}
\vfill
\begin{center}
\textbf{Новосибирск 2026 г.}
\end{center}
\newpage
\section{Введение}
Целью лабораторной работы является изучение базовых концепций языка JavaScript, включая работу с переменными, массивами, циклами и методами строк. Также в работу входит освоение навыков взаимодействия с внешними API и деплоя веб-приложений на хостинг.
\section{Описание работы}
\subsection{Задание 1. Базовые понятия и бонусная система}
В рамках первой задачи была реализована имитация бонусной системы интернет-магазина. Были созданы переменные для имени пользователя и баланса, а также произведен расчет остатка баллов через 7 дней с учетом ежедневного сгорания и периодических покупок.
\begin{figure}[h!]
\centering
\includegraphics[width=0.9\linewidth]{image2.png}
\caption{Реализация логики бонусной системы и чата в IDE}
\label{fig:js_basics}
\end{figure}
\subsection{Задание 2. Основы JavaScript (Массивы и циклы)}
Для имитации мессенджера был инициализирован массив сообщений. С помощью цикла \texttt{for} реализован вывод переписки с чередованием отправителей («Друг»/«Вы»). Также добавлена функция поиска по ключевому слову с использованием метода \texttt{.includes()}.
\subsection{Задание 3. Разработка сайта и работа с API}
На данном этапе было реализовано динамическое получение данных о персонажах Marvel с внешнего API с использованием функции \texttt{fetch()}. Полученные данные были преобразованы в интерактивные карточки персонажей.
\begin{figure}[h!]
\centering
\includegraphics[width=0.8\linewidth]{image.png}
\caption{Отображение персонажей Marvel, полученных через API}
\label{fig:marvel_api}
\end{figure}
\subsection{Задание 4. Доработка и публикация}
Итоговый проект был загружен на хостинг Timeweb. Файлы проекта (\texttt{index.html}, \texttt{style.css}, \texttt{index.js}) были размещены в директории \texttt{public\_html}.
\begin{figure}[h!]
\centering
\includegraphics[width=0.8\linewidth]{image1.png}
\caption{Файловый менеджер хостинга Timeweb с исходным кодом}
\label{fig:hosting}
\end{figure}
\section{Выводы}
В ходе лабораторной работы были освоены фундаментальные принципы JavaScript: работа с типами данных, управляющими конструкциями и массивами. Были получены практические навыки работы с асинхронными запросами (Fetch API) и размещения статических сайтов на облачном хостинге.
\section{Ссылки на ресурсы}
\begin{itemize}
\item \href{https://replit.com/join/ihdoqeybnr-em0clown}{Исходный код (Replit)}
\item \href{https://replit.com/join/fotdnbpdrf-em0clown}{Исходный код (Replit(Marvel))}
\item \href{https://cd975738.tw1.ru/}{Рабочий сайт на Timeweb}
\end{itemize}
\end{document}
