Grüner Campus Malchow / material / 2026 / informatik / wpu9
WPU 9 Informatik

Orga

Wir sehen uns nur noch zwei Stunden pro Woche!

Belehrungen

Wichtige Tools

gcm_pad !small

gcm_slides !small

Webentwicklung

Technologien in WPU

Dritte jetzt neue Technologie: JavaScript

Aufgaben

  1. Lies den Artikel über die Rollen der drei Technologien auf selfhtml
  2. 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)

  1. Erstelle mit KI eine freundliche Webseite, die auch schick aussieht.
  2. Binde drei Bilder ein, die alle relativ klein dargestellt werden.
  3. 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

  1. Lade das Absurdes Beispiel ZIP-Archiv herunter und entpacke es.
  2. Erkläre einem Mitschüler, weshalb das Beispiel schlecht ist.
  3. 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

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