자바스크립트의 객체 종류

  • window 객체 : 자바스크립트의 최상위 객체
출처 : https://okayoon.tistory.com/entry/아티클-프로젝트-041-Javascript-DOMDocument-Object-Model과-BOMBrowser-Object-Model

 

  • 자바스크립트의 객체 모델 : BOM, DOM
출처 : https://www.splessons.com/lesson/javascript-bom/

 

 

BOM 브라우저 객체 모델

  • BOM(Browser Object Model) 의 정의
    • 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 때 사용하는 객체

 

 

Window 객체

  • window.alert( ) : 확인 버튼이 있는 대화 상자(dialog box)
window.alert('확인 버튼이 있는 대화상자');

 

  • window.prompt( ) : 입력란이 있는 대화 상자(dialog box)
var season = window.prompt('좋아하는 계절은?','');
document.write('좋아하는 계절은 ' + season + '이다.<br>');

 

  • window.confirm( ) : 확인, 취소 버튼이 있는 대화 상자(dialog box)
var choice = window.confirm('야근을 하겠습니까?');
// 확인 true, 취소 false, [x] false 반환
if(choice){
	document.write('야근 확정!');
}else{
	document.write('야근 취소!');
}

 

  • window.open(URL, 새창이름, 옵션) : 새 창을 열어주는 기능
    1. width : 새 윈도우의 넓이
    2. height : 새 윈도우의 높이
    3. location : 주소 입력창 유무(yes/no)
    4. menubar : 메뉴 유무(yes/no)
    5. resizable : 화면 크기 조절 유무(yes/no)
    6. status : 상태 표시줄 유무(yes/no)
    7. toolbar : 툴바 유무(yes/no)
    8. scrollbars : 스크롤바 유무(yes/no)

 

  • window.close( ) : 현재 창을 닫아주는 기능
var win;
	
// 새 창을 여는 메소드
function winOpen(){
	win = window.open('https://www.naver.com','네이버',
	'toolbar=no,location=no,menubar=no,resizable=no,scrollbars=no,width=400,height=300');
}

// 열려있는 창을 닫는 메소드
function winClose(){
	win.close();
}
<body>
<input type="button" value="창 열기" onclick="winOpen();"><br>
<input type="button" value="창 닫기" onclick="winClose();"><br>
</body>

 

  • window.setTimeout(function, millisecond) : 일정 시간 후에 함수를 한 번 실행
  • window.setInterval(function, millisecond) : 일정 시간마다 함수를 반복해서 실행
// window 객체의 onload 프로퍼티 : 윈도우가 로드될 때 호출
window.onload = function() {
	alert('확인 버튼을 누르면, 3초 후 현재 창이 종료됩니다.');
	window.setTimeout(function(){
		window.close();	// 현재 창 닫기
	},3000);		// 3초 후 함수 실행
};

 

 

Location 객체

  • location 객체의 프로퍼티
document.write(location.href + '<br>');      // 현재 문서의 전체 URL	http://localhost:8081/html/location.html
document.write(location.host + '<br>');      // 호스트 이름, 포트 번호	localhost:8081
document.write(location.hostname + '<br>');  // 호스트 이름		localhost
document.write(location.port + '<br>');      //	포트 번호		8081
document.write(location.protocol + '<br>');  // 프로토콜			http:
document.write(location.pathname);           // 파일경로명		/html/location.html

 

  • location.assign(경로) : 지정한 페이지로 이동
<input type="button" onclick="location.href='window.html'" value="이동(href)">

<input type="button" onclick="location.assign('window.html')" value="이동(assign)">

 

  • location.replace(경로) : 지정한 페이지로 이동, history 정보가 지워짐
<input type="button" onclick="location.replace('window.html')" value="이동(replace)">

 

  • location.reload( ) : 새로고침
<input type="button" onclick="location.reload()" value="새로고침">

 

 

History 객체

  • history.back( ) : 이전 페이지로 이동
<input type="button" value="이전 페이지로 이동" onclick="history.back();">

 

  • history.go(number) : 이전 또는 다음 페이지로 이동
    • 음수 : 이전 페이지 / 양수 : 다음 페이지
<input type="button" value="이전 페이지로 이동(go)" onclick="history.go(-1);">
<input type="button" value="다음 페이지로 이동(go)" onclick="history.go(1);">

 

  • history.forward( ) : 다음 페이지로 이동
<input type="button" value="다음 페이지로 이동(forward)" onclick="history.forward();">

 

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

[JavaScript] DOM(문서 객체 모델)  (0) 2021.08.18
[JavaScript] 내장 객체(Built-in Objects)  (0) 2021.08.17
[JavaScript] 생성자 함수  (0) 2021.08.17
[JavaScript] 객체의 생성, 프로퍼티, 메소드  (0) 2021.08.13
[JavaScript] 배열 - 생성, 출력, 메소드  (0) 2021.08.05

티스토리툴바