127_자바스크립트 드래그 앤 드롭 기능 사용하기 [적용] 드래그 앤 드롭 기능을 사용해 파일을 처리하고 싶을 때 [문법 1 - 드래그 요소에서 발생하는 이벤트] 이벤트 발생 타이밍 dragstart 요소의 드래그(끌어오기) 시작 시점 drag 요소의 드래그 중인 시점 dragend 요소의 드래그 완료 시점 [문법 2 - 드래그 완료 후 요소에서 발생하는 이벤트] 이벤트 발생 타이밍 dragenter 드래그 중인 포인터가 요소 위치로 이동한 시점 dragover 드래그 중인 포인터가 요소 위치에 있는 시점 dragleave 드래그 중인 포인터가 요소에서 벗어난 시점 drop 요소의 드롭 시점 [문법 3 - 드래그 이벤트 정보] 속성 발생 타이밍 타입 event.dataTransfer.files 드롭한 파..

126_자바스크립트 기본 이벤트 작동해지 설정하기 [적용] 마우스 휠의 기능을 무효화하고 싶을 때 터치 기능을 무효화 하고 싶을 때 [문법] 메소드 의미 반환 이벤트.preventDefault() 기본 이벤트 작동 해지 없음 [내용] PreventDefault() 를 사용해 기본 이벤트의 작동을 해지할 수 있다. // 마우스 휠 기능 무효화하기 document.querySelector('.foo').addEventListener('wheel', (event) => { event.preventDefault(); }); // 터치 기능 무효화하기 document.documentElement.addEventListener('touchstart', (event) => { event.preventDefault()..

125_자바스크립트 이벤트 작동 설정하기 [적용] 비동기 처리 타이밍을 표시하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟.dispatchEnvent(이벤트) 이벤트 발생 처리 진리값 new Event('이벤트', [{detail: 데이터)*]) 이벤트 생성 처리 이벤트 * 생략 가능 [내용] dispatchEvent()는 이벤트 타깃에 임의의 이벤트를 발생시킨다. 이벤트의 생성은 'new Event('이벤트')를 사용한다. 프로그램 시작 1초 후 #myBox 요소 클릭 이벤트를 실행하는 샘플을 확인해 보자 HTML index.html 박스 JavaScript main.js const boxElement = document.querySelector('#myBox'); boxElement.addEven..

124_자바스크립트 사이즈 벗어난 화면 처리하기 [적용] 사이즈를 벗어난 화면을 처리하고 싶을 때 스마트폰의 가로, 세로 화면 전환 시 작업을 처리하고 싶을 때 [문법1] 메소드 의미 반환 matchMedia(미디어쿼리) 미디어 쿼리 정보 객체(MediaQueryList) matchMedia(미디어쿼리).addListener(처리) 미디어 쿼리 일치시 처리 없음 [문법2] 속성 내용 타입 matchMedia(미디어쿼리).matches 미디어 쿼리 일치 여부 진리값 [내용] matchMedia()는 인수에 따라 미디어 쿼리의 정보를 반환한다. 예를 들어 '윈도우 창의 가로 길이 500px 이상'을 의미하는 '(min-width: 500px)'를 전달하면 다음과 같은 정보가 반환된다. matches 속성은 ..

123_자바스크립트 화면 사이즈 이벤트 처리하기 [적용] 윈도우 창의 크기에 따라 처리를 분류하고 싶을 때 레이아웃의 크기를 조정하고 싶을 때 [문법] 이벤트 발생 타이밍 resize 브라우저 윈도우 창의 사이즈 변환 시점 [내용] resize 이벤트는 브라우저 윈도우 창의 크기가 변경될 때마다 발생한다. window.addEventListener('resize', () => { console.log('윈도우 창이 리사이징되었습니다.'); }); [예시] 윈도우 창의 크기가 변경될 때마다 창의 가로와 세로 길이를 표시하는 샘플을 만들어 보자. HTML index.html 윈도우 가로 길이: 윈도우 세로 길이: JavaScript main.js /** 가로 길이를 표시하는 요소 */ const widthl..

