JavaScript カウント
JavaScript は、Web 開発用のスクリプト言語として最近非常に人気が高まっています。 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 でのカウントの主なアプリケーションです。 では、別の例を試してみましょう。
ボタンを使用して増加できるカウンターが必要だと想像してください。 JavaScript と HTML の助けを借りてカウントの概念を使用すると、この目標をすばやく達成できます。
まず、<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>
上記のコードでは、countVal を ID として、0 を開始値としてテキスト ボックスを作成する必要があります。 また、read-only 属性を使用して編集不可にしました。
次に、マウス クリック時に 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() 関数を作成しました。 ユーザーがボタンをクリックするたびに、カウントの値が 1 ずつ増加し、その値がテキスト ボックスの値に割り当てられます。
ここで、コードを実行すると、以下の出力が得られます。
出力：
上記のように、ボタンをクリックするたびに 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;
}
完全な JavaScript コード:
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 ループを使用してそれらを達成し、期待される出力を得ました。
また、テキスト ボックスと 2つのボタンを使用して、マウス クリックで値を増減する別の使用例も調べました。 HTML を使用してそれらを作成し、ボタンをインタラクティブにする 2つの関数を含む 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.