Einstiegstest JavaScript

Auftrag

Martina Hostettler hat geschrieben, dass die Freiwilligen den Katalog für dich aus der Tabelle exportieren. «Nächste Woche hast du die Daten.» Ab Teil 1 arbeitest du mit diesen Daten in JavaScript. Bis dahin findest du heraus, welche Grundlagen sitzen und welche du auffrischen solltest.

Lernziele

Nach diesem Kapitel kannst du

• die Ausgabe von kurzem JavaScript-Code vorhersagen, ohne ihn auszuführen,
• einschätzen, welche Grundlagen von JavaScript du sicher beherrschst,
• die Einheiten der JS-Werkstatt auswählen, die du vor Teil 1 durcharbeitest.

Der Test

Vue setzt modernes JavaScript voraus. Wer beim Lesen von Vue-Code über ??, eine Pfeilfunktion oder eine Destrukturierung stolpert, hat für Vue selbst kaum noch Aufmerksamkeit übrig. Der Test prüft deshalb die Grundlagen aus WEB1 und ein paar Dinge, die dort vielleicht zu kurz kamen.

Der Test hat dreizehn Fragen und dauert etwa 20 Minuten. Zu jeder Frage gehört ein kurzes Programm. Lies es, ohne es auszuführen, und schreib in das Feld, was es in der Konsole ausgibt. Gibt das Programm mehrere Werte oder mehrere Zeilen aus, trennst du sie mit Leerzeichen. Gross- und Kleinschreibung zählen. Mit «Prüfen» siehst du sofort, ob deine Antwort stimmt, und bei einer falschen Antwort öffnet sich die Lösung. Unter dem Test erscheint eine Liste der Einheiten aus der JS-Werkstatt, die zu den Fragen passen, die noch nicht geklappt haben. Den Test bewertet niemand, er ist nur für dich.

Frage 1

Welchen Typ meldet typeof für null?

q01.mjs

console.log(typeof null)

Lösung

typeof null ergibt object. Das ist ein Fehler aus der ersten Version von JavaScript, der nie korrigiert wurde, weil sonst bestehender Code nicht mehr liefe. Ob ein Wert null ist, prüfst du deshalb direkt mit value === null. Mehr dazu in der Einheit Variablen, Typen und Operatoren.

Frage 2

Ein Ding hat kein Pfand, das Feld steht auf 0. Was gibt das Programm aus?

q02.mjs

const deposit = 0
console.log(deposit || 20, deposit ?? 20)

Lösung

|| nimmt den rechten Wert, sobald der linke als falsch gilt, und 0 gilt als falsch. ?? nimmt den rechten Wert nur, wenn der linke null oder undefined ist. Die Ausgabe ist 20 0. Für ein Pfand, das 0 sein darf, ist ?? die richtige Wahl. Mehr dazu in der Einheit Variablen, Typen und Operatoren.

Frage 3

Wie gross ist die Summe am Schluss?

q03.mjs

let total = 0
for (const deposit of [20, 50, 30]) {
  if (deposit > 40) continue
  total += deposit
}
console.log(total)

Lösung

continue beendet den aktuellen Durchgang und springt zum nächsten Wert. Die 50 ist grösser als 40 und wird übersprungen, es bleiben 20 und 30. Die Summe ist 50. Mehr dazu in der Einheit Kontrollstrukturen.

Frage 4

Was gibt der dritte Aufruf von next zurück?

q04.mjs

function createCounter() {
  let count = 0
  return () => {
    count += 1
    return count
  }
}

const next = createCounter()
next()
next()
console.log(next())

Lösung

createCounter gibt eine Funktion zurück, die sich die Variable count merkt, auch nachdem createCounter fertig ist. Das heisst Closure. Alle drei Aufrufe erhöhen dieselbe Variable, der dritte gibt 3 zurück. Mehr dazu in der Einheit Funktionen und Gültigkeitsbereich.

Frage 5

Der Parameter hat einen Standardwert. Was kommt bei undefined heraus und was bei null?

q05.mjs

function label(name = 'unbekannt') {
  return name
}

console.log(label(undefined), label(null))

Lösung

Ein Standardwert gilt nur, wenn ein Argument fehlt oder undefined ist. null ist ein Wert, den jemand absichtlich übergibt, deshalb bleibt er stehen. Die Ausgabe ist unbekannt null. Mehr dazu in der Einheit Funktionen und Gültigkeitsbereich.

Frage 6

Welches Pfand hat first am Schluss?

q06.mjs

const first = { deposit: 20 }
const second = first
second.deposit = 50
console.log(first.deposit)

Lösung

const second = first kopiert nicht das Objekt, sondern den Verweis darauf. Beide Variablen zeigen auf dasselbe Objekt, darum ist die Änderung über second auch über first zu sehen. Mehr dazu in der Einheit Objekte und Arrays.

