HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="index.css">
<script src="index.js"> </script>
</head>
<body>
<div id="all">
<div id="top"></div>
<div id="left">
<input type="text" id="id" placeholder="id">
<input type="password" id="password" placeholder="password">
<input type="button" id="login" value="Login">
<p id="p1"></p>
</div>
<div id="mid"> </div>
<div id="bot"></div>
</div>
</body>
</html>
--
CSS
#all {
width: 800px; height: 700px;
margin-left: auto;
margin-right: auto;
}
#top {
background-color: red;
width: 800px; height: 100px;
}
#left {
background-color: orange;
width: 150px; height: 500px;
float: left;
}
#mid {
background-color: yellow;
width: 650px; height: 500px;
float: left;
}
#bot {
background-color: green;
width: 800px; height: 100px;
clear: left;
}
input{
width : 140px;
}
--
Javascript
window.onload = function () {
var inputId = document.getElementById("id");
var inputPassword = document.getElementById("password");
var p1 = document.getElementById("p1");
login.onclick = loginBtnClick;
function loginBtnClick() {
// alert("test");
//입력한 input 값 가져오기
inputId = id.value;
inputPassword = password.value;
runLogin();
}
function runLogin() {
//클래스 선언
function Member() {
this.id = "";
this.pw = "";
this.name = "";
this.email = "";
this.introduce = function () {
//document.write(" ID : " + this.id + " NAME : " + this.name + " Email : " + this.email);
//요것으로 대체!! 요기서 innerHTML 안해주면 창이 바껴버림.
document.getElementById("p1").innerHTML = (" ID : " + this.id + " NAME : " + this.name + " Email : " + this.email);
}
}
//생성자
var user_kim = new Member();
user_kim.id = "kim001";
user_kim.pw = "1234";
user_kim.name = "kim";
user_kim.email = "kim@gmail.com";
var user_lee = new Member();
user_lee.id = "lee002";
user_lee.pw = "1234";
user_lee.name = "lee";
user_lee.email = "lee@gmail.com";
var user_park = new Member();
user_park.id = "park003";
user_park.pw = "1234";
user_park.name = "park";
user_park.email = "park@gmail.com";
//배열
var user = new Array(3);
user[0] = user_kim;
user[1] = user_lee;
user[2] = user_park;
// //포문 돌려서 돌때마다 출력(introduce 구문에 맞게)
// for (var i = 0; i < user.length; i++) {
// user[i].introduce();
// document.write("<br>");
// }
//문제11 존재하는지 안하는지
// for (var i = 0; i < user.length; i++) {
// if (inputId == user[i].id) {
// alert(" 해당 아이디가 존재합니다. ");
// break;
// } else {
// alert(" 해당 아이디가 존재하지 않습니다.");
// break;
// }
// }
var answer001_id = 0;
var answer001_pw = 0;
var result = false;
var number = 0;
// for (var i = 0; i < user.length; i++) {
// if (inputId == user[i].id && inputPassword == user[i].pw) {
// result = true;
// number = i;
// answer001
// }
// }
// if (result == true) {
// p1 = user[number].introduce();
// }
// for (var i = 0; i < user.length; i++) {
// if (inputId == user[i].id && inputPassword == user[i].pw) {
// answer001_id = 1;
// answer001_pw = 1;
// number = i;
// result = true;
// }
// }
// if (result == true) {
// p1 = user[number].introduce();
// }else{
// alert();
// }
for (var i = 0; i < user.length; i++) {
if (inputId == user[i].id) {
answer001_id = 1;
number = i;
if (inputPassword == user[i].pw) {
answer001_pw = 1;
number = i;
result = true;
break;
}
}
}
if (result == true) {
p1 = user[number].introduce();
} else if (answer001_id != 1) {
alert("id error");
} else if (answer001_pw != 1) {
alert("pw error");
}
// //문제12 아이디가 일치하면 암호비교 후, left영역에 id,name,email 표시
// //좀 더 간소화 하고싶은데 할 줄 모르겠음
// for (var i = 0; i < user.length; i++) {
// if (inputId == user[i].id && inputPassword == user[i].pw) {
// result = i;
// }
// }
// if (true) {
// p1 = user[result].introduce();
// }
// //3 == 아이디가 틀림
// //2 == 아이디는 맞지만, 패스워드 틀림
// //1 == 아이디 패스워드 일치 해서 정보 출력
// for (var i = 0; i < user.length; i++) {
// if (inputId == user[i].id) {
// if (inputPassword == user[i].pw) {
// p1 = user[i].introduce();
// break;
// }else{
// alert("비밀번호가 틀렸습니다.");
// break;
// }
// }else{
// alert("아이디가 틀렸습니다.");
// }
// }
}
}
'구트아카데미 > 3. 자바스크립트' 카테고리의 다른 글
| 로또게임 (0) | 2021.07.04 |
|---|---|
| 자바스크립트. 함수 리턴 (0) | 2021.06.28 |
| [자바스크립트] 가위바위보 게임 (0) | 2021.06.26 |
| [자바스크립트] 퀴즈게임 (0) | 2021.06.24 |
| [자바스크립트] 주사위게임 (0) | 2021.06.23 |