101_자바스크립트에서 스크롤 크기 확인하기 [적용] 스크롤 크기에 따라 작업을 처리하고 싶을 때 [문법] 속성 의미 타입 window.scrollX 수평 방향 스크롤의 크기 숫자 window.scrollY 수직 방향 스크롤의 크기 숫자 [내용] 페이지의 스크롤 크기를 확인하는 데는 수평 방향의 경우 scrollX, 수직 방향의 경우는 scrollY를 사용한다. const x = window.scrollX; const y = window.scrollY; console.log(x, y); 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김

100_자바스크립트로 새 윈도우 창 열기 [적용] 현재 페이지를 그대로 둔 채로 새로운 윈도우 창을 열고 싶을 때 [문법] 메소드 의미 반환 window.open(URL) 새로운 창 열기 새로운 창의 객체 [내용] 새로운 윈도우 창을 열기 위해서는 window.open()을 사용한다. 인수에 URL을 전달하며, 새로운 창이 기존 창보다 뒤에서 열리지 않도록 focus()를 사용해 액티브 처리를 지정한다. focus()는 a 태그의 target="_blank" 속성과 비슷하다. window.open()의 반환값 참조를 응용하여 페이지 간에 데이터를 주고 받는 작업도 가능하다. const win = window.open('another.html'); win.focus(); 참조 : 실무에 바로 적용하는 자바..

099_자비스크립트에서 해시 변경 확인하기 [적용] 해시값이 변경될 때마다 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 hashchange URL의 해시가 변경되었을 때 [내용] URL의 #(해시)가 변경될 때마다 작업을 처리하고 싶을 때 window 객체의 hashchange 이벤트를 확인한다. #(해시)가 변경되는 타이밍은 다음과 같다. 페이지 내 앵커 링크를 클릭할 때 브라우저의 '뒤로 가기', '앞으로 가기' 버튼을 눌렀을 때 유저가 URL의 해시를 변경할 때 페이지 내 앵커 링크를 만들어 각각 '현재 앵커는 '#apple'입니다. 현재 앵커는 '#orange'입니다.' 로 전환이 가능한 샘플을 만들어 보자. 주소창에는 #apple과 #orange가 포함되어 있다. // 해시 변경 이벤트..

