섭씨 화씨 변환 프로그램
먼저 '숫자 자료형'을 이용해서 만들어볼 만한 예제가 뭐가 있을지 고민해봤습니다. 파이썬에 대해 더 많은 내용을 알고 있다면 훨씬 다양한 프로그램을 만들 수 있겠지만, 현재 우리가 알고 있는 파이썬 지식이 아주 적기 때문에 프로그램을 하나 만드는데도 많은 제약이 따르네요.
우리가 사용하는 온도에는 '섭씨(Celsius)' 온도와 '화씨(Fahrenheit)' 온도가 있습니다. 우리는 일상에서 섭씨온도를 주로 사용합니다. 요즘은 대부분의 나라에서 섭씨온도를 사용한다고 하지만, 몇몇 영어권 나라에서는 아직도 화씨온도를 사용하는 나라가 있다고 합니다.
동일한 온도를 다르게 표현하기 때문에 두 단위 간에 변환이 필요한 것인데요, 섭씨와 화씨를 변환하기 위해서는 변환 공식을 먼저 알고 있어야 합니다.
섭씨에서 화씨로 온도 변환 : ℉ = ℃ * 1.8 + 32
화씨에서 섭씨로 온도 변환 : ℃ = (℉ -32) / 1.8
이 공식을 알고 있으면, 섭씨 화씨 변환 프로그램의 절반을 풀었다고 볼 수 있습니다. 이 공식을 통해 원하는 문제를 해결할 수 있기 때문입니다. 이렇게 문제 해결을 위한 방법을 '알고리즘'이라고 합니다. 알고리즘이라는 것은 프로그래밍을 하는 데 있어서 아주 중요한 부분이라고 할 수 있습니다.
본격적으로 '섭씨온도를 화씨온도로 변환하는 프로그램'을 만들어 보겠습니다.
프로그램을 만들기에 앞서, 프로그램이 어떠한 순서로 동작을 해야 할지를 먼저 고민해 봐야 하는데요, 전 간단하게 아래와 같이 동작하는 프로그램을 만들기로 했습니다.
- 섭씨온도 값을 입력받는다. (input 함수)
- 섭씨온도 값을 화씨온도 값으로 변환한다. (섭씨 화씨 변환 공식)
- 변환된 화씨 온도 값을 출력한다. (print 함수)
temperature.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>온도 변환기</title>
<link rel="stylesheet" href="temperature.css" />
</head>
<body>
<div class="container">
<h1>온도 변환기</h1>
<form id="tempForm">
<label for="temperatureInput">온도입력</label><br />
<input
type="number"
id="temperatureInput"
name="temperatureInput"
/><br />
<select name="units" id="units">
<br />
<option value="celsius">섭씨</option>
<option value="fahrenheit">화씨</option></select
><br />
<button type="button" onclick="convertTemperatures()">변환</button>
</form>
<div id="result"></div>
</div>
<script>
function convertTemperatures() {
var inputTemperature =
document.getElementById("temperatureInput").value;
var selectedUnit = document.getElementById("units").value;
if (selectedUnit === "celsius") {
var celsius = parseFloat(inputTemperature);
var celsiusToFahrenheit = (celsius * 9) / 5 + 32;
document.getElementById(
"result"
).innerHTML = `${celsius}도 섭씨는 ${celsiusToFahrenheit.toFixed(
2
)}도 화씨입니다.`;
} else if (selectedUnit === "fahrenheit") {
var fahrenheit = parseFloat(inputTemperature);
var fahrenheitToCelsius = ((fahrenheit - 32) * 5) / 9;
document.getElementById(
"result"
).innerHTML = `${fahrenheit}도 화씨는 ${fahrenheitToCelsius.toFixed(
2
)}도 섭씨입니다.`;
}
}
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| Javascript(event)_2024-07-19 (0) | 2024.07.19 |
|---|---|
| Javascript(Date 메소드)_2024-07-19 (0) | 2024.07.19 |
| Javascript(반복문)_2024-07-17 (0) | 2024.07.18 |
| Javascript(나이계산프로그램)_2024-07-17 (0) | 2024.07.17 |
| Javascript(조건문)_2024-07-17 (2) | 2024.07.17 |
