[JavaScript] 12. 팝업창, 윈도우, location

티스토리 뷰

UI_UX/JavaScript & JQuery

[JavaScript] 12. 팝업창, 윈도우, location

쟌쥰 2020. 1. 26. 19:10

팝업창

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function popUp() {
		// 파일, 이름, 옵션
		window.open("js14_popup02.html", "", "width=30px, height=300px");
	}
</script>


</head>
<body>
	<button onclick="popUp();">클릭</button>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>PopUp</h1>
</body>
</html>

window

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>윈도우 연습01</title>

<style type="text/css">
	#regist {
		border: 1px solid black;
		background: pink;
		position: absolute;	/* 부모기준으로 어떠한 위치에 있는지 정한다. */
		top: 200px;				/* top 기준 200px 아래 */
		left: 500px;				/* left 기준 500px 오른쪽으로 */
		display: none;	/* display 는 none이라 일단 보이지 않는 상태이다. */
	}
	/* 
		display : none; 	// 공간을 차지하지 않는다 (만들어지지 않은 상태)
		visibility : hidden;	// 공간을 차지한다 (만들어져 있는 상태, 보이지만 않을 뿐)
	 */
</style>

<script type="text/javascript">
	function openWin() {
		// window02.html 을 팝업창으로 연다.
		var url = "js15_window02.html";
		var title = "";
		var prop = "top=200px,left=600px,width=500px,height=500px";
		window.open(url, title, prop);
	}

	function registForm() {
		//회원가입 폼 regist 의 기존 display를 블록으로 바꿔 화면에 보이게 한다.
		document.getElementById("regist").style.display = "block";
		//body태그의 백그라운드 컬러를 회색으로 지정
		document.body.style.background = "gray";
		//창열기, 회원가입의 버튼 name 은 btn이다.
		var btns = document.getElementsByName("btn");
		for ( var i in btns) { 
			//for in 문 (향상된 for문)}
			btns[i].disabled = "disabled";
			// 버튼을 disabled로 해서 작동하지 않도록 한다.
		}
	}

	function closeWin() {
		//회원가입 폼의 display를 none 으로 바꿔서 화면에서 다시 안보이게 한다.
		document.getElementById("regist").style.display = "none";
		//바디 색을 다시 화이트로 바꾼다.
		document.body.style.background = "white";
		//창열기, 회원가입의 버튼 을 받아 disabled를 풀어준다.
		var btns = document.getElementsByName("btn");
		for ( var i in btns) {
			btns[i].disabled = "";
		}
	}

	//아이디입력 text input클릭시 동작하는 함수, alert창으로 중복체크 확인을 하도록 안내
	function idchk() {
		alert("중복체크를 확인하세요");
	}
	//중복체크 버튼 클릭시 작동, 팝업창을 열어준다.
	function idCheck() {
		open("js15_window03.html", "", "width=300px,height=300px");
	}
</script>

</head>
<body>

	<h1>window객체</h1>
	
	<pre>
	프로퍼티
	 -document
	 -history
	 -location
	 -navigator
	 -screen
	 -frames
	 -parent
	 -top
	 -self
	메서드
	 -alert()
	 -confirm()
	 -prompt()
	 -back()
	 -forward()
	 -setInterval()
	 -clearInterval()
	 -setTimeout()
	 -open()
	 -close()
	 -scroll(),scrollBy(), scrollTo() 
	</pre>

	<div id="f1">
		<h1>팝업창 만들기</h1>
		<button onclick="openWin()" name="btn">창열기</button>
		<hr>
		<h1>회원가입하기(div팝업창)</h1>
		<button onclick="registForm()" name="btn">회원가입</button>
	</div>

	<!-- 회원가입폼 시작 -->
	<div id="regist">
		<form>
			<table>
				<caption>회원가입</caption>
				<tr>
					<td>아이디</td>
					<td>
						<input type="text" name="id" onclick="idchk()" readonly="readonly" /> 
						<input type="button" value="중복체크" onclick="idCheck()" />
					</td>
				</tr>
				<tr>
					<td>패스워드</td>
					<td><input type="password" name="pwd" alt="" style="color: red;" checked="checked" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" value="확인" onclick="closeWin()" /></td>
				</tr>
			</table>
		</form>
	</div>
	<!-- 회원가입폼 종료 -->

	<br/><br/><br/>
	<iframe name="myframe"></iframe>

</body>
</html>

<!-- js15_window02.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>팝업창</title>

<script type="text/javascript">
	function test(){
		//name이 test인 요소 (text) 의 값을 받아서 val 에 저장
		var val=document.getElementsByName("test")[0].value;
		//이 팝업창을 만든 window 페이지에 2번째 h1 태그를 찾아 문서 내용을 val 로 바꾼다.
		opener.document.getElementsByTagName("h1")[1].innerHTML=val;
		close();
	}
</script>

</head>
<body>

	<input type="text" name="test"/>
	<input type="button" onclick="test()" value="전달"/>
	<input type="button" onclick="self.close()" value="창닫기">
	<!-- self 는 현재 윈도우를 반환한다. close()메서드는 현재 윈도우를 닫는다. -->

</body>
</html>

<!-- js15_window03.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중복체크</title>

<script type="text/javascript">
	//이미 있는 아이디들로 정해놓은 배열~
	var ids = [ "academy", "java", "script" ];

	function confirmChk() {
		var id = document.getElementsByName("id")[0].value;
		var div = document.getElementsByTagName("div")[0];
		
		//배열에 id 로 받은 인덱스가 있는지 체크 -1이면 존재하지 않는 것!
		if (ids.indexOf(id) != -1) {
			div.innerHTML = "<b>아이디가 존재합니다.</b>";
		} else {
			//사용 가능할 시 확인버튼 생성 -> onclick 이벤트는 insertId(id)
			var userId = "사용할 수 있는 아이디입니다." + "<input type='button' value='확인'"
					+ "onclick='insertId(\"" + id + "\")'>";
			div.innerHTML = userId;
		}
	}

	function insertId(id) {
		//팝업창을 오픈한 윈도우의 name이 id 인 태그들 중 0번째 태그를 찾아 값을 id로 표시
		opener.document.getElementsByName("id")[0].value = id;
		//팝업창을 오픈한 윈도우의 name이 pwd 인 태그들 중 0번째 태그를 찾아 focus를 지정해준다.
		opener.document.getElementsByName("pwd")[0].focus();
		//현재 팝업 window를 닫는다.
		close();
	}
</script>

</head>
<body>

	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id"/></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="중복확인" onclick="confirmChk()"/>
				<input type="button" value="취소" onclick="self.close()"/>
			</td>
		</tr>
	</table>
	<div></div>

</body>
</html>

location

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function lodationTest() {
		// location.href="https://www.naver.com"
		// location.assign("https://www.google.com");	// location.href와 같다!!
		// location.replace("https://www.daum.net");		// 전 단계 이력 X
		location.reload();
		
	}
</script>



</head>
<body>

	<a href="https://www.naver.com">페이지 이동</a>

	<br>
	<button onclick="lodationTest();">페이지 이동</button>



</body>
</html>

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 13. checkbox & select (0)	2020.01.26
[JavaScript] 11. JavaScript 배열 (0)	2020.01.26
[JavaScript] 10. String 객체 사용 (0)	2020.01.26
[JavaScript] 9. Math 객체 사용 (0)	2020.01.26
[JavaScript] 8. Date 객체 사용 (0)	2020.01.26

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

끙아

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

게발 외않헤

티스토리 뷰

[JavaScript] 12. 팝업창, 윈도우, location

팝업창

window

location

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

티스토리툴바