JavaScript29 JavaScript <검색 필터링> 실시간 검색 필터 사과 바나나 오렌지 망고 포도 키위 체리 딸기 기러기 사진 검색 결과가 없습니다. 검색창에 입력한 검색어가 아이템리스트 중에 동일한 단어가 있으면 리스트에 반환을 하도록 할 것이다.'검색 결과가 없습니다.'는 검색창에 입력한 검색어가 아치템 리스트에 맞는게 없을 경우 문자을 반환하도록 만들 것이다.document.addEventListener('DOMContentLoaded', function() { const inputField = document.getElementById('search-input'); const list = document.getElementById('item-list'); const ite.. 2024. 6. 12. JavaScript <event 갤러리> JavaScript event 버튼을 클릭하면 이미지가 다크모드로 변경되고 이미지를 클릭하면 메인이미지를 출력하도록 event를 사용합니다. ⭐HTMLImage Gallery Practice 다트모드 ⭐JavaScript const thumbBar = document.querySelector('.thumb-bar');const displayedImage = document.querySelector('.displayed-img');const btn = document.querySelector('button');const overlay = document.querySelector('.overlay');먼저 .. 2024. 6. 11. JavaScript <event> 이벤트 버블링과 캡쳐 ⭐이벤트 버블링과 캡쳐같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동될 때 어떠한 일이 일어나는지를 기술하는 방법 ✔️ 이벤트 버블링(내부 > 외부 요소)특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 상위의 요소들로 전달되는 현상예) HTML 페이지에서 버튼 요소가 클릭되면 버튼 요소부터 시작해서 그의 부모요소들을거쳐서 최상위 요소까지 전달✔️ 이벤트 캡쳐링(외부 > 내부 요소) 이벤트 버블링과 반대 방향으로 이벤트가 전달되는 현상,최상위 요소에서 시작되어 디벤트가 발생한 요소까지 이벤트를 전달✅이벤트의 전파 특징: 두 가지 이상의 이벤트가 충돌되는 경우 부모요소의 이벤트가 차지✅ event,stopPropagation() 메서드이벤트 전파를 중지: 해당 메서드를 호출할 경우, 현재 이벤트 .. 2024. 6. 10. JavaScript <event 3> 기본 행동 방지 이벤트 ⭐ 기본 행동 방지- 텍스트 피드가 비워져있는지를 검사하는 onsubmit 이벤트 핸들러 구현: 비였다면 이벤트 객체에 있는 양식 제출을 멈추도록 지정: 양식 아래에 있는 단락에 에러 메시지를 표시- querySelector(All): HTML의 요소를 참조- getElementById('id값'): 해당 id값을 가진 요소를 참조const form = document.querySelector('form');const fname = document.getElementById('fname');const email = document.getElementById('email');const para = document.querySelector('p'); form.onsubmit = function(e) { i.. 2024. 6. 9. JavaScript <event 2> 색상 변경 이벤트 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>JS 이벤트 02title> style> #colorButton, .colorDiv { padding: 10px; margin: 5px; text-align: center; border: 1px solid #ddd; } .colorDiv { width: 100px; height: 100px; display: inline-block; background-color: #f0f.. 2024. 6. 9. JavaScript <event 1> 이벤트 활용시 사용 될 랜덤 숫자 생성 & 랜덤 색상 생성 함수 HTML DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>JS 이벤트 01title> style> button { margin: 5px; padding: 20px; } div { width: 50px; height: 50px; border: 1px solid black; margin: 10px; display: inline-block; } style>head>b.. 2024. 6. 7. 이전 1 2 3 4 5 다음
