Kleiner JavaScript Kurs

Beispiele zur KI - Hilfe

Mit einem Klick auf den KI - Hilfebutton gelangst du auf die ChatGPT Seite. Dort kannst du Fragen stellen und dir beim Programmieren und HTML - Seiten Erstellen helfen lassen. Im Folgenden einige Beispiele für Fragen (Prompts), die ich ausprobiert habe.

Ich brauche ein JavaScript Programm, 
dass Zufallszahlen zwischen 1 und 6 erzeugt 
und die Zahl mit alert ausgibt.

Antwort:

function wuerfeln() {
  const zahl = Math.floor(Math.random() * 6) + 1;
  alert("Gewürfelte Zahl: " + zahl);
}

// Funktion aufrufen
wuerfeln();

ChatGPT erklärt außerdem, was die einzelnen Befehle genau machen.

Wie kann ich mit html das Bild "w1.gif" 
aus dem Ordner "images" anzeigen?

Antwort:

<img src="images/w1.gif" alt="Würfel zeigt 1" width="100">

ChatGPT erklärt alles und bietet noch folgendes an:

💡 Wenn du z. B. ein Bild je nach gewürfelter Zahl anzeigen willst, kann man das auch per JavaScript dynamisch machen. Soll ich dir zeigen, wie das geht?

Antworte mit "ja" und sieh dir das Ergebnis an

Erstelle mir eine zweidimensionale Liste für Javascript 
mit 10 englisch - deutsch Vokabeln für Schüler Gymnasium Klasse 6 
nach folgendem Muster: [["Tisch","table"], ["gehen","to walk"], ... ]

Antwort:

let vokabeln = [
  ["Tisch", "table"],
  ["gehen", "to walk"],
  ["Buch", "book"],
  ["schreiben", "to write"],
  ["Stuhl", "chair"],
  ["lesen", "to read"],
  ["Haus", "house"],
  ["sprechen", "to speak"],
  ["Fenster", "window"],
  ["lernen", "to learn"]
];

Wenn du in den Datensätzen noch eine Zahl brauchst, z.B. um die richtigen Antworten zu zählen, kannst du die Frage so ergänzen (als "Folgefrage")

Sehr gut. Bitte 100 Vokabeln. 
Außerdem jeden Datensatz um eine 0 ergänzen 
z.B. ["Tisch", "table", 0]

Probiere es aus.

Bei einem Klick auf ein Bild auf einer 
html Seite soll das Bild mit einem dicken, roten Rand 
(mit JavaScript) versehen werden.

Antwort:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Bild mit rotem Rand</title>
  <style>
    img {
      cursor: pointer;
      transition: border 0.3s ease;
    }

    .selected {
      border: 5px solid red;
    }
  </style>
</head>
<body>

  <h2>Klick auf das Bild:</h2>
  <img src="https://via.placeholder.com/150" alt="Beispielbild" onclick="markImage(this)">

  <script>
    function markImage(img) {
      img.classList.toggle('selected');
    }
  </script>

</body>
</html>

Wenn dir die Antwort nicht gefällt (z.B. weil du CSS Klassen nicht kennst), bitte um eine andere Lösung

geht das auch ohne eine css Klasse

Antwort:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Bild mit rotem Rand</title>
</head>
<body>

  <h2>Klick auf das Bild:</h2>
  <img src="https://via.placeholder.com/150" alt="Beispielbild" onclick="markImage(this)">

  <script>
    function markImage(img) {
      if (img.style.border === '5px solid red') {
        img.style.border = ''; // Rand entfernen
      } else {
        img.style.border = '5px solid red'; // Rand setzen
      }
    }
  </script>

</body>
</html>