www.plusplanet.de
Schulinfos von F. Töns


10.12.2019
Klausurthemen
* Alle ausgeteilten Materialien sollen verstanden worden sein. Man muss sie nicht auswendig können. Aber man sollte wissen was drin steht.
* Grundlagen der JavaScript-Programmierung:
** Wissen, wie man eine if-Anweisung und eine for-Schleife benutzt.
** Wissen was eine Variable ist, und wie man ihr einen Wert zuweist.
** Wissen wie man Bedingungen für if-Anweisungen formuliert
** Unterschied zwischen = (gleich) und == (gleichgleich) kennen
** Wissen was eine Funktion ist und wie man sie aufruft. Was ist ein Rückgabeparameter (return)? Was ist ein Funktionsargument (was kommt in die Funktion als Parameter hinein)?
** Was ist eine Zeichenkette (eine Reihe von Zeichen in einem sogenannten String), wie greift man auf einzelne zeichen zu?


Hilfsmittel während der Klausur:
* JavaScript Mini Cheat Sheet



<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript: Hallo Welt</title>
  <script>
    'use strict';
    
    var gruss = "Moin";  // globale Variable

    // Zeichen an Stelle index im String str mit replacement ersetzen
    // Die Arbeitsweise dieser Funktion ist nicht Teil der Klausur
    function replace(str,index, replacement) {
        return str.substr(0, index) + replacement+ str.substr(index + replacement.length);
    }

    // Hilfsfunktion die überprüft, ob die Eingabe eine Zahl ist, mit der man rechnen kann
    // Die Arbeitsweise dieser Funktion ist nicht Teil der Klausur
    function isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    // liefert eine Zufallszahl zwischen von (incl) und bis (excl)
    function zufall(von, bis) {
        var rdm;
        var differenz = bis - von;
        rdm = Math.random();
        rdm = Math.floor(rdm * differenz);
        rdm = von + rdm;
        return rdm;
    }

    // Zufallszahl
    function zufallszahl() {
        var erg = zufall(0,100);
        document.getElementById("ausgabe").textContent = "Zufallszahl von 0 bis 99 : " +erg;
    }

    // gibt einen Gruß für den angegebenen Namen aus.
    function gruessen() {
        var name; // lokale Variable
        name = document.getElementById("eingabe").value;
        document.getElementById("ausgabe").textContent = gruss + " " +name;
        // ohne "return" ist der Rückgabewert "undefined"
    }

    // kehrt die Eingabe um
    function reverse() {
        var name;
        name = document.getElementById("eingabe").value;
        for(var i = 0; i < (name.length / 2); i++) {
            var zeichen1 = name[i];
            var zeichen2 = name[name.length-1-i];
            name = replace(name,i,zeichen2);
            name = replace(name,name.length-1-i,zeichen1);
        }
        document.getElementById("ausgabe").textContent = "Umgedreht: " +name;
    }

    // rotiert die Eingabe um eine Position
    function rotate() {
        var name;
        var erg = "";
        name = document.getElementById("eingabe").value;
        for(var i = 1; i < (name.length); i++) {
            erg = erg + name[i];
        }
        erg = erg + name[0]
        document.getElementById("ausgabe").textContent = "Rotiert: " +erg;
    }

    // quadriert die Eingabe (wenn möglich)
    function square() {
        var name;
        var erg;
        name = document.getElementById("eingabe").value;
        if( isNumeric(name) ) {
            erg = name * name;
        } else {
            erg = "Fehler: "+name+" ist keine Zahl!";
        }
        document.getElementById("ausgabe").textContent = "Quadrieren: " +erg;
    }


    // Wird einmal zu Beginn ausgeführt.
    function init() {
        document.getElementById("ausgabe").textContent = "Wer ist da?";
    }

    window.onload = init;  // Nach Ladevorgang die Variablen initialisieren.

  </script><noscript>Sie haben JavaScript deaktiviert.</noscript>
  
</head>
<body>
    <p>Beispiele für JavaScript</p>
    <input id="eingabe" type="text" value="Dein Name?"><br>
    <button onClick="zufallszahl();">Zufallszahl</button>
    <button onClick="gruessen();">Gruß ausgeben!</button>  
    <button onClick="reverse();">umkehren</button>
    <button onClick="rotate();">rotieren</button>
    <button onClick="square();">quadratzahl</button>
    <div id="ausgabe" style="font-family: monospace;white-space: pre-line;" >Dummy-Text</div>
    Fragen für Checker:<br>
    Warum wird bei der Funktion reverse in der for-Schleife nur bis (name.length / 2) gezählt? Probiere mal aus, die "durch 2" zu entfernen und erkläre das Ergebnis!
</body>
</html>






24.09.2019

HTML und Co

Erzeuge zunächst mehrere HTML-Dokumente, zwischen denen (mit Links) Du hin und her springen kannst.

Lies dann nochmal die "HTML-Grundlagen"-Zettel und erledige die Übungen dort. Gerne auch mit eigenen Einfällen.
Ein mögliches Miniprojekt könnte sein, ein sehr einfaches "TicTacToe" zu bauen. Dafür könnte das Nachschlagen des "table"-Elements sinnvoll sein.




03.09.2019

Light-Bot

Das LightBot-Spiel: www.plusplanet.de/swf_lightbotMUELL/lightbot.html

Selbstprogrammierter Light-Bot-Simulator mit "Level-Designer":
http://www.plusplanet.de/lightbotsimulator/index.php

Demo-Level: https://pastebin.com/3QXMLrnG

Speichere folgenden Text als Textdatei (mit Namen test.pbm) auf den Desktop:

P4 144 16
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
zzzzzzzzOOOOOOOO
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz
OOOOOOOOzzzzzzzz



Daten im Zahlenformat anzeigen

Dafür gibt es z.B. einen Dienst im Internet: https://hexed.it/

Daten hörbar machen:

Download von Audacity, einem Audioeditor:
http://downloads.sourceforge.net/portableapps/AudacityPortable_2.1.1.paf.exe?download
Beliebige Daten können damit "hörbar" gemacht werden, indem man folgendes tut:
Datei->Importieren...->Raw-Audio
Dann erscheint ein Fenster mit Einstellungen (am Besten die Voreinstellungen unverändert lassen).

Daten sichtbar machen

Mit dem Programm IrfanView kann man Daten als Grafik interpretieren lassen, wenn man folgende Schritte befolgt:
Zunächst muss fügt man am Anfang der Textdatei folgende Zeile ein:
P4 200 150
(Dies ist notwendig, damit IrfanView die Datei als Grafikdatei im PBM-Format erkennt. Dabei bedeuten die Zahlen 200 und 150, dass das Bild 200 Pixel breit und 150 Pixel hoch ist)
Als nächstes muss man die Dateinamenserweiterung von .txt in .pbm umbenennen. Schließlich kann man diese Datei dann in IrfanView hineinladen.