Schiller Informatik AG

Über die AG

• Wir treffen uns jeden Freitag
• Zur Zeit 7./8. Stunde, aber vielleicht auf 8./9. Stunde verschieben?
• Wir lernen vor allem Programmieren
• Lernen durch probieren, nicht durch studieren
• Durch Bilder und Spiele, wenn es geht
• Und durch Faulheit, vor allem bei Mathe
• Am Ende des Jahres kannst Du ein kleines Projekt machen
• Wenn es heute Spaß macht, erzähle es Deinen Freund/inn/en
• Dieses Mal wollen wir uns auf Corona-Pannen vorbereiten (Lernraum, Video)

Teil 1: Schnuppern ins JavaScript

• Für Anfänger
• HTML, CSS, JavaScript—die Bausteine des Internet
• HTML: Inhalt
• CSS: Aussehen
• JavaScript: Verhalten
• Hier anfangen: modul2.html
• Danach hier weitermachen: modul3.html

Teil 2: Corona

• Start: 8. Stunde
• Für Fortgeschrittene
• Etwas Programmiererfahrung oder Mut zum Mitmachen
• Weniger “Hand holding”
• Helft Euch gegenseitig!
• Die folgenden Slides sind nur für Teil 2

Exponentielles Wachstum

• Im Frühjahr 2020 verdoppelte sich die Anzahl der Corona-Infizierten in vielen Ländern jede Woche
• Nehmen wir an: Woche 1—ein Fall
• Woche 2: zwei Fälle
• Woche 3: vier Fälle
• Woche 4: acht Fälle
• Ok, was ist das Problem?
• Wieviele Fälle nach 10 Wochen?
• Wieviele Fälle nach 20 Wochen?
• Wieviele Fälle nach 30 Wochen?
• Programmieren bringt uns weiter

Wachstum programmieren

• Gehe zu JSFiddle
• Tippe folgendes in das JavaScript-Fenster

  var faelle = 1
  var woche = 1
  console.log({woche, faelle})
  faelle = 2 * faelle
  woche = woche + 1
  console.log({woche, faelle})
  faelle = 2 * faelle
  woche = woche + 1
  console.log({woche, faelle})
  faelle = 2 * faelle
  woche = woche + 1
  console.log({woche, faelle})
  

• Auf Run drücken
• In Console (beta) nachsehen
• Wieviele Fälle in Woche 4?
• Tipp: Eine bessere Console ist in the Browser Development Tools (Strg+Alt+J)

Zur Schleife schreiten

• Wir wiederholen immer

  faelle = 2 * faelle
  woche = woche + 1
  console.log({woche, faelle})
  

• In eine Schleife hinein:

  faelle = 1
  woche = 1
  while (woche <= 10) {
    faelle = 2 * faelle
    woche = woche + 1
    console.log({woche, faelle})
  }
  

• Wieviele Fälle nach 10 Wochen?
• Nach 20 Wochen? (Ändere die Schleife!)
• Nach 30 Wochen? (Ändere die Schleife!)
• Wan wurden das mehr als die Bevölkerung von Deutschland (80 Millionen)?
• Bei JSFiddle immer darauf achten, das Programm zu sichern (Strg+S).
• Nummer in der Adresse merken (z.B. https://jsfiddle.net/cayhorstmann/o6rf3xs1/18/)

Mehr Realismus

• Besseres Modell: Jeden Tag Infizierte/Genesene/Tote/Anfällige modellieren
• Nach 14 Tagen ist die Krankheit überstanden

  neugenesene = infizierte * 1 / 14
  genesene = genesene + neugenesene
  infizierte = infizierte - neugenesene
  

• 1% der erkrankten stirbt. Also jeden Tag

  sterberate = 0.01
  neugestorbene = infizierte * sterberate / 14
  gestorbene = gestorbene + neugestorbene
  

• Jeder infizierte steckt 3 Leute an (der R₀- Wert). Also jeden Tag

  infektionsrate = 3
  neuinfizierte = infizierte * infektionsrate / 14
  anfaellige = anfaellige - neuinfizierte
  infizierte = infizierte + neuinfizierte
  

• In einer Schleife

  tag = 1
  while (tag <= 365) {
  
  
  
  
  
     console.log({tag, anfaellige, infizierte, gestorbene, genesene})
     tag = tag + 1
  }
  

Programm zusammenbauen

• Vor der Schleife die Variablen deklarieren

  tag = 1
  anfaellige = 80000000
  infizierte = 100
  gestorbene = 0
  genesene = 0
  

• In der Schleife, erst die neuen Werte:

  neugenesene = ...
  neugestorbene = ...
  neuinfizierte = ...
  

• Dann die alten Variablen aufarbeiten:

  tag = tag + 1
  anfaellige = anfaellige - neuinfizierte
  infizierte = infizierte + ... - ...
  gestorbene = ...
  geheilte = ...
  

• Und dann console.log
• Was passiert nach 365 Tagen?

Noch mehr Realismus

• Das konnte immer noch nicht stimmen. Irgendwann ist doch die ganze Bevölkerung immun.
• Problem: Infizierte werden nicht weniger, selbst wenn fast alle genesen sind
• Lösung: Die neu infizierten proportional zu den anfälligen machen. Vor der Schleife:

  bevoelkerung = anfaellige + infizierte
  

  In der Schleife:

  neuinfizierte = infizierte * infektionsrate / 14 * anfaellige / bevoelkerung
  

• Wie sieht es jetzt nach einem Jahr aus?

Tabellen

• Die Zahlen sind nicht so einfach in der Konsole zu sehen
• Wir haben HTML und können eine Tabelle machen:

  <table id="daten">
    <tr>
      <td>Tag</td><td>Anfällige</td><td>Infizierte</td><td>Gestorbene</td><td>Geheilte</td>
    </tr>
    <tr>
      <td>1</td><td>80000000</td><td>100</td><td>0</td><td>0</td>
    </tr>
  </table>
  

• Kopiere die Tabelle in das HTML. Jetzt müßte sie zu sehen sein.
• Diese Funktion fügt eine neue Zeile an:

  function neuezeile(...inhalt) {
     var zeile = document.createElement('tr')
     for (let wert of inhalt) {
       var zelle =  document.createElement('td')
       zelle.textContent = Math.trunc(wert)
       zeile.appendChild(zelle)
     }
     var tabelle = document.getElementById('daten')
     tabelle.appendChild(zeile)
  }
  

• Kopiere die Funktion an den Anfang des JavaScript
• Ersetze console.log(...) durch

  neuezeile(tag, anfaellige, infizierte, gestorbene, genesene)
  

• Was passiert jetzt? Warum?
• Um die Tabelle besser sehen zu können, füge folgendes zum CSS ein:

  td { background: pink; text-align: right; }
  

• Nächstes Mal: Grafik