🟨 JavaScript

[코딩애플,mdn] js로 html 생성하는 법 (appendChild, createElement, insertAdjacentHTML 등)

1. document.createElement() / appendChild() / clondeNode() / importNode() document.createElement() : html 자료를 생성한다. element.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. (한 노드는 문서상의 두 지점에 동시에 존재할 수 없으므로, 노드가 이미 부모가 있다면 삭제되고 새로운 위치로 이동한다.) * append()와의 차이점 : append는 jquery에서 지원하는 메소드로, 원시 자바스크립트인 appendChild()와 다르다. 또한 append는 .append(`내용`) 처럼 요소를 바로 때려박을 수 있는 반면, appendChild()는 creat..

[코딩애플] 자료형 : 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 ..