본문 바로가기

전체 글53

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.