씨네
공부하는 개발자 강씨네
씨네
  • 분류 전체보기 (460)
    • Web (21)
      • HTML (11)
      • CSS (10)
    • JS 관련 (49)
      • JavaScript (27)
      • JQuery (22)
    • TS 관련 (15)
      • TypeScript (15)
    • NodeJS (7)
      • NodeJS (7)
    • 따라하며 배우는 시리즈 (23)
      • NodeJS & ReactJS Basic (23)
      • NodeJS & ReactJS Movie (0)
      • NodeJS & ReactJS Youtube (0)
      • NodeJS & ReactJS ChatBot (0)
    • SPA (14)
      • React (14)
      • Vue (0)
      • Anguler (0)
    • Java 관련 (118)
      • Java (52)
      • JDBC (6)
      • JSP & Servlet (18)
      • Spring Legecy (38)
      • SpringBoot (4)
    • Python (26)
      • Python (20)
      • PyMongo (1)
      • Django (5)
    • Git (24)
      • Github (24)
    • RDB (22)
      • Oracle (21)
      • MySQL (1)
    • NoSQL (5)
      • MongoDB (5)
    • OS (4)
      • Linux (4)
    • 빅데이터 (2)
      • hadoop (2)
    • IDE (20)
      • eclipse (11)
      • VSCODE (4)
      • VisualStudio (1)
      • IntelliJ (1)
      • PyCharm (1)
      • DBeaver (2)
    • Install (3)
      • Tomcat (1)
      • Docker (1)
      • Anaconda (1)
    • 오류&에러 (28)
      • TS (2)
      • NodeJS (7)
      • SQL (8)
      • Java (1)
      • Spring (4)
      • Git (6)
      • 기타 (0)
    • 알고리즘 (67)
      • 수열 (1)
      • 백준(backjoon) (39)
      • Programmers (27)
    • 자격증 (5)
      • SQLD (5)
    • 기타 (2)
    • IT유튜브로 지식쌓기 (2)

공지사항

인기 글

최근 글

티스토리

250x250
hELLO · Designed By 정상우.
씨네

공부하는 개발자 강씨네

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

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

2022. 1. 23. 10:31
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' 카테고리의 다른 글
    • [JavaScript] checkbox로 개별선택, 전체선택 함수 만들기
    • [JavaScript] location(reload / href / assign / replace)
    • [JavaScript] 팝업창!(pop up)
    • [JavaScript] 배열(Array)
    씨네
    씨네
    개발자 씨네가 공부하는 내용을 기록 겸 공유하는 블로그입니다!

    티스토리툴바