JavaScript

💡 학습 목표Promise 타입에 대해 알아 보자.Promise 타입 선언과 활용 1. Promise 타입에 대해 알아 보자.자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다. Promise는 총 3가지 상태를 갖습니다.대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다. 💡 잠깐!웹 브라우저 안에 자바스크..

💡 학습 목표HTML 및 CSS 설정하기이벤트 리스너 등록 및 핸들러 처리무한 슬라이더를 위한 코드 작성하기   prev next

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

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

💡 학습 목표문서에서 form 에 접근 방법onsubmit 에 대한 이해validation에 이해 시나리오 코드 1 배송지입력 이름 : 연락처 : check ..

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

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

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

💡 학습 목표BOM 에 대하 알아 보자Window Object 와 하위 객체들에 대해 알아 보자   1. BOM 에 대하 알아 보자 JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델입니다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있습니다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있습니다. 💡 정리 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미합니다. 추가 적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조는..

💡 학습 목표DOM 이란 무엇일까?JS로 DOM 조작해보기DOM에 접근할 수 있는 5가지 방법연습 문제 풀어보기 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다. 1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담..