[ javascript ] 27. BOM ( window, navigator, screen, location, history )

Browser Object Model (BOM)

 

JavaScript의 Browser Object Model (BOM)은 웹 브라우저와의 상호작용을 담당하는 객체와 메서드를 제공합니다. 이것은 Document Object Model (DOM)과는 다르며, DOM이 HTML 문서의 구조와 콘텐츠를 다룬다면, BOM은 브라우저와의 상호작용을 다룹니다.

 

window: 전역 window 객체는 브라우저 창을 나타내며, BOM의 루트 역할을 합니다. 브라우저 창을 조작하고, 탐색을 제어하며, 대화상자를 관리하기 위한 속성과 메서드를 제공합니다.

navigator: navigator 객체는 브라우저에 관한 정보를 제공합니다. 브라우저의 이름, 버전, 플랫폼 등을 확인하는 데 사용되며, 주로 브라우저의 기능과 기능성을 감지하는 데 사용됩니다.

screen: screen 객체는 사용자의 화면에 관한 정보를 제공합니다. 화면의 폭, 높이, 색상 깊이, 픽셀 깊이 등의 정보를 제공하며, 반응형 디자인을 구축하거나 웹 콘텐츠의 레이아웃을 조정하는 데 유용합니다.

location: location 객체는 현재 웹 페이지의 URL에 관한 정보를 포함하고 다른 URL로 이동하기 위한 메소드를 제공합니다.

history: history 객체를 사용하여 브라우저의 탐색 기록 스택과 상호작용할 수 있습니다. 사용자의 브라우저 탐색 기록을 통해 뒤로 또는 앞으로 이동하는 등의 작업을 수행할 수 있습니다.

 

 

1. window 

모든 객체가 소속된 객체이며, 브라우저 창을 의미

 

window

mdn

 

속성	설명
window.innerHeight	브라우저 창의 내부 높이를 픽셀 단위로 나타냅니다
window.innerWidth	브라우저 창의 내부 폭을 픽셀 단위로 나타냅니다
window.outerHeight	브라우저 창의 외부 높이를 픽셀 단위로 나타냅니다
window.outerWidth	브라우저 창의 외부 폭을 픽셀 단위로 나타냅니다
window.location	현재 문서의 URL에 대한 정보를 포함하는 Location 객체를 나타냅니다.
window.navigator	브라우저와 관련된 정보를 제공하는 Navigator 객체를 나타냅니다.
window.document	현재 창에 로드된 문서를 나타내는 Document 객체를 반환합니다.
window.history	브라우저의 탐색 기록을 관리하는 History 객체를 나타냅니다.
window.screen	사용자의 화면에 관한 정보를 제공하는 Screen 객체를 나타냅니다.

 

 

https://fullstack-eun.tistory.com/57

[ javascript ] 17. window,스크롤, 마우스 좌표, getBoundingClientRect

 

 

메서드	설명
window.open()	웹 브라우저에서 새창  - window.open(url, name, specs, replace);
window.close()	브라우저 창을 닫을 때
window.alert()	사용자에게 중요한 내용이나 경고를 띄울 때 사용 , 중간값 체크
window.confirm()	사용자에게 true 또는 false값을 리턴 받을 수 있는 함수
window.prompt()	사용자에게 입력값을 받을 수 있는 창을 띄워주는 함수
window.localStorage()	웹 브라우저에서 데이터를 저장하는 객체
requestAnimationFrame()	애니메이션을 업데이트할 지정된 함수를 호출

 

 

 

localStorage 참고

https://fullstack-eun.tistory.com/69

[ javascript ] 24. window.localStorage

 

 

