무슨 16 진수!? (자바 스크립트에서 임의의 16진수 색상 코드를 생성하는 방법)

가장 최근Flatiron School project의 경우 페이지에 있는 요소 중 하나의 배경색을 프로그래밍 방식으로 무작위로 변경할 수 있기를 원했습니다. 필요한 것은 페이지의 다양한 요소를 호출onclick할 수 있는 재사용 가능한 기능이었습니다. 이를 실현하기 위해 찾은 두 가지 방법은 다음과 같습니다.

첫째, 저는 설정 색상을 어디에도 저장하고 싶지 않다는 것을 알았습니다. 설정된 색상 코드로 채워진 배열이나 객체를 유지하는 것은 지루한 일이 될 것이며 색상 선택이 정말 무작위적이기를 원했습니다. 16진수 색상 코드는 상대적으로 짧고 이를 구성하는 데 필요한 데이터(숫자 0-9 및 문자 a-f)가 너무 많은 공간을 차지하지 않기 때문에 16진수 색상 코드를 사용하기로 결정했습니다. 이것이 제가 초기(약간 "게으른") 솔루션을 생각해낸 방법입니다.

먼저 가능한 모든 16진수 배열을 만듭니다.

const digits = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']

그런 다음 기본 16진수 코드 문자열을 설정해야 합니다.

let hexCode = "#" 

해시/octothorpe가 준비되어 있는 문자열을 설정하므로 숫자를 문자열에 추가할 수 있습니다.

그런 다음 배열에서 무작위로 16진수를 선택해야 합니다. 이를 위해 Math.round() 및 Math.random()를 사용하여 무작위로 선택된 배열 인덱스를 가져옵니다. 해당 숫자가 있으면 16진수 색상 코드의 길이가 6자리이므로 문자열의 길이가 7자(6자리 + 해시/옥토소프)가 될 때까지 hexCode 문자열에 추가합니다.

while( hexCode.length < 7 ){
  hexCode += digits[ Math.round( Math.random() * digits.length ) ]
}

Math.random() 함수가 0과 1 사이의 실수를 반환하기 때문에 digits.length에 digits(또는 Math.random() 배열의 항목 수)를 곱합니다. 이 숫자에 digits의 항목 수를 곱하면, 우리는 항상 0과 배열의 총 항목 수 사이에 있는 부동 소수점을 얻도록 합니다. 이 함수를 Math.round()로 래핑하여 반환된 부동 소수점을 가장 가까운 정수로 반올림합니다. 이렇게 하면 총 숫자에 0과 배열의 총 길이가 포함됩니다. 그런 다음 이 임의의 정수를 인덱스로 사용하여 digits 배열에서 선택합니다.

이 작업을 완료하면 return hexCode 만 하면 되며 최종 함수는 다음과 같습니다.

function generateRandomHexCode(){
  const digits = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']

  let hexCode = "#" 

  while( hexCode.length < 7 ){
    hexCode += digits[ Math.round( Math.random() * digits.length ) ]
  }

  return hexCode 
}

다음은 이 함수의 몇 가지 샘플 출력입니다.

> generateRandomHexCode()
'#fd88d4'
> generateRandomHexCode()
'#349cba'
> generateRandomHexCode()
'#43a29e'
> generateRandomHexCode()
'#1a1d94'

이것은 우리가 필요로 하는 대로 정확하게 작동합니다! 그러나이 솔루션을 생각해 낸 후에도 16 진수 숫자를 생성하는 프로그래밍 방식이 더 있는지 궁금했고 실제로 존재합니다!

먼저 16진수(또는 16진법) 숫자가 작동하는 방식에 대해 이야기해 보겠습니다. 16진수에는 10진수 0-9와 문자 a-f가 포함됩니다. 이는 10진수(또는 10진수) 숫자 0-15에 해당합니다. 다음은 간단한 차트입니다.



따라서 십진수를 다른 진법으로 변환하는 방법을 찾을 수 있다면 0-15 사이의 임의의 숫자를 생성하고 이를 16진법으로 변환하기만 하면 됩니다. JavaScript에서는 숫자를 빠르고 쉽게 변환할 수 있습니다. .toString() 방법을 사용하고 기본 자릿수를 전달하는 다른 숫자 밑수입니다.

예를 들어 .toString(2)를 사용하여 숫자를 이진수로 변환할 수 있습니다.

  > (10).toString(2)
  '1010'

  /* if you do not pass the number to `.toString()` 
inside of parentheses you will get a syntax error */

16진수로 변환된 몇 개의 십진수로 이것을 시도할 때 어떤 일이 발생하는지 봅시다:

  > (0).toString(16)
  '0'
  > (11).toString(16)
  'b'
  > (5).toString(16)
  '5'
  > (15).toString(16)
  'f'

완벽한! 그것이 바로 우리가 기대했던 것이고 우리에게 필요한 것입니다!

이 지식을 사용하여 다음과 같이 16진수 코드 무작위화 기능을 변환할 수 있습니다.

  function generateRandomHexCode() {
    let hexCode = "#" 

    while ( hexCode.length < 7 ) {
      hexCode += (Math.round(Math.random() * 15)).toString(16) 
    }

    return hexCode 
  }

이 버전의 함수에서는 Math.round() 및 Math.random() * 15를 사용하여 0에서 15 사이의 난수를 생성한 다음 .toString(16)를 사용하여 해당 숫자를 해당하는 16진수로 변환하고 새로 생성된 숫자를 hexCode에 추가합니다. 6자리가 될 때까지 기본입니다.

다음은 몇 가지 결과 16진수 코드입니다.

  > generateRandomHexCode()
  '#d5758c'
  > generateRandomHexCode()
  '#26711b'
  > generateRandomHexCode()
  '#8deca6'
  > generateRandomHexCode()
  '#3df62c'
  > generateRandomHexCode()
  '#1a293a'

훌륭한!

이 출력을 사용하여 다음과 같이 프로젝트에서 및 요소의 color (또는 backgroundColor )를 업데이트할 수 있습니다.

  someElement.style.backgroundColor = generateRandomHexCode()

아래 CodePen에서 이 코드가 작동하는 것을 볼 수 있습니다.



알고 있는 다른 16진수 코드 생성 방법이 있는지 알려주고 자신의 프로젝트에서 이 방법을 시도한다면 확실히 알려주세요!

xx 에밀리/