개발일기

JavaScript 검색 결과

해당 글 23건

JS 이벤트 처리 - 5(이미지 토글)

💡 학습 목표심볼즈(Symbols)에 대해 알아 보자자바 스크립트로 토글 기능 만들어 보기1. 심볼즈(Symbols)에 대해 알아 보자심볼즈(Symbols)"는 문자나 기호를 의미합니다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있습니다.HTML Symbolshttps://www.htmlsymbols.xyz/heart-symbols시나리오 코드 1 단계 ♡  💡 참고JavaScript에서 DOM(Document Object Model)을 통해 요소를 가져올 때 반환되는 객체 타입은 HTMLCollection, NodeList, Node 등이 있습니다. 이들은 각각 다르게 동작하며, 사용하는 ..

JavaScript 2024. 12. 22. 22:33

JS 이벤트 처리 - 4(반복문과동적생성)

💡 학습 목표Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자.반복문을 사용한 LIST 만들어 보기    반복문을 활용한 리스트 생성 Render

JavaScript 2024. 12. 22. 22:32

JS 이벤트 처리 - 3(forms)

💡 학습 목표문서에서 form 에 접근 방법onsubmit 에 대한 이해validation에 이해시나리오 코드 1 function check() { let form1 = document.forms[0]; let form2 = window.document.forms[1]; // 자바스크립트를 통해서 요소 복사 처리 form2.elements["name"].value = form1.elements["name"].value; form2.elements["tel"].value = form1.elements["tel"].value; console.log("fo..

JavaScript 2024. 12. 22. 22:31

JS 이벤트 처리 - 2(addEventListener)

💡 학습 목표addEventListener() 메서드의 활용이벤트 위임(Event Delegation)와 버블링(Bubbling)  addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기 2. 이벤트 위임(Event Delegation)이벤트 리스너 를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴입니다. 이 패턴은 주..

JavaScript 2024. 12. 20. 16:20

JS 이벤트 처리 - 1 (기본)

💡 학습 목표HTML 요소에 이벤트 등록하기이벤트 등록 및 이벤트 핸들러 처리 ( C R U D )1. HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다.이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다.이벤트 등록에 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.Element Property : 자바스크립트에서 HTML 요소의 프..

JavaScript 2024. 12. 20. 16:19

JS - 점검 6(웹 페이지 렌더링 과정)

💡 학습 목표웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자연습 문제 - 오류 해결 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그립니..

JavaScript 2024. 12. 20. 16:17