location 객체 자바스크립트 페이지 이동 location.href = 주소 자바스크립트 새로고침 location.reload() location 객체 사용 새로고침 history 객체 브라우저의 기록을 할 수 있는 객체 ex)뒤로가기, 앞으로가기 history.go(숫자); : 기록 이동 history.back(); : 뒤로가기 history.pushState(null, '', '변경.html'); : 새로운 기록 추가 history.replaceState( 저장할데이터 , 바꿀제목 , 바뀐주소 ); : 브라우저의 기록을 강제로 변경 ex)뒤로 갔을때 alert를 하지 않아야 할 때 사용 ex ) list -> 등록 -> 결과 (등록이 잘 완료되었다면 뒤로가기 눌렀을 때 list 페이지를 보여줌) ..

내장함수 : window 객체 , location 객체 , history 객체 팝업창 띄우기 window.open() - 새창을 띄워주는 메서드 입니다 window.open(문서 주소-보여줄 창 주소 , 이름-별칭 , "옵션=값 , 옵션=값 , 옵션=값"); window.close() - 창이 꺼짐 옵션 옵션 설명 width = 픽셀값 가로 넓이 height = 픽셀값 세로 넓이 left = 픽셀값 위치 top = 픽셀값 위치 location = yes 또는 no 윈도우 주소창 show/hide scrollbars = yes 또는 no 윈도우 스크롤바 show/hide menubar = yes 또는 no 윈도우 메뉴바 show/hide toolbar = yes 또는 no 윈도우 툴바 show/hide s..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org var date = new Date(); //현재시간 //Wed Jan 04 2023 14:17:50 GMT+0900 (한국 표준시) var date = new Date(2023,0,4); //년월일 .. 월은 0부터 시작 //Sat Feb 04 2023 00:00:..

form 객체는 document 객체의 하위 객체 중 하나입니다. form을 이용하면 form 유효성 검사들을 할 수 있습니다. form객체는 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능합니다. ex) document.폼명.요소명 전부 암기합니다. 속성 값 설명 value input, textarea 요소의 value 값을 반환합니다 checked checkbox 나 radio 가 체크되어 있으면 true, 체크되어 있지 않으면 false 를 반환합니다 disabled 요소가 활성화 상태이면 false, 비활성 상태이면 true 를 반환 length 요소의 개수를 반환 focus() 요소의 포커스를 맞춥니다 blur() 요소의 포커스를 없애 줍니다 submit() form의 값..

dataset을 활용하여 값을 받아올 수 있다. dataset 은 data-으로 시작하고 , 뒤에 오는 이름은 자유롭게 작성한다. dataset은 ""문자열로 지정하고 객체도 지정할 수 있다. json 문자열을 js객체로 형변환하여 출력한다. 태그의 dataset의 속성 - 태그의 저장소 아이린 조이 슬기 웬디 예리 결과 : var list = document.querySelector('.list'); var re = document.querySelector('.result'); list.onclick = function(){ //1. event.preventDefault(); //2. if(event.target.tagName != 'A')return; //3.data- 으로 만들어진 속성은 태그에서 ..

메뉴 선택시 토글메뉴 출력 style ↓↓↓ 더보기 html ↓↓↓ 더보기 MENU 1 MENU 2 MENU 3 토글메뉴1 토글메뉴2 토글메뉴3 var toggle = document.querySelector('.toggle'); toggle.onclick = function(e){ e.preventDefault(); //고유이벤트 중단 if(e.target.tagName != "LI") return; var str = e.target.dataset.id; //클릭한 id 받아오기 var togglemenu = document.querySelectorAll('.toggle-menu'); //토글메뉴 받아오기 for(var i=0; i < togglemenu.length; i++){ if(e.target...

이벤트 위임의 원리가 되는 버블링 , 캡처링 이벤트 캡쳐링 부모, 자식 모두 이벤트가 걸려있을 때 실행순서가 부모 -> 자식으로 실행되는 특징 addEventListener()로만 구현이 가능하다 이벤트 버블링 부모, 자식 모두 이벤트가 걸려있을 때 실행순서가 자식 -> 부모로 실행되는 특징 버블링페이지에서만 이벤트를 실행 캡쳐링은 이벤트를 실행시키지 않음 예제 1 ) style ↓↓↓ 더보기 html ↓↓↓ 더보기 func3자식 script ↓↓↓ /* DOM에서 이벤트 동작방식은 기본으로 버블링입니다. 버블링 - 부모, 자식 모두에 이벤트가 있을 때 이벤트가 자식 -> 부모 방향으로 전파되는 특징 3번 클릭 3 -> 2 -> 1 순으로 실행됩니다. */ // var func1 = document.qu..

이벤트 객체중의 하나인 이벤트 중단 기능 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 ㄴ a와 submit은 고유 이벤트를 가지고 있다. a와 submit은 고유 이벤트를 갖고 있어 핸들링하려면 고유 이벤트를 중단시켜줘야 한다. 예제 ) 1 2 3 4 5