JavaScript/JavaScript 핵심 (15) 썸네일형 리스트형 JS 이벤트 처리 - 8(Ajax 와 Fetch) 💡 학습 목표 1. AJAX에 대해 알아 보자 2. Fetch API란? 3. Fetch API 사용해보기 1. AJAX에 대해 알아 보자💡AJAX (Asynchronous JavaScript and XML)AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다.전통적인 방식의 문제점:- 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음. - 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함. AJAX의 장점:- 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신. - 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능. 기술적 세부 사항:- 원래 XMLHt.. JS 이벤트 처리 - 7(Promise) 💡 학습 목표 1. Promise 타입에 대해 알아 보자. 2. Promise 타입 선언과 활용 1. Promise 타입에 대해 알아 보자.자바스크립트 Promise는 비동기 작업을 처리하기 위한 객체입니다. Promise는 어떤 작업의 결과를 반환하는 객체로서, 이를 통해 비동기적으로 실행되는 작업을 처리하고 그 결과를 콜백 함수 등을 이용해 처리할 수 있습니다. Promise는 총 3가지 상태를 갖습니다.대기(pending): Promise 객체가 생성되었으나 아직 처리가 진행되지 않은 상태입니다.이행(fulfilled): Promise 객체가 처리를 완료하여 결과를 반환한 상태입니다.거부(rejected): Promise 객체가 처리를 실패하였거나 오류가 발생한 상태입니다. 💡 잠깐! 웹 브라.. JS 이벤트 처리 - 6(배너변경하기) 💡 학습 목표 1. HTML 및 CSS 설정하기 2. 이벤트 리스너 등록 및 핸들러 처리 3. 무한 슬라이더를 위한 코드 작성하기 prev next JS 이벤트 처리 - 5(이미지 토글) 💡 학습 목표 1. 심볼즈(Symbols)에 대해 알아 보자 2. 자바 스크립트로 토글 기능 만들어 보기1. 심볼즈(Symbols)에 대해 알아 보자심볼즈(Symbols)"는 문자나 기호를 의미합니다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있습니다. https://www.htmlsymbols.xyz/heart-symbols HTML Symbols...www.htmlsymbols.xyz 시나리오 코드 1 단계 ♡ 💡 참고JavaScript에서 DOM(Document Object Model)을 통해 요소를 가져올 때 반환되는 객체 타입은 HTMLCollection, NodeList, N.. JS 이벤트 처리 - 4(반복문과동적생성) 💡 학습 목표 1. Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자. 2. 반복문을 사용한 LIST 만들어 보기 반복문을 활용한 리스트 생성 Render JS 이벤트 처리 - 3(forms) 💡 학습 목표 1. 문서에서 form 에 접근 방법 2. onsubmit 에 대한 이해 3. validation에 이해 시나리오 코드 1 배송지입력 이름 : 연락처 : check .. JS 이벤트 처리 - 2(addEventListener) 💡 학습 목표 1. addEventListener() 메서드의 활용 2. 이벤트 위임(Event Delegation)와 버블링(Bubbling) addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기 2. 이벤트 위임(Event Delegation)이벤트 리스너 를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패.. JS 이벤트 처리 - 1 (기본) Click me!💡 학습 목표 1. HTML 요소에 이벤트 등록하기 2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D ) 1. HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다. 이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다. 이벤트 등록에 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.Element Propert.. 이전 1 2 다음
