HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 것은 이제 막 시작한 웹 개발자에게 재미있고 교육적인 작업일 수 있습니다.  사용자 인터페이스 디자인을 위한 HTML 기능과 계산 처리를 위한 JavaScript 기능을 결합하여 브라우저에서 바로 대화형 기능을 갖춘 계산기를 구성할 수 있습니다.  이 게시물에서는 기본 계산기를 처음부터 만드는 과정을 단계별로 안내하는 동시에 웹 프로그래밍의 원리도 살펴보겠습니다.  시작하려면 먼저 프로젝트 환경을 만들어야 합니다. 우리는 계산기의 기반이 될 기본 HTML 프레임워크를 구축할 것입니다. 또한 계산기를 시각적으로 더욱 매력적으로 만들기 위해 CSS를 사용하여 모양을 설정하겠습니다.  마지막으로 계산기에 기능을 추가하기 위해 JavaScript 환경을 구성하겠습니다.   목차  HTML과 JavaScript를 사용하여 간단한 계산기를 만드는 단계  사용자 인터페이스 디자인  사용자 입력 처리  계산 수행  간단한 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>  간단한 HTML 계산기 미리보기  InfoTechSite에 게시된 원본 기사에서 HTML 계산기를 보고 사용할 수 있습니다.   HTML 계산기를 보려면 여기를 클릭하세요.    게시됨 여기에도

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

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

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Crypto Growth: 효과적인 사용자 페르소나 만들기

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Crypto Growth: 효과적인 사용자 페르소나 만들기

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps