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