본문 바로가기

분류 전체보기79

2024.04.03 31일차 Javascript 이미지 슬라이드, todo-list 이미지 슬라이드 캐러셀 이미지나 텍스트의 슬라이드를 가로로 슬라이드 시켜 표시하는 컴포넌트 모든 이미지 주소를 저장하는 배열을 전역변수로 생성 setAttribute(), classList.add(), dataset.indext 등을 활용해서 이미지 추가 이전 버튼, 다음 버튼 클릭이벤트에서 인덱스 조작 - 마지막 사진에서 다음 버튼 클릭 시 인덱스는 0번으로 변경 - 첫번째 사진에서 이전 버튼 클릭 시 인덱스는 배열 마지막 인덱스로 변경 // 이전버튼, 슬라이드 이미지, 다음버튼 const [$prev, $sliderImg, $next] = [...document.getElementById('slider').children]; // 버튼 클릭이벤트 바인딩 $next.addEventListener('cl.. 2024. 4. 3.
2024.04.02 30일차 Javascript DOM 이벤트 객체, 전파 EventTarget.addEventListener() addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture); ** options 더보기 이벤트 수신기의 특징을 지정할 수 있는 객체 capture 이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다. 명시하지 않을 경우 기본 값은 false입니다. once 수신기가 최대 한 번만 동작해야 함을 나타내는 불리언 값입니다. true를 지정할 경우, 수신기가 발동한 후에 스스로를 대상에서 제거합니다.. 2024. 4. 2.
2024.04.01 29일차 Javascript DOM, 이벤트 DOM 조작 및 탐색 프로퍼티 설명 childNodes 자식노드를 모두 탐색하여 NodeList에 담아 반환. 요소 노드 + 텍스트 노드 children 자식 노드 중 요소 노드만 모두 탐색하여 HTMLColleciton객체에 담아 반환 (텍스트 노드X) firstChild 첫 번째 자식 노드를 반환 lastChild 마지막 자식 노드를 반환 firstElementChild 첫 번째 자식 요소 노드를 반환 lastElementChild 마지막 자식 요소 노드를 반환 hasChildNodes() 자식 요소를 가지고 있는지 확인 parentNode 부모노드를 모두 탐색하여 NodeList로 반환 previousSibling 같은 부모를 가진 형제 노드 중에서 자신의 이전 형제 노드를 반환 nextSiblin.. 2024. 4. 1.
2024.03.29 28일차 Javascript sort(), destructuring, closure, DOM 배열 고차함수 sort() 원본을 손상시키므로 복사 후 정렬 정렬 기준이 없으면 아스키코드를 기준으로 정렬 정렬 기준으로 콜백 함수 사용하므로 고차함수 // 배열 데이터 정렬하기 const nums = [6, 11, 3, 7, 9, 10, 27, 2, 100, 4, 1]; console.log(nums); nums.sort(); console.log(nums); // [ 1, 10, 100, 11, 2, 27, 3, 4, 6, 7, 9] ** 위의 코드는 10 을 문자로 보고 1 10 2 순서로 본 것 숫자 오름차순 정렬 두 숫자를 비교해서 음수가 나오면 a b 이므로 자리 변경 // 숫자 오름차순 정렬 nums.sort((a, b) =>.. 2024. 3. 29.

티스토리툴바