글 작성자: juyoungit

HTML BOM

BOM은 Browser Object Model의 약자로서 웹브라우져를 제어하기 위해서 웹브라우져가 제공해주는 객체들을 의미합니다. 즉, BOM을 사용하면 웹브라우져를 제어할 수 있고 그 중간과정에서 자바스크립트를 사용합니다. 그렇기 때문에 우리는 자바스크립트 상에서 이 BOM을 사용함으로서 웹 브라우져의 여러동작들을 프로그래밍수준에서 제어할 수 있습니다.

 

window 객체(window object)

window 객체는 모든 브라우져에서 지원됩니다. 이 window 객체는 웹 브라우져의 창/프레임을 나타냅니다.

우리가 사용하는 모든 전역 자바스크립트 객체, 함수 그리고 변수는 자동으로 window 객체의 멤버가 됩니다.

예를들어서 전역변수는 window 객체의 속성이고, 함수는 window 객체의 메소드, 심지어 HTML DOM 문서객체도

window 객체의 속성에 해당합니다. 즉, window 객체는 모든 객체가 소속되어 있는 객체에 해당합니다.

 

자바스크립트 상에서 window 객체를 얻기 위해서는 식별자 window를 통해서 얻을 수 있는데 이를 생략할 수도 있습니다.

즉, 아래의 두 예시코드는 모두 같은 문장입니다.

window.document.getElementById("header");
document.getElementById("header");

 

창 크기 제어하기

브라우져 창의 크기를 결정하는 데에는 다음 2가지 속성을 사용할 수 있습니다.

아래의 두 속성은 모두 크기를 픽셀단위로 반환 합니다.

  1. window.innerWidth
  2. window.innerHeight

(웹 브라우져의 버전 or 종류에 따라서 위의 속성에 대한 정의는 다소 상이할 수 있습니다.)

(여기서 말하는 브라우져 창에는 도구모음과 스크롤 막대가 포함되어 있지 않습니다.)

 

그래서 우리는 위의 두 속성을 사용해서 다음과 같이 코드를 작성하고 활용해볼 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth;
var h = window.innerHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
</script>

</body>
</html>

이 외에도 다음과 같은 종류들의 속성을 창의 크기를 조절하는 데 사용할 수 있습니다.

속성 내용
window.open() 새로운 창을 열음
window.close() 현재의 창을 닫음
window.moveTo() 현재 창을 이동
window.resizeTo() 현재 창의 크기를 조정함

 

 

window.screen 객체

window.screen 객체는 사용자 화면에 대한 정보를 포함하는 객체입니다.

이전에 언급했듯이 window 식별자는 생략하고 작성할 수 있습니다.

window.screen 객체가 가지는 속성의 종류들은 다음과 같습니다.

(해당 객체를 사용 시 window를 생략하고 사용하여도 무방합니다.)

속성 내용
window.screen.width 사용자 화면의 너비를 픽셀단위로 반환
window.screen.height 사용자 화면의 높이를 픽셀단위로 반환
window.screen.availWidth 사용자가 사용할 수 있는 화면의 너비를 픽셀단위로 반환

(단, 작업표시줄과 같은 인터페이스가 차지하는 공간은 빼고 계산)
window.screen.availHeight 사용자가 사용할 수 있는 화면의 높이를 픽셀단위로 반환

(단, 작업표시줄과 같은 인터페이스가 차지하는 공간은 빼고 계산)
window.screen.colorDepth 한 색상을 표시하는 데 사용되는 비트 수를 반환
window.screen.pixelDepth 화면의 픽셀 depth를 비트단위로 반환

 

 

창의 위치(참조 중인) 제어하기

우리가 웹페이지를 사용할 때 페이지에 있는 하이퍼링크와 같은 링크를 클릭하여 로딩하고 새로운 창에 해당 주소에 대한

웹페이지를 보게되는 이러한 경우들이 정말 많습니다. 겉으로는 간단해볼 수 있는 이러한 기능들도 내부적으로는 상당히

많은 과정을 거쳐서 수행하게 됩니다. 그런데 복잡한 코딩이나 설계없이 우리는 location 객체를 사용해서 이러한 코드작업

들을 매우 빠르고 효율적으로 처리할 수 있도록 도와줍니다.

 

