728x90
반응형
[실습] 나이 계산 프로그램 만들기(1)
실제로 변수를 이용하여 출생 연도를 입력하면 나이를 계산하는 프로그램을 작성해보자.
아래 코드는 필자가 직접 작성한 코드이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 5;
text-align: center;
}
</style>
</head>
<body>
<h1>나이 계산 프로그램</h1>
<script>
var birthYear = prompt("당신의 출생년도를 입력해주세요.");
var currentYear = 2022;
var age = currentYear - birthYear + 1;
document.write("<b>당신의 나이는 "+age+"</b>입니다.");
</script>
</body>
</html>위의 코드를 보면 prompt() 함수를 이용하여 출생 연도를 입력받고, 나이를 계산한 후에 document.write() 함수로 출력한다. 이는 아주 기본적인 알고리즘이므로 설명은 넘어가도록 한다.
이제는 이 나이 계산 프로그램을 조금 더 꾸며 보도록 하자.
[실습] 나이 계산 프로그램 만들기(2)
이번 프로그램과 위의 프로그램에서의 변수 설정과 나이 계산 알고리즘은 동일하다. 하지만 브라우저 상에서 보이는 프런트-엔드 화면을 변경해보자.
먼저 나이 계산 알고리즘은 다음과 같다.
//이전 생략
<script>
var birthYear = prompt("당신의 출생년도를 입력해주세요.");
var currentYear = 2022;
var age = currentYear - birthYear + 1;
document.write("<b>당신의 나이는 "+age+"</b>입니다.");
</script>
//이후 생략사용자 함수 설정
나이 계산 프로그램(2)은 (1)과는 다르게 사용자 함수를 이용하여 사용자의 나이를 계산한다.
이때 function calc() 함수는 함수를 다루는 포스팅에서 자세히 다루도록 하고 이번 포스팅에서는 변수 선언에 집중하도록 한다.
<script>
function calc() {
var currentYear = 2021;
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>선택자의 사용
변수를 할당한 후 변수 age 값이 크롬 브라우저에 출력이 되어야 한다. 이때 사용할 방법은 선택자를 사용하는 방법이다.
document.querySelector("#result").innerHTML
문서에서 선택을 사용하여 id 값이 result인 태그를 선택한 후 HTML에 삽입
document.querySelector("#result"). innerHTML 코드는 앞으로 자주 사용할 일종의 프로그래밍 기법이다.
해당 기법을 직해하면 "문서에서 선택을 사용하여 id 값이 result인 태그를 선택한 후 HTML에 삽입한다"로 이해할 수 있다.
[완성 코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var currentYear = 2021;
var birthYear = prompt("태어난 연도를 입력하세요.","YYYY");;
var age;
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>
</html>728x90
반응형
'JavaScript > [theory]' 카테고리의 다른 글
| [변수와 자료형] #4. 연산자 (0) | 2022.09.26 |
|---|---|
| [변수와 자료형] #3. 자료형 (0) | 2022.09.25 |
| [변수와 자료형] #2-1. 변수를 사용한 예제(1) (0) | 2022.09.25 |
| [변수와 자료형] #1. 변수와 <meta> 태그 (1) | 2022.09.21 |
| [자바스크립트의 기본 문법] #4-2. 자바스크립트의 구조 복습 (1) | 2022.09.20 |
