본문 바로가기

JavaScript27

HTML templating (자바스크립트로 템플릿 사용하기) HTML templating은 반복적인 HTML 태그 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)와 결합하여 화면에 추가하는 작업을 말한다. HTML 태그 template test example /* HTML Template script HTML의 script 태그는 type이 javascript가 아니면 렌더링하지 않고 무시한다는 점을 이용 */ 자바스크립트 var data = {title : "hello", content : "lorem dkfief", price : 2000 }; //HTML의 script에서 가져온 HTML Template var html = document.querySelector("#template-list-item").innerHTML; html... 2019. 8. 3.
Event delegation (이벤트 위임) Event delegation은 이벤트를 주려는 요소의 부모 요소에게 이벤트를 위임하는 것을 말한다. 이를 이용하면 요소들을 동적으로 추가해도 따로 추가 수정 없이 계속 이벤트를 줄 수 있다. 또 자식 노드에 일일이 이벤트를 등록하지 않아도, 자식 요소로 이벤트를 실행할 수 있어 효율적인 코딩이 가능하다. HTML 코드 JavaScript 코드 var ul = document.querySelector("ul"); ul.addEventListener("click",function(evt) { console.log(evt.currentTarget, evt.target); }); evt.currentTarget : ul 태그 내용 evt.target : 실제 클릭한 태그 내용 ul 태그 안의 img나 li 태.. 2019. 8. 3.
DOMContentLoaded 이벤트 로딩이 다 된 후 자바스크립트 동작이 이뤄지는 것이 일반적이다. DOM 로딩이 다 되지 않았는데 DOM을 조작하는 자바스크립트 코드가 실행되면 원하는 결과를 내지 못할 것이다. DOMContentLoaded 이벤트로 이런 불상사를 막을 수 있다. DOMContentLoaded 이벤트는 DOM Tree 분석이 끝나면 발생한다. (load는 DOM Tree 외의 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에 발생한다.) DOM Tree가 다 만들어진 후에 DOM API를 이용하여 DOM에 접근할 수 있기 때문에, 보통 자바스크립트 코드는 DOMContentLoaded 이후에 동작하도록 구현한다. 이 방법이 로딩 속도 성능에 유리하다고 생각하기 때문이다. document.addEv.. 2019. 8. 3.
자바스크립트로 Web Animation 구현하기 JavaScript로 애니메이션을 구현하려면 규칙적인 처리를 하도록 구현하면 된다. 이런 규칙적인 처리를 위한 메서드는 다음과 같다. setInterval setTimeout requestAnimationframe Animation API 1. setInterval() setInterval의 첫 번째 인자는 반복적으로 실행할 함수, 두 번째 인자는 반복할 시간이다. const interval = window.setInterval(()=> { console.log('현재시각은', new Date()); },1000/60); window.clearInterval(interval); //setInterval 종료 //window. 생략 가능 하지만 setInterval 함수는 비동기 함수로, 마우스 클릭 이벤.. 2019. 8. 3.
Ajax 사용법 (XMLHttpRequest) + cross domain 문제 Ajax는 웹에서 데이터를 갱신할 때 브라우저 새로고침 없이도 서버로부터 데이터를 받아올 수 있으면 좋겠다는 생각에서 출발한 기술이다. 예를 들어, 상단 메뉴의 탭을 누를 때마다 콘텐츠가 달라지는 사이트가 있을 때 누르지도 않은 탭의 콘텐츠까지 초기 로딩 시점에 모두 불러온다면 초기 로딩 속도에 영향을 줬을 것이다. 따라서 동적으로 필요한 시점에 콘텐츠를 받아와서 표현하면 더 좋을 것이다. Ajax로 전체 새로고침 없이 일부분만 받아온 데이터로 갱신하여 이를 해결할 수 있다. 1. Ajax 실행 코드 XMLHttpRequest 객체를 사용하는 표준 방법 function ajax(data) { var xhr = new XMLHttpRequest(); xhr.addEventListener("load", fu.. 2019. 8. 3.
DOM APIs 활용하기 DOM API를 활용하여 HTML을 동적으로 다양하게 변경할 수 있다. 1. DOM 조작 API document. 으로 사용할 수 있는 APIs HTML DOM Document Objects The HTML DOM Document Object The Document Object When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document. Document Object Properties and Methods The following properties an www.w3schools.com element. 으로 사용할 .. 2019. 8. 2.
자바스크립트 배열과 객체 자바스크립트에서 데이터를 보관하고 조작하는 방법에는 배열과 객체가 있다. 1. 자바스크립트 배열 1) 배열에 데이터를 보관하고 조작하는 기본 방법 //배열 선언, new Array()로도 가능하지만, []가 간단하고 성능 상 차이도 없어서 []를 많이 쓴다. var a = []; //배열 안에는 함수, 배열, 객체 등 모든 타입이 다 들어갈 수 있다. var a = [1,2,3,"hello", null, true, []]; //배열에 값 저장하기 var a = [1]; //이렇게 값을 저장할 수 있고, a.push(2); //push 메서드로 배열에 값을 순차적으로 추가할 수 있다. a[1000] = 2; //특정 index 위치에 값을 추가할 수 있다. //length 속성으로 배열의 길이를 알 수 있.. 2019. 8. 2.