자바스크림트

프로그래밍/JavaScript 자바스크립트 2021. 9. 30.

BOM은 브라우저 오브젝트 모델의 줄임말.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var win = null; // 전역 변수. window의 프로퍼티가 된다.

function openWin() {
	var flag;
	var url = "https://www.naver.com";
	
	flag = "left=100, ";
	flag += "top=100, ";
	flag += "width=700, ";
	flag += "height=500";
	
	// open(url, winName, flag) : 새로운 창 만듬.(주소, 창이름, 속성)
	win = window.open(url, 'test', flag);
}

function closeWin() {
	if(win)	 {
		win.close(); // 창 닫기
	}
	win = null;
}
</script>

</head>
<body>

<h3>window 객체 - 팝업 창</h3>

<div>
	<p> <a href="javascript:openWin();">팝업창열기</a> </p>
	<p> <a href="javascript:closeWin();">팝업창닫기</a> </p>
</div>

</body>
</html>

window 객체를 이용해서 팝업창을 열고 닫을 수 있다.

window.open(url, 팝업창 이름, 창의 속성) 을 이용해서 팝업창을 만들 수 있음.

닫을때는 win.close();

파일 2개를 가지고 해보기

ex02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function selectZip(zip, addr) {
	// opener : 현재 윈도우를 생성한 창(부모)
	
	// 선택한 우편번호와 주소를 부모창에 전달
	opener.myForm.zip.value = zip;
	opener.myForm.addr1.value = addr;
	opener.myForm.addr2.focus();
	
	window.close();
}

window.onload = function() {
	// opener : 부모창
	var s = opener.myForm.name.value + "님의 우편번호를 선택하세요";
	document.getElementById("zipTitle").innerHTML = s;
}
</script>
</head>
<body>

<h3 id="zipTitle"></h3>

<div>
	<p> <a href="javascript:selectZip('1111', '서울')">1111-서울</a> </p>
	<p> <a href="javascript:selectZip('2222', '서울')">2222-인천</a> </p>
	<p> <a href="javascript:selectZip('3333', '서울')">3333-경기</a> </p>
	<p> <a href="javascript:selectZip('4444', '서울')">4444-부산</a> </p>
	<p> <a href="javascript:selectZip('4444', '서울')">5555-제주</a> </p>
</div>

</body>
</html>

zip.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">

function openZip() {
	var flag;
	var url = "zip.html";
	flag = "left=100, top=100, width=700, height=500";
	window.open(url, "zip", flag);
}


</script>
</head>
<body>

<div>
	<form name="myForm">
	
		<p><input type="text" name="name" placeholder="이름"> </p>
		<p>
			<input type="text" name="zip" readonly="readonly" placeholder="우편번호">
			<button type="button" onclick="openZip();">우편번호</button>
			<input type="text" name="addr1" readonly="readonly" placeholder="주소"><br>
			<input type="text" name="addr2" placeholder="상세주소"><br>
		</p>
		
		<p>
			<button type="button">확인</button>
		</p>
	
	</form>
</div>

</body>
</html>

url 특성을 이용해서 폴더내 다른 html 파일에 접근 해본다.

window.open(url, "zip", flag); => zip.html에 접근

HTML 내용은 form 태그로 감싸준다.

form 태그의 name을 가지고 접근을 할거기 때문에 꼭 form을 써야 한다.

zip.html에서 opener라는게 나오는데 이건 부모창과 자식창의 텍스트 교환을 위해 쓰이는 놈이다.

zip.html에서 클릭을하면 그 값이 부모인 ex02.html 의 텍스트 박스로 들어가는 것.

color.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">

function result() {
	var s = document.getElementById('color').value;
	opener.document.getElementById("layout").style.backgroundColor = s;
	
	window.close();
}


</script>
</head>
<body>

<div style="text-align: center;">
	<input type="color" id="color">
	<button type="button" onclick="result();">change</button>
</div>


</body>
</html>

ex03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function change() {
	var url="color.html";
	var flag = "left=30,top=30,width=250,height=200";
	
	window.open(url,"test",flag);
}
</script>
</head>
<body>

<div id="layout" style="width: 300px; height: 150px; margin: 30px auto; border: 1px solid blue;"></div>
<hr>

<p style="text-align: center;">
	<button type="button" onclick="change()">변경</button>
</p>

</body>
</html>

이것도 위의 예제와 마찬가지인 opener 개념이다.

변경 버튼을 누르면 color.html 이 불러와진다.(팝업창)

거기서 색을 바꾸고 변경 버튼을 누르면 result() 함수가 실행 되는데

이 result() 함수에 opener가 있어서 값을 ex03.html로 전송한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function sub() {
	// 이전 페이지로 돌아갈수 있다.(브라우저 뒤로가기 버튼)
	location.href="https://naver.com";
}

function sub2() {
	// 이전 페이지로 돌어갈수 없다.(브라우저 뒤로가기 버튼 사용 불가)
	location.replace("https://google.com");
}

</script>
</head>
<body>

<h3>location 객체</h3>

<p> <button type="button" onclick="sub();"> 네이버 </button> </p>
<p> <button type="button" onclick="sub2();"> 구글 </button> </p>
<p> <button type="button" onclick="location.href='https://daum.net';"> 다음 </button> </p>

</body>
</html>

location 객체는 인터넷 창에서 뒤로가기의 기능을 담당하고 있다.

대신에 href 를 써야 뒤로가기가 가능해지고

replace를 쓰게 되면 뒤로가기가 불가능 해진다.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 화면 좌표 찾기 (0)	2021.10.01
자바스크립트 - form에 접근하기 (0)	2021.10.01
자바스크립트 - JSON 데이터 객체로 변환하기 (0)	2021.09.30
자바스크립트 - apply / call / bind (0)	2021.09.30
자바스크립트 - 클래스 (0)	2021.09.30

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바