Orga

Wir sehen uns nur noch zwei Stunden pro Woche!

Belehrungen

• Regeln im NAWI-Fachraum
• Regeln im Computerraum
• Unterschriften
• Operatoren
• Kriterien für die mündliche Bewertung

Wichtige Tools

Kennenlernen

1. Welche Computer nutzt du?
2. Welche Technologien nutzt du?
3. Welche Sprachen hast du kennengelernt?
4. Welche Projekte fandest du interessant?
5. Was möchtest du in Informatik lernen?
6. In welchen Kriterien für die mündl. Bewertung siehst du deine Stärken?

Webentwicklung

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:

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";
}

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 programmiert ist.
3. Schreibe eine Mail an Deinen Lehrer, in welcher Du erklärst, weshalb das ein schlechtes Beispiel für Programmierung ist.

Um eine allgemeine Funktion zu schreiben, die auf alle möglichen HTML-Elemente angewendet werden kann, verwendet man Event-Delegation.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Event-Delegation mit benannter Funktion</title>
  <style>
    button { margin: 4px; }
  </style>
</head>
<body>

  <div id="container">
    <button>Knopf 1</button>
    <button>Knopf 2</button>
    <button>Knopf 3</button>
  </div>

  <p id="ausgabe"></p>

  <script>
    function wer_bin_ich(event) {
      if (event.target.tagName !== 'BUTTON') return;

      document.getElementById('ausgabe').textContent =
        'Geklickt: ' + event.target.textContent +
        ' (currentTarget: ' + event.currentTarget.id + ')';
    }

    const container = document.getElementById('container');
    container.addEventListener('click', wer_bin_ich);

    // Listener kann jetzt jederzeit entfernt werden:
    // container.removeEventListener('click', handleContainerClick);
  </script>

</body>
</html>

Aufgaben

1. Überführe den JS-Code in eine eigene Datei und registriere sie im Kopf des HTML-Dokumentes
2. Probiere aus, was passiert, wenn Du beliebig viele Knöpfe ergänzt.
3. Dokumentiere Deine Erkenntnisse in einer Mail an Deinen Lehrer in der Du die beiden veränderten Dateien hochlädst.
4. Überführe das Konzept auf das Beispiel mit dem Pferde-Memory.

Exkurs Programmieren lernen

Hausaufgabe: Spiele alle Levels durch von https://compute-it.toxicode.fr/ und https://silentteacher.toxicode.fr/

Erkläre auf Basis des Gelernten folgende Konzepte:

• Anweisung (Befehl)
• Variable
• Schleife
• Verzweigung
• Funktion

Wir beginnen mit den ersten Levels eines Roboterspiels: https://gcm.schule/jsrobot

Level 1

Hier lernt man die Grundfunktionen kennen. Außerdem lernt man, die verschiedenen Tools zu nutzen.

Achtung: Wenn man etwas programmiert hat, muss man es auch erklären können. Alle Programme werden am Stundenende per Mail an den Lehrer gesendet. Wenn man früher fertig wird, darf man auch früher eine Mail schicken.

Challenges

Sammle keine Coins!

und

Sammle exakt vier Coins!

Have a lot of fun!