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