diff options
Diffstat (limited to 'files/ru/learn/javascript/building_blocks/image_gallery/index.html')
| -rw-r--r-- | files/ru/learn/javascript/building_blocks/image_gallery/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..a0e1e48cd5 --- /dev/null +++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,146 @@ +--- +title: Фотогалерея +slug: Learn/JavaScript/Building_blocks/Image_gallery +tags: + - Обработчик событий + - Оценка + - начальный уровень + - события + - циклы +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Необходимые знания:</th> + <td> + <p>Перед выполнением этого задания вы должны проработать все статьи в этом модуле.</p> + </td> + </tr> + <tr> + <th scope="row">Цель:</th> + <td>Проверить понимание циклов, функций, условных операторов и событий в JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Отправная_точка">Отправная точка</h2> + +<p>Для начала скачайте <a href="https://github.com/ConstantineZz/learning-area/raw/master/javascript/building-blocks/gallery/gallery-start-rv.zip">ZIP файл</a> для примера и распакуйте его содержимое у себя на компьютере.</p> + +<div class="note"> +<p><strong>Замечание</strong>: Вы также можете использовать такие сайты как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для выполнения задания. Вы можте скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги <code><script></code>/<code><style></code> расположенные на самой HTML странице.</p> +</div> + +<h2 id="Обзор_проекта">Обзор проекта</h2> + +<p>В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript кода. Вам нужно написать недостающий JavaScript код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:</p> + +<pre class="brush: 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></pre> + +<p>Результат выглядит следующим образом:</p> + +<p><img alt="" src="https://github.com/ConstantineZz/javaScript/blob/master/gallery.png?raw=true" style="height: 639px; width: 827px;"></p> + +<ul> +</ul> + +<p>Наиболее интересные части CSS файла из примера:</p> + +<ul> + <li>Абсолютно позиционированы три элемента внутри <code><div class="full-img"></code>: <code><img></code>, в котором отображается полноразмерное изображение, пустой <code><div class="overlay"></code>, размер которого имеет тот же размер, что и <code><img></code> помещается прямо над предыдущим div-ом (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и <code><button></code>, который используется для управления эффектом затемнения.</li> + <li>Задана ширина любых изображений внутри <code><div class="thumb-bar"></code> (так называемые «уменьшенные изображения») до 20% и размещены слева так, чтобы они следовали друг за другом на линии.</li> +</ul> + +<p>Ваш JavaScript должен:</p> + +<ul> + <li>Переберите все изображения, и для каждого вставьте элемент <code><img></code> внутри <code>thumb-bar <div></code>, который будет вставлять это изображение на страницу.</li> + <li>Прикрепите обработчик <code>onclick</code> к каждому <code><img></code> внутри <code>thumb-bar <div></code>, чтобы при нажатии на них соответствующее изображение отображалось в элементе <code>display-img <img></code>.</li> + <li>Прикрепите обработчик <code>onclick</code> к кнопке <code><button></code>, чтобы при нажатии на нее к полноразмерному изображению был применен эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li> +</ul> + +<p>Чтобы лучше понять идею, посмотрите на <a href="https://mdn.github.io/learning-area/javascript/building-blocks/gallery/">готовый пример</a> (не заглядывая в исходный код!).</p> + +<h2 id="Этапы_выполнения">Этапы выполнения</h2> + +<p>В следующих разделах описывается, что вам нужно делать.</p> + +<h3 id="Зацикливание_изображений">Зацикливание изображений</h3> + +<p>В файле main.js уже предоставлены строки, в которых хранится ссылка на <code>thumb-bar <div></code> внутри переменной с именем <code>thumbBar</code>, создают новый элемент <code><img></code>, устанавливают его атрибут <code>src</code> на значение placeholder <code>xxx</code> и добавляют этот новый <code><img></code> элемент внутри <code>thumbBar</code>.</p> + +<p>Нужно сделать:</p> + +<ol> + <li>Поместите раздел кода под комментарием <code>/* Looping through images */</code> внутри цикла, который перебирает все 5 изображений - вам просто нужно перебрать пять чисел, каждое из которых представляет каждое изображение.</li> + <li>В каждой итерации цикла замените значение-заполнитель <code>xxx</code> строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута <code>src</code> для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - <code>pic1.jpg</code>, <code>pic2.jpg</code> и т.д.</li> +</ol> + +<h3 id="Добавление_обработчика_onclick_к_каждому_уменьшенному_изображению">Добавление обработчика onclick к каждому уменьшенному изображению</h3> + +<p>В каждой итерации цикла вам нужно добавить обработчик <code>onclick</code> к текущему <code>newImage</code>:</p> + +<ol> + <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code><img></code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведет к тому, что значение <code>src</code> последнего <code><img></code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code><img></code> является целью обработчика. Как получить информацию от объекта события?</li> + <li>Запустите функцию, передав ей возвращаемое значение <code>src</code> в качестве параметра. Вы можете вызвать эту функцию, как хотите.</li> + <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img <img></code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code><img></code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определенная именованная функция.</li> +</ol> + +<h3 id="Написание_обработчика_который_запускает_кнопку_затемнения_подсветки">Написание обработчика, который запускает кнопку затемнения / подсветки</h3> + +<p>Мы уже предоставили строку, в которой хранится ссылка на <code><button></code> в переменной <code>btn</code>. Вам нужно добавить обработчик <code>onclick</code>, который:</p> + +<ol> + <li>Проверяет текущее имя класса, установленное на кнопке <code><button></code> — для этого снова можно использовать <code>getAttribute()</code>.</li> + <li>Если имя класса <code>"dark"</code>, изменяет класс <code><button></code> на <code>"light"</code> (с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba (0,0,0,0.5)"</code>.</li> + <li>Если имя класса не «темное», изменяет класс <code><button></code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code><div></code> на <code>"rgba(0,0,0,0)"</code>.</li> +</ol> + +<p>Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.</p> + +<pre class="brush: js">btn.setAttribute('class', xxx); +btn.textContent = xxx; +overlay.style.backgroundColor = xxx;</pre> + +<h2 id="Советы_и_подсказки">Советы и подсказки</h2> + +<ul> + <li>Вам не нужно каким-либо образом редактировать HTML или CSS.</li> +</ul> + +<h2 id="Оценка">Оценка</h2> + +<p>Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">обсуждения об этом упражнении</a> или в IRC-канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте упражнение - ничего не выиграть от обмана!</p> + +<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<p> </p> + +<h2 id="В_этом_модуле">В этом модуле</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в Вашем коде — условные конструкции</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — Переиспользуемые блоки кода</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою собственную функцию</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемое значение функции</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F">Введение в события</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery">Создание галереи</a></li> +</ul> |