• Теория
  • Теория

Функция для создания элементов

Обратите внимание, по мере выполнения задачи, мы всё чаще повторяем одни и те же операции: создаём элементы с помощью document.createElement(), добавляем им классы через элемент.classList.add(), а в некоторых случаях и текстовое содержимое с помощью элемент.textContent. Пора вынести повторяющийся код в функцию, чтобы не писать каждый раз много похожих строчек кода.

Объявим функцию, которая будет принимать на вход три строки: имя тега (tagName), имя класса (className) и текстовое содержимое (text) элемента. Внутри неё будем создавать элемент с классом и текстом, а затем возвращать его наружу.

Не у всех элементов есть текстовое содержимое, поэтому дадим возможность вызывать функцию не с тремя, а с двумя параметрами. JavaScript сам по себе это позволяет. Но нам нужно предусмотреть проверку на присутствие третьего параметра. Будем добавлять в элемент текст с помощью textContent только если параметр text существует.

Как проверить наличие параметра? Если параметр не был передан в функцию, его значение внутри функции будет равно undefined, то есть не определено. Значение undefined приводится к логическому значению false, поэтому достаточно такой простейшей проверки:

var createCard = function (required, optional) {
  if (optional) {
    // действия с optional
  }
}

// Функция отработает, но действия с optional выполняться не будут
createCard('Обязательный аргумент');

// Функция отработает и действия с optional выполнятся
createCard('Обязательный аргумент', 'Необязательный аргумент');

А что будет если аргумент передан? Во-первых, он не будет равен undefined. Во-вторых, внутри оператора «круглые скобки» программа получит значение этого параметра и приведёт его к логическому типу. Как вы знаете из части «Условия», строки могут сами выступать в роли условий. Пустая строка приводится в false, а непустая к true. То есть, элементу добавится текстовое содержимое только тогда, когда мы передадим последним аргументом непустую строку. То, что надо.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «JavaScript в браузере» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.