Modul 288: Programmiertechniken im
Webfrontend einsetzen

Woche 7

Colin Schmid

​colin.schmid@gbchur.ch

Mediamatiker/in EFZ

Überblick

🔭 Wochenrückblick

🎯 Lernziele

🗓️ Termine

⌨️ Input: Entwicklungsumgebung einrichten

🌐 Input: Browser-Console und Browser-Debugger

🛸 Begleitetes Selbststudium: Learn Javascript (Objects)

🌲 Input: DOM

📔 Lernjournal

🎙️ Schlussrunde

🔭 Wochenrückblick

const animals = ["cat", "dog", "bird"];

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

A) ["cat", "dog", "bird"]
B)
cat
dog
bird
C) cat, dog, bird
D) bird, dog, cat

🔭 Wochenrückblick

const animals = ["cat", "dog", "bird"];

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

A) ["cat", "dog", "bird"]
B) 
cat 
dog 
bird
C) cat, dog, bird
D) bird, dog, cat

🔭 Wochenrückblick

const numbers = [1, 2, 3, 4];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum);

A) 10
B) 1234
C) 4
D) 0

🔭 Wochenrückblick

const numbers = [1, 2, 3, 4];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum);

A) 10
B) 1234
C) 4
D) 0

🎯 Lernziele

🟠

🟢

🟢

🟢

🟢

🟠

🔴

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟢

🟠

🟠

🟠

🟠

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🔴

🗓️ Termine

• W07: Dienstag, 23.9.
• W08: Dienstag, 30.9.
• Dienstag, 7.10. – Herbstferien, kein Unterricht
• Dienstag, 14.10. – Herbstferien, kein Unterricht
• W09: Dienstag, 21.10. – Stellvertretung
• W10: Dienstag, 28.10.

⌨️ Input: Entwicklungsumgebung einrichten

https://www.menti.com/aliogfju6txz

⌨️ Input: Entwicklungsumgebung einrichten

Ziel: Sie installieren VS Code und
machen sich damit vertraut.

1. Video schauen

2. Laden Sie auf Ihrem Gerät VS Code herunter und installieren es.

https://code.visualstudio.com/

Den Link sowie das Video finden Sie im Teams Modul W07.
 

⌨️ Input: Entwicklungsumgebung einrichten

3. Zu zweit erkunden Sie gemeinsam die Benutzeroberfläche. Erforschen Sie

folgende Funktionen und notieren Sie Ihre

Erkenntnisse je in Ihrem Lernjournal für heute:

• File tree (Datei-Explorer)

• Syntax highlighting (Syntaxhervorhebung)

• Autocomplete (Codevervollständigung)

• Extensions panel (Erweiterungen)

Notieren Sie für jeden Punkt 

• Was haben Sie ausprobiert?
• Wofür kann man diese
  ​Funktion im Alltag verwenden?
• Was war überraschend oder neu für Sie?

🌐 Input: Browser-Console und Browser-Debugger

Ziel: Sie lernen, wie Sie mit der Browser-Konsole und dem Debugger Fehler in JavaScript erkennen und analysieren.

1. Video schauen

YouTube: Chrome DevTools Crashkurs

(10 Minuten)

2. Öffnen Sie die DevTools Ihres Browsers

Rechtsklick auf eine Webseite > Untersuchen

Oder drücken Sie:

Strg+Shift+I (Windows)

Cmd+Option+I (Mac)

🌐 Input: Browser-Console und Browser-Debugger

3. Erforschen Sie zu zweit die folgenden Funktionen und notieren Sie Ihre

Erkenntnisse je in Ihrem Lernjournal für heute:

• Console tab (Konsole)
• Console.log() (Konsolenausgabe)
• Breakpoint setzen (Responsiveness)

Notieren Sie für jeden Punkt 

• Was haben Sie ausprobiert?
• Wofür kann man diese
  Funktion im Alltag verwenden?
• Was war überraschend oder neu für Sie?

🛸 Begleitetes Selbststudium:
Introduction to Javascript

Wenn Sie mit dem JS Kurs auf Codecademy fertig sind, beginnen Sie mit «Learn JavaScript: Requests»:

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

(Link ist auf Teams)

🌲 Input: DOM

Lesen Sie den Artikel «JavaScript in the Browser – How the Document Object Model (DOM) and Events Work»

Experimentieren Sie gleich in den DevTools Ihres Browsers. Machen Sie sich notizen.

https://www.freecodecamp.org/news/javascript-in-the-browser-dom-and-events/

(Link ist auf Teams)

💬 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?