/
index.md
98 lines (61 loc) · 11 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
---
title: Галерея изображений
slug: Learn/JavaScript/Building_blocks/Image_gallery
---
{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.
| Необходимые знания: | Перед выполнением этого задания вы должны проработать все статьи в этом модуле. |
| ------------------- | -------------------------------------------------------------------------------- |
| Цель: | Проверить понимание циклов, функций, условных операторов и событий в JavaScript. |
## Отправная точка
Для начала скачайте [ZIP файл](https://github.com/ConstantineZz/learning-area/raw/master/javascript/building-blocks/gallery/gallery-start-rv.zip) для примера и распакуйте его содержимое у себя на компьютере.
> **Примечание:** вы также можете использовать такие сайты как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/) для выполнения задания. Вы можете скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги `<script>`/`<style>` расположенные на самой HTML странице.
## Обзор проекта
В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript-кода. Вам нужно написать недостающий JavaScript-код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:
```html
<h1>Пример фотогалереи</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg" />
<div class="overlay"></div>
<button class="dark">Темнее</button>
</div>
<div class="thumb-bar"></div>
```
Результат выглядит следующим образом:
Наиболее интересные части CSS файла из примера:
- Абсолютно позиционированы три элемента внутри `<div class="full-img">`: `<img>`, в котором отображается полноразмерное изображение, пустой `<div class="overlay">`, размер которого имеет тот же размер, что и `<img>` помещается прямо над предыдущим div-ом (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и `<button>`, который используется для управления эффектом затемнения.
- Задана ширина любых изображений внутри `<div class="thumb-bar">` (так называемые «уменьшенные изображения») до 20% и размещены слева так, чтобы они следовали друг за другом на линии.
Ваш JavaScript должен:
- Переберите все изображения, и для каждого вставьте элемент `<img>` внутри `thumb-bar <div>`, который будет вставлять это изображение на страницу.
- Прикрепите обработчик `onclick` к каждому `<img>` внутри `thumb-bar <div>`, чтобы при нажатии на них соответствующее изображение отображалось в элементе `display-img <img>`.
- Прикрепите обработчик `onclick` к кнопке `<button>`, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.
Чтобы лучше понять идею, посмотрите на [готовый пример](https://mdn.github.io/learning-area/javascript/building-blocks/gallery/) (не заглядывая в исходный код!).
## Этапы выполнения
В следующих разделах описывается, что вам нужно делать.
### Зацикливание изображений
В файле main.js уже предоставлены строки, в которых хранится ссылка на `thumb-bar <div>` внутри переменной с именем `thumbBar`, создают новый элемент `<img>`, устанавливают его атрибут `src` на значение placeholder `xxx` и добавляют этот новый `<img>` элемент внутри `thumbBar`.
Нужно сделать:
1. Поместите раздел кода под комментарием `/* Looping through images */` внутри цикла, который перебирает все 5 изображений - вам просто нужно перебрать пять чисел, каждое из которых представляет каждое изображение.
2. В каждой итерации цикла замените значение-заполнитель `xxx` строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута `src` для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - `pic1.jpg`, `pic2.jpg` и т.д.
### Добавление обработчика onclick к каждому уменьшенному изображению
В каждой итерации цикла вам нужно добавить обработчик `onclick` к текущему `newImage`:
1. Найдите значение атрибута `src` текущего изображения. Это можно сделать, запустив функцию [`getAttribute()`](/ru/docs/Web/API/Element/getAttribute) в `<img>` в каждом случае и передав ей параметр `«src»` в каждом случае. Но как получить изображение? Использование `newImage` не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение `src` последнего `<img>` будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события `<img>` является целью обработчика. Как получить информацию от объекта события?
2. Запустите функцию, передав ей возвращаемое значение `src` в качестве параметра. Вы можете вызвать эту функцию, как хотите.
3. Эта функция обработчика событий должна установить значение атрибута `src` `displayed-img <img>` равным значению `src`, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий `<img>` в переменной с именем `displayedImg`. Обратите внимание, что здесь нам нужна определённая именованная функция.
### Написание обработчика, который запускает кнопку затемнения / подсветки
Мы уже предоставили строку, в которой хранится ссылка на `<button>` в переменной `btn`. Вам нужно добавить обработчик `onclick`, который:
1. Проверяет текущее имя класса, установленное на кнопке `<button>` — для этого снова можно использовать `getAttribute()`.
2. Если имя класса `"dark"`, изменяет класс `<button>` на `"light"` (с помощью [`setAttribute()`](/ru/docs/Web/API/Element/setAttribute)), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения `<div>` на `"rgba (0,0,0,0.5)"`.
3. Если имя класса не «тёмное», изменяет класс `<button>` на `"dark"`, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения `<div>` на `"rgba(0,0,0,0)"`.
Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.
```js
btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
```
## Советы и подсказки
- Вам не нужно каким-либо образом редактировать HTML или CSS.
## Оценка
Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему [обсуждения об этом упражнении](https://discourse.mozilla.org/t/image-gallery-assessment/24687) или в IRC-канале [#mdn](irc://irc.mozilla.org/mdn) в [Mozilla IRC](https://wiki.mozilla.org/IRC). Сначала попробуйте упражнение - ничего не выиграть от обмана!
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}