131_자바스크립트 셀렉터 조건 만족하는 요소 모두 가져오기 [적용] 셀렉터명과 일치하는 요소를 정리하여 작업을 처리하고 싶을 때 [문법] 메소드 의미 반환 document.querySelectorAll(셀렉터명) 셀렉터명 일치 요소 모두 가져오기 배열(NodeList) [내용] document.querySelectorAll()은 셀렉터명과 일치하는 HTML 요소를 모두 가져오며, 반환값은 요소를 하나의 배열로 정리한 객체(NodeList 객체)다. 배열 요소의 값은 forEach()를 사용해 접근할 수 있다. 콜백 함수를 사용한 요소의 처리도 가능하다. HTML index.html 박스1 박스2 박스3 JavaScript main.js // .box 요소 모두 가져오기 const boxList = do..

130_자바스크립트 ID의 각 요소 값 읽어오기 [적용] ID 데이터와 일치하는 요소를 가져오고 싶을 때 [문법] 메소드 의미 반환 document.getElementById(ID명) ID명 일치 요소 가져오기 요소(HTMLElement) [내용] document.getElementById() 는 ID명을 지정하여 하나의 HTML 요소를 가져오는 메소드다. querySelector()와 달리 인수에는 셀렉터명이 아닌 ID명을 전달하므로 주의가 필요하다. 즉 HTML의 id="foo" 요소를 가져오기 위해서는 #를 뺀 'foo'만을 인수로 전달해야 한다. HTML index.html JavaScript main.js // foo 요소 const element = document.getElementNyId(..

129_자바스크립트 셀렉터 사용하기 [적용] 셀렉터를 사용해 지정 요소를 가져오고 싶을 때 [문법] 메소드 의미 반환 document.querySelector(셀렉터명) 셀렉터명 일치 요소 가져오기 요소(Element) [내용] HTML 요소를 다루기 위해서는 우선 대상 HTML 요소를 읽어 와야 한다. 자바스크립트는 셀렉터명, ID명, 클래스명 등의 지정을 통해 HTML 요소를 읽어 올 수 있다. document.querySelector()는 인수의 셀렉터명과 일치하는 하나의 요소를 가져오는 메소드다.셀렉터는 요소 지정을 위한 조건식으로 CSS의 #ID명, .클래스면, :nth-child(번호) 등과 같다.일치하는 요소가 하나 이상이라면 첫 요소를 반환한다. HTML index.html JavaScri..

128_자바스크립트 요소 다루기 [적용] 자바스크립트에서 HTML 요소를 다루고 싶을 때 [내용] 자바스크립트는 웹 페이지의 텍스트나 스타일을 변경할 수 있다. 이와 같이 HTML 각 요소에 접근하는 방식은 DOM(Document Object Model) 인터페이스로 정의되어 있다. DOM은 트리 구조를 사용하여 HTML 문서를 다룬다. HTML index.html 타이틀 리스트 1 리스트 2 리스트 3 트리의 각 구성 요소를 '노드(Node)'라고 한다. '혹' 또는 '마디'라는 뜻의 노드는 자바스크립트에서 Node 객체로 취급하며, 요소를 가져오거나 추가하는 작업이 가능하다. Node 객체의 속성과 메소드는 '노드.속성' 과 '노드.메소드'로 접근이 가능하다. HTML 문서전체의 요소는 documen..

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..