[자바스크립트 예제 #01] Color Flipper 만들기 (hex-code.ver)

background color : #f1f5f8

 

HTML, CSS는 출처 소스와 같으므로 생략한다. 목적은 자바스크립트 응용 예제를 실습하는 것이므로 JS에 대한 이해를 위해 코드를 설명하고 요약하는 포스팅이다.

---

바닐라 자바스크립트 예제 - color flipper

예제 개요

1. 기능
- 메뉴를 필터링 해주는 페이지

2. 자바스크립트 개념
- arrays, array.length
- DOM : getElementById(), querySelector(), style.backgroundColor
- addEventListener()
- Math : floor(), random()

3. app.js
- getRandomNum()으로 생성된 랜덤 숫자가 DOM의 body와 .color의 색상을 조작하는 기능
- 배열로 정해진 색상만 바꿀 수 있다.

4. hex.js
- getRandomNum()으로 생성된 랜덤 숫자가 hex 코드를 조합하고, 이 hex코드로 DOM의 body와 .color의 색상을 변경하는 기능
- hex 코드를 조합할 수 있는 문자들을 배열로 선언해서 다양한 색상으로 바꿀 수 있다.

 

자바스크립트 설명 : app.js, hex.js

이 예제는 2가지 버전의 Color Flipper이다.

1. app.js는 simple 버전으로 내가 지정한 색상으로만 배열을 만들어 바뀌는 스크립트

2. hex.js는 문자로 배열을 만들어 랜덤의 hex code를 조합해주는 스크립트

 

간단한 버전 app. js 

1) 원하는 color 속성(css)을 문자 배열로 만들고 상수로 선언한다. 변경될 HTML의 element도 상수로(btn, color) 선언한다.

const colors = ["green", "red", "rgba(133, 122, 200)", "#f15025"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

2) getRandomNum() 숫자를 랜덤으로 생성하는 함수를 만든다.

- Math.floor은 소수점(0.2323121323)을 내려준다 (0.2)

- Math.random은 임의의 숫자를 반환해준다.

여기서 colors[]배열의 길이만큼 곱하는 이유는 지정한 색상 중 하나만 나와야 하기 때문이다. (colors[0] ~ colors[3])

const colors = ["green", "red", "rgba(133, 122, 200)", "#f15025"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

// 랜덤 숫자 생성하는 함수
function getRandomNum() {
	// 랜덤 숫자 생성 * colors의 배열 길이 => 소수점 내림(floor)
	return Math.floor(Math.random() * colors.length);
};

3) 랜덤 숫자를 생성하는 함수로 나온 결과 값 숫자를 상수로 지정하고, addEventListener의 이벤트리스너(콜백함수)로 body의 배경색과 .color의 색상을 조작하도록 한다.

- textContent는 입력된 문자열을 그대로 넣는 속성이다.

btn.addEventListener("click", () => {
	const randomNum = getRandomNum();
	document.body.style.backgroundColor = colors[randomNum];
	color.textContent = colors[randomNum];
});

 

addEventListener()이란?
모든 문서 객체는 event가 발생한다. 요소를 생성하거나 클릭하거나 키보드로 입력하거나 이벤트가 발생할 때 실행할 함수를 event listener(이벤트 리스너) 또는 event handler(이벤트 핸들러)라고 한다. addEventListener()은 '문서 객체'를 '이벤트' 했을 때, '콜백 함수'를 실행시켜주는 메서드이다. 

 

hex code 색상 조합 - hex.js

1) 배열에 hex code를 조합할 수 있는 문자를 넣는다.

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

2) getRandomNum() 숫자를 랜덤으로 생성하는 함수를 만든다. (=app.js와 같다.)

function getRandomNum() {
  return Math.floor(Math.random() * hex.length);
}

3) addEventListener에 이벤트리스너(콜백함수)로 hex 코드를 만드는 반복문을 만든다.
- 이때, hexColor 변수에 "#"을 할당해준다. hexColor에 getRandomNum()함수로 생성된 숫자를 추가한다. (+= 대입 연산자 사용)

- hexColor("#")와 hex[] 배열의 조합으로 만들어진 랜덤의 hex-code을 .color와 body의 backgroundColor에 넣는다.

btn.addEventListener("click", () => {
  let hexColor = "#";
  for (let i = 0; i < 6; i++) {
    hexColor += hex[getRandomNum()];
    color.textContent = hexColor;
    document.body.style.backgroundColor = hexColor;
  }
});

 

전체 소스보기

BasicJavaScript\ColorFlipper from SSOHERB

 

출처 및 참고(Github)

- javascript-basic-projects from john-smilga

- BasicJavaScript from SSOHERB