Лаб_2_Ф Головков И.Е. 12002108
.docx
БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ
ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ»
(НИУ «БелГУ»)
ИНСТИТУТ ИНЖЕНЕРНЫХ И ЦИФРОВЫХ ТЕХНОЛОГИЙ
Кафедра информационных и робототехнических систем
Отчет по лабораторной работе № 2
по дисциплине «Моделирование технических систем»
студента очного отделения
3 курса 12002108 группы
Головкова Игоря Евгеньевича
Проверила:
ст. пр. Скрипина Ирина Ивановна
БЕЛГОРОД, 2024
Лабораторная работа №2 (Frontend)
Работа с JavaScript и API
Цель работы
Изучить основы JavaScript
Изучить работу JavaScript с браузерными и внешними API
Задание для подготовки к работе
Изучить лекционный материал и теоретический материал настоящей лабораторной работы.
Порядок выполнения работы
Изучить теоретический материал по лекциям 2 и 3
Реализовать функционал для пользователя, с использованием JS.
Можете реализовать логику для экрана логина, если таковой имеется или вы планировали его добавить – добавить какие-либо проверки и переход на другую страницу при успешном заполнении. Либо можете реализовать загрузку данных с открытых источников и отобразить их на сайте. Или же просто реализуйте обработку действий пользователя.
Сделайте pr со своей работе, как это было описано в первой лабораторной.
Важно! В комментарии к pr укажите, какую именно логику вы реализовали.
Ход работы:
Был разработан сайт с применением JS для доступа к API получения занятия и API получения фактов о кошках. Итоговый вид сайта представлен на рисунках 1 и 2.
Рисунок 1 – Страница сайта до вызова через API
Рисунок 2 – Страница сайта после вызова через API
Листинг HTML-файла: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../js/activities.js"></script> <link rel="stylesheet" href="../css/styles.css" type="text/css"> <title>Заниматель</title> </head> <body> <h1>Можно воспользоваться придумывателем занятий</h1> <button onclick="getActivity()">Придумать занятие</button> <div id="activityDiv"></div> <h1>... или всегда можно прочитать интересный факт о кошках</h1> <button onclick="getFact()">Получить факт</button> <br> <br> <div id="factDiv"></div> </body> </html>
Листинг JS-файла:
class Activity { constructor(activity, type, participants, price, link, key, accessibility) { this.activity = activity; this.type = type; this.participants = participants; this.price = price; this.link = link; this.key = key; this.accessibility = accessibility; } } function getActivity() { fetch('https://www.boredapi.com/api/activity') .then(response => response.json()) .then(data => { const activity = new Activity( data.activity, data.type, data.participants, data.price, data.link, data.key, data.accessibility ); const resultDiv = document.getElementById('activityDiv'); let linkElement; if (activity.link) { linkElement = `<p><strong>Ссылка:</strong> <a href="${activity.link}" target="_blank">${activity.link}</a></p>`; } else { linkElement = '<p><strong>Ссылка:</strong> Нет</p>'; } resultDiv.innerHTML = ` <p><strong>Занятие:</strong> ${activity.activity}</p> <p><strong>Тип занятие:</strong> ${activity.type}</p> <p><strong>Количество участников:</strong> ${activity.participants}</p> <p><strong>Стоимость (от 0 до 1):</strong> ${activity.price}</p> ${linkElement} <p><strong>Доступность (от 0 до 1):</strong> ${activity.accessibility}</p> `; }) .catch(error => console.error('Error:', error)); } function getFact() { return fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { const factElement = document.getElementById('factDiv'); factElement.textContent = data.fact; factElement.style.display = 'block'; }) .catch(error => console.error('Error fetching data:', error)); }
Ссылка на pull request:
https://github.com/Brarion/front-course-bgu/pull/3