HTML, CSS 및 JavaScript를 사용하여 기본 계산기 만들기

JavaScript로 함수형 계산기를 만드는 것은 재미있고 DOM 조작, 이벤트 처리, 조건부 논리, 문자열 조작, 산술 연산, 키보드 입력 통합, 사용자 인터페이스용 CSS 스타일링 등 많은 개념이 사용됩니다. 이 블로그 게시물에서는 코드를 자세히 살펴보고 각 줄을 분류하여 해당 속성과 기능을 이해하겠습니다. 이 블로그를 마치면 계산기가 어떻게 작동하는지 확실히 이해할 수 있을 것입니다.

시작해 보겠습니다.

HTML 구조 설정

HTML은 표준 상용구로 시작하여 간단합니다. 아래는 index.html의 코드 조각입니다

각각 버튼 세트가 포함된

섹션. 이러한 섹션에는 숫자(0-9), 수학 연산자( , -, *, /) 및 AC, C, %, = 및 ..와 같은 기타 필수 버튼이 포함됩니다.

태그는 계산기의 논리와 기능이 정의된 외부 JavaScript 파일인 script.js에 연결됩니다. 이 외부 파일은 사용자 상호 작용과 계산을 처리하여 계산기가 의도한 대로 작업을 수행할 수 있도록 합니다.

여기서 표시 상자에는 입력 내용과 결과가 표시되고 버튼 상자에는 모든 계산기 버튼이 표시됩니다.

스타일링을 위한 CSS 추가

이제 계산기의 스타일을 시각적으로 매력적이고 사용자 친화적으로 만들어 보겠습니다.

CSS 코드를 분석해 보겠습니다.

1. 래퍼 스타일링

최소 높이: 100vh; 래퍼가 최소한 뷰포트의 전체 높이를 차지하도록 합니다. 디스플레이: 플렉스; 유연한 레이아웃을 가능하게 하여 하위 요소를 정렬할 수 있습니다. 정당화 콘텐츠: 센터; 콘텐츠를 가로로 가운데에 맞추고 align-items: center; 콘텐츠를 수직으로 중앙에 배치합니다. 마지막으로 테두리: 2px 단색 검정; 래퍼 주위에 테두리를 추가합니다.

1. 계산기 컨테이너 스타일링:

디스플레이: 플렉스; 계산기 컨테이너를 유연하게 만들어 하위 요소를 행이나 열에 배치할 수 있도록 합니다. 플렉스 방향: 열; 하위 요소를 수직으로 정렬합니다. 간격: 12px; 각 섹션이나 요소 사이에 간격을 추가합니다. 마지막으로 너비: 500px; 계산기의 너비를 500px로 설정합니다.

1. 디스플레이 박스 스타일링

테두리: 1px 단색 검정색; 표시 상자에 테두리를 추가합니다. 패딩: 16px; 더 나은 가독성을 위해 상자 내부에 공간을 제공합니다. 텍스트 정렬: 오른쪽; 텍스트가 오른쪽에 정렬되는지 확인합니다. 글꼴 크기: 24px; 가시성 향상을 위해 글꼴 크기를 늘리고 border-radius: 5px; 상자 모서리를 둥글게 만듭니다.

1. 버튼 컨테이너와 버튼 스타일링

여기서 버튼 컨테이너는 .flex-container 스타일로 지정되었습니다. 여기서 디스플레이는 flex; 하위 요소에 대한 유연한 레이아웃을 만듭니다. 내용 정당화: 공백 사이; 속성은 버튼 사이에 공백을 두고 균등하게 분배하고 gap: 8px; 더 나은 정렬을 위해 각 버튼 사이의 적절한 간격을 보장합니다.

각 버튼의 스타일은 flex: 1;로 지정되어 한 행 내에서 동일한 공간을 차지합니다. 패딩: 16px; 편안함을 위해 각 버튼 내부에 공간을 추가하고 글꼴 크기: 20px; 텍스트를 읽을 수 있는지 확인합니다. 글꼴 두께: 굵게; 텍스트를 눈에 띄게 만듭니다. whileborder: 1px solid black; 각 버튼 주위에 테두리를 추가합니다. 추가적으로 border-radius: 8px; 버튼 모서리를 약간 둥글게 만들고 커서: 포인터; 마우스를 올리면 커서가 포인터로 변경됩니다. 버튼의 배경색은 배경색이 rgb(255, 255, 255);인 흰색으로 설정됩니다.

