반응형
input 태그로 반지를을 입력받아, 원의 둘레와 넓이를 계산하는 자바스크립트 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원의 넓이와 둘레 계산기</title>
</head>
<body>
<h2>원의 넓이와 둘레 계산기</h2>
<label for="radius">반지름을 입력하세요: </label>
<input type="number" id="radius" step="any" placeholder="예: 5">
<button onclick="calculateCircle()">계산하기</button>
<p id="area"></p>
<p id="circumference"></p>
<script>
function calculateCircle() {
const r = parseFloat(document.getElementById("radius").value);
if (isNaN(r) || r <= 0) {
alert("양의 숫자를 입력하세요.");
return;
}
const area = Math.PI * r * r;
const circumference = 2 * Math.PI * r;
document.getElementById("area").textContent = `원의 넓이: ${area.toFixed(2)}`;
document.getElementById("circumference").textContent = `원의 둘레: ${circumference.toFixed(2)}`;
}
</script>
</body>
</html>
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| Javascript: 자바스크립트로 CSS를 사용하는 간단한 예제 (1) | 2025.07.26 |
|---|---|
| Javascript: 자바스크립트는 html 문서 아무 위치에나 삽입 할 수 있습니다 (0) | 2025.07.05 |
| Javascript: 자바스크립트 역사 (발전) (0) | 2025.06.28 |
| Javascript: 자바스크립트 소개 (0) | 2025.06.26 |