We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.

Необходимые знания:

Перед выполнением этого задания вы должны проработать все статьи в этом модуле.

Цель: Проверить понимание циклов, функций, условных операторов и событий в JavaScript.

Отправная точка

Для начала скачайте ZIP файл для примера и распакуйте его содержимое у себя на компьютере.

Замечание: Вы также можете использовать такие сайты как    JSBin или Thimble для выполнения задания. Вы можте скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги <script>/<style> расположенные на самой HTML странице.

Обзор проекта

В примеер вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript кода. Вам нужно написать недостающий JavaScript код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:

<h1>Image gallery example</h1>

<div class="full-img">
  <img class="displayed-img" src="images/pic1.jpg">
  <div class="overlay"></div>
  <button class="dark">Darken</button>
</div>

<div class="thumb-bar">

</div>

Результат выглядит следующим образом:

Наиболее интересные части файла CSS примера:

  • Абсолютно позиционируйте три элемента внутри full-img <div><img>, в котором отображается полноразмерное изображение, пустой <div>, размер которого имеет тот же размер, что и <img> помещается прямо над верхней частью (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и <button>, который используется для управления эффектом затемнения.
  • Задайте ширину любых изображений внутри thumb-bar <div> (так называемые «уменьшенные изображения») до 20% и поместите их влево, чтобы они сидели рядом друг с другом на линии.

Ваш JavaScript должен:

  • Прокрутите все изображения, и для каждого вставьте элемент <img> внутри панели большого thumb-bar <div>, который будет вставлять это изображение на страницу.
  • Прикрепите обработчик onclick к каждому <img> внутри thumb-bar <div>, чтобы при их нажатии соответствующее изображение будет отображаться в элементе display-img <img>.
  • Прикрепите обработчик onclick к кнопке <button>, чтобы при щелчке на полноразмерное изображение был применен эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.

Чтобы дать вам больше идеи, посмотрите на законченный пример (не заглядывая в исходный код!)

Шаги по завершению

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

Зацикливание изображений

Мы уже предоставили вам строки, в которых хранится ссылка на thumb-bar <div> внутри переменной с именем thumbBar, создаем новый элемент <img>, устанавливаем его атрибут src на значение placeholder xxx и добавляем этот новый <img> элемент внутри thumbBar.

Тебе нужно:

  1. Поместите раздел кода под комментарием «Зацикливание изображений» внутри цикла, который проходит через все 5 изображений - вам просто нужно пропустить пять чисел, каждый из которых представляет каждое изображение.
  2. В каждой итерации цикла замените значение-заполнитель xxx строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута src для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - pic1.jpg, pic2.jpg и т.д.

Добавление обработчика onclick к каждому уменьшенному изображению

В каждой итерации цикла вам нужно добавить обработчик onclick к текущему newImage - это должно:

  1. Найдите значение атрибута src текущего изображения. Это можно сделать, запустив функцию getAttribute() в <img> в каждом случае и передав ей параметр «src» в каждом случае. Но как получить изображение? Использование newImage не будет работать, поскольку цикл завершен до применения обработчиков событий; это приведет к тому, что значение src последнего <img> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <img> является объектом обработчика. Как получить информацию от объекта события?
  2. Запустите функцию, передав ей возвращаемое значение src в качестве параметра. Вы можете вызвать эту функцию, как хотите.
  3. Эта функция обработчика событий должна установить значение атрибута src displayed-img <img> на значение src, переданное в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <img> в переменной с именем displayImg. Обратите внимание, что мы хотим здесь определенную именованную функцию.

Написание обработчика, который запускает кнопку затемнения / подсветки

Это просто оставляет наш darken / lighten <button> - мы уже предоставили строку, в которой хранится ссылка на <button> в переменной btn. Вам нужно добавить обработчик onclick, который:

  1. Проверяет текущее имя класса, установленное на кнопке <button> - вы можете снова достичь этого, используя getAttribute().
  2. Если имя класса "dark", изменяет класс <button> на "light" (с помощью setAttribute()), его текстовое содержимое на «Lighten» и background-color overlay <div> в "rgba (0,0,0,0.5)".
  3. Если имя класса не «темное», изменяет класс <button> на "dark", его текстовое содержимое обратно на «Darken» и background-color наложения <div> на "rgba(0,0,0,0)".

Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.

btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

Советы и подсказки

  • Вам не нужно каким-либо образом редактировать HTML или CSS.

Assessment

Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему обсуждения об этом упражнении или в IRC-канале #mdn в Mozilla IRC. Сначала попробуйте упражнение - ничего не выиграть от обмана!

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: slychai85, saniaky
Обновлялась последний раз: slychai85,