Далее на странице...
Здесь начинается реальная практика - работа со страницей средствами JavaScript.
Задание на отработку действий со страницей.
1) Удалить все рекламные блоки со страницы (правая часть сайта).
2) Изменить жанр фильма, поменять "комедия" на "драма".
3) Изменить задний фон постера с фильмом на изображение "bg.jpg". Оно лежит в папке img. Реализовать только при помощи JS.
4) Список фильмов на странице сформировать на основании данных из исходного JS-файла. Отсортировать их по алфавиту.
5) Добавить нумерацию выведенных фильмов.
Исходные данные
Есть исходная страница. Ниже представлен ее код. Это ссылка на архив с исходниками.
HTML-код - Исходная страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Работа со страницей - JavaScript</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<header class="header">
<div class="header__search">
<form action="#">
<input type="text" placeholder="Поиск">
</form>
</div>
<div class="header__logo">
<img src="icons/Logotype.svg" alt="logo">
</div>
</header>
<main class="promo">
<div class="promo__menu">
<nav class="promo__menu-list">
<ul>
<li><a class="promo__menu-item promo__menu-item_active" href="#">Фильмы</a></li>
<li><a class="promo__menu-item" href="#">Сериалы</a></li>
<li><a class="promo__menu-item" href="#">Мультфильмы</a></li>
<li><a class="promo__menu-item" href="#">Клипы</a></li>
<li><a class="promo__menu-item" href="#">Трейлеры</a></li>
</ul>
</nav>
</div>
<div class="promo__content">
<div class="promo__bg">
<div class="promo__genre">КОМЕДИЯ</div>
<div class="promo__title">МАРСИАНИН</div>
<div class="promo__descr">ИСТОРИЯ ЧЕЛОВЕКА, ВЫЖИВШЕГО НА ЧУЖОЙ ПЛАНЕТЕ В ОДИНОЧКУ</div>
<div class="promo__ratings">
<span>IMDb: 8.0</span>
<span>Кинопоиск: 7.7</span>
</div>
</div>
<div class="promo__interactive">
<div>
<div class="promo__interactive-title">ПРОСМОТРЕННЫЕ ФИЛЬМЫ</div>
<ul class="promo__interactive-list">
<li class="promo__interactive-item">ЛОГАН
<div class="delete"></div>
</li>
<li class="promo__interactive-item">ЛИГА СПРАВЕДЛИВОСТИ
<div class="delete"></div>
</li>
<li class="promo__interactive-item">ЛА-ЛА ЛЭНД
<div class="delete"></div>
</li>
<li class="promo__interactive-item">ОДЕРЖИМОСТЬ
<div class="delete"></div>
</li>
<li class="promo__interactive-item">СКОТТ ПИЛИГРИМ ПРОТИВ...
<div class="delete"></div>
</li>
</ul>
</div>
<div>
<form class="add">
<div class="promo__interactive-title">ДОБАВИТЬ НОВЫЙ ФИЛЬМ</div>
<span>Введите название фильма</span>
<input class="adding__input" type="text" placeholder="Что уже посмотрено...?">
<span>Сделать его любимым?</span>
<input type="checkbox">
<span class="yes">Да!</span>
<button>Подтвердить</button>
</form>
</div>
</div>
</div>
<div class="promo__adv">
<div class="promo__adv-title">Реклама от спонсоров</div>
<img src="img/content_1.jpg" alt="some picture">
<img src="img/content_2.jpg" alt="some picture">
<img src="img/content_3.png" alt="some picture">
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>
Исходная страница в Браузере
Решение задачи
JavaScript-код
'use strict';
// Данные из исходного JS-файла - смотрим пункт №4 из условия задачи.
const movieDB = {
movies: [
"Логан",
"Лига справедливости",
"Ла-ла лэнд",
"Одержимость",
"Скотт Пилигрим против..."
]
};
// ------------------------ 1-я часть задания ------------------------
// Доступ к изображениям (img) из блока с рекламой (promo__adv) - строка №78
const adv = document.querySelectorAll('.promo__adv img');
// Удаляем все изображения/рекламные блоки
adv.forEach(function (item) {
item.remove();
});
// ------------------------ 2-я и 3-я части задания ------------------
// Доступ к блоку с постером - строка №34. И через него к блоку с жанром - строка №35
const poster = document.querySelector('.promo__bg'),
genre = poster.querySelector('.promo__genre');
// Меняем жанр
genre.textContent = 'драма';
// Меняем задний фон постера
poster.style.backgroundImage = 'url("img/bg.jpg")';
// ----------------------- 4-я и 5-я части задания --------------------
// Доступ к блоку/списку с просмотренными фильмами - строка №46
const movieFilms = document.querySelector(".promo__interactive-list");
// Удаляем список с фильмами (весь код в данном блоке) - вместо него "ничего"
movieFilms.innerHTML = "";
// Сортировка массива/списка с фильмами - Исходный JS-код - строка №3
movieDB.movies.sort();
// Методом перебора forEach перебираем все элементы массива (названия фильмов)
// И вставляем названия фильмов в блок movieFilms вместе с фрагментом соответствующего кода
// item - элемент массива, i - индекс элемента массива
movieDB.movies.forEach(function (item, i) {
movieFilms.innerHTML = movieFilms.innerHTML + `
<li class="promo__interactive-item">${i + 1}. ${item}
<div class="delete"></div>
</li>`;
});
Результат в Браузере
Оптимизация кода
Оптимизации js-кода заключается в следующем.
1. Можно использовать стрелочные функции - смотрим в коде выше строки 20 и 50 (они будут меняться).
2. И сокращенное сложение - строка 51.
JavaScript-код - Оптимизация кода
'use strict';
adv.forEach(item => {
item.remove();
});
movieDB.movies.forEach((item, i) => {
movieFilms.innerHTML += `
<li class="promo__interactive-item">${i + 1}. ${item}
<div class="delete"></div>
</li>`;
});
Это была практическая задача по работе со страницей средствами JavaScript.