메서드	설명
moveBy()	현재 창을 상대적인 위치로 이동시킵니다. window.moveBy(100, 50)은 현재 창을 오른쪽으로 100px, 아래로 50px 이동
moveTo()	현재 창을 절대적인 위치로 이동 window.moveTo(0, 0)은 현재 창을 화면의 좌상단으로 이동
scrollBy()	현재 창을 상대적인 위치로 스크롤 window.scrollBy(0, 100)은 현재 창을 세로로 100px 아래로 스크롤
scrollTo()	현재 창을 절대적인 위치로 스크롤 window.scrollTo(0, 0)은 현재 창을 문서의 가장 위쪽으로 스크롤
resizeBy()	현재 창의 크기를 상대적으로 조정 window.resizeBy(100, 50)은 현재 창의 너비를 오른쪽으로 100px, 높이를 아래로 50px 조정
resizeTo()	현재 창의 크기를 절대적으로 조정 window.resizeTo(800, 600)은 현재 창의 크기를 너비가 800px, 높이가 600px로 조정

 

 

2) screen: 사용자 환경의 디스플레이 정보 객체

프로퍼티	설명
width	사용자의 화면 너비를 픽셀 단위
height	사용자의 화면 높이를 픽셀 단위
availWidth	작업 표시줄 등을 제외한 사용 가능한 화면 너비를 픽셀 단위
availHeight	작업 표시줄 등을 제외한 사용 가능한 화면 높이를 픽셀 단위
colorDepth	사용자의 화면에서 사용 가능한 비트 수를 나타내며, 색상 수를 결정

 

 

 

3) location: 현재 페이지의 url을 다루는 객체

Location 객체는 창에 표시되는 문서의 URL를 관리합니다.  Location객체는 window.location  또는 location으로 참조할 수 있습니다. document.location 또한 Location객체를 참조합니다. 

 

Location객체의 프로퍼티는 수정할수 있으며 그 값을 수정하면 필요에 따라 웹 서버에 수정을 요청하고 응답에 따라 창을 갱신합니다. 

 

프로퍼티	설명
href	현재 문서의 URL을 나타냅니다.
hash	현재 URL의 해시(문서 내부의 특정 위치를 가리키는 부분), "#section1"과 같은 형식 앵커부부
host	현재 URL의 호스트 이름과 포트를 나타냅니다.
hostname	현재 URL의 호스트 이름을 나타냅니다.
pathname	현재 URL의 경로를 나타냅니다. 예를 들어, "/path/to/resource"와 같은 형식입니다.
port	현재 URL의 포트 번호를 나타냅니다.
protocal	현재 URL의 프로토콜을 나타냅니다. 예를 들어, "http:", "https:", "file:", 등이 될 수 있습니다.
search	현재 URL의 쿼리 문자열을 나타냅니다. 예를 들어, "?param1=value1&param2=value2"와 같은 형식입니다.
orign	현재 문서의 원본(origin)을 나타내는 속성 현재 URL이 https://example.com:8080/path/name?query=string 이라면, location.origin은 https://example.com:8080을 반환합니다.

 

 

메서드 

메서드	설명
assign(url)	url이 가리키는 문서를 일고, 웹브라이저의 이력에 남습니다.
reload()	문서를 다시 읽어 들임
replace(url)	url로 이동, 웹브라우저 이력에남지 않음
toString()	location.href값을 반환

 

 assign(url): 지정된 URL로 현재 문서를 이동합니다.
 url 매개변수에는 이동하고자 하는 새로운 URL을 문자열로 지정합니다. 이 메서드를 호출하면 브라우저는 해당 URL로 즉시 이동하며, 이전의 탐색 기록은 유지되지 않습니다.

location.assign("url");

 

replace(url): 현재 문서의 URL을 지정된 URL로 교체합니다. assign() 메서드와 마찬가지로 지정된 URL로 이동하지만, 이전의 탐색 기록을 변경하지 않고 새로운 URL로 바로 교체합니다.

location.replace("url");

 

reload(forceGet): 현재 문서를 다시 로드합니다. 기본적으로 브라우저의 캐시를 사용하여 새로고침을 수행하지만, forceGet 매개변수를 true로 설정하면 캐시를 무시하고 서버에서 새로운 내용을 가져옵니다.
 location.reload();

 

 

 

# URLSearchParams    mdn

웹 API로, URL의 쿼리 문자열을 쉽게 조작하고 관리할 수 있게 해주는 객체입니다. 이 객체를 사용하면 URL의 쿼리 파라미터를 쉽게 생성, 읽기, 삭제 및 수정할 수 있습니다.

 

 

