1. 나이 계산 프로그램
<코드기록>
<!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>
const year = 2020;
let age = 0;
function calc() {
const birth = prompt(`출생연도를 입력하세요!`);
age = year - birth + 1;
document.querySelector("#result").innerHTML = `현재 나이는 ${age}살 입니다.`;
}
</script>
</body>
</html><실행화면>
2. 할인 가격 계산 프로그램
<코드기록>
<body>
<div id="contents">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice" />원
</li>
<li>
<label for="rate">할인율</label>
<input type="text" id="rate" />%
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
<script>
function showPrice() {
const originPrice = document.querySelector("#oPrice").value;
const rate = document.querySelector("#rate").value;
const savedPrice = originPrice * (rate / 100);
const resultPrice = originPrice - savedPrice;
if (originPrice && rate) {
alert(`할인된 가격은 ${resultPrice}원 입니다.`);
}
}
</script>
</body>
</html>
<실행화면>
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Javascript 기본' 카테고리의 다른 글
| 함수와 이벤트 (0) | 2020.07.23 |
|---|---|
| 제어문 (0) | 2020.07.12 |
| 자료형 이해하기 (0) | 2020.07.04 |
| 웹 브라우저 화면에 출력하기 / 소스작성 규칙 (0) | 2020.07.04 |
| 유효범위(2) : 유효범위의 효용 (0) | 2020.07.04 |
댓글