728x90 반응형 Coding With Jina/JavaScript58 [자바스크립트] 이벤트리스너를 이용한 마우스오버 함수 // 1. html에 있는 원하고자 하는 부분과 연결한다. const title = document.querySelector("#title"); // 2. 모든 핸들러 함수를 담고 있는 변수를 만들고 거거 안에다 다 만든다. const superEventHandler = { // 3. 여러개의 함수를 만들때에는 꼭 , 를 붙여줄것 mouseOver: function () { title.innerHTML = "The mouse is here!!"; title.style.color = "red"; }, contextmenu: function () { title.innerHTML = "오른쪽 마우스를 클릭하셨어요!"; title.style.color = "blue"; } }; // 4. 이벤트리스너를 사용하여.. 2021. 1. 14. [자바스크립트] 배열에서 요소 랜덤으로 출력하기 예시 Coding With Jina 결과 마우스를 올릴 때마다 글자색상이 바뀐다! 2021. 1. 13. [자바스크립트] Event의 종류( addEventListener, removeEventListener 메서드) addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록 이벤트 명 설명 change 변동이 있을 때 click 마우스를 클릭 시 focus 포커스를 얻었을 때 keydown 키보드 아무거나 눌렀을 때 keyup 키보드에서 손을 땟을 때 load 로드가 완료 되었을 때 mousedown 마우스를 클릭 했을 때 mouseout 마우스가 특정 객체 밖으로 나갔을 때 mouseover 마우스가 특정 객체 위로 올려졌을 때 mousemove 마우스가 움직였을 때 mouseleave 마우스가 연결된 요소에서 이동했을 때 mouseup 마우스에서 손을 땟을 때 select option 태그 등에서 선택을 했을 때 resize 화면의 크기가 조정되었을 때 (element를 window로 .. 2021. 1. 13. [자바스크립트] addEventListener() 함수 addEventListener() 함수 - 한 요소에 여러 이벤트가 발생했을 때 이를 동시에 처리하기 위한 함수 - 이벤트가 발생한 요소에 이벤트 처리기를 연결해주는 함수 element.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식) 1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달 2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달 3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파 (디폴드값 false이고 생략가능) [출처] www.tcpschool.com/javascript/js_event_eventListenerRegister -.. 2021. 1. 13. [자바스크립트] 날짜계산기 만들기 HTML 기념일 계산기 우리 만난지 일 자바스크립트 const now = new Date(); function input(){ const dday = new Date(document.querySelector("#input_date").value); const passedTime = now.getTime()-dday.getTime(); const passedDay = Math.round(passedTime/(24*60*60*1000)); document.querySelector("#accent").innerHTML = passedDay+"일"; } const now = new Date()는 Wed Dec 16 2020 09:00:00 GMT+0900 (대한민국 표준시) 이런식으로 저장되고 바로 밀리초로 바.. 2021. 1. 6. [자바스크립트] input date 입력값 확인 눌러서 출력하기 생각해보면 엄청 간단하고 쉬운 거고 자주 쓰는 건데 쓸때마다 까먹는 다.... 제대로 기록해서 미래의 나에게 도움이 되길..ㅋㅋ 나는 날짜를 선택하고 나서 확인을 누르면 그 데이터를 출력하거나 다른 곳에 이용할 수 있도록 해볼 것인데 text를 입력받은 후에 하려면 id="input_date"의 type을 text로 변경하면 될 듯! HTML - 먼저 HTML에서 타입이 date인 input과 submit인 input을 2개 만든다. - 타입이 submit인 input에 onclick="input()" 을 넣어준다. - 여기서 input()은 확인을 누르면 자바스크립트에서 실행되는 함수이다. 이 함수는 input_date랑 연결되어 있을 예정 자바스크립트 - 참고로 #은 id고 .은 class다!! 잊지.. 2021. 1. 6. 이전 1 ··· 4 5 6 7 8 9 10 다음 728x90 반응형
