JavaScrpt - Grundlagen by Jens-Thomas Meyer

Hintergrund

jtmeyer — 2023-01-30 14:46:42 UTC

JavaScript (kurz JS) wurde 1995 von Netscape Communications entwickelt. Netscape hatte 1994 den Netscape Webbrowser entwickelt und hatte im darauf folgenden Jahr mit LiveScript eine Umgebung in den Browser integriert, die den Benutzern mehr Interaktivität wie das Ausfüllen von Formularen bot.
1996 entstand wurde der Name LiveScript in JavaScript aufgrund einer Kooperation von Netscape mit SUN Microsystems geändert, weil der Name Java einen höheren Bekanntheitsgrad hatte. Beide Sprachen sind jedoch voneinander unabhängig.
SUN ist ein Hersteller von Großrechnern und Workstations. SUN entwickelt Java und den Webbrowser Opera.

Grundlagen von Funktionen

jtmeyer — 2023-01-30 16:44:46 UTC

Gültigkeitsbereiche

jtmeyer — 2023-01-30 16:47:14 UTC

Funktionsausdrücke, Funktionsdeklaration

jtmeyer — 2023-01-30 16:48:31 UTC

Funktionen mit Parametern

jtmeyer — 2023-01-30 16:49:20 UTC

if-Bedingung

jtmeyer — 2023-01-30 16:49:51 UTC

Braket-Notation

jtmeyer — 2023-01-30 16:51:10 UTC

Eigenschaften hinzufügen, ändern oder entfernen

jtmeyer — 2023-01-30 16:52:26 UTC

Call-by-value, Call-by-reference

jtmeyer — 2023-01-30 16:53:43 UTC

Grundlagen von Objekten

jtmeyer — 2023-01-30 16:54:50 UTC

Methoden

jtmeyer — 2023-01-30 16:55:20 UTC

Objekte als Konstanten

jtmeyer — 2023-01-30 16:56:11 UTC

Objekte als Rückgabewerte

jtmeyer — 2023-01-30 16:56:48 UTC

Objekte in Funktionen

jtmeyer — 2023-01-30 16:57:24 UTC

Objekte vergleichen

jtmeyer — 2023-01-30 16:57:40 UTC

Verschachtelte Objekte

jtmeyer — 2023-01-30 16:58:35 UTC

if-else-Bedingung

jtmeyer — 2023-01-31 17:02:43 UTC

if-else if-Bedingung

jtmeyer — 2023-01-31 17:03:25 UTC

Definition von Datentypen

jtmeyer — 2023-02-03 07:19:01 UTC

JavaScript kennt die Datentypen:

string,
number und
boolean.

JavaScript erkennt diese Datentypen bei der Vereinbarung selbstständig.

string:
Bei der Vereinbarung:

let varText="meinText";

wird der Datentyp string von JavaScript erkannt. Strings werden immer in Anführungszeichen gesetzt. Die Definition wird mit einem ";" (Semikolon) abgeschlossen.

number:
Durch

let meineZahl = 23.79;

wird eine number vereinbart. JavaScript verwendet für die Nachkommastelle einen "." (Punkt).

boolean:
Beim Datentyp boolean gibt es nur die beiden Zustände true und false. Mit:

let meinBoolean = true;

wird der boolean vereinbart.

Probleme

jtmeyer — 2023-02-03 07:28:37 UTC

Durch die Operation:

meineZweiteVar = meinText + meineZahl;

entsteht ein Text und keine Zahl. Beispiel:

let zahlA = 3;
let zahlB = 5;
let zahlC = "zahlA" + zahlB;

entsteht nicht zahlC=8 sondern zahlC=35 als Datentyp string.

Fehlersuche beim Programmieren mit JavaScript

jtmeyer — 2023-02-03 07:48:04 UTC

Jeder, der schon einmal mit höheren Programmiersprachen(Python, C++, C#, Java, JavaScript etc.) macht irgendwann die Erfahrung einer stundenlangen Fehlersuche von der man sich nicht "lösen" kann. Die häufigsten Fehler sind hierbei nicht Syntaxfehler (Fehler des Programmcodes), sondern Tippfehler!

Falsche Anweisungen lassen sich erkennen, Tippfehler dagegen nur schwer nach längerer Suche.

Das JavaScript Programm stoppt beim Auftreten eines Fehlers, d.h. nachfolgende Befehle werden nicht mehr ausgeführt.

Mit der strikten Programmkontrole

"use strict";

erhälst du Fehlermeldungen.

Fehlersuche im Browser googleChrome

jtmeyer — 2023-02-03 08:06:20 UTC

Im Browser benutz du für die Fehlersuche die Console (strg-umsch + j oder f12 oder Entwicklertools).
Hier wird der Fehler und seine Position im Code angezeigt (s.Bild). Damit beginnt die Fehlersuche.

Beispiel 1

jtmeyer — 2023-02-03 08:15:11 UTC

Der Code:

(<)script(>)
"use strict";
inhalt = "Hallo Welt";
()

erzeugt die im Bild gezeigte Fehlermeldung.

Probiere diesen Code aus und untersuche den Fehler! Die Ursache für den "uncaught reference error" ist in diesem Fall die fehlende Vereinbarung für die Variable inhalt.

Fehlersuche durch auskommentieren.

jtmeyer — 2023-02-03 17:30:51 UTC

Wenn du nach "gefühlt stundenlangem" Fehlersuchen verzweifelst, weil doch offenbar alles richtig ist, greifst du am besten zum "Auskommentieren".

Du benutzt in JavaScript den doppelten Schrägstrich (//) mit dem du Zeile für Zeile auskommentieren kannst oder die Kombination aus Schrägstrich und Stern (/* ... */), mit der du einen ganzen Bereich auskommentieren kannst.

Die radikalste Methode wäre, den gesamten Code bis auf "use strict" auszukommentieren und dann den Code durch Aufheben der Kommentare wieder "zum Leben" zu bringen.

Mit dieser Methode stößt du irgendwann auf den Fehler.

Fehlersuche durch Ausgabe von Dateninhalten in der Konsole

jtmeyer — 2023-02-03 17:31:57 UTC

Mit den Befehlen:

console.log(meinInhalt);
console.info(meinInhalt);

können der Inhalt des Datentyps während des Programmablaufes an jeder Stelle im Code zur Kontrolle ausgegeben werden. Mit dieser Vorgehensweise kannst du Veränderungen im Inhalt der Datentypen erkennen.

Regeln der Namensgebung

jtmeyer — 2023-02-04 10:07:30 UTC

JavaScript ist "case sensitiv", d.h. JavaScript unterscheidet zwischen Groß- und Kleinschreibung. Die Deklarationen:

let meinevariable;
let meineVariable;
let MeineVariable;
let Meinevariable;

bezeichnen vier verschiedene Variablen. Beim Programmieren wäre dieses in einem Programm allerdings wenig sinnvoll und würde zur Verwirrung führen.

Leerzeichen sind bei Datentypen, Objekten und Methoden (oder ganz allgemein) in JavaScript nicht erlaubt. Ein Unterstrich ist möglich. Ich bevorzuge das sogenannte Camel-Case (erster Teil klein geschrieben, zweiter Teil fängt mit Großbuchstaben an):

let meine_variable; (Unterstrich)
let meineVariable; (Camel-case)

Window Browser Objekte

jtmeyer — 2023-02-19 09:57:43 UTC

setIntervall(), clearIntervall()

jtmeyer — 2023-02-19 09:59:31 UTC