JavaScript lernen – 100 % kostenloses Beginner Tutorial [GUIDE 2021]

Du willst JavaScript lernen?

Dieser Guide gibt Dir einen Einsteiger freundliches Tutorial.

Ich erkläre Dir alle Grundlagen und Du hast am Ende ein erstes Hello World Projekt und einen Taschenrechner.

Beginnen wir!

Was ist JavaScript?

Die Programmiersprache JavaScript ermöglicht interaktive und dynamische Webseiten. Programmierer können mit dieser Programmiersprache die statischen Inhalte der Webseite (HTML) mit Leben füllen.

00 JavaScript - JavaScript lernen Tutorial Coding Lab Steffen Lippke
00 JavaScript – JavaScript lernen Tutorial Coding Lab Steffen Lippke

JavaScript ist seit der Veröffentlichung von Node.js auch als Serversprache verfügbar, sodass diese Programmierung sich nicht nur auf die Seite des Clients beschränkt.

JavaScript erfreut sich an großer Beliebtheit, weil die erstellte JavaScript-Web-Anwendung auf allen Betriebssysteme läuft, die einen Browser unterstützen. Die Technologien Accelerated Mobile Pages (AMP) und Progressive Web Application (PWA) lösen die Grenzen zwischen Anwendungen, Apps und Webseiten auf.

Warum soll ich JavaScript lernen?

Das Internet wächst und wächst. JavaScript ist Herz des Internets.

Steffen Lippke

Webseiten, die früher nur statische Inhalte zeigten (Texte und Bilder) verwandeln sich mit JavaScript in eine interaktive Anwendung.

JavaScript treibt nicht nur Business- und Produktivitätssoftware an, sondern auch Browser-Games und Apps basieren auf der Programmiersprache.

JavaScript ist die Grundlage für ein ganzes Programmier-Universum:

Node.js und alle JavaScript-Frameworks. Eine Webseite mit JavaScript kann sich ohne Neuladen verändern und Nutzerdaten verarbeiten. Der Browser kann neue Inhalte über JavaScript Ajax nachladen.

JavaScript ist nicht nur eine Programmiersprache für die Client-seitige Webseiten Programmierung, sondern funktioniert auch mit Node.js auf dem Server.

04 Node js- JavaScript lernen Tutorial Coding Lab Steffen Lippke
04 Node js- JavaScript lernen Tutorial Coding Lab Steffen Lippke

Wann ist JavaScript eine gute Wahl?

Schreibe eine Anwendung mit JavaScript, wenn die Software …

  • … auf jeder Plattform Windows, macOS und Linux verfügbar sein soll.
  • in einem Browser laufen kann.
  • … der Client für die Anwendungen genügend Rechenleistung hat.

Alternativen für JavaScript

Eine der besten Alternativen zu JavaScript ist WebAssembly.

Diese erlaubt das Ausführen von C(++) auf Deinem Computer über dem Browser. Die Innovation vermeidet, dass „rechen-intensive“ Anwendungen wie …

… nicht mehr installiert werden müssen. Die Anwendungen sind im Browser schnell verfügbar.

Wenn Du Dich mit C(++) gut auskennst, kann gerne mit WebAssembly anfangen. JavaScript eignet sich für viele Programmier-Neulinge gut, weil die Programmiersprache „Fehler vergibt“. Das Programm stützt nicht sofort ab, sondern führt die funktionierenden Funktionen aus.

Effizienter programmieren – Frameworks

Die meisten Entwickler nutzen JavaScript selten in reiner Form. Entweder nutzen diese Bibliotheken, um doppelten Code zu meiden oder Frameworks.

Frameworks sind z. B. Vue, Angular, React.

Viele Frameworks nutzt statt JavaScript TypeScript.

Steffen Lippke

TypeScript erweitert die JavaScript-Programmierung mit einem „mehr“ an Struktur und Organisation. Viele Entwickler lieben die Typiserung von Variablen und ein übersichtliches Abhängigkeitsmanagement (im Gegensatz zu JavaScript).

Der TypeScript Kompiler übersetzt am Ende den TypeScript-Code in JavaScript Code, welcher der Browser verstehen kann.

Beginner Tutorial JavaScript

Installation IDE

Als IDE empfehle ich Dir das kostenloses Visual Studio Code. Das Programm ist im Gegensatz zu vielen anderen IDEs nicht überladen und kann mit Erweiterungen angepasst werden.

01 VS Code- JavaScript lernen Tutorial Coding Lab Steffen Lippke
01 VS Code- JavaScript lernen Tutorial Coding Lab Steffen Lippke

Dein erstes Hello World

Zur besseren Übersicht behalten wir dieses einfache Programm in einem Dokument.

Erstelle ein HTML-Dokument.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Im Head des HTML-Dokuments fügst Du einen <script> Tag hinzu, der den JavaScript Code enthält. Die HTML-Datei kannst Du über den Browser aufrufen. Wenn der JavaScript Code einfach innerhalb der Klammern steht, führt sich dieser mit Laden der Webseite selbst aus.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /* Hier kommt JavaScript herein */
    </script>
</head>
<body>
</body>
</html>

Du kannst ein Event nutzen, um eine Funktion auszulösen. Ein Event ist das Klick-Event (auf einen Link / Button) oder das Ladeevent, wenn die Webseite vollständig dargestellt ist.

Vervollständige Dein Hello-World mit der JavaScript Alert Box

<script type="text/javascript">
        alert("Hello World!");
 </script>

