IT-Kurs JavaScript-Grundlagen 036_Syntaxstruktur

Anweisungen

JavaScript-Anweisungen (Statements) sind eine Gruppe von Befehlen, die zum Ausführen bestimmter Aufgaben verwendet werden.

Beispiel:

1
// Variablendeklaration
2
let userName = 'Hans';
3
let age = 18;
4

5
// Bedingte Anweisung
6
if (age >= 18) {
7
  console.log(userName + ' ist eine erwachsene Person');
8
} else {
9
  console.log(userName + ' ist eine minderjährige Person');
10
}
11

12
// Schleife
13
for (let i = 0; i < 5; i++) {
14
  console.log('Schleifenausgabe ' + (i + 1));
15
}
16

17
// Funktionsdefinition
18
function Hello(name) {
19
  return 'Hallo, ' + name + '!';
20
}
21

22
// Funktionsaufruf
23
let sayHello = Hello(userName);
24
console.log(sayHello);

Semikolon

In JavaScript ist das Semikolon (;) ein Anweisungsabschlusszeichen, das verwendet wird, um das Ende einer Anweisung zu markieren. Das Semikolon ist in den meisten Fällen optional, da der JavaScript-Interpreter versucht, automatisch Semikolons einzufügen (Automatic Semicolon Insertion, ASI), um den Code als syntaktisch korrekt zu analysieren. Es gibt jedoch einige Fälle, in denen ASI zu unerwartetem Verhalten führen kann, daher wird empfohlen, beim Schreiben von JavaScript-Code explizit Semikolons hinzuzufügen.

Wenn ein Semikolon erscheint, egal ob einzeilig oder mehrzeilig, endet diese Anweisung.

Beispiel:

1
alert('Hallo');alert('JavaScript!');

Wenn ein Zeilenumbruch (line break) vorhanden ist, kann das Semikolon in den meisten Fällen weggelassen werden.

Beispiel:

1
alert('Hallo')
2
alert('JavaScript!')

1
alert('Hallo');
2
alert('JavaScript!')

1
alert('Hallo')
2
alert('JavaScript!');

1
alert('Hallo');alert('JavaScript!')

Wenn Anweisungsblöcke oder Codeblöcke auftreten, werden beim Zeilenumbruch keine Semikolons automatisch hinzugefügt. Und Leerzeichen und Zeilenumbrüche werden ignoriert.

Beispiel:

1
alert
2
(
3
1+
4
   2
5
   +1);

Kommentare

In JavaScript werden Kommentare verwendet, um Erklärungen und Anmerkungen im Code hinzuzufügen. Dieser Text hat keine tatsächliche Auswirkung auf die Ausführung des Programms. Kommentare sind sehr nützlich, um die Lesbarkeit des Codes, die Zusammenarbeit und das Debugging zu verbessern.

Einzeilige Kommentare

Mit dem Symbol // können Sie einzeilige Kommentare erstellen. Alles von // bis zum Zeilenende wird als Kommentar behandelt.

Beispiel:

1
alert('Hallo JavaScript!'); // Einzeiliger Kommentar nach der Anweisung
2
// Einzeiliger Kommentar in einer eigenen Zeile

Mehrzeilige Kommentare

Mit /* beginnend und */ endend können Sie mehrzeilige Kommentare erstellen. Aller Text zwischen diesen beiden Symbolen wird als Kommentar behandelt.

1
/*
2
  Dies ist ein mehrzeiliger Kommentar
3
  kann sich über mehrere Zeilen erstrecken
4
*/
5
alert('Hallo');
6
/*
7
Mehrzeilige Kommentare können auch verwendet werden, um einen Codeblock auszukommentieren, der folgende Code wird nicht ausgeführt
8
alert('JavaScript!');
9
*/

Dialogfelder

JavaScript bietet mehrere Dialogfelder für einfache Interaktionen mit dem Benutzer, darunter alert, confirm und prompt. Diese Dialogfelder ermöglichen es Ihnen, dem Benutzer Informationen anzuzeigen, Fragen zu stellen oder Eingaben zu akzeptieren. Wenn ein Dialogfeld angezeigt wird, wird die Codeausführung angehalten, bis der Benutzer das Dialogfeld schließt.

