웹3 6일차

{**Tip**}

계속 JS로 컨트롤하는 것보다, CSS, html에서 컨트롤하는 비중이 커야 실행이 무겁지 않고 빠르며 유지보수가 쉽다. 

 

 

[팝업이 따로 하나씩 닫히도록 하기]

[CSS]

각 팝업마다 css제작

body.active-1, body.active-2, body.active-3, body.active-4 {
    overflow: hidden;
}

 

[JS]

팝업 여는 함수, 닫는 함수에 body 클래스 변경 코드 각각 아래처럼 수정

// 팝업 열리면 스크롤 제거
$('body').addClass('active-' + no);

// 팝업 닫히면 스크롤 다시 추가
$('body').removeClass('active-' + no);

 

 

 

[j-query 시작함수]

jQuery로 작성된 코드가 실행되기 전에 문서 객체 모델(DOM)이 완전히 로드되었는지 확인하는 함수가 필요하다.

$(document).ready(function() {
   // 여기에 jQuery 코드 작성
});

 

++) DOM에 대한 설명 링크

 

 

 

 

[this객체]

this란, 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성이다.

this는 상황에 따라 아래와 같이 객체가 저장된다. 

 

1. 일반 함수에서 this → window
2. 중첩 함수에서 this → window
3. 이벤트에서 this → 이벤트 객체
4. 메소드에서 this → 메소드 객체
5. 메소드 내부의 중첩 함수에서 this → window

 

아래 코드에 따라 클래스 .box-list의 요소를 클릭하면 콘솔에 this객체를 출력하도록 했다. 

  $('.box-list').click(function(){
    $(this).addClass('active')
    console.log(this)
  })

클릭 이벤트 안의 this객체는 클릭 이벤트 객체임을 확인할 수 있으며, addClass함수가 적용됨을 확인할 수 있다. 

다른 이벤트에서도 동일하게 적용된다.

 

 

 

 

[주의사항]

이벤트 안의 함수를 function() {}에서 화살표 함수인 ()=>{}로 간략화 할 수 있는데, 이때 ()=>{}는 자신만의 this객체를 생성하지 않고 외부 범위에서 this를 상속받는다. 

 

화살표 함수는 주로 콜백 함수나 간단한 함수 표현식을 작성할 때 유용하다.

그러나 this 바인딩( 변수나 값이 특정한 이름에 연결되는 것 )이나 arguments 객체를 사용해야 하는 경우에는 사용할 수 없으니 주의가 필요하다.

  $('.box-list').click(() => {
    $(this).addClass('active')
    console.log(this)
  })

클래스 .box-list의 div요소들

출력된 this의 값을 보면 이벤트 객체가 아닌 window객체가 상속됨을 확인할 수 있으며, addClass또한 .box-list에 적용되지 않음을 확인할 수 있다.