<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Cоздание списка из массива на JS

Cоздание списка из массива на JS

Перед нами стоит задача создать и вывести на страницу список книг из массива, хранящегося в базе данных на сервере. На практике это значит, что нужно статичную верстку данного списка полностью удалить со страницы и написать скрипт на JS для динамического вывода.

Статичная верстки

Данную верстку сформируем динамически.

<ul class="book__list">
    <li class="book__item">
        1.Заводной апельсин
    </li>
    <li class="book__item">
        2.Виноваты звезды
    </li>
    <li class="book__item">
        3.Ходячий замок
    </li>
    <li class="book__item">
         4.Вторая жизнь Уве
    </li>
    <li class="book__item">
        5.Прислуга
    </li>
</ul>

Первым делом получим родителя ul, который оборачивает все эти книги в тегах li. Объявим переменную bookList, далее в документе обратимся по селектору к классу book__list.

const bookList = document.querySelector('.book__list');

Нам нужно убедиться, что внутри родителя ничего нет: обратимся к свойству переменной innerHTML и пропишем пустые кавычки. Таким образом мы очистили список перед началом работы.

bookList.innerHTML = "";

Теперь нам необходимо сформировать верстку при помощи JavaScript и поместить ее на страницу. Все элементы с которыми мы будем взаимодействовать, находятся в базе данных bookDB, в свойстве books. Нам нужно будет перебрать все значения, которые находятся в этом массиве и на их основании сформировать HTML структуру.

const bookDB = {
    books: [
        "Заводной апельсин",
        "Виноваты звезды",
        "Ходячий замок",
        "Вторая жизнь Уве",
        "Прислуга"
    ]
};

Для перебора массива используем метод forEach. Поместим вовнутрь callback функцию, в которую передадим два аргумента: book (название книги из массива) и счетчик i (содержащая порядковый номер книги). Нам необходимо все сгенерированную верстку поместить на HTML странице внутри тега ul. Для этого обратимся к пустой переменной bookList и методу innerHTML и через оператор дополнительно присваивания +=. Это значит, что при каждом повторе цикла, в переменную bookList добавится новая строка с названием книги. Откроем обратные кавычки и поместим фрагмент верстки, которую предстоит размножить.

bookDB.books.forEach((book, i) => {
    bookList.innerHTML += `
        <li class="book__item">${i + 1} ${book}
        </li>
    `;
});

Добавим нумерацию к выводимой книге. Поскольку в программировании нумерация начинается с нуля, то выводить номера нужно, начиная с единицы.

${i + 1} // вывод нумерации
${book} // вывод названия книги

Теперь верстка будет формироваться динамически и все книги из базы данных появятся на странице.

Cоздание списка из массива на JS.

Весь JavaScript код

const bookDB = {
    books: [
        "Заводной апельсин",
        "Виноваты звезды",
        "Ходячий замок",
        "Вторая жизнь Уве",
        "Прислуга"
    ]
};


const bookList = document.querySelector('.book__list');

bookList.innerHTML = "";


bookDB.books.forEach((book, i) => {
    bookList.innerHTML += `
        <li class="book__item">${i + 1} ${book}
        </li>
    `;
});

Язык программирования JavaScript сейчас самый востребованный в веб-разработке и к счастью наиболее простой для новичка. С его помощью программисты делают сайты динамичными и «живыми». Мой видеокурс "Программирование на JavaScript с Нуля до Гуру 2.0", научит Вас думать на JavaScript, писать чистый и красивый код.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.