122_자바스크립트 탭 화면 이벤트 처리하기 [적용] 브라우저 탭 비활성화(백그라운드화)시 시스템의 부하를 주는 작업을 멈추고 싶을 때 스마트폰 슬립 모드에서 브라우저 복귀 시점의 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 visibilitychange 브라우저의 탭 상태가 변경되는 시점 [내용] visibilitychange 이벤트는 브라우저 탭의 콘텐츠가 표시/비표시(백그라운드화) 변경이 일어날 때 발생한다. document 요소에 이벤트를 설정한다. 요소 표시 상태를 나타내는 document.visibilityState를 함께 사용해 상태에 따를 처리를 분류할 수 있다. HTML index.html 콘솔을 확인해 주세요. JavaScript main.js document.addEventL..

121_자바스크립트 키보드에서 입력된 키 정보 확인하기 [적용] 입력된 키에 따라 처리를 분류하고 싶을 때 [문법] 속성 의미 타입 키보드이벤트.key 눌러진 키의 값 문자열 키보드이벤트.code 눌러진 버튼의 코드 문자열 키보드이벤트.altKey 눌러진 키 값 확인 (Alt 키 여부) 진리값 키보드이벤트.ctrlKey 눌러진 키 값 확인 (Ctrl 키 여부) 진리값 키보드이벤트.shiftKey 눌러진 키 값 확인 (Shift 키 여부) 진리값 키보드이벤트.metaKey 눌러진 키 값 확인 (meta 키* 여부) 진리값 키보드이벤트.repeat 현재 키의 눌러진 상태 확인 진리값 키보드이벤트.isComposing 입력 중 상태 확인** 진리값 키보드이벤트.keyCode 눌러진 키의 아스키(ASCII) 코..

120_자바스크립트 키보드 입력 이벤트 처리하기 [적용] 문자를 입력할 때마다 잡억을 실행하고 싶을 때 [문법] 이벤트 발생 타이밍 keydown 키를 누르는 시점 keyup 누를 키를 뗴는 시점 keypoess 문자 키가 눌려진 시점 [내용] keydown, keyup, keypress 는 키 입력을 감시하는 이벤트로, 각각의 이벤트가 발생하는 시점이 다르다. 다음 샘플을 확인해 보자. HTML index.html JavaScript main.js document.querySelector('.textarea').addEventListener('keydown', () => { console.log('키가 눌러졌습니다.'); }); document.querySelector('.textarea').addEv..

119_자바스크립트 터치 이벤트 정보 확인하기 [적용] 마우스 움직임에 따라 작업을 처리하고 싶을 때 터치에 반응하는 요소를 처리하고 싶을 때 [문법1] 속성 내용 타입 event.changedTouches 터치 정보(Thoch 객체) 배열 배열 [문법2] 속성 내용 타입 터치정보.clientX 브라우저 좌측 상단 기준 X 좌표 숫자 터치정보.clientY 브라우저 좌측 상단 기준 Y 좌표 숫자 터치정보.offsetX 요소 좌측 상단 기준 X 좌표 숫자 터치정보.offsetY 요소 좌측 상단 기준 Y 좌표 숫자 터치정보.pageX 페이지 좌측 상단 기준 X 좌표 숫자 터치정보.pageY 페이지 좌측 상단 기준 Y 좌표 숫자 터치정보.screenX 디바이스 좌측 상단 기준 X 좌표 숫자 터치정보.scree..

118_자바스크립트 터치 이벤트 처리하기 [적용] 스마트폰에서 화면 터치에 반응하는 처리를 하고 싶을 때 [문법] 이벤트 발생 타이밍 touchstart 터치 시작 시점 touchmove 터치 포인트를 움직이는 시점 touchend 터치 종료 시점 [내용] 터치 가능 디바이스는 시작, 이동, 종료의 터치 이벤트가 발생한다.터치 이벤트를 감지하여 로그로 출력하는 샘플을 확인해 보자. HTML index.html 터치가 가능한 디바이스에서 확인해 주세요.