JavaScript: Unterschied zwischen den Versionen

Aktuelle Version vom 5. Februar 2023, 22:42 Uhr

Einführung

Vieles aus folgendem Buch übernommen:

Schlagwort	Info
Titel	Das Einsteigerseminar JavaScript
Author	Michael Seeboerger-Weichselbaum
Verlag	bhv
ISBN	3-8266-7200-3
Webseite zum Buch	http://www.seebi.de/

Auf Grund der Trennung von Javascript zur Verhaltenssteuerung der Webseite und der Darstellung durch HTML sollte man die häufig eingesetzten direkten Aufrufe im HTML mit <button onclick()> vermeiden und dies über einen Eventhandler direkt im eingebunden Skript erledigen.

Programmcode mit HTML

Auch wenn JS theoretisch nicht auf HTML begrenzt ist, wird es doch meistens dort verwendet und daher wird auch hier darauf eingegangen.

HTML mit JS

Dieses Beispiel zeigt ein schlechtes Beispiel, bei welchem JS und HTML bunt gemischt sind. Auf selfhtml wird aufgezeigt, wieso man dies sauber trennen soll.


 <html>
  <head>
   <title>Testpage</title>
   <script type = "text/javascript">
     //Javascript Code mit Definitionen
       function () {
       } // end function ()
   </script>
  </head>
  !**  Ab hier kann man den Code verwenden **
  <body onload = "function ()">
     !**  Die folgenden Funktionen sind inline JS-Eventhandler **
     <a href = "http://www.java.com" 
        onMouseOver = "window.status = 'Javaseite'; return true" 
        onMouseOut = "window.status = ' '; return = true">
        <img src = "bild.gif">
     </a>
  </body>
 </html>

HTML mit ausgelagertem JS

Möchte man das Script in eine Datei auslagern, so muss nur das script Tag erweitert werden:
<script type = "text/javascript" src="datei.js"></script> Ab HTML5 ist auch die Angabe von type nicht mehr notwendig. language hingegen ist "deprecated" und soll daher nicht mehr eingesetzt werden.

HTML:


 <html>
  <head>
   <title>Testpage</title>
  </head>
  <body>
     <a href = "http://www.java.com">
      <img id = "test" src = "bild.gif">
     </a>
     <script src="datei.js"></script>
  </body>
 </html>

JavaScript:


 function status(state) {
 if (state) { window.status = 'Javaseite'; }
 else { window.status = ' '; }
}
 var test = document.getElementById('test');
 test.addEventListener ('hover', status, true);
 test.addEventListener ('loose', status, false);

Laden von Javascript in HTML

Damit JS sauber verwendet werden kann, muss zum Zeitpunkt des Ausführens das oder die Elemente, auf die JS zugreifen soll, im Browser geladen sein. Man kann daher nicht einfach das Skript im Header einbinden und auf Elemente zugreifen, welche erst später geparst werden, ohne entsprechend Massnahmen zu treffen. Aus diesem Grund werden folgende Vorgehensweisen empfohlen:

Einbindung	Vorteile	Nachteile	Beispiel
Erst ganz am Ende des Dokuments	Der Dokumentbaum steht mit allen Elementen direkt zur Verfügung.	Ist es ein grosses Skript, so sieht der Anwender zwar die Seite, doch er kann sie nicht verwenden, da im Hintergrud noch das JS geladen und analysiert werden muss, bevor es verwendet werden kann.	`</body><script src="datei.js"></html>`
Im `<head>`-Teil	Der Browser kann die Datei aufbereiten und einbinden und nachher mit dem parsen weiter fahren und muss dies nicht am Schluss noch erledigen.	Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann.	HTML: `<head><script src="datei.js"></head>` JS: `document.body.addEventListener("load",test);`
Im `<head>`-Teil mit dem Argment dever	Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat. Ein entsprechend aufbereitetes Skript wird nach dem Parsen des DOM, und vor dem Auslösen des DOMContentLoaded Events ausgeführt. Mehrere defer-Scripte werden in der Reihenfolge ausgeführt, in der sie im HTML angetroffen werden.	Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann.	`<head><script src="datei.js" dever></head>`
Im `<head>`-Teil mit dem Argment async	Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat.	Man kann nicht wissen, wann genau der Browser das Skript lädt, analysiert und es zur Verfügung stellt. Um Elemente sauber zu initialisieren muss daher nach dem Beispiel von selfhtml vorgegangen werden, welches die möglichen Zustände beim Ausführen berücksichtigt.	`<head><script src="datei.js" async></head>`

Möchte man nachlesen, wie der Browser vorgeht, so zeigt es der entsprechende Artikel im selfhtml.

Sprachelemete

Kommentare

// -> Einzeilig
/* */ -> Mehrzeilig

Schlüsselwörter

Bedingungen

if (Vergleich) {} // Abfrage
else {} // Wenn nicht if, dann...
switch (x) case 1: // Verzweigt an Hand der Bedingungsvariable.
break; // Abbruch, wenn Bedingung erfüllt. Sonst geht die Prüfung weiter. So kann man auch auf Bereiche prüfen
default: // Wenn keine erfüllt, kann auch default eingebaut werden.

Schleifen

while (Bedingung) {} // Solange die Bedingung stimmt, wird ausgeführt
for (Start;Ende;Schritt) // Solange die Endbedingung nicht erreicht ist, wird die Zählvariable um die Schrittweite angepasst
break; // Schleife verlassen
continue; // Schleife mit dem nächsten Durchgang fortsetzen

Definitionen

function () // Funktion definieren
var x = ... // Variable definieren

sonstige reservierte Wörter

do // do-while Schleife
false und true
in // in for Schleife verwendet
new // neues Objekt
return // Rückgabewert
this // aktuelles Objekt

Für die Zukunft reservierte Wörte

noch nicht verwendete, doch reservierte Wörter (Evtl. in neueren Versionen schon verwendet):

abstract, boolean, byte, Catch, char, class, const, Default, delete, debugger, enum, Double
export, extends, final, Finally, float, goto, implements, Import, instanceof, int, interface, Label
long, native, null, Package, private, protected, public, Short, static, super, synchronized, Throw
throws, transient, try, Typeof, void, with\

Vergleichsoperatoren

AND und OR sind nicht erlaubt.

< <= und > => Für grösser und kleiner Vergleiche
== != gleich und ungleich
&& || UND und ODER

Eventhandler

Eventhandler verarbeiten Ereignisse. Früher wurden diese direkt in den HTML-Code integriert (onBlur, onClick, onFocus). Heutzutage wird dies mit einem Eventhandler erledigt.

Objektbaum

Folgende Objekte stehen zur Verfügung. Der gesamte Baum kann im selfhtml mit allen Methoden nachgeschaut werden.


 window    -> document -> Image               // Bilder bearbeiten
                       -> Form   -> elements  // Formular "manipulieren"
                       -> Link                // 
                       -> Anchor
           -> Location                        // aktuelle Webadresse
           -> History                         // besuchte Seiten
 navigator -> Plugin                          // Browser und verwendete Plugins
 screen                                       // Bildschirmauflösung
 Math                                         // Mathematische Funktionen
 Date                                         // Datum und Uhrzeit
 String                                       // Strings manipulieren

Zugriff auf Knoten

Sämtliche Knoten können über das Nodes-Objekt erreicht werden.

window

Stellt das Browserfenster dar. Wichtigstes Unterelement ist document, welches die Webseite enthält.

Methoden:

win = window.open("", "Titel", width = "x", height = "y", resizable = "yes"); // Webseite öffnen. Ohne resiz. hat das Fenster eine fixe Grösse.
window.alert("Alarmmeldung"); // Meldungen mit Ok.
var = window.confirm("Bestätigung"); // Ok und Abbruch. var ist TRUE bei Ok.
var = window.prompt("Frage"); // Ok und Abbruch. var enthält den Text der Abfragebox.
window.close() // Schliesst das Fenster
win.setTimeout("window.close", 5000); // Timeout von 5000 Milisekunden abwarten, dann die Funktion (Fenster schliessen) ausführen.

Eigenschaften

window.status("Ausgabe"); // Statusleiste\

document

Will man ein DOM-Element manipulieren, so geschieht dies über dieses Unterobjekt. Die direkte Ausgabe auf die Seite ist eher selten. Meist wird dann das gewünschte Element über seine ID angesprochen oder man benennt das Objekt wie etwa ein Formular (<form>) oder einen Abschnitt (<p>) direkt.

Methoden:

window.document.bgColor = "#007F7F"; // Hintergrundfarbe setzen
window.document.fgColor = "#FFFF00"; // Vordergrundfarbe setzen
window.document.open("text/html"); // Das Fenster als html definieren
window.document.write("<h1>Dies ist ein Test</h1>"); // Text an das aufgerufene Objekt übergeben

form (Formular auswerten)

Das Formular ist "eine Hülle", welche die relevanten Elemente umfasst. Man kann es entweder direkt über den DOM mit seiner Position, mit der erstellten ID oder über den vergebenen Name ansprechen. Es ist zu beachten, dass hierbei weder der Name noch die ID doppelt vorkommen darf.


 function check() {
   var laenge, eingabe;
   eingabe = window.document.Formular.Feld1.value;
   laenge = eingabe.length;
   // Test des Inhalts und was auch immer
 } // end function check

 <form name = "Formular">
   <input name = "Feld1">
   <input type = "Button" value = "Absenden" onclick = "return check()">
 </form>

Der return hier ist wichtig. Liefert die Funktion TRUE zurück (Standard), so wird das Formular abgeschickt. Liefert sie FALSE, so muss nochmals geprüft werden. Im Fehlerfall muss die Prüffunktion daher FALSE zurückliefern.

Da die Elemente in der Reihenfolge ihres Auftretens angesprochen werden, hätte man dieses Formular auch über

 window.document.forms[0]

ansprechen können.

Wichtige Methoden:

..formularname.submit() // Sendet das Formular ab
..formularname.reset() // Setzt das Formular zurück

Wichtige Eigenschaften:

..formularname.action // Enthält den Inhalt von action im Form-Tag\
..formularname.length // Enthält die Anzahl Elemente des Formulars\

select (Auswahlliste in Formular auswerten)

