2026-07-06 14:25:41 +02:00
parent 549233f42a
commit ee4d6f0d41
226 changed files with 114478 additions and 20 deletions
--- a/02_advanced/unterricht/tag16/02_mehrdim-array/index.html
+++ b/02_advanced/unterricht/tag16/02_mehrdim-array/index.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mehrdimensionales Array</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Mehrdimensionales Array</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const gradesTable = [
+        ['Name', 'Mathematics', 'English', 'Biology'],
+        ['Anna', 85, 92, 78],
+        ['Ben', 90, 88, 84],
+        ['Clara', 76, 95, 89],
+      ];
+
+      console.log(gradesTable[3][2]); // => 95
+      console.log(['Clara', 76, 95, 89][2]); // => 95
+      console.log(gradesTable[1][3]); // => 78
+
+      // Access to Anna's math grade
+      const annasMathGrade = gradesTable[1][1]; // => 85
+
+      // Access to Clara's biology grade
+      const clarasBioGrade = gradesTable[3][3]; // => 89
+
+      // Change Anna's math grade to 88
+      gradesTable[1][1] = 88;
+      gradesTable[1].splice(1, 1, 88);
+
+      // Add a new row for another student
+      gradesTable.push(['David', 82, 79, 91]);
+
+      // TODO: optionale Übung: gradeTable in gradesObject über eigene Funktion parseToObj() umwandeln. Tipp:
+
+      const gradesTableObj = [
+        {
+          name: 'Anna',
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 85,
+            },
+            {
+              name: 'English',
+              score: 92,
+            },
+            {
+              name: 'Biology',
+              score: 78,
+            },
+          ],
+        },
+        {
+          name: 'Ben',
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 76,
+            },
+            {
+              name: 'English',
+              score: 95,
+            },
+            {
+              name: 'Biology',
+              score: 89,
+            },
+          ],
+        },
+        {
+          name: 'Clara',
+          scores: [
+            {
+              name: 'Mathematics',
+              score: 85,
+            },
+            {
+              name: 'English',
+              score: 92,
+            },
+            {
+              name: 'Biology',
+              score: 78,
+            },
+          ],
+        },
+      ];
+
+      // ===============
+
+      const shoppingList = [
+        ['Fruits', 'Apples', 'Bananas', 'Oranges'],
+        ['Vegetables', 'Carrots', 'Broccoli', 'Spinach'],
+        ['Dairy', 'Milk', 'Cheese', 'Yogurt'],
+      ];
+
+      console.log(shoppingList);
+
+      // Access to the second type of vegetable
+      const secondVegetable = shoppingList[1][2]; // => 'Broccoli'
+
+      // ===============
+
+      const inventory = [
+        [
+          // Category: Electronics
+          ['Shelf 1', 'Laptop', 10],
+          ['Shelf 2', 'Smartphone', 25],
+        ],
+        [
+          // Category: Clothing
+          ['Shelf 1', 'T-Shirts', 50],
+          ['Shelf 2', 'Jeans', 30],
+        ],
+        [
+          // Category: Groceries
+          ['Shelf 1', 'Milk', 100],
+          ['Shelf 2', 'Bread', 80],
+        ],
+      ];
+
+      const inventoryObj = {
+        floors: [
+          {
+            name: 'Electronics',
+            shelfs: [
+              {
+                name: 'Shelf 1',
+                products: [
+                  {
+                    name: 'Laptop',
+                    quantity: 10,
+                  },
+                  {
+                    name: 'Smartphone',
+                    quantity: 25,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      console.log(inventoryObj.floors[0].shelfs[0].products[0].quantity); // => 10
+
+      console.log(inventory[1][1][2]); // => 30
+
+      // Increase the number of laptops
+      inventory[0][0][2] += 5; // New quantity: 15
+
+      // Add a new shelf to a category
+      inventory[1].push(['Shelf 3', 'Pants', 20]);
+
+      console.log(inventory);
+
+      // ===============
+
+      // A small 2x2 image with RGB colors
+      const image = [
+        [
+          // Row 1
+          [255, 0, 0], // Pixel 1: Red
+          [0, 255, 0], // Pixel 2: Green
+        ],
+        [
+          // Row 2
+          [0, 0, 255], // Pixel 3: Blue
+          [255, 255, 0], // Pixel 4: Yellow
+        ],
+      ];
+
+      console.log(image);
+
+      // Access to the green component of the second pixel
+      const greenComponent = image[0][1][1]; // => 255
+    </script>
+  </body>
+</html>