자바 스크립트(JavaScript) 기초 문법 - 브라우저 객체 (window 객체)
자바 스크립트(JavaScript) 기초 문법
브라우저 객체
브라우저에 내장된 객체를 '브라우저 객체'라고 한다. window는 브라우저 객체의 최상위 객체이며, window객체에는 하위 객체가 포함되어 있다. 계층적 구조로 이루어져 있으며 이를 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다.
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 페이지를 새 브라우저 창에 나타낼 수 있다. 이 기능을 이용하면 광고에 자주 사용되는 팝업창을 만들 수 있다. (생성된 창은 close()메소드로 닫는다.)
<script>
window.open("http://www.tistory.com","tistory","width=300,height=400,
left=100, top=20, scrollbars=yes");
</script>
새 창의 옵션 종류
| 속성 | 설명 |
| width | 새 창의 너비를 설정한다. |
| height | 새 창의 높이를 설정한다. |
| left | 새 창의 수평(X축) 위치를 설정한다. |
| top | 새 창의 수직(Y축) 위치를 설정한다. |
| scrollbars | 새 창의 스크롤바의 숨김/노출을 설정한다. (yes= 노출, no = 숨김) |
| location | 새 창의 URL 주소 입력 영역의 숨김/노출을 설정한다. (yes= 노출, no = 숨김) |
| status | 새 창의 상태 표시줄 영역의 숨김/노출을 설정한다. (yes= 노출, no = 숨김) |
| toolbars | 새 창의 도구 상자 영역의 숨김/노출을 설정한다. (yes= 노출, no = 숨김) |
alert( )
경고창을 나타낼 때 사용한다. window.alert( )로 사용해도 되지만, window 객체를 따로 작성하지 않아도 사용 가능하다.
<script>
alert("내용을 입력하세요!");
</script>
경고창은 [확인]버튼을 클릭해야 alert()메소드 다음에 나오는 코드를 실행한다.
prompt()
질의응답 창을 나타낼 때 사용한다. 사용자에게 어떤 사항을 알려주고 입력할 수 있는 입력박스를 가진 윈도우 창을 만들어준다. 사용자가 입력한 내용을 문자열로 반환한다. window 객체를 따로 작성하지 않아도 사용 가능하다.
<script>
prompt("질의 내용","답변");
</script>
답변을 입력하고 [확인]버튼을 누르면 입력한 답변을 반환한다.
confirm()
사용자에게 어떠한 사항을 알려주고, 확인/취소 창을 나타낼 때 사용한다. 사용자가 확인을 클릭하면 true를 반환하고, 취소를 클릭하면 false를 반환한다. window 객체를 따로 작성하지 않아도 사용 가능하다.
<script>
confirm("글 작성을 취소합니까?");
</script>
일정한 시간 간격으로 코드 실행 - setInterval(), clearInterval(), setTimeout(),clearTimeout()
setInterval()은 일정한 시간 간격으로 코드를 반복 실행하고, clearInterval()는 setInterval()를 취소한다.
<script>
var 참조변수 = setInterval(function(){코드}, 시간 간격(ms));
var 참조변수 = setInterval("코드",시간 간격(ms));
clearInterval(참조변수);
</script>
setTimeout()은 일정한 시간 후에 코드를 실행하고 종료된다.clearTimeout()는 setTimeout()을 취소한다.
<script>
var 참조변수 = setTimeout(function() {자바스크립트 코드}, 시간 간격(msc));
var 참조변수 = setTimeout("자바스크립트 코드", 시간간격(msc));
clearTimeout(참조변수);
</script>