Mit addEventListener gibt es die Möglichkeit den Event vom HTML-Element in das JavaScript zu verlegen.
Dazu muss es z.B. eine Funktion initiate geben, die dann beim load der Seite aufgerufen wird. Diese Funktion fügt die Eventlistener hinzu.
Auch bei einem Ajax-Request kann ein Eventlistener installiert werden. Damit entfällt die Abfrage auf onreadystatechange und der Mehrfachaufruf der Anzeigefunktion mit der Abfrage welcher state gerade aktuell ist.
Über DOM sind Zugriffe auf die Elemente möglich.
Hier sind Beispiele aufgeführt, wie man über DOM auf Elemente zugreifen kann, Elemente verändern und hinzufügen bzw. löschen kann.
Allgemeine DOM-Beschreibung: DOM-Beschreibung
Um etwas zeitgesteuert durchzuführen muss window.setTimeout angewendet werden. Dabei wird die Funktion immer wieder entsprechend zeitversetzt aufgerufen. Die Zählvariable könnte man als globale Variable definieren. Man kann die Variable aber auch an die Funktion übergeben. Dazu muss beim Eventlistener und beim Timeraufruf mit einer Pseudofunktion gearbeitet werden.
Der Eventlistener für den Button ruft die Funktion countdownTimer auf.
document.getElementById("btnTimer").addEventListener("click", function() {countdownTimer(10);}, false);
Die Funktion countdownTimer ruft sich alle 1000 Millisekunden selbst auf.
Mit JavaScript kann der Cursor bei Bedarf geändert werden. Dies ist sinnvoll, wenn eine längere Bearbeitung gestartet wird. Damit kann dem Benutzer signalisiert werden, dass das System noch arbeitet.
Die Änderung erfolgt mit dem folgenden Aufruf:
document.getElementById("btnCursorWaitAn").style.cursor="wait"; // Cursor für den Button auf wait setzen
document.body.style.cursor="wait"; // Cursor für body auf wait setzen
document.body.style.cursor="default"; // Ausschalten
Eine komplette Liste der möglichen Werte gibt es bei selfhtml. Die Angaben hinter cursor gelten auch für JavaScript.
Mit der Forms-API steht eine Möglichkeit zur Validierung von Formularen zur Verfügung.
Mit JavaScript kann die aktuelle Seite durch eine neue Seite ersetzt werden. Es kann auch eine weitere Seite in einem neuen Fenster geöffnet werden. Daten zwischen den Fenstern sind beliegig austauschbar.
Ob man heute auf seiner WEB-Seite Doppelklick einsetzt, sollte man sich gut überlegen. Schliesslich gibt es bei Smartphone und Tablets Probleme einen Doppeltouch auszuführen.
Ich habe hier die Beschreibung gelassen, setze aber den Doppelklick in meinen Anwendungen nicht mehr ein.
Bei den Events gibt es das Problem Einfach-Klick und Doppel-Klick zu unterscheiden. Bei einem Doppelklick auf ein Objekt wird der Einfachklickevent auch zweimal aufgerufen.
Der Button ruft bei einem Klick die Funktion Einfach-Klick auf, die in einem Fenster den Text Einfach-Klick ausgibt. Bei einem Doppelklick wird mit der Funktion Doppel-Klick der Text Doppel-Klick ausgegeben. Dabei ist zu sehen, dass die Funkton Einfach-Klick auch zweimal aufgerufen wird.
Beim diesem Button wird bei jedem Klick oder Doppelklick über eine Variable die Anzahl klicks hochgezählt. Dabei ist Klick und Doppelklick abgefangen.
Anzahl:
Die folgenden Funktionen fangen das Problem mit Klick und Doppelklick auf ein Element ab. Bei Doppelklick wird zweimal auch das Klick-Event aufgerufen. Bei einem Doppelklick wird die Funktion objklick zweimal und die Funktion dblobjklick einmal aufgerufen. Bei Doppelklick darf nur die Funktion dblobjklick ausgeführt werden.
Deshalb muss bei Doppelklick die beiden Aufrufe von objklick ignoriert werden. Dies geschieht, indem objklick beim ersten Klick die Variable klickzaehler von 0 auf 1 setzt und nach 300ms klickauswahl aufruft. Die Funktion klickauswahl prüft die Variable klickZaheler auf 1 Ist dies der Fall wird die Funktion singleklick aufgerufen. Bei einem dblklick wird objklick innerhalb der 300ms nochmal aufgerufen. klickZaheler wird dann auf 2 erhöht und die Funktion klickauswahl nach 300ms aufgerufen. Der Aufruf aus dem ersten Klick stellt jetzt fest, dass klickZaehler zwei ist und setzt klickZaehler auf 0. Der Aufruf aus dem zweite Klick stellt fest, dass klickZaehler 0 ist.
klickZaehler muss als globalen Variablen definiert werden, da sie in zwei Funktionen verändert wird.
Mit der Drag and Drop API können Objekt per Maus bewegt werden.
Die WEB-Storage API verbessert das Cookie-Konzept.
Mit der Vollbild-API kann das Browserfenster zum Vollbild geschaltet werden.
Eingabestring:
In JavaScript gibt es den substr(Anfangspos,Länge) und den substring(Anfangspos,Endepos).
Die Zählung beginnt bei 0 - Bei substring wird als Endepos die Position angegeben, die nicht mehr mit verarbeitet werden soll.
Wird bei substring nur der erste Parameter angegeben, wird der restliche String ab dieser Position ausgegeben.
Mit search(reg Ausdruck) wird der reguläre Ausdruck im String gesucht.
Ist der Ausdruck vorhanden, wird die Anfangsposition geliefert. Ist der Ausdruck nicht vorhanden wird -1 geliefert.
reg Ausdruck
Mit charAt(pos) kann auf eine Stelle im String zugegriffen werden.
Mit repalce("ALT","NEU") kann im String eine Ersetzung durchgeführt werden.
Im Beispiel wird ALT gegen NEU getauscht.
Als Suchstring (ALT) kann auch ein regulärer Ausdruck verwendet werden. Z.B. str.replace(/\n/g, "<br>") um alle Zeilenschaltungen in <br> zu tauchen.
Mit split(zeichen) kann der String in ein Array geteilt werden.
Dazu einen String mit zwei Punkten eingeben.
Mit indexOf(zeichen) wird geprüft, ob das Zeichen in dem vorgegeben String enthalten ist.
Die Funktion liefert die erste Position des Zeichens.
Die Funktion lastIndexOf liefert die letzte Position des Zeichens.
In diesem Beispiel sind nur Zahlen und Punkt erlaubt (v_gueltigeZeichen="01234567890.")
Dazu einen String mit Buchstaben oder andere Sonderzeichen eingeben.
Bei einer Eingabe eines Wertes mit Kommastellen, kann mit diesem Wert nicht gerechnet werden. JavaScript erwartet statt des Komma ein Punkt.
Werden Werte aus einer DB oder XML gelesen steht der Punkt an Stelle des Kommas. Zur gewohnten Anzeige muss der Punkt in Komma umgewandelt werden.
Die eingegeben Zahl wird zunächst in einen numerischen Wert gewandelt. Dann wird 1,1 addiert und die Zahl formatiert ausgegeben.
Die eingegebene Zahl wird mit der Funktion komma2Punkt in eine Zahl umgewandelt. Die Funktion wandelt das Komma einer Zahl in Punkt um und entfernt etwaige Tausender Punkte. Die Zahl wird zurückgegeben. Kann der Wert nicht umgewandelt werden, wird eine Fehlermeldung ausgegeben
Danach wird 1,1 auf die Zahl addiert.
Dann wird die Zahl mit der Funktion zahlFormat formatiert.
Mit dem Navigator-Objekt können Daten aus dem verwendeten Browser ermittelt werden.
Hier wird angezeigt, was der Browser aktuell liefert.
Datumsfunktionen in JavaScript und Datumeingabe über Kalender.
Um Gesamt- oder Durchschnittszeiten zu errechnen ist es notwendig Zeitangaben im Format STD:MIN:SEK in Sekunden oder Sekunden in STD:MIN:SEK umrechnen.