JavaScript

JavaScript bringt Verhalten in Webseiten. Während HTML Struktur liefert und CSS gestaltet, reagiert JavaScript auf Benutzerinteraktionen und verändert Inhalte dynamisch.

Typische Aufgaben

JavaScript kann:

• auf Klicks reagieren
• Texte ändern
• Elemente hinzufügen oder entfernen
• Formulare prüfen
• Daten von APIs laden
• modale Fenster öffnen
• Quizfragen anzeigen
• Farben oder Layouts verändern

DOM

Das DOM ist die strukturierte Darstellung der HTML-Seite im Browser. JavaScript kann über das DOM Elemente finden und verändern.

const button = document.getElementById('send')
const output = document.getElementById('output')

button.addEventListener('click', () => {
  output.textContent = 'Button wurde geklickt'
})

Events

Events sind Ereignisse, auf die JavaScript reagieren kann.

Beispiele:

• click
• input
• submit
• keydown
• mouseover

Beispiel: Button

<button id="hello">Click me</button>

const button = document.getElementById('hello')

button.addEventListener('click', () => {
  alert('Hallo, willkommen auf der Webseite!')
})

Dynamischer Inhalt

JavaScript kann HTML-Inhalt erzeugen:

const main = document.getElementById('main-content')

main.innerHTML = `
  <article>
    <h2>Willkommen</h2>
    <p>Dieser Inhalt wurde mit JavaScript eingefügt.</p>
  </article>
`

API-Daten

Spätere Webanwendungen laden oft Daten aus APIs:

const response = await fetch('https://example.com/api/questions')
const data = await response.json()

Wachsende Komplexität

Mit größeren Projekten entstehen neue Themen:

• Komponenten
• State Management
• Routing
• Build-Tools
• Frameworks wie React, Vue, Angular oder Svelte
• Backend mit Node.js