Die Auswahlliste ist eigentlich nur ein Teil eines Forms. Da sie aber häufig auftritt und die saubere Verarbeitung nicht einfach ist, folgt hier ein Beispiel mit Auswertung einer Liste, welche dann die entsprechende Datei zum Download zur Verfügung stellt.


 function auswahl() {
   var index = window.document.Formular.SelectFeld.selectedIndex; // Holt den Index des select
   var datei = window.document.Formular.SelectFeld.options[index].value; // Holt den Namen aus dem Index heraus
   location.href=datei; // Die Datei zum download anbieten -> Bei html oder text würde auf die neue Seite gewechselt
 } // end function auswahl

 <form name = "Formular">
   <select name = "SelectFeld">
     <option selected = "selected" value = 'file1.zip'>File 1</option>
     <option value = 'file2.zip'>File 2</option>
   </select>
   <input type = "Button" value = "Download" onClick = "auswahl()">
 </form>

Oder ein Kurzbeispiel zum Testen, das anzeigt, welches Element nun gewählt wurde:

selectElem.addEventListener('change', getSelection, false);

function getSelection(event) {
   var value = event.target.options[this.selectedIndex].value;
   console.log("Selektiert: " + value);
}

elements (Formular auswerten)

Wie unter Form erklärt, kann man die Elemente mit ihrem Namen oder ihrer ID ansprechen. Verwendet man den DOM, so spricht man die Elemente über ihre Arrynummer an

 window.document.forms[0].elements[0]

Die einzelnen Elemente kann man über die Eigenschaft length von Form durchzählen. Auch hier darf bei Verwendung des Namens oder der ID kein Feld doppelt vergeben sein.

Wichtige Methoden:

..formularname.elementname.focus() // Setzt den Fokus auf das betreffende Feld
..formularname.elementname.select() // Markiert das betreffende Feld

Wichtige Eigenschaften:

..formularname.elementname.value // Liest den Inhalt des Feldes aus. Dieser kann darüber auch gesetzt werden.
..formularname.elementname.type // Enthält den Typ des entsprechenden Feldes (Input, Submit, usw.)

images (Bilder)

Die Bilder werden entweder über ihren Namen oder über den Index in der Reihenfolge angesprochen: window.document.images[0].src = "bild1.jpeg"; // src ist die source.

Wichtige Eigenschaften:

..images[0].border // Nur lesbar. Prüft, ob die Grafik einen Rand hat
..images[0].heigth // Nur lesbar. Höhe der Grafik
..images[0].width // Nur lesbar. Breite der Grafik

Location

Ort der Webseite. Kann etwa für Umleitungen verwendet werden. Auch Dateidownloads sind möglich.

Eigenschaften:

location.href = "neu.html" // Neue Seite im Browser öffnen
location.href = "neu.zip" // Datei wird zum Download angeboten

History

Webseitenverlauf

Methoden:

history.back() // Eine Seite zurück
history.forward() // Eine Seite vor
history.go(Nummer) // Geht zur gewünschten Position. -1 = 1 Seite zurück und 1 = 1 Seite vor.
Man kann auch einen Teil der gewünschten URL übergeben und der Browser versucht dann, zu dieser Seite zu gehen.

navigator und screen

Möglichst nicht verwenden, da Browserweichen out sind und Bildschirmauflösungen für eine fliessende Darstellung unrelevant sind. Daher die Eigenschaften mehr aus historischen Gründen. Wenn man unterschiedliche Bildschirme ansprechen möchte, so wird dies über @media im CSS-Teil der Webseite geregelt. Unter selfhtml wird gezeigt, wie HTML, CSS und JS ineinandergreifen.

navigator:

var = navigator.appName; // Browsername wie IE5, Opera10 usw. Kann über den UserAgent-Switcher angepasst werden
var = navigator.appCodeName; // Codenamen des Browsers
var = navigator.appVersion; // Browserversion
var = navigator.language; // Sprache des Browsers
var = navigator.platform; // Betriebssystem
var = navigator.userAgent; // Zeile, welche der eingestellte UserAgent liefert.

Das Unterobjekt plugins könnte zum Prüfen auf ein gewünschtes Plugin verwendet werden, doch dies will man ja nicht fördern.

screen:

var = screen.height // Bildschirmhöhe
var = screen.width // Bildschirmbreite
var = screen.pixelDepth // Pixeltiefe in Bit (8, 16, 24, 32)
var = screen.colorDepth // Farbtiefe -> Wenn gleich wie Pixeltiefe, dann falsch (2 hoch Pixeltiefe) -> Math.pow(2, screen.PixelDepth)
var = screen.availHeight // verfügbare Bildschirmhöhe
var = screen.availWidth // verfügbare Bildschirmbreite

Will man die Bildschirmbreite an php übergeben, damit etwa die Vorschaubilder abhängig der Bildschirmbreite ausgegeben werden, so ist dies möglich:


  echo("<script language='javascript'>\n");
  echo("location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"."&width=\" + screen.width + \"&height=\" + screen.height;\n");
  echo ("</script>\n");
  exit();

Anschliessend stehen die Werte als GET-Parameter zur Auswertung in PHP zur Verfügung.

Math, Date und String

Wichtige Methoden und Eigenschaften der Objekte.

Math:

y = Math.E // Eulersche Zahl = 2.718...
y = Math.floor(Zahl) // Rundung auf nächsttiefere Zahl
y = Math.PI; // Wert von pi = 3.14...
y = Math.pow(Zahl, Potenz) // Potenzierung der gewünschten Zahl -> 2, 32 -> 2hoch32 sind etwa 16Millionen
y = Math.round(Zahl) // Rundung auf nächsthöhere Zahl (oder mathematisch?)
y = Math.sin(Winkel); // Sinus des Winkels. Entsprechend cos, tan
y = Math.sqrt(Zahl); // Quadratwurzel

String (1. Buchstabe beginnt an Position 0.):

y = x.charAT(Stelle); // Liefert das Zeichen, welches an der gesuchten Stelle steht. Meist für Vergleiche (if (x.charAT(0) == 3))... -> Siehe Standardfunktionen
y = eval(String1 Rechenoperation String2) // Es wird mathematisch gerechnet, ohne dass die Strings vorher umgewandelt hätten werden müssen. Vorsicht bei Divisionen, damit es kein Div by Zero gibt.
y = x.indexOF("Vergleichsstring") // Wird der Vergleichsstring im String gefunden, ist die Antwort grösser als -1
y = x.parseFloat(String); // Versucht, den String in eine Gleitkommazahl umzuwandeln.
y = x.parseInt(String); // Versucht, den String in eine ganze Zahl umzuwandeln.
y = x.slice(Start); // Schneidet von Start bis zum Ende heraus.
y = x.String(Objekt); // Wandelt das Objekt in einen String. Funktioniert es nicht, gibt es einen leeren String.
y = x.substr(Anfang, Länge); // Ab Anfang ausschneiden, bis Länge erreicht.
y = x.substring(Anfang, Ende); // Es werden die Buchstaben der Position Anfang bis Ende ausgeschnitten.
y = x.toUpperCase(String); // Alles in Grossbuchstaben. In Kleinbuchstaben vice versa.

Date: Zuerst muss ein Objekt erstellt werden, welches dann die konkreten Daten enthält: var Datum = Date();

jahr = Datum.getFullYear();
monat = Datum.getMonth() + 1;
tag = Datum.getDate();

Die Zeit wird über getHours(), getMinutes() und getSeconds ermittelt. Möchte man von UTC ausgehen, so erhalten die Funktionen einfach noch ein UTC vorne: getUTCFullYear()

Funktionen

Werden direkt über die Eventhandler aufgerufen:

 <code>
  <head>
    <script language = "javascript">
     function test() {
       // Hier kommt nun die Funktion
     } // end function test
   </script>
 </head>

 <body onload = "test()">
 </body>

Wichtig ist, dass Funktionen mit Buchstaben beginnen müssen und sonst nur noch Zahlen und den Unterstrich enthalten dürfen. Es sind keine Sonderzeichen oder reservierten Wörter erlaubt. Gross- und Kleinschreibung wird beachtet.

Parameterübergabe

Die Parameter werden einfach in der Klammer mitgegeben und in der Funktion direkt ausgewertet ohne Variablendefinition.

function test(parameter) {...} // end function test()

test(parameter);

Standardfunktionen

zahl = parsFloat(Text); // Versucht, den Text in eine Float Zahl umzuwandeln. Enthält sie Text, ergibt es 0.
charAt(Zeichen); // Wandelt die Variable Z in einen Char um.
if (erlaubteZeichen.indexOf(TestZeichen) == -1); // Wenn die Variable nicht im String erlaubteZeichen auftaucht, wird -1 zurückgeliefert. Der String kann alle möglichen Zeichen enthalten auf die man prüfen will.
x.setTimeout('function()', 1000) // Das Objekt x ruft nach 1000 Milisekunden die gewünschte Funktion auf. x kann zum Beispiel window sein. Wenn man nun <body onLoad="window.setTimeout('umleiten()', 5000)"> einsetzt, wird die Funktion nach 5 Sek. aufgerufen.

Nützliche Funktionen

Eingabe auf erlaubte Zeichen prüfen


function check_Eingabe () {
 var zeichen = "0123456789", zähler, eingabe, länge; // Erlaubte Zeichen definieren und Hilfsvariablen zur Auswertung. 
                                                    // Der Funktion könnte das Feld natürlich auch direkt übergeben werden.
 Eingabe = window.document.forms[0].elements[0].value; // Element, welches ausgewertet wird
 länge = Eingabe.length;
 for (zähler = 0; zähler=länge; zähler++) {
  if (zeichen.indexOf(Eingabe.charAt(zähler))==-1) { // Vergleichen, ob das Zeichen an der Stringstelle von Eingabe nicht 
                                                    // im String zeichen vorkommt
   alert ("Nur Ziffern sind erlaubt");
   window.document.forms[0].elements[0].value=""; // Wert zurücksetzen -> Kann man auch unterlassen
   window.document.forms[0].elements[0].focus(); // Focus aufs Feld mit dem Fehler
   return false; // Wenn man den Test beim absenden macht, verhindert das false das absenden. True ist Standard, wenn alles i.O.
  } // end if
 } // end for
} // end function eingabe()

Unterschied Funktion und Funktionsausdruck und namenlose Funktion

Eine normale Funktion kann im Skript auch erst nach dem Aufruf im Code definiert werden, da Javascript dafür sorgt, dass diese beim Aufruf zur Verfügung gestellt wird. Dies ist bei einem Funktionsausdruck nicht der Fall. Da man diesen normalerweise aber auch erst definiert, wenn man sie an eine Variable beim Aufruf zuweist ist dies auch nicht notwendig. Man muss es einfach beachten, wenn man im Nachhinein den Code überarbeitet und früher im Code auf solch einen Funktionsausdruck zugreifen will. In diesem Fall muss man daraus eine korrekte Funktion machen. Da ein Funktionsausdruck direkt an eine Variable zugewiesen wird, muss man dort entsprechend ein abschliessendes Semikolon setzen. Eine namenlose Funktion führt dieses Konzept weiter und wird entsprechend einem Parameter verwendet. Dies erlaubt kürzeren Code, den man allerdings nicht zu tief verschachteln sollte, um ihn lesbar zu halten und auch, um im Fehlerfall noch zu wissen, wo dieser auftrat.

