Grundlagen einer Programmiersprache in Javascript

Programmierung

Elemente von Programmiersprachen

Eine Programmiersprache gibt eine Reihe von detaillierten Anweisungen an den Computer. Solche Anweisungen können direkt ausgeführt werden, wenn sie sich in der spezifischen, numerischen Form befinden, die als Maschinensprache bekannt ist. Obwohl es über 2.000 Computersprachen gibt, sind relativ wenige weit verbreitet.

JavaScript

JavaScript („JS“) ist eine vollwertige dynamische Programmiersprache, die bei der Anwendung auf ein HTML-Dokument eine dynamische Interaktivität auf Websites bieten kann. Sie wurde von Brendan Eich, Mitbegründer des Mozilla-Projektes, der Mozilla-Stiftung und der Mozilla Corporation erfunden. JavaScript ist unglaublich vielseitig. Mit mehr Erfahrung kannst du Spiele, animierte 2D- und 3D-Grafiken, umfangreiche datengesteuerte Apps und vieles mehr erstellen! JavaScript selbst ist ziemlich kompakt und dennoch sehr flexibel. Entwickler haben eine Vielzahl von Tools über die Kern-JavaScript-Sprache geschrieben und eine große Menge an zusätzlicher Funktionalität mit minimalem Aufwand freigeschaltet.

Lass uns einige der Kernfunktionen der JavaScript-Sprache erklären, damit du besser verstehen kannst, wie alles funktioniert. Es ist erwähnenswert, dass diese Funktionen allen Programmiersprachen gemeinsam sind. Wenn du also diese Grundlagen beherrschst, dann bist du auch auf dem richtigem Weg, um etwas zu programmieren!

Variablen

Variablen sind Container, in denen du Werte speichern kannst. Sie beginnen mit der Deklaration einer Variable mit dem Schlüsselwort var, gefolgt von einem beliebigen Namen, den du wählst:

var deineVariable;

Ein Semikolon am Ende einer Zeile zeigt an, wo eine Anweisung endet. Es ist nur zwingend erforderlich, wenn man Anweisungen auf einer einzigen Zeile trennen muss. Du kannst eine Variable mit fast allem benennen, aber es gibt einige Einschränkungen. Wenn du unsicher bist, kannst du deinen Variablennamen überprüfen, um zu sehen, ob er gültig ist.

JavaScript ist “case sensitive” – deineVariable unterscheidet sich von deinevariable. Wenn du Probleme in deinem Code hast, überprüfe die Buchstaben!

Nach dem Deklarieren einer Variable, kannst du ihr einen Wert geben:

deineVariable = 'Manni';

Du kannst diese beiden Operationen auf derselben Linie durchführen, wenn du möchtest:

var deineVariable = 'Manni';

Nachdem du der Variable einen Wert gegeben hast, kannst du sie später ändern:

var deineVariable = 'Alex';
deineVariable = 'David';

Beachte, dass Variablen unterschiedliche Datentypen haben:

Zeichenkette: Eine Sequenz aus Text, die als Zeichenkette bekannt ist. Um anzudeuten, dass die Variable eine Zeichenkette ist, solltest du sie in Anführungszeichen setzen.

var deineVariable = 'Alex';

Nummer: Zahlen enthalten keine Anführungszeichen. Vorsicht ist bei Zahlen mit Komma geboten, hier gelten technische Spezialitäten, die du zuerst lernen musst.

var deineVariable = 10;

Boolean: Ein true/false Wert. Die Wörter true und false sind spezielle Schlüsselwörter in JS und brauchen keine Anführungszeichen.

var deineVariable = true;

Array: Eine Struktur, mit der du mehrere Werte in einer einzigen Referenz speichern kannst.

var deineVariable = [1, 'Alex', 'David', 10];

Verweise auf jeden Wert des Arrays wie folgt:

deineVariable [0], deineVariable [1], usw.

Objekt: Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variable gespeichert werden. Denke daran, während du lernst.

var deineVariable = document.querySelector ('h1');

Warum brauchen wir also Variablen? Nun, Variablen sind erforderlich, um etwas Interessantes in der Programmierung zu tun. Wenn sich die Werte nicht ändern könnten, dann konnte man nichts dynamisches machen, wie eine Begrüßung personalisieren oder das in einer Bildergalerie angezeigte Bild ändern.

Kommentare

Du kannst Kommentare im JavaScript-Code integrieren:

/ *
Alles dazwischen ist ein Kommentar.
* /

Wenn dein Kommentar keine Zeilenumbrüche enthält, ist es oft einfacher, es hinter zwei Schrägstrichen wie folgt zu setzen:

// Das ist ein Kommentar

Operatoren

Ein Operator ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. Unten kannst du einige der einfachsten Operatoren, zusammen mit einigen Beispielen sehen, die du in der JavaScript-Konsole ausprobieren kannst.

    • Addieren (+): Dient zum Addieren von zwei Zahlen oder „klebt“ zwei Zeichenketten zusammen.
6 + 9;
"Hallo" + "Welt!";
  • Subtraktion, Multiplikation, Division (-, *, /): Diese tun das, was sie auch in der Mathematik tun.
9 - 3;
8 * 2; // multiplizieren in JS ist ein Sternchen
9/3;
  • Zuordnung: Du hast das schon gesehen: Es ordnet einen Wert, einer Variable zu.