098_자바스크립트 해시(Hash #) 처리하기 [적용] 딥 링크(Deep Link)를 구현하고 싶을 때 해시값에 따라 처리를 구분하고 싶을 때 [문법] 속성 의미 반환 location.hash 앵커 달기 문자열 [내용] location.hash 속성으로 앵커(Anchor*) 기능을 사용할 수 있다. 앵커는 페이지 내부의 링크 기능을 하며, 읽기와 쓰기 모두 가능하다. * 하이퍼링크와 같은 의미 [읽기 작업] const hash = location.hash; console.log(hash); // 결과의 예: '#app' [쓰기 작업] location.hash = 'app'; 단일 페이지 애플리케이션에서 페이지의 계층을 나타내기 위해 앵커를 사용하기도 한다. 단일 웹 페이지 내에서 여러 화면으로 표시하고..

097_자바스크립트로 HTML페이지 이동하기(앞/뒤로 가기) [적용] 브라우저의 '뒤로 가기' 버튼과 같은 동작을 구현하고 싶을 때 [문법] 메소드 의미 반환 history.back() 뒤로 가기로 화면 이동 없음 history.forward() 앞으로 가기로 화면 이동 없음 history.go(숫자) 임의의 수만큼 화면 이동 없음 [내용] 브라우저의 '뒤로 가기' 버튼과 같이 히스토리를 거슬러 올라가는 다음의 메소드를 확인해 보자 history.back(); 다음 메소드는 브라우저의 '앞으로 가기'버튼과 같은 작업을 한다. history.forward(); 임의의 숫자를 전달하여 히스토리를 이동하는 메소드는 음수를 입력하면 뒤로 가기, 양수를 입력하면 앞으로 가기 작업이 실행된다. history.go(..

096_자바스크립트로 HTML 페이지 리로드(Reload) 하기 [적용] 게시판 등의 화면을 새로고침하고 싶을 때 [문법] 메소드 의미 반환 location.reload(진리값) 화면 새로고침 없음 [내용] 화면을 새로고침하고 싶을 때 사용하는 메소드. 게시판에서 새 글을 확인할 때 사용하는 새로고침 버튼 등에 사용하거나 웹 게임 등의 콘텐츠에서 게임이 종료되었을 때 시작 화면으로 전화하는 기능으로도 사용할 수 있다. 예제를 통해 location.reload()를 확인해 보자. 해당 메소드를 요청하는 순간 새로고침이 실행되며, 브라우저의 새로고침 버튼과 같은 작동을 한다. 전달 인수가 없으면 캐시를 사용해서 새로고침이 실행된다. location.reload(); 인수에 true를 전달하면 브라우저의 캐시..

095_자바스크립트로 HTML 페이지 이동하기 [적용] a 태그 이외의 방법으로 페이지를 이동하고 싶을 때 [문법] 속성 의미 반환 location.href 브라우저 URL 문자열 [내용] location.href 속성에 URL을 문자열로 대입한다. 대입한 타이밍에 맞춰 페이지 이동이 이루어진다. 상대 경로는 현재 페이지의 URL 주소가 기준점이 된다. a 태그의 href 속성과 비슷하다고 생각하면 이해하기 쉬우며, 해당 속성은 읽기와 쓰기가 모두 가능하다.읽기는 현재 페이지의 주소를 가져오며, 쓰기는 해당 페이지로 이동하는 작업을 실행한다. // 읽기 작업 console.log(location.href); // 결과: 현재 페이지의 URL // 쓰기 작업 location.href = 'another.h..

094_자바스크립트에서 터치 디바이스 사용 확인하기 [적용] 데스크탑과 모바일 브라우저에 따라 처리를 구분하고 싶을 때 [문법] 속성 의미 반환 window.ontoucjstart 터치 기능 시작 이벤트 함수 navigator.pointerEnabled 포인터 사용 가능 여부 진리값 navigator.maxTouchPoints 포인터의 최대치 숫자 [내용] 터치할 수 있는 대표적인 디바이스는 iOS와 안드로이드의 스마트폰이며, 마이크로소프트의 서피스(Surface)처럼 윈도우즈에서 터치 작업이 가능한 디바이스도 있다. 터치 사용 여부의 확인을 위해 다음과 같은 코드를 사용할 수 있다. const isSupported = !!( 'ontouchstart' in window || // iOS & 안드로이드 ..

093_자바스크립트 캔버스(Canvas)에 디바이스 화소 맞추기 [적용] 캔버스 요소를 고해상도 디스플레이로 표시하고 싶을 때 [내용] 캔버스 요소는 화소의 비율 계산에 사용할 수 있다. 캔버스에 표시하고 싶은 사이즈에 화소비율을 곱해서 값을 설정한다. 표시 사이즈를 지정하는 스타일 시트를 확인해 보자. // 디바이스 화소 비율 가져오기 const dpr = window.devicePixelRatio; // 캔버스의 논리적 크기 const w = 200; const h = 200; // 캔버스 요소 사이즈 조정 const canvas = document.querySelector('canvas'); canvas.width = w * dpr; // 실제 크기는 배가 됨 canvas.height = h * d..

092_자바스크립트에서 디바이스 화소 확인하기 [적용] 디바이스 화소 비율에 따라 제어 방식을 구분하고 싶을 때 고해상도 디바이스에서 큰 이미지를 사용하고 싶을 때 [문법] 속성 의미 반환 window.devidePixelRatio 화소 비율의 값 숫자 [내용] 고해상도 디바이스란 아이폰의 레티나(Retina) 디스플레이와 같이 화소 밀도(ppi)가 높은 디스플레이(HiDPI 디스플레이)를 말한다. 고해상도에 맞춰 처리 작업을 하지 않으면 해당 기기에서 사진 등이 뿌옇게 보이거나 화소가 깨져 보이는 현상이 발생할 수 있다. 디스플레이 해상도의 물리 화소 확인은 window 객체 devicePixelRatio 속성을 사용한다. const dpr = window.devicePixelRatio; 일반적인 디스..