[JavaScript Study] 2주차 - 이미지 갤러리(gallery-start)

인프런 강의가 너무 기초에 가까워서 스터디원들과 상의한 후 mdn web docs에 있는 문제를 보고

주어진 조건에 따라 코드를 작성하는 방식으로 바꾸었다.

 

IDE는 내가 사용하던게 제일 간편해서 인텔리제이에서 작업 할 예정이다.

-원본-

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery

---

기본 설정

1. 디렉토리를 하나 만든다.

2. 해당 디렉토리 안에 index.html과 main.js. 두개의 파일을 생성한다.

3. main.js를 참조하는 html에 <script>요소를 삽입하여 외부 JavaScript파일을 적용한다.

(닫는 </body>태그 바로 앞에 적용할 것)

<script src = "main.js"></script>

 

아래 파일을 다운받으면 HTML, CSS 모두 작성이 되어있기 때문에

우리는 JS파일만 수정하면 된다.

gallery-start.zip

0.22MB

---

이미지 순회하기

반복문. 즉, for문을 사용해서 thumb-bar div 안에 이미들을 추가해준다.

 

JavaScript 파일에서 "Looping through images" 주석 아래에 for문을 작성할 것이다.

아래에 보면 const newImage = document.createElement('img');가 주어졌고

이 코드는 HTML문서에 이미지를 동적으로 추가하는 역할을 수행한다.

 

1. const newImage = document.createElement('img');

새로운 <img> html요소를 생성하고 이를 newImage라는 이름을 가진 변수에 저장한다.

 

2. newImage.setAttribute('src', xxx);

src 속성을 설정하여 이미지의 URL을 지정한다. 'xxx'는 이미지의 URL이 들어 갈 자리이다.

 

3. newImage.serAttribute('alt','xxx');

alt 속성을 설정해서 이미지가 로드되지 않을 때 대체 텍스를 표시한다. 'xxx'는 대체 텍스트가 들어 갈 자리이다.

 

4. thumbBar.appendChild(newImage);

thumbBar라는 변수로 참조된 html 요소에 새로 생성한 img요소를 자식으로 추가한다.

 

* setAttribute

지정된 html 요소 속성의 값을 설정할 수 있는 함수로 setAttribue('name',"김미미")와 HTML 상에서 name="김미미"와 같은 값이다. 

 

 

1. imageFilenames 이름을 가진 배열을 하나 생성하여 이미지 파일의 이름을 담았다.
2. 위와 마찬가지로 altTexts라는 배열을 선언하여 이미지 대체 텍스트들을 배열로 생성했다.
3. for을 사용했고 이미지 파일 이름 배열을 순회하며 imageFilenames의 길이만큼 반복하는 코드이다.
src 속성에는 images/ 디렉토리 내의 파일 경로를 설정해 즉, images/pic1.jpg, images/pic2.jpg 등으로 해당 경로의 이미지가

선택될 것이고 alt 속성에는 해당 이미지에 대한 대체 텍스트 설정으로 앞서 설정한 배열을 불러온다.
그리고 새 이미지를 thumbBar 요소에 추가한다.

 

---

onclick 핸들러를 각 섬네일 이미지에 추가하기

newImage.addEventListener('click', ...)를 사용하여 각 이미지에 클릭 이벤트 핸들러를 추가하고
이미지가 클릭되면, displayedImage의 src와 alt 속성을 클릭한 이미지의 속성으로 변경한다.

---

어두워지게/밝게 하는 버튼을 실행하는 핸들러 작성하기

버튼 클릭 시 클래스명을 확인하여 'dark'일 경우 'light'로 변경하고, 텍스트를 'Lighten'으로 설정하며,

overlay의 배경 색상을 'rgba(0, 0, 0, 0.5)'로 설정했다.

만약 클래스명이 dark가 아니라면 반대로 설정된다.

 

최종적으로는 아래와 같이 작성했다.

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Declaring the array of image filenames */
// 이미지 파일 이름 배열 선언
const imageFilenames = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg'];

/* Declaring the alternative text for each image file */
// 각 이미지 파일에 대한 대체 텍스트 선언
const altTexts = ['이미지 1', '이미지 2', '이미지 3', '이미지 4', '이미지 5'];

/* Looping through images */
// 이미지 반복
for (let i = 0; i < imageFilenames.length; i++) {
    const newImage = document.createElement('img');
    newImage.setAttribute('src',  `images/${imageFilenames[i]}`);
    newImage.setAttribute('alt', altTexts[i]);

    // onclick 핸들러를 각 섬네일 이미지에 추가하기
    newImage.addEventListener('click', () => {
        displayedImage.setAttribute('src', newImage.getAttribute('src'));
        displayedImage.setAttribute('alt', newImage.getAttribute('alt'));
    });

    thumbBar.appendChild(newImage);
}

/* Wiring up the Darken/Lighten button */
/* 어두워지게/밝게 하는 버튼의 핸들러 설정 */
btn.addEventListener('click', () => {
    const currentClass = btn.getAttribute('class');

    if (currentClass === 'dark') {
        btn.setAttribute('class', 'light');
        btn.textContent = 'Lighten';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    } else {
        btn.setAttribute('class', 'dark');
        btn.textContent = 'Darken';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
    }
});