[웹 프로그래밍] 사칙연산 계산기
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title> <!-- 문서 제목 설정 -->
<style>
/* 결과 창의 스타일 설정 */
#result {
width: 240px; /* 결과 창의 너비 설정 */
height: 40px; /* 결과 창의 높이 설정 */
font-size: 24px; /* 결과 창의 글꼴 크기 설정 */
}
/* 버튼의 스타일 설정 */
input[type="button"] {
width: 60px; /* 버튼의 너비 설정 */
height: 40px; /* 버튼의 높이 설정 */
font-size: 18px; /* 버튼의 글꼴 크기 설정 */
}
</style>
</head>
<body>
<form>
<input type="text" id="result"/> <!-- 결과를 표시할 입력 상자 -->
<br><br>
<!-- 숫자 및 연산자 버튼 -->
<!-- 숫자 버튼: 숫자 1을 표시하고 클릭 시, 입력 상자에 숫자 1을 추가하는 기능을 실행하는 버튼 -->
<input type="button" value="1"
onclick="document.getElementById('result').value+='1'" />
<!-- 버튼의 타입을 지정합니다. 여기서는 버튼임을 나타냅니다. -->
<!-- 버튼에 표시될 값으로, 여기서는 숫자 1을 나타냅니다. -->
<!-- 클릭 이벤트가 발생했을 때 실행될 JavaScript 코드입니다.
onclick: 이벤트핸들러, 이벤트 이름 앞에 'on'을 붙임, HTML 태그의 한 속성으로 사용.
document.getElementById('result'): 'result'라는 id를 가진 요소를 찾습니다.
value+='1'은 value에 1을 더함 -->
<input type="button" value="2"
onclick="document.getElementById('result').value+='2'"/>
<input type="button" value="3"
onclick="document.getElementById('result').value+='3'"/>
<input type="button" value="+"
onclick="document.getElementById('result').value+='+'"/>
<br>
<input type="button" value="4"
onclick="document.getElementById('result').value+='4'"/>
<input type="button" value="5"
onclick="document.getElementById('result').value+='5'"/>
<input type="button" value="6"
onclick="document.getElementById('result').value+='6'"/>
<input type="button" value="-"
onclick="document.getElementById('result').value+='-'"/>
<br>
<input type="button" value="7"
onclick="document.getElementById('result').value+='7'"/>
<input type="button" value="8"
onclick="document.getElementById('result').value+='8'"/>
<input type="button" value="9"
onclick="document.getElementById('result').value+='9'"/>
<input type="button" value="*"
onclick="document.getElementById('result').value+='*'"/>
<br>
<input type="button" value="c"
onclick="document.getElementById('result').value=''"/>
<!-- 'c' 버튼: 결과 지우기 -->
<input type="button" value="0"
onclick="document.getElementById('result').value+='0'"/>
<!-- 등호 버튼: 결과 계산 -->
<input type="button" value="="
onclick="document.getElementById('result').value=eval(document.getElementById('result').value)" />
<!-- 버튼의 타입을 지정합니다. 여기서는 버튼임을 나타냅니다. -->
<!-- 버튼에 표시될 값으로, 여기서는 등호 기호를 나타냅니다. -->
<!-- 클릭 이벤트가 발생했을 때 실행될 JavaScript 코드입니다.
document.getElementById('result').value는 입력 상자의 값을 나타냅니다.
eval() 함수는 문자열로 표현된 JavaScript 코드를 실행하여 결과를 계산합니다.
따라서 document.getElementById('result').value의 값을 계산하고,
결과를 다시 'result' 입력 상자에 표시합니다. -->
<input type="button" value="/" onclick="document.getElementById('result').value+='/'"/>
<br>
</form>
</body>
</html>
#사칙연산 #웹프로그래밍 #HTML #자바스크립트 #JavaScript #JS #문서객체모델 #계산기 #Calculator #DOM #Document Object Model #getElementById
세상을 링크하라!!! 모든 링크를 한 자리에...
링크닷컴: https://linkdotcom.mycafe24.com/
유용한 링크, 링크닷컴 #무료 #링크사이트 #링크사이트
컴퓨터 및 일반 유용한 링크들을 모아 놓았습니다. 지금 바로 확인하세요!
linkdotcom.mycafe24.com
'웹프로그래밍' 카테고리의 다른 글
| [웹 프로그래밍] 다음 주소 API를 활용한 도로명주소, 지번주소 변환 (0) | 2024.02.09 |
|---|