언어/JavaScript4 [JS] setInterval, setTimeout 자바스크립트에서는 setInterval, setTimeout 함수를 통해 스케줄러를 지원한다. 두 함수의 차이는 아래와 같다. setInterval : 지정된 주기로 특정 코드를 실행한다. setTimeout : 지정된 초가 지난 후 특정 코드를 1회 실행한다. 즉 setInterval은 주기적으로 지정된 코드를 계속 실행하고, setTimeout은 한 번 실행 후 멈추게 된다. F12를 누른 후 아래 코드를 복사하여 실행해보면 차이를 명확하게 알 수 있다. setTimeout(function() { console.log('timeout'); }, 1000); setInterval(function() { console.log("interval"); }, 1000); 위 코드 실행 시 timeout이라는 .. 2022. 7. 26. [IFrame] 부모-자식 간 통신 IFrame이란 한 HTML 안에 다른 HTML을 삽입하는 기술이다. 기본적으로 같은 도메인 간 HTML을 IFrame으로 넣었다면 부모 HTML에서 자식 HTML의 요소는 아래와 같이 얼마든지 호출이 가능하다. document.getElementById(IFrameName).contentWindow.document.getElementById(id) 하지만 만약 타 도메인의 HTML을 IFrame으로 넣었다면, CORS 관련 에러가 발생하며 조작이 불가능해진다. 그렇다면 타 도메인의 HTML을 IFrame으로 불러와 그 요소를 조작해야 한다면 어떻게 해야할까? 이 경우, 부모와 자식이 메시지를 주고받는 형식을 만듬으로써 해결할 수 있다. 테스트를 위해 위와 같은 웹 페이지를 구현하자. HTML 코드는 아.. 2021. 10. 16. [Ajax] Ajax를 활용한 통신 AJax (Asynchronous JavaScript and XML) AJax는 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신함으로써 동적인 페이지를 만들어줄 수 있게 해주는 기법이다. AJax를 사용하면 굳이 프론트가 움직이지 않아도 백그라운드 영역에서 서버와 통신이 가능하고, 그 결과를 토대로 페이지 내의 요소를 동적으로 바꾸어줄 수 있다. XMLHttpRequest XMLHttpRequest는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다. 현재를 기준으로 대부분의 웹 브라우저 (익스플로어는 7 이상) 가 해당 객체를 내장하고 있고, AJax는 이를 활용하여 서버와 통신할 수 있다. 사용법 Ajax의 대략적인 사용법은 아래와 같다. 물론, 모든 항목의 값을 지정해줄 필요까지.. 2021. 10. 16. [JQury] 제이쿼리 사용법 JQuery JQuery는 HTML의 클라이언트 사이드 조작을 단순화하기 위해 개발된 크로스 플랫폼의 자바스크립트 라이브러리이다. 그냥 간단하게 말하자면, DOM 조작에 있어 여러 기능을 탑재했고 사용이 간편한 자바스크립트의 라이브러리라고 볼 수 있다. 처음에는 document. window. 같은 함수들을 이용하면 얼마든지 DOM 조작이 가능한데 굳이 왜 써야하나 싶었는데, 위의 방식보다 더 다양한 기능들을 제공하고 있었고 사용하다보니 편하다는 생각이 들어 포스팅을 작성하게 되었다. JQuery를 사용했을 때의 장점은 다음과 같다. 웹 페이지의 DOM을 쉽게 검색하고 조작할 수 있다. 웹 페이지의 종류와 무관하게 호환성이 좋다. 메소드 체이닝이 짧고, 코드의 유지관리가 용이하다. 오픈소스이기에 누구나 .. 2021. 10. 14. 이전 1 다음
