Startseite - Europa - Altenburg - Regiotipps - Politik - Mobilität - Studio - Impressum

Joachim Schröter

Das Studio dient dazu, JavaScript- und andere Einbauten zu testen.


Stand: 2022-01-17


zum Seitenende

JavaScript-Tests


01.) Links zu Testdateien:

Event Formular event_form
Event Eigenschaft event_eigenschaft
Form Text form_text
Form Check form_check
Form Select form_select
Form Link form_link
Returntaste returntaste
Ajax, erstes Beispiel Ajax, erstes Beispiel
Ajax, Parameter senden Ajax, Parameter senden
JQUERY und Ajax JQUERY und Ajax
Onsen UI Startseite Einfache Seite
Onsen UI Liste Liste mit Click aufs Land
Onsen UI Tabelle Verschiede Spaltenbreiten
Onsen Icons Verschiedene Icons
Onsen Dialoge 4 verschiedene Dialoge
Onsen Eingabe Freies Eingeben
Onsen Auswahl Eingabe als Auswahl
Onsen Auswahl durch Schieberegler Zahleneingabe durch Schieben
Onsen Tabs 3 Seiten als Tabs
Onsen Navigation Seiten + Unterseiten
Onsen Karussell Seiten als Karussell



02.) Startseite:

Auf der Startseite ist eine Passage in JavaScript zur Begrüßung eingebaut:
Vor der Willkommen-Zeile erscheint die Begrüßung „Hallo, alte Nachteule!”
Jedoch zwischen 05:00 und 10:59 Uhr „Guten Morgen!”
Jedoch zwischen 11:00 und 17:59 Uhr „Guten Tag!”
Jedoch zwischen 18:00 und 21:59 Uhr „Guten Abend!”
Jedoch zwischen 22:00 und 23:59 Uhr „So spät am Abend hier?”



03.) Anrede:

Der Benutzer soll Daten eingeben, auf die das Programm dann reagiert, wenn auf das Button „Anzeigen” geklickt wird.
Die Tastenbedienung ist mit der Tabulatortaste möglich.
Das Script im Head-Bereich heißt „zeigen()”

Angaben zur Person

Vorname:

Nachname:

weiblich männlich keine Angabe




04.) Events:

Zuerst ist die Grafik „berühr mich” zu sehen.
Wenn die Maus über dem Schalter ist, erscheint die Grafik „ein.gif”. Ereignis: „onmouseover”
Wenn die Maus neben dem Schalter ist, erscheint die Grafik „aus.gif”. Ereignis: „onmouseout”
Der Anker-Tag führt zur Startseite.
mal so, mal so


05.) Aktuelles Datum auf Button-Klick




06.) Quiz-Frage

Wie heisst die Programmiersprache, die hier auf der „Studio-Seite” von mir getestet wird? Klicken Sie auf den richtigen Antwortschalter!




07.) Ereignis Taste loslassen

Wer rechnet schon mit Fahrenheit?
Hier geht es darum, zu zeigen, dass auch das Loslassen einer Taste eine Funktion (function rechne(grad)) auslösen kann.

Grad Celsius
Fahrenheit
Kelvin

08.) Downloadbare Datei zur Verfügung stellen

Auf den Inhalt kommt es nicht an, nur Testzweck

Eine pdf-Datei laden

09.) Einbau einer Video-Datei mit Endlos-Schleife




10.) gif-Dateien als "Wackelbilder"

Beispiel - zugeflogen von "http://www.swr3.de/wraps/info/verkehr/gekrabbel.gif"


11.) Ereignisse im Formular

zur eigenen Testseite


Image Slider - (Bildwechsler)-Tests mit TYPO3

12.) Dynamische Bilder

zur eigenen Testseite

Testaufruf

13.) Grafik mit Dynamik durch Event-Handler

zur Testseite


Bilder mit onMouseover vergrößern

14.) 4 Bilder verändern

onMouseover: Wenn man mit der Maus über ein kleines Bild fährt, dann wird das große Bild geladen.
onMouseout: Wenn man mit der Maus vom großen Bild wegfährt, dann wird wieder das kleine Bild geladen.
Link mit Anker-Tag: Bei einem Klick wird per Link die Startseite geladen.


Mit der Maus lässt sich deutlich unterscheiden zwischen MausDrüber und Klick. Beim Touchscreen des Handys geht das nicht so einfach.

Geschützter Bereich

15.) Es wird ein Passwortfeld angezeigt. Gibt der Nutzer das richtige Passwort ein [ohne ENTER], ist der Zugang zum geschützten Bereich frei.

LOGINBEREICH
Passwort



SVG Animation

16.) Scalable Vector Graphics

SVG, Animation Demo: Direkt über der Grafik 850x400

Das grüne Auto fährt ununterbrochen seine Runden in jeweils 15 Sekunden
Das blaue Auto fährt in Gegenrichtung seine Runden auch in jeweils 15 Sekunden



zum Seitenanfang

Startseite - Europa - Altenburg - Regiotipps - Politik - Mobilität - Studio - Impressum