prompt("비밀번호"); 위처럼 '비밀번호'를 입력하라는 메세지가 있는 입력창이 뜬다. 입력란에 '11111'을 입력하고 '확인'을 누르면 창이 사라지는데, 그 11111을 담고 싶다면? password = prompt("비밀번호"); 위처럼 하면 password라는 변수에 prompt창에서 입력한 것을 담을 수 있다. <script charset="utf-8"> password = prompt("비밀번호"); document.write("prompt에 입력한 정보: " + password); </script> prompt에 입력한 정보: 1111 조건문과 prompt를 이용하여 로그인 기능을 아주아주 간단하게 구현! <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <script charset="utf-8"> password = prompt("비밀번호"); if(password==1111){ document.write("로그인 성공"); }else{ document.write("누구세요"); } </script> </body> </html> 1111을 입력 - > true -> 로그인 성공 1111이 아닌 다른 것을 입력 -> false -> 누구세요 이로써 웹페이지 전체가 '확정된 상태'가 된다. 웹페이지를 더 이상 수정할 필요가 없으며, 사용자가 prompt에 어떠한 값을 입력했느냐에 따라 if문의 동작 방법이 달라지게 된다. 프로프램에서 변할 수 있는 부분은 프로그램 바깥쪽, 사용자가 조작하는 부분으로 몰아내어 '확정된 상태'가 된다. <실제 네이버 로그인 페이지><현재까지의 결과물>
지난 시간에는 CSS로 레이아웃을 짜고 상자나 버튼의 디자인들을 꾸며봤습니다. 이번에는 자바스크립트를 통해서 언어 선택 시 모든 텍스트들이 해당 언어로 변경되도록 하였고 영어 선택 시 간편한 로그인 부분이 변경되도록 하였습니다. 진행하면서 느낀 점은 HTML 코드 내에 반복되는 문장들이 많아서 뭔가 리팩터링을 통해서 좀 더 간결하고 가독성 있게 작성할 수 있을 것 같은데 아직은 그러한 것보다 기능 구현에 집중해야겠다고 생각하였습니다. 그리고 태그들의 'id'나 'class' Name을 작성할 때 네이밍 규칙을 통해 이름을 지어야 하는 필요성을 느꼈고 CSS의 경우 레이아웃의 큰 틀을 잡고 코딩을 시작해야겠다고 느꼈습니다. 다음 개발 계획은 네이버 회원가입 폼을 제작하고 유저 정보를 저장하는 시스템을 구축해보는 것이며 이 프로젝트의 최종 목적은 회원가입을 통해 만든 정보로 로그인 시 특정 페이지로 리다이렉션 하여 성공 표시를 띄우는 것입니다. <GitHub로 프로젝트 웹서버 호스팅>k-junyyy.github.io/NAVER-LOGIN-PAGE/naver-login-page/login.html 네이버 로그인 k-junyyy.github.io <login.html> 더보기
<style.css> 더보기
<login.js> 더보기
<GitHub Link>github.com/K-Junyyy/NAVER-LOGIN-PAGE K-Junyyy/NAVER-LOGIN-PAGE 네이버 로그인 페이지 제작하기. Contribute to K-Junyyy/NAVER-LOGIN-PAGE development by creating an account on GitHub. github.com |