Лаб_8 Головков И.Е. 12002108 JavaEE
.pdfФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ БЕЛОГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ
(НИУ «БелГУ»)
ИНСТИТУТ ИНЖЕНЕРНЫХ И ЦИФРОВЫХ ТЕХНОЛОГИЙ КАФЕДРА ИНФОРМАЦИОННЫХ И РОБОТОТЕХНИЧЕСКИХ СИСТЕМ
Отчет по лабораторной работе №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>
2. Метки на интерактивной карте
Магистральная улица, 2В <iframe
src="https://yandex.ru/mapwidget/v1/?indoorLevel=1&ll=36.538543%2C50.573224&mode=search&ol =geo&ouri=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1NTk4NzU4MRJK0KDQvtGB 0YHQuNGPLCDQkdC10LvQs9C0YDQvtC0LCDQnNCw0LPQuNGB0YLRgNCw0LvRjNC90LDRjyDRg9C70LjRhtCwLCAy 0JIiCg15JxJCFftKSkI%2C&z=17.16"
width="300" height="300" allowfullscreen="true"
style="position:relative;"> </iframe>
3. Ссылки на соцсети
<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>
4.Поле для ввода электронной почты и кнопка, вызывающая 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 ("Электронная почта введена неверно!");
}
}
5. JS-функция для составления заказа
let text = "";
function addProducts() { let counter = 0;
for (let amount of document.getElementsByClassName('amounts'))
{
let pr = document.getElementsByClassName('products')[counter++].textConte nt;
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 = "";
}