[javascript] 조건문을 사용한 간단한 로그인 시스템 예제

12 Dec 2023

javascript

이 예제에서는 JavaScript를 사용하여 간단한 로그인 시스템을 작성하는 방법을 살펴보겠습니다.

먼저, 아래는 HTML과 JavaScript를 이용한 로그인 시스템의 예제 코드입니다.

<!DOCTYPE html>
<html>
<body>

<h2>간단한 로그인 시스템</h2>

<p id="message"></p>

<input type="text" id="username" placeholder="사용자명"><br>
<input type="password" id="password" placeholder="비밀번호"><br>
<button onclick="login()">로그인</button>

<script>
function login() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;

  if (username === 'user' && password === 'pass') {
    document.getElementById('message').innerHTML = '로그인 성공!';
  } else {
    document.getElementById('message').innerHTML = '잘못된 사용자명 또는 비밀번호입니다.';
  }
}
</script>

</body>
</html>

위의 코드는 사용자명과 비밀번호를 입력받아, if-else 조건문을 사용하여 로그인을 처리하는 간단한 예제입니다.

이 예제에서는 입력받은 사용자명과 비밀번호가 각각 ‘user’와 ‘pass’인 경우에만 “로그인 성공!” 메시지를 표시하고, 그렇지 않은 경우에는 “잘못된 사용자명 또는 비밀번호입니다.” 메시지를 표시합니다.

이제, 웹 브라우저에서 위의 코드를 실행하고 사용자명과 비밀번호를 입력하여 로그인을 시도해보세요.

간단하게 조건문을 사용하여 로그인 시스템을 작성하는 방법을 살펴보았습니다. 더 복잡한 시나리오에서는 데이터베이스와 연동하여 실제 사용자 인증을 처리해야 합니다.

이 예제는 JavaScript를 이용한 간단한 예제이므로, 실제 프로덕션 환경에서의 보안에 대한 고려가 필요합니다.

위의 코드는 W3Schools의 JavaScript 예제를 참고하여 작성되었습니다.