Grundlegende Programmierkonzepte in JavaScript

Grundlegende Programmierkonzepte

Das Akkumulator-Konzept

Als Akkumulator bezeichnen wir eine spezielle Art von Variable, die während der Programmausführung variable Werte addiert oder subtrahiert. In jedem Zyklus einer Wiederholungsstruktur (Schleife) erhöht oder verringert sich der Wert der Akkumulator-Variable um den Inhalt eines anderen variablen Wertes.

Wiederholungsstrukturen (Schleifen)

Jedes Problem, das eine Wiederholungsstruktur erfordert, kann mit einer while-Schleife gelöst werden. Es gibt jedoch eine weitere Wiederholungsstruktur, deren Prämisse in bestimmten Situationen einfacher ist. Diese Struktur wird in Situationen eingesetzt, in denen wir im Voraus wissen, wie oft wir einen Block von Anweisungen ausführen möchten.

Beispiele:

• Laden von 10 Zahlen
• Eingabe der Jahrgangsstufen von 5 Studenten

Wir wissen im Voraus die Anzahl der Wiederholungen des Blocks.

Schließlich ist zu erwähnen, dass die Ausführung der break-Anweisung innerhalb einer Schleife einen sofortigen Ausstieg aus dieser Schleife bewirkt.

Syntax der for-Schleife

Die for-Schleife hat folgende Syntax:

for (<Initialisierung>; <Bedingung>; <Inkrement oder Dekrement>) {
    <Anweisungen>
}

Diese Wiederholungsstruktur hat drei Argumente:

1. Variable Initialisierung
2. Bedingung
3. Inkrement oder Dekrement der Variable

Ablauf einer for-Schleife

Die Ausführung erfolgt wie folgt:

1. Zuerst wird nur einmal das erste Argument (Initialisierung) ausgeführt. Normalerweise wird hier eine Variable initialisiert.
2. Der zweite Schritt ist die Bewertung der Bedingung. Ist sie wahr, wird der Anweisungsblock ausgeführt; andernfalls wird das Programm nach der Schleife fortgesetzt.
3. Der dritte Schritt ist die Ausführung der Anweisungen im Block.
4. Der vierte Schritt ist die Ausführung des dritten Arguments (Inkrement oder Dekrement).
5. Danach wird sukzessive vom zweiten bis zum vierten Schritt wiederholt.

Diese Art von Wiederholungsstruktur wird normalerweise verwendet, wenn wir die Anzahl der Wiederholungen des Blocks kennen.

Wichtiger Hinweis zur Syntax

Wichtig: Bitte beachten Sie, dass nach den drei Argumenten in der Klammer der for-Anweisung kein Semikolon steht. Ein Semikolon an dieser Stelle verursacht einen logischen und syntaktischen Fehler, der vom Browser möglicherweise nicht sofort als solcher gemeldet wird.

Funktionen: Code wiederverwenden

In der Programmierung ist es sehr häufig, dass eine bestimmte Berechnung oder ein bestimmter Vorgang, der durch eine Gruppe von Anweisungen definiert ist, mehrmals wiederholt werden muss, entweder innerhalb desselben Programms oder in anderen Programmen. Dies würde bedeuten, dass Sie diese Gruppe von Anweisungen jedes Mal neu schreiben müssten, was ineffizient ist.

Das mächtigste Werkzeug, das zur Verfügung steht, um den Aufwand zu verringern und die Arbeit in der Programmierung aufzuteilen, besteht darin, diese Gruppen von Anweisungen nur ein einziges Mal in Form einer Funktion zu schreiben.

Ein Programm kann komplex sein, und deshalb ist es wichtig, dass es gut strukturiert und für Menschen verständlich ist. Wenn eine Gruppe von Anweisungen eine wohldefinierte Aufgabe erfüllt, dann ist es gerechtfertigt, diese Anweisungen zu isolieren und daraus eine Funktion zu bilden, auch wenn es scheint, dass Sie sie nur einmal verwenden oder aufrufen.

Bisher haben wir gesehen, wie man ein Problem löst, indem man einen einzigen Algorithmus erstellt. Mit Funktionen können wir ein Programm in mehrere Teile segmentieren. Wenn wir mit einem Problem konfrontiert sind, schlagen wir einen Algorithmus vor, der aus kleineren Algorithmen bestehen kann.

Was ist eine Funktion?

Eine Funktion ist ein Satz von Anweisungen, die einen Teil des Problems lösen und aus verschiedenen Teilen eines Programms verwendet (aufgerufen) werden können. Sie hat einen Namen und Parameter.

Der Name dient dazu, die Funktion aufzurufen, d.h. wir rufen sie bei ihrem Namen auf. Parameter sind Werte, die an die Funktion gesendet werden und für die Lösung des Problems innerhalb der Funktion notwendig sind.

Die Funktion führt eine Operation mit den Parametern aus, die wir ihr senden. Sie kann eine Variable berechnen, eine Abfrage durchführen, Daten ändern, etwas ausgeben usw.

Selbst einfache Programme müssen oft fragmentiert werden.

Funktionen in JavaScript

Funktionen sind ein grundlegender Baustein in JavaScript.

Syntax einer JavaScript-Funktion

Sie haben die folgende Struktur:

function <Funktionsname> (argument1, argument2, ..., argumentN) {
    <Code der Funktion>
}

