JavaScript Geometry 영역 계산기 구축 : 대화식 개발자 튜토리얼 2025
Anh Quân
Creator
목차
JavaScript를 사용하여 자신만의 대화 형 지오메트리 계산기를 만드는 심층적 인 안내서, 간단하고 복잡한 다각형에 대한 영역 계산이 완성됩니다.
소개 : 기하 계산기를 구축하는 이유는 무엇입니까?
지오메트리 계산은 토지 측량 및 아키텍처에서 게임 개발 및 지리 정보 시스템에 이르기까지 수많은 실제 응용 프로그램의 기초를 형성합니다.개발자로서 우리는 종종 다양한 모양의 영역을 계산하기 위해 신뢰할 수있는 도구가 필요합니다.사용 가능한 온라인 계산기가 많이 있지만 자체적으로 구축하면 몇 가지 장점이 있습니다.
- 특정 프로젝트 요구 사항에 맞게 완벽한 사용자 정의
- 기존 웹 응용 프로그램과의 통합 유연성
- 조정 지오메트리 및 알고리즘 사고를 이해할 수있는 학습 기회
- JavaScript 기술을 선보이는 포트폴리오 향상
이 포괄적 인 튜토리얼에서는 JavaScript를 사용하여 강력한 대화식 지오메트리 영역 계산기를 구축하는 과정을 살펴 보겠습니다.결국, 좌표 지오메트리를 사용하여 단순하고 복잡한 다각형의 영역을 정확하게 계산하는 완전히 기능적인 웹 응용 프로그램이 있습니다.
우리가 건축하는 것
우리의 형상 계산기는 다음과 같습니다.
- 사용자가 직관적 인 인터페이스를 통해 다각형 좌표를 입력 할 수 있도록합니다.
- 정기적이고 불규칙한 다각형의 영역을 계산하십시오
- 다중 측정 장치를 지원합니다
- HTML 캔버스를 사용하여 모양을 시각화하십시오
- 적절한 반올림으로 명확하고 정확한 결과를 제공하십시오
- 모든 주요 브라우저 및 장치에서 작업하십시오
대화식 다각형 입력을 갖춘 최종 JavaScript Geometry 영역 계산기 미리보기
전제 조건
이 튜토리얼을 따라 가려면 다음을 수행해야합니다.
- HTML, CSS 및 JavaScript의 기본 이해
- DOM 조작에 익숙합니다
- 텍스트 편집기 또는 IDE (vs 코드, 숭고한 텍스트 등)
- 최신 웹 브라우저
- 선택 사항 : 좌표 형상 기본 사항 이해
지역 계산의 수학을 이해합니다
코드로 다이빙하기 전에 지오메트리 계산기에 전원을 공급하는 수학적 원리를 이해해 봅시다.
다각형 면적의 신발 공식
다각형 (일반 또는 불규칙)의 면적을 계산하기 위해 측량사의 공식 또는 가우스 영역 공식으로도 알려진 떼 공식을 사용합니다.이 강력한 알고리즘은 모양이 얼마나 복잡한 지에 관계없이 정점에 의해 정의 된 다각형에 대해 작동합니다.
공식은 다음과 같이 표현됩니다.
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)| 어디:
x_iandy_iare the coordinates of the i-th vertex- 공식은 인접한 정점의 교차 제품의 절반을 계산합니다.
- 절대 값은 긍정적 인 영역을 보장합니다
이 공식은 다각형 주변 주위를 "걷기"하여 연속 지점 사이의 교차 제품을 계산하여 작동합니다.우리가 이것을 합치고 2로 나눌 때, 우리는 다각형의 영역을 얻습니다.
프로젝트 설정
기하학 계산기의 기본 구조를 설정하여 시작하겠습니다.
HTML 구조
Create a new file named index.html with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometry Area Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator-container">
<h1>Geometry Area Calculator</h1>
<div class="input-section">
<h2>Enter Polygon Coordinates</h2>
<p>Click on the canvas to add points or enter them manually below.</p>
<div class="canvas-container">
<canvas id="polygon-canvas" width="400" height="400"></canvas>
<button id="clear-canvas">Clear Canvas</button>
</div>
<div class="manual-input">
<div class="coordinates-container" id="coordinates-list">
<div class="coordinate-pair">
<input type="number" placeholder="X1" class="x-coord">
<input type="number" placeholder="Y1" class="y-coord">
<button class="remove-point">×</button>
</div>
</div>
<button id="add-point">Add Point</button>
</div>
<div class="units-selection">
<label for="units">Measurement Units:</label>
<select id="units">
<option value="pixels">Pixels</option>
<option value="meters">Meters</option>
<option value="feet">Feet</option>
</select>
</div>
<button id="calculate-area">Calculate Area</button>
</div>
<div class="results-section" id="results">
<!-- Results will be displayed here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS 스타일
Create a file named styles.css for styling our calculator:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.calculator-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #444;
}
p {
margin-bottom: 20px;
color: #666;
}
.canvas-container {
margin-bottom: 30px;
text-align: center;
}
canvas {
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.manual-input {
margin-bottom: 25px;
}
.coordinates-container {
max-height: 200px;
overflow-y: auto;
margin-bottom: 15px;
}
.coordinate-pair {
display: flex;
margin-bottom: 8px;
align-items: center;
}
input {
width: 80px;
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.remove-point {
background-color: #f44336;
padding: 8px 12px;
}
.remove-point:hover {
background-color: #d32f2f;
}
#clear-canvas {
margin-top: 10px;
}
.units-selection {
margin-bottom: 25px;
}
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.results-section {
margin-top: 30px;
padding: 20px;
background-color: #f0f8ff;
border-radius: 6px;
display: none;
}
.results-section.active {
display: block;
}
.area-result {
font-size: 1.3rem;
margin-bottom: 15px;
}
.calculation-steps {
margin-top: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
font-family: monospace;
}JavaScript 구현
Now, let's create the script.js file that will power our geometry area calculator:
// DOM Elements
const canvas = document.getElementById('polygon-canvas');
const ctx = canvas.getContext('2d');
const clearCanvasBtn = document.getElementById('clear-canvas');
const addPointBtn = document.getElementById('add-point');
const coordinatesList = document.getElementById('coordinates-list');
const calculateBtn = document.getElementById('calculate-area');
const resultsSection = document.getElementById('results');
const unitsSelect = document.getElementById('units');
// Global Variables
let points = [];
let isDragging = false;
let dragIndex = -1;
// Canvas Setup
function setupCanvas() {
// Set canvas coordinate system (origin at center)
ctx.translate(canvas.width / 2, canvas.height / 2);
drawGrid();
// Event listeners for canvas interaction
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', () => isDragging = false);
// Redraw canvas initially
redrawCanvas();
}
// Draw coordinate grid
function drawGrid() {
const width = canvas.width;
const height = canvas.height;
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// Vertical lines
for (let x = -width/2; x <= width/2; x += 20) {
ctx.beginPath();
ctx.moveTo(x, -height/2);
ctx.lineTo(x, height/2);
ctx.stroke();
}
// Horizontal lines
for (let y = -height/2; y <= height/2; y += 20) {
ctx.beginPath();
ctx.moveTo(-width/2, y);
ctx.lineTo(width/2, y);
ctx.stroke();
}
// X and Y axes (darker)
ctx.strokeStyle = '#aaa';
ctx.lineWidth = 2;
// X-axis
ctx.beginPath();
ctx.moveTo(-width/2, 0);
ctx.lineTo(width/2, 0);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(0, -height/2);
ctx.lineTo(0, height/2);
ctx.stroke();
}
// Handle mouse down event on canvas
function handleMouseDown(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
// Check if clicking near an existing point (for dragging)
for (let i = 0; i < points.length; i++) {
const dx = points[i].x - canvasX;
const dy = points[i].y - canvasY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
isDragging = true;
dragIndex = i;
return;
}
}
// If not dragging, add a new point
points.push({x: canvasX, y: canvasY});
updateCoordinateInputs();
redrawCanvas();
}
// Handle mouse move event on canvas
function handleMouseMove(e) {
if (!isDragging || dragIndex === -1) return;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
points[dragIndex] = {x: canvasX, y: canvasY};
updateCoordinateInputs();
redrawCanvas();
}
// Redraw the canvas with all points and connections
function redrawCanvas() {
// Clear the canvas
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
// Redraw the grid
drawGrid();
if (points.length === 0) return;
// Draw the polygon
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
// Connect back to the first point if we have at least 3 points
if (points.length >= 3) {
ctx.lineTo(points[0].x, points[0].y);
// Fill the polygon with a semi-transparent color
ctx.fillStyle = 'rgba(76, 175, 80, 0.2)';
ctx.fill();
}
// Draw the polygon outline
ctx.strokeStyle = '#4CAF50';
ctx.lineWidth = 2;
ctx.stroke();
// Draw the points
for (let i = 0; i < points.length; i++) {
ctx.beginPath();
ctx.arc(points[i].x, points[i].y, 5, 0, Math.PI * 2);
ctx.fillStyle = '#4CAF50';
ctx.fill();
// Label the points
ctx.fillStyle = '#333';
ctx.font = '12px Arial';
ctx.fillText(`P${i+1}`, points[i].x + 8, points[i].y - 8);
}
}
// Update the coordinate inputs based on canvas points
function updateCoordinateInputs() {
// Clear all existing inputs
coordinatesList.innerHTML = '';
// Add new inputs for each point
for (let i = 0; i < points.length; i++) {
const pair = document.createElement('div');
pair.className = 'coordinate-pair';
const xInput = document.createElement('input');
xInput.type = 'number';
xInput.className = 'x-coord';
xInput.placeholder = `X${i+1}`;
xInput.value = Math.round(points[i].x);
xInput.dataset.index = i;
const yInput = document.createElement('input');
yInput.type = 'number';
yInput.className = 'y-coord';
yInput.placeholder = `Y${i+1}`;
yInput.value = Math.round(points[i].y);
yInput.dataset.index = i;
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-point';
removeBtn.textContent = '×';
removeBtn.dataset.index = i;
pair.appendChild(xInput);
pair.appendChild(yInput);
pair.appendChild(removeBtn);
coordinatesList.appendChild(pair);
// Event listeners for manual input changes
xInput.addEventListener('change', updatePointFromInput);
yInput.addEventListener('change', updatePointFromInput);
removeBtn.addEventListener('click', removePoint);
}
}
// Update a point from manual input
function updatePointFromInput(e) {
const index = parseInt(e.target.dataset.index);
const value = parseFloat(e.target.value);
if (isNaN(value)) return;
if (e.target.className === 'x-coord') {
points[index].x = value;
} else {
points[index].y = value;
}
redrawCanvas();
}
// Remove a point
function removePoint(e) {
const index = parseInt(e.target.dataset.index);
points.splice(index, 1);
updateCoordinateInputs();
redrawCanvas();
}
// Add a new point via button
function addNewPoint() {
// Add a new point at (0, 0) or near the last point if one exists
if (points.length > 0) {
const lastPoint = points[points.length - 1];
points.push({x: lastPoint.x + 20, y: lastPoint.y + 20});
} else {
points.push({x: 0, y: 0});
}
updateCoordinateInputs();
redrawCanvas();
}
// Clear all points
function clearCanvas() {
points = [];
updateCoordinateInputs();
redrawCanvas();
resultsSection.style.display = 'none';
}
// Calculate area using the Shoelace formula
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}
// Display the calculation results
function displayResults() {
if (points.length < 3) {
alert("You need at least 3 points to calculate area.");
return;
}
const area = calculatePolygonArea(points);
const selectedUnit = unitsSelect.value;
let unitSymbol = 'px²';
let convertedArea = area;
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}
// Format the result
const formattedArea = convertedArea.toFixed(2);
// Create the result HTML
let resultHTML = `
<h2>Calculation Results</h2>
<div class="area-result">
<strong>Polygon Area:</strong> ${formattedArea} ${unitSymbol}
</div>
<p>Based on ${points.length} vertices</p>
<div class="calculation-steps">
<h3>Calculation Steps:</h3>
<p>Using the Shoelace formula: A = 0.5 × |∑(xᵢyᵢ₊₁ − xᵢ₊₁yᵢ)|</p>
<ol>
`;
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}
resultHTML += `
</ol>
<p>Summing all steps and taking absolute value: ${Math.abs(area).toFixed(2)}</p>
<p>Dividing by 2: ${(Math.abs(area)/2).toFixed(2)}</p>
</div>
`;
resultsSection.innerHTML = resultHTML;
resultsSection.style.display = 'block';
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// Initialize the application
function init() {
setupCanvas();
// Event listeners
clearCanvasBtn.addEventListener('click', clearCanvas);
addPointBtn.addEventListener('click', addNewPoint);
calculateBtn.addEventListener('click', displayResults);
}
// Start the app when the page loads
window.addEventListener('load', init);
떼 공식이 다각형의 영역을 계산하는 방법에 대한 시각적 표현
주요 구성 요소 이해
Geometry 영역 계산기의 주요 구성 요소를 분류합시다.
캔버스 상호 작용
계산기는 대화식 다각형 생성을 위해 HTML 캔버스 요소를 사용합니다.사용자는 다음과 같습니다.
- 캔버스를 클릭하여 포인트를 추가하십시오
- 기존 포인트를 드래그하여 위치를 조정합니다
- 다각형의 실시간 시각화를 참조하십시오
- 참조 할 좌표 그리드를보십시오
캔버스는 (0,0)이 중심에있는 좌표계로 설정되어 사용자가 양수 및 부정적인 좌표 모두에서 작업하는 것이 직관적입니다.
입력 관리 조정
사용자는 두 가지 방법으로 좌표를 입력 할 수 있습니다.
- 시각적 입력 : 캔버스를 직접 클릭하여 포인트를 배치하십시오.
- 수동 입력 : 입력 필드에 정확한 좌표를 입력하십시오.
두 입력 방법은 동기화되어 직관적 인 시각적 배치와 정확한 수치 입력을 모두 허용합니다.
Shoelace 알고리즘 구현
계산기의 핵심은 Shoelace 공식의 구현입니다.
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}이 기능 :
- 정점 좌표 배열을 취합니다
- 각 지점과 다음 지점을 통해 루프 (첫 번째 지점으로 감싸서)
- 교차 제품 계산을 적용합니다
- 최종 영역을 얻으려면 절대 값을 가져 와서 2로 나눕니다.
이 알고리즘의 아름다움은 상호 교차하지 않는 한 볼록한 사람이든 오목한 지에 관계없이 다각형에 적합하다는 것입니다.
고급 기능 추가
기본 계산기가 작동하므로 몇 가지 고급 기능으로 확장하겠습니다.
단위 변환
우리의 계산기는 다양한 측정 단위를 지원합니다.
- 픽셀 : 화면 기반 측정 용
- 미터 : 실제 메트릭 측정 용
- 발 : 제국 측정 용
유닛 변환은 영역 계산 후에 적용됩니다.
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}특정 요구 사항에 따라 변환 요소를 사용자 정의 할 수 있습니다.
다른 측정 시스템에 대한 단위 변환 옵션을 보여주는 계산기 인터페이스
자세한 계산 단계
사용자가 영역 계산 방법을 이해하도록 돕기 위해 계산 단계에 대한 자세한 분석을 제공합니다.
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}이 투명성은 사용자가 결과를 확인하고 다각형 영역 계산의 수학적 원리에 대해 배우는 데 도움이됩니다.
테스트 및 검증
지오메트리 계산기가 완료하기 전에 알려진 모양으로 테스트하여 정확도를 확인해 봅시다.
테스트 케이스 1 : 사각형
(0,0), (100,0), (100,50) 및 (0,50)의 정점이있는 간단한 사각형은 5,000 평방 단위의 면적을 가져야합니다.
테스트 케이스 2 : 삼각형
(0,0), (50,100) 및 (100,0)에 정점이있는 삼각형은 5,000 평방 단위의 면적을 가져야합니다.
테스트 사례 3 : 불규칙한 다각형
(0,0), (50,100), (100,50), (75,25) 및 (25,25)에서 정점이있는 불규칙한 다각형은 슈 일러스 공식에 따라 올바른 영역을 제공해야합니다.
각 테스트 사례에 대해 계산기는 다음과 같습니다.
- 테스트 좌표를 쉽게 입력 할 수 있습니다
- 올바른 영역을 계산하십시오
- 확인을위한 계산 단계를 표시합니다
모바일 장치 최적화
지오메트리 계산기가 완전히 반응을 보이게하려면 다음과 같은 향상을 추가 할 수 있습니다.
- 캔버스 상호 작용에 대한 터치 지원
- 다른 화면 크기에 적응하는 반응 형 레이아웃
- 작은 화면에 대한 단순화 된 인터페이스
이러한 추가로 계산기는 스마트 폰 및 태블릿에서 사용할 수 있으므로 모든 장치의 사용자가 액세스 할 수 있습니다.
추가 향상
지오메트리 영역 계산기를 더욱 강력하게 만들려면 이러한 추가 기능을 구현하는 방법을 고려하십시오.
사전 설정 모양
버튼을 추가하여 다음과 같은 공통 모양을 신속하게 만듭니다.
- 정사각형
- 구형
- 삼각형
- 원 (일반 다각형으로 근사)
- 일반 다각형 (국방부, 육각형 등)
원에 대한 면적 계산
다음을 사용하여 원 영역을 처리하도록 계산기를 확장하십시오.
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}주변 계산
다각형의 주변을 계산하기 위해 기능 추가 :
function calculatePolygonPerimeter(vertices) {
let perimeter = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
const dx = vertices[j].x - vertices[i].x;
const dy = vertices[j].y - vertices[i].y;
perimeter += Math.sqrt(dx * dx + dy * dy);
}
return perimeter;
}다각형 저장 및 로딩
다각형 구성을 저장하고로드하기위한 로컬 스터를 구현하십시오.
// Save polygon
function savePolygon(name) {
const polygonData = JSON.stringify(points);
localStorage.setItem(`polygon_${name}`, polygonData);
}
// Load polygon
function loadPolygon(name) {
const polygonData = localStorage.getItem(`polygon_${name}`);
if (polygonData) {
points = JSON.parse(polygonData);
updateCoordinateInputs();
redrawCanvas();
}
}실제 응용 프로그램
형상 영역 계산기가 귀중한 솔루션을 제공하는 다양한 실제 응용 프로그램
JavaScript Geometry 영역 계산기에는 다양한 실제 응용 프로그램이 있습니다.
웹 개발
- 대화식지도 및 플롯 시각화
- 토지 측량 응용 프로그램
- 부동산 계획 도구
- 룸 레이아웃 및 설계 응용 프로그램
교육
- 기하학적 원칙을 상호 작용합니다
- 수학적 개념 시각화
- 대화식 학습 리소스 생성
게임 개발
- 게임 객체에 대한 충돌 감지
- 레벨 설계 및 환경 창출
- 게임 세계의 절차 적 생성
결론
이 포괄적 인 자습서에서는 JavaScript를 사용하여 강력한 대화식 지오메트리 영역 계산기를 구축했습니다.우리의 계산기는 다음과 같습니다.
- 떼 공식을 사용하여 다각형의 면적을 정확하게 계산하십시오.
- 모양을 만들고 수정하기위한 직관적 인 시각적 인터페이스 제공
- 정확한 측정을 위해 수동 좌표 입력을 지원합니다
- 다른 측정 단위로 변환합니다
- 교육 목적으로 자세한 계산 단계를 보여줍니다
우리가 다루었던 원리와 기술과 같은 지오메트리, Shoelace 알고리즘, 캔버스 조작 및 사용자 인터페이스 설계는이 특정 프로젝트를 넘어 확장되는 귀중한 기술입니다.데이터 시각화에서 대화식 응용 프로그램에 이르기까지 다양한 웹 개발 문제에 적용 할 수 있습니다.
이 지오메트리 계산기를 구축하면 유용한 도구를 만들뿐만 아니라 수학 개념과 JavaScript에서의 구현에 대한 이해가 심화되었습니다.추가 기능으로 계산기를 확장하거나 성능을 최적화하거나 자신의 프로젝트에 통합하십시오.
행복한 코딩!