산술연산 ( 더하기, 빼기, 곱하기, 나누기 )이 가능한 계산기 웹프로그래밍
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>산술연산 계산기 만들어보기</title>
<style>
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>계산하기(+, -, *, /)</h3>
<form
oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
<input type="number" name="num1" value="0"> + <input
type="number" name="num2" value="0"> =
<output name="result" for="num"></output>
</form>
<form
oninput="result.value = parseInt(num1.value) - parseInt(num2.value)">
<input type="number" name="num1" value="0"> - <input
type="number" name="num2" value="0"> =
<output name="result" for="num"></output>
</form>
<form
oninput="result.value = parseInt(num1.value) * parseInt(num2.value)">
<input type="number" name="num1" value="0"> * <input
type="number" name="num2" value="0"> =
<output name="result" for="num"></output>
</form>
<form
oninput="result.value = parseInt(num1.value) / parseInt(num2.value)">
<input type="number" name="num1" value="0"> / <input
type="number" name="num2" value="0"> =
<output name="result" for="num"></output>
</form>
</body>
</html>
num1.value 값(string)을 숫자로 받기 위하여 parseInt()를 사용
피연산자는 <input>태그로,
연산 후 결과값은 <output>태그로 구성
<form>태그의 oninput 속성값에 들어있는 연산을 수행.
최종적으로 이렇게 정리할 수 있겠다.
<form oninput="해야할 연산식">
<input type="해당 input의 타입" name="이름지정" value="초기값">
+(하고싶은연산자(그냥 텍스특값))
<input type="해당 input의 타입" name="이름지정" value="초기값">
=(하고싶은연산자(그냥 텍스특값))
<output name="이름지정" for="num">
</form>
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #06 : 텍스트 스타일 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #05 : CSS 기본 (0) | 2022.12.13 |
| HTML & CSS : 버튼 만들어보기 실습 (0) | 2022.12.13 |
| HTML & CSS #04 : 폼, input태그 (0) | 2022.12.13 |
| HTML & CSS #03 : 이미지 & 하이퍼링크 (0) | 2022.12.13 |
댓글