Orga

Wir sehen uns nur noch zwei Stunden pro Woche!

Belehrungen

Wichtige Tools

Webentwicklung

Technologien in WPU

Dritte jetzt neue Technologie: JavaScript

Aufgaben

Lies den Artikel über die Rollen der drei Technologien auf selfhtml
Fertige eine Tabelle an, die nach folgendem Schema funktioniert:

Abkürzung	richtiger Name	Nutzen und Zweck
HTML
CSS
JS

JavaScript

Das ist eine vollwertige Programmiersprache!

Aufgaben (als Code along)

Erstelle mit KI eine freundliche Webseite, die auch schick aussieht.
Binde drei Bilder ein, die alle relativ klein dargestellt werden.
Ergänze JS-Code mit dem man die Größe verändert, sobald man mit dem Mauszeiger darüber schwebt.

Code Snippets

HTML-Datei

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" sync></script>
    <title>Test</title>
    <style>
        img
        {
            width:200px;
        }
    </style>
  </head>
  <body>
    <img src="01_Technologien.png" id="bild1">
  </body>
</html>

JS-Datei

'use strict';

document.addEventListener('DOMContentLoaded', function ()
{
    alert("Ich heiße dich herzlich Willkommen!");
    document.getElementById('bild1').addEventListener('pointerover', zoom1_in);
    document.getElementById('bild1').addEventListener('pointerleave', zoom1_out);

});

function zoom1_in()
{
    var dasBild1 = document.getElementById('bild1');
    dasBild1.style.width = "400px";
}

function zoom1_out()
{
    var dasBild1 = document.getElementById('bild1');
    dasBild1.style.width = "200px";
}

Teste den Code

!large Zwischenergebnis als ZIP-Archiv

Ein schlechtes Beispiel

Im Folgenden geht es darum, dass man das Konzept, das ihr bisher verfolgt habt, ins Absurde weiterdenkt. Gleichzeitig nähern wir uns der Idee eines Memoryspiels.

Aufgaben

Lade das Absurdes Beispiel ZIP-Archiv herunter und entpacke es.
Erkläre einem Mitschüler, weshalb das Beispiel schlecht ist.
Schreibe eine Mail an Deinen Lehrer, in welcher Du erklärst, weshalb das Beispiel so absurd ist.

Code along

https://gcm.schule/material/2026/informatik/wpu9/dev/fliegendespferd.html

Ziel: Levels - also dynamische Anzahl an Bildern.
Ziel: Aus Liste an Bildern zufällig ziehen.
Ziel: Erkennen, ob zwei gleiche Bilder gewählt wurden.

Vorbereitung der Klassenarbeit

Transparenzdokument

Eine Webseite skizzieren
Steuerelemente platzieren
Steuerelementen IDs zuweisen
EventListener entwerfen, die den IDs zugeordnet werden, vorgegebene Funktionalität
Beispielcode als Vorlage verwenden
Wichtige Verwendungszwecke für JavaScript nennen
Erklären, was ein Event ist
Beschreiben, was ein EventListener in JavaScript im Allgemeinen tut

Achtung, jetzt kommt ein Projekt

https://makecode.microbit.org/?lang=DE

Einführung und Editor
Ziele für diese Stunde
- Gruppen bilden (es gibt fünf Micro:Bits), Namen festlegen
- 30 Minuten den m:b entdecken.
- Erfolgreich: Eigener Code läuft (z.B. Projektname auf LED-Display)
- Projektvorschlag ausarbeiten
- Ziel des Projektes
- Welche Teile werden benötigt?
- Arbeitsaufteilung: Wer macht was?

Editoren

Achtung, bei den Script-Sprachen werden nicht alle Sprachbestandteile vom m:b unterstützt.

Blöcke / Python / JavaScrip: https://makecode.microbit.org/#editor
Nur Python: https://python.microbit.org/v/3

Vor langer langer Zeit in einer weit entfernten...

Viel Zeit ist vergangenen seit der letzten Projektarbeit.

Gibt es Praktika, die etwas mit Informatik zu tun haben?
Orientiert euch im Projekt: Was ist der Arbeitsstand?
Erstellt eine TODO-Liste.
Stellt mir die Liste vor (einzeln, nicht vor Allen).
Erstellt einen Zeitplan, indem ihr die Punkte der TODO-Liste 90-Minuten-Slots zuordnet.
Stellt mir den Zeitplan vor.

Zeitfenster: 2 x 90 Minuten Unterrichtszeit bis zur Vorstellung (+ heute)