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

 


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의 길이부터 상당한데...

'아이티에듀넷' 카테고리의 다른 글

2024-08-27 :: 025 HTML / CSS / JS 참고용 포스트  (0) 2024.08.27
2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26
2024-08-22 :: 022 Java Script 활용 ①  (0) 2024.08.22
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21
2024-08-19 :: 019 Java Script 기초 ④  (0) 2024.08.19

 

 

자바 스크립트를 이용하여 나만의 여행 준비물 리스트 목록을 만들어 보았다.

생각보다 막히는 부분이 많아서 고생을 좀 했지만...

아래는 자바스크립트만 해석하고 기록해보겠다. (CSS는 사용자의 입맛에 따라 꾸미면 되므로...)

 


<div id="warp">

      <h1>여행 준비물 점검 목록</h1> //제목이다, JS에서 건드는 건 없다.

      <form action="#">
        <input type="text" id="item" placeholder="준비물을 입력해주세요.">
        <button id="add">추가</button>
      </form>

      <div id="itemList">
        아무 준비도 하지 않으셨군요...
      </div>

</div>

 

붉게 표시한 부분이 자바스크립트에서 불러와 수정을 해 줄 항목들이다.

 


    let itemList = [];
    //입력된 준비물을 받을 배열 선언

    let addBut = document.querySelector('#add')
    //HTML 버튼 불러오기

    addBut.addEventListener("click", addList)
    //HTML 버튼에 기능 할당하기


    function addList(){
      let item = document.querySelector('#item').value
      //input의 내용의 값을 가져옴

      let input_item = item.trim();
      //trim - 가져온 값의 시작과 끝에 있는 공백을 없애줌 (문자열이 있는 경우 중간 공백은 건들지 않음)

      //item값이 공백 또는 아무것도 입력이 안되었을 경우를 대비한 조건식
      if (input_item != null & input_item !=""){
        itemList.push(input_item)
        //값이 있을 경우 배열에 값을 추가하기

        document.querySelector('#item').value = null;
        //input에 공백이 아닌 문자열이 있을 시, itemList 배열에 추가 및 input에 작성된 내용 초기화

        //공백일 경우
      } else {
        alert('준비물을 작성해주세요.')
        document.querySelector('#item').focus();
      }
      
      showList();
      //값을 추가한 뒤, HTML 영역에 나타나게 하는 기능
    }



    function showList(){
      let list = "<ul>"

        //item이 추가될 때마다 for문이 반복하며 업데이트가 됨
      for(let i=0; i < itemList.length; i++){
        list += `<li>${itemList[i]}<span class='close' id=${i}> X <span></li>`
      }

      list += "</ul>"
      document.querySelector('#itemList').innerHTML = list;
      //해당 내용들을 담은 list를 HTML에 출력하기 위함

      removeEvent()
      //여기에 지우는 추가 이벤트를 작성해줘야 작동을 한다...
    }



     //delList()를 수행하기 위한 이벤트 기능
    function removeEvent(){
      let delBut = document.querySelectorAll('.close')
       //변수에 class가 close인 모두를 저장 (배열처럼 저장이 됨)

      for(let i = 0; i < delBut.length; i++){
        delBut[i].addEventListener("click", delList);
        //각각 하나씩 지정하여 기능을 주기 위해 for문을 사용.
      }
    }



    //X를 눌렀을 때 가지고 있는 id 값 (for문에서 돌았던 i값)을 들고오는 기능
    function delList(){
      let id = this.getAttribute("id")
      //this(클릭한 삭제 버튼)의 id값을 가져와 변수에 저장

      itemList.splice(id, 1);
       //id값은 정수기 때문에 위치 지정으로도 쓸 수 있다.
 
      showList();
       //다시 화면 리셋
    }
 
  여기는 오답 부분
  위에와 마찬가지로 delBut에 class가 close인 값들을 담아내기는 했지만, 바로 이벤트를 주니 작동하지 않았었다.
  이유는 배열로 담겼기 때문에 배열 자체에 기능을 주다보니 정상적으로 움직이지 않았던 것이었고, 이를 해결하기 위해서
  removeEvent 기능을 만들어 각 버튼 하나 하나 기능을 지정해 주는 방식을 사용했다.

    let delBut = document.querySelectorAll('.close')

    delBut.addEventListener("click", delList)
      // 이렇게 담으면 배열 전체가 되기 때문에 기능을 넣으려 해도 동작하지 않고 에러가 뜨는겁니다...

 

 

'아이티에듀넷' 카테고리의 다른 글

2024-08-26 :: 024 Java Script 활용 ③  (0) 2024.08.26
2024-08-23 :: 023 Java Script 활용 ②  (0) 2024.08.23
2024-08-21 :: 021 Java Script 기초 ⑥  (0) 2024.08.21
2024-08-19 :: 019 Java Script 기초 ④  (0) 2024.08.19
2024-08-14 :: 018 Java Script 기초 ③  (0) 2024.08.14

+ Recent posts

티스토리툴바