[JS] 브라우저 환경과 다양한 명세서

Javascript study

카누가 좋아요 2023. 8. 16. 22:56

📌 참고 사이트

브라우저 환경과 다양한 명세서

ko.javascript.info

자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어이다.

자바스크립트가 돌아가는 플랫폼을 '호스트' 라고 하는데, 이 호스트는 웹 브라우저 뿐만 아니라 웹 서버 등등 다양한 것들이 될 수 있다.

'호스트 환경'은 각 플랫폼이 해당 플랫폼에 특정되는 기능을 제공하는 것을 말한다.

➡️ 최상단에 있는 루트 객체로, 자바스크립트 코드의 전역 객체이다.

➡️ 브라우저 창을 대변하고, 브라우저 창을 제어할 수 있는 메서드를 제공한다.

💡 다음과 같은 전역 함수는 전역 객체 window의 메서드로 사용할 수 있다.

function sayHi() {
  console.log('안녕하세요.');
}

window.sayHi();     // 안녕하세요

💡window 객체가 브라우저 창을 대변하는 점을 이용해, 창의 너비와 높이를 출력 가능하다.

console.log(window.innerWidth);     
console.log(window.innerHeight);
// 둘 다 고정된 것이 아닌 보여지는 창의 너비와 높이를 나타낸다.
// 창을 줄이면 값이 줄어들 수 있다.

문서 객체 모델 (Document Object Model)은 문서의 구조화된 표현(계층으로 표현)을 제공하여 프로그래밍 언어가 DOM 구조에 접근할 수 있게 하여 그것들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

즉, 문서 객체 모델은 웹 페이지 내의 모든 콘텐츠를 객체로 나타낸 것이다.

페이지의 기본 진입점 역할을 한다.

다음과 같이 document 객체를 이용해 페이지의 요소 속성들을 바꿀 수 있다.

// 배경색을 붉은색으로 바꾸기
document.body.style.backgroud = "red";

// 1초 후 배경색을 원상태로 복구하기
setTimeout(() => document.body.style.background = "", 1000);

문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체를 나타낸다.

ex)

브라우저와 운영체제에 대한 정보를 제공한다.

현재 사용 중인 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행 중인 운영체제 정보를 알려주는 navigator.platform이 잘 알려져 있다.

현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경할 수 있게 해준다.

💻 location 객체의 활용

if (confirm("위키피디아 페이지로 가시겠습니까?")) {
  location.href = "https://wikipedia.org";     // 새로운 페이지로 넘어간다.
}

// location.href는 현재 URL을 나타낸다.

문서와 직접 연결되어 있지 않고, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이므로 BOM의 일부이다.