22. September 2021

| Timm Rose

JavaScript lernen: Grundlagen

JavaScript lernen: Grundlagen ist eine Übersicht zu Grundlagen der objektbasierten Programmiersprache mit Erläuterungen zu Funktionen und Konzepten, Cheat Sheets zu Grundlagen, Empfehlungen und Verwendung der Browser DevTools.

Möchtest du dich nicht mit Grundlagen sondern erweiterten JavaScript Techniken, zum Beispiel der Verwendung von Frameworks beschäftigen, empfehle ich den Artikel zur Angular Referenz.

Die verschiedenen Beispiele kannst du als Code Snippets selbst ausprobieren und zum Beispiel in die JavaScript Konsole des Browsers einfügen.

In den meisten Beispielen wird das Ergebnis per console.log Methode direkt in der Konsole ausgegeben.

1. Sprachkern

Variablen

var

function Languages() {
  var sp = 'spanisch';
  console.log(sp);
}

Languages(); // spanisch

Variablen mit dem Schlüsselwort var können überschrieben werden und sind funktionsbezogen. Die Variable sp ist nur innerhalb der Funktion gültig

function Languages() {
  var en = 'englisch';
}
Languages();

console.log(en); // Uncaught ReferenceError: en is not defined

Wird die in der Funktion initialisierte Variable en außerhalb der Funktion aufgerufen, gilt sie als nicht definiert

let

for (let i = 1; i < 4; i ++) {
    console.log(i); // 1 2 3
}

Variablen mit dem Schlüsselwort let sind blockbezogen, wirken daher immer innerhalb eines Blocks mit geschweiften Klammern.

for (let i = 1; i < 4; i ++) {
    console.log(i);

    let a = 0;
    a = a + i;
}

console.log(a);// Uncaught ReferenceError: a is not defined

Die Variable a innerhalb des Blocks kann außerhalb nicht aufgerufen werden

const

const language = 'de';
console.log(language); // de

Variablen mit dem Schlüsselwort const werden als Konstante bezeichnet, die nicht überschreibbar sind …

const language = 'de';
language = 'fr';
console.log(language); // Uncaught TypeError: Assignment to constant variable.

… so wie es die Fehlermeldung auch beschreibt.

Operatoren

Es gibt in JavaScript verschiedene Operatoren, die dir bestimmt aus anderen Programmiersprachen bekannt sind. Eine Auswahl der wichtigsten Operatoren ist in der unten stehenden Tabelle aufgelistet.

Zuweisungsoperatoren

OperatorBeschreibungBeispiele
=Zuweisungsoperator
Wert wird zugewiesen
city = ‚Madrid‘
+ Addition
addieren zum linken Operanden
value = value + 10

Kurz: value += 10
Subtraktion
subtrahieren zum linken Operanden
value = value – 10

Kurz: value -= 10
*Multiplikation
multiplizieren des linken Operanden
value = value * 10

Kurz: value *= 10
/Division
dividieren des linken Operanden
value = value / 10

Kurz: value /= 10
%Restwert
Restwert aus Division des linken Operanden
value = value % 10

Kurz: value %= 10
**Potenzieren
potenzieren des linken Operanden
value = value ** 10

Kurz: value **= 10
>> Verschieben
zu rechtem Operanden verschieben
value = value >> value2

Kurz: value >>= value2
<<Verschieben
zu linkem Operanden verschieben
value = value << value2

Kurz: let value <<= value2

Vergleichsoperatoren

OperatorBeschreibungBeispiele
==Gleichheit
prüfen auf Gleichheit der Werte
value == value2
!=Ungleichheit
prüfen auf Ungleichheit der Werte
value != value2
===Identität
prüfen auf Gleichheit der Werte und des Typs
value === value2
!==Identität
prüfen auf Ungleichheit der Werte bei Gleichheit des Typs
value !== value2
>Größer
prüfen, ob linker Operand größer dem rechten
value > value2
<Kleiner
prüfen, ob rechter Operand größer dem linken
value < value2
>=Größer gleich
prüfen, ob linker Operand größer oder gleich dem rechten
value >= value2
<=Kleiner gleich
prüfen, ob rechter Operand größer oder gleich dem linken
value <= value2
instanceofprüfen, ob der linke Operand (das Objekt) eine Instanz der Klasse rechts vom Operator ist let date = new Date();
date instanceof Date
inprüfen, ob der linke Operand im Objekt (dem rechten Operanden) vorkommtlet citizen = { spain: 47000000, france: 67000000}
’spain‘ in countries

Arithmetische Operatoren

OperatorBeschreibungBeispiele
++Inkrementieren
addieren um 1 zum Wert des Operanden
for (let i = 0; i < 10; i++) { … }
Dekrementieren
subtrahieren um 1 zum Wert des Operanden
for (let i = 0; i > 10; i–) { … }
+ in eine Zahl umwandeln+true ergibt 1
Negierung eines Werteslet value = 5;
-value ergibt -5

Logische Operatoren