Dein JS-Taschenrechner

Für einen Taschenrechner brauchen wir zwei Eingabefelder, ein Dropdown-Menu und ein Button. In die Eingabefelder kann der Nutzer die Operanden wählen und im Dropdown den Operator.

02 Simple Calculator- Tutorial Coding Lab Steffen Lippke
02 Simple Calculator- JavaScript lernen Tutorial Coding Lab Steffen Lippke

Das Ergebnis geben wir am Ende in einem Ausgabetext aus.

Die Funktion kapselt den JavaScript-Code, welche das onClick-Attribut aufgerufen.

Die Eingaben erhalten wir, indem wir im JavaScript Code die HTML-Objekte über den Namen referenzieren (document.getElementByName("…")).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript">

    function calculate(){
      var operand1 = parseInt(document.getElementById("operand1").value);
      var operand2 = parseInt(document.getElementById("operand2").value);
      var result = 0;

    
      switch (document.getElementById("operator").value) {
        case "plus":
          result = operand1 + operand2;
          break;
        case "minus":
          result = operand1 - operand2;
          break;
        case "devide":
          result = operand1 / operand2;
          break;
        case "multiply":
          result = operand1 * operand2
          break;
        default:
          result = operand1 + operand2;
          break;
      }
      document.getElementById("result").innerHTML = "Das Ergebnis ist: " + result;
    };

    </script>
  </head>
  <body>
    <input type="number" id="operand1" />
    <select id="operator">
      <option value="plus">+</option>
      <option value="minus">-</option>
      <option value="devide">/</option>
      <option value="multiply">*</option>
    </select>
    <input type="number" id="operand2" />
    <button onclick="return calculate();">Calculate</button><br />
    <p id="result">Please, type in your values.</p>

  </body>
</html>

Die Werte der Inhalte speichern wir in einer Variable markiert mit var. JavaScript verwendet keine strenge Typisierung. Du musst nicht angeben, welchen Variablen-Typ Du erstellst. Du kannst die Operanden mit einem Text, JSON und Boolean überschreiben. JavaScript ist das egal.

Ein switch-Statement ist notwendig, um von einem String auf den mathematischen JavaScript-Operator zu wechseln. Die Operationen finden innerhalb des switch statt.

Zum Schluss schreiben wir das Ergebnis in den Ausgabetext via der innerHTML-Funktion.

03 Ergebnis- Tutorial Coding Lab Steffen Lippke
03 Ergebnis -JavaScript lernen Tutorial Coding Lab Steffen Lippke

Nachladen von Inhalten – Ajax

JavaScript eignet sich besonders gut dafür, Inhalte nach dem initialen Seitenladen nachzuladen. Die Webseite kann über diese Technologie Bilder verzögert darstellen, um die Texte schneller anzuzeigen. Außerdem können z. B. neue Blogbeiträge einer Webseite geladen werden, ohne das der Browser einen erneuten Seitenaufruf durchführen muss.

Bibliotheken und Node.js

Der Node Packet Manager (NPM) bietet JavaScript Entwicklern eine Vielzahl von Bibliotheken an, die die Entwicklung beschleunigen können. Das Universum von Node.js bietet alles von kleinen Hilfs-Skripts bis hin zu vollständigen Frameworks mit allen Features für eine Business-Anwendung.

06 NPM- JavaScript lernen Tutorial Coding Lab Steffen Lippke
06 NPM- JavaScript lernen Tutorial Coding Lab Steffen Lippke

Die Bibliotheken können über import Statements oder über require.js in die JavaScript Datei importiert werden.

Bevor Du mit Node.js anfängst, empfehle ich Dir erst mein Tutorial über TypeScript Dir anzusehen. TypeScript basiert auf JavaScript. TypeScript vereinfacht die Benutzung mit Node.js. Große Frameworks wie Angular und Ionic nutzen die Möglichkeiten von TypeScript.

Wie setzen Hacker JavaScript ein?

JavaScript hat nicht nur Vorteile, sondern weißt einige Risiken auf. Hacker nutzen JavaScript, um ihre Opfer zu attackieren:

  • Overlay-Login: JavaScript legt eine Login-Maske über eine Login-Maske und greift mit dieser Täuschung die Passwörter der Kunden ab.
  • Crypto-Miner: Eine Webseite oder eine eingebettete Werbung lässt Deinen Browser Code ausführen, der Bitcoins für die Hacker im Verborgenen minet. Die Opfer dürfen die Stromkosten für das Mininen bezahlen, während die Hacker gut mit den Bitcoins verdienen.
  • Angriffsvektor: JavaScript kann ein vollautomatisches Herunterladen von Malware auslösen, welches Deinen Computer infizieren kann. Du musst nicht einmal auf einen Download-Link klicken, damit die Malware auf Deinen Computer landet.
  • Integrationen: Die Hacker können mit der Kamera und Mikrofon-Integration des Browsers Dich ausspionieren.

Du kannst Dich vor den meisten der genannten Hacks effektiv schützen. Du solltest Dir bewusst sein, dass eine Webseite heutzutage ein richtiges Programm ist, die gut oder böse Intentionen haben kann.


Danke fürs Lesen. Erhalte weitere Tutorials in meinem belieben Newsletter*.
Jeden Monat teile ich mit Dir 4 neue praxisnahe Tutorials.
Über 162.403 sind abonniert. Trage Deine Mail ein und werde Teil von uns.



Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA
*) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Der Versand erfolgt mit MailChimp. Mehr in der Datenschutzerklärung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.