Skip to content

8. 📘 Grundlagen JavaScript

Mit HTML hast du den Inhalt deiner Seite beschrieben und mit CSS das Aussehen. JavaScript benötigst du für Interaktion, also die Logik deiner Seite. JavaScript ist eine einfache Programmiersprache, die direkt im Browser ausgeführt (interpretiert) wird. Im Folgenden führe ich die wesentlichen Konzepte der Programmierung ein.

8.1 Variable

Eine Variable ist ein „Behälter“ für Informationen. Du kannst ihr einen Namen geben und ihr einen Wert zuweisen. Später kannst du diesen Wert wiederverwenden oder verändern.

let userName = "Anna";

➡️ Hier wird eine Variable namens userName erstellt und ihr der Text "Anna" zugewiesen.

8.1.1 if-Anweisung

Mit einer Verzweigung kannst du entscheiden, was passieren soll – abhängig vom Inhalt einer Variable oder einer bestimmten Bedingung.

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult yet.");
}

➡️ Wenn age größer oder gleich 18 ist, wird der erste Block ausgeführt. Sonst der zweite.

8.1.2 HTML + JavaScript direkt im <script>-Tag

<!DOCTYPE html>
<html>
<head>
  <title>First JavaScript</title>
</head>
<body>
  <h1>Check the Console</h1>

  <script>
    console.log("Hello from JavaScript!");

    let userName = "Anna";
    console.log("Hello, " + userName);

    let age = 20;
    if (age >= 18) {
      console.log("You are an adult.");
    } else {
      console.log("You are not an adult yet.");
    }
  </script>
</body>
</html>

👀 Tipp: Öffne die Entwicklertools deines Browsers mit F12 → Reiter „Konsole“.

8.2 JavaScript in externer Datei

Zur besseren Übersicht lagern wir auch JavaScript in eine eigene Datei aus und binden diese in der html-Seite ein.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>
  <h1>Hello from an external file!</h1>

  <script src="script.js"></script>
</body>
</html>

script.js

console.log("External script is working.");

let favoriteColor = "blue";
console.log("My favorite color is " + favoriteColor);

Zur Vereinfachung binden wir die JS-Datei immer am Ende der html-Seite ein. Eigentlich gehört sie in den head.

js-Datei im head

Die HTML-Datei wird vom Browser zeilenweise interpretiert.

8.3 DOM-Manipulation – Interaktion

Mit getElementById kannst du auf jedes HTML-Element deiner Seite zugreifen und es verändern.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>DOM Interaction</title>
</head>
<body>
  <h1 id="pageTitle">Welcome!</h1>
  <button onclick="changeTitle()">Click me</button>

  <script src="dom.js"></script>
</body>
</html>

dom.js

function changeTitle() {
  let heading = document.getElementById("pageTitle");
  heading.textContent = "You clicked the button!";
}

8.4 Mini-Quiz mit einfacher Logik

quiz.html

<!DOCTYPE html>
<html>
<head>
  <title>Mini Quiz</title>
</head>
<body>
  <h1>Mini Quiz</h1>
  <p>What is the capital of France?</p>
  <input id="userAnswer" type="text" />
  <button onclick="checkAnswer()">Check Answer</button>
  <p id="resultText"></p>

  <script src="quiz.js"></script>
</body>
</html>

quiz.js

function checkAnswer() {
  let input = document.getElementById("userAnswer").value.toLowerCase();
  let result = document.getElementById("resultText");

  if (input === "paris") {
    result.textContent = "Correct!";
  } else {
    result.textContent = "Wrong answer. Try again!";
  }
}

Versuche nun, dein eigenes Quiz zu erstellen.

8.5 Material

screenshot
Beispiel: Geometrie