Tutorials

Tutorial: Externe Python-Dateien in HTML mit PyScript importieren

Melden

Hier ist ein ausführliches Tutorial, wie du externe Python-Dateien in dein HTML-Dokument mit PyScript einbindest.

PyScript ermöglicht es, Python-Code direkt im Browser auszuführen. Oft ist es jedoch sauberer, den Python-Code in separaten Dateien zu speichern, anstatt ihn direkt in das HTML-Dokument zu schreiben. In diesem Tutorial lernst du zwei Wege kennen, wie du das umsetzen kannst.

1. Vorbereitung: PyScript in HTML einbinden

Bevor du externe Dateien laden kannst, musst du das PyScript-Framework in den <head>-Bereich deiner HTML-Datei einfügen. Kopiere dazu folgende Zeilen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>PyScript Tutorial</title>
    <!-- PyScript CSS & JS -->
    <link rel="stylesheet" href="https://pyscript.net/releases/latest/core.css" />
    <script type="module" src="https://pyscript.net/releases/latest/core.js"></script>
</head>
<body>
    <!-- Hier kommt dein Inhalt hin -->
</body>
</html>

2. Methode A: Direkte Einbindung einer Datei (Einfach)

Wenn du nur eine einzige Python-Datei hast, die beim Laden der Seite ausgeführt werden soll, kannst du das Attribut src verwenden.

Schritt 1: Erstelle eine Python-Datei (hallo.py)

print("Hallo aus einer externen Datei!")

Schritt 2: Binde sie im HTML ein Verwende das Tag <script type="py"> mit dem src-Attribut:

<body>
    <h1>Mein PyScript Projekt</h1>
    <script type="py" src="hallo.py" config='{"packages":[]}'></script>
</body>

3. Methode B: Importieren von Modulen (Fortgeschritten)

Wenn du Funktionen aus einer externen Python-Datei in einer anderen Python-Logik nutzen möchtest (ähnlich wie ein import in Python), musst du die Datei in der Konfiguration registrieren.

Schritt 1: Erstelle die Datei mit Funktionen (rechner.py)

def addiere(a, b):
    return a + b

Schritt 2: Konfiguration und Import im HTML Damit PyScript weiß, woher es die Datei laden soll, nutzen wir das <py-config> Tag oder ein Inline-JSON-Objekt. Hier sagen wir PyScript, dass es die Datei rechner.py "fetchen" (holen) soll.

<body>
    <h1>Rechnen mit PyScript</h1>
    <div id="ausgabe"></div>

    <!-- Konfiguration: Datei registrieren -->
    <script type="py" config='{"fetch": [{"files": ["rechner.py"]}]}'>
        # Jetzt kannst du die externe Datei wie ein normales Modul importieren
        from rechner import addiere

        ergebnis = addiere(10, 5)

        # Ausgabe im Browser anzeigen
        from pyscript import display
        display(f"Das Ergebnis ist: {ergebnis}", target="ausgabe")
    </script>
</body>

4. Wichtige Hinweise

  • Lokaler Server: PyScript kann externe Dateien aus Sicherheitsgründen oft nicht laden, wenn du die HTML-Datei einfach per Doppelklick im Browser öffnest (file:// Protokoll). Nutze einen lokalen Server (z. B. mit der VS Code Erweiterung "Live Server" oder python -m http.server im Terminal).
  • Dateipfade: Achte darauf, dass die Python-Dateien im selben Ordner wie deine HTML-Datei liegen oder die Pfadangaben in der Konfiguration korrekt angepasst sind.
  • Groß-/Kleinschreibung: Python ist case-sensitive. Stelle sicher, dass die Dateinamen exakt mit den Import-Befehlen übereinstimmen.

Zusammenfassung

  • Nutze <script type="py" src="datei.py"> für die direkte Ausführung.
  • Nutze den Bereich fetch in der Konfiguration, um Dateien als Module importierbar zu machen.

Viel Erfolg bei deinem Projekt!

0