[JavaScript] Window객체, 간단한 회원가입 페이지 만들기

728x90

display : none; visibility : hidden;

css의 속성중 display : none; 의속성은 가상으로 구현이 되어있고 실제로는 만들어지지 않은 상태라고 할수 있습니다.

형태도 없고 자리도 차지하지 않는 모습입니다.

visibility : hidden;의 경우 모습이 보이지는 않지만 자리는차지하는 만들어져 있는 상태입니다!

window객체

프로퍼티

-document

-history

-location

-navigator

-screen

-frames

-parent

-top

-self

메서드

-alert()

-confirm()

-prompt()

-back()

-forward()

-setInterval()

-clearInterval()

-setTimeout()

-open()

-close()

-scroll(),scrollBy(), scrollTo()

자주 사용하는 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;
		left: 500px;
		display: none;
	}
</style>

<script type="text/javascript">
	function openWin() {
		var url = "js14_window02.html";
		var title = "";
		var prop = "top=200px, left=600px, width=500px, height=500px";
		window.open(url, title, prop);
	}

	function registForm() {
		document.getElementById("regist").style.display = "block";
		document.body.style.background = "gray";

		var btns = document.getElementsByName("btn");
		for ( var i in btns) { 
			btns[i].disabled = "disabled";
		}
	}

	function closeWin() {
		document.getElementById("regist").style.display = "none";
		document.body.style.background = "white";

		var btns = document.getElementsByName("btn");
		for ( var i in btns) {
			btns[i].disabled = "";
		}
	}

	function idchk() {
		alert("중복체크를 확인하세요");
	}

	function idCheck() {
		open("js14_window03.html", "", "width=300px,height=300px");
	}
</script>

</head>
<body>

	<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>

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

<script type="text/javascript">
	function test(){
		var val=document.getElementsByName("test")[0].value;
		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="창닫기">

</body>
</html>

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

<script type="text/javascript">
	var ids=["khacademy","java","script"];
	
	function confirmChk(){
		var id=document.getElementsByName("id")[0].value;
		var div=document.getElementsByTagName("div")[0];
		if(ids.indexOf(id)!=-1){
			div.innerHTML="<b>아이디가 존재합니다.</b>";
		}else{
			var userId="사용할 수 있는 아이디입니다."
			          +"<input type='button' value='확인'"
			          +"onclick='insertId(\""+id+"\")'>";
			div.innerHTML=userId;          
		}
	}
	
	function insertId(id){
		opener.document.getElementsByName("id")[0].value=id;
		opener.document.getElementsByName("pwd")[0].focus();
		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>

메인 화면인 window01.html 의 출력 결과입니다.

function openWin() {
	var url = "js14_window02.html";
	var title = "";
	var prop = "top=200px, left=600px, width=500px, height=500px";
	window.open(url, title, prop);
}

창열기 버튼을 누르면 이와 같은팝업창이 생깁니다.

function test(){
	var val=document.getElementsByName("test")[0].value;
	opener.document.getElementsByTagName("h1")[1].innerHTML=val;
	close();
}

텍스트를 입력하여 전달을 누르면 해당 value는 메인페이지로 전달됩니다.

function registForm() {
	document.getElementById("regist").style.display = "block";
	document.body.style.background = "gray";

	var btns = document.getElementsByName("btn");
	for ( var i in btns) { 
		btns[i].disabled = "disabled";
	}
}

회원가입 버튼을 누르게 되면 display: none;으로 되어있던 회원가입 박스가 해당 함수의 이벤트로 인해 배경색이 회색으로 바뀌며 display는 block으로 바뀌게 됩니다.

function idchk() {
	alert("중복체크를 확인하세요");
}

아이디 옆의 text타입의 input태그 영역을 클릭하면 중복체크를 확인하세요 라는 메세지가 출력됩니다.

function idCheck() {
	open("js14_window03.html", "", "width=300px,height=300px");
}

중복체크 버튼을 클릭하면 해당 팝업창이 나옵니다.

var ids=["khacademy","java","script"];
	
function confirmChk(){
	var id=document.getElementsByName("id")[0].value;
	var div=document.getElementsByTagName("div")[0];
	if(ids.indexOf(id)!=-1){
		div.innerHTML="<b>아이디가 존재합니다.</b>";
	}else{
			var userId="사용할 수 있는 아이디입니다."
			          +"<input type='button' value='확인'"
			          +"onclick='insertId(\""+id+"\")'>";
		div.innerHTML=userId;          
	}
}

ids 배열에 저장되어있는 텍스트를 입력하면 아이디가 존재합니다. 라는 메세지를 출력시킵니다.

ids 배열에 저장되어있지 않은 텍스트를 입력하면 사용할 수 있는 아이디입니다 라는 메세지를 출력시킵니다.

사용할 수 있는 아이디입니다. 라는 메세지 출력후 확인 버튼을 누르면

회원가입 박스의 아이디 란에 입력 내용이 전달됩니다!

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] checkbox로 개별선택, 전체선택 함수 만들기 (0)	2022.01.25
[JavaScript] location(reload / href / assign / replace) (0)	2022.01.24
[JavaScript] 팝업창!(pop up) (0)	2022.01.22
[JavaScript] 배열(Array) (0)	2022.01.21
[JavaScript] String(문자 index찾기, 문자열추출, 분리하기) (0)	2022.01.20

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바