"=" 버튼의 경우 .equal 클래스는 flex: 2.5를 사용합니다. 더 많은 공간을 확보하여 다른 버튼 너비의 2.5배로 만듭니다. 버튼 위에 마우스를 올리면 버튼:호버 스타일이 배경색을 회색으로 변경합니다. 배경색은 rgb(127, 131, 131); 텍스트 색상을 흰색으로 설정합니다. 이 전환 효과는 전환에 의해 부드러워집니다. 배경색 0.3초 완화, 색상 0.3초 완화, 색상 간 0.3초 페이드가 허용됩니다.

위의 HTML과 CSS를 사용하면 계산기는 다음과 같습니다.

이제 계산기에 생명을 불어넣는 주요 부분을 살펴보겠습니다.
JavaScript 코드 조각

이해를 돕기 위해 코드를 나누어 보겠습니다.

1. DOM 요소 선택

displayBox 변수는 디스플레이 상자에 대한 참조를 보유합니다(

1. 디스플레이와 운영자를 위한 변수

displayValue 변수는 화면에 표시할 현재 값을 보유하여 계산 중에 정확한 업데이트를 보장합니다. lastOperator 변수는 마지막으로 사용된 연산자를 추적하여 연속적인 연산자 입력과 같은 오류를 방지합니다. 또한 console.log는 디버깅 목적, 특히 검토를 위해 CalculatorBtns 노드 목록을 기록하는 데 활용됩니다.

1. 버튼 클릭 이벤트 리스너/각 버튼 반복

forEach 메서드는 CalculatorBtns 컬렉션의 각 버튼을 반복하는 데 사용됩니다. 각 버튼에 대해 innerText 속성은 "AC", "C", "9", " " 등과 같이 버튼에 표시되는 텍스트를 보유하는 ButtonValue 변수에 할당됩니다.

그런 다음 onclick 이벤트 리스너가 각 버튼에 추가됩니다. 버튼을 클릭하면 할당된 기능이 실행됩니다. 이 함수인 handlerButtonAction(buttonValue)은 버튼의 텍스트(buttonValue)를 인수로 사용합니다. 이 기능을 사용하면 버튼 값을 전달하여 계산기가 디스플레이 지우기, 숫자 입력, 수학 연산 수행 등 올바른 작업을 수행할 수 있습니다.

1. 키보드 입력 시 키 누름 처리

이렇게 하면 계산기를 키보드에서도 사용할 수 있습니다. 키를 누르면 해당 버튼의 동작이 실행됩니다. 예를 들어 키보드에서 "1"을 누르면 값 "1"을 사용하여 handlerButtonAction() 함수가 트리거됩니다.

1. 디스플레이 기능

display() 함수는 디스플레이 상자(displayBox)의 내용을 현재 displayValue로 업데이트합니다. displayValue가 비어 있으면 기본적으로 "0.0"으로 표시됩니다.

1. 버튼 액션 핸들러(메인 로직):

코드는 계산기의 디스플레이를 업데이트하고 계산을 처리하기 위해 여러 단계를 수행합니다. 먼저 eval(displayValue)는 displayValue에 저장된 수학적 표현식을 평가합니다. 예를 들어, 디스플레이에 "3 5"가 표시되면 eval은 결과를 계산하고 반환하며, 이 경우 결과는 8입니다.

다음으로, displayValue = String(result)는 결과를 문자열로 변환하고 displayValue를 업데이트하여 결과를 화면에 표시합니다. 계산이 완료되면 lastOperator = ""는 lastOperator를 빈 문자열로 재설정하여 이전 연산자가 모두 지워지도록 합니다. 마지막으로, display() 함수는 디스플레이를 업데이트하여 계산 결과를 표시합니다.

1. AC(All Clear) 및 C(Clear) 버튼 로직

"AC" 버튼을 클릭하면 코드는 버튼 값이 "AC"와 같은지 확인합니다. true인 경우 displayValue를 빈 문자열로 재설정하여 효과적으로 전체 디스플레이를 지우고 계산기를 재설정합니다. 그런 다음 display() 함수가 호출되어 빈 값으로 디스플레이를 업데이트합니다.

"C" 버튼의 경우, 버튼 값이 "C"이면 코드는 슬라이스(0, -1)를 사용하여 displayValue에서 마지막 문자를 제거합니다. 이를 통해 사용자는 마지막 입력이나 문자를 삭제할 수 있으며, 이에 따라 디스플레이() 함수가 다시 호출되어 디스플레이가 업데이트됩니다.

1. 연산자 확인

이 조건은 표시된 현재 값을 기준으로 연산자를 누를 수 있는지 확인하는 데 사용됩니다.

["%", "/", "*", " "].includes(buttonValue) 조건은 클릭한 버튼이 연산자(%, /, *, ) 중 하나인지 확인합니다. 버튼이 연산자인 경우 다음 확인 if (!displayValue || displayValue === "-")는 디스플레이가 비어 있거나 빼기 기호(-)만 포함되어 있는 경우 연산자를 누를 수 없는지 확인합니다. 이렇게 하면 두 명의 연산자가 연속되거나 연산자로 시작하는 등의 오류가 방지됩니다. 조건이 true이면 함수는 단순히 반환되며 디스플레이에 연산자가 추가되지 않습니다.

1. 연속연산 방지

이 코드 블록은 연속된 연산자를 누르는 시나리오를 처리하여 " " 또는 " -"와 같은 잘못된 입력을 방지합니다.

먼저 if (["%", "/", "*", " ", "-"].includes(buttonValue))는 클릭한 버튼이 연산자인지 확인합니다. 그런 다음 const lastCharacter = displayValue.slice(-1)은 displayValue에서 현재 표현식의 마지막 문자를 검색합니다.

다음으로 lastOperator = 버튼값은 lastOperator 변수를 업데이트하여 현재 연산자를 저장합니다. if (["%", "/", "*", " ", "-"].includes(lastCharacter))로 확인한 대로 마지막 문자도 연산자인 경우 코드는 displayValue.slice(를 사용하여 이를 제거합니다. 0, -1). 이렇게 하면 표현식 끝에 하나의 연산자만 나타나며 연속된 연산자가 추가되는 것을 방지할 수 있습니다.

1. 소수점 확인

이 코드 블록은 숫자 내에서 소수점(.)이 한 번만 나타날 수 있도록 하여 "3..5."와 같은 잘못된 입력을 방지합니다.

먼저 if (buttonValue === ".") 조건은 클릭한 버튼이 소수점인지 확인합니다. 그렇다면 유효성 검사를 진행합니다.

다음으로 const lastOperatorIndex = displayValue.lastIndexOf(lastOperator)는 displayValue에서 마지막 연산자의 위치를 ​​찾습니다. 그런 다음 const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue는 입력 중인 현재 숫자를 나타내는 마지막 연산자 뒤의 displayValue 부분을 추출합니다. 연산자가 없으면 전체 displayValue를 고려합니다.

마지막으로 if (currentNumberSet.includes(".")) 는 추출된 숫자 부분에 이미 소수점이 포함되어 있는지 확인합니다. 그렇다면 함수가 일찍 반환되어 사용자가 두 번째 소수점을 입력할 수 없게 됩니다. 이렇게 하면 "3.5"와 같은 숫자는 유효하지만 "3..5"와 같은 입력은 유효하지 않습니다.

1. 새 값으로 디스플레이 업데이트:

코드 표시값 = 표시값 버튼값; 누른 버튼의 값(예: 숫자 또는 연산자)을 기존 displayValue 문자열에 추가합니다. 이는 사용자가 계산기와 상호 작용할 때 현재 표현식이나 숫자를 구성합니다.

버튼 값을 추가한 후 디스플레이() 함수가 호출되어 디스플레이를 업데이트하고 업데이트된 displayValue가 반영되는지 확인합니다. 이렇게 하면 사용자가 입력할 때 최신 값이나 표현식을 볼 수 있습니다.

결론

이 JavaScript 코드는 계산기에서 값 표시, 계산 수행, 입력 지우기 및 표현식 유효성 검사를 위한 논리를 처리합니다. 버튼 클릭과 키보드 입력 모두에서 작동합니다. 주요 기능에는 "=" 또는 "Enter" 키를 눌렀을 때 계산을 수행하고, AC(모두 지우기) 및 C(마지막 문자 지우기) 버튼을 처리하고, 연속 연산자나 다중 소수점과 같은 잘못된 연산을 방지하는 기능이 포함됩니다. 또한 각 작업 후에 디스플레이가 업데이트되어 사용자가 최신 값이나 표현식을 볼 수 있습니다. 이러한 기능은 기능적이고 대화형인 계산기의 기초를 제공합니다.

아래는 내 데모 링크이므로 자유롭게 전체 코드를 확인하거나 저장소를 복제하거나 라이브 데모와 상호 작용할 수 있습니다. 즐거운 코딩하세요!
GITHUB - [https://github.com/bigyan1997/calculator]
베르셀 - [https://calculator-delta-sepia-91.vercel.app/]

위 내용은 HTML, CSS 및 JavaScript를 사용하여 기본 계산기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!