Dein Fortschritt:
0 / 0 Aufgaben
1
Übungsaufgaben
Zehn interaktive Übungen zum Klicken, Ziehen und Knobeln — von AFB I bis AFB III. Jede Übung gibt dir sofort Rückmeldung; wenn du nicht weiterkommst, helfen die gestuften Tipps.
A1
Richtig eingebunden?
AFB IDie Datei app.js liegt im selben Ordner wie index.html. Nenne alle Zeilen, die sie korrekt einbinden.
Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
Das Attribut heißt
src (source), und <script> braucht immer ein End-Tag — auch wenn nichts dazwischen steht. href gehört zu Links und CSS-Dateien.Ansatz: JavaScript-Dateien bindet das script-Element ein.
Weiter: Vergleiche mit dem Link auf eine CSS-Datei: dort heißt das Attribut anders.
A2
Stimmt's? — Die Konsole
AFB IFünf Aussagen über Konsole und Programmablauf. Gib an, ob sie stimmen.
5 Aussagen nacheinander. Eine falsche Einschätzung reicht — dann startest du die Serie mit „Neue Runde“ neu.
Die Konsole ist das Werkzeug der Entwickler — Besucher der Seite sehen sie normalerweise nie.
Ansatz: Wo erscheinen die Ausgaben von console.log?
Weiter: Denke an die Rolle von Kommentaren.
A3
Wie viele Zeilen?
AFB Iconsole.log("A");
// console.log("B");
console.log("C"); console.log("D");Bestimme, wie viele Zeilen in der Konsole erscheinen.
Rechne selbst und trage das Ergebnis ein — Enter prüft direkt.
„B“ steht in einem Kommentar und wird nicht ausgeführt. Zwei Anweisungen in einer Quelltextzeile erzeugen trotzdem zwei Ausgabezeilen: A, C, D.
Ansatz: Was passiert mit auskommentierten Zeilen?
Weiter: Jedes console.log erzeugt eine eigene Zeile — egal, wie der Quelltext aussieht.
A4
Das erste Programm
AFB IIStelle dar, in welcher Reihenfolge man vorgeht, bis „Hallo“ in der Konsole steht.
Ziehe die Karten in die richtige Reihenfolge — mit der Tastatur: ↑/↓ verschiebt, Shift+↑/↓ wechselt nur den Fokus.
1Datei
app.js im Projektordner anlegen
2
console.log("Hallo"); hineinschreiben
3in
index.html vor </body> das script-Element ergänzen
4beide Dateien speichern
5
index.html im Browser öffnen bzw. neu laden
6mit F12 die Konsole öffnen und nachsehen
Wichtig ist vor allem: erst speichern, dann (neu) laden — der Browser kennt nur den gespeicherten Stand.
Ansatz: Ohne Datei kein Inhalt, ohne Einbinden keine Ausführung.
Weiter: Der Browser liest die Dateien von der Festplatte.
A5
Rechnung, Text oder Fehler?
AFB IIOrdne jede Anweisung ihrer Ausgabe zu.
Ziehe jede Karte in den passenden Korb — oder wähle sie mit Enter aus und drücke dann die Ziffer des Korbs (0 legt sie zurück).
1gibt eine Zahl aus
2gibt verketteten Text aus
3bricht mit Fehler ab
Steht auf einer Seite von
+ ein Text, wird verkettet. Console mit großem C und Hallo ohne Anführungszeichen sind unbekannte Namen → ReferenceError.Ansatz: Suche zuerst nach Anführungszeichen.
Weiter: JavaScript unterscheidet Groß- und Kleinschreibung.
A6
Fehlersuche: Quizstart
AFB IIAnalysiere die Datei app.js — drei Zeilen sind falsch.
Klicke genau die fehlerhaften Zeilen an — die richtigen musst du stehen lassen.
Zeile 3 ist ein Syntaxfehler: Dann läuft gar keine Zeile, auch nicht die erste. Die anderen beiden Fehler fallen erst beim Ausführen auf.
Ansatz: Prüfe Anführungszeichen paarweise.
Weiter: Achte auf Groß- und Kleinschreibung.
A7
Drei Dateien, drei Aufgaben
AFB II MixOrdne zu, wofür jeder Baustein zuständig ist.
Klicke links einen Eintrag an und dann rechts den passenden — es entsteht eine Verbindungslinie. Mit der Tastatur: Enter zum Auswählen, ↑/↓ zum Wandern.
HTML sagt, was da ist, CSS, wie es aussieht, JavaScript, was passiert.
Ansatz: Erinnere dich an 2.1.1 und 2.1.2.
Weiter: link steht im head, script am Ende des body.
A8
Die Fehlermeldung lesen
AFB IIIconsole.log("Start");
// Test
console.log("Zwischenstand");
console.log(zahl * 2);
console.log("Ende");Die Konsole meldet Uncaught ReferenceError: zahl is not defined. Ermittle die Angaben.
Löse die Kette Schritt für Schritt: Erst wenn ein Schritt stimmt, wird der nächste freigeschaltet. Enter prüft.
- Zeilennummer, die die Konsole zum Fehler nennt:
- Anzahl der Ausgaben vor dem Fehler:
- Anzahl der Ausgaben, die nie erscheinen („Ende“ mitgezählt):
Auch Kommentarzeilen haben eine Nummer. „Start“ und „Zwischenstand“ erscheinen, in Zeile 4 bricht das Programm ab, „Ende“ erscheint nie.
Ansatz: Zähle jede Quelltextzeile, auch die mit //.
Weiter: Nach dem Abbruch läuft nichts mehr.
A9
Einbinden in Einzelteilen
AFB IIIVervollständige Quelltext und Programm.
Wähle in jedem Menü den passenden Eintrag und prüfe dann alle auf einmal.
<body>
<h1>Mein Quiz</h1>
<script ="app.js"></>
</body>
Begrüßung
console.("Los geht's!");
In HTML-Dateien heißen Kommentare
<!-- … -->, in Python #, in JavaScript //. print kennst du aus Python — in JavaScript heißt es console.log.Ansatz: Vergleiche mit dem Grundgerüst aus der Erklärung.
Weiter: Nicht jede Sprache kommentiert gleich.
A10
Nichts ändert sich
AFB III TrickBen ändert in app.js die Ausgabe von „Hallo“ zu „Servus“, aber die Konsole zeigt weiter „Hallo“. Beurteile, welche Ursachen möglich sind.
Mehrere Antworten sind richtig. Markiere alle zutreffenden und klicke dann auf „Prüfen“.
Das Programm läuft auch bei geschlossener Konsole — man sieht die Ausgaben nur nicht. Nach dem Öffnen erscheinen sie trotzdem. Bei jedem Neuladen wird die gespeicherte Datei neu ausgeführt.
Ansatz: Was muss passieren, damit der Browser die neue Fassung kennt?
Weiter: Die Konsole zeigt nur an — sie startet nichts.