JavaScript-Zählung
JavaScript ist in letzter Zeit als Skriptsprache für die Webentwicklung sehr beliebt geworden. Wir können zahlreiche Dinge oder Projekte mit JavaScript durchführen, und es bietet viele Funktionen, um dies zu erreichen.
JavaScript-Zählung
Zählen ist für uns im täglichen Leben sehr wichtig. Mithilfe von Programmiersprachen können wir verschiedene Dinge zählen, um die Dinge zu vereinfachen.
JavaScript stellt uns auch die Funktionalitäten zur Verfügung, um Zählungen für verschiedene Aktivitäten durchzuführen. Daher sind viele Implementierungen damit einfacher zu erstellen.
Lassen Sie uns einen einfachen Code ausprobieren, bei dem wir Zahlen von 0 bis 10 zählen. Wir werden eine for-Schleife verwenden, um das Ziel zu erreichen.
for (let count = 0; count <= 10; count++) {
console.log(count);
}
Der obige Code zählt von 0 bis 10, einschließlich 0. Wir erhalten die unten gezeigte Ausgabe, wenn wir den Code ausführen.
Ausgang:
Wie Sie sehen können, druckt der Code die Zahlen von 1 bis 10, einschließlich Start- und Endnummer.
Wir können den obigen Code ändern, wenn wir gerade Zahlen haben möchten. Siehe den unten modifizierten Code.
for (count = 0; count <= 10; count += 2) {
console.log(count);
}
Lassen Sie uns nun versuchen, diesen Code auszuführen, um das Ergebnis zu sehen.
Ausgang:
Wie in der obigen Ausgabe gezeigt, erhalten wir alle geraden Zahlen von 0 bis 10, einschließlich 0 und 10. Wenn wir alle ungeraden Zahlen benötigen, können wir den Startwert auf 1 ändern und den Code wie unten ausführen.
for (count = 1; count <= 10; count += 2) {
console.log(count);
}
Es gibt uns alle geraden Zahlen innerhalb von Grenzen (1 bis 10), einschließlich 1.
Ausgang:
Das sind also die Hauptanwendungen des Zählens in JavaScript. Lassen Sie uns nun ein anderes Beispiel ausprobieren.
Stellen Sie sich vor, wir brauchen einen Zähler, der per Knopfdruck erhöht werden kann. Dieses Ziel können wir mit dem Zählkonzept mittels JavaScript mit Hilfe von HTML schnell erreichen.
Zuerst sollten wir eine Schaltfläche und ein Textfeld mit dem <input>-Tag erstellen. Das Textfeld soll die Nummer anzeigen, und die Schaltfläche erhöht die Nummer bei einem Mausklick.
<!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>
Im obigen Code müssen wir ein Textfeld mit countVal als ID und 0 als Startwert bauen. Außerdem haben wir es mit dem Attribut read-only unbearbeitbar gemacht.
Dann haben wir eine Schaltfläche erstellt, um den Wert durch die Funktion increase() per Mausklick zu erhöhen.
Der obige Code zeigt das folgende Ergebnis an.
Ausgang:
Jetzt können wir den JavaScript-Code in einer separaten Datei implementieren, um die Schaltfläche interaktiv zu machen.
let count = 0;
let countValues = document.getElementById('countVal');
// The function to increase the count
function increase() {
count++;
countValues.value = count;
}
Zunächst haben wir eine Variable namens count deklariert, um den Zählprozess zu unterstützen. Dann haben wir die Methode getElementById() verwendet, um die Werte aus der Skriptdatei an das Textfeld zu übergeben.
Danach hat die Methode getElementById() eine Variable namens countValues zugewiesen.
Damit sich die Schaltfläche wie erwartet verhält, haben wir eine increase()-Funktion erstellt. Jedes Mal, wenn ein Benutzer auf die Schaltfläche klickt, wird der Wert der Anzahl um eins erhöht, und dieser Wert wird dann dem Wert im Textfeld zugewiesen.
Wenn wir nun den Code ausführen, können wir die folgende Ausgabe haben.
Ausgang:
Der Wert der Variable count erhöht sich, wie oben, jedes Mal, wenn wir auf die Schaltfläche klicken.
Ändern wir unsere Arbeit, indem wir eine weitere Schaltfläche hinzufügen, um den Wert zu verringern, und eine separate Funktion implementieren.
<input type="button" value="-" onclick="decrease()">
Wir können den obigen Code in das <div>-Tag einfügen, und hier ist der vollständige HTML-Code.
<!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>
Dann können wir die JavaScript-Funktion wie folgt für diese Schaltfläche implementieren.
function decrease() {
count--;
countValues.value = count;
}
Vollständiger JavaScript-Code:
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;
}
Wenn wir den Code ausführen, erhalten wir unten unsere erwartete Ausgabe.
Ausgang:
Wie in der obigen Ausgabe wird die Zahl jedes Mal, wenn wir auf die Schaltfläche zum Verringern klicken, um eins verringert.
Abschluss
In diesem Artikel haben wir die Verwendung von JavaScript diskutiert, um das Zählkonzept für mehrere Anwendungsfälle anzuwenden. Wir haben eine for-Schleife verwendet, um sie zu erreichen, und die erwarteten Ergebnisse erhalten.
Außerdem haben wir uns einen anderen Anwendungsfall angesehen, bei dem wir ein Textfeld und zwei Schaltflächen verwendet haben, um den Wert bei Mausklicks zu erhöhen und zu verringern. Wir haben HTML verwendet, um sie zu erstellen, und einen JavaScript-Code mit zwei Funktionen implementiert, um die Schaltflächen interaktiv zu machen.
Wir können das Zählkonzept für verschiedene Aktivitäten in vielen weiteren Methoden anwenden.
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.