<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

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

Подписавшись по 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):

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