자바스크립트 카운팅
JavaScript는 최근 웹 개발을 위한 스크립팅 언어로 매우 인기를 얻고 있습니다. 우리는 JavaScript를 사용하여 수많은 일이나 프로젝트를 수행할 수 있으며 이를 달성하기 위한 많은 기능을 제공합니다.
자바스크립트 카운팅
계산은 일상 생활에서 우리에게 매우 중요합니다. 프로그래밍 언어를 사용하여 우리는 사물을 단순화하기 위해 다양한 것을 셀 수 있습니다.
JavaScript는 또한 다양한 활동에 대한 계산을 수행하는 기능을 제공합니다. 따라서 이를 통해 많은 구현을 더 쉽게 구축할 수 있습니다.
0에서 10까지 숫자를 세는 간단한 코드를 시도해 봅시다. 목표를 달성하기 위해 for 루프를 사용할 것입니다.
for (let count = 0; count <= 10; count++) {
console.log(count);
}
위의 코드는 0을 포함하여 0에서 10까지 계산됩니다. 코드를 실행하면 아래와 같은 출력이 표시됩니다.
출력:
보시다시피 코드는 시작 번호와 끝 번호를 모두 포함하여 1에서 10까지의 숫자를 인쇄합니다.
짝수를 원하면 위의 코드를 변경할 수 있습니다. 아래 수정된 코드를 참조하세요.
for (count = 0; count <= 10; count += 2) {
console.log(count);
}
이제 이 코드를 실행하여 결과를 확인해 봅시다.
출력:
위의 출력에서 볼 수 있듯이 0과 10을 모두 포함하여 0에서 10까지의 모든 짝수를 얻습니다. 모든 홀수가 필요한 경우 시작 값을 1로 변경하고 아래와 같이 코드를 실행할 수 있습니다.
for (count = 1; count <= 10; count += 2) {
console.log(count);
}
1을 포함하여 한도(1에서 10) 내의 모든 짝수를 제공합니다.
출력:
그래서 그것들은 JavaScript에서 계산의 주요 응용 프로그램입니다. 이제 다른 예를 들어 보겠습니다.
버튼을 사용하여 증가시킬 수 있는 카운터가 필요하다고 상상해 보십시오. HTML의 도움으로 JavaScript를 사용하는 계산 개념으로 이 목표를 빠르게 달성할 수 있습니다.
먼저 <input> 태그를 사용하여 버튼과 텍스트 상자를 만들어야 합니다. 텍스트 상자는 숫자를 표시하는 것이고, 버튼은 마우스 클릭 시 숫자가 증가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counting</title>
</head>
<body>
<div>
<!-- Creating the text box -->
<input type="text" value="0" id="countVal" readonly>
<!-- Creating the increase button -->
<input type="button" value="+" onclick="increase()">
</div>
<script src="main.js"></script>
</body>
</html>
위의 코드에서 ID가 countVal이고 시작 값이 0인 텍스트 상자를 작성해야 합니다. 또한 읽기 전용 속성을 사용하여 편집할 수 없도록 했습니다.
그런 다음 마우스 클릭 시 increase() 함수를 통해 값을 증가시키는 버튼을 생성했습니다.
위의 코드는 아래 결과를 표시합니다.
출력:
이제 별도의 파일에 JavaScript 코드를 구현하여 버튼을 대화형으로 만들 수 있습니다.
let count = 0;
let countValues = document.getElementById('countVal');
// The function to increase the count
function increase() {
count++;
countValues.value = count;
}
먼저 카운팅 프로세스를 돕기 위해 count라는 변수를 선언했습니다. 그런 다음 getElementById() 메서드를 사용하여 스크립트 파일에서 텍스트 상자로 값을 전달했습니다.
그 후 getElementById() 메서드는 countValues라는 변수에 할당되었습니다.
버튼이 예상대로 동작하도록 만들기 위해 increase() 함수를 만들었습니다. 사용자가 버튼을 클릭할 때마다 카운트 값이 하나씩 증가한 다음 해당 값을 텍스트 상자의 값에 할당합니다.
이제 코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다.
출력:
count 변수의 값은 위와 같이 버튼을 클릭할 때마다 증가합니다.
값을 낮추는 버튼을 하나 더 추가하고 별도의 기능을 구현하여 작업을 수정해 보겠습니다.
<input type="button" value="-" onclick="decrease()">
<div> 태그 안에 위의 코드를 추가할 수 있으며 여기에 완전한 HTML 코드가 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counting</title>
</head>
<body>
<div>
<!-- Creating the text box -->
<input type="text" value="0" id="countVal" readonly>
<!-- Creating the increase button -->
<input type="button" value="+" onclick="increase()">
<!-- Creating the decrease button -->
<input type="button" value="-" onclick="decrease()">
</div>
<script src="main.js"></script>
</body>
</html>
그러면 다음과 같이 해당 버튼에 JavaScript 기능을 구현할 수 있습니다.
function decrease() {
count--;
countValues.value = count;
}
전체 자바스크립트 코드:
let count = 0;
let countValues = document.getElementById('countVal');
// The function to increase the count
function increase() {
count++;
countValues.value = count;
}
// The function to decrease the count
function decrease() {
count--;
countValues.value = count;
}
코드를 실행하면 아래와 같은 예상 출력을 얻을 수 있습니다.
출력:
위 출력에서와 같이 감소 버튼을 누를 때마다 숫자가 1씩 감소합니다.
결론
이 글에서는 JavaScript를 사용하여 여러 사용 사례에 대한 계산 개념을 적용하는 방법에 대해 논의했습니다. 이를 달성하기 위해 for 루프를 사용했고 예상되는 출력을 얻었습니다.
또한 텍스트 상자와 두 개의 버튼을 사용하여 마우스 클릭 시 값을 늘리거나 줄이는 다른 사용 사례를 살펴보았습니다. 우리는 버튼을 만들기 위해 HTML을 사용했고, 버튼을 대화식으로 만드는 두 가지 기능이 있는 JavaScript 코드를 구현했습니다.
우리는 더 많은 방법으로 다양한 활동에 대한 계산 개념을 적용할 수 있습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.