OperatorBeschreibungBeispiele
&&UND
Block wird ausgeführt, wenn value und value2 true ergeben
if (value && value2) { … }
||ODER
Block wird ausgeführt, wenn value oder value2 true ergeben
if (value || value2) { … }
!NOT
Block wird ausgeführt, wenn value nicht true ergibt
if (!value) { … }

Unäre Operatoren

Bei unären Operationen wird nur ein einziger Operand verwendet.

OperatorBeschreibungBeispiele
typeofwertet den zu prüfenden Operanden aus und gibt den Typ zurücktypeof 12 // number
typeof true // boolean
deletelöscht Eigenschaften aus einem Objektlet country = {
name: ’spain‘,
citizen: 47000000
}
delete country.name;
voidder Wert undefined wird zurückgegeben, wie bei einer IIFEvoid function () {

} ();

Weitere Operatoren

OperatorBeschreibungBeispiele
?:Bedingungs-/Ternäroperator
wird mit drei Operanden verwendet die
value > 10 ? true : false
awaitawait-Operator
erwartet ein Promise-Objekt und wartet die asynchrone Operation ab, ohne dabei andere Operationen zu blockieren
async function getSetting() {
let value = await 10;

}

Bedingungen, Schleifen

Bedingungen können auch als Abzweigungen bezeichnet werden. An diesen Stellen wird eine Entscheidung getroffen, wo und wie der Programmablauf fortgesetzt wird.

Das Schlüsselwort if wird für die Bedingung verwendet, die in runden Klammern formuliert wird

if (value >= 20) {
  console.log('Ziel erreicht!');
}

Mit dem else-Zweig lässt sich der false-Fall abfangen, der eintritt, wenn die Abfrage der if-Bedingung false zurückgibt

if (value >= 20) {
  console.log('Ziel erreicht!');
} else {
  console.log('Leider verloren!');
}

Möchtest du in dem else-Zweig noch eine Abfrage unterbringen, nimmst du den else-if-Zweig

if (value >= 20) {
  console.log('Ziel erreicht!');
} else if (value >= 10 && value < 20){
  console.log('Ziel bald erreicht!');
} else if (value < 10){
  console.log('Leider verloren!');
}

Objekte, Arrays

2. Template strings

Mit Verkettungsoperator

Man kann Strings mit JavaScript Variablen mittels Verkettungsoperator kombinieren, was in einigen Fällen auch ausreicht:

const name = 'Tom';
const age = 28;
const myText = 'My name is ' + name + ' and I`m ' + age + ' years old';
console.log(myText); // My name is Tom and I´m 28 years old

String Interpolation – ${}

In JavaScript ist die folgende String Interpolation in Zeile 3 ist etwas flexibler und mittlerweile auch üblicher. Der gesamte String wird in Backticks geschrieben und die Variable mit führendem Dollar-Zeichen in geschweifte Klammern eingebettet.

const name = 'Tom';
const age = 28;
const myText = `My name is ${name} and I´m ${age} years old`
console.log(myText);

3. Funktionen

Wer JavaScript lernen will, sollte sich intensiv mit Funktionen beschäftigen. Daher gehe ich hier auf die Definition von Funktionen ein und beschreibe unter JavaScript lernen: Fortgeschritten die Verwendung der map(), filter(), IIFE, Closures und weiteren Methoden.

Funktionen erzeugen

Funktionale Programmierung

Glossar

BegriffBeispiele
Array
sind Datentypen mit geordneter Sammlung aus veränderbaren Werten. Grundsätzlich gibt es 4 Möglichkeiten ein Array zu erzeugen
let numbers = [2, 4, 8]

let numbers2 = [1, …numbers, 16]

let numbers = new Array(2, 4, 8)

Array.of(2, 4, 8)
Aufrufausdruck
ist der Aufruf zum Beispiel einer Funktion
Math.random() oder
m.n(x, y)
Funktionsausdruck
ist der Ausdruck einer Funktion, der ähnlich wie das Funktionsstatement verstanden werden kann. Ein Funktionsausdruck kann ohne Funktionsnamen geschrieben werden
let languages = function() {

}
Identifier
ist die Bezeichnung bzw. der Name, der für Variablen, Konstanten, Eigenschaften, Funktionen, Klassen verwendet wird
const languages
oder
class GetLang
Konstruktor
mit dem Konstruktor wird ein neues Objekt erzeugt.

Mit einem Konstruktor ist auch die Initialisierung mit Objekteigenschaften möglich
m = new Object()

m = new Object(x = 5, y = 10)
Literal
ist ein Datenwert, der unter anderem Zahlenwerte, Zeichenketten, Wahrheitswerte enthält
Zahl 15, die Zahl 2.9, die Zeichenkette „Text“, der Wahrheitswert true, oder null
Objektliteral
beschreibt die Deklaration eines Objektes
let languages: { }
Primitive Werte
sind Werte bzw. Datentypen die unveränderbar sind. Im Gegensatz zu Objekten sind sie immutabel, d.h. nicht veränderbar, werden also immer neu erzeugt
Wahrheitswerte, Zahlen, Zeichenketten, undefined, null

Symbole

Digitale Rundschau Logo

© 2021 Digitale Rundschau | Impressum