메서드	설명
URLSearchParams	URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의
URLSearchParams.append()	문 주어진 키/값 쌍을 새로운 검색 매개변수로 추가
URLSearchParams.delete()	주어진 검색 매개변수와 그 값을 모두 삭제
URLSearchParams.entries()	객체의 모든 키/값 쌍을 쿼리 문자열과 같은 순서로 순회할 수 있는 순회기를 반환
URLSearchParams.forEach()	객체의 모든 값을 순회하면서 지정한 콜백을 호출
URLSearchParams.get()	주어진 검색 매개변수에 연결된 첫 번째 값을 반환
URLSearchParams.getAll()	주어진 검색 매개변수에 연결된 모든 값을 반환
URLSearchParams.has()	주어진 검색 매개변수의 존재 여부를 나타내는 불리언 값을을 반환
URLSearchParams.keys()	객체의 모든 키/값 쌍에서 키만 순회할 수 있는 순회기를 반환
URLSearchParams.set()	주어진 검색 매개변수에 값을 설정합니다. 이미 해당 매개변수에 연결된 값이 있으면 우선 모두 제거
URLSearchParams.sort()	모든 키/값 쌍을 키의 순서로 정렬
URLSearchParams.toString()	URL에 쓰기 적합한 형태의 쿼리 문자열을 반환
URLSearchParams.values()	객체의 모든 키/값 쌍에서 값만 순회할 수 있는 순회기를 반환

 

 

const paramsString = "q=URLUtils.searchParams&topic=api";
let searchParams = new URLSearchParams(paramsString);

// 검색 매개변수 순회
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

 

// 검색 매개변수는 객체도 가능
let paramsObj = { foo: "bar", baz: "bar" };
let searchParams = new URLSearchParams(paramsObj);

searchParams.toString(); // "foo=bar&baz=bar"
searchParams.has("foo"); // true
searchParams.get("foo"); // bar

 

 

중복 매개변수 

let paramStr = "foo=bar&foo=baz";
let searchParams = new URLSearchParams(paramStr);

searchParams.toString(); // "foo=bar&foo=baz"
searchParams.has("foo"); // true
searchParams.get("foo"); // bar, 첫 번째 값만 반환
searchParams.getAll("foo"); // ["bar", "baz"]

 

URL 파싱 없음

URLSearchParams 생성자에 URL 파싱 기능은 없습니다. 다만 쿼리 문자열이 ?로 시작하면 무시합니다.

 

 

const paramsString1 = "http://example.com/search?query=%40";
const searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (decodeURIComponent('%40')과 동일)

const paramsString2 = "?query=value";
const searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

const url = new URL("http://example.com/search?query=%40");
const searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query"); // true

 

 

 

4) navigator: 웹브라우저 및 브라우저 환경 정보 객체

웹 브라우저의 정보 조회 기능.

프로퍼티	설명
navigator.appName	브라우저 이름
navigator.appCodeName	브라우저 코드명
navigator.platform	플랫폼 정보
navigator.appVersion	브라우저 버전
navigator.userAgent	사용자 정보 (가장 포괄적인 정보를 담고 있습니다.)

 

 

 

5) history: 현재의 브라우저가 접근했던 URL history

history 객체는 브라우저의 탐색 기록을 관리하는 데 사용됩니다. 이 객체는 탐색 기록 스택에 접근하고 조작할 수 있는 다양한 프로퍼티와 메서드를 제공합니다.  

 

프로퍼티	설명
state	탐색 기록 상태 정보를 나타냅니다. 일반적으로 사용되는 프로퍼티는 아니지만, HTML5의 History API를 사용하여 탐색 기록을 조작할 때 사용될 수 있습니다. history.state  탐색 기록 상태 정보 출력
length	탐색 기록 스택에 현재 저장된 항목의 수를 반환합니다. history.length  현재 탐색 기록 스택의 길이 출력
scrollRestoration	웹페이지를 이동한후에 동작하는 웹브라이저의 자동 스크롤 기능을 켜거나 끄는 값  auto 또는 maual 이 들어갈수 있습니다.

 