Der Name der Funktion sollte uns sagen, was ihr Zweck ist (Wenn die Funktion einen String erhält und zentriert, sollten wir sie vielleicht centrarTitulo nennen).

Wir werden sehen, dass eine Funktion stark in ihrer Struktur variieren kann: Sie kann Parameter haben oder nicht, einen Wert zurückgeben oder nicht, usw.

JavaScript ist Case-Sensitive

JavaScript ist case-sensitive (unterscheidet Groß- und Kleinschreibung). Wenn Sie eine Funktion mostrarTitulo nennen (d.h. das zweite Wort großschreiben), müssen Sie diesen Namen genau so respektieren, wenn Sie die Funktion aufrufen.

Es ist wichtig zu beachten, dass eine Funktion aufgerufen werden muss, damit ihr Code ausgeführt wird. Dies geschieht von außerhalb der Funktion über ihren Namen, gefolgt von Klammern (z.B. mostrarMensaje()).

Jedes Mal, wenn Sie eine Funktion aufrufen, werden alle darin enthaltenen Anweisungen ausgeführt. Wenn Sie die Funktion nicht aufrufen, werden die Anweisungen nie ausgeführt.

Eine Funktion können wir so oft wie nötig aufrufen. Funktionen ersparen uns das Schreiben von Code, der oft wiederholt wird, und ermöglichen es, unser Programm besser verständlich zu gestalten.

Funktionen mit Parametern

Das Programm beginnt mit der Ausführung des JavaScript-Codes, wo wir Variablen wie wert1 und wert2 definieren, und nicht dort, wo die Funktion definiert ist.

Nachdem die beiden Werte geladen wurden, wird die Funktion aufgerufen, und wir übergeben die Variablen wert1 und wert2 an die Funktion mostrarComprendidos (Beispielname).

Die Parameter x1 und x2 innerhalb der Funktion erhalten die Inhalte der Variablen wert1 und wert2, die beim Aufruf übergeben wurden.

Es ist wichtig zu beachten, dass wir die Funktion so oft aufrufen können, wie wir sie benötigen, mit unterschiedlichen Parameterwerten.

Formulare und Ereignisse

Die Verwendung von JavaScript in HTML-Formularen dient im Wesentlichen dazu, die eingegebenen Daten zu validieren. Diese Tätigkeit wird auf dem Client (im Browser) durchgeführt, im Gegensatz zur Verarbeitung der vom Benutzer eingegebenen Daten auf dem Server.

Diese Möglichkeit, kleine Programme im Browser auszuführen, vermeidet unnötigen Austausch zwischen Client und Server (Browser und Website) für einfache Validierungen.

Der Browser erzeugt für jedes Element, das auf der Seite erscheint, ein entsprechendes Objekt. Wir können dann über JavaScript auf diese Objekte zugreifen.

Der Hauptzweck ist die Interaktion mit Formular-Objekten und anderen Elementen wie Textfeldern (<input type="text"> für eine Zeile), Textbereichen (<textarea> für mehrere Zeilen) usw.

Unsere Aufgabe in JavaScript ist es, auf Ereignisse dieser Steuerelemente zu reagieren. Ein Ereignis ist eine Aktion, die ausgelöst wird, z.B. das Drücken einer Taste oder das Klicken auf einen Button.

Den Ereignissen von HTML-Objekten wird eine Funktion zugeordnet. Diese Funktion wird ausgeführt, wenn das jeweilige Ereignis ausgelöst wird.

Beispiel: Wenn ein Button geklickt wird, ruft dies eine Funktion auf, die eine Zählvariable um eins erhöht. Beachten Sie, dass wir die Zähler-Variable außerhalb der Funktion definieren, damit sie nicht jedes Mal, wenn das Ereignis ausgelöst wird, neu initialisiert wird.

Die alert()-Funktion erstellt ein kleines Fenster, das eine Nachricht anzeigt.

Formular-Steuerelemente: Button und Text

Bisher haben wir gesehen, wie man ein Formular mit einem Button-Steuerelement erstellt.

Nun fügen wir ein Steuerelement vom Typ Text (<input type="text">) hinzu, das es dem Benutzer ermöglicht, Text über die Tastatur einzugeben.

Jetzt wollen wir die Bedeutung der Vergabe eines Namens an ein Steuerelement in einem Formular sehen.

In diesem Beispiel (angenommenes HTML) haben wir vier Elemente:

• 1 Formular (<form>)
• 1 Button (<button> oder <input type="button">)
• 2 Textfelder (<input type="text">)

Das Ereignis wird ausgelöst, wenn Sie den Button drücken, der eine Funktion namens "zeigen" (oder ähnlich) aufruft.

Die Funktion "zeigen" greift auf die Inhalte der beiden Textfelder zu:

var nom = document.form1.nombre.value;
var ed = document.form1.edad.value;

Um dies zu verdeutlichen: Die Funktion speichert die Inhalte der Textfelder in zwei Hilfsvariablen (nom und ed).

Beachten Sie, wie wir über das Objektmodell auf die Elemente zugreifen: Zuerst das document-Objekt, dann das Formular, das wir erstellt haben, zugegriffen über seinen Namen (in diesem Fall form1), dann der Zugriff auf die einzelnen Steuerelemente innerhalb des Formulars, ebenfalls über ihre Namen (nombre und edad).

Schließlich, um auf den eingegebenen Text zuzugreifen, müssen wir die value-Eigenschaft angeben.