[바닐라코딩 | Javascript] - Drawing Webpages.Background Changer

1)Background Changer

(1)문제

Background Changer - Starter Kit

 

(2)풀이

①내 풀이

임의의 요소를 추출해서 새 배열의 item으로 push하였으며 해당 배열 데이터 내 item들을 문자열로 합쳤다.

//DOM 객체 설정
let NumString = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']
let buttonElement = document.querySelector('button');
let pElement = document.querySelector('p');
let divElement = document.querySelector('div');

//배열 내 Item을 임의로 6개 추출하기.
let randomColor = function(){
    let newArr =  []
    for(let i =0; i<6; i++){
    //random을 여러 번 실행하기 위해 for문 안에서 변수를 선언해야함.
    let itemNum= Math.floor(Math.random() * NumString.length) 
    newArr.push(NumString[itemNum]);
    }     
    //newArr 배열 데이터의 item을 모두 합쳐 하나의 문자열로 만들기
    return newArr.join("");
    }

//# 붙이기
let hexCode= '#'+ randomColor()


//p 태그의 text 내용도 바뀌고, 관련 색상으로 배경 변경된다.
buttonElement.addEventListener('click',function(){
  pElement.textContent = hexCode;
  divElement.style.backgroundColor = hexCode
})

②바닐라코딩 풀이

임의의 요소를 추출해서 새 문자열에 합쳤다.

function hexGenerator() {
  const hexNumbers = [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    'A',
    'B',
    'C',
    'D',
    'E',
    'F'
  ];

  let result = "#";
  
  for (var i = 0; i < 6; i += 1) {
    const randomIndex = Math.floor(Math.random() * hexNumbers.length);
    result += hexNumbers[randomIndex];
  }
  
  return result;
}

 

(3)관련 학습

①배열에서 임의의 요소를 가져오는 방법

⑴Math.random 사용법 외에 ⑵lodash 라이브러리 sample() ⑶sort() 사용법이 있다.

//Math.random()
const strArray = ['A', 'B', 'C', 'D', 'E'];
const randomValue = strArray[Math.floor(Math.random() * strArray.length)];

//lodash에서 지원하는 sample(), random(), shuffle()
const strArray = ['A', 'B', 'C', 'D', 'E'];
const randomValue = _.sample(strArray);

//Array.sort()
const strArray = ['A', 'B', 'C', 'D', 'E'];
const randomArray = strArray.sort(() => 0.5 - Math.random())
const [randomValue] = randomArray;

 

[JavaScript]배열에서 임의의 요소를 가져오는 방법

 

②배열의 요소들을 하나의 문자열로 합치기

array.join(구분자), 구분자를 전달하지 않으면 자동으로 쉼표(,)로 구분되며 구분자로 공백(" ")을 전달하면 각 item별로 공백이 생긴다. 추가로 문자열 합치기 메소드인 concat()도 소개해주고 있다.

//쉼표
onst arr = ["A", "friend", "to", "all", "is", "a", "friend", "to", "none"];
const message = arr.join();
console.log(message); // "A,friend,to,all,is,a,friend,to,none"

//공백
const arr = ["A", "friend", "to", "all", "is", "a", "friend", "to", "none"];
const message = arr.join(" ");
console.log(message); // "A friend to all is a friend to none

 

[javascript] 문자열 합치기 - concat(), 배열의 요소들을 하나의 문자열로 합치기 - join()

 

(4)헷갈리는 사항

 

①내용

for 실행문에 꼭 변수 i 없어도 i 수 만큼 실행문 반복된다. 또한 push(array)와 같이 배열 데이터를 push 인수로 넣으면 새 데이터에 해당 배열 데이터가 모두 추가된다. 문자열 합치는 concat()과 유사하다.

 

②예시

itemNum=[1,2,5,6,4,7]
let newArr =  []
let randomItem= Math.floor(Math.random() * itemNum.length) 
// 실행문에 i 변수 없음.
for(let i =0; i< 7; i++){
  newArr.push(itemNum); }
console.log(newArr);

//console에 배열 데이터의 한 item으로 7개가 있는 새 배열 데이터가 출력된다.
// [object Array](7)
[ //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7], //[object Array](6)
[1,2,5,6,4,7]]

③추가 예시

push의 인수는 쉼표(,)로 구분되어 새 배열 데이터의 item으로 추가된다.

let newArr =  [] 
for(let i =0; i< 2; i++){
  newArr.push(1,2); }
console.log(newArr);

//console에 [1,2,1,2] 출력된다