2022년 JavaScript, HTML 및 CSS를 사용하여 계산기 만들기
게시 됨: 2021-01-02새로운 프로그래밍 언어를 배우든 개발 프레임워크를 배우든 실제 프로젝트에서 작업해야 할 때가 옵니다. 주제를 진행하면서 언어에 대한 기술과 이해도를 테스트해야 합니다. 새로 배운 기술이나 프레임워크를 사용하여 프로젝트를 구축하는 것은 좋은 생각입니다. 자신의 지식으로 무엇을 만들어야 하는지에 대한 아이디어가 온라인에 많이 있습니다.
가장 일반적으로 발견되는 제안에는 JavaScript의 계산기 및 할 일 목록이 포함됩니다. 쉬운 것처럼 보이지만 이러한 프로젝트 작업을 시작하면 상당한 작업이 될 수 있습니다. 여기에서 우리는 당신을 위해 쉽고 논리적일 뿐만 아니라 이벤트를 만들 것입니다.
시작해 볼까요?
목차
다른 모든 것보다 먼저 논리
프로젝트 작업을 시작할 때 계산기든 할 일 목록이든 가장 먼저 식별해야 하는 것은 논리입니다.
계산기는 어떻게 작동합니까?
- 계산기에 제공된 숫자 키를 사용하여 두 개 이상의 숫자(임의의 숫자)를 더합니다.
- 그런 다음 이 숫자에 대해 기본 산술 기능(예: 덧셈, 뺄셈, 곱셈 및 나눗셈)을 수행합니다.
- 계산기는 올바른 솔루션을 계산하고 제공할 수 있어야 합니다.
이것은 계산기 도구의 전제입니다. 따라서 키패드, 디스플레이 장치 및 기능 요소가 필요합니다.
"같음" 버튼은 답을 평가하고 "지우기" 버튼은 계산기 디스플레이의 모든 입력을 제거합니다.
세계 최고의 대학에서 온라인 소프트웨어 개발 과정 을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.
프로젝트 다루기: 코드 작성의 핵심
바로 코드로 향하는 대신 새 프로젝트를 처리하는 방법을 배워야 합니다. 두 가지가 준비되어 있습니다. 논리와 프론트 엔드 기술(예: JavaScript, HTML 및 CSS)에 대한 기본 이해입니다.
JavaScript를 사용 하여 계산기 작성을 시작하기 전에 다음이 필요합니다.
- 세 가지 기술을 모두 사용하여 프로젝트를 구축하는 데 도움이 되는 통합 개발 환경입니다.
- 코드를 테스트하고 버그를 제거하는 데 도움이 되는 로컬 서버입니다. 결과적으로 애플리케이션을 더 빠르고 민첩하게 시작할 수 있습니다.
#1 HTML 시작하기
첫 번째 단계는 HTML을 사용하여 손을 약간 더럽혀 계산기의 개요를 작성하는 것입니다.
계산기에는 0에서 9까지의 버튼이 10개 있습니다. HTML은 각 숫자에 대한 키를 만드는 역할을 합니다.
이 외에도 JavaScript를 사용하여 계산기를 작성할 때 HTML을 사용하여 다양한 산술 함수에 대한 별도의 키를 생성해야 합니다 .
HTML을 사용하여 버튼을 추가하여 입력한 숫자나 결과를 표시하고 표시를 지울 수 있습니다.
계산기의 시각적 단위는 전적으로 HTML과 CSS에 의존하며, 그 중 버튼과 해당 ID는 HTML을 사용하여 만들어야 합니다.
상용구 코드
<!DOCTYPE HTML>
<html lang="ko">
<머리>
<메타 문자 집합=”UTF-8″>
<메타 이름=”뷰포트” 콘텐츠=”너비=장치 너비, 초기 크기=1.0″>
<link rel="스타일시트" type="text/css" href="css/styles.css">
<title>계산기</title>
</head>
<본체>
계산기 개요를 만들기 위한 실제 코드
(
<!– 계산기 –>
<div class="계산기">
<!– 표시 –>
<입력 유형=”텍스트” 클래스=”디스플레이” 비활성화>
<!– 키 –>
<div class="키">
<!– 4행의 키 –>
<div 클래스 = "행">
<버튼 값=”7″>7</버튼>
<버튼 값=”8″>8</버튼>
<버튼 값=”9″>9</버튼>
<버튼 값=”+” 클래스=”연산자”>+</버튼>
</div>
<div 클래스 = "행">
<버튼 값=”4″>4</버튼>
<버튼 값=”5″>5</버튼>
<버튼 값=”6″>6</버튼>
<버튼 값=”-” 클래스=”연산자”>-</버튼>
</div>
<div 클래스 = "행">
<버튼 값=”1″>1</버튼>
<버튼 값=”2″>2</버튼>
<버튼 값=”3″>3</버튼>
<버튼 값=”*” 클래스=”연산자”>*</버튼>
</div>
<div 클래스 = "행">
<버튼 값=”C” 클래스=”연산자”>C</버튼>
<버튼 값=”0″>0</버튼>
<버튼 값=”/” 클래스=”연산자”>/</버튼>
<버튼 값=”=” 클래스=”연산자”>=</버튼>
</div>
</div>
</div>
<!– 계산기 본문 끝 –>
<스크립트 유형=”텍스트/자바스크립트” src=”js/script.js”></script>
</바디>
</html>
배우기: 초보자를 위한 Github의 상위 20개 Javascript 프로젝트
#2 CSS를 사용한 스타일
계산기의 구조를 정의했으면 인라인 CSS 요소를 사용하여 계산기의 스타일을 지정하고 시각적으로 매력적이고 사용하기 쉽게 만듭니다.
인라인 CSS는 앱 모양을 디자인하고 스타일을 지정할 때 탁월하지만 SEO 친화적이지 않을 수 있습니다. 이 외에도 동일한 루트 디렉토리에 태그를 지정하여 외부 CSS 요소를 사용할 수도 있습니다. 헤드 섹션 내의 <style></style> 태그 내에 있는 내부 또는 포함된 CSS 요소를 사용할 수도 있습니다.
여기에서 계산기 스타일을 지정하는 데 사용할 수 있는 코드를 살펴보겠습니다.
(원하는 경우 이 코드에 대한 변형을 만들 수 있습니다.)
/* 공통 스타일 */
* {
패딩: 0;
여백: 0;
}
신체 {
폭: 100vw;
높이: 100vh;
오버플로: 숨김;
디스플레이: 플렉스;
justify-content: 센터;
항목 정렬: 가운데;
배경색: #222831;
글꼴 패밀리: sans-serif;
}
/* 공통 스타일 끝 */
/* 계산기 */
.계산기 {
너비: 300px;
패딩 하단: 15px;
테두리 반경: 7px;
배경색: #000;
상자 그림자: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
/* 계산기 스타일 끝 */
/* 표시하다 */
.표시하다 {
너비: 100%;
높이: 80px;
테두리: 없음;
상자 크기: 테두리 상자;
패딩: 10px;
글꼴 크기: 2rem;
배경색: #00ff44;
색상: #000;
텍스트 정렬: 오른쪽;
경계-상단-좌측 반경: 7px;
테두리-위-오른쪽-반경: 7px;
}
/* 표시 스타일 끝 */
/* 열 */
.열 {
디스플레이: 플렉스;
justify-content: 사이의 공백;
}
/* 행 스타일 끝 */
/* 버튼 */
버튼 {
너비: 50px;
높이: 50px;
경계 반경: 50%;
테두리: 없음;
개요: 없음;
글꼴 크기: 1.5rem;
배경색: #222;
색상: #fff;
여백: 10px;
}
버튼:호버 {
커서: 포인터;
}
/* 버튼 스타일 끝 */
/* 운영자 */
.운영자 {
배경색: #00ff44;
색상: #000;
}
/* 연산자 스타일 끝 */
#3 JavaScript로 기능 추가하기
이제 JavaScript를 사용하여 계산기를 구축할 때 보이는 측면에 대해 자세히 논의했습니다 . 계산기를 작동시키고 계산 작업을 수행하는 데 도움이 되는 스크립트를 작성해 보겠습니다. JS 코드 빌드와 관련된 몇 가지 단계를 이해하면 코드를 더 빠르게 개발하는 데 도움이 됩니다.
- JavaScript를 사용하여 개별 기능에 대해 생성한 HTML 태그를 호출해야 합니다. 선택기를 사용하여 이러한 각 입력을 호출하고 변수에 저장합니다. 각 기능에 대해 변수가 필요합니다. 예를 들어 표시, 숫자, 지우기 기능 및 같음 기능에 대한 별도의 변수가 있습니다. 이 경우 getElementbyID() 함수를 사용할 수 있습니다.
- 20+30의 간단한 계산을 수행하려는 경우 위에서 언급한 방법을 사용하여 먼저 20을 호출합니다. 30과 산술 함수를 호출하기 전에 이전에 호출한 20을 어딘가에 저장해야 합니다. 코드는 계산을 쉽게 하기 위해 숫자를 임시로 저장할 공간을 만들어야 합니다. 빈 배열은 숫자를 문자열로 유지합니다. eval()을 사용하여 다른 숫자와 산술 함수를 추가하면 숫자를 평가하고 답을 얻을 수 있습니다.
- 계산기의 버튼을 클릭하면 표시되거나 평가되는 일부 결과가 필요합니다. 이를 위해 코드에 이벤트 리스너를 추가해야 합니다. 이렇게 하면 버튼이 클릭을 수신합니다. 이벤트 리스너에 기능을 추가하면 클릭 소리에 대한 작업을 자동으로 수행합니다.
- 디스플레이 단위는 클릭한 버튼의 값을 반환해야 합니다. 이벤트가 발생한 요소의 값을 반환하므로 event.target 개체를 사용할 수 있습니다. 예를 들어, 숫자 "1"을 클릭하자마자 표시되기를 원합니다. 이를 위해서는 숫자를 변수 형태로 저장해야 합니다. "if" 함수를 사용하여 기존 변수를 비교하여 0인지 아닌지 식별합니다. 0인 경우 빈 문자열에 추가하여 숫자가 0으로 시작하지 않도록 합니다. 마지막으로 "1" 키의 내용을 표시 변수에 추가합니다. 결과적으로 숫자 키가 트리거되는 즉시 디스플레이 상자에 내용이 표시됩니다.
- 마지막으로 표시된 숫자에 수학 연산을 적용하는 데 도움이 되는 함수를 만들어야 합니다. JavaScript 의 계산기 가 수학적 계산을 쉽게 수행할 수 있는지 확인하십시오 . 이 기능을 활성화하려면 구문과 메서드를 조합하여 사용할 수 있습니다. 귀하의 정독을 위해 아래 JavaScript 요소에 대한 코드를 지정했습니다.
// 모든 버튼 선택
const 버튼 = document.querySelectorAll('버튼');
// <input type=”text” class=”display” disabled> 요소 선택
const 디스플레이 = document.querySelector('.디스플레이');
// 각 버튼에 eventListener 추가
button.forEach(기능(버튼) {
button.addEventListener('클릭', 계산);
});
// 계산 함수
함수 계산(이벤트) {
// 현재 클릭된 버튼 값
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// 디스플레이가 비어 있지 않은지 확인한 다음 계산만 수행
if (디스플레이 값 !== ”) {
// 표시할 답을 계산하고 표시합니다.
display.value = 평가(디스플레이.값);
}
} else if (clickedButtonValue === 'C') {
// 디스플레이에 있는 모든 항목 지우기
디스플레이 값 = ";
} 또 다른 {
// 그렇지 않으면 디스플레이에 연결
display.value += clickedButtonValue;
}
}
반드시 읽어야 함: Java 아키텍처 및 구성 요소 설명
합산
JavaScript로 계산기를 만들든 더 복잡한 프로젝트에서 작업하든 관계없이 내용을 논리적이고 해석된 방식으로 분해하는 것이 좋습니다. 이것은 정확한 구문을 도출하는 데 도움이 되며 유동적인 웹 애플리케이션으로 이어질 것입니다. 직접 코딩을 시작하는 대신 사용 중인 기술의 진정한 목적이 무엇인지 이해하려고 하면 코드로 연결됩니다.
Java, 전체 스택 소프트웨어 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 소프트웨어 개발 이그 제 큐 티브 PG 프로그램 - 전문가를 위해 설계되었으며 500 시간 이상의 엄격한 교육을 제공하는 전체 스택 개발 전문화를 확인하십시오. , 9개 이상의 프로젝트 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.
