[JavaScript] 자바스크립트에서 온라인/오프라인 대응하기

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

2022.06.22

[JavaScript] 자바스크립트로 전체 화면 표시하기

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

2022.06.22

[JavaScript] 자바스크립트에서 포커스 확인하기

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

2022.06.21

[JavaScript] 자바스크립트에서 타이틀 변경하기

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

2022.06.21

[JavaScript] 자바스크립트에서 스크롤 설정하기

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

2022.06.21

[JavaScript] 자바스크립트에서 스크롤 크기 확인하기

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

2022.06.21

[JavaScript] 자바스크립로 새 윈도우 창 열기

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

2022.06.21

[JavaScript] 자바스크립트에서 해시 변경 확인하기

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

2022.06.21

[JavaScript] 자바스크립트에서 해시(Hash #) 처리하기

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

2022.06.16

[JavaScript] 자바스크립트로 HTML페이지 이동하기(앞/뒤로 가기)

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

2022.06.16