1) Ajax 응답 처리와 비동기 Ajax란, 새로 고침이 일어나지 않고 서버측의 데이터를 브라우저의 화면 전환 없이 서버 측에 어떤 데이터를 별도로 요청해서 받아와서 화면에 그려주는 것입니다. 어떤 화면이 쭉 보여지다가 앞서 말한 통신 코드가 가서 서버에서 응답을 받아와서 다시 그립니다. 사용자 입장에서는 통신 코드가 서버로 갔는지 안 갔는지는 관심이 없습니다. 화면을 차례대로 렌더링하는 중에 일부 데이터에 한해 응답 데이터가 없으면 화면이 멈춰져 있거나 비어있을 것입니다. 그리고 이로 인해 사용자는 불편을 느낄 것입니다. 브라우저, 자바스크립트에서 이 방법을 해결하기 위해 Ajax를 사용하였습니다. 우선 전체적인 화면을 그리는 과정에서 만약 비동기적인 작업, 즉, Ajax와 같은 요청이 존재하면 그 ..
3) DOM APIs 실습 실습1 지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText = document.createTextNode("망고"); mango.appendChild(mangoText); var parent = document.querySelector("ul"); parent.appendChild(mango); 실습2 insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText =..
2) 문자열기반으로 DOM 조작하기 DOM API를 사용해서 node를 생성하고 추가하는 건 복잡한 일입니다. html을 문자열로 처리하면서 dom에 쉽게 추가하는 방법을 알아보겠습니다. 1. DOM 조작 API 아래 API들은 삭제, 추가, 이동, 교체를 위한 API사용법입니다. removeChild(): 노드의 자식노드인 인자 값에 들어 있는 노드를 지운 뒤 반환합니다. ex) node.removeChild(child); appendChild(): 인자 값으로 들어온 노드를 엘리먼트의 마지막 자식 노드로 추가합니다. 반환된 값은 이동한 자식 노드를 의미합니다. ex) element.appendChild(aChild); cf) HTML을 어떤 메서드 기반으로 넣는 게 아니고 문자열 기반의, 문자열 처리..
1) DOM node 생성과 추가 DOM DOM(Document Of Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM을 구현하는 기준이다. (출처: https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%8..