주의할 점은 일반적으로 history 객체의 프로퍼티는 읽기 전용이며, 주로 탐색 기록 스택에 저장된 항목의 수를 확인하는 데 사용됩니다. 프로퍼티를 직접 수정할 수 없으며, 탐색 기록을 조작하려면 History API의 메서드를 사용해야 합니다.

 

메서드

메서드	설명
back()	브라우저의 탐색 기록을 이전으로 이동합니다. 이 메서드는 사용자가 이전에 방문한 페이지로 이동하며, 브라우저의 뒤로 가기 버튼을 클릭하는 것과 동일한 효과를 제공합니다. history.back();
forward()	브라우저의 탐색 기록을 다음으로 이동합니다. 이 메서드는 사용자가 이전에 방문한 페이지에서 뒤로 이동한 후 앞으로 가기 버튼을 클릭하는 것과 동일한 효과를 제공합니다. history.worward()
go(distance)	지정된 거리만큼 탐색 기록을 이동합니다. distance 매개변수는 음수일 경우 뒤로 이동하고, 양수일 경우 앞으로 이동합니다. 0을 전달하면 새로고침합니다. history.go(-2)  뒤로 두 페이지 이동 history.go(3)  앞으로 세 페이지 이동

 

 

 

# window.getSelection()

 

브라우저에서 사용자가 선택한 텍스트(하이라이트된 텍스트)를 가져오는 방법을 제공하는 JavaScript 메서드입니다. 이 메서드는 페이지에서 사용자가 드래그하거나 클릭하여 선택한 텍스트를 반환합니다. 주로 복사, 클립보드 작업, 또는 선택한 텍스트를 분석하는 데 사용됩니다.

 

const selection = window.getSelection();
console.log(selection.toString());

 

const selectedText = window.getSelection().toString();
console.log(selectedText);  // 선택된 텍스트가 문자열로 출력됨

 

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const selectedText = selection.toString();
    if (selectedText.length > 0) {
      console.log(`선택된 텍스트: ${selectedText}`);
    }
  }
});

 

선택 드래그 

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);  // 선택된 첫 번째 범위 가져오기
    const highlightSpan = document.createElement('span');
    highlightSpan.style.backgroundColor = 'yellow';  // 배경색 설정
    range.surroundContents(highlightSpan);  // 선택된 범위에 스팬을 둘러싸기
  }
});

 

 

• window.getSelection()은 사용자가 페이지에서 선택한 텍스트를 반환합니다.
• Selection 객체의 다양한 메서드(toString(), getRangeAt())를 활용하여 선택된 텍스트와 관련된 정보에 접근할 수 있습니다.

 

# navigator.clipboard

 

웹 브라우저에서 클립보드에 접근하고, 텍스트를 복사하거나 읽을 수 있게 해주는 API입니다. 이 API는 클립보드의 내용을 프로그램적으로 읽고 쓰는 기능을 제공하며, 사용자가 명시적으로 복사/붙여넣기 작업을 허용했을 때에만 동작합니다.

 

주요 메서드

1. navigator.clipboard.writeText(text): 클립보드에 텍스트를 복사합니다.
2. navigator.clipboard.readText(): 클립보드에서 텍스트를 읽어옵니다.

navigator.clipboard.writeText('복사할 텍스트').then(() => {
  console.log('클립보드에 복사되었습니다!');
}).catch(err => {
  console.error('복사 실패:', err);
});

 

navigator.clipboard.readText().then(text => {
  console.log(`클립보드에 있는 텍스트: ${text}`);
}).catch(err => {
  console.error('클립보드 읽기 실패:', err);
});

 

navigator.clipboard는 최신 브라우저에서만 동작하며, 보안상의 이유로 HTTPS에서만 동작합니다. 클립보드에 접근하는 것은 민감한 작업이기 때문에 사용자는 해당 작업을 명시적으로 허용해야 합니다.