alert Dialogfeld

Das alert Dialogfeld wird verwendet, um dem Benutzer eine Nachricht anzuzeigen und zu warten, bis der Benutzer auf die Schaltfläche “OK” klickt.

Beispiel:

1
alert('Hallo internes JavaScript!');

Effekt:

confirm Dialogfeld

Das confirm Dialogfeld wird verwendet, um dem Benutzer ein Dialogfeld mit Bestätigungs- und Abbrechen-Schaltflächen anzuzeigen, normalerweise verwendet, um den Benutzer zu fragen, ob er eine bestimmte Aktion ausführen möchte.

Beispiel:

1
    let yesNo = confirm("Lernen Sie JavaScript?");
2
    alert(yesNo);

Effekt:

prompt Dialogfeld

Das prompt Dialogfeld wird verwendet, um dem Benutzer ein Dialogfeld mit einem Eingabefeld anzuzeigen, normalerweise verwendet, um Benutzereingaben zu akzeptieren.

Beispiel:

1
    let name = prompt("Bitte geben Sie Ihren Namen ein:", '');
2
    alert(name);

Effekt:

Entwickler-Tools

JavaScript-Entwickler-Tools sind eine Reihe von in Browser integrierten Tools, die Entwicklern beim Debuggen, Analysieren und Optimieren von JavaScript-Code helfen. Verschiedene Browser bieten unterschiedliche Entwickler-Tools. Im Folgenden finden Sie die JavaScript-Entwickler-Tools gängiger Browser:

Chrome Entwickler-Tools

Öffnen Sie den Chrome-Browser und drücken Sie Ctrl + Shift + I (Windows/Linux) oder Cmd + Option + I (Mac), um die Chrome Entwickler-Tools zu öffnen.

Klicken Sie mit der rechten Maustaste im Browser, wählen Sie im Popup-Menü “Untersuchen”, um die Chrome Entwickler-Tools zu öffnen.

Wie im Bild:

Klicken Sie auf das Symbol “Einstellungen und mehr” im Browser, wählen Sie “Weitere Tools” — “Entwicklertools”, um die Chrome Entwickler-Tools zu öffnen.

Wie im Bild:

Hauptfunktionen und Panels:

• Console (Konsole): Wird zum Ausführen und Debuggen von JavaScript-Code verwendet, zum Anzeigen von Ausgaben, Fehlern und Warnmeldungen.
• Sources (Quellen): Bietet Code-Editor, Haltepunkt-Einstellung, Überwachungsausdrücke und andere Funktionen zum Debuggen von JavaScript-Quellcode.
• Network (Netzwerk): Zeigt die von der Seite initiierten Netzwerkanfragen an, überprüft Anfrage- und Antwortdetails.
• Performance (Leistung): Analysiert die Seitenleistung, zeigt Ladezeiten, CPU-Auslastung usw. an.
• Application (Anwendung): Zeigt und debuggt Local Storage, Session Storage, Cookies usw. an.
• Elements (Elemente): Zeigt und bearbeitet den DOM-Baum, ändert CSS-Stile.

Schlüsselwörter

JavaScript-Schlüsselwörter sind reservierte Wörter in der JavaScript-Programmiersprache, die einen besonderen Zweck haben. Sie werden verwendet, um Variablen, Funktionen, Anweisungen usw. zu identifizieren. Diese Schlüsselwörter können nicht als Bezeichner (z. B. Variablennamen, Funktionsnamen usw.) verwendet werden.

Hier sind einige JavaScript-Schlüsselwörter:

1. Grundlegende Schlüsselwörter:

• break
• case
• catch
• continue
• debugger
• default
• delete
• do
• else
• false
• finally
• for
• function
• if
• in
• instanceof
• new
• null
• return
• switch
• this
• throw
• true
• try
• typeof
• undefined
• var
• void
• while
• with

2. Reservierte Schlüsselwörter (haben im strikten Modus eine besondere Verwendung):

• implements
• interface
• package
• private
• protected
• public
• static
• yield

3. Mit ECMAScript 6 (ES6) eingeführte Schlüsselwörter:

• class
• const
• export
• extends
• import
• super