y = tuEtwas(5);              // Funktioniert, auch wenn tuEtwas() erst unterhalb definiert wird -> sollte man auf Grund eines guten Programmierstils aber nicht machen
function tuEtwas(x) { .... } // normale Funktion
y(5);                        // Funktioniert nicht, da der Funktionsrumpf hier noch nicht zur Verfügung steht
y = function(x) { ... };     // Funktionsrumpf (anonyme Funktion) wird mit einem ; abgeschlossen
setTimeout(function() { alert("Zeit vorbei!"); }, 2000); // anonyme Funktion

Callback mit der Lambda-Funktion (Pfeil)

Callback bedeutet, dass man einer Funktion nicht einfach nur Werte übergibt, sondern dass ein Wert davon auch wieder eine Funktion ist, die entsprechend aufgerufen wird. Siehe dazu auch die Ausführungen auf selfhtml. Bei diesem Vorgehen wird aber this verändert, was nicht gewünscht ist. Um dies zu umgehen verwendet man den Aufruf per Pfeil:

werte = [ 1, 2, 3 ];     // Ein Array mit den Einträgen 1, 2 und 3
quadrate1 = werte.map(function(v) { return v*v;}); // klassischer callback mit anonymer Funktion
quadrate2 = werte.map(v => v*v); // Kurzaufruf mit Pfeil
console.log(quadrate1); 
console.log(quadrate2);

Beide Zeilen machen das gleiche, doch die zweite Variante ist nicht nur kürzer, sondern auch einfacher zu lesen. Folgende Einschränkungen sind aber zu beachten (wenn man erweitert programmiert):

Ausser einem eigenen this gibt es auch keine eigenen Werte für super, arguments und new.target
Die Folgerung ist, dass man Pfeilfunktionen nicht als Methoden verwenden soll und nicht als Konstruktor verwenden kann.
Die Helfer call, apply und bind von Function.prototype sind zwar für Pfeilfunktionen verwendbar, ein Wert für this kann aber nicht gesetzt werden.
Pfeilfunktionen als Generator sind nicht möglich, deshalb ist yield in einer Pfeilfunktion unzulässig.

Man kann auch erweiterte Pfeilfunktionen mit geschweiften Klammern verwenden:

document.documentElement.addEventListener('click', event => {
  if (event.target.tagName == 'BUTTON' && event.target.hasAttribute('aria-expanded')) {
    event.target.setAttribute('aria-expanded', event.target.getAttribute('aria-expanded') != 'true');
  } // end if
});

Events des DOMs

Im verlinkten Artikel des Titels werden alle Events aufgeführt und auch, auf welche Elemente sie angewendet werden können. Hier sind nur diejenigen gelistet, die häufig verwendet werden.

blur -> Beim Verlassen des aktiven Elements. Normalerweise bei Eingabefelder wenn der Inhalt geprüft werden soll auf leer oder ungültige Zeichen.
change -> Bei erfolgter Änderung eines Inhaltsfeldes. Der Handler wird erst beim Verlassen aktiv. Will man, dass die Aktion sofort geschieht, sollte man input verwenden.
click -> Wird beim loslassen der Maustaste getriggert doch ur, wenn sich dies noch im gelichen Feld wie beim Drücken befindet. Mit den Detaildaten kann man auch einen Doppelklick verarbeiten und sonst verwendet man dblclick. Um direkt auf das Drücken der Maustaste zu reagieren, benötigt man das mousedown oder pointerdown Event.
contextmenu -> Wird aufgerufen, wenn man mit der rechten Maustaste ein Kontextmenü anfordert. Der "Trick" dies zu verbieten, sollte nicht angewendet werden, da man es umgehen kann und so nur die Anwender verärgert.
dblclick -> Wie click, doch nur bei doppeltem Anklicken.
DOMContentLoaded -> Wird automatisch aufgerufen, wenn der DOM geladen wurde. Kann nicht künstlich aufgerufen werden.
drag -> Element gezogen -> Teil von Drag'n'Drop. Es gibt hier mehrere Elemente, die man beim Ziehen und Loslassen beachten sollte, damit dies korrekt ausgeführt wird. Daher beim Einsatz den verlinken Artikel lesen.
drop -> Element abgelegt -> Siehe die Anmerkung oben zu drag
error -> Element nicht richtig geladen o. Skript läuft fehlerhaft -> Es wird im Fehlerfall ausgelöst und eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene.
focus -> Beim Aktivieren des Elements. Normalerweise für Links, Labels oder Listen verwendet. Es kann verfeinert werden mit focusin (wenn ein Element angeklickt wird) und focusout (wenn ein Element verlassen wird).
input -> Wenn sich der Wert des überwachten Elements ändert (Eingabe, Schieberegler) -> Wird nicht aufgerufen, wenn man etwas per Skript ändert.
invalid -> Da der Browser schon eine Validierung bei Eingabefeldern durchführt, wenn man den type des Feldes setzt und die Werte schlussendlich noch auf dem Server validiert werden müssen, ist dieses Event normalerweise überflüssig.
keydown -> Wird ähnlich wie die Mausevents bei Eingabefeldern verwendet und ausgelöst, sobald man eine Taste drückt. Es gibt noch die verwandten Elemente keypress (bei gedrückt gehaltener Taste) und keyup (bei losgelassener Taste).
load -> Feuert, wenn Elemente vollständig geladen wurden. Stattdessen sollte DOMContentLoaded eingesetzt werden.
Mausevents wie mousedown (bei gedrückter Maustaste) und Pointerevents wie pointerdown werden im unten verlinkten Abschnitt zu Zeigegeräten behandelt.
reset -> Wird beim Zurücksetzen des Formulars ausgelöst. Kann verwendet werden, um eine Warnung auszugeben, bevor dieses gelöscht wird.
resize -> Kann eingesetzt werden, um das Aussehen der Fenstergrösse anzupassen. Normalerweise sollte man dies aber über CSS @media lösen.
select -> Wenn der Benutzer Text in einem Formular selektiert hat.
submit -> Wie beim Zurücksetzen des Formulars kann man hier vor dem Absenden eine Validierung durchführen.

Umgang mit Maus und Touchpads / Touchscreens / Pointergeräten usw.

Im Artikel Mouse and More wird gezeigt, wie man solche Ereignisse gesamthaft verarbeiten kann, ohne ein Gerät aussen vor zu lassen.

Wichtige allgemeine Eigenschaften

Folgende Eigenschaften werden von mehreren Objekten zur Verfügung gestellt und verwendet:

length

Enthält die Länge einer Variable oder die Anzahl Elemente eines Arrays. a = window.document.length; // Anzahl Zeichen einer Webseite

value

Wert, welcher in ein Objekt geschrieben wird. document.Formularname.Feldname.value = String;

Fehlerbehandlung (try-catch-finally)

try {
  // Anweisungsblock, welcher Fehler machen könnte
}
catch(error) {
  // Ausführung, wenn der Fehler auftrat
}
finally {
  // Immer ausführen, egal ob Fehler oder nicht
}

Die Anweisung im try kann beliebig sein (Stream öffnen, testen der Benutzereingabe usw.). Tritt ein Fehler auf, welcher einen Programmfehler mit Abbruch generieren würde, so wird er an den catch-Block weiter geleitet. Dort kann man dann eine Ausgabe machen, was schief lief. Über finally kann man dann wieder bei Bedarf einen neuen Versuch anbieten oder über eine Variable entsprechend handeln.

