Mit welcher Sprache fängt man an? Dies ist ein ewiges Thema …
Ich habe mit Python angefangen und fand es leichter zu lernen als Javascript. Aber es gibt nunmal bestimmte Sachen wo eine Programmiersprache an die Grenzen kommt. Javacript wird zur Erstellung von dynamischen Webseiten verwendet.

Auf dieser Seite werden die Grundlagen von Javascript kurz und knapp zusammengefasst. Um diese Sprache ohne Vorkenntnisse zu lernen ist es sinnvoll wirklich von Anfang an zu lernen. Ich habe mit diesem Buch angefangen:

Optimal finde ich das Buch von Phillip Ackermann:

Auszug wikipedia:
JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern.

Um mit Javascript zu arbeiten sind Kenntnisse in HTML sinnvoll. Grundinfos gibt es unter https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg
In einer Datei mit HTML Code kann die Datei über den Browser aufgerufen werden. Reiner Javascript Code über node.

Für die Nutzung der Programmiersprache ist nur ein Editor und ein Browser erforderlich. Ich arbeite unter Linux und Windows gern mit dem Editor Visual Studio Code.

Grundinfo: Javascript ist Case Sensitiv. Der englische Ausdruck Case-sensitivity bezeichnet in der elektronischen Datenverarbeitung allgemein die Art und Weise, wie eine Rechenmaschine oder Programmiersprache die Unterscheidung von Groß- und Kleinschreibung handhabt.
Javascript unterscheidet zwischen Groß- und Kleinschreibungen , d.h. Wert ist eine andere Variable als wert .
In Javascript wird mit Semikolons gearbeitet.

Jeder Befehl wird unter Javascript mit einem Semikolon beendet.

Der Befehl alert erstellt ein Fenster das beim Starten der Seite angezeigt wird.

Eine Javascript Datei kann ohne HTML auch verarbeitet werden. Die Dateiendung ist ,js
In Visual Studio Code kann ein neuer Terminal geöffnet werden und node dateiname.js ausgeführt werden. Die Ausgabe wird im Terminal angezeigt.

Javascript kann in HTML Dateien eingebunden werden. Dies wird oft empfohlen da der Code sonst unübersichtlich wird. Ich habe am Anfang auf der Seite den Javascript Code mit eingebunden in die HTML Datei damit der Zusammenhang klar wird. Sonst wird über den Code

<script src="dateiname.js"></script>

die Javascript Datei in die HTML Datei eingebunden. Durch die Attribute async und defer können Sie dem Browser mitteilen, dass er mit dem Parsen fortfahren kann, während er Skripte herunterlädt.

<script src="dateiname.js" async></script>

Javascirpt war sehr lange Zeit abwärtskompatibel. Dies wurde 2009 in einer neuen Version durch verschiedene Fehlerbehebungen geändert. Durch die Angabe von „use strict“ im Javascript Code wird die aktuelle Version verwendet.

Kommentare

Wie in jeder Programmiersprache sind Kommentare sinnvoll. Kommentare werden in Javascript einzeilig mit // eingeleitet und mehrzeilig mit /*

 

// Dies ist ein einzeiliger Kommentar //
/* Dies ist
ein mehrzeiliger
Kommentar */

Weiter zu Variablen

Mit den Befehlen alert, confirm und prompt können Sie kleine Popup-Fenster öffnen.

Die Ausgabe eines Strings erfolgt über alert

alert ("Halli, Hallo");

Eine Eingabe wird über den Befehl promt verarbeitet

<script>
let eingabe;
eingabe=promt("Bitte den Namen eingeben");
alert (eingabe);
</script>


Die Anweisung console.log gibt eine Meldung in der Konsole des Browsers aus. Die Konsolenansicht muss erst aktiviert werden.

Die Konsole öffnet sich …

  1. über die Funktionstaste F12
  2. über die jeweiligen Menüs,
  3. oder aber durch eine der folgenden Tastenkombinationen:
    • Mozilla Firefox: unter Windows und Linux mit Strg + Umschalt + I, unter Mac mit Cmd + Opt + I
    • Google Chrome: unter Windows und Linux mit Strg + Umschalt + J, unter Mac mit Cmd + Opt + J
    • Microsoft Edge und Internet Explorer: F12 anschließend Strg + 2

Umwandeln eines Strings

