lehrkraefte:blc:informatik:ffprg2-2024:refresher

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
lehrkraefte:blc:informatik:ffprg2-2024:refresher [2024/08/25 13:21] – [Strings] Ivo Blöchligerlehrkraefte:blc:informatik:ffprg2-2024:refresher [2024/08/26 10:08] (current) – [Arrays] Ivo Blöchliger
Line 1: Line 1:
 +====== Refresher ======
 +Folgende Aufgaben sollen helfen, die grundlegenden Elemente von JavaScript zu repetieren und zu festigen.
  
 +Ziel ist jeweils eine einfache Konsolenausgabe.
 +
 +Hilfe gibts im [[lehrkraefte:blc:informatik:ffprg1-2024:cheat-sheet|Cheat-Sheet]]
 +
 +===== Loops =====
 +Produzieren Sie folgende Ausgabe auf der Konsole:
 +<code txt>
 +10 im Quadrat ist 100
 +11 im Quadrat ist 121
 +12 im Quadrat ist 144
 +13 im Quadrat ist 169
 +14 im Quadrat ist 196
 +15 im Quadrat ist 225
 +16 im Quadrat ist 256
 +17 im Quadrat ist 289
 +18 im Quadrat ist 324
 +19 im Quadrat ist 361
 +20 im Quadrat ist 400
 +</code>
 +
 +Produzieren Sie folgende Ausgabe:
 +<code txt>
 ++---+---+---+---+---+---+---+---+
 +| 0 | 1 | 2 | 0 | 1 | 2 | 0 | 1 |
 ++---+---+---+---+---+---+---+---+
 +| 1 | 2 | 0 | 1 | 2 | 0 | 1 | 2 |
 ++---+---+---+---+---+---+---+---+
 +| 2 | 0 | 1 | 2 | 0 | 1 | 2 | 0 |
 ++---+---+---+---+---+---+---+---+
 +| 0 | 1 | 2 | 0 | 1 | 2 | 0 | 1 |
 ++---+---+---+---+---+---+---+---+
 +| 1 | 2 | 0 | 1 | 2 | 0 | 1 | 2 |
 ++---+---+---+---+---+---+---+---+
 +| 2 | 0 | 1 | 2 | 0 | 1 | 2 | 0 |
 ++---+---+---+---+---+---+---+---+
 +| 0 | 1 | 2 | 0 | 1 | 2 | 0 | 1 |
 ++---+---+---+---+---+---+---+---+
 +| 1 | 2 | 0 | 1 | 2 | 0 | 1 | 2 |
 ++---+---+---+---+---+---+---+---+
 +</code>
 +
 +===== Arrays =====
 +  * Produzieren Sie ein Array mit $n=20$ Elementen, das die Zahlen 30,29,28,27,... enthält.
 +  * Produzieren Sie ein Array, das die ersten $n=10$ Zeilen (jeweils als Array) des Pascaldreiecks enthält. Berechnen Sie dazu jeweils eine Zeile aus der vorhergehenden. Bonus für eine schöne dreieckige Ausgabe.
 +<WRAP round caution>
 +  * Produzieren Sie ein Array, das mit 100 ganzzahligen Zufallszahlen zwischen 0 und mit 99 gefüllt ist.  //Hinweise: ''Math.floor'', ''Math.random'', ''Array.from({length:100}, ...)''//
 +  * Aus einem Array mit zufälligen Zahlen entfernen Sie all jene, die durch 3 oder 5 teilbar sind. //Hinweis: Entweder ein neues Array bauen (push), oder die ''filter''-Methode gebrauchen.//
 +  * Aus zwei Arrays ''['Eichel', 'Rose', 'Schellen', 'Schilten']'', ''['6', '7', ... ,'König', 'Ass']'' produzieren Sie ein Array mit allen Jass-Karten: ['Eichel 6', 'Eichel 7',..., 'Rose Under', ... 'Schellen König', .. 'Schilten Ass'].
 +  * Programmieren Sie eine Funktion, die ein Array wie folgt zufällig ordnet: Für die erste Stelle wählt man ein beliebiges Element aus (evtl. auch das erste), und vertauscht die beiden Elemente miteinander. Aus den verbleibenden Elementen wählt man ein zufälliges aus und vertauscht es mit dem Element an zweiter Stelle etc.
 +</WRAP>
 +===== Funktionen =====
 +  * Wenn nicht schon so gelöst, schreiben Sie eine Funktion, die einem Pascaldreieck (wie oben) eine neue Zeile hinzufügt.
 +  * Schreiben Sie eine Funktion ''fortsetzen(folge)''. Das Argument ''folge'' ist ein Array, das aus mindestens 2 aufsteigenden, natürlichen Zahlen besteht. Zu berechnen ist die kleinste natürliche Zahl, die grösser als das letzte Element ist, und das die Summe eines eindeutigen Paares von Elementen des Arrays ''folge'' ist (d.h. es muss ein solches Paar geben, es darf aber kein zweites geben). Beginnt man mit ''[1,2]'' sieht die weitergeführte Folge wie folgt aus: ''[1, 2, 3, 4, 6, 8, 11, 13, 16, 18, 26, 28]'' (die 5 ist nicht Teil, weil es zwei Paare (1+4) und (2+3) gibt, um 5 zu erhalten).
 +
 +===== Strings =====
 +<WRAP round caution>
 +  * Zerlegen Sie einen String in ein Array mit den einzelnen Buchstaben. D.h. aus ''"Hallo"'' wird ''['H', 'a', 'l', 'l', 'o']''. //Es gibt eine String-Methode um String aufzu''split''ten!//
 +  * Gegeben ist als String eine Zeile mit Zahlen, jeweils durch Leerschläge getrennt. Machen Sie ein Array mit Zahlen (nicht Strings) daraus. Z.B. wird aus dem String ''"12 43 65 78"'' das Array ''[12, 43, 65, 78]''.  //Die Funktion ''Number'' macht aus einem String eine Zahl//.
 +</WRAP>
 +
 +===== Objects =====
 +<WRAP round caution>
 +<code javascript>
 +let wardrobes = {"Liam":{"doors":5,"drawers":12,"price":544},"Samuel":{"doors":5,"drawers":12,"price":549},"Cinthia":{"doors":2,"drawers":5,"price":278},"Demetrius":{"doors":2,"drawers":6,"price":275},"Shyann":{"doors":5,"drawers":10,"price":512},"Karl":{"doors":4,"drawers":9,"price":460},"Kimberly":{"doors":4,"drawers":10,"price":475},"Tatiana":{"doors":4,"drawers":9,"price":427},"Issac":{"doors":3,"drawers":8,"price":385},"Stewart":{"doors":5,"drawers":10,"price":496}};
 +</code>
 +  * Geben Sie die Namen aller Schränke aus, die 4 Türen haben.
 +  * Berechnen Sie die Summe aller Preise.
 +  * Fügen Sie neue Kästen hinzu, die es in allen Kombinationen von 2 bis 5 Türen und 0 bis 8 Schubladen gibt. Der Preis ergibt sich jeweils aus dem Dreissigfachen der Anzahl Türen plus das Zehnfache der Anzahl Schubladen. Die Kästen haben die Nämen "FlexBox-a-b", wobei a die Anzahl Türen und b die Anzahl Schubladen ist.
 +</WRAP>
 +===== Lösungen =====
 +
 +
 +<hidden Lösungsvorschlag>
 +<code javascript>
 +for (let i=10; i<21; i++) {
 +  console.log(`${i} im Quadrat ist ${i*i}`)
 +}
 +</code>
 +
 +
 +<code javascript>
 +let n=8;
 +let trenner = "+";
 +for (let x=0; x<n; x++) {
 +   trenner += "---+";
 +}
 +trenner += "\n";
 +feld = trenner;
 +for (let y=0; y<n; y++) {
 +   feld += "|"
 +   for (let x=0; x<n; x++) {
 +      feld += ` ${(x+y)%3} |`;
 +   }
 +   feld += "\n"+trenner;
 +}
 +console.log(feld);
 +
 +</code>
 +<code javascript>
 +let a = [];
 +let n = 20;
 +for (let i=0; i<n; i++) {
 +   a.push(30-i);
 +}
 +console.log(a);
 +</code>
 +<code javascript>
 +function addLine(a) {
 +  let last = a[a.length-1]; // Letzte Zeile
 +  let line = [];  // Neue Zeile
 +  for (let i=0; i<last.length+1; i++) {
 +    if (i==0 || i==last.length) {  // Am Rand eine 1 einfügen
 +      line.push(1);
 +    } else {
 +      line.push(last[i-1]+last[i]);  // Sonst die Summe der darüberliegenden Elemente
 +    }
 +  }
 +  a.push(line);  // Verändert das übergebene Array!
 +}
 +let pascal = [[1]];
 +for (let i=0; i<10; i++) {
 +   addLine(pascal);
 +}
 +console.log(pascal);
 +</code>
 +
 +<code javascript>
 +let a = Array.from({length:100}, ()=>Math.floor(Math.random()*100));
 +// Alternative:
 +a = new Array(100).fill(0).map(()=>Math.floor(Math.random()*100));
 +
 +// Alternative 2 (ohne fancy Array-Methoden):
 +a = [];
 +for (let i=0; i<100; i++) {
 +  a.push(Math.floor(Math.random()*100));
 +}
 +</code>
 +
 +<code javascript>
 +// Voraussetzung: in a ist ein Array gespeichert
 +let b = a.filter((e)=>!(e%3==0 || e%5==0));
 +
 +// Alternative ohne filter:
 +let b = [];
 +for (let z of a) {
 +  if (z%3!=0 && z%5!=0) {
 +     b.push(z);
 +  }
 +}
 +</code>
 +
 +
 +<code javascript>
 +function fortsetzen(folge) {
 +  let paare = 0;
 +  kandidat = folge[folge.length-1];
 +  while (paare!=1) {
 +    kandidat+=1;
 +    paare = 0;
 +    for (let i=0; i<folge.length-1; i++) {
 +      for (let j=i+1; j<folge.length; j++) {
 +        if (folge[i]+folge[j]>=kandidat) {
 +          if (folge[i]+folge[j]==kandidat) {
 +            paare+=1;
 +          }
 +          break;
 +        }
 +      }
 +      if (paare>1) {
 +        break;
 +      }
 +    }
 +  }
 +  return kandidat;
 +}
 +let ulam=[1,2];
 +for (let i=0; i<10; i++) {
 +  ulam.push(fortsetzen(ulam));
 +}
 +console.log(ulam);
 +</code>
 +
 +
 +
 +<code javascript>
 +function jasskarten() {
 +    let farben = ['Eichel', 'Rose', 'Schellen', 'Schilten'];
 +    let werte = ['6', '7', '8', '9', '10', 'Under', 'Ober', 'König', 'Ass'];
 +
 +    let karten = [];
 +    for (let f of farben) {
 +        for (let w of werte) {
 +            karten.push(`${f} ${w}`);
 +        }
 +    }
 +    return karten
 +}
 +
 +// Diese Funktion verändert das Array a direkt!
 +function mischen(a) {
 +    for (let i=0; i<a.length; i++) {
 +        let j = Math.floor(Math.random()*(a.length-i));
 +        // Elemente vertauschen
 +        let temp = a[i];
 +        a[i] = a[j];
 +        a[j] = temp;
 +        // Kurzform:  [a[i],a[j]] = [a[j], a[i]];
 +    }
 +    return a;
 +}
 +console.log(mischen(jasskarten());
 +</code>
 +
 +<code javascript>
 +let a = "Hallo".split("");
 +
 +let zeile = "12 43 65 78";
 +// map nimmt als Argument eine Funktion, die für jedes Element (und seinen Index und das Array)) aufgerufen wird. Weil Number nur ein (das erste) Argument nimmt, funktioniert diese Kurzform
 +let l = zeile.split(" ").map(Number);
 +// Explizite Definition einer anonymen Funktion (Diesmal sicher nur ein Argument)
 +let l = zeile.split(" ").map((e)=>Number(e));
 +// Alternative ohne map:
 +let l = []
 +for (let z of zeile.split(" ")) {
 +   l.push(Number(z));
 +}
 +</code>
 +
 +<code javascript>
 +function objectHandling() {
 +    let wardrobes = {"Liam":{"doors":5,"drawers":12,"price":544},"Samuel":{"doors":5,"drawers":12,"price":549},"Cinthia":{"doors":2,"drawers":5,"price":278},"Demetrius":{"doors":2,"drawers":6,"price":275},"Shyann":{"doors":5,"drawers":10,"price":512},"Karl":{"doors":4,"drawers":9,"price":460},"Kimberly":{"doors":4,"drawers":10,"price":475},"Tatiana":{"doors":4,"drawers":9,"price":427},"Issac":{"doors":3,"drawers":8,"price":385},"Stewart":{"doors":5,"drawers":10,"price":496}};
 +    let total = 0;
 +    for (let name in wardrobes) {
 +        total += wardrobes[name].price;
 +        if (wardrobes[name].doors==4) {
 +            console.log(`Kasten ${name} hat 4 Türen`);
 +        }
 +    }
 +    console.log(`Alle Kästen kosten ${total}`);
 +
 +    for (let doors=2; doors<=5; doors++) {
 +        for (let drawers=0; drawers<=8; drawers++) {
 +            let name = `FlexBox-${doors}-${drawers}`;
 +            wardrobes[name] = {"doors":doors, "drawers":drawers, "price": 30*doors+10*drawers};
 +        }
 +    }
 +
 +    console.log(wardrobes);
 +}
 +objectHandling();
 +</code>
 +</hidden>