Лаб2
.docxМинистерство цифрового развития, связи и массовых коммуникаций РФ
ордена Трудового Красного Знамени федеральное государственное
бюджетное образовательное учреждение высшего образования
«МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И
ИНФОРМАТИКИ»
Кафедра «МКиИТ»
Лабораторная № 2
по дисциплине «Разработка кроссплатформенного программного обеспечения»
Выполнил:
студент группы БФИ2203
Мячина Л. А.
Проверил:
Потапченко Т. Д.
Москва, 2024 г.
Цель работы:
Добавление интерактивных элементов на персональный сайт-визитку (портфолио) с использованием языка программирования JavaScript. Создание динамических кнопок, обработчиков событий, а также работа с DOM и взаимодействие с элементами HTML. Возможность интеграции с API для расширения функционала.
Требования к работе:
1. Для HTML-файла:
* Добавить интерактивные элементы:
* Кнопка "Показать больше" в разделе о себе или проектах, которая при клике раскрывает скрытый текст.
* Селекторы для выбора тем оформления (например, светлая/темная тема).
* Добавить слайдер с проектами, который переключает изображения.
* Подключить JavaScript для управления этими элементами (через файл `script.js`).
2. Для файла со стилями (CSS):
* Добавить стили для активных состояний кнопок и селекторов.
* Реализовать стилизацию для различных тем оформления через классы (например, светлая и тёмная тема).
* Стили для анимации слайдера.
3. Для JavaScript:
* Использование обработчиков событий (`addEventListener`) для кнопок и других интерактивных элементов.
* Управление элементами DOM:
* Поиск элементов на странице с помощью методов `getElementById`, `querySelector`.
* Изменение содержимого и стилей с использованием свойств `innerHTML`, `style`.
* Добавление и удаление классов с помощью `classList`.
* Работа с локальным хранилищем (localStorage) для запоминания выбранной темы оформления.
* Опционально: Подключение к API для загрузки данных (например, изображений или информации о проектах).
Выполнение работы:
Листинг кода
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My page</title>
<link rel="stylesheet" href="index(1).css">
</head>
<body>
<header>
<div>
<img src="bug_ltfoyf1z6gmw.svg" alt="Logo" width="40" title="Logo"/>
<h1>Визитка</h1>
</div>
<nav>
<ul class="dd">
<a href="index.html">Главная</a>
<a href="#section1">Обо мне</a>
<a href="#section2">Контакты</a>
</ul>
</nav>
</header>
<!-- Выбор темы оформления -->
<div class="theme-selector">
<label for="theme">Выберите тему:</label>
<select id="theme">
<option value="light">Светлая</option>
<option value="dark">Тёмная</option>
</select>
</div>
<main>
<!-- Раздел обо мне -->
<section class="about-section" id="section1">
<img class="round-photo" src="images/i.jpg" alt="Моя фотография">
<div class="text">
<h2 class="line">Обо мне</h2>
<p class="t">Привет! Меня зовут Лада, я <i>стажер</i> тестировщик в <b>Холдинге Т1</b>! Я учусь на 3 курсе в <b>МТУСИ</b> по направлению фундаментальная информатика и информационные технологии. Прошла обучение в онлайн школе <b>OTUS</b> по направлению <i>QA engineer</i>.</p>
<p id="extra-text" style="display: none;">Дополнительная информация обо мне... Я обожаю путешествовать и исследовать новые места, люблю заниматься спортом - хожу в тренажерный зал, занимаюсь йогой. Умею вязать, вышивать, читаю книги на разные темы, люблю гулять на свежем воздухе. И самое главное люблю жить эту жизнь!</p>
<button id="show-more-btn">Показать больше</button>
</div>
</section>
<div class="skills">
<section class="kw">
<h3>Мои soft skills</h3>
<ul>
<p>Надежность</p>
<p>Управление временем</p>
<p>Постановка целей</p>
<p>Командная работа</p>
<p>Гибкость</p>
<p>Искренность</p>
</ul>
</section>
<section class="kw">
<h3>Мои hard skills</h3>
<ul>
<p>Техники тест дизайна</p>
<p>Составление тест-кейсов, баг-репортов</p>
<p>DevTools</p>
<p>REST API</p>
<p>Postman</p>
<p>Swagger</p>
</ul>
</section>
</div>
<!-- Раздел с резюме -->
<section class="resume">
<div class="resume-container">
<p>Вы можете скачать мое резюме, нажав на кнопку ниже:</p>
<a href="Мячина Лада_резюме.doc" download class="download-resume-btn">Скачать резюме</a>
</div>
</section>
<div class="meme">
<h2 class="t">А это карусель с моими любимыми мемами :)</h2>
</div>
<!-- Слайдер с мемами -->
<div class="slider">
<div class="slides">
<img src="meme1.jpg" alt="Мем 1">
<img src="meme2.jpg" alt="Мем 2">
<img src="meme3.jpg" alt="Мем 3">
<img src="meme4.jpg" alt="Мем 4">
<img src="meme5.jpg" alt="Мем 5">
</div>
<!-- Кнопки для переключения -->
<button class="prev" onclick="moveSlide(-1)">❮</button>
<button class="next" onclick="moveSlide(1)">❯</button>
</div>
</main>
<footer>
<div class="social-icons">
<section class="about-section" id="section2">
<a href="https://t.me/ladaamy" target="_blank" class="icon telegram">
<img src="icons8-телеграм.svg" alt="Telegram">
</a>
<a href="mailto:ladaamy@yandex.ru" target="_blank" class="icon email">
<img src="icons8-почта.svg" alt="email">
</a></section>
</div>
<p>© 2024 Моя учебная веб-страница.</p>
</footer>
<script src="script(1).js"></script>
</body>
</html>
Результат работы
Рисунок 1 – Результат работы
Вывод
С помощью полученных знаний, мы смогли добавить интерактивные элементы на персональный сайт-визитку (портфолио) с использованием языка программирования JavaScript. Создали динамические кнопоки, обработчиков событий, а также проделали работу с DOM и взаимодействием с элементами HTML.