JS4 DOM(Document Object Model) DOM(Document Object Model) 브라우저에서 HTML코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장 HTML element를 Tree 형태로 저장, DOM 트리 라고도 부른다. document가 DOM 전체에서 최상위 노드, 루트 노드 변경 등 조작이 용이하도록 돕기 위해 javascript를 통해서 document와 같은 돔 노드에 접근이 가능하다 document는 js의 object와 같다 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수들의 묶음)를 제공 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하기 어렵기 때문 브라우저는 DOM Tree찾고 조작.. 2021. 7. 7. AJAX(바닐라 js)와 서블릿(Servlet) 간의 통신 AJAX를 이용해 GET 방식의 request를 서블릿 매핑 주소로 보내고, 서블릿에서 응답을 받아오기 document.addEventListener("DOMContentLoaded", function() { ...(생략, 매개변수로 보낼 값을 가져온다) ajaxGet(id, type); } const ajaxGet = function(id, type) { let oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { // response응답 도착 if (this.status == 200) { console.log(this, this.responseText); // 성공, 응답코드 200 } else { console.log(thi.. 2021. 7. 7. 특정 버튼들의 클릭 이벤트 리스너 let btns = document.querySelectorAll(".progress-btn"); btns.forEach(function(btn){ btn.addEventListener("click", (e) => { console.log(e); }) }); 쿼리 셀렉터를 이용해 버튼의 배열을 변수에 담은 뒤, forEach를 이용해서 하나씩 이벤트 리스닝을 한다. 참고) https://javacpro.tistory.com/37 2021. 7. 7. AJAX 통신 AJAX (XMLHTTPRequest 통신, Asynchronous JavaScript and XML) 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발 비동기적으로 서버로부터 데이터를 가져오는 통신 방식 더 좋은 UX를 제공할 수 있는 기술 동적으로 필요한 시점에 컨텐츠를 받아와서 표현 요청하지 않은, 페이지에 바로 드러나지 않는 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 수 있으므로 동적인 처리가 필요하다 Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받는다 AJAX 실행코드 function ajax(data).. 2021. 7. 6. 이전 1 다음