JavaScript - Anwendungen und Beispiele

Die wichtigsten JavaScript-Einsatzgebiete:

Popup-Boxen mit dialog:

Eine Dialog-Box ist ein neues Fenster, das sich über die Webseite legt, für eine Rück-Frage oder -Meldung. Das <dialog>-Element ist wie ein div-Container und enthält die in der Popup-Box anzuzeigenden Inhalte. Standardmässig ist es nicht sichtbar, und kann durch festgelegte JavaScript-Befehle manipuliert werden:

  • dialog.showModal(): Oeffnet den Dialog.
  • dialog.close( [result] ): Schliesst den Dialog mit eventuellem Rückgabewert der mit dem Parameter "result" übergeben werden kann.
  • dialog.returnValue: Liefert den Rückgabewert der zuvor mit dialog.close gesetzt wurde.
Das definiert man am Besten über einen EventListener:

document.getElementById("show-dialog").addEventListener("click", () => {
   document.getElementById("dialog").showModal();
});

document.getElementById("close-dialog").addEventListener("click", () => {
   document.getElementById("dialog").close();
});

"show-dialog" meint den Button zum Oeffnen des Dialogs, und "close-dialog" den Button innerhalb des Dialog-Fensters zum Schliessen des Dialogs. Mit dem Pseudoelement ::backdrop kann der Seitenhintergrund über CSS beliebig mit einem durchscheinenden Overlay verdunkelt werden.

Beispiel: (Dialogfenster und zugehöriger Code)

Dies ist ein Hinweisfenster, und nachfolgend auch der Code dazu:

HTML:
<dialog id="dialog">
  ...Inhalt des Dialog-Fensters...
</dialog>

CSS:
dialog {
  /* Dialogfenster zentrieren und Abstand von oben festlegen: */
  margin: 10em auto;
  ...weitere Dialogfenster-Formatierungen...
}
/* Das hinter dem dialog-Fenster liegende Dokument wird durch eine schwarze, halb durchscheinende Maske verdeckt: */
dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

JavaScript:
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById("show-dialog").addEventListener("click", () => {
    document.getElementById("dialog").showModal();});
  document.getElementById("close-dialog").addEventListener("click", () => {
    document.getElementById("dialog").close();});
});


Rollover-Effekte: (Code des Beispiels)







Nebst den CSS-Aenderungen durch den Rollover kommt hier eine weitere Methode zum Einsatz:
Mit "innerHTML" kann der HTML-Inhalt des betreffenden Elements ersetzt werden. Hier im Beispiel wird der Text der vorerst unsichtbaren Ebene "info" bei "mouseover" oder "touchstart" auf "Einblendbare Ebene durch mouseover oder touchstart" gesetzt, und bei "click" auf "Jetzt wurde geklickt".

Diashow: (Code des Beispiels)



Bei zeitgesteuerten Funktionen (wie diese automatisch ablaufende Diashow) kommt die Methode "setInterval" zum Einsatz:
setInterval("Funktion()", Pause);
Funktion = Funktion oder Anweisung die wiederholt werden soll
Pause = Wert in Millisekunden bis zum nächsten Ausführen.

Objekte bewegen lassen: (Code des Beispiels)
Wanderer
Hier kommt die Methode animate() zum Einsatz. Dabei werden CSS-Eigenschaften eingebunden, deren Werte dann dynamisch verändert werden. Deren Syntax:
element.animate(keyframes, options);
keyframes = Enthält CSS-Eigenschaften und deren Werte in einer Objektschreibweise oder als Array von Objekten (meistens eine oder mehrere "transform" oder "color"-Angaben).
options = Entweder eine Zeitangabe in Millisekunden oder ein Objekt, das Zeitangabe, Timing Options und weitere Optionen enthält (oft mit Zeitdauer, Anzahl Widerholungen und Verzögerung).
Ausführliche Beschreibung zu animate() mit Beispielen finden Sie auf: SELFHTML

Drag & Drop: (Code des Beispiels)












Nebst Maus-resp. Touch-Ereignissen werden Informationen zum aktuellen Zustand des Elements benötigt, welches vom Ereignis betroffen wurde (z.B. die genaue Position des ausgewählten Puzzle-Teils). Dazu müssen der Ereignis-Handler-Funktion der Parameter "event" (oder "e" oder "evt") mitgegeben werden. Dann stehen die Eigenschaften des von Ereignis betroffenen Elements über "event.target" zur Verfügung. Bei Touch-Events fehlen allerdings die Positionsangaben und über "event.changedTouches[0]" können statt dessen die Koordinaten der ersten Fingerberührung ermittelt werden. Das sieht dann etwa so aus:
Element.addEventListener("Ereignistyp", function(event) {
XPos = event.target.clientX; // X-Position des Elements welches mit der Maus ausgewählt ist bei Mausereignis
XPos = event.changedTouches[0].clientX; // X-Position der ersten Fingerberührung bei Touchereignis
... });


Webseiten-Adress-Manipulationen::

Ueber die location- und history-Schnittstelle lassen sich Webseiten-Adressen (URI) (und Teile davon) erfragen und manipulieren. Dabei greift location auf die aktuelle URI des Benutzers und ermöglicht das Laden von neuen Adressen, während history auf den Verlauf der davor besuchten Webseiten des Benutzers zugreifen kann. Die wichtigsten Eigenschaften und Methoden:

  • location.href: Diese Eigenschaft speichert den vollständigen URI des aktuellen Fensters und lässt sich nutzen um die dieser Variablen zugewiesene Adresse zu laden.
  • location.reload(): Lädt die aktuelle Weebseite neu.
  • history.back(): Lädt die WWW-Seite, die zuletzt besucht wurde.
  • history.forward(): Lädt die WWW-Seite, die als nächste besucht wurde, sofern zuvor ein Back-Vorgang stattfand.

Informationen über System und Browser des Benutzers:

Das "navigator"-Objekt liefert viele Informationen über System, Browser-Einstellungen, und sogar den Standort des Benutzers. Das ermöglicht JavaScript eine ziemlich Benutzer-Spezifische Programmierung.

Wichtigste "navigator"-Eigenschaften: (Code dazu)

  • userAgent: Angaben über den verwendeten Browser und System.
    Rückmeldung von Ihrem Browser:
    Interpretation:
      
  • geolocation: Mit der zugehörigen Methode getCurrentPosition() können die Standort-Koordinaten des Benutzers in Längen- und Breitengraden ermittelt werden, sofern der Benutzer dem zustimmt.
    (Funktioniert nur auf https-Seiten. Hier eine Seite mit Beschreibung und Beispiel)
  • cookieEnabled: Gibt zurück, ob Cookies im Browser aktiviert oder ausgeschaltet sind.
    Cookies in Ihrem Browser aktiviert?:
  • language: Ermittelt die Sprache des Browsers.
    Sprache Ihres Browsers:
Andere Abfragen über den Browser selbst, wie appName und appVersion, machen nicht viel Sinn, da sich fast alle aktuellen Browser "Netscape" nennen und die Version 5 haben.

Viele weitere JavaScript-Anwendungsmöglichkeiten mit ausführlichen Beschreibungen finden Sie bei SELFHTML/JavaScript/Tutorials.