Beispiele & Anfangsumgebungen
Unsere Vorhaben beginnen fast immer mit einem Beispiel. Neue Funktionalitäten werden anhand kleiner Programme erkundet und ausprobiert. Später starten wir oft auch mit einer etwas längeren — teilweise unvollständigen — Umgebung, und konzentrieren uns auf einen noch fehlenden Aspekt. Diese einfachen (und auch einige nicht ganz so einfache) Beispielprogramme sind hier gesammelt. Markierungen:
- Einführende Beispiele, mögliche Reihenfolge,
- Ausgangspunkt für weiterführende Projekte,
- Sonstiges, anderweitig interessante Beispiele.
Rechnerisches
- Eins und eins
Variablen, Zuweisung, Rechnung; Klick & Reaktion; Ausgabe in HTML-Elemente - Plutimikation
Eingabe von Zahlenwerten, Rechen- und Zuweisungsoperatoren → Umrechner - Nichtrechner
Umrechnungen: Ausführung direkt bei Eingabe - Bis Hundert
for-Schleife; Aneinanderreihung von Zeichenketten → Rechnerisches - Kleiner, Lexi,
if-else-Anweisungen, Vergleichs-Operatoren & -Ausdrücke → Rechnerisches - Modulo
while-Schleife, Modulo-Operator → Rechnerisches - Potenzen
while-Schleife, Potenzfunktion → Rechnerisches - Teiler
Geschachtelte Schleifen & Anweisungen → Rechnerisches - f: x → x
for-Schleife, Tabellenelemente → Wertetabellen - Einhalb, Dreiviertel
Objekte: Eigenschaften, Methoden, Konstruktoren - Häh?
Endliche Rechengenauigkeit, Gegenbeispiele - kgV - Warum?
Nicht endende Schleife (leere Eingabe, Bruchzahlen), Gegenbeispiel - Kreis (Skizzen, zip-Archiv)
komplexere Rechner, → Geometrie, Berechnungen an Figuren - Keinzins
komplexere Rechner, → Zins & Zinseszins - Säule
Säulendiagramm → Diagramme - Tortenstück
Tortendiagramm → Diagramme - ZoomIn
Lokale Vergößerung einer Grafik → Fraktale, Apfelmännchen, Julia-Mengen - Nebel
Punktsequenz → Fraktale, Barnsley Fern
Musikalisches
- Cabaret
Einbindung einer mp3-Audiodatei auf einer Webseite - WDR 5
Internetradio, Zugriff auf einen Audio-Livestream - Plop
Audiocontext, Dateien einlesen, Script-gesteuerte Wiedergabe - PloPluPlop (Geräusche-Sammlung, Soundfonts)
Sequenzen von Geräuschen → Gruselmusik - RecordPlop
… mit Aufnahme, download als .ogg Datei. - Freizeichen
Oszillatoren → Gequietsche - Notiert
Musikschrift als SVG-Grafik
Künstlerisches
- Bunt
CSS style-Eigenschaften dynamisch ändern - Sehr bunt
Farbauswahl-element, RGB-Farbcodierung, hexadezimale Farbdefinition - Schnecke
Einbindung von Bildern (u.a. als Bitmaps, z.B. Fotos im jpg-Format) auf einer Webseite - Drachen
Einbindung eines mp4-Videos auf einer Webseite - Ikse-S & Ikse-C
Skript-gesteuerte Grafik, SVG versus Canvas - Leeres Bäumchen
SVG-Grafik → Tannenbäumchen - Blinker
SVG-Grafik mit Bitmap-Hintergrund → Magische Bilder - Linie, Markise
Canvas-Grafik → Tartans - Cam-C
Kamerazugriff, Fotos aufnehmen & abspeichern (jpg), Farbänderungen → Kamera, gefiltert - Cam-XY
Kamerazugriff, Fotos aufnehmen & abspeichern (jpg), Bildtransformationen → Kamera, gefiltert
Sprachliches
- ÄÖÜ
(Sonder-) Zeichen in HTML und JavaScript, Unicode / UTF8 - blah.txt, blah0.html, blah1.html, blah2.html, blah3.html, blah4.html, blah5.html, blah.css
CSS-Stil-Anweisungen, Platzierung - XYZ, css, js, icon
Beispiele für eine Auswahl von HTML-Elementen, Webseite mit separaten Style-, Script- und Icon-Dateien - Hops (zip-Archiv)
Links zwischen (Positionen auf) lokalen Webseiten - Identität
Arrays: Zeichenweise Kopie eines Textes → Rumgeschlüsselt - Filter
Texteingabe, Zerlegung in Wörter → Sortierung - Zeugnisse
Objekte: Eigenschaften, Methoden, Konstruktoren
Kulinarisches
Physikalisches
- Bällchen
Bewegung eines Balles → Bälle - Schnelles Bällchen
… schnell oder langsam (Schalter) → Bälle - Plop Plop Plop (makeplop.js, makeplup.js)
… mit Plop (Ton) → Bälle - Flutsch
… Start durch Aufziehen → Bälle - Lagesensor
Abfrage, bei Geräten mit Orientierungssensor → Wasserwaage - Zentralkoordinaten
2-D Bewegung eines Bällchens in einem Zentralpotential → Zentralkraft - Dehn
Oszillation einer Feder → Schwingungen & Wellen, 0-D - Zupf
Schwingung einer Saite → Schwingungen & Wellen, 1-D - Platsch
Wellenausbreitung → Schwingungen & Wellen, 2-D - Gitter
→ Conway's Game of Life
Tüdelüt
- Hi!
HTML-Basisdokument, Elemente, mit style-Attributen → Motten - Klötzchen
CSS, Formatierung einzelner Text-Blöcke - Teilnehmer
Arrays (Referenz-Aspekt), Zufallszahlen - Links zum EGW
externe Links, Lesezeichen - Tasten
Reaktion auf Tastenanschlag, Codes - Bewegung
Tastensteuerung eines Bällchens vor einem Hintergrund (SVG, Tastenabfrage) - Gamecontroller
Erkennung und Abfrage - Uhr, digital
Steuerung zeitlicher Abläufe - Uhr, analog (Ticken: audio.js, Sounds)
Canvas-Grafik → Uhren - Datei
eine Text-Datei aus dem lokalen Dateisystem auswählen und einlesen - Werther, Grünstraße 10
iframe-Element, externe Karten (OpenStreetMap) → Lokalitäten - zur Eisdiele (Icons)
Karten: OpenStreetMap, OpenLayers-Bibliothek, Ortung, Anzeige von gpx-Tracks → Lokalitäten - 3D Viewer
einfache 3D Grafik → Flieger