사용할 수 잇는 속성의 종류는 다음과 같습니다.

(해당 객체를 사용 시 window를 생략하고 사용하여도 무방합니다.)

속성 내용
window.location.href 현재 페이지의 URL을 반환
window.location.hostname 웹 호스트의 도메인 이름을 반환
window.location.pathname 현재 페이지의 경로와 파일 이름을 반환
window.location.protocol 사용된 웹 프로토콜을 반환
window.location.port 현재 웹 페이지에 사용된 포트번호를 반환

(http의 경우 80, https의 경우 443)
(대부분의 웹 브라우져는 기본적으로 포트번호를 표시하지 않음)
window.location.assign() 새로운 html 문서를 로드

 

창의 기록(History)

실제로 웹브라우져는 많은 내용들을 기록하고 이를 유지하고 있습니다. 예를 들어서 사용자가 자주 접속하는 웹페이지에

대한 정보나 사용자가 별도로 등록해놓은 웹페이지, 그리고 사용자가 현재 페이지를 보기 이전에 보고 있었던 과거의 페이지

(뒤로가기) 사용자가 해당 페이지 다음으로 참조했던 페이지(앞으로) 등의 정보들을 기록하고 이 정보들을 활용하여

사용자이 편리하게 웹서핑을 할 수 있도록 해줍니다.

 

이렇게 웹브라우져가 저장하고 있는 기록값들을 우리는 window.history 객체를 통해서 접근하고 활용할 수 있습니다.

window.history가 가지고 있는 대표적인 메소드의 예는 다음과 같습니다.

(해당 객체를 사용 시 window를 생략하고 사용하여도 무방합니다.)

메소드(method) 내용
window.history.back() 현재 웹페이지 이전에 참조했던 웹페이지의 주소값을 반환

(웹 브라우져에서 '뒤로'를 클릭하는 것과 동일한 효과)
window.history.forward() 현재 웹 페이지 다음으로 참조했던 웹페이지의 주소값을 반환

(웹 브라우져에서 '앞으로'를 클릭하는 것과 동일한 효과)

창 탐색기(navigator)

window.navigator 객체에는 사용자가 사용하는 웹 브라우져에 대한 정보가 담겨있습니다.

(해당 객체를 사용 시 window를 생략하고 사용하여도 무방합니다.)

 

window.navigator가 가지는 속성의 대표적인 예는 다음과 같습니다.

메소드 or 속성 내용
window.navigator.appName 사용 중인 웹브라우져 프로그램의 이름을 반환
window.navigator.appCodeName 사용 중인 웹브라우져 프로그램의 응용프로그램 코드 이름을 반환
window.navigator.appVersion 사용 중인 웹브라우져에 대한 버전정보를 반환
window.navigator.userAgent 웹브라우져가 서버로 보낸 사용자 에이전트 헤더를 반환
window.navigator.platform 사용 중인 웹브라우져의 플렛폼(운영체제)을 반환
window.navigator.product 사용 중인 웹브라우져 엔진의 제품이름을 반환
window.navigator.cookieEnabled 쿠키에 대한 사용정보값을 반환

(사용하는 경우 - true, 그렇지 않은 경우 - false)
window.navigator.language 웹 브라우져에서 사용 중인 언어에 대한 값을 반환
window.navigator.onLine 현재 웹 브라우져가 온라인 상태인지에 대한 여부값을 반환

(온라인이면  true, 오프라인이면 false)
window.navigator.javaEnabled() 현재 웹브라우져가 자바(Java)를 사용하는 지에 대한 여부를 반환

(사용하는 경우 true, 사용하지 않는 경우 false)

팝업경고(Popup Alert)

자바스크립트에는 경고상자(Alert), 확인상자(Confirm), 프롬프트(Prompt) 상자 이렇게 3가지 종류의 팝업상자가 있습니다.

상황에 따라서 사용자에게 어떤 상황에서 어떠한 정보를 전달할 목적으로 다양한 박스를 사용할 수 있는데 이들을 잘 활용

하면 적절한 상황에 사용자의 상황에 따른 적절한 메시지를 전달할 수 있습니다.

 

경고상자(Alert Box)

