June 28th, 2021

JavaScript: стили и классы, CSS-позиционирование

Решил задачу «Создать уведомление» к подразделу 1.8 «Стили и классы» второй части учебника по JavaScript.

Сама задача несложная для того, кто читает обсуждаемый учебник по порядку, но требует некоторых дополнительных знаний по языкам HTML и CSS. В обсуждаемом учебнике эти знания не даются.

По условиям задачи имеется HTML-страница (в песочнице), к которой прилагается файл со стилями. Ссылка на файл со стилями прописана в заголовочной части данной HTML-страницы:
<link rel="stylesheet" href="index.css">

В этом файле со стилями заданы стили для двух типов (классов) HTML-элементов:
.notification {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  border: 1px solid black;
  font-size: 20px;
  background: white;
  text-align: center;
}

.welcome {
  background: #b80000;
  color: yellow;
}

Еще на заданной HTML-странице находятся HTML-элементы h2 и p с неким текстом. Содержание текста неважно, его присутствие просто изображает содержание любой HTML-страницы (поэтому сам текст представляет собой известный текст-заполнитель (рыбу) «Lorem ipsum»).

Требуется написать функцию showNotification, которая получает некие параметры options и создает уведомление на заданной HTML-странице с помощью HTML-элемента div класса notification и с заданным (в параметрах) содержимым. Уведомление должно исчезнуть через 1,5 секунды.

В песочнице дана заготовка для будущей функции:
1.
function showNotification({top = 0, right = 0, className, html}) {
    /* ваш код */
}
Из которой мы узнаём, что параметры options будущей функции представляют собой четыре отдельных параметра top, right, className и html.

Такое представление параметров функции как свойств некоего объекта было описано в подразделе 5.10 «Деструктурирующее присваивание» (см. там параграф «Умные параметры функций») первой части обсуждаемого учебника.

По условиям задачи создаваемое уведомление следует отобразить на заданной HTML-странице по заданным координатам с помощью CSS-позиционирования.

Также в песочнице задан тестирующий код для нашей будущей функции:
// тестирование
let i = 1;
setInterval(() => {
    showNotification({
        top: 10,               // 10px от верхней границы окна (по умолчанию 0px)
        right: 10,             // 10px от правого края окна (по умолчанию 0px)
        html: "Привет " + i++, // текст уведомления
        className: "welcome"   // дополнительный класс для div (необязательный параметр)
    });
}, 2000);
Из которого можно понять назначение четырех параметров нашей будущей функции.

Итак, решим задачу. Нам нужно создать HTML-элемент div, прописать его свойства и содержимое, добавить его на HTML-страницу и удалить через 1,5 секунды. Меняем код:
2.
function showNotification({top = 0, right = 0, className, html}) {
    let div = document.createElement("div"); // создаём HTML-элемент

    // прописываем его свойства и содержимое
    div.className = "notification" + (className ? (" " + className) : "");
    div.innerHTML = html;
    div.style.top = top + "px";
    div.style.right = right + "px";

    document.body.append(div);               // добавляем его на HTML-страницу
    setTimeout(() => div.remove(), 1500);    // удаляем его через 1,5 секунды
}
Вот, собственно, и всё. Разбор задания занял львиную долю времени решения. (В принципе, это обычное дело для программирования. Как говорится, семь раз отмерь, один раз отрежь.)

Лично для меня здесь в новинку было CSS-позиционирование. Для CSS-позиционирования созданного в нашей функции HTML-элемента div в данном случае используется четыре свойства стиля: position, z-index, top и right. Первые два определены в описании класса notification (см. в начале поста), третий и четвертый — в нашей функции showNotification.

position: fixed; (фиксированное позиционирование) означает, что при прокрутке HTML-страницы в браузере HTML-элемент будет оставаться на указанном месте относительно области просмотра, а не прокручиваться вместе со страницей. При этом свойства top и right определяют расстояние до HTML-элемента соответственно от верхней и правой границы области просмотра. Свойство z-index определяет, как HTML-элемент будет взаимодействовать с другими HTML-элементами, если эти HTML-элементы наложатся друг на друга (чей z-index будет больше, тот HTML-элемент окажется выше других, накроет других). Подробнее тут:

https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Positioning