@@ Zeile 1: / Zeile 1: @@
-Vieles aus folgendem Buch übernommen:\
+== Einführung ==
-* Titel: Das Einsteigerseminar JavaScript\
+Vieles aus folgendem Buch übernommen:
-* Author: Michael Seeboerger-Weichselbaum\
+{| class="wikitable"
-* Verlag: bhv\
+|-
-* ISBN: 3-8266-7200-3\
+! Schlagwort !! Info
-* Webseite zum Buch: http://www.seebi.de/\
+|-
-\
+| Titel || Das Einsteigerseminar JavaScript
-== Programmcode Beispiel ==\
+|-
-<code>\
+| Author || Michael Seeboerger-Weichselbaum
-   <html>\
+|-
-    <head>\
+| Verlag || bhv
-      <title>Testpage</title>\
+|-
-      <script type = "text/javascript">\
+| ISBN || 3-8266-7200-3
-        //Javascript Code mit Definitionen\
+|-
-          function () {\
+| Webseite zum Buch || http://www.seebi.de/
-          } // end function ()\
+|}
-      </script>\
-    </head>\
+Auf Grund der Trennung von Javascript zur Verhaltenssteuerung der Webseite und der Darstellung durch HTML sollte man die häufig eingesetzten direkten Aufrufe im HTML mit <code><nowiki><button onclick()></nowiki></code> vermeiden und dies über einen Eventhandler direkt im eingebunden Skript erledigen.
-    !**  Ab hier kann man den Code verwenden **\
-    <body onload = "function ()">\
+== Programmcode mit HTML ==
-        !**  Die folgenden Funktionen sind inline JS-Eventhandler **\
-        <a href = "http://www.java.com" \
+Auch wenn JS theoretisch nicht auf HTML begrenzt ist, wird es doch meistens dort verwendet und daher wird auch hier darauf eingegangen.
-           onMouseOver = "window.status = 'Javaseite'; return true" \
-           onMouseOut = "window.status = ' '; return = true">\
+=== HTML mit JS ===
-           <img src = "bild.gif">\
-        </a>\
+Dieses Beispiel zeigt ein schlechtes Beispiel, bei welchem JS und HTML bunt gemischt sind. Auf [https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten#unaufdringliches_JavaScript selfhtml] wird aufgezeigt, wieso man dies sauber trennen soll.
-    </body>\
+ <code>
-   </html>\
+   <html>
-</code>\
+   <head>
-\
+    <title>Testpage</title>
-Möchte man das Script in eine Datei auslagern, so muss nur das script Tag erweitert werden:<br />\
+    <script type = "text/javascript">
-<code>\
+      //Javascript Code mit Definitionen
-<script type = "text/javascript" src="datei.js">\
+        function () {
-</code>\
+        } // end function ()
-\
+    </script>
-== Sprachelemete ==\
+   </head>
-=== Kommentare ===\
+   !**  Ab hier kann man den Code verwenden **
-* //    -> Einzeilig\
+   <body onload = "function ()">
-* /* */ -> Mehrzeilig\
+      !**  Die folgenden Funktionen sind inline JS-Eventhandler **
-\
+      <a href = "http://www.java.com"
-=== Schlüsselwörter ===\
+         onMouseOver = "window.status = 'Javaseite'; return true"
-\
+         onMouseOut = "window.status = ' '; return = true">
-Bedingungen:\
+         <img src = "bild.gif">
-* if (Vergleich) {}        // Abfrage\
+      </a>
-* else {}                  // Wenn nicht if, dann...\
+   </body>
-* switch (x) case 1:       // Verzweigt an Hand der Bedingungsvariable. <br /><nowiki>             \
+   </html>
-              break;        // Abbruch, wenn Bedingung erfüllt. Sonst geht die Prüfung weiter. So kann man auch auf Bereiche prüfen</nowiki><br /><nowiki>\
+ </code>
-              default:      // Wenn keine erfüllt, kann auch default eingebaut werden.</nowiki>\
-\
+=== HTML mit ausgelagertem JS ===
-Schleifen:\
-* while (Bedingung) {}     // Solange die Bedingung stimmt, wird ausgeführt\
+Möchte man das Script in eine Datei auslagern, so muss nur das script Tag erweitert werden:<br />
-* for (Start;Ende;Schritt) // Solange die Endbedingung nicht erreicht ist, wird die Zählvariable um die Schrittweite angepasst\
+<code><script type = "text/javascript" src="datei.js"></script></code>
-* break;                   // Schleife verlassen\
+Ab HTML5 ist auch die Angabe von <code>type</code> nicht mehr notwendig. <code>language</code> hingegen ist "deprecated" und soll daher nicht mehr eingesetzt werden.
-* continue;                // Schleife mit dem nächsten Durchgang fortsetzen\
-\
+HTML:
-Definitionen:\
+ <code>
-* function ()              // Funktion definieren\
+  <html>
-* var x = ...              // Variable definieren\
+   <head>
-\
+    <title>Testpage</title>
-sonstige reservierte Wörter:\
+   </head>
-* do // do-while Schleife\
+   <body>
-* false und true\
+      <a href = "http://www.java.com">
-* in // in for Schleife verwendet\
+       <img id = "test" src = "bild.gif">
-* new // neues Objekt\
+      </a>
-* return // Rückgabewert\
+      <script src="datei.js"></script>
-* this // aktuelles Objekt\
+   </body>
-\
+  </html>
-noch nicht verwendete, doch reservierte Wörter (Evtl. in neueren Versionen schon verwendet):\
+ </code>
-* abstract, boolean, byte, Catch, char, class, const, Default, delete, debugger, enum, Double\
-* export, extends, final, Finally, float, goto, implements, Import, instanceof, int, interface, Label\
+JavaScript:
-* long, native, null, Package, private, protected, public, Short, static, super, synchronized, Throw\
+ <code>
+  function status(state) {
+  if (state) { window.status = 'Javaseite'; }
+  else { window.status = ' '; }
+ }
+  var test = document.getElementById('test');
+  test.addEventListener ('hover', status, true);
+  test.addEventListener ('loose', status, false);
+ </code>
+=== Laden von Javascript in HTML ===
+Damit JS sauber verwendet werden kann, muss zum Zeitpunkt des Ausführens das oder die Elemente, auf die JS zugreifen soll, im Browser geladen sein. Man kann daher nicht einfach das Skript im Header einbinden und auf Elemente zugreifen, welche erst später geparst werden, ohne entsprechend Massnahmen zu treffen. Aus diesem Grund werden folgende Vorgehensweisen empfohlen:
+{| class="wikitable sortable"
+|-
+! Einbindung !! Vorteile !! Nachteile !! Beispiel
+|-
+| Erst ganz am Ende des Dokuments || Der Dokumentbaum steht mit allen Elementen direkt zur Verfügung. || Ist es ein grosses Skript, so sieht der Anwender zwar die Seite, doch er kann sie nicht verwenden, da im Hintergrud noch das JS geladen und analysiert werden muss, bevor es verwendet werden kann. || <code><nowiki></body><script src="datei.js"></html></nowiki></code>
+|-
+| Im <code><nowiki><head></nowiki></code>-Teil || Der Browser kann die Datei aufbereiten und einbinden und nachher mit dem parsen weiter fahren und muss dies nicht am Schluss noch erledigen. || Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann. || HTML: <code><nowiki><head><script src="datei.js"></head></nowiki></code><br /> JS: <code><nowiki>document.body.addEventListener("load",test);</nowiki></code>
+|-
+| Im <code><nowiki><head></nowiki></code>-Teil mit dem Argment [https://wiki.selfhtml.org/wiki/HTML/Attribute/defer dever] || Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat. Ein entsprechend aufbereitetes Skript wird nach dem Parsen des DOM, und vor dem Auslösen des DOMContentLoaded Events ausgeführt. Mehrere defer-Scripte werden in der Reihenfolge ausgeführt, in der sie im HTML angetroffen werden. || Man muss die Eventhandler explizit mit dem "Ladevorgang beendet"-Ereignis verknüpfen, damit das Skript sauber eingebunden werden kann. || <code><nowiki><head><script src="datei.js" dever></head></nowiki></code>
+|-
+| Im <code><nowiki><head></nowiki></code>-Teil mit dem Argment [https://wiki.selfhtml.org/wiki/HTML/Attribute/async async] || Der Browser kann im Hintergrund die Datei aufbereiten und einbinden, bis er die Seite fertig aufgebaut hat. || Man kann nicht wissen, wann genau der Browser das Skript lädt, analysiert und es zur Verfügung stellt. Um Elemente sauber zu initialisieren muss daher nach dem Beispiel von [https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded selfhtml] vorgegangen werden, welches die möglichen Zustände beim Ausführen berücksichtigt. || <code><nowiki><head><script src="datei.js" async></head></nowiki></code>
+|}
+Möchte man nachlesen, wie der Browser vorgeht, so zeigt es der entsprechende [https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Einbindung_in_HTML#Script_in_den_head_oder_ans_Ende_des_body-Elements.3F Artikel im selfhtml].
+== Sprachelemete ==
+=== Kommentare ===
+* //    -> Einzeilig
+* /* */ -> Mehrzeilig
+=== Schlüsselwörter ===
+==== Bedingungen ====
+* if (Vergleich) {}        // Abfrage
+* else {}                  // Wenn nicht if, dann...
+* switch (x) case 1:       // Verzweigt an Hand der Bedingungsvariable. <br /><nowiki>
+              break;        // Abbruch, wenn Bedingung erfüllt. Sonst geht die Prüfung weiter. So kann man auch auf Bereiche prüfen</nowiki><br /><nowiki>
+              default:      // Wenn keine erfüllt, kann auch default eingebaut werden.</nowiki>
+==== Schleifen ====
+* while (Bedingung) {}     // Solange die Bedingung stimmt, wird ausgeführt
+* for (Start;Ende;Schritt) // Solange die Endbedingung nicht erreicht ist, wird die Zählvariable um die Schrittweite angepasst
+* break;                   // Schleife verlassen
+* continue;                // Schleife mit dem nächsten Durchgang fortsetzen
+==== Definitionen ====
+* function ()              // Funktion definieren
+* var x = ...              // Variable definieren
+==== sonstige reservierte Wörter ====
+* do // do-while Schleife
+* false und true
+* in // in for Schleife verwendet
+* new // neues Objekt
+* return // Rückgabewert
+* this // aktuelles Objekt
+==== Für die Zukunft reservierte Wörte ====
+noch nicht verwendete, doch reservierte Wörter (Evtl. in neueren Versionen schon verwendet):
+* abstract, boolean, byte, Catch, char, class, const, Default, delete, debugger, enum, Double
+* export, extends, final, Finally, float, goto, implements, Import, instanceof, int, interface, Label
+* long, native, null, Package, private, protected, public, Short, static, super, synchronized, Throw
 * throws, transient, try, Typeof, void, with\
-\
-=== Vergleichsoperatoren ===\
+=== Vergleichsoperatoren ===
-AND und OR sind nicht erlaubt.\
+AND und OR sind nicht erlaubt.
-* < <= und > => Für grösser und kleiner Vergleiche\
+* < <= und > => Für grösser und kleiner Vergleiche
-* == != gleich und ungleich\
+* == != gleich und ungleich
-* && || UND und ODER\
+* && || UND und ODER
-\
-=== Eventhandler ===\
+=== [https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung Eventhandler] ===
-Eventhandler werden in html-tags integriert und reagieren auf Ereignisse. Die Schreibweise ist egal.\
+Eventhandler verarbeiten Ereignisse. Früher wurden diese direkt in den HTML-Code integriert (onBlur, onClick, onFocus). Heutzutage wird dies mit einem [[DOM#Zugriff_auf_den_DOM_mit_Javascript | Eventhandler]] erledigt.
-* onBlur      // Element (z.B. Eingabefeld) verliert den Focus\
-* onClick     // Beim Klicken mit der linken Maustaste\
+== Objektbaum ==
-* onFocus     // Element bekommt den Focus\
+Folgende Objekte stehen zur Verfügung. Der gesamte Baum kann im [https://wiki.selfhtml.org/wiki/JavaScript/Window selfhtml] mit allen Methoden nachgeschaut werden.
-* onLoad      // Beim Laden des Elementes\
+ <code>
-* onMouseOut  // Beim verlassen des Bereiches durch die Maus\
+   '''window'''    -> document -> Image               // Bilder bearbeiten
-* onMouseOver // Wenn sich die Maus im "TAG"-Bereich befindet\
+                         -> Form   -> elements  // Formular "manipulieren"
-\
+                         -> Link                //
-Gesamthaft gibt es zur Zeit fast 30 Eventhandler (JS 1.5).\
+                         -> Anchor
-\
+             -> Location                        // aktuelle Webadresse
-== Objektbaum ==\
+             -> History                         // besuchte Seiten
-Folgende Objekte stehen zur Verfügung:\
+   '''navigator''' -> Plugin                          // Browser und verwendete Plugins
-<code>\
+   '''screen'''                                       // Bildschirmauflösung
-   '''window'''    -> document -> Image               // Bilder bearbeiten\
+   '''Math'''                                         // Mathematische Funktionen
-                         -> Form   -> elements  // Formular "manipulieren"\
+   '''Date'''                                         // Datum und Uhrzeit
-                         -> Link                // \
+   '''String'''                                       // Strings manipulieren
-                         -> Anchor\
+ </code>
-             -> Location                        // aktuelle Webadresse\
-             -> History                         // besuchte Seiten\
+=== Zugriff auf Knoten ===
-\
-   '''navigator''' -> Plugin                          // Browser und verwendete Plugins\
+Sämtliche Knoten können über das [https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node Nodes-Objekt] erreicht werden.
-\
-   '''screen'''                                       // Bildschirmauflösung\
+=== window ===
-\
+Stellt das Browserfenster dar. Wichtigstes Unterelement ist document, welches die Webseite enthält.
-   '''Math'''                                         // Mathematische Funktionen\
-\
+Methoden:
-   '''Date'''                                         // Datum und Uhrzeit\
+* win = window.open("", "Titel", width = "x", height = "y", resizable = "yes");  // Webseite öffnen. Ohne resiz. hat das Fenster eine fixe Grösse.
-\
+* window.alert("Alarmmeldung");  // Meldungen mit Ok.
-   '''String'''                                       // Strings manipulieren\
+* var = window.confirm("Bestätigung");  // Ok und Abbruch. var ist TRUE bei Ok.
-</code>\
+* var = window.prompt("Frage");  // Ok und Abbruch. var enthält den Text der Abfragebox.
-\
+* window.close() // Schliesst das Fenster
-== window ==\
+* win.setTimeout("window.close", 5000); // Timeout von 5000 Milisekunden abwarten, dann die Funktion (Fenster schliessen) ausführen.
-Stellt das Browserfenster dar. Wichtigstes Unterelement ist document, welches die Webseite enthält.\
-\
+==== Eigenschaften ====
-Methoden:\
-* win = window.open("", "Titel", width = "x", height = "y", resizable = "yes");  // Webseite öffnen. Ohne resiz. hat das Fenster eine fixe Grösse.\
-* window.alert("Alarmmeldung");  // Meldungen mit Ok.\
-* var = window.confirm("Bestätigung");  // Ok und Abbruch. var ist TRUE bei Ok.\
-* var = window.prompt("Frage");  // Ok und Abbruch. var enthält den Text der Abfragebox.\
-* window.close() // Schliesst das Fenster\
-* win.setTimeout("window.close", 5000); // Timeout von 5000 Milisekunden abwarten, dann die Funktion (Fenster schliessen) ausführen.\
-\
-Eigenschaften:\
 * window.status("Ausgabe"); // Statusleiste\
-\
-=== ''document'' ===\
+=== document ===
-Will man ein DOM-Element manipulieren, so geschieht dies über dieses Unterobjekt. Die direkte Ausgabe auf die Seite ist eher selten. \
+Will man ein DOM-Element manipulieren, so geschieht dies über dieses Unterobjekt. Die direkte Ausgabe auf die Seite ist eher selten.
-Meist wird dann das gewünschte Element über seine ID angesprochen oder man benennt das Objekt wie etwa ein Formular (<form>) oder einen Abschnitt <nowiki>(<p>)</nowiki> direkt.\
+Meist wird dann das gewünschte Element über seine ID angesprochen oder man benennt das Objekt wie etwa ein Formular (<form>) oder einen Abschnitt <nowiki>(<p>)</nowiki> direkt.
-\
-Methoden:\
+Methoden:
-* window.document.bgColor = "#007F7F"; // Hintergrundfarbe setzen\
+* window.document.bgColor = "#007F7F"; // Hintergrundfarbe setzen
-* window.document.fgColor = "#FFFF00"; // Vordergrundfarbe setzen\
+* window.document.fgColor = "#FFFF00"; // Vordergrundfarbe setzen
-* window.document.open("text/html"); // Das Fenster als html definieren\
+* window.document.open("text/html"); // Das Fenster als html definieren
-* window.document.write("<nowiki><h1>Dies ist ein Test</h1></nowiki>");  // Text an das aufgerufene Objekt übergeben\
+* window.document.write("<nowiki><h1>Dies ist ein Test</h1></nowiki>");  // Text an das aufgerufene Objekt übergeben
-\
-==== ''form (Formular auswerten)'' ====\
+=== form (Formular auswerten) ===
-Das Formular ist "eine Hülle", welche die relevanten Elemente umfasst. Man kann es entweder direkt über den DOM mit seiner Position, mit der erstellten ID oder über den vergebenen Name ansprechen. Es ist zu beachten, dass hierbei weder der Name noch die ID doppelt vorkommen darf.\
+Das Formular ist "eine Hülle", welche die relevanten Elemente umfasst. Man kann es entweder direkt über den DOM mit seiner Position, mit der erstellten ID oder über den vergebenen Name ansprechen. Es ist zu beachten, dass hierbei weder der Name noch die ID doppelt vorkommen darf.
-\
+ <code>
-<code>\
+   function check() {
-   function check() {\
+     var laenge, eingabe;
-     var laenge, eingabe;\
+     eingabe = window.document.Formular.Feld1.value;
-     eingabe = window.document.Formular.Feld1.value;\
+     laenge = eingabe.length;
-     laenge = eingabe.length;\
+     // Test des Inhalts und was auch immer
-     // Test des Inhalts und was auch immer\
+   } // end function check
-   } // end function check\
-\
+   <form name = "Formular">
-   <form name = "Formular">\
+     <input name = "Feld1">
-     <input name = "Feld1">\
+     <input type = "Button" value = "Absenden" onclick = "return check()">
-     <input type = "Button" value = "Absenden" onclick = "return check()">\
+   </form>
-   </form>\
+ </code>
-</code>\
+Der return hier ist wichtig. Liefert die Funktion TRUE zurück (Standard), so wird das Formular abgeschickt. Liefert sie FALSE, so muss nochmals geprüft werden. Im Fehlerfall muss die Prüffunktion daher FALSE zurückliefern.
-\
-Der return hier ist wichtig. Liefert die Funktion TRUE zurück (Standard), so wird das Formular abgeschickt. Liefert sie FALSE, so muss nochmals geprüft werden. Im Fehlerfall muss die Prüffunktion daher FALSE zurückliefern.\
+Da die Elemente in der Reihenfolge ihres Auftretens angesprochen werden, hätte man dieses Formular auch über
-\
+   window.document.forms[0]
-Da die Elemente in der Reihenfolge ihres Auftretens angesprochen werden, hätte man dieses Formular auch über\
+ansprechen können.
-   window.document.forms[0]\
-ansprechen können.\
+Wichtige Methoden:
-\
+* ..formularname.submit() // Sendet das Formular ab
-Wichtige Methoden:\
+* ..formularname.reset()  // Setzt das Formular zurück
-* ..formularname.submit() // Sendet das Formular ab\
-* ..formularname.reset()  // Setzt das Formular zurück\
+Wichtige Eigenschaften:
-\
-Wichtige Eigenschaften:\
 * ..formularname.action // Enthält den Inhalt von action im Form-Tag\
 * ..formularname.length // Enthält die Anzahl Elemente des Formulars\
-\
-==== ''select (Auswahlliste in Formular auswerten)'' ====\
+=== select (Auswahlliste in Formular auswerten) ===
-Die Auswahlliste ist eigentlich nur ein Teil eines Forms. Da sie aber häufig auftritt und die saubere Verarbeitung nicht einfach ist, folgt hier ein Beispiel mit Auswertung einer Liste, welche dann die entsprechende Datei zum download zur Verfügung stellt.\
+Die Auswahlliste ist eigentlich nur ein Teil eines Forms. Da sie aber häufig auftritt und die saubere Verarbeitung nicht einfach ist, folgt hier ein Beispiel mit Auswertung einer Liste, welche dann die entsprechende Datei zum Download zur Verfügung stellt.
-\
+ <code>
-<code>\
+   function auswahl() {
-   function auswahl() {\
+     var index = window.document.Formular.SelectFeld.selectedIndex; // Holt den Index des select
-     var index = window.document.Formular.SelectFeld.selectedIndex; // Holt den Index des select\
+     var datei = window.document.Formular.SelectFeld.options[index].value; // Holt den Namen aus dem Index heraus
-     var datei = window.document.Formular.SelectFeld.options[index].value; // Holt den Namen aus dem Index heraus\
+     location.href=datei; // Die Datei zum download anbieten -> Bei html oder text würde auf die neue Seite gewechselt
-     location.href=datei; // Die Datei zum download anbieten -> Bei html oder text würde auf die neue Seite gewechselt\
+   } // end function auswahl
-   } // end function auswahl\
-\
+   <form name = "Formular">
-   <form name = "Formular">\
+     <select name = "SelectFeld">
-     <select name = "SelectFeld">\
+       <option selected = "selected" value = 'file1.zip'>File 1</option>
-       <option selected = "selected" value = 'file1.zip'>File 1</option>\
+       <option value = 'file2.zip'>File 2</option>
-       <option value = 'file2.zip'>File 2</option>\
+     </select>
-     </select>\
+     <input type = "Button" value = "Download" onClick = "auswahl()">
-     <input type = "Button" value = "Download" onClick = "auswahl()">\
+   </form>
-   </form>\
+ </code>
-</code>\
-\
+Oder ein Kurzbeispiel zum Testen, das anzeigt, welches Element nun gewählt wurde:
-==== ''elements (Formular auswerten)'' ====\
+ selectElem.addEventListener('change', getSelection, false);
-Wie unter Form erklärt, kann man die Elemente mit ihrem Namen oder ihrer ID ansprechen. Verwendet man den DOM, so spricht man die Elemente über ihre Arrynummer an\
-   window.document.forms[0].elements[0]\
+ function getSelection(event) {
-Die einzelnen Elemente kann man über die Eigenschaft length von Form durchzählen. Auch hier darf bei Verwendung des Namens oder der ID kein Feld doppelt vergeben sein.\
+    var value = event.target.options[this.selectedIndex].value;
-\
+    console.log("Selektiert: " + value);
-Wichtige Methoden:\
+ }
-* ..formularname.elementname.focus()  // Setzt den Fokus auf das betreffende Feld\
-* ..formularname.elementname.select() // Markiert das betreffende Feld\
+=== elements (Formular auswerten) ===
-\
+Wie unter Form erklärt, kann man die Elemente mit ihrem Namen oder ihrer ID ansprechen. Verwendet man den DOM, so spricht man die Elemente über ihre Arrynummer an
-Wichtige Eigenschaften:\
+   window.document.forms[0].elements[0]
-* ..formularname.elementname.value // Liest den Inhalt des Feldes aus. Dieser kann darüber auch gesetzt werden.\
+Die einzelnen Elemente kann man über die Eigenschaft length von Form durchzählen. Auch hier darf bei Verwendung des Namens oder der ID kein Feld doppelt vergeben sein.
-* ..formularname.elementname.type  // Enthält den Typ des entsprechenden Feldes (Input, Submit, usw.)\
-\
+Wichtige Methoden:
-==== ''images (Bilder)'' ====\
+* ..formularname.elementname.focus()  // Setzt den Fokus auf das betreffende Feld
-Die Bilder werden entweder über ihren Namen oder über den Index in der Reihenfolge angesprochen:\
+* ..formularname.elementname.select() // Markiert das betreffende Feld
-window.document.images[0].src = "bild1.jpeg"; // src ist die source.\
-\
+Wichtige Eigenschaften:
-Wichtige Eigenschaften:\
+* ..formularname.elementname.value // Liest den Inhalt des Feldes aus. Dieser kann darüber auch gesetzt werden.
-* ..images[0].border // Nur lesbar. Prüft, ob die Grafik einen Rand hat\
+* ..formularname.elementname.type  // Enthält den Typ des entsprechenden Feldes (Input, Submit, usw.)
-* ..images[0].heigth // Nur lesbar. Höhe der Grafik\
-* ..images[0].width // Nur lesbar. Breite der Grafik\
+=== images (Bilder) ===
-\
+Die Bilder werden entweder über ihren Namen oder über den Index in der Reihenfolge angesprochen:
-\
+window.document.images[0].src = "bild1.jpeg"; // src ist die source.
-=== ''Location'' ===\
-Ort der Webseite. Kann etwa für Umleitungen verwendet werden. Auch Dateidownloads sind möglich.\
+Wichtige Eigenschaften:
-\
+* ..images[0].border // Nur lesbar. Prüft, ob die Grafik einen Rand hat
-Eigenschaften:\
+* ..images[0].heigth // Nur lesbar. Höhe der Grafik
-* location.href = "neu.html" // Neue Seite im Browser öffnen\
+* ..images[0].width // Nur lesbar. Breite der Grafik
-* location.href = "neu.zip"  // Datei wird zum Download angeboten\
-\
-\
+=== Location ===
-=== ''History'' ===\
+Ort der Webseite. Kann etwa für Umleitungen verwendet werden. Auch Dateidownloads sind möglich.
-Webseitenverlauf.\
-\
+Eigenschaften:
-Methoden:\
+* location.href = "neu.html" // Neue Seite im Browser öffnen
-* history.back() // Eine Seite zurück\
+* location.href = "neu.zip"  // Datei wird zum Download angeboten
-* history.forward() // Eine Seite vor\
-* history.go(Nummer) // Geht zur gewünschten Position. -1 = 1 Seite zurück und 1 = 1 Seite vor. Man kann auch einen Teil der gewünschten URL übergeben und der Browser versucht dann, zu dieser Seite zu gehen.\
+=== History ===
-\
+Webseitenverlauf
-== navigator und screen ==\
-Möglichst nicht verwenden, da Browserweichen out sind und Bildschirmauflösungen für eine fliessende Darstellung unrelevant sind. Daher die Eigenschaften mehr aus historischen Gründen.\
+Methoden:
-\
+* history.back() // Eine Seite zurück
-navigator:\
+* history.forward() // Eine Seite vor
-* var = navigator.appName;     // Browsername wie IE5, Opera10 usw. Kann über den UserAgent-Switcher angepasst werden\
+* history.go(Nummer) // Geht zur gewünschten Position. -1 = 1 Seite zurück und 1 = 1 Seite vor.<br />Man kann auch einen Teil der gewünschten URL übergeben und der Browser versucht dann, zu dieser Seite zu gehen.
-* var = navigator.appCodeName; // Codenamen des Browsers\
-* var = navigator.appVersion;  // Browserversion\
+=== navigator und screen ===
-* var = navigator.language;    // Sprache des Browsers\
+Möglichst nicht verwenden, da Browserweichen out sind und Bildschirmauflösungen für eine fliessende Darstellung unrelevant sind. Daher die Eigenschaften mehr aus historischen Gründen.
-* var = navigator.platform;    // Betriebssystem\
+Wenn man unterschiedliche Bildschirme ansprechen möchte, so wird dies über @media im [[CSS|CSS]]-Teil der Webseite geregelt.
-* var = navigator.userAgent;  // Zeile, welche der eingestellte UserAgent liefert.\
+Unter [https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Einbindung_in_HTML selfhtml] wird gezeigt, wie HTML, CSS und JS ineinandergreifen.
-\
-Das Unterobjekt plugins könnte zum prüfen auf ein gewünschtes Plugin wie etwa Flash usw. verwendet werden, doch dies will man ja nicht fördern.\
+navigator:
-\
+* var = navigator.appName;     // Browsername wie IE5, Opera10 usw. Kann über den UserAgent-Switcher angepasst werden
-screen:\
+* var = navigator.appCodeName; // Codenamen des Browsers
-* var = screen.height      // Bildschirmhöhe\
+* var = navigator.appVersion;  // Browserversion
-* var = screen.width       // Bildschirmbreite\
+* var = navigator.language;    // Sprache des Browsers
-* var = screen.pixelDepth  // Pixeltiefe in Bit (8, 16, 24, 32)\
+* var = navigator.platform;    // Betriebssystem
-* var = screen.colorDepth  // Farbtiefe -> Wenn gleich wie Pixeltiefe, dann falsch (2 hoch Pixeltiefe) -> Math.pow(2, screen.PixelDepth)\
+* var = navigator.userAgent;  // Zeile, welche der eingestellte UserAgent liefert.
-* var = screen.availHeight // verfügbare Bildschirmhöhe\
-* var = screen.availWidth  // verfügbare Bildschirmbreite\
+Das Unterobjekt plugins könnte zum Prüfen auf ein gewünschtes Plugin verwendet werden, doch dies will man ja nicht fördern.
-\
-== Math, Date und String ==\
+screen:
-Wichtige Methoden und Eigenschaften der Objekte.\
+* var = screen.height      // Bildschirmhöhe
-\
+* var = screen.width       // Bildschirmbreite
-Math:\
+* var = screen.pixelDepth  // Pixeltiefe in Bit (8, 16, 24, 32)
-*y = Math.E // Eulersche Zahl = 2.718...\
+* var = screen.colorDepth  // Farbtiefe -> Wenn gleich wie Pixeltiefe, dann falsch (2 hoch Pixeltiefe) -> Math.pow(2, screen.PixelDepth)
-*y = Math.floor(Zahl) // Rundung auf nächsttiefere Zahl\
+* var = screen.availHeight // verfügbare Bildschirmhöhe
-*y = Math.PI; // Wert von pi = 3.14...\
+* var = screen.availWidth  // verfügbare Bildschirmbreite
-*y = Math.pow(Zahl, Potenz) // Potenzierung der gewünschten Zahl -> 2, 32 -> 2hoch32 sind etwa 16Millionen\
-*y = Math.round(Zahl) // Rundung auf nächsthöhere Zahl (oder mathematisch?)\
+Will man die Bildschirmbreite an php übergeben, damit etwa die Vorschaubilder abhängig der Bildschirmbreite ausgegeben werden, so ist dies möglich:
-*y = Math.sin(Winkel); // Sinus des Winkels. Entsprechend cos, tan\
+ <code>
-*y = Math.sqrt(Zahl); // Quadratwurzel\
+   echo("<script language='javascript'>\n");
-\
+   echo("location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"."&width=\" + screen.width + \"&height=\" + screen.height;\n");
-String (1. Buchstabe beginnt an Position 0.):\
+   echo ("</script>\n");
-*y = x.charAT(Stelle); // Liefert das Zeichen, welches an der gesuchten Stelle steht. Meist für Vergleiche (if (x.charAT(0) == 3))... -> Siehe Standardfunktionen\
+   exit();
-*y = eval(String1 Rechenoperation String2) // Es wird mathematisch gerechnet, ohne dass die Strings vorher umgewandelt hätten werden müssen. Vorsicht bei Divisionen, damit es kein Div by Zero gibt.\
+ </code>
-*y = x.indexOF("Vergleichsstring") // Wird der Vergleichsstring im String gefunden, ist die Antwort grösser als -1\
+Anschliessend stehen die Werte als GET-Parameter zur Auswertung in [[PHP|PHP]] zur Verfügung.
-*y = x.parseFloat(String); // Versucht, den String in eine Gleitkommazahl umzuwandeln.\
-*y = x.parseInt(String); // Versucht, den String in eine ganze Zahl umzuwandeln.\
+=== Math, Date und String ===
-*y = x.slice(Start); // Schneidet von Start bis zum Ende heraus.\
+Wichtige Methoden und Eigenschaften der Objekte.
-*y = x.String(Objekt); // Wandelt das Objekt in einen String. Funktioniert es nicht, gibt es einen leeren String.\
-*y = x.substr(Anfang, Länge); // Ab Anfang ausschneiden, bis Länge erreicht.\
+Math:
-*y = x.substring(Anfang, Ende); // Es werden die Buchstaben der Position Anfang bis Ende ausgeschnitten. \
+*y = Math.E // Eulersche Zahl = 2.718...
-*y = x.toUpperCase(String); // Alles in Grossbuchstaben. In Kleinbuchstaben vice versa.\
+*y = Math.floor(Zahl) // Rundung auf nächsttiefere Zahl
-\
+*y = Math.PI; // Wert von pi = 3.14...
-Date:\
+*y = Math.pow(Zahl, Potenz) // Potenzierung der gewünschten Zahl -> 2, 32 -> 2hoch32 sind etwa 16Millionen
-Zuerst muss ein Objekt erstellt werden, welches dann die konkreten Daten enthält:\
+*y = Math.round(Zahl) // Rundung auf nächsthöhere Zahl (oder mathematisch?)
-var Datum = Date();\
+*y = Math.sin(Winkel); // Sinus des Winkels. Entsprechend cos, tan
-*jahr = Datum.getFullYear();\
+*y = Math.sqrt(Zahl); // Quadratwurzel
-*monat = Datum.getMonth() + 1;\
-*tag = Datum.getDate();\
+String (1. Buchstabe beginnt an Position 0.):
-Die Zeit wird über getHours(), getMinutes() und getSeconds ermittelt.\
+*y = x.charAT(Stelle); // Liefert das Zeichen, welches an der gesuchten Stelle steht. Meist für Vergleiche (if (x.charAT(0) == 3))... -> Siehe Standardfunktionen
-Möchte man von UTC ausgehen, so erhalten die Funktionen einfach noch ein UTC vorne: getUTCFullYear()\
+*y = eval(String1 Rechenoperation String2) // Es wird mathematisch gerechnet, ohne dass die Strings vorher umgewandelt hätten werden müssen. Vorsicht bei Divisionen, damit es kein Div by Zero gibt.
-\
+*y = x.indexOF("Vergleichsstring") // Wird der Vergleichsstring im String gefunden, ist die Antwort grösser als -1
-== Funktionen ==\
+*y = x.parseFloat(String); // Versucht, den String in eine Gleitkommazahl umzuwandeln.
-Werden direkt über die Eventhandler aufgerufen:\
+*y = x.parseInt(String); // Versucht, den String in eine ganze Zahl umzuwandeln.
-\
+*y = x.slice(Start); // Schneidet von Start bis zum Ende heraus.
-<code>\
+*y = x.String(Objekt); // Wandelt das Objekt in einen String. Funktioniert es nicht, gibt es einen leeren String.
-   <head>\
+*y = x.substr(Anfang, Länge); // Ab Anfang ausschneiden, bis Länge erreicht.
-     <script language = "javascript">\
+*y = x.substring(Anfang, Ende); // Es werden die Buchstaben der Position Anfang bis Ende ausgeschnitten.
-       function test() {\
+*y = x.toUpperCase(String); // Alles in Grossbuchstaben. In Kleinbuchstaben vice versa.
-         // Hier kommt nun die Funktion\
-       } // end function test\
+Date:
-     </script>\
+Zuerst muss ein Objekt erstellt werden, welches dann die konkreten Daten enthält:
-   </head>\
+var Datum = Date();
-\
+*jahr = Datum.getFullYear();
-   <body onload = "test()">\
+*monat = Datum.getMonth() + 1;
-   </body>\
+*tag = Datum.getDate();
-</code>\
+Die Zeit wird über getHours(), getMinutes() und getSeconds ermittelt.
-\
+Möchte man von UTC ausgehen, so erhalten die Funktionen einfach noch ein UTC vorne: getUTCFullYear()
-Wichtig ist, dass Funktionen mit Buchstaben beginnen müssen und sonst nur noch Zahlen und den Unterstrich enthalten dürfen. Es sind keine Sonderzeichen oder reservierten Wörter erlaubt.\
-Gross- und Kleinschreibung wird beachtet.\
+== [https://wiki.selfhtml.org/wiki/JavaScript/Funktion Funktionen] ==
-\
+Werden direkt über die Eventhandler aufgerufen:
-=== Parameterübergabe ===\
-Die Parameter werden einfach in der Klammer mitgegeben und in der Funktion direkt ausgewertet ohne Variablendefinition.\
+ <nowiki>
-\
+ <code>
-<code>\
+   <head>
-function test(parameter) {...} // end function test()\
+     <script language = "javascript"></nowiki>
-\
+       function test() {
-test(parameter);\
+         // Hier kommt nun die Funktion
-</code>\
+       } // end function test
-\
+     </script>
-=== Standardfunktionen ===\
+   </head>
-*zahl = '''parsFloat'''(Text); // Versucht, den Text in eine Float Zahl umzuwandeln. Enthält sie Text, ergibt es 0.\
-*'''charAt'''(Zeichen);        // Wandelt die Variable Z in einen Char um.\
+   <body onload = "test()">
-*if (erlaubteZeichen.'''indexOf'''(TestZeichen) == -1); // Wenn die Variable nicht im String erlaubteZeichen auftaucht, wird -1 zurückgeliefert. Der String kann alle möglichen Zeichen enthalten auf die man prüfen will.\
+   </body>
-*x.'''setTimeout'''('function()', 1000) // Das Objekt x ruft nach 1000 Milisekunden die gewünschte Funktion auf. x kann zum Beispiel window sein. Wenn man nun <body onLoad="window.setTimeout('umleiten()', 5000)"> einsetzt, wird die Funktion nach 5 Sek. aufgerufen.\
+</code>
-\
-=== Nützliche Funktionen ===\
+Wichtig ist, dass Funktionen mit Buchstaben beginnen müssen und sonst nur noch Zahlen und den Unterstrich enthalten dürfen. Es sind keine Sonderzeichen oder reservierten Wörter erlaubt.
-==== Eingabe auf erlaubte Zeichen prüfen ====\
+Gross- und Kleinschreibung wird beachtet.
-<code>\
-function check_Eingabe () {\
+==== Parameterübergabe ====
- var zeichen = "0123456789", zähler, eingabe, länge; // Erlaubte Zeichen definieren und Hilfsvariablen zur Auswertung. \
+Die Parameter werden einfach in der Klammer mitgegeben und in der Funktion direkt ausgewertet ohne Variablendefinition.
-                                                      // Der Funktion könnte das Feld natürlich auch direkt übergeben werden.\
- Eingabe = window.document.forms[0].elements[0].value; // Element, welches ausgewertet wird\
+<code>
- länge = Eingabe.length;\
+function test(parameter) {...} // end function test()
- for (zähler = 0; zähler=länge; zähler++) {\
-  if (zeichen.indexOf(Eingabe.charAt(zähler))==-1) { // Vergleichen, ob das Zeichen an der Stringstelle von Eingabe nicht \
+test(parameter);
-                                                      // im String zeichen vorkommt\
+</code>
-   alert ("Nur Ziffern sind erlaubt");\
-   window.document.forms[0].elements[0].value=""; // Wert zurücksetzen -> Kann man auch unterlassen\
+==== Standardfunktionen ====
-   window.document.forms[0].elements[0].focus(); // Focus aufs Feld mit dem Fehler\
+*zahl = '''parsFloat'''(Text); // Versucht, den Text in eine Float Zahl umzuwandeln. Enthält sie Text, ergibt es 0.
-   return false; // Wenn man den Test beim absenden macht, verhindert das false das absenden. True ist Standard, wenn alles i.O.\
+*'''charAt'''(Zeichen);        // Wandelt die Variable Z in einen Char um.
-  } // end if\
+*if (erlaubteZeichen.'''indexOf'''(TestZeichen) == -1); // Wenn die Variable nicht im String erlaubteZeichen auftaucht, wird -1 zurückgeliefert. Der String kann alle möglichen Zeichen enthalten auf die man prüfen will.
- } // end for\
+*x.'''setTimeout'''('function()', 1000) // Das Objekt x ruft nach 1000 Milisekunden die gewünschte Funktion auf. x kann zum Beispiel window sein. Wenn man nun <body onLoad="window.setTimeout('umleiten()', 5000)"> einsetzt, wird die Funktion nach 5 Sek. aufgerufen.
-} // end function eingabe()\
-</code>\
+==== Nützliche Funktionen ====
-\
+===== Eingabe auf erlaubte Zeichen prüfen =====
-== Wichtige allgemeine Eigenschaften ==\
-Folgende Eigenschaften werden von mehreren Objekten zur Verfügung gestellt und verwendet:\
+ <code>
-\
+ function check_Eingabe () {
-=== length ===\
+  var zeichen = "0123456789", zähler, eingabe, länge; // Erlaubte Zeichen definieren und Hilfsvariablen zur Auswertung.
-Enthält die Länge einer Variable oder die Anzahl Elemente eines Arrays.\
+                                                      // Der Funktion könnte das Feld natürlich auch direkt übergeben werden.
-a = window.document.length; // Anzahl Zeichen einer Webseite\
+  Eingabe = window.document.forms[0].elements[0].value; // Element, welches ausgewertet wird
-\
+  länge = Eingabe.length;
-=== value ===\
+  for (zähler = 0; zähler=länge; zähler++) {
-Wert, welcher in ein Objekt geschrieben wird.\
+   if (zeichen.indexOf(Eingabe.charAt(zähler))==-1) { // Vergleichen, ob das Zeichen an der Stringstelle von Eingabe nicht
-document.Formularname.Feldname.value = String;\
+                                                      // im String zeichen vorkommt
-\
+    alert ("Nur Ziffern sind erlaubt");
-== Fehlerbehandlung (try-catch-finally) ==\
+    window.document.forms[0].elements[0].value=""; // Wert zurücksetzen -> Kann man auch unterlassen
-<pre>\
+    window.document.forms[0].elements[0].focus(); // Focus aufs Feld mit dem Fehler
-try {\
+    return false; // Wenn man den Test beim absenden macht, verhindert das false das absenden. True ist Standard, wenn alles i.O.
-   // Anweisungsblock, welcher Fehler machen könnte\
+   } // end if
-}\
+  } // end for
-catch(error) {\
+ } // end function eingabe()
-   // Ausführung, wenn der Fehler auftrat\
+ </code>
-}\
-finally {\
+==== Unterschied Funktion und [https://wiki.selfhtml.org/wiki/JavaScript/Funktion#Funktionsausdruck Funktionsausdruck] und [https://wiki.selfhtml.org/wiki/JavaScript/Funktion#Anonyme_Funktionen namenlose Funktion] ====
-   // Immer ausführen, egal ob Fehler oder nicht\
+Eine normale Funktion kann im Skript auch erst nach dem Aufruf im Code definiert werden, da Javascript dafür sorgt, dass diese beim Aufruf zur Verfügung gestellt wird. Dies ist bei einem Funktionsausdruck nicht der Fall. Da man diesen normalerweise aber auch erst definiert, wenn man sie an eine Variable beim Aufruf zuweist ist dies auch nicht notwendig. Man muss es einfach beachten, wenn man im Nachhinein den Code überarbeitet und früher im Code auf solch einen Funktionsausdruck zugreifen will. In diesem Fall muss man daraus eine korrekte Funktion machen. Da ein Funktionsausdruck direkt an eine Variable zugewiesen wird, muss man dort entsprechend ein abschliessendes Semikolon setzen.
-} \
+Eine namenlose Funktion führt dieses Konzept weiter und wird entsprechend einem Parameter verwendet. Dies erlaubt kürzeren Code, den man allerdings nicht zu tief verschachteln sollte, um ihn lesbar zu halten und auch, um im Fehlerfall noch zu wissen, wo dieser auftrat.
-</pre>\
-Die Anweisung im try kann beliebig sein (Stream öffnen, testen der Benutzereingabe usw.). Tritt ein Fehler auf, welcher einen Programmfehler mit Abbruch generieren würde, so wird er an den catch-Block weiter geleitet. Dort kann man dann eine Ausgabe machen, was schief lief. Über finally kann man dann wieder bei Bedarf einen neuen Versuch anbieten oder über eine Variable entsprechend handeln.\
+ y = tuEtwas(5);              // Funktioniert, auch wenn <code>tuEtwas()</code> erst unterhalb definiert wird -> sollte man auf Grund eines guten Programmierstils aber nicht machen
-\
+ function tuEtwas(x) { .... } // normale Funktion
-== Webseiten mit freien Javascripts ==\
+ y(5);                        // Funktioniert nicht, da der Funktionsrumpf hier noch nicht zur Verfügung steht
-* [http://www.javapool.de/ Javapool]\
+ y = function(x) { ... };     // Funktionsrumpf (anonyme Funktion) wird mit einem ; abgeschlossen
+ setTimeout(function() { alert("Zeit vorbei!"); }, 2000); // anonyme Funktion
+==== Callback mit der Lambda-Funktion (Pfeil) ====
+Callback bedeutet, dass man einer Funktion nicht einfach nur Werte übergibt, sondern dass ein Wert davon auch wieder eine Funktion ist, die entsprechend aufgerufen wird. Siehe dazu auch die Ausführungen auf [https://wiki.selfhtml.org/wiki/JavaScript/Funktion#Lambda-Ausdruck_.28oder_Pfeilfunktion.29 selfhtml].
+Bei diesem Vorgehen wird aber this verändert, was nicht gewünscht ist. Um dies zu umgehen verwendet man den Aufruf per Pfeil:
+ werte = [ 1, 2, 3 ];     // Ein Array mit den Einträgen 1, 2 und 3
+ quadrate1 = werte.map(function(v) { return v*v;}); // klassischer callback mit anonymer Funktion
+ quadrate2 = werte.map(v => v*v); // Kurzaufruf mit Pfeil
+ console.log(quadrate1);
+ console.log(quadrate2);
+Beide Zeilen machen das gleiche, doch die zweite Variante ist nicht nur kürzer, sondern auch einfacher zu lesen. Folgende Einschränkungen sind aber zu beachten (wenn man erweitert programmiert):
+* Ausser einem eigenen this gibt es auch keine eigenen Werte für super, arguments und new.target
+* Die Folgerung ist, dass man Pfeilfunktionen nicht als Methoden verwenden soll und nicht als Konstruktor verwenden kann.
+* Die Helfer call, apply und bind von Function.prototype sind zwar für Pfeilfunktionen verwendbar, ein Wert für this kann aber nicht gesetzt werden.
+* Pfeilfunktionen als [https://wiki.selfhtml.org/wiki/JavaScript/Iterator#Generatoren Generator] sind nicht möglich, deshalb ist <code>yield</code> in einer Pfeilfunktion unzulässig.
+Man kann auch erweiterte Pfeilfunktionen mit geschweiften Klammern verwenden:
+ document.documentElement.addEventListener('click', event => {
+   if (event.target.tagName == 'BUTTON' && event.target.hasAttribute('aria-expanded')) {
+     event.target.setAttribute('aria-expanded', event.target.getAttribute('aria-expanded') != 'true');
+   } // end if
+ });
+== [https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event#Events Events des DOMs] ==
+Im verlinkten Artikel des Titels werden alle Events aufgeführt und auch, auf welche Elemente sie angewendet werden können. Hier sind nur diejenigen gelistet, die häufig verwendet werden.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/blur blur]</code> -> Beim Verlassen des aktiven Elements. Normalerweise bei Eingabefelder wenn der Inhalt geprüft werden soll auf leer oder ungültige Zeichen.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/change change]</code> -> Bei erfolgter Änderung eines Inhaltsfeldes. Der Handler wird erst beim Verlassen aktiv. Will man, dass die Aktion sofort geschieht, sollte man <code>input</code> verwenden.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/click click]</code> -> Wird beim loslassen der Maustaste getriggert doch ur, wenn sich dies noch im gelichen Feld wie beim Drücken befindet. Mit den Detaildaten kann man auch einen Doppelklick verarbeiten und sonst verwendet man <code>dblclick</code>. Um direkt auf das Drücken der Maustaste zu reagieren, benötigt man das <code>mousedown</code> oder <code>pointerdown</code> Event.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/contextmenu contextmenu]</code> -> Wird aufgerufen, wenn man mit der rechten Maustaste ein Kontextmenü anfordert. Der "Trick" dies zu verbieten, sollte nicht angewendet werden, da man es umgehen kann und so nur die Anwender verärgert.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/dblclick dblclick]</code> -> Wie <code>click</code>, doch nur bei doppeltem Anklicken.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded DOMContentLoaded]</code> -> Wird automatisch aufgerufen, wenn der [[DOM]] geladen wurde. Kann nicht künstlich aufgerufen werden.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/drag drag]</code> -> Element gezogen -> Teil von [https://wiki.selfhtml.org/wiki/JavaScript/Drag_%26_Drop Drag'n'Drop]. Es gibt hier mehrere Elemente, die man beim Ziehen und Loslassen beachten sollte, damit dies korrekt ausgeführt wird. Daher beim Einsatz den verlinken Artikel lesen.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/drop drop]</code> -> Element abgelegt -> Siehe die Anmerkung oben zu <code>drag</code>
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/error error]</code> -> Element nicht richtig geladen o. Skript läuft fehlerhaft -> Es wird im Fehlerfall ausgelöst und eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/focus focus]</code> -> Beim Aktivieren des Elements. Normalerweise für Links, Labels oder Listen verwendet. Es kann verfeinert werden mit <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/focusin focusin]</code> (wenn ein Element angeklickt wird) und <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/focusout focusout]</code> (wenn ein Element verlassen wird).
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/input input]</code> -> Wenn sich der Wert des überwachten Elements ändert (Eingabe, Schieberegler) -> Wird nicht aufgerufen, wenn man etwas per Skript ändert.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/invalid invalid]</code> -> Da der Browser schon eine Validierung bei Eingabefeldern durchführt, wenn man den type des Feldes setzt und die Werte schlussendlich noch auf dem Server validiert werden müssen, ist dieses Event normalerweise überflüssig.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/keydown keydown]</code> -> Wird ähnlich wie die Mausevents bei Eingabefeldern verwendet und ausgelöst, sobald man eine Taste drückt. Es gibt noch die verwandten Elemente <code>keypress</code> (bei gedrückt gehaltener Taste) und <code>keyup</code> (bei losgelassener Taste).
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/load load]</code> -> Feuert, wenn Elemente vollständig geladen wurden. Stattdessen sollte <code>DOMContentLoaded</code> eingesetzt werden.
+* Mausevents wie <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/mousedown mousedown]</code> (bei gedrückter Maustaste) und Pointerevents wie <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/pointerdown pointerdown]</code> werden im unten verlinkten Abschnitt zu Zeigegeräten behandelt.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/reset reset]</code> -> Wird beim Zurücksetzen des Formulars ausgelöst. Kann verwendet werden, um eine Warnung auszugeben, bevor dieses gelöscht wird.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/resize resize]</code> -> Kann eingesetzt werden, um das Aussehen der Fenstergrösse anzupassen. Normalerweise sollte man dies aber über [https://wiki.selfhtml.org/wiki/CSS/@-Regeln#.40media_-_Medienspezifische_Abschnitte CSS @media] lösen.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/select select]</code> -> Wenn der Benutzer Text in einem Formular selektiert hat.
+* <code>[https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/submit submit]</code> -> Wie beim Zurücksetzen des Formulars kann man hier vor dem Absenden eine Validierung durchführen.
+== Umgang mit Maus und Touchpads / Touchscreens / Pointergeräten usw. ==
+Im Artikel [https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Mouse_and_More Mouse and More] wird gezeigt, wie man solche Ereignisse gesamthaft verarbeiten kann, ohne ein Gerät aussen vor zu lassen.
+== Wichtige allgemeine Eigenschaften ==
+Folgende Eigenschaften werden von mehreren Objekten zur Verfügung gestellt und verwendet:
+=== length ===
+Enthält die Länge einer Variable oder die Anzahl Elemente eines Arrays.
+a = window.document.length; // Anzahl Zeichen einer Webseite
+=== value ===
+Wert, welcher in ein Objekt geschrieben wird.
+document.Formularname.Feldname.value = String;
+== Fehlerbehandlung (try-catch-finally) ==
+<pre>
+try {
+   // Anweisungsblock, welcher Fehler machen könnte
+}
+catch(error) {
+   // Ausführung, wenn der Fehler auftrat
+}
+finally {
+   // Immer ausführen, egal ob Fehler oder nicht
+}
+</pre>
+Die Anweisung im try kann beliebig sein (Stream öffnen, testen der Benutzereingabe usw.). Tritt ein Fehler auf, welcher einen Programmfehler mit Abbruch generieren würde, so wird er an den catch-Block weiter geleitet. Dort kann man dann eine Ausgabe machen, was schief lief. Über finally kann man dann wieder bei Bedarf einen neuen Versuch anbieten oder über eine Variable entsprechend handeln.
+== Webseiten mit freien Javascripts ==
+* [http://www.javapool.de/ Javapool]
 * [http://www.bodo.com/JavaScripts/index.html Bodo]

JavaScript: Unterschied zwischen den Versionen

Aktuelle Version vom 5. Februar 2023, 22:42 Uhr

Einführung

Programmcode mit HTML

HTML mit JS

HTML mit ausgelagertem JS

Laden von Javascript in HTML

Sprachelemete

Kommentare

Schlüsselwörter

Bedingungen

Schleifen

Definitionen

sonstige reservierte Wörter

Für die Zukunft reservierte Wörte

Vergleichsoperatoren

Eventhandler

Objektbaum

Zugriff auf Knoten

window

Eigenschaften

document

form (Formular auswerten)

select (Auswahlliste in Formular auswerten)

elements (Formular auswerten)

images (Bilder)

Location

History

navigator und screen

Math, Date und String

Funktionen

Parameterübergabe

Standardfunktionen

Nützliche Funktionen

Eingabe auf erlaubte Zeichen prüfen

Unterschied Funktion und Funktionsausdruck und namenlose Funktion

Callback mit der Lambda-Funktion (Pfeil)

Events des DOMs

Umgang mit Maus und Touchpads / Touchscreens / Pointergeräten usw.

Wichtige allgemeine Eigenschaften

length

value

Fehlerbehandlung (try-catch-finally)

Webseiten mit freien Javascripts

Navigationsmenü

Suche