Javascript 기초(객체2)

안녕하세요 19살 IT 개발자 포돌이입니다.

 

저번 시간에는 Javascript 기초(객체 1)의 내장 객체에 대해서 자세하게 배웠습니다. 이번에는 BOM(브라우저 객체모델)를 나가보도록 하겠습니다.

브라우저 객체 모델(BOM)

브라우저 객체란 브라우저에 내장된 객체를 "브라우저 객체"라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있지 않습니다. 즉, 계층적 구조로 이루어져 있으며,  이를 브라우저 객체모델(BOM, Browser Object Model)이라고 합니다.

 

window 객체

window는 브라우저 객체의 최상위 객체이며, 다음과 같은 메소드를 사용할 수 있습니다.

 

window 객체의 메소드 종류

 

종류 

open("URL", "새 창 이름", "새 창 옵션"); URL 페이지를 새 창으로 나타냅니다.

 

alert(data); 경고 창을 나타내고 데이터를 보여줍니다. 방문자가 [확인] 버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행합니다.

 

prompt("질문", "답변"); 질문과 답변으로 질의응답 창을 나타냅니다.

 

confirm("질문 내용"); 질문 내용으로 확인이나 취소 창을 나타냅니다. [확인] 버튼을 누르면 true를 반환하고, [취소] 버튼을 누르면 false를 반환합니다.

 

moveTo(x, y); 지정한 새 창의 위치를 이동합니다.

 

resizeTo(width, height); 지정한 새 창의 크기를 변경합니다.

 

setInterval(function() {자바스크립트 코드}, 일정 시간 간격); 지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.

 

setTimeout(function() {자바스크립트 코드}, 일정 시간 간격);단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행합니다.

 

open() 메소드를 이용해 팝업

open() 메소드를 이용하면 지정한 URL 페이지를 새 브라우저 창에 나타낼 수 있습니다. 즉, 이 기능을 이용하면 광고에 자주 사용되는 팝업 창을 만들 수 있습니다. 하지만 최근에는 팝업 창을 사용자가 차단할 수 있어 팝업 창을 활용한 광고는 효과가 많이 떨어졌습니다. 따라서 사용법만 간단히 익히고 넘어가겠습니다.

 

기본형

 

 

새 창의 옵션 종류

 

 

코딩해보기

팝업 창 페이지를 나타내는 예제입니다. 팝업 창으로 사용할 페이지의 HTML 코드입니다.

 

 

첫 번째 사진은 </script> 태그 안의 코드 사진이고요  2번째 사진은 </body> 안에 있는 코드 사진입니다 출력을 해보면

저는 이렇게 정상적으로 떴습니다. 경로를 제대로 지정을 안 하면 안 뜨니 정확하게 적으셔야 합니다~

 

alert()

익숙한 느낌이 들죠? 경고 창을 나타낼 때 사용합니다. window.alert() 메소드는 다음 기본형처럼 window 객체를 따로 작성하지 않아도 사용할 수 있습니다.

기본형

 

 

prompt()

예제로 인해 prompt()를 알게 된 기억이 있습니다 그때도 prompt를 언급해드렸지만 복습 차 다시 알려드리겠습니다.

prompt()는 질문과 답변으로 질의응답 창을 나타냅니다.

기본형

 

 

confirm()

확인/취소 창을 나타낼 때 사용합니다. window.confirm() 메소드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있습니다.

기본형

 

 

setInterval() / clearInterval()

setInterval() 메소드는 코드를 일정 시간 간격으로 반복 실행하고, clearInterval() 메소드는 setInterval() 메소드를 취소합니다.

기본형

 

 

코딩해보기

setInterval() 메소드를 이용하여 일정한 간격으로 i의 값을 증가시켜 콘솔 창에 출력하는 예제입니다. [정지] 버튼을 클릭하면 clearInterval()가 적용되어 정지됩니다.

 

 

 

 

콘솔에 하나하나씩 찍히는 걸 볼 수 있고, 버튼을 누르면 멈추는 예제를 만들어보았습니다.

 

setTimeout() / clearTimeout()

setTimeout()메소드는 일정 시간이 지나면 코드를 실행하고 종료합니다. setTimeout() 메소드를 조금만 응용하여 재귀 호출을 하면 setInterval()메소드 처럼 사용할 수도 있습니다. clearTimeout()메소드는 setTimeout()메소드를 제거합니다.

 

기본형

 

 

screen 객체

screen 객체는 사용자의 모니터 정보(속성)를 제공하는 객체입니다. 예를 들어 모니터의 너비나 높이 또한 컬러 표현 bit를 반환합니다. 종류를 한번 보시죠.

 

screen 객체의 속성 종류

 

 

location 객체

location 객체는 사용자 브라우저와 관련된 속성과 메소드를 제공하는 객체입니다. 현제 URL에 대한 정보(속성)와 새로 고침(reload) 메소드를 제공합니다. 종류를 한번 보실까요?

 

location 객체의 속성 종류

 

 

history 객체

history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메소드를 제공합니다. 종류를 확인해보시죠.

 

history 객체의 속성 종류

 

 

navigator 객체

navigator 객체는 현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체입니다.

 

 

screen, location, history, navigator 객체는 읽어만 보세요 아~ 이런 게 있구나 하면서 나중에 이해해도 늦지 않습니다.

 

이것으로 Javascript 기초(객체 2)를 마침으로써, 객체를 마무리 짓게 되었습니다. 정말 힘드셨을 텐데 고생 많으셨습니다.

앞으로도 한층 더 좋은 퀄리티로 준비하는 포돌이가 되겠습니다!!

 

지금까지 19살 IT 개발자 포돌이였습니다.

 

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-

 

책 광고 리뷰 주실 분들은 clonelee74@gmail.com 으로 메시지를 보내주시면 감사하겠습니다.