어떤 정보를 사용자에게 전달하고자 하는 목적으로 많이 사용됩니다.

경고상자가 나타날 경우 확인버튼을 클릭해서 계속 진행할 수 있습니다.

경고상자를 사용하기 위해서는 아래의 예시와 같이 코드를 작성해주면 됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert("I am an alert box!");
}
</script>

</body>
</html>

 

확인상자(Confirm Box)

사용자로부터 무언가를 확인하거나 수락하도록 하는 목적으로 많이 사용됩니다.

사용자는 확인상자가 나타나면 확인 또는 취소를 선택할 수 있습니다.

사용자가 확인을 클릭하면 true, 취소를 클릭하면 false를 클릭함으로서 사용자의 입력에 따라서 프로그램의 분기가 다르게 

넘어갈 수 있도록 유도할 수 있습니다.

확인 상자를 사용하기 위해서는 아래의 예시와 같이 코드를 작성해주면 됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

 

프롬프트 상자(Prompt Box)

사용자가 페이지를 입력하기 전에 값을 입력하도록 하려는 경우 자주 사용됩니다.

프롬프트 박스가 나타나면 사용자는 값을 입력한 후 확인 또는 취소를 클릭해서 진행해야 합니다.

사용자가 확인을 클릭할 경우 프롬프트 박스는 사용자가 입력한 값을 반환하고 사용자가 취소를 클릭하는 경우

프롬프트 박스는 null을 반환하게 됩니다.

프롬프트 박스를 사용하기 위해서는 아래의 예시와 같이 코드를 작성해주면 됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var person = prompt("Please enter your name:", "Harry Potter");
  if (person == null || person == "") {
    txt = "User cancelled the prompt.";
  } else {
    txt = "Hello " + person + "! How are you today?";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

추가적으로 박스 안에서 개행을 사용하고 싶은 경우 '\n' 문자를 사용해서 원하는 부분부터 문자열을 개행할 수 있습니다.

 

타이밍 이벤트(Timing Event)

자바스크립트는 코드상에서 설정한 시간간격으로 코드를 실행할 수 있는 기능이 있습니다.

그리고 이 설정한 시간간격을 타이밍 이벤트(Timing Event)라고 합니다.

자바스크립트로 타이밍이벤트를 사용하는 주요 방법은 다음과 같습니다.

메소드 내용
setTimeout(function, miliseconds) 지정된 밀리 초 동안 기다린 후 기능을 실행
setTimeout(function, miliseconds) setTimeout()과 동일하지만 함수실행을 계속 반복

 

setTimeout(function, miliseconds)

첫번째 매개변수로 전달받은 함수의 기능을 두번째 인자로 전달받은 밀리초 만큼 기다린 후 수행합니다.

코드를 사용한 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

위의 코드는 사용자가 버튼을 클릭할 경우 3초뒤에 화면에 "Hello"가 표시됩니다.

 

실행을 중지하는 방법 - clearTimeout()

clearTimeout() 메소드를 사용하면 setTimeout()에 인자로 전달된 함수의 실행을 중지할 수 있습니다.

그래서 다음과 같이 중지의 기능을 추가해서 코드를 작성하는 것이 가능합니다.

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

 

setInterval(function, miliseconds)

첫번째 배개변수로 전달된 함수의 기능을 두번째 인자로 전달된 밀리초  간격마다 실행합니다.

그래서 이 개념을 활용해서 다음과 같이 디지털시계를 만드는 문제에 활용할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

 

 

실행을 중지하는 방법 - clearInterval()

clearInterval() 메소드를 사용하면 setInterval() 메소드에서 지정된 함수의 실행을 중지할 수 있습니다.

그래서 마찬가지로 다음과 같이 중지의 기능을 추가해서 코드를 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

 

Cookies

(추후 업데이트)

'Web Basic > JavaScript' 카테고리의 다른 글

자바스크립트 - HTML AJAX  (0) 2020.07.31
자바스크립트 - HTML DOM  (0) 2020.07.28
자바스크립트 - Form  (0) 2020.07.28
자바스크립트 - 정규식(Regular Expressions)  (0) 2020.07.28
자바스크립트 - 반복문, break, continue  (0) 2020.07.28

티스토리툴바