2,440 판독값

HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 가장 좋은 방법

~에 의해 Shuseel Baral5m2023/08/01

너무 오래; 읽다

다음은 정수 정수에 대해 간단한 산술 연산을 수행할 수 있는 HTML 및 JavaScript를 사용하여 간단한 계산기를 만드는 단계입니다.

featured image - HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 가장 좋은 방법

HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 것은 이제 막 시작한 웹 개발자에게 재미있고 교육적인 작업일 수 있습니다.

사용자 인터페이스 디자인을 위한 HTML 기능과 계산 처리를 위한 JavaScript 기능을 결합하여 브라우저에서 바로 대화형 기능을 갖춘 계산기를 구성할 수 있습니다.

이 게시물에서는 기본 계산기를 처음부터 만드는 과정을 단계별로 안내하는 동시에 웹 프로그래밍의 원리도 살펴보겠습니다.

시작하려면 먼저 프로젝트 환경을 만들어야 합니다. 우리는 계산기의 기반이 될 기본 HTML 프레임워크를 구축할 것입니다. 또한 계산기를 시각적으로 더욱 매력적으로 만들기 위해 CSS를 사용하여 모양을 설정하겠습니다.

마지막으로 계산기에 기능을 추가하기 위해 JavaScript 환경을 구성하겠습니다.

HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 단계
- 1. 사용자 인터페이스 디자인
- 1. 사용자 입력 처리
- 1. 계산 수행
간단한 HTML 계산기를 위한 전체 HTML 코드
간단한 HTML 계산기 미리보기
결론

HTML 및 JavaScript를 사용하여 간단한 계산기를 만드는 단계

다음은 정수 정수에 대해 간단한 산술 연산을 수행할 수 있는 HTML 및 JavaScript를 사용하여 간단한 계산기를 만드는 단계입니다.

텍스트 및 버튼 입력은 양식 요소 내의 테이블에 사용되었으며 OnClick 이벤트는 화면에 버튼 값을 배치하거나 숫자를 평가하는 데 사용되었습니다.

1. 사용자 인터페이스 디자인

사용자 인터페이스(UI)는 계산기의 전면입니다. 입력과 결과를 표시하기 위한 깔끔한 디스플레이를 만들어 보겠습니다. 또한 정수 및 연산자에 대한 대화형 버튼도 제공됩니다. 우리의 목표는 계산기 사용자의 모든 측면을 풍요롭게 하는 직관적이고 사용자 친화적인 디자인을 만드는 것입니다.

계산기의 사용자 인터페이스를 디자인하려면 다음 단계를 따르십시오.

Step 1. 먼저 아래와 같이 <form> 요소, <body> 태그와 함께 <html> 태그를 생성합니다.

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

Step 2. 이제 <table> …..</table> 태그를 사용하여 <form>……</form> 태그 내에 테이블을 생성하고 <tr을 사용하여 테이블 행의 테이블 데이터 내에 두 가지 유형의 입력 텍스트와 버튼을 삽입합니다. ><td>….</td></tr> 태그.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

Step 3. 그런 다음 <input> 태그를 사용하여 버튼을 만들고 <tr><td>….</td></tr> 태그가 있는 테이블 행 내에서 이 버튼의 “id”와 “value”를 다음과 같이 설정합니다. 아래에 제시되어 있습니다.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

4단계. 마지막으로 다음 CSS 코드를 추가하여 아래와 같이 <style>…..</style> 태그가 있는 계산기에 대한 디자인을 제공합니다.

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. 사용자 입력 처리

계산기의 사용자 인터페이스를 디자인하려면 다음 단계를 따르십시오.

#1 단계. 아래와 같이 입력 및 계산 결과를 표시하기 위해 생성된 표시 버튼에 "onkeypress" 이벤트를 할당합니다.

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

Step 2. 아래와 같이 숫자와 산술 연산자가 있는 모든 버튼에 대해 OnClick 이벤트를 할당합니다.

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. 계산 수행

모든 산술 연산자에 대해 OnClick 이벤트를 할당하고 Clear(C) 버튼에 공백("")이 포함된 큰따옴표를 제공하고 아래와 같이 eval() 함수를 사용하여 OnClick 이벤트의 숫자를 평가합니다.

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

간단한 HTML 계산기를 위한 전체 HTML 코드

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>