기억보다 기록을

[JavaScript] Chap.1

변수

// 범위가 function-scope
var 나이 = 20;
var 나이 = 21; // O
나이 = 22; // O

// 범위가 {} block-scope
// 재 선언이 불가능한 변수를 만들 때
let 나이 = 20;
let 나이; // X
나이 = 21; // O

// 범위가 {} block-scope
// 재 선언이 불가능한 변수를 만들 때
// 재 할당이 불가능한 변수를 만들 때
const 나이 = 20;
const 나이; // X
나이 = 21; // X

JQuery animate

$('.box').animate({ marginLeft : '100px', 1000 }); // css속성, 밀리초

정규식

정규식 사용: /텍스트/

/abc/

// 정규식.test('테스트 할 문자')
/abc/.test('abcdef')

/[A-z]/ // 대문자 A부터 소문자 z까지
/[ㄱ-ㅎ]/ // ㄱ부터 ㅎ까지
/\S/ // 모든 문자
/\S+/ // 모든 문자열

Carousel(이미지 슬라이드)

<div style="overflow: hidden">
  <div class="slide-container">
    <div class="slide-box">
      <img src="img/shirt1.jpg">
    </div>
    <div class="slide-box">
      <img src="img/shirt2.jpg">
    </div>
    <div class="slide-box">
      <img src="img/shirt3.jpg">
     </div>
   </div>
 </div>
    
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

.slide-box {
  width: 100vw;
  float: left;
}
.slide-container {
  width: 300vw; /* %로 대체가능 */
}
.slide-box img {
  width: 100%;
}

스크롤

//javascript
window.addEventListener('scroll', function(){

});

//jquery
$(window).on('scroll',function(){
  
});

// Window 대신 Document도 가능 !

- 스크롤 움직일시 이벤트

// javascript
window.scrollY;

// jquery
$(window).scrollTop();

- 현재 화면에서 세로(Y) 스크롤 위치 좌표찾기

반복문에서 var와 let의 기능 차이

반복문 안에서 이벤트 리스너가 존재할 시, 이벤트 리스너는 이벤트 리스너의 이벤트가 발생 했을 시 실행되기 때문에 반복문이 다 돌아지고 난 후에 이벤트 리스너에서 이벤트를 실행한다. 반복문에서 정의된 변수 i의 값을 var로 정의 했을 시 var의 범위가 반복문 이상이기 때문에 이미 i의 값은 반복문이 완료 되었을 때의 값으로 할당되어 있고, let의 경우는 i는 반복문 내에서 다른 코드가 참조할 수 있는 범위를 가지기 때문에 이벤트 리스너에서 i의 값을 찾을 때, 반복문의 범위 만큼 돌았을 때의 값을 참조할 수 있다.

(그냥 let을 사용하는걸로 하자)

이벤트 버블링과 이벤트 함수

- 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상

<div>
  <div>
    <p>안녕</p>
  </div>
</div>

p 태그를 클릭하면 p와 상위 div, div가 전부 클릭 되었다고 인지함.

$('div').click(function(e){
  e.target; // 지금 실제로 클릭한 요소
  
  e.currentTarget; // 지금 이벤트리스너가 달린 곳
  $(this); // == e.currentTarget (jquery)
  this // == e.currentTarget (javascript)
  
  e.preventDefault(); // 기본동작 막기
  e.stopPropagation(); // 내 상위 요소의 이벤트 버블링 막기
});

** 주의 **

e.target과 비교시 e.currentTarget과 this는 비교가 잘 되지만 $(this)는 비교가 잘 안된다. 의미는 맞지만 javascript와 jquery의 형식이 다르기 때문이다. 비슷하게 e.target과 document.querySelector.... 이런식으로 찾아낸 요소는 비교가 가능하다. (그러므로 javascript는 javascript끼리 jquery는 jquery끼리 비교하자)

이벤트 버블링과 dataset

<div class="test">
  <ul class="list"> <!-- 이벤트리스너 위치 -->
    <li class="tab-button">Products</li> <!-- e.target 범위 -->
    <li class="tab-button active">Information</li> <!-- e.target 범위 -->
    <li class="tab-button">Shipping</li> <!-- e.target 범위 -->
  </ul>
</div>

* dataset

// javascript
// 셀렉터.dataset.작명
// HTML 태그의 요소와 속성에 (data-작명="") 식으로 작성
document.querySelector('요소').dataset.작명

// jquery
// $(HTML요소).data(키, 값) -> set
// $(HTML요소).data(키) -> get
$(document).data('id', 'test')
$(document).data('id')

- 개발자만 볼 수 있는 HTML 요소와 속성으로 값을 부여하여 사용할 수 있음.

<ul class="list">
  <li class="tab-button" data-id="0">Products</li>
  <li class="tab-button active" data-id="1">Information</li>
  <li class="tab-button" data-id="2">Shipping</li>
</ul>

$('.list').click(function(e){
    open(e.target.dataset.id);
});