브라우저가 제공하는 기능을 JavaScript로 사용하는 기본 구조를 배웁니다.
웹 API는 DOM, Fetch, Storage, Geolocation처럼 브라우저 환경이 제공하는 인터페이스입니다. JavaScript 언어 자체와 구분되며 보안 컨텍스트나 사용자 권한이 필요한 API도 있습니다.
버튼을 누르면 navigator.language, navigator.onLine, innerWidth 세 값을 줄바꿈 문자로 이어 pre에 씁니다. 언어는 브라우저가 우선하는 언어 태그라 한국어 설정이면 ko-KR이나 ko처럼 나오고, 온라인 여부는 true나 false로 표시됩니다. innerWidth는 이 예제가 실행되는 iframe의 뷰포트 폭이라 모니터 크기와 다르고, 창 크기를 바꾼 뒤 다시 누르면 값이 달라집니다.
navigator.onLine이 true라고 해서 인터넷에 실제로 연결됐다고 확신할 수는 없습니다. 공유기에만 연결되고 외부망이 끊긴 경우에도 true가 될 수 있으므로, 상태가 바뀌는 순간은 window의 online과 offline 이벤트로 받고 실제 연결 여부는 요청 결과로 판단합니다. 사용자가 고른 언어 전체는 navigator.languages 배열에 우선순위 순으로 들어 있습니다.
API 지원 여부와 권한 거부 상황을 처리하지 않으면 특정 브라우저에서 기능이 멈춥니다.
직접 바꿔보세요navigator.language 외에 online 상태도 화면에 출력하세요.