간단한 계산기를 만들어 보겠습니다.
개념설명:
이 예제는 사용자로부터 두 개의 숫자를 입력받고, 사용자가 선택한 연산(덧셈, 뺄셈, 곱셈, 나눗셈)을 수행하여 결과를 출력하는 간단한 웹 기반 계산기를 만드는 것입니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>간단한 계산기</title>
</head>
<body>
<h1>간단한 계산기</h1>
<label for="num1">첫 번째 숫자: </label>
<input type="number" id="num1"><br><br>
<label for="num2">두 번째 숫자: </label>
<input type="number" id="num2"><br><br>
<label for="operator">연산 선택: </label>
<select id="operator">
<option value="add">덧셈</option>
<option value="subtract">뺄셈</option>
<option value="multiply">곱셈</option>
<option value="divide">나눗셈</option>
</select><br><br>
<button onclick="calculate()">계산</button><br><br>
<p id="result">결과: </p>
<script>
function calculate() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
const operator = document.getElementById("operator").value;
let result;
switch (operator) {
case "add":
result = num1 + num2;
break;
case "subtract":
result = num1 - num2;
break;
case "multiply":
result = num1 * num2;
break;
case "divide":
if (num2 !== 0) {
result = num1 / num2;
} else {
result = "나눗셈은 0으로 나눌 수 없습니다.";
}
break;
}
document.getElementById("result").textContent = "결과: " + result;
}
</script>
</body>
</html>
전문용어 상세하게 설명:
<label>: HTML 폼 요소의 라벨을 정의합니다.
<input>: 사용자로부터 입력을 받기 위한 HTML 입력 요소입니다. type 속성은 입력 유형을 정의합니다.
<select>: 드롭다운 목록을 생성합니다.
<button>: 클릭 가능한 버튼을 생성합니다.
parseFloat(): 문자열을 부동 소수점 숫자로 변환하는 JavaScript 함수입니다.
switch 문: 다양한 조건에 따라 다른 코드 블록을 실행하는 JavaScript 제어 구조입니다.
'자바스크립트' 카테고리의 다른 글
| ToDo 리스트 관리 앱 만들기 (0) | 2023.12.17 |
|---|---|
| 랜덤 숫자 맞추기 게임: 컴퓨터가 생성한 랜덤 숫자를 맞추는 게임을 만듭니다. (0) | 2023.12.17 |
| 화면에 "Hello, World!" 출력하기 (0) | 2023.12.16 |
| 강의 23: 자바스크립트 빌드 도구와 자동화 (0) | 2023.12.16 |
| 강의 22: 자바스크립트 모바일 앱과 반응형 웹 (0) | 2023.12.16 |