[JavaScript] for 반복문 사용하는 방법

프로그래밍 언어/JavaScript 2022. 11. 27. 15:50

JavaScript에서 반복문을 사용하려면? JAVA랑 차이는 없다. 그래도 예제를 통해 차근차근 정리해보려고 한다.

📑 tab 목록 만들어보기

다음과 같은 HTML 코드가 있다. 이는 3가지 tab을 통해 각각 title을 클릭하면 content를 보여주게 동작하려면? js로 이벤트를 운임해줘야한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
    <title>Document</title>
</head>
<style>
    ul.list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #ccc;
    }
    ul.list::after {
      content: '';
      display: block;
      clear: both;
    }
    .tab-button {
      display: block;
      padding: 10px 20px 10px 20px;
      float: left;
      margin-right: -1px;
      margin-bottom: -1px;
      color: grey;
      text-decoration: none;
      cursor: pointer;
    }
    .orange {
      border-top: 2px solid orange;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid white;
      border-left: 1px solid #ccc;
      color: black;
      margin-top: -2px;
    }
    .tab-content {
      display: none;
      padding: 10px;
    }
    .show {
      display: block;
    }
  </style>
<body>

    <div class="container mt-5">
        <ul class="list">
          <li class="tab-button">Products</li>
          <li class="tab-button orange">Information</li>
          <li class="tab-button">Shipping</li>
        </ul>
        <div class="tab-content">
          <p>상품설명입니다. Product</p>
        </div>
        <div class="tab-content show">
          <p>스펙설명입니다. Information</p>
        </div>
        <div class="tab-content">
          <p>배송정보입니다. Shipping</p>
        </div>
      </div> 


      <script src="2-1-tab.js"></script>


    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

contents를 보여주는 것 뿐만이 아니라 어떤 버튼을 클릭했는지 css style의 orange 클래스로 값을 미리 지정해뒀다. 그럼 각각 버튼을 클릭했을 때 현재 버튼 표시와 내용 보여지게하는 건 어떻게 할까???

📑 js 동작 작성하기

숙련자가 아닌 이상 구현하려고 하는 동작을 한글로 먼저 작성해보면 코드짤 때 도움이 된다. for문을 들어가기 전에 이렇게 하나씩 동작을 구상해보는 것도 도움이 될 수 있다.

우리가 구현해야되는 동작은 다음과 같다.

1. 버튼0,1,2에 붙어있던 orange 클래스명 전부 제거하라고 코드 3줄 짜기
2. 버튼0에 orange 클래스명 부착
3. 박스0,1,2에 붙어있던 show 클래스명 전부 제거하라고 코드 3줄 짜기
4. 박스0에 show 클래스명 부착

위와 같은 동작을 코드로 구현해보면 다음과 같다.

$('.tab-button').eq(0).on('click',function(){

    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(0).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(0).addClass('show');

})

이렇게 eq안에 들어갈 숫자만 바꿔서 총 3번 작성하면 1번, 2번, 3번 버튼 모두 동작하는 걸 확인할 수 있다. 근데 이렇게 작성하고 보니 중복된 코드가 너무 많지 않은가?? 이런 중복된 코드를 줄이기 위한 방법이 바로 for문, 반복문이다.

* 참고로 현재 셀럭터로 .tab-button을 5번이나 찾고 있는데 이렇게 자주 호출되는 셀렉터는 따로 변수로 만들어두면 좋다.

var 버튼 = $('.tab-button')
버튼.removeClass('orange');

📑 for문 활용하기

for문을 사용하는 방법은 다음과 같다. for(반복될 횟수가 담길 변수 i 초기값; 반복될 범위; 반복 증감)

반복문 사용하는 방법
for(횟수){
console.log('안녕');
}

for(var i=0; i<3;i++){
    console.log('안녕');

}

따라서 우린 for(let i=0; i<3; i++)과 같이 작성 후 숫자 대신 eq(i)를 넣어주면 해당 수 만큼 즉) 0부터 3 미만까지 0, 1, 2 총 3번 반복되는 걸 확인할 수 있다. 만약 그럼 3처럼 고정된 수가 아닌 범용성 있게 작성하려면 어떻게 할까? (*var대신 let으로 i 선언)

for(let i=0; i<3; i++){
//아래와 같이 쓰면 tab-button의 모든 요소들을 찾아줌 
//.eq(index) 쓰면 몇번째 요소를 찾는지 설정할 수 있다.
$('.tab-button').eq(i).on('click',function(){

    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');


})
}

다음과 같이 $('.tab-button')의 개수를 가져오면 된다. js에서 사용하는 문법은 .length인것!! 자바에서 length는 보통 길이를 의미하기에 헷갈릴 수 있지만 js에선 lenth 기억하자!!

const buttonCount = $('.tab-button').length;
console.log(buttonCount);


//반복문 안에 있는 변수 만ㄷ들 때 let으로 해줘야 된다. 
//for(let i=0; i<3; i++){
for(let i=0; i<buttonCount; i++){
//아래와 같이 쓰면 tab-button의 모든 요소들을 찾아줌 
//.eq(index) 쓰면 몇번째 요소를 찾는지 설정할 수 있다.
$('.tab-button').eq(i).on('click',function(){

    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');


})
}

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[JS] input 태그에 value 값 넣기 (0)	2022.12.26
[JS] \|\| 기능 살펴보기, 참과 거짓을 판단하는 게 아니다 (0)	2022.12.15
[JavaScript] backtick(`) vs single quoto(') 차이 (0)	2022.11.27
[JavaScript] isNan 함수, 숫자인지 검사하는 함수 (0)	2022.11.23
[JavaScript] input 태그에 입력한 value 가져오기 (0)	2022.11.20

ABOUT ME

워니's 코딩 스토리 워니's 코딩 스토리

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바