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

이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어주게 되어있다. 첫번째 매개값으로 event객체를 넣어줌 이벤트 위임 이벤트 전파는 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임되는 특징입니다. 위임은 많이 사용되는 강력한 이벤트 핸들링 패턴입니다. 이벤트 객체 사용하는 방법 이벤트 객체의 기능 설명 stopPropagation() 이벤트 전파를 막는다. (버블링 중단하기) target 이벤트를 적용한 타겟 속성 currentTarget 실제 이벤트가 걸려있는 타겟 속성 preventDefault() 고유특성을 가진 태그의 이벤트를 제거 ㄴ a와 submit은 고유 이벤트를 가지고 있다. this태그를 대체할 수 있다. 방법1 ) 매개값으로 받는..

토글형태 활용하기 어둡게보기 이름보기 홍길자 20세 능력단위 Java, Oracle, JSP, CSS, Javascript 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다 위키백과