Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Лаб_8 Головков И.Е. 12002108 JavaEE

.docx
Скачиваний:
1
Добавлен:
26.06.2024
Размер:
2.47 Mб
Скачать

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ БЕЛОГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ (НИУ «БелГУ») ИНСТИТУТ ИНЖЕНЕРНЫХ И ЦИФРОВЫХ ТЕХНОЛОГИЙ

КАФЕДРА ИНФОРМАЦИОННЫХ И РОБОТОТЕХНИЧЕСКИХ СИСТЕМ

Отчет по лабораторной работе №8 Тема работы «Основы разработки и стилизации web-контента» по дисциплине «Концепция создания модульных приложений»

студента очного отделения

2 курса группы 12002108

Головкова Игоря Евгеньевича

Проверил:

ст. пр. Гончаров Дмитрий Викторович

Белгород 2023

Страница 1 «Главная»

Страница 2 «Меню»

Страница 3 «Скидки»

Страница 4 «Заказ»

Сайт доступен по адресу: https://iggosha.github.io/index.html

Листинг

  1. Теги <header>, <nav> и <footer>

<header> <h1>Фудзи-Суши</h1> <img src="icon.png" alt="Логотип" class="logo"> </header> <nav> <ul> <li><a href="index.html">Главная</a></li> <li><a href="MenuPage.html">Меню</a></li> <li><a href="PromoPage.html">Скидки</a></li> </ul> </nav>

<!-- Бегущая строка --> <footer> <MARQUEE>Заказывайте наши ароматные и вкусные блюда! Приятного аппетита! Связь с поддержкой: Почта: fuji-sushi@mail.ru, Телефон: 8(800)555-35-35 </MARQUEE> </footer>

  1. Метки на интерактивной карте

Магистральная улица, 2В <iframe src="https://yandex.ru/map-widget/v1/?indoorLevel=1&ll=36.538543%2C50.573224&mode=search&ol=geo&ouri=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1NTk4NzU4MRJK0KDQvtGB0YHQuNGPLCDQkdC10LvQs9C-0YDQvtC0LCDQnNCw0LPQuNGB0YLRgNCw0LvRjNC90LDRjyDRg9C70LjRhtCwLCAy0JIiCg15JxJCFftKSkI%2C&z=17.16" width="300" height="300" allowfullscreen="true" style="position:relative;"> </iframe>

  1. Ссылки на соцсети

<article style="font-size: 1.5em"> <h1>Наши соцсети:</h1> ВКонтакте: <a href="https://vk.com"><img src="img/ВК_ИКОНКА.png" alt="ВК" class="networks"></a><br> Telegram: <a href="https://t.me"><img src="img/ТЕЛЕГРАММ_ИКОНКА.png" alt="ТЕЛЕГРАММ" class="networks"></a><br> Дзен: <a href="https://dzen.ru"><img src="img/ДЗЕН_ИКОНКА.png" alt="ДЗЕН" class="networks"></a><br> Instagram: <a href="https://www.instagram.com"><img src="img/ИНСТАГРАМ_ИКОНКА.png" alt="ИНСТАГРАМ" class="networks"></a><br> YouTube: <a href="https://www.youtube.com"><img src="img/ЮТУБ_ИКОНКА.png" alt="ЮТУБ" class="networks"></a><br> </article>

  1. Поле для ввода электронной почты и кнопка, вызывающая JS-функцию генерации промокода

<section style="border: 5px dashed #ccccff; border-radius: 0;"> <h3>Введите свою почту и получите промокод на скидку при втором заказе: </h3> <label> <input type="email" id="emailField" placeholder="myemail@site.com"/> </label> <input type="button" onclick="checkEmail(emailField);" value="Получить" style="width: 200px; height: 100px"/> </section>

// Функция

function checkEmail(textField) { let mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; let promocode = (Math.random()).toString(16); promocode = promocode.replace("0.", " "); promocode = promocode.toUpperCase(); if(textField.value.match(mailformat)) { alert("Ваш промокод: " + promocode); } { alert else ("Электронная почта введена неверно!"); } }

  1. JS-функция для составления заказа

let text = ""; function addProducts() { let counter = 0; for (let amount of document.getElementsByClassName('amounts')) { let pr = document.getElementsByClassName('products')[counter++].textContent; let am = amount.textContent; if (am != 0) { text += pr + ": " + am + "<br>"; } } } function openOrderWindow() { let win = window.open("", "", "width=720,height=480"); win.document.open(); win.document.write('<head> <title>Заказ</title> <link rel="stylesheet" href="css/mystyle.css"/> <script src="js/makeOrder.js"></script> </head>'); win.document.write("<h1>Ваш заказ:</h1>"); if (text != "") { win.document.write(text); } else { win.document.write("Ничего не выбрано<br>"); } win.document.write("<br> Введите адрес для доставки: <br> "); win.document.write("<label>\n" + " <input type=\"email\" id=\"emailField\" placeholder=\"ул. Уличная, дом 1, кв 1\"/>\n" + " </label> <br>"); win.document.write('<input type="button" value="Заказать" onClick="window.close();" style="width: 200px; height: 75px">'); win.document.write('<h6 style="text-align: right; font-size: 0.5em">При ошибке перезагрузите главную страницу</h6>'); win.document.close(); text = ""; }

Соседние файлы в предмете Программирование на Java