🎫

10. windiw용 객체

Window 객체

•

Window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나뉨

◦

BOM (Browser Object Model) : location객체, screen객체, navigator객체, history객체

◦

DOM (Document Object Model) : document객체

[window.]open("url", "창이름", "창의 특성");

•

첫번재 인자값 : 새창에서 열고자하는 url 주소

•

두번째 인자값 : 창이름, 창이름이 같은게 이미 열려있을 경우 새로이 열리지 않고 이미 열려있는 곳에서 새로고침됨

•

세번째 인자값 : 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등 (브라우저마다 다름)

◦

창의 특성

▪

⇒ px
width : 창의너비
height : 창의높이

▪

⇒ yes | no
resizable : 창 크기 조절 가능 여부
location : 주소창
menubar : 메뉴바
scrollbars : 스크롤바
status : 상태표시줄
toolbar : 도구모음

<script>
	function test1(){
		window.open("http://www.naver.com", "ㅋㅋ", "width=500, height=600");
		// 공통(IE와 chrome) : 주소창 수정안됨, toolbar없음, 상태표시줄 없음, 메뉴바 없음
		// 크롬 : 스크롤바 있음, resizable 가능
		// IE : 스크롤바 없음, resizable 불가능
		
		window.open("http://www.naver.com", "ㅋㅋ", "width=500, height=600, resizable=no, location=yes, menubar=yes, scrollbars=yes, status=yes, toolbar=yes");
		window.open("http://www.naver.com", "ㅋㅋ", "width=500, height=600, resizable=no, location=no, menubar=no, scrollbars=no, status=no, toolbar=no");
	}
</script>
JavaScript
복사

window객체의 timer관련 메소드

[window.]setTimeout(함수, ms);

•

내가 제시한 일정 시간 후에 해당 함수 "단 한번"만 실행

<script>
	function test2(){
	
		var newWindow = window.open(); // 새로열린 창의 window 객체를 반환
		newWindow.alert("3초 후에 이 페이지는 닫힙니다.");
		
		setTimeout(function(){
			newWindow.close();
		}, 3000);
		
		// setTimeout : 내가 제시한 일정 시간 후에 해당 함수 "단 한번"만 실행
		
	}
</script>
JavaScript
복사

[window.]setInterval(함수, ms);

•

내가 지정한 시간 간격마다 "매번" 함수 실행

<script>
	// 1초마다 시:분:초 갱신해서 보여주는
	function test3(){
		var area1 = document.getElementById("area1");
	
		//var count = 1;
		setInterval(function(){
		//area1.innerHTML = count++;
		var now = new Date();
		var hour = now.getHours();
		var min = now.getMinutes();
		var sec = now.getSeconds();
		
		// am, pm 표현
		if(hour < 12){
		area1.innerHTML = "AM ";
		}else{
		area1.innerHTML = "PM ";
		}
		
		// 시간
		if(hour > 12){
		hour = hour - 12;
		}
		if(hour < 10){
		hour = "0" + hour;
		}
		// 분
		if(min < 10){
		min = "0" + min;
		}
		// 초
		if(sec < 10){
		sec = "0" + sec;
		}
		
		area1.innerHTML += hour + " : " + min + " : " + sec;
		
		}, 1000);
	
		// setInterval : 내가 지정한 시간 간격마다 "매번" 함수 실행
		// 알아두면 실무에 아주 유용함 !!!
	}
</script>
JavaScript
복사

BOM (Browser Object Model)

•

location 객체(브라우저 주소창과 관련된 객체)

◦

홈페이지 이동

▪

a 태그의 href속성

▪

location.assign("url")

▪

location.replace("url") → 뒤로가기 사용불가

◦

새로고침

▪

location.href

▪

location.reload() → 현재 위치에서 새로고침location.reload() → 현재 위치에서 새로고침

•

screen, navigator, history 객체도 확인 가능 (아직 각각 뭔지 잘 모르겠다.)

<a href="http://www.naver.com">네이버로 이동</a>
<!-- a 태그는 애초에 클릭시 요청할 url을 작성할 수 있는 href 속성을 제공함 -->


<button onclick="location.assign('http://www.google.com')">구글로 이동</button> <br>
<button onclick="location.replace('http://www.google.com')">구글로 이동</button> 
<!-- replace는 뒤로가기를 사용할 수 없음 -->

<button onclick="location.href = location.href">새로고침</button>
<br>
<button onclick="location.reload();">새로고침</button>
<!-- reload는 현재 위치에서 새로고침 -->

<!-- console창에 띄워서 객체 확인해보기 -->
<h3>screen 객체</h3>
<button onclick="console.log(screen);">screen객체확인</button>

<h3>navigator 객체</h3>
<button onclick="console.log(navigator);">navigator객체확인</button>

<h3>history 객체</h3>
<button onclick="console.log(history);">history객체확인</button>
HTML
복사

DOM(Document Object Model)

HTML에 있는 각각의 태그들을 노드(Node)라고 한다

•

요소노드(Element Node) : 태그 그 자체만을 의미

•

텍스트노드(Text Node) : 태그 내에 기록되는 내용

◦

텍스트노드가 존재하는 요소 (시작태그와 종료태그가 한쌍으로 이루어져있는) : div, a, h1, p, pre, ...

◦

텍스트노드가 존재하지 않는 요소 (시작태그로만 이루어져있는) : img, input, ...

노드 생성과 관련된 메소드

•

텍스트노드가 존재하는 노드 생성 (시작태그+종료태그)

•

동적으로 요소 만드는 방법

"문자열"로 만드는 방법

document에서 제공하는 메소드를 통해 "요소객체" 만드는 방법

elementNode 객체 생성 : document.createElement("태그명");

textNode 객체 생성 : document.createTextNode("문구");

두 개의 노드를 연결 (즉, 요소노드 하위로 텍스트노드 추가)
요소노드.appendChild(텍스트노드)

<script>
function test4(){
	// <h3> 안녕하세요 </h3>
	
	// 동적으로 요소 만드는 방법1. "문자열"로 만드는 방법
	//document.getElementById("area2").innerHTML = "<h3>안녕하세요</h3>";
	
	// 동적으로 요소 만드는 방법2. document에서 제공하는 메소드를 통해 "요소객체" 만드는 방법
	// elementNode 객체 생성 : document.createElement("태그명");
	var elementNode = document.createElement("h3"); // <h3></h3>
	// textNode 객체 생성 : document.createTextNode("문구");
	var textNode = document.createTextNode("안녕하세요"); // 안녕하세요
	
	// 두 개의 노드를 연결 (즉, 요소노드 하위로 텍스트노드 추가)
	// 요소노드.appendChild(텍스트노드)
	elementNode.appendChild(textNode); // <h3>안녕하세요</h3>
	
	console.log(elementNode);
	console.log(typeof(elementNode));
	
	//document.getElementById("area2").innerHTML += elementNode;
	document.getElementById("area2").appendChild(elementNode);
	
	}
</script>
JavaScript
복사

•

텍스트노드가 존재하지 않는 노드 생성 (시작태그만 존재하는)

<script>
function test5(){
var img = document.createElement("img"); // <img>

// <img src="~~~~" width="~~" height="~~">
// 속성추가
img.src = "https://www.iei.or.kr/resources/images/main/main_renewal/top_logo.jpg";
img.width = "200";
img.height = "100";

console.log(img);

document.getElementById("area3").appendChild(img);

}
</script>
JavaScript
복사

•

노드 삭제

<script>
	function test6(){
		// 지우고자하는 요소객체.remove();
		document.getElementById("area3").firstChild.remove();
	}
</script>
JavaScript
복사