var deineVariable = 'Alex';
  • Gleichheit: Macht einen Test, um zu sehen, ob zwei Werte einander gleich sind und gibt ein wahres / falsches Ergebnis zurück.
deineVariable == 4;
  • Nicht, Ist-Nicht-Gleich: Gibt den logisch entgegengesetzten Wert dessen, was er vorgibt. Wenn es neben dem Gleichheitsoperator verwendet wird, prüft der Negation Operator, ob zwei Werte nicht gleich sind.

Der Grundausdruck ist wahr, aber der Vergleich gibt falsch zurück, weil wir ihn negiert haben:

var deineVariable = 3;
var gleich = (deineVariable != 3);

Hier testen wir „ist deineVariable NICHT gleich 3“. Das gibt false zurück, weil deineVariable gleich 3 ist.

var deineVariable = 3;
deineVariable != 3;

Es gibt noch viel mehr Operatoren zu erkunden, aber für den Anfang ist es genug.

Entscheidungen (Bedingte Anweisung und Verzweigung)

Entscheidungen sind Code-Strukturen, mit denen du testen kannst, ob ein Ausdruck „wahr“ zurückgibt oder nicht, wobei der alternative Code durch sein Ergebnis angezeigt wird. Eine sehr häufige Form der Bedingung ist die if-else-Anweisung. Beispielsweise:

var Eis = 'Schokolade';
if(Eis == 'Schokolade') {
  alert('Ich liebe Schokoladeneis!');
} else{
  alert('Aber Schokolade ist mein Favorit ...');
}

Der Ausdruck innerhalb von if (…) ist der Test – das nutzt den Identity Operator (wie oben beschrieben), um die Variable Eis mit der Zeichenkette Schokolade zu vergleichen, um zu sehen, ob die beiden gleich sind. Wenn dieser Vergleich „true zurückgibt, wird der erste Codeblock ausgeführt. Wenn der Vergleich nicht wahr ist, wird der erste Block übersprungen und der zweite Codeblock wird nach der else-Anweisung stattdessen ausgeführt.

Funktionen

Funktionen sind eine Möglichkeit, die Funktionalität zu verpacken, die Sie wiederverwenden möchten. Wenn Sie die Prozedur benötigen, können Sie eine Funktion mit dem Funktionsnamen abrufen, anstatt den gesamten Code jedes Mal neu zu schreiben. Sie haben bereits einige Verwendungen von Funktionen oben gesehen, zum Beispiel:

var deineVariable = document.querySelector ('h1');
alert('hallo!');

Diese Funktionen, document.querySelector und Alert, sind in dem Browser integriert und du kannst sie verwenden, wann immer du wünschst.

Wenn du etwas siehst, das wie ein Variablenname aussieht, aber Klammern hat – () – ist es wahrscheinlich eine Funktion. Funktionen haben oft Parameter, die sie benötigen, um ihren Job zu machen. Diese werden in die Klammern gesetzt, bei mehreren getrennt durch Kommas.

Zum Beispiel, die alert() -Funktion erzeugt ein Pop-up-Feld im Browser-Fenster, aber wir müssen ihm eine Zeichenkette als Argument geben, um der Funktion zu sagen, was in der Pop-up-Box stehen sollte. Die gute Nachricht ist, dass du deine eigenen Funktionen definieren kannst – in diesem nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente annimmt und sie multipliziert:

function multiplizieren(num1, num2) {
  var ergebnis = num1 * num2;
  return ergebnis;
}

Versuche, die oben genannte Funktion in der Konsole auszuführen, und teste es dann mit mehreren Argumenten. Beispielsweise:

multiplizieren (4,7);
multiplizieren (20,20);
multiplizieren (0,5,3);

Hinweis: Die return-Anweisung teilt dem Browser mit, die Ergebnis-variable aus der Funktion zurückzusenden, damit sie verfügbar ist. Dies ist notwendig, da innerhalb der Funktionen definierte Variablen nur innerhalb dieser Funktionen verfügbar sind.

Events

Echte Interaktivität auf einer Website braucht Events. Dies sind Code-Strukturen, die auf Dinge hören, die im Browser passieren und Code als Antwort ausführen. Das offensichtlichste Beispiel ist das Klicken, das vom Browser ausgelöst wird, wenn man auf etwas mit der Maus klickt. Um dies zu demonstrieren, gibst du folgendes in die Konsole ein und klickst auf die aktuelle Webseite:

document.querySelector('html').onclick = function () {
  alert('Aua! Hör auf mich anzuklicken!');
}

Es gibt viele Möglichkeiten, ein Ereignis an ein Element anzuhängen. Hier wählen wir das <html> -Element aus und setzen seine Onclick-Handler-Eigenschaft gleich einer anonymen Funktion, die den Code enthält, den das Click-Event ausführen soll.

document.querySelector('html').onclick = function () {};

ist äquivalent zu

var meinHTML = document.querySelector('html');
meinHTML.onclick = function () {};

Fazit

Auch wenn dies keinen voll-umfänglichen Einstieg in die Programmierung geben konnte. JavaScript ist eine Programmiersprache, die Interaktivität zu deiner Website hinzufügt (z.B. Spiele, Antworten, wenn Tasten gedrückt werden oder Daten in Formulare eingegeben werden, dynamisches Styling, Animation). Dieser Artikel hat dir hoffentlich geholfen, damit du mit dieser spannenden Sprache beginnen kannst und dir eine Vorstellung davon gegeben, was alles möglich ist.