111_자바스크립트 클릭 이벤트 사용하기 [적용] 버튼 클릭 시 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 click 요소 클릭 시점 [내용] click 이벤트는 요소를 탭하거나 클릭 시 발생한다. 다음과 같이 버튼 요소에 click 이벤를 설정한다. 이 click 이벤트는 버튼 외에도 div 요소, a 요소 등 임의의 HTML 요소에 사용할 수 있다. HTML index.html JavaScript main.js document.querySelector('.button').addEventListener('click', () => { alert('버튼 클릭 이벤트 발생'); }); 버튼 클릭시 알림창이 표시된다. 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카..

110_자바스크립트 페이지 로드 시 이벤트 사용하기 [적용] DOM 요소 엑세스 타이밍에 맞춰 작업을 처리하고 싶을 때 이미지 로딩이 완료된 후 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 DOMContentLoaded HTML 문서 로딩 완료 시점 load 모든 리소스 로딩 완료 시점 [내용] 자바스크립트에서 DOM 요소의 조작 가능 시점은 HTML 문서의 로딩 완료 시점으로 이 시점에서 DOMContentLoaded 이벤트가 발생한다. 페이지 내 .box 요소의 개수를 세는 샘플을 확인해 보자. 다른 샘플과 달리 script 태그에 defer 속성을 부여하지 않는다. HTML index.html 박스 박스 박스 JavaScript main.js // DOM 엑세스 타이밍에 처리 실행 wond..

109_자바스크립트 이벤트 리스너 삭제하기 [적용] 이벤트 처리를 삭제하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟.removeEventListener(이벤트명, 리스너, [옵션*]) 이벤트 리스너 삭제 없음 *생략 가능 [내용] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. const box = document.querySelector('.box'); box.addEventListener('click', onClickButton); // 3초 후 리스너의 함수를 삭제 setTimeout(() => { box.removeEventListener('click', onClickButton); }, 3000); function onC..

108_자바스크립트 이벤트 리스너 1회 실행하기 [적용] 이벤트를 1회만 실행하고 싶을 때 [문법] 옵션 의미 타입 capture 이벤트 캡쳐 여부 진리값 once 리스터 1회 실행 여부 진리값 passive 패시프 이벤트 여부 진리값 [내용] addEventListener()의 세 번째 인수에 옶션을 지정할 수 있다. 반드시 모든 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 예를 들어 이벤트를 1회만 실행하고자 할 경우는 once를 true로 설정한다. // 옵션 지정 const option = { once: true }; document.querySelector('.button').addEventListener('click', onClickButton, option); fuction ..

107_자브스크립트 이벤트 추가하기 [적용] 이벤트의 함수를 지정하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟,addEventListener(이벤트이름, 리스너, [옵션*]) 이벤트 리스너 설정 없음 *생략 가능 [내용] addEventListener()를 사용해 이벤트의 함수를 지정할 수 있다. 이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같이 다양한 방법으로 기술이 가능하다. // 요소의 참조 정보 가져오기 const button = document.querySelector('button'); // 화살표 함수 사용하기 button.addEventListener('click', () => { console.log('버튼 클릭 이벤트가 발생하였습니다.'); }); 화살표 함수는 this 를 고..

106_자바스크립트에서 온라인/오프라인 대응하기 [적용] 오프라인 화면에 네트워크의 연결 상태를 표시하고 싶을 때 [문법] 속성 의미 타입 navigator.onLine 네트워크 상태 가져오기 진리값 [내용] navigator.onLine 속성을 사용하여 네트워크 상태를 확인할 수 있다. 반환값이 true인 경우 네트워크 온라인 상태를 나타내며, 해당 속성은 읽기만 가능하다. 브라우저의 네트워크 상황을 감시하여 오프라인 상태일 때 화면에 해당 상태를 표시하는 기능 등에 사용할 수 있다. // 접속 상태 확인 const inOnline = navigator.onLine; if (isOnline === true) { console.log('온라인 상태입니다.'); } else { console.log('오프..

105_자바스크립트로 전체 화면 표시하기 [적용] 전체 화면으로 콘텐츠를 표시하고 싶을 때 동영상을 전체 화면으로 재생하고 싶을 때 이어지는 콘텐츠를 표시하고 싶을 때 [문법] 메소드 의미 반환 element.requestFullscreen() 전체 화면으로 표시 Promise document.exitFullscreen() 전체 화면 해제 Promise [내용] 전체 화면 전환은 requestFullscreen()을 사용한다. 동영상이나 프레젠테이션 콘텐츠를 전체 화면으로 표시할 때 유용하다. 브라우저에서 해당 메소드가 지원되지 않는 경우 별도의 메소드로 브라우저를 명시하여 사용한다. 다음 샘플을 확인해 보자. const btn = document.querySelector('#btn'); btn.addE..

104_자바스크립트에서 포커스 확인하기 [적용] 페이지의 포커스 유무를 확인하고 싶을 때 페이지에 포커스가 맞춰져 있을 때만 음악을 재생하고 싶을 때 [문법] 이벤트 발생 타이밍 focus 포커스가 맞춰져 있을 때 blur 포커스를 벗어나 있을 때 [내용] 해당 페이지의 포커스 상태 여부는 이벤트를 통해 확인할 수 있다. focus 이벤트는 포커스가 맞춰졌을 때 발생하는 이벤트이며, blur는 그 반대의 이벤트다. 예를 들어, 웹에서 BGM을 재생하고 싶을 때는 focus와 blur를 사용하여 재생과 정지를 할 수 있다. window.addEventListener('focus', () => { document.querySelector('#log').innerHTML = '포커스 상태'; }); windo..

103_자바스크립트에서 타이틀 변경하기 [적용] 타이틀을 동적으로 변환하고 싶을 때 읽지 않은 메시지 건수를 타이틀 바에 표시하고 싶을 때 [문법] 속성 의미 타입 document.title 페이지 타이틀 문자열 [내용] document.title 속성으로 페이지의 타이틀 정보를 가져올 수 있으며, 읽기와 쓰기가 모두 가능하다. // 읽기 작업 const title = document.title; // 쓰기 작업 document.title = '타이틀 내용'; document.querySelector('#btnApple').addEventListner('click', () => { document.title = '사과'; }); document.querySelector(#btnOrange').addEve..

102_자바스크립트에서 스크롤 설정하기 [적용] 페이지의 원하는 부분에 스크롤을 넣고 싶을 때 '상단(TOP)으로 가기' 버튼을 사용하고 싶을 때 [문법] 메소드 의미 반환 scrollTo(X, Y) 지정한 좌표의 값까지 스크롤하기 없음 [내용] 지정한 위치에 스크롤 기능을 사용하기 위해서 scrollTo()를 사용한다. 첫 번째 인수는 수평, 두 번째 인수는 수직의 값을 지정한다. window.scrollTo(0, 1000); 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김