AJAX AJAX는 웹페이지의 이동없이 필요한 데이터만 전송하는 기술이다. 일반적인 경우 데이터 처리는 요청 순서대로 진행하지만 AJAX는 그렇지 않다. AJAX는 비동기 통신 방식을 사용한다 비동기 통신의 방법 1.XMLHttpRequest객체 2.fetch API (ES06) 3.Axios 라이브러리 4.제이쿼리(Jquery) <!DOC...
[JavaScript] navigator로 위치 정보 받기
navigator <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
[JavaScript] setInterval(), setTimeout()
setInterval <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport...
[JavaScript] window팝업
window객체 팝업창 javascript window 객체는 최상위 객체로 자주 사용되는 기능 open(),close(),confirm(),alert(),setTimeout() 등이 있다. 팝업창 열기 - window.open(문서주소,이름,”옵션=값”) 팝업창 닫기 - window.close() <!DOCTYPE html> &...
[JavaScript] 고유 이벤트 중단
고유 이벤트 중단 event.preventDefault() 사용 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
[JavaScript] event버블링
이벤트 버블링 이벤트 버블링이란 부모 태그에 걸어 놓은 이벤트가 모든 자식에 전파되는 속성 div에 이벤트를 걸어놓으면 body의 ul,li에 동일 이벤트가 전파됨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
[JavaScript] 다중 이벤트와 event객체
다중 이벤트와 event 객체 동일한 기능을 수행하는 버튼에, 동일 이벤트를 거는법 <!DOCTYPE html> <head> <title>Document</title> <style> table {border-collapse: collapse; border-...
[JavaScript] 노드 순서 변경
노드 순서 변경 특정 위치에 노드를 삽입하는 기능 insertBefore(삽입하려는노드, 기준노드) - 기준노드 앞에 삽입노드를 추가 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=...
[JavaScript] 노드 선택/ 삭제하기
노드 선택 에서 자주 쓰는 것들 parentElement -> 부모노드 선택 previousElementSibling -> 이전노드 선택 nextElementSibling -> 다음 노드 선택 firstElementChild -> 첫번째 자식노드 선택 lastElementChild -> 마지막 자식노드 선택 <!DOC...
[JavaScript] ES6
let변수 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont...