top of page

Javascript

Arbeitsplan:

  1. Das Script-Tag <script></script>

  2. EVA-Prinzip

    1. EINGABE: Eingaben aus Formularen auslesen

    2. VERARBEITUNG: Zeichenketten zusammensetzen aus den getätigten Eingaben

    3. AUSGABE: Ausgaben mit document.getElementById().innerHTML in ein Ausgabefeld ausgeben

  3. Aufgabe: (Weihnachts-)Wunschzettel

    1. Artikel + Preis in Formularfeldern eingeben

    2. Vollständige Liste im Ausgabefeld anzeigen

  4. Eingabeprüfung

    1. if/else

    2. Die Funktion isNaN()

    3. true und false / Booleans

  5. Aufgabe: Erweiterung des Wunschzettels um Eingabeprüfung

  6. Vergleichsoperatoren

    1. Prüfen des Alters plus ggf. Weiterleitung auf andere HTML-Seite (windows.location)

    2. Prüfen anderer Fehleingaben und Ausgabe entsprechender Fehlermeldungen

    3. Programmieren einer Eingabe-Korrekturmöglichkeit

  7. Aufgabe: Programmieren Sie die folgenden Aufgabenstellungen:

Passwort-Prüfung

Erstellen Sie ein passendes Formular mit Eingabefeld für das Passwort und einen Button! Sobald der Button angeklickt wird, prüft eine Funktion das eingegebene Passwort.

  • Tipp

Natürlich können Sie auch zwei Eingabefelder zur Verfügung (Nutzer+Passwort) stellen und die Passwörter verdeckt in das Formular eingeben mit Sternchen
(Formularfeld vom type=password).

  • Ergänzung

Zweite Seite 'Passwort vergessen?' erreichbar über einen Link, Eingabe einer Emailadresse oder eines Benutzernamens zwecks Zusendung eines neuen Passworts

Captcha-Prüfung

Programmieren Sie eine Prüfung entsprechend des gegebenen Beispiels auf der folgenden Seite:

Interaktive Plakate

Was sind interaktive Plakate?

Beispiele siehe:

Plakate wurden früher auf Papier gedruckt und an eine Littfasssäule gehängt. Heute werden Werbeinhalte zunehmend in elektronischen Anzeigen und auf Webseiten plaziert. Die Werbebotschaften werden dabei häufig animiert oder anderweitig ergänzt.

Wir wollen interaktive Plakate zum Tag der offenen Tür herstellen, die

a) ausgehängt werden auf den Fluren der Schule

b) und gleichzeitig auf der Webseite der Schule zu finden sind.

​

Thema: Digitalisierung, z.B. in der Medienbranche ...

(Der folgende QR-Code führt zu den Ergebnissen einer Umfrage unter ME-Klassen - Mediengestalter/in Bild+Ton zu den aktuellen Veränderungen in der Branche)

Digitalisierung der Medienbranche

Die fertigen interaktiven Plakate werden Online zu sehen sein unter folgender URL: http://www.oszkim.de/mea1hj/TDOT2019/<Name des Abgabeordners>

Responsive Layout / Viewport

Für ein responsives Layout der HTML-Seite bieten sich für unsere 'Plakat'-Webseiten Flexboxen an - links, mittig und rechts auf dem grossen Bildschirm. Das komplette Plakat wird in einer der drei Boxen dargestellt, z.B. in der Mitte.  In den beiden anderen Boxen können sich z.B. Links zum Thema befinden oder kleine Anwendungen, die in Javascript programmiert werden. Bei reduzierter Anzeigefläche - z.B. auf dem Smartphone -  werden die Flexboxen dann untereinander angezeigt.

Media Queries:

Viewport:

Layering

a) Verwenden Sie mindestens zwei übereinanderliegende Elemente in Ihrem Plakat!

Siehe:

b) Verwenden Sie mindestens ein Foto oder eine Grafik mit Transparenz in Ihrem Plakat (PNG- oder vorzugsweise SVG-Format)!

c) Informieren Sie sich über die Eigenschaft z-index und probieren Sie sie aus!

QR-Code erstellen

Ergänzen Sie auf Ihrem Plakat einen QR-code
(mit der URL der Online-Variante Ihres interaktiven Plakats).

Verwenden Sie vorzugsweise einen QR-Code-Generator für SVG-Gafiken, 200x200px sind völlig ausreichend!

z.B.:

Probe-Ausdruck des Plakats

a) Ergänzen Sie einen 'Drucke'-Button (ausserhalb des Plakats). Die Funktion 'Drucke' soll den Inhalt des auszudruckenden DIV-Containers in einem PopUp-Fenster anzeigen und dessen Ausdruck in eine PDF-Datei ermöglichen (ohne Nacharbeit in weiteren Programmen).

Siehe:

b) Erstellen Sie eine PDF-Datei und stellen Sie diese zusätzlich zum Download bereit! (z.B. via Link) - nicht auf jedem Gerät gibt es einen Browser der neuesten Generation!

Copyrights checken

Nennen Sie in Ihrem Quellcode in Kommentaren die Quellen und Copyrights von verwendetem Material! Im folgenden Artikel finden sich hilfreiche Hinweise. Bitte berücksichtigen!

Siehe:

Schleifen, Arrays, Zufallszahlen

Sie haben im Unterricht Schleifen, Arrays und Zufallszahlen kennengelernt.

a) Generieren Sie 100 div-Tags mit border in der Größe 100x100px mit einem Eventhandler onclick='zufallshintergrund(this)'.

b) Ergänzen Sie ihr Skript um ein Array mit drei Farben Ihrer Wahl, z.B. "blue", "red", "green". Achten Sie darauf, dass diese Farben javascript bekannt sind, z.B. Hexcodes.

c) Schreiben Sie die Funktion zufallshintergrund(), die eine Zufallszahl 0,1 oder 2 erzeugt, welche als Feldnummer für das Array genutzt werden kann.

d) Setzen Sie den Hintergrund im Div-Tag auf die Farbe, welche per Zufall ausgewählt wurde!

DivsZufallsfarbe.png

6 aus 49

Programmieren Sie die Ziehung der Lottozahlen '6 aus 49'

a) Zufällig sechs Zahlen zwischen 1 und 49 ausgeben (Verwendung einer for-Schleife).

b) Merken der sechs gezogenen Zahlen in einem Array (zahl[i]=x).

c) Ausgabe jeder Zahl im Array in ein neues div-Tag
(generieren in einer for-Schleife). Wählen Sie geeignete CSS-Eigenschaften für das div-Tag, so dass eine ansprechende Ausgabe erzeugt wird.

d) Doppelte Zahlen darf es in einer Lottoziehung nicht geben. Bei jeder neu gezogenen Zahl ist zu prüfen, ob diese bereits im Array enthalten ist. Nutzen Sie nach der Erzeugung einer neuen Zahl die aktuelle Array-Länge zur Programmierung einer weiteren for-Schleife, welche die neu gezogene Zahl mit den bereits gezogenen vergleicht.

Interessante Links zu weiterführenden Themen

© 2018/2019 Rüdiger Borrmann

© 2018/2019/2020 by Rüdiger Borrmann

bottom of page