Die Methode String liefert eine Zeichenkette. Um mit Zahlen zu arbeiten muss die Eingabe umgewandelt werden. Dies geschieht durch die Funktion parseFloat (Für den Datentyp Float) oder parseInt (Für den Datentyp Integer)

<!DOCTYPE html>
<html><body><script>
eingabe1=prompt("Zahl 1;");
zahl1=parseFloat(eingabe1);
eingabe2=prompt("Zahl 2:");
zahl2=parseFloat(eingabe2);
summe=zahl1+zahl2;
document.write("Summe von Zahl 1 und Zahl 2 ist "+ summe);</script></body></html>

Strings besitzen die Eigenschaft length. Diese Eigenschaft liefert die Anzahl der Zeichen eines Strings. Dazu muss man dem String oder der Variablen, die den String enthält, .length anhängen:

Typ eines Wertes feststellen:

<!DOCTYPE html>
<html><body><script>
let a
a = parseInt("12234");
const b ="abc";
const c = true;

document.write (typeof a +"<br>");
document.write (typeof b +"<br>");
document.write (typeof c );
</script></body></html>

Ausgabe:

number
string
boolean

Weitere Methoden von Strings sind toUpperCase und toLowerCase. Hier werden Buchstaben in Groß- oder Kleinbuchstaben umgewandelt. Zahlen und auch Sonderzeichen werden nicht verändert.

Die Länge eines Stings kann über die Eigenschaft lenght festgestellt werden.

let variable="Heute ist ein schöner Tag";
laenge=variable.length;
console.log(laenge);

Replace : String ersetzen
Durch die Methode replace können Eingaben ersetzt werden.

let words = "Heute ist ein schöner Tag";
let textNeu=words.replace("Heute","Morgen");
console.log(textNeu);

Die Methode trim entfernt Leerzeichen an beiden Enden eines Strings.

function firstChar(wert){
    let textNeu=wert.trim();
    return textNeu;
}
let stadt;
stadt="Berlin";
anzahl = stadt.length;

Um eine bestimmte Stelle in einem String zurückzugeben wird charArt verwendet. Der Index beginnt bei 0. Der erste Buchstabe lautet also charArt(0)
z.B.:

Die Ausgabe ist HB

Ein/ Ausgabe bestätigen

Durch die Methode confirm wird ein Dialogfeld mit einer Frage sowie den Schaltflächen Ok und Abbrechen

Modulo Operator

Der Modulo Operator gibt den Rest einer Division zurück.

//Modulo Operator
console.log (23 % 2);
console.log (10 % 1);
console.log (11 % 2);

Funktionen

Funktionen kann man in JavaScript auf verschiedene Weisen definieren. Die vielleicht gebräuchlichste ist die sogenannte Funktionsdeklaration. Sie wird mit dem Schlüsselwort function eingeleitet. Es folgen:

  • der Name der Funktion,
  • die Parameter eingeschlossen in runden Klammern,
  • die Anweisungen eingeschlossen in geschweiften Klammern.

Die Funktion wird nicht mit einem Semikolon abgeschlossen.

<script>function hallo() {
document.write("hallo");
}

hallo();

Mit dem Schlüsselwort return kann ein Wert zurückgegeben werden. Gleichzeitig beendet return die Funktion. Anweisungen nach einem return werden nicht mehr ausgeführt.

function summe(a,b,c)
{
    ergebnis=a + b + c;
    return ergebnis;
}

Beispiel:

function mal() {
    ergebnisMal=wert1*wert2;
    return ergebnisMal;
}
function plus() {
    ergebnisPlus=wert1+wert2;
    return ergebnisPlus;
}
function minus() {
    ergebnisMinus=wert3-wert4
    return ergebnisMinus
}
let wert1=34;
let wert2=23;
let wert3=88;
let wert4=44;
console.log(minus());
console.log (plus());
console.log (mal());

Bitte beachten: Mit einem Plus werden Zahlen addiert. Texte zusammengeführt:

<script>
      let eingabe1;
      eingabe1=42;
      let nocheineZahl=eingabe1+15;
      document.write(eingabe1+nocheineZahl); 
      document.write("eingabe1 "+"nocheineZahl");
      </script>

Ausgabe: 99
und eingabe1nocheineZahl

Um einen String in eine Zahl umzuwandeln gibt es die Funktion parseInt bzw. parseFloat

weiter zu Array

Weitere Homepages von mir:
www.edv-bildung.de und www.programmieren-mit-python.de und www.handarbeit-macht-spass.de