[Javascript] 입력창 prompt 를 이용한 나이 계산

티스토리 뷰

WEB/자바스크립트

[Javascript] 입력창 prompt 를 이용한 나이 계산

춘햄 2021. 5. 12. 16:57

자바스크립트는 alert, window, confirm, prompt 등 다양한 방법으로 사용자에게 알림창을 띄울 수 있다.

이 중 prompt는 상대방이 값을 입력할 수 있는 입력창을 함께 띄워 서버나 스크립트가 입력 값을 사용한 연산이 가능하게끔 만들어 준다.

예제를 한번 확인해보자.

◎age.css

@charset "UTF-8";
/*age.css*/
body{
	text-align: center;
}

.btn {
         margin-top:50px;
         font-weight: 400;
         color:#fff;
         background-color:#007bff;
         text-align: center;
         white-space: nowrap;
         vertical-align: middle; /*세로 정렬*/
         border: 1px solid transparent;
         padding: 0.375rem 0.75rem;
         font-size: 1rem;
         line-height: 1.5;
         border-color:#007bff;
         border-radius: 0.25rem;
         transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /*효과*/
}

.btn:hover {
	color: #fff;
	background-color: #218838;
	border-color: #1e7e34;
}

.show{
	margin-top: 50px;
	padding: 20px 30px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	
}

◎age.js

/**
 * 현재 나이 계산
 */

function calc() {
			var currentYear = 2021;
			var birthYear = prompt("태어난 연도?");
			var age = currentYear - birthYear  + 1;
			var d = document.querySelector("#result");
			d.innerHTML = "당신의 나이는 " + age;  //id = result의 태그 안쪽 
			console.log(age);
		}

◎age.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>나이 계산</title>
	<link rel = "stylesheet" href = "css/age.css">
	<script src = "js/age.js" type = "text/javascript"></script>
</head>
<body>
	<button class = "btn" onclick="calc()">나이 계산하기</button>
	<div class = "show" id = "result">(결과값 표시)</div>
</body>
</html>

버튼을 클릭하면 입력창이 나온다.

prompt이외에도 아래와 같이 함수들을 사용하여 창을 띄울 수 있다.

1. alert() : 경고 창

2. confirm() : 메시지 출력 창 :

확인 : true;

취소 : false;

3. window.open() : 새창 띄우기

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] 객체 생성 & 활용 기초 (0)	2021.05.13
[Javascript] 글 숨기기 / 보이기 (0)	2021.05.12
[Javascript] 제어문 (0)	2021.05.12
[Javascript] Date를 이용한 현재 시간 출력 (0)	2021.05.12
[JavaScript] HTML 태그 제어 (0)	2021.05.12