들어가기에 앞서..
기존 html, css파일은 있으며 js만 수정하여 알고리즘을 작성하였습니다.
헥사코드 6자리를 조합하여 클릭하면 색상을 만드는 것입니다.
case
첫 화면 입니다. 클릭 미 버튼을 클릭하면 헥사코드를 조합하여 색상을 생성해냅니다.
예시로 이렇게 색상이 클릭할때마다 변경됩니다.
기존 js를 삭제하고 새로 작성해봅니다.
배경 이미지와 버튼, hex color가 작성되는 부분을
getSelector 또는 getElementByID로 가져옵니다.
헥사 코드는 0~9까지의 10개의 숫자와
A~F까지의 문자로 이루어 졌습니다.
총 16개의 문자로 이루어졌고 6자리를 배합하여 색상코드를 만듭니다.
그러므로 헥사 코드 문자들을 배열로 작성해줍니다.
const hexaCode = ["0","1","2","3","4","5","6","7","8","9"]
const hexaCodeA = ["A","B","C","D","E","F"]
const plus = hexaCode.concat(hexaCodeA);저는 concat으로 합쳤습니다. concat으로 배열을 합쳤는데
그냥 한번에 16문자를 합치면 가독성이 더 좋아보일수 있습니다.
addEventListener("click",change)를 만들어
클릭시에 함수가 실행되도록 작성해줍니다.
함수를 change로 만들었습니다.
function change() {
for(i=0;i<6;i++){
let johap = plus[parseInt(Math.random()*plus.length)]
random+= johap;
}
img.style.background = '#'+random;
text.innerText = '#'+random;
random=''; //초기화
}제가 만든 함수 부분입니다.
for문으로 반복하여 한자리씩 랜덤으로 생성되게 만들었고
그 값을 모아 random에 저장하였습니다.
그리고 백그라운드 색상과 텍스트를 넣어주었습니다.
마지막에 작성된 random=''; 는 초기화를 시키기 위해서 작성하였습니다.
만일 작성되지 않으면 6자리 숫자가 누적되며 연달아 작성됩니다.
study
이번에는 parseInt , innerText 에 대해서 배우게 되었습니다.
parseInt
parseInt() 함수는 문자열 인자를 구문분석하여 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환합니다.
즉, math.random을 사용하면 0~1까지의 값이 랜덤으로 생성되는데
0.00123 ,0.1,0.5325 등등 소수형식으로 나타나는데
이를 정수로 반환하기 위해서 사용하였습니다.
innerText
제가 사용한 일례로는 글작성부분을 text를 선언하였고
text.innerText 를 사용하여 값을 작성하였습니다.
innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다.
즉 텍스트를 추가할수 있습니다.
innerText는 textContent와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.
두개 모두 글자를 가져오기에 두가지 중 어느것을 사용하느냐 헷갈렸는데
innerText 대부분 글이 잘 보이도록 수정하는 과정을 거치는데
textcontent는 모든 것을 가져온다는 차이점이 있습니다.
간단하게 공백에서 차이가 나는데 innerText는 불필요한 공백을 삭제하는데
textcontent는 모든 공백을 가지고 옵니다.
