JAVASCRIPT - 초급 8편

* for문

for ( 초기값, 최대값 , 증가값 ) : 코드를 반복하는 반복문

ex )

for (var i = 0; i < 3; i++) {
  console.log(i)
}
// 0
// 1
// 2
// 0 ~ 2 까지 1씩 증가하여 총 세번 반복하여 출력한다

---

간단한 예시)

버튼 클릭시 해당하는 컨텐츠 보여주기

html

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

css

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;
        }

javascript

var btn = $('.tab-button')
var content =  $('.tab-content')
for ( let i = 0; i < 3; i++ ) {
  // let으로 해야하는 이유 : 버튼을 클릭하지 않는다면 i는 3이 되어 실행이 안됌
  // var는 범위가 function 이기 때문에 for문 밖에서 생성됌
  // let은 범위가 { } 이라,  for문 내에 각 이벤트 리스너에 i가 1개씩 부여됌
  btn.eq(i).on('click', function () {
    btn.removeClass('orange');
    btn.eq(i).addClass('orange');
    content.removeClass('show');
    content.eq(i).addClass('show');
  })
}

---

* 확장성 좋은 코드

for ( let i = 0; i < btn.length; i++ ) {
  //버튼의 갯수만큼 반복하는 반복문 ( 확장성이 좋다 : 수정에 용이 )
  btn.eq(i).on('click', function(){
    btn.removeClass('orange');
    btn.eq(i).addClass('orange');
    content.removeClass('show');
    content.eq(i).addClass('show');
  })
}

* 이벤트 관련 함수

1. 이벤트 버블링 : 이벤트가 상위 html로 퍼지는 현상

예시

<div class = "wrap">
  <div class = "box">
  </div>
</div>
<!-- box를 클릭하더라도 wrap까지 같이 클릭이 된다 : 버블링 현상 -->

---

2. 파라미터.target

유저가 실제로 누른 파라미터값을 선택

예시

// javascript
document.querySelector('.wrap').addEventListener('click', function(e) {
	e.target; // .wrap의 요소를 선택한다
}

---

3. 파라미터.currentTarget

유저가 누른 파라미터 중 이벤트 리스너가 달린 곳을 선택

예시

// javascript
document.querySelector('.wrap').addEventListener('click', function(e) {
	e.currentTarget; // .wrap의 요소를 선택한다
}

---

4. preventDefault

이벤트의 동작을 억제

예시

document.querySelector('.wrap').addEventListener('click', function(e) {
	e.preventDefault();
  	console.log("hi"); // 해당 이벤트가 발생하지 않는다
}

---

5. stopPropagation

상위 요소로 퍼지는 이벤트 버블링 막아준다

예시

document.querySelector('.wrap').addEventListener('click', function(e) {
	e.stopPropagation();
}

* data 속성

사용자는 볼 수 없는 데이터를 숨겨서 사용 가능

요소.dataset.작명

예시

<div data-id="box">1</div>
<!-- data-작명 을 하게되면 해당 데이터를 저장함과 동시에 숨겨서 사용이 가능하다 -->

document.querySelector('box').addEventListener("click", function (e) {
  console.log(e.target.dataset.id)
  //e.target( 파라미터로 받아온 요소 .box ) , .dataset.id( 저장되어있는 data중 id값 )
})

참고 문헌

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes