아이티에듀넷

2024-08-23 :: 023 Java Script 활용 ②

YEOM-JI 2024. 8. 23. 14:55

 

버튼을 누를 때마다 '랜덤' 하게 색상이 바뀌는 자바 스크립트를 작성해보자.

 


let colors = ["green", "red", "rgba(133,122,200,0.8)", "#f15025", "blue", "yellow" ... ]
//백그라운드 컬러 색상을 배열에 담는다. CSS로 입력이 되는 색상이면 다 된다.

let stringColor = document.querySelector('#colorName')
// HTML 본문에서 색상이 바뀔 때마다 <span> 요소에 컬러 이름을 넣기 위해 변수를 가져오자.

let back = document.querySelector('#backColor')
// 실제 색상이 바뀔 부분을 가져오자.

기능 값은 'CHANGE' 버튼에 onclick 속성으로 지정해주었다.

 

 

 

처음 구상한 스크립트는 if / else if 를 반복하여 값을 넣는 식으로 구성하였다.


function changeColor1(){
      let randomNum = Math.floor(Math.random()*colors.length)
      //Math.random()은 0과 1사이의 랜덤한 값으로 난수를 가져오는데, 여기서 우리는 1보다 더 큰 숫자가 필요하므로 직접 수를 곱해주어야 한다. 지금은 colors 배열에 담긴 index 값 만큼 필요하므로 배열의 길이로 지정하면 된다.

       //if문으로 랜덤값이 index의 숫자와 일치하면 직접 속성과 값을 변경하는 식으로 작성해보았다.
      if(randomNum == 0){
        back.style.backgroundColor = "green"
        document.querySelector('#colorName').innerHTML = "green"
        stringColor.style.color = "green"
      } 
else if(randomNum == 1){
        back.style.backgroundColor = "red"
        document.querySelector('#colorName').innerHTML = "red"
        stringColor.style.color = "red"
      } 
else if(randomNum == 2){
        back.style.backgroundColor = "rgba(133,122,200,0.8)"
        document.querySelector('#colorName').innerHTML = "rgba(133,122,200,0.8)"
        stringColor.style.color = "rgba(133,122,200,0.8)"
      } 
else if(randomNum == 3){
        back.style.backgroundColor = "#f15025"
        document.querySelector('#colorName').innerHTML = "#f15025"
        stringColor.style.color = "#f15025"
      }

       ... (index 수 만큼 반복해야 함...)
    }

 

하지만 이렇게 작성하게 되면 늘어난 색상 만큼 else if문을 추가로 작성해야 하고 직접 속성과 값을 덮어씌우는 방식 또한 귀찮은 방법이기 때문에 다른 방법을 찾기로 했다. 그 다음 생각한 방식은 for문과 if문을 섞어 사용하는 것이었다. 처음 시도 해보는거라 사실 안되면 어쩌나 했는데 깔꼼하게 되었다...

 

 

See the Pen Untitled by IT배움터 (@gfifvcbf-the-typescripter) on CodePen.

 

이렇게 하니 단 몇 줄 만으로 귀찮은 작업 없이 깔끔하게 완성시킬 수 있었다!

 


//변수 i가 colors의 배열만큼 반복되게 만들어 준다.
for(let i = 0; i<colors.length; i++){

          //변수 i가 랜덤으로 나온 정수의 숫자와 일치할 때, 색상을 변경하는 문구를 작성하면 끝! 이걸로 바로 끝이다!
        if(randomNum == i){

          back.style.backgroundColor = colors[i]
          stringColor.innerHTML = colors[i]
          stringColor.style.color = colors[i]
            //들어갈 문구도 colors의 인덱스 값을 넣으면 자동으로 삽입되니 이런식으로 작성하면 됐었다...
        }
      }

 

 

 

어떤 기능은 그냥 CSS로 주는게 더 간편하지 않을까? 드는 기능이 많았지만...

CSS가 더 간편할 때가 있다면, JS도 간편해질 때가 있었는데 그건 바로 슬라이드지 않나 싶다. HTML/CSS로만 이용해서 슬라이드를 만들었을 때 되게 불편하고 만들어야 하는 것도 많았는데 JS로 하니까 생각보다 간편하게 됐다.

 


<script>
    let index = 0;
    //초기값 지정, index값으로 반환될 이미지의 순서를 정하기 때문에 변수를 하나 생성해두었다.

    let imgArray = ["url(/img/slide01.jpg)", "url(/img/slide02.jpg)", "url(/img/slide03.jpg)", "url(/img/slide04.jpg)"]
    //이미지 삽입이 아니라 div 백그라운드 이미지로 줘서 url로 입력해두었다.

     let imgDiv = document.querySelector('#imgDiv')
    let leftB = document.querySelector('#left')
    let rightB = document.querySelector('#right')
    //HTML의 div와 button을 불러와 저장했다.

    leftB.addEventListener("click", left)
    rightB.addEventListener("click", right)
     //해당 버튼에 기능값을 주었다.


    function left(){
      index--;
      //index값을 1씩 감소시키기
      //감소된 index값이 음수로 넘어가면 맨 마지막 index로 이동할 수 있도록 수치 지정하기
      if(index < 0){
        index = imgArray.length-1;
      }
      show()
    }

    function right(){
      index++;
      //index값을 1씩 증가시키기
      //index가 배열의 길이와 같아지면 더 이상 이동할 공간이 없으므로 index의 값을 초기로 지정하기
      if(index == imgArray.length){
        index = 0;
        //더 이상 슬라이드가 넘어가지 못하니까 0번째 index로 돌아가기
      }
      show()
    }
  
    function show(){
      imgDiv.style.backgroundImage = imgArray[index];
        //index에 저장된 변수를 통해 배열을 불러오게 만드는 기능
    }
  </script>

 

 

주석을 달아서 길게 보이지만 실제로 기능부를 보면 길지 않다.

CSS로만 작성하려면 일단 HTML의 길이부터 상당한데...