공지 목록
공지글
(5)
공지 블로그 이전 공지입니다!
javascript / html 간단한 로그인 회원가입 페이지 구현
Jian ・ 2021. 1. 8. 0:31
#javascript #html #login #join #로그인 #회원가입 #coding #programming
javascript, html을 사용하여 간단한 로그인, 회원가입 페이지 구현하기
로그인, 회원가입 페이지 작동
간단한 로그인, 회원가입 작동 모습
원리는 가장 먼저 login page로 접속하게 된다.
아이디와 비밀번호를 입력해야 하고, 둘 중 하나라도 없으면 로그인을 할 수 없다는 alert 메시지가 출력된다.
둘 다 입력하게 되면 main page로 이동,
더 업그레이드하면 id, password 값이 있는 배열을 가지고 값을 비교하여 실제로 아이디를 체크할 수도 있다.
(실제로 구동될 때는 그 데이터가 db에 저장되어 있을 것이고, 그 값을 비교할 것이다.)
회원가입 join page는 아이디와 비밀번호, 비밀번호 확인 칸을 통해서 가입을 한다.
마찬가지로 값이 하나라도 없으면 회원가입을 할 수 없고,
3개의 값이 다 들어있더라도 비밀번호에 있는 값과 비밀번호 확인에 있는 값이 다르면 확인하라는 alert 메시지를 출력한다.
login page
<label> 아이디 : <input id="id" type="text"></label> <label> 비밀번호 : <input id="pw" type="text"></label>
input을 통해서 각 값을 받아오는데
아이디 값을 받아오는 id="id", 비밀번호 값을 받아오는 id="pw"
(해당 id 값을 통해 javascript에서 입력된 value 값을 확인할 것이다.)
<a href="join.html><input type="button" value="회원가입"></a> <input type="button" value="로그인" onclick="login();">
회원가입 버튼은 a 태그의 속성 href를 통해 눌렀을 때, join.html (회원가입 페이지)로 이동하게 한다.
로그인 버튼은 onclick 옵션을 줘서 눌렀을 때, login() 함수를 실행한다.
(해당 함수는 javascript에서 구현할 것이다.)
join page
join page,
input으로 값을 받는 것은 login page와 같고,
<input type="button" value="뒤로가기" onclick="back();"> <input type="button" value="로그인" onclick="create_id();">
두 개의 버튼을 만든다.
뒤로 가기 버튼은 눌렀을 때, onclick 옵션을 통해 back() 함수 실행
(js에서 구현)
로그인 버튼 마찬가지, create_id() 함수 실행
(js 구현)
* button 이름을 수정을 안 했는데 '로그인' 이 아니라 '계정 생성' 정도가 좋을 것 같다.
javascript
javascript에서 함수를 구현하는 부분,
var id = document.querySelector('#id');
쿼리셀렉터를 사용하여 값을 가지고 온다.
(참고할 수 있는 부분)
가지고 온 값에 .value 를 통해 저장된 값을 불러온다.
분기문을 사용하여 입력받은 id, pw가 "" 공백일 경우 로그인을 할 수 없다는 alert 메시지 출력,
아닐 경우 lacation.href = 'main.html'; 을 통해 해당 html로 이동한다.
(값이 둘 다 있는 경우)
function back() { history.go(-1); history.back(); }
뒤로 가기 기능은 history.go(-1), history.back();
둘 다 작동 가능하다.
(중 1개 사용)
create_id() 함수 부분 역시 querySelector로 값을 가지고 오고,
.value로 입력된 값을 가지고 온다.
그리고 분기분으로 그 값을 체크하여 실행
3개의 데이터가 다 입력되더라도 pw와 r_pw의 value가 다르면 alert 메시지를 출력한다.
javascript / html 로그인, 회원가입 아주 간단한 기능만 구현해보기 끝,
