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