[JS] 이벤트 전파 / 이벤트 버블링 / 이벤트 캡처링 이벤트 전파 (Event Phase)브라우저에서 html 요소에 이벤트가 발생할 때, 이벤트가 전파되는 흐름에 따라 이벤트 버블링과 이벤트 캡처링이 발생함 body 영역 main 영역 div 영역 p 영역 span 영역 01) 이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트 타깃 요소에서부터 최상위 요소인 html 문서까지 이벤트가 전파되는 것으로,addEventListener 이벤트는 기본적으로 버블링으로 동작함위의 script 코드를 추가해서 console 창을 확인하면, span 태그를 클릭했을 때 span에서부터 body 태그까지 이벤트가 전파되는 과정을 확인할 수 있.. [JS] JavaScript에서 다양한 this JavaScript에서 thisJavaScript에서 this는 객체를 가르키는 키워드로, 현재 실행 중인 함수의 문맥(context)을 가르킨다.this가 가르키는 대상은 함수 호출 방식에 따라 달라진다.01) 전역 범위전역 범위에서 this는 기본값으로 전역 객체를 의미브라우저에서 전역 객체는 window 객체로, 브라우저 환경에서 제공되는 다양한 API를 제어할 수 있음console.log(this); // Window {window: Window, self: Window, document: document, name: '', location: Location, …} 02) 함수 호출일반 함수에서 this는 기본적으로 전역 객체를 가리킴호출한 객체가 없으므로 window 객체가 출력됨function.. [JS] JavaScript 로드 문제해결 Script 로드 오류html은 위에서 아래로 순차적으로 파싱을 하는데,아래와 같이 스크립트 코드가 상단에 위치할 경우html이 완전히 파싱되기 전 스크립트가 실행되어 dom 요소를 잘 가져오지 못한다.예를 들어, 버튼이 그려지기 전 상태에서 버튼 이벤트를 발생시키면 오류가 나는데 이러한 현상을 해결하기 위해 세 가지 방법이 있다. 버튼 01) script 위치 변경 02) load 이벤트 리스너 사용window.onload : html 파싱 → dom 생성 → 외부 콘텐츠(images, script, css 등) 로드된 후 발생하는 이벤트 버튼 DOMContentLoaded : html 파싱 → dom 생성 후 발생하는 이벤트 버튼 03) 비동기로 scrip.. [JS] DOM / BOM DOM01) DOM이란?Document Object Model 문서 객체 모델스크립트 언어로 html 요소를 제어할 수 있도록 웹 문서를 객체화한 것브라우저에서 자바 스크립트로 html 요소를 제어할 수 있도록 제공하는 apiDOM은 트리(Tree) 구조를 가지고 있음02) DOM의 트리 구조노드 : 트리 구조 안 각각의 요소document : 웹 문서 영역을 제어할 수 있게 제공하는 객체로, 웹 페이지 자체이자 돔 트리의 최상위 노드document.getRootNode() : 최상위 노드인 '#document'를 반환함03) 그 외 Object ModelCSS Object Model : css를 Javascript로 조작할 수 있도록 한 것 BOM01) BOM이란?Browser Object Model .. [JS] Ajax와 Json을 활용해서 웹사이트 구현하기 01. 비동기와 동기 01) 비동기식(Asynchronous)요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것웹페이지를 새로고침 하지 않고 데이터를 불러오는 방식으로 웹페이지의 일부분만 바뀔 때 사용하는 것이 좋음처리결과에 의존하지 않고 성능적으로 빠른 처리가 가능함ex. 블로그나 카페에서 댓글을 작성할 때 페이지 전체가 로드되지 않고 댓글 영역 부분만 업데이트 됨02) 비동기 통신의 장점과 단점필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상시킬 수 있음서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있음요청과 응답이 동시에 일어나지 않기 때문에 요청을 보낸 후에도 다른 작업을 할 수 있음동기 통신보다 코드가 어렵고 복잡도가 증가할 수 있음요청의 처리 속도에 따라 요청과 응답의.. [JS] jQuery로 유효성 체크 이전 1 다음
