MINT lernen

Zusammenfassung

Alles Wichtige zu HTML, CSS und JavaScript auf einen Blick — Befehle, Regeln und die Stellen, an denen in der Arbeit Punkte hängen.

1

Das Web als Bühne

HTML liefert den Inhalt, CSS das Aussehen, JavaScript das Verhalten (2.1).

HTML-Elemente

Start-Tag, Inhalt, End-Tag; Attribute stehen im Start-Tag.

<h1>…</h1> · <a href="…">

Grundgerüst

Im head stehen Angaben über die Seite, im body steht alles Sichtbare.

<head> · <title> · <body>

CSS-Regel

Selektor wählt aus, Deklarationen gestalten.

.karte { color: blue; }

Selektoren

Element, Klasse mit Punkt, ID mit Raute.

p · .info · #logo

Box-Modell

content, padding, border, margin — von innen nach außen.

padding: 10px; · margin: 12px;

Einbinden

CSS im head, JavaScript am Ende des body; Ausgaben in der Konsole (F12).

<script src="app.js"></script>
Sichtbare Breite eines Kastens
B = width + 2 · padding + 2 · border
Den Platz in der Zeile bestimmt zusätzlich 2 · margin.

Konsole zuerst

Wenn eine Seite „nichts“ tut: Konsole öffnen. Rote Meldungen nennen Datei und Zeile.

2

Grundlagen von JavaScript

Variablen, Datentypen, Verzweigungen, Schleifen, Arrays und Funktionen (2.2).

Variablen

let für veränderliche Werte, const für feste. = heißt „bekommt den Wert“.

let n = 0; · n = n + 1;

Datentypen

number, string, boolean; typeof fragt den Typ ab.

Number("12") · typeof x

Verzweigung

Nur der Block der ersten wahren Bedingung läuft.

if (…) { } else if (…) { } else { }

Vergleiche

=== prüft Wert und Typ; && und, || oder, ! nicht.

x >= 12 && x < 18

Schleifen und Arrays

Index ab 0, letzter Index length − 1.

for (let i = 0; i < a.length; i++)

Funktionen

Parameter in der Definition, Argumente beim Aufruf, Ergebnis mit return.

function f(x) { return x * 2; }
Die wichtigste Typregel
"12" + 8 → "128" · Number("12") + 8 → 20
Sobald bei + ein Text beteiligt ist, wird verkettet. Andere Rechenzeichen wandeln um.

Tracetabelle

Bei jeder Aufgabe mit Schleifen oder Variablen: nach jeder Zeile alle Werte notieren. Das findet fast jeden Fehler.

3

Interaktive Webseiten

Elemente finden und ändern, auf Ereignisse reagieren, Eingaben auswerten (2.3).

Elemente finden

getElementById ohne Raute, querySelector mit CSS-Selektor.

document.querySelector("#titel")

Elemente ändern

Text, Stil und Klassen setzen.

el.textContent = "…"; · el.classList.add("x");

Ereignisse

Die Funktion wird ohne Klammern übergeben.

knopf.addEventListener("click", f);

Formulare

value ist immer Text — erst umwandeln, dann prüfen.

let z = Number(feld.value); · isNaN(z)
Das Muster jeder Interaktion
Ereignis → Zustand ändern → Anzeige aktualisieren
Der Zustand liegt in einer Variablen außerhalb der Funktion, damit er zwischen den Ereignissen erhalten bleibt.

Eingaben nicht trauen

Leere Felder, Komma statt Punkt und Buchstaben immer abfangen: feld.value === "" || isNaN(z).

4

Die Regeln, an denen die Punkte hängen

In der Arbeit kosten diese drei Dinge am häufigsten Punkte.

Regel 1 — Paare schließen

Jedes Start-Tag braucht sein End-Tag, jede Klammer ihr Gegenstück, jedes Anführungszeichen sein zweites. Zuletzt geöffnet wird zuerst geschlossen.

Regel 2 — Text ist keine Zahl

Werte aus Anführungszeichen, value und textContent sind Text. Vor dem Rechnen und Vergleichen mit Number umwandeln.

Regel 3 — Programme Zeile für Zeile verfolgen

Bei Aufgaben zu Ausgaben oder Variablen schreibst du nach jeder Zeile alle Werte mit — bei Schleifen für jede Runde eine Zeile der Tracetabelle.

1AFB I — Reproduzieren10 Aufgaben› ?Selbsttest40 Fragen mit Auswertung›