Modul 288: Programmiertechniken im
Webfrontend einsetzen

Woche 8

Colin Schmid

​colin.schmid@gbchur.ch

Mediamatiker/in EFZ

Überblick

🔭 Wochenrückblick

🎯 Lernziele

🗓️ Termine

🌲 Input: DOM

🛸 Begleitetes Selbststudium: Learn JavaScript: Requests

🌐 Input: JSON (falls Zeit reicht)

📔 Lernjournal

🎙️ Schlussrunde

🔭 Wochenrückblick

const person = {
  name: "Petra",
  age: 20,
};

person.age = 21;
person.city = "Zurich";

console.log(person);

A) { name: "Petra", age: 20 }
B) { name: "Petra", age: 21 }
C) { name: "Petra", age: 21, city: "Zurich" }
D) { name: "Petra", age: 20, city: "Zurich" }

🔭 Wochenrückblick

const person = {
  name: "Petra",
  age: 20,
};

person.age = 21;
person.city = "Zurich";

console.log(person);

A) { name: "Petra", age: 20 }
B) { name: "Petra", age: 21 }
C) { name: "Petra", age: 21, city: "Zurich" }
D) { name: "Petra", age: 20, city: "Zurich" }

🎯 Lernziele

🟠

🟢

🟢

🟢

🟢

🟠

🔴

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟠

🟠

🟠

🟠

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🗓️ Termine

• W08: Dienstag, 30.9.
• Dienstag, 7.10. – Herbstferien, kein Unterricht
• Dienstag, 14.10. – Herbstferien, kein Unterricht
• W09: Dienstag, 21.10. – Aufsicht Herr Putzi
• W10: Dienstag, 28.10.

🌲 Input: DOM

Wählen Sie zu zweit eine Frage und beantworten Sie diese in wenigen Sätzen:

• Was ist das DOM?
• Welches sind die wichtigsten Methoden zur Veränderung des DOM?
• Was sind Beispiele für Events, um Benutzerereignisse zu verarbeiten?
• Wie wird der Browser-Inspektor verwendet, um das DOM zu inspizieren? Demonstrieren Sie.

• Was ist das DOM?

Das DOM ist der Bauplan einer Website.
Es macht das HTML Dokument zu einer Baumstruktur.
Mit JS können wir auf Elemente zugreifen und beispielsweise ihre Farbe ändern.
Kurzgesagt verbindet das DOM JS und HTML.

• Welches sind die wichtigsten Methoden zur Veränderung des DOM?

Mit Methoden lässt sich das DOM verändern.
Wir können beispielsweise Elemente mit Selektoren auswählen und Elemente anpassen.
Sowohl das HTML, Attribute oder Styles.

getElementById()

• Was sind Beispiele für Events, um Benutzerereignisse zu verarbeiten?

Ein Event ist ein Ereignis im Browser.
Wenn man beispielsweise einen Button klickt oder scrollt.

Der Browser bemerkt diese Ereignisse und JS reagiert auf Ereignisse.
So kann beispielsweise ein Formular an den Server gesendet werden. Oder beim Scrollen neuer Content geladen werden.

• Wie wird der Browser-Inspektor verwendet, um das DOM zu inspizieren? Demonstrieren Sie.

CMD+Alt+I oder F12 öffnet den Inspector im Browser.

Im Elements Tab sieht man die HTML Elemente und kann diese verändern.
Diese Änderungen werden aber nicht gespeichert.

https://www.codecademy.com/enrolled/courses/learn-javascript-requests

(Link ist auf Teams)

🛸 Begleitetes Selbststudium:
Learn JavaScript: Requests

🌐 Input: JSON (Falls Zeit reicht)

💬 Wöchentliche Check-ins

Jeder Lernende hat 3 - 5 min Gesprächszeit mit mir über:

• Was haben Sie diese Woche gelernt?
• Was waren Herausforderungen?
• Zeigen Sie mir Ihren Code.

🧮 Schlüssel:

📔 Lernjournal

Jeder Lernende schreibt jede Woche nach der Lektion eine kurze Reflektion. Aufwand: 5 – 10 min, könnte sein:

• Frei geschriebener Absatz
• Auflistung von Gelerntem
• Eine bestehende Frage
• Code Snippet, auf welches man stolz ist

🧮 Schlüssel:

🎙️ Schlussrunde

Was haben wir heute gelernt?

Was nehmen wir mit?