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

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

Обратите внимание, по мере выполнения задачи, мы всё чаще повторяем одни и те же операции: создаём элементы с помощью 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. То есть, элементу добавится текстовое содержимое только тогда, когда мы передадим последним аргументом непустую строку. То, что надо.

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

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

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

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

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

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