| Timm Rose
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.
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.
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.
Operator | Beschreibung | Beispiele |
---|---|---|
= | 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 |
Operator | Beschreibung | Beispiele |
---|---|---|
== | 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 |
instanceof | prüfen, ob der linke Operand (das Objekt) eine Instanz der Klasse rechts vom Operator ist | let date = new Date(); date instanceof Date |
in | prüfen, ob der linke Operand im Objekt (dem rechten Operanden) vorkommt | let citizen = { spain: 47000000, france: 67000000} ’spain‘ in countries |
Operator | Beschreibung | Beispiele |
---|---|---|
++ | 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 Wertes | let value = 5; -value ergibt -5 |
Operator | Beschreibung | Beispiele |
---|---|---|
&& | 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) { … } |
Bei unären Operationen wird nur ein einziger Operand verwendet.
Operator | Beschreibung | Beispiele |
---|---|---|
typeof | wertet den zu prüfenden Operanden aus und gibt den Typ zurück | typeof 12 // number typeof true // boolean |
delete | löscht Eigenschaften aus einem Objekt | let country = { name: ’spain‘, citizen: 47000000 } delete country.name; |
void | der Wert undefined wird zurückgegeben, wie bei einer IIFE | void function () { … } (); |
Operator | Beschreibung | Beispiele |
---|---|---|
?: | Bedingungs-/Ternäroperator wird mit drei Operanden verwendet die | value > 10 ? true : false |
await | await-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 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!');
}
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
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);
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.
Begriff | Beispiele |
---|---|
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 |
© 2021 Digitale Rundschau | Impressum