Deine erste eigene Datei

Du hast in diesem Kurs zwanzig Abschnitte lang in einem Editor gearbeitet, der alles schon eingerichtet hatte. Diese Lektion räumt das letzte Hindernis weg: wie du dasselbe auf deinem eigenen Rechner aufsetzt.

Die kurze Antwort ist beruhigend unspektakulär. Ein Ordner, drei Dateien, ein Editor.

01 / 07Der Ordner

Leg irgendwo einen Ordner an, nenn ihn wie dein Projekt, und leg drei Dateien hinein: index.html, styles.css und app.js.

index.html heißt so, weil jeder Server diese Datei ausliefert, wenn niemand einen Dateinamen angibt. Die anderen beiden Namen sind Gewohnheit und keine Vorschrift, aber halt dich daran: Wer deinen Ordner öffnet, weiß dann sofort, wo er nachsehen muss.

02 / 07Wie die drei zusammenkommen

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mein Projekt</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Mein Projekt</h1>
    <p id="ausgabe"></p>

    <script>
      // Nur für dieses Beispiel: styles.css und app.js gibt es
      // hier nicht, die beiden Verweise laufen ins Leere. Auf
      // deinem Rechner liegen sie neben der index.html.
      document.getElementById("ausgabe").textContent =
        "Die Seite läuft.";
    </script>
  </body>
</html>

Das ist das Gerüst, und es ändert sich in den nächsten Jahren nicht mehr. Fünf Zeilen im head sind der ganze Zauber.

lang="de" sagt, in welcher Sprache die Seite ist. Das braucht der Screenreader für die Aussprache und die Suchmaschine für die Einordnung.

<meta charset="utf-8"> gehört als erstes in den head. Ohne die Angabe rät der Browser, und Umlaute werden zu Kästchen.

<meta name="viewport" …> sorgt dafür, dass die Seite auf dem Handy in der richtigen Größe ankommt. Ohne die Zeile zoomt das Telefon eine Desktop-Seite heraus, und alles ist winzig.

<link rel="stylesheet" href="styles.css"> holt das Aussehen, <script src="app.js" defer> das Verhalten. Das defer kennst du aus Lektion 1.2: Es lädt sofort und führt aus, wenn das Dokument steht.

<h1>Mein Projekt</h1>
<p><button id="knopf" type="button">Zählen</button></p>
<p id="ausgabe">Noch nicht gedrückt.</p>

body {
  font-family: system-ui, sans-serif;
  padding: 1rem;
}

#knopf {
  font: inherit;
  padding: 6px 12px;
}

const knopf = document.getElementById("knopf");
const ausgabe = document.getElementById("ausgabe");

let stand = 0;

knopf.addEventListener("click", () => {
  stand = stand + 1;
  ausgabe.textContent = `${stand} mal gedrückt.`;
});

Das zweite Beispiel zeigt, was in die beiden anderen Dateien kommt, und es läuft hier wirklich. Genau so sieht ein kleines Projekt aus.

03 / 07Warum du die Datei nicht doppelklicken solltest

Ein Doppelklick auf index.html öffnet sie im Browser, und für die ersten Schritte reicht das. In der Adresszeile steht dann file:///… statt https://…, und damit fangen die Probleme an.

Zwei Dinge funktionieren dort nicht, und der Browser sagt beides deutlich.

Module werden abgelehnt, mit Access to script at 'file:///…' from origin 'null' has been blocked. Für diese Frage hat deine Seite also gar keine Herkunft, und ohne Herkunft kann der Browser nicht entscheiden, ob die Datei nebenan zur selben Seite gehört.

fetch wird abgelehnt, mit Fetch API cannot load file:///… URL scheme "file" is not supported. Hier ist der Grund sogar noch einfacher: fetch spricht HTTP, und file ist kein HTTP.

Die Sache mit der Herkunft geht weiter, als man denkt. window.isSecureContext antwortet auf einer file://-Seite true, und location.origin antwortet file://, sieht also nach einer Herkunft aus. Für alles, was eine Erlaubnis braucht, zählt sie trotzdem nicht: Eine Erlaubnis lautet immer auf eine Herkunft, und welche das hier sein soll, weiß niemand. Das ist dieselbe Lage wie in Lektion 19.4, nur aus einem anderen Grund: Ein sicherer Kontext ist die Voraussetzung und nicht die Zusage.

Kurz: Für die ersten Schritte mit HTML und CSS reicht der Doppelklick. Sobald Module, fetch oder eine Erlaubnis dazukommen, brauchst du den Server aus dem nächsten Abschnitt, und dann ist die Frage auch ein für alle Mal erledigt.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Mit Modulen</title>

    <!-- type="module" wartet automatisch auf das fertige
         Dokument, ein defer ist hier überflüssig. -->
    <script type="module" src="app.js"></script>
  </head>
  <body>
    <h1>Mit Modulen</h1>
    <p id="ausgabe"></p>

    <script>
      document.getElementById("ausgabe").textContent =
        "Diese Seite braucht einen Server, siehe Text.";
    </script>
  </body>
</html>

// Datei: app.js. Zum Lesen, nicht zum Ausführen.
// Sie läuft erst, wenn die Seite über einen Server kommt.

import { grossAnfang } from "./werkzeuge.js";

document.getElementById("ausgabe").textContent =
  grossAnfang("es läuft.");

// Und daneben liegt werkzeuge.js:
//
//   export function grossAnfang(text) {
//     return text.charAt(0).toUpperCase() + text.slice(1);
//   }

Das dritte Beispiel ist genau der Fall, für den Lektion 18.4 dich hierher geschickt hat. Der Modulcode ist echt, und hier läuft er nicht, weil hinter der Seite kein Dateiserver steht. Auf deinem Rechner läuft er, sobald die Seite über einen Server kommt.

04 / 07Der lokale Server

Der klingt nach Aufwand und ist keiner. Es geht darum, dass die Dateien über http://localhost:… ausgeliefert werden statt über file://.

Fast jeder Editor bringt das mit, in VS Code heißt die passende Erweiterung „Live Server” und startet mit einem Klick unten rechts. Wer Node installiert hat, kommt mit npx serve im Projektordner ans selbe Ziel, und mit Python geht es über python3 -m http.server. Alle drei tun dasselbe: Sie liefern deinen Ordner unter einer http-Adresse aus.

Der Nebeneffekt ist der eigentliche Gewinn: Ein Live Server lädt die Seite bei jedem Speichern neu. Du siehst deine Änderung, ohne den Browser anzufassen.

05 / 07Die DevTools

Drück F12, oder mach einen Rechtsklick auf die Seite und wähl „Untersuchen”. Vier Reiter brauchst du am Anfang, und drei davon kennst du schon. Die Lektionsansicht hat sie nachgebaut, nur mit deutschen Beschriftungen an manchen Stellen.

Console ist der Reiter Console von hier, samt der Eingabezeile darunter: Fehler, deine Ausgaben, und ein Feld, in das du einen Ausdruck tippst.

Elements ist der Inspector von hier, also das Fadenkreuz in der Browser-Leiste. Es zeigt dasselbe, nur zusätzlich als Baum: das DOM, wie es gerade wirklich aussieht, mit allem, was dein Code eingefügt hat. Rechts daneben stehen die geltenden CSS-Regeln, das ist der Reiter Regeln im Auskunftsstreifen, und „Computed” daneben ist der Reiter Werte.

Network ist der Reiter Netzwerk. Jede Anfrage mit Status, Größe und Antwort. Dorthin gehst du, wenn ein fetch nicht das liefert, was du erwartest.

Sources ist der, den du noch nicht kennst, und es ist der Grund, hierherzukommen. Der Reiter Debug aus Lektion 4.1 zeigt dir hinterher, was in deinen Variablen stand. Sources zeigt es dir währenddessen: Du setzt einen Haltepunkt auf eine Zeilennummer, das Programm hält dort an, und du siehst dich in Ruhe um, bevor es weitergeht. Dazu kommt, dass deine Dateien dort unter ihren echten Namen liegen und nicht in einem zusammengebauten Dokument.

Der Rest sind Reiter, die du kennenlernst, wenn du sie brauchst. Fang mit diesen vier an, und nimm für drei davon mit, was du hier schon kannst.

06 / 07Ins Netz damit

Auch das ist einfacher geworden. Ein Ordner mit statischen Dateien braucht keine Werkzeugkette und keinen eigenen Server.

Du legst den Ordner in ein Git-Repository, verbindest es mit einem Anbieter wie GitHub Pages, Netlify oder Vercel, und ab da veröffentlicht jeder Push die neue Fassung. Alle drei sind für kleine Projekte kostenlos, und alle drei liefern gleich ein https mit, womit auch der sichere Kontext da ist.

07 / 07Der Punkt, an dem alle stolpern

Der Weg zwischen dem Kurs und dem eigenen Projekt ist kürzer, als er sich anfühlt, und er wird trotzdem selten gegangen.

Der häufigste Fehler dabei ist, zu groß anzufangen. Nimm nicht die App, die du eigentlich bauen willst. Nimm eine der Aufgaben aus diesem Kurs, kopier sie in deinen eigenen Ordner und bring sie dort zum Laufen. Das dauert zehn Minuten, und danach ist die Hürde weg.