JavaScript

JavaScript (JS) ist eine dynamische, interpretierte Sprache, die hauptsächlich dazu dient, Webseiten lebendig und interaktiv zu gestalten. Zusammen mit HTML und CSS bildet JavaScript das fundamentale Trio, das moderne Webseiten erst möglich macht.

• Erstveröffentlichung: 1995 von Brendan Eich, damals bei Netscape
• Primär clientseitig, aber auch serverseitig dank Node.js
• Standardisiert unter dem Namen ECMAScript (ES)

Die Grundlagen

Grundlegende Syntax

// Variablen
let name = "Max";
const pi = 3.14;

// Funktionen
function greet(user) {
  return "Hallo, " + user + "!";
}

// Bedingungen
if (name === "Max") {
  console.log("Willkommen zurück, Max!");
}

// Schleifen
for (let i = 0; i < 3; i++) {
  console.log(i);
}

Wichtige Datentypen

• Primitiv: String, Number, Boolean, Null, Undefined, Symbol, BigInt
• Referenztypen: Arrays, Objekte, Funktionen

DOM-Manipulation

JavaScript ermöglicht es, das Document Object Model (DOM) zu manipulieren, um Webseiten dynamisch zu verändern.

// Zugriff auf ein DOM-Element
const button = document.getElementById("myButton");

// Event Listener für Klick-Ereignis
button.addEventListener("click", () => {
  alert("Button wurde geklickt!");
});

Asynchrone Programmierung

1. Callbacks

function ladeDaten(callback) {
  setTimeout(() => {
    callback("Daten erfolgreich geladen!");
  }, 1000);
}

2. Promises

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));

3. async/await

async function ladeBenutzer() {
  const res = await fetch("https://api.example.com/user");
  const user = await res.json();
  console.log(user);
}

Fortgeschrittene Konzepte

Closures

function outer() {
  let counter = 0;
  return function inner() {
    counter++;
    return counter;
  };
}

const count = outer();
console.log(count()); // 1
console.log(count()); // 2

Prototypen & Vererbung

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  return "Hallo, " + this.name;
};

const p = new Person("Anna");
console.log(p.sayHello());

Module (ES6)

// Datei: math.js
export function add(a, b) {
  return a + b;
}

// Datei: app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Moderne Funktionen (ES6+)

• Arrow Functions: const sum = (a, b) => a + b;
• Destructuring: const { name, age } = person;
• Spread & Rest Operator: const arr2 = [...arr1];
• Optional Chaining: user?.profile?.email
• Nullish Coalescing: value ?? "default"

Das JavaScript-Ökosystem

Frameworks und Bibliotheken

Node.js

Node.js macht es möglich, JavaScript außerhalb des Browsers zu verwenden – etwa für Backend-Server, APIs oder Kommandozeilen-Tools.

// Beispiel mit Node.js
const http = require("http");

http.createServer((req, res) => {
  res.write("Hallo Welt");
  res.end();
}).listen(3000);

Sicherheit und bewährte Praktiken

• Eingabewerte validieren (Schutz vor XSS)
• Vermeide den Einsatz von eval()
• Nutze HTTPS und Content Security Policies (CSP)
• Verwende aktuelle Frameworks mit regelmäßigen Sicherheitsupdates

Fazit

JavaScript ist heutzutage weit mehr als nur eine Sprache, um einfache Interaktivität auf Webseiten zu erzeugen. Sie ist eine vielseitige Programmiersprache, die sowohl im Frontend als auch im Backend ihre Anwendung findet. Wer sich mit JavaScript auskennt, hat Zugang zu einer breiten Palette moderner Entwicklungswerkzeuge und kann Webanwendungen, mobile Apps und sogar Desktop-Software entwickeln.