이제 우리는 JavaScript의 핵심적인 구성 요소를 살펴보았으므로, 우리는 반복문, 함수, 조건문, 그리고 이벤트에 대한 여러분의 이해를 시험할 것입니다. 많은 웹사이트들에서 보게 될 꽤 흔한 아이템인 — JavaScript를 이용하는 이미지 갤러리를 만듦으로써 말이죠.
| 필요한 사전 지식: | 이 평가를 시도하기 전에 여러분은 이 모듈의 모든 문서를 독파해야만 합니다. |
|---|---|
| 목표: | JavaScript 반복문, 함수, 조건문, 그리고 이벤트에 대한 이해 시험하기. |
이 평가를 시작하기 위해, 다음의 링크로 가서 예제에 대한 ZIP 파일을 다운로드하고, 압축을 해제한 후 진행하세요.
그 대신에, JSBin 나 Glitch 같은 사이트를 이용할 수 있습니다. HTML, CSS 그리고 JavaScript를 이 온라인 에디터 중 하나에 붙여넣기할 수 있습니다. 만약 온라인 에디터가 분리된 JavaScript/CSS 패널을 가지고 있지 않다면, 자유롭게 HTML 페이지 내부의 인라인 <script>/<style> 요소에 넣으세요.
Note: 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.
여러분에게 몇몇 HTML, CSS 그리고 이미지 에셋(asset) 그리고 몇 줄의 JavaScript 코드가 제공되었습니다; 여러분은 이것을 작동하는 프로그램으로 만들기 위해 필수적인 JavaScript를 작성할 필요가 있습니다. HTML body는 다음과 같습니다:
<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>, <img>와 같은 크기이고 이것 바로 위에 놓여지는 비어있는 <div> (반투명한 배경색을 통해 이미지에 어두워지는 효과를 적용하기 위해 쓰입니다), 그리고 어두워지는 효과를 제어하기 위해 쓰이는 <button>.thumb-bar <div> (소위 "섬네일" 이미지) 내부의 이미지들의 폭을 20%로 설정하고, 사진들이 한 줄에서 서로의 다음에 오도록 왼쪽으로 부유시킵니다.여러분의 JavaScript는 다음을 하기를 필요로 합니다:
<img> 요소를 페이지에 그 이미지를 끼워 넣는 thumb-bar <div> 내부에 삽입하기.onclick 핸들러를 thumb-bar <div> 내부의 각 <img>에 부착해 그것들이 클릭되었을 때, 해당하는 이미지가 displayed-img <img> 요소에 표시되도록 하기.onclick 핸들러를 <button>에 부착해 이것이 클릭되었을 때, 어두워지는 효과가 전체 크기 이미지에 적용되도록 하기. 이 버튼이 다시 클릭되었을 때, 어두워지는 효과는 다시 사라집니다.더 많은 생각을 제공 받으려면, 완성된 예제를 살펴보세요. (소스 코드 훔쳐보기 없기!)
다음의 섹션들은 무엇을 할 필요가 있는지 설명합니다.
우리는 이미 thumbBar 상수 내부에 thumb-bar <div>에 대한 참조를 저장하고, 새로운 <img> 요소를 생성하고, 그것의 src 어트리뷰트를 플레이스홀더 값 xxx로 설정하고, 그리고 thumbBar 내부에 이 새로운 <img> 요소를 추가하는 코드를 제공했습니다.
여러분은 다음을 할 필요가 있습니다:
xxx 플레이스홀더 값을 각 경우의 이미지 경로와 동일한 문자열으로 대체하세요. 우리는 src 어트리뷰트의 값을 각 경우에서 이 값으로 설정하고 있습니다. 각 경우에서, 이미지는 이미지 디렉토리 내부에 있고 그것의 이름은 pic1.jpg, pic2.jpg 등등이라는 것을 기억해 두세요.각각의 반복에서, 여러분은 onclick 핸들러를 현재의 newImage에 추가할 필요가 있습니다 — 이 핸들러는 현재 이미지의 src 어트리뷰트의 값을 찾아야만 합니다. displayed-img <img>의 src 어트리뷰트 값을 매개변수로서 전달된 src 값으로 설정하세요.
그 대신에, 여러분은 섬네일 바에 하나의 이벤트 리스너를 추가할 수 있습니다.
우리의 어두워지게/밝게 하는 <button>은 가만히 있습니다 — 우리는 이미 btn 상수에 <button>에 대한 참조를 저장하는 코드 라인을 제공했습니다. 여러분은 다음을 수행하는 onclick을 추가할 필요가 있습니다:
<button>에 설정된 현재 클래스명을 확인 — 여러분은 다시 이것을 getAttribute()를 사용함으로써 달성할 수 있습니다."dark"라면, <button> 클래스를 "light"로 (setAttribute()를 사용하여), 이것의 텍스트 콘텐츠를 "Lighten"으로, 그리고 덮어씌운 <div>의 {{cssxref("background-color")}}를 "rgba(0,0,0,0.5)"로 변경."dark"가 아니라면, <button> 클래스를 "dark"로, 이것의 텍스트 콘텐츠를 다시 "Darken"으로, 덮어씌운 <div>의 {{cssxref("background-color")}}를 "rgba(0,0,0,0)"로 변경.다음의 코드 라인은 위의 2와 3에서 규정된 변화 달성에 대한 기초를 제공합니다.
btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}