Frage 7

Welche zwei Namen gibt das Programm aus?

q07.mjs

const [first, , third] = ['Zelt', 'Leiter', 'Beamer']
console.log(first, third)

Lösung

Beim Destrukturieren eines Arrays zählt die Position. Die leere Stelle zwischen den beiden Kommas überspringt das zweite Element, third bekommt das dritte. Die Ausgabe ist Zelt Beamer. Mehr dazu in der Einheit Objekte und Arrays.

Frage 8

Was bleibt vom Text übrig?

q08.mjs

console.log('raclette'.toUpperCase().slice(0, 4))

Lösung

toUpperCase liefert einen neuen String in Grossbuchstaben. slice(0, 4) nimmt die Zeichen an den Stellen 0 bis 3, die Stelle 4 gehört nicht mehr dazu. Mehr dazu in der Einheit Strings und Template Literals.

Frage 9

Die Methode wird ohne Objekt davor aufgerufen. Was gibt das Programm aus?

q09.mjs

const shop = {
  name: 'Lorraine Commons',
  getName() {
    return this.name
  },
}

const getName = shop.getName
try {
  console.log(getName())
} catch (error) {
  console.log(error.name)
}

Lösung

getName ist hier eine Funktion, die nichts mehr von shop weiss. Beim Aufruf ohne Objekt davor ist this in einem Modul undefined, und this.name wirft einen TypeError. Der catch-Block gibt den Namen des Fehlers aus. Mehr dazu in der Einheit Klassen und this.

Frage 10

In welcher Reihenfolge erscheinen die Ausgaben?

q10.mjs

try {
  console.log('a')
  throw new Error('b')
} catch (error) {
  console.log(error.message)
} finally {
  console.log('c')
}

Lösung

Der try-Block gibt a aus und wirft dann einen Fehler. Das Programm springt in den catch-Block, der die Meldung b ausgibt. Der finally-Block läuft immer, mit oder ohne Fehler, und gibt c aus. Die Antwort ist a b c. Mehr dazu in der Einheit Fehler behandeln.

Frage 11

Der Listener hängt an der Liste, geklickt wird auf den letzten Eintrag. Was gibt die Seite in der Konsole aus?

q11.html

<!doctype html>
<ul id="catalog"></ul>
<script>
  const list = document.querySelector('#catalog')
  for (const name of ['Zelt', 'Leiter']) {
    const entry = document.createElement('li')
    entry.textContent = name
    list.append(entry)
  }
  list.addEventListener('click', (event) => console.log(event.target.textContent))
  list.lastElementChild.click()
</script>

Lösung

Ein Klick auf ein Element steigt im DOM nach oben, über die Liste bis zum Dokument. Der Listener auf der Liste bekommt ihn deshalb auch. event.target ist das Element, auf das geklickt wurde, also der zweite Eintrag «Leiter». Mehr dazu in der Einheit DOM und Events.

Frage 12

Welchen Text erzeugt JSON.stringify?

q12.mjs

console.log(JSON.stringify({ name: 'Zelt', note: undefined }))

Lösung

JSON kennt den Wert undefined nicht, darum lässt JSON.stringify das Feld note weg. Schlüssel und Strings stehen in doppelten Anführungszeichen, und ohne weitere Argumente gibt es keine Leerzeichen. Die Ausgabe ist {"name":"Zelt"}. Mehr dazu in der Einheit JSON und Datenformate.

Frage 13

Wie zeigt Intl.NumberFormat ein Pfand von 20 Franken?

q13.mjs

const chf = new Intl.NumberFormat('de-CH', { style: 'currency', currency: 'CHF' })
console.log(chf.format(20))

Lösung

Mit style: 'currency' setzt Intl.NumberFormat den Code der Währung vor den Betrag und zeigt zwei Stellen nach dem Punkt. Bei Geldbeträgen steht in der Schweiz ein Punkt, kein Komma. Mehr dazu in der Einheit Zahlen und Daten formatieren.

So geht es weiter

Hast du alle Fragen richtig beantwortet, bist du für Teil 1 bereit. Die JS-Werkstatt bleibt trotzdem da, zum Nachschlagen, wenn ein Kapitel ein Thema voraussetzt.

Für jede Einheit, die der Test dir nennt, rechnest du mit etwa einer halben Stunde. Lies die Erklärungen, führe die Beispiele aus und löse mindestens die Aufgabe «Einstieg». Plane die Einheiten vor dem Beginn von Teil 1 ein, im Unterricht bleibt dafür wenig Zeit. Wenn du nach einer Einheit unsicher bist, frag im Unterricht nach.

Auftrag

Martina Hostettler meldet sich, sobald die Daten da sind. Bis dahin prüfst du mit dem Kompetenzraster, ob du für Teil 1 bereit bist.