JavaScript

[코딩애플] 자료형 : Array, Object (특징과 차이점)

https://sunshineyellow.tistory.com/38 이거에 이어서.. Array 자료형 let car = ['소나타', 50000, 'white']; 순서개념이 있다. -> 숫자영어가나다순 정렬(sort)/x번자료부터 x번자료까지 자르기(slice)/x번자료 바꾸기/맨 뒤, 맨 앞에 자료 넣기/원하는 자료 검색하는 등 다양한 기능 활용이 가능하다. Object 자료형 let car2 = { name : '소나타', price : 50000 }; 제목(key)가 들어간다. 순서개념이 없다. (앞에 썼다고 맨처음 데이터가 되는 게 아님) -> key만 기억하면 자료 뽑을 때 array보다 쉽다. object에서 자료 뽑는 법 두가지 console.log(car2['name']); //소나타 ..

[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들

이벤트가 DOM트리를 타고 발생하는 흐름 이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려간다. 이벤트는 트리를 따라 내려가면서 addEventListener(..., true)로 할당한 핸들러를 동작시킵니다. addEventListener(..., true)의 true는 {capture: true}의 축약형이다. 이후 타깃 요소에 설정된 핸들러가 호출된다. 이후엔 이벤트가 event.target부터 시작해서 다시 최상위 노드까지 전달되면서 각 요소에 on로 할당한 핸들러와 addEventListener로 할당한 핸들러를 동작시킨다. addEventListener로 할당한 핸들러 중, 세 번째 인수가 없거나 false, {capture: false}인 핸들러만 호출된..

[중요] Level 2 : 14,15(숙제 및 깨달은 점)_for, 버블링활용축약버전

14. 탭 만들기 let kcnt = 0; for (let i = 0; i < $('.tab-button').length; i++) { alert(kcnt++); $('.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'); }) } 깨달은 점 for문의 작동 원리에 대해서 이해가 잘 가지 않았다. i가 0이고, 3까지 i++로 돌아가는 거면 i에는 순서대로 0,1,2 배정되는 것 아닌가? ..

Level 2 : 6~13(숙제 및 깨달은 점)_scroll

6. Carousel slider 만들기 조건 번호를 누르면 해당 이미지로 이동할 수 있다. $('.slide-1').on('click', function(){ $('.slide-container').css('transform', 'translateX(0)'); }) $('.slide-2').on('click', function(){ $('.slide-container').css('transform', 'translateX(-100vw)'); }) $('.slide-3').on('click', function(){ $('.slide-container').css('transform', 'translateX(-200vw)'); }) 7. Carousel slider 만들기 2 조건 이전/다음버튼 만들기. 첫..

[코딩애플] 요소의 높이와 위치값 구하기 (clientHeight, offsetHeight, scrollHeight, getBoundingClientRect())

clientHeight console.log(element.clientHeight); clientHeight는 패딩을 포함한 요소의 높이를 가져온다. offsetHeight console.log(element.offsetHeight); clientHeight는 패딩, 테두리, 가로스크롤바(있는 경우)을 포함한 요소의 높이를 가져온다. scrollHeight console.log(element.scrollHeight); scrollHeight는 패딩, overflow로 인해 화면에 표시되지 않은 컨텐츠을 포함한 요소의 높이를 가져온다. getBoundingClientRect() console.log(element.getBoundingClientRect()); // 출력결과 { top: 134 y: 134 ..

[코딩애플] 스크롤 이벤트

스크롤바 위치 찾기 : window.scrollY, window.scrollTop() window.addEventListener('scroll', function(){ console.log(window.scrollY); //window.pageYOffset과 동일한 기능(이쪽이 호환성이 더 떨어짐) }) //jquery버전 $(window).on('scroll', function(){ $(window).scrollTop() //(100) 괄호안에 숫자를 넣으면 현재스크롤바 이동 }); 더 알아가기 : scrollTop은 현재 스크롤바 이동 기능도 겸한다. 강제로 맨 위에서부터 스크롤하기 : scrollTo(x,y) window.addEventListener('scroll', function(){ wind..