JavaScript-CheatSheet

Ein Spickzettel mit den wichtigsten JavaScript-Funktionen, -Befehlen und -Kontrollstrukturen

Befehl Zweck/Funktion/Parameter
addEventListener(Eventtyp, Funktionsname)
  • Zweck: Mit dieser Funktion fügt man einem per JavaScript selektieren Element einen sogenannten "EventListener" hinzu: Der EventListener "horcht" auf das Auftreten eines bestimmten Ereignisses ("Event") am selektierten Element. Zu diesen Ereignissen gehören z.B. Mausklick oder Tap auf Touchscreens, Doppelklick, Mouseover, resize (Skalierung des Browserfensters), Änderungen in einem Formularfeld etc.
    Wird der Event registriert, so wird die angegebene Funktion ausgeführt. Dadurch lassen sich unterschiedlichste Interaktionen des Nutzers mit HTML-Elementen abfragen und Reaktionen darauf per JavaScript umsetzen.
  • Parameter: Typ des Events ("click", "mouseover" ...), Name der auszuführenden Funktion
  • Beispiel:
    document.getElementById("klickbtn").addEventListener("click", machwas);
    //Bei Klick auf das HTML-Element mit der ID "klickbtn" wird die Funktion "machwas" ausgeführt
alert("text");
  • Zweck: Ausgabe eines Warnfensters
  • Parameter: Übergabe eines Textes oder einer Variable
function name(Parameter) {
//Befehle ausführen
}
  • Zweck: Kapselung von Funktionalitäten, um sie von unterschiedlichen Stellen des Programms aus aufzurufen (verhindert Wiederholungen von gleichartigen Befehlen)
  • Anwendung: Eine Funktion wird definiert, indem man einen selbst gewählten Namen vergibt. In runden Klammern können Werte (Parameter) an die Funktion übergeben werden, die innerhalb der Funktion z.B. für Berechnungen zu Verfügung stehen (werden keine Parameter übergeben, bleibt die Klammer einfach leer, gibt es mehrere werden sie mit Komma getrennt).
    Eine Funktion wird aufgerufen, indem im Programm deren Name gefolgt von runden Klammern mit optionalen Parametern verwendet wird: z.B. "summe(10,30);"
    Eine Funktion, der Parameter übergeben werden, gibt oft einen sogenannten "Rückgabewert" zurück, der an die Stelle des Funktionsaufruf zurückgegeben wird. Dieser Rückgabewert mit dem Befehl "return" gesendet.
  • Beispiel (nicht sinnvoll aber anschaulich):
    //Definition der Funktion "summe"
    function summe(a, b) {
    return a+b;
    }
    //Aufruf der Funktion "summe" inkl. Übergabe der Parameter und Speichern der Rückgabe in einer Variablen
    var ergebnis=summe(30, 50);
getElementById("Idname")
  • Zweck: Selektiert ein Element aus der HTML-Struktur, um dann weitere JavaScript-Funktionen darauf anzuwenden. Verpflichtend muss per Punktsyntax noch "document." vorangestellt werden. Die Selektion alleine bewirkt noch nichts (ähnlich wie in CSS), erst die die zusätzlich nötigen Schritte erzeugen z.B. eine Veränderung auf der Website!
  • Beispiel:
    document.getElementById("uhrzeit");
    (JavaScript durchsucht den Seitenbaum nach einem Element - z.B. eine div-Container - mit der ID "urhzeit" (id="uhrzeit"). Findet sich dieses Element, so wird es selektiert - sonst passiert nichts).
if-Anweisung:
if(Bedingung) {
//tue das eine
} else {
//tue was anderes
}
  • Zweck: Verzweigungen im Programm in Abhängigkeit von logischen Bedingungen
  • Beispiel:
    if (vorname=="Max") {
    alert("Hallo Max");
    } else if (vorname=="Maria") {
    alert("Hallo Maria");
    } else {
    alert("Hallo");
    }
innerHTML (Eigenschaft)
  • Zweck: Mit dieser Eigenschaft lässt sich der Inhalt (Text oder HTML) eines per JavaScript selektieren Elementes entweder abfragen oder setzen/ersetzen.
  • Beispiele:
    1 Inhalt abfragen
    var meintext=document. getElementById("textfeld"). innerHTML;
    2 Inhalt setzen oder ersetzen
    document. getElementById("textfeld"). innerHTML="Hallo";
Math-Objekte:
Math.PI, Math.round(), Math.random()
  • Zweck: Die Math-Objekte stellen "Helferlein" für mathematische Berechnungen und den Umgang mit numerischen Variablen bereit. Aufgerufen werden sie mit dem Schlüssel wort "Math", gefolgt von einem Punkt und der jeweiligen Funktion
  • Beispiele:
    Kreiszahl
    var kreiszahl=Math.PI; //Kreiszahl Pi in Variable speichern
    Wert runden
    var preis=Math.round(1.6676767); //rundet die Kommazahl auf eine Ganzzahl (hier: 2)
    var preis=Math.floor(1.6676767); //rundet die Kommazahl auf eine Ganzzahl AB (hier: 1)
    Zufallszahlen erzeugen
    var zufallszahl=Math.random(); //erzeugt eine Zufallszahl zwischen 0 (inklusive) und 1 (exklusive)
    var zufallszahl=Math.random()*10; //erzeugt eine Zufallszahl zwischen 0 und <10
Operatoren: + - / * % ++ -- && || Arithmetische Operatoren:

  • Addition: +
  • Subtraktion: -
  • Division: /
  • Multiplikation: *
  • Modulus: %
  • Inkrementieren (Wert erhöhen): ++
  • Dekrementieren (Wert erniedrigen): --

Vergleichsoperatoren:

  • ist gleich: ==
  • ist ungleich: !=
  • ist größer: >
  • ist größer oder gleich: >=
  • ist kleiner: <
  • ist kleiner oder gleich: <=

Verknüpfungsoperatoren:

  • und zugleich: &&
  • oder: ||

Beispiel für den Einsatz von Vergleichs- und Verknüpfungsoperatoren in einer if-Anweisung:
if(vorname=="Susi" || vorname=="Paul") {
alert("ja");
}
("Wenn der Inhalt der Variable "vorname" gleich "Susi" oder "Paul" ist, dann öffne ein Warnfenster mit dem Text "ja")
parseFloat(variable);
  • Zweck: Manchmal klappt es nicht mit der automatischen Umwandlung einer per prompt() eingegebenen Zahl in eine numerische Variable, z.B. wenn die eingegebenen Werte danach mit dem Operator "+" verknüpft werden. Die Funktion parseFloat() wandelt einen eingegebenen Text gezielt in eine Ganz- oder Kommazahl um. Wurde dagegen keine gültige Zahl eingegeben, dann gibt die Funktion "NaN" (Not a Number) zurück.
  • Beispiel:
    var zahl1=prompt("Zahl 1 eingeben!");
    var zahl2=prompt("Zahl 2 eingeben!");
    var summe1=zahl1+zahl2;
    alert(summe1);
    var summe2=parseFloat(zahl1)+parseFloat(zahl2);
    alert(summe2);
    /* Wenn der Nutzer in das Warnfenster die Werte 2 und 3 eingibt, wird danach im ersten Warnfenster "23" ausgegeben und im zweiten "5". Testen Sie das Programm selbst! */
prompt("eingeben");
  • Zweck: Nutzereingabe in einem Warnfenster
  • Parameter: Anzeige eines übergebenen Textes
  • Ergebnis der Nutzereingabe sollte in einer Variable gespeichert werden
  • Beispiel:
    var eingabe = prompt("eingeben");
setAttribute(Eigenschaft, Wert)
  • Zweck: Mit dieser Funktion kann man einem per JavaScript selektieren Element eine zusätzliche Eigenschaft hinzufügen, z.B. eine Klasse oder einen Inline Style. Außerdem kann eine derartige Eigenschaft dadurch verändert oder aktualisiert werden.
  • Parmeter: Eigenschaft (z.B. Klasse oder Style) und Wert für diese Eigenschaft
  • Beispiele:
    1 Eine Klasse hinzufügen
    document.getElementById("idname").setAttribute("class", "klassenname");
    2 Einen Inline Style hinzufügen
    document.getElementById("idname").setAttribute("style", "color:red");
setInterval(Funktionsname, Intervalldauer)
  • Zweck: Fortlaufende Wiederholung eines Funktionsaufrufes in einem vorgegebene Intervall
  • Parameter: Name der Aufzurufenden Funktion, Intervall (in Millisekunden)
  • Beispiel:
    setInterval(holeuhrzeit, 1000);
    (Die Funktion "holeuhrzeit" wird dadurch jede Sekunde aufgerufen)
var textvariable="Hallo";
var zahl=42;
  • Deklaration (Erstellung) einer JavaScript-Variablen mit dem angegebenen Bezeichner (Variablennamen)
  • Es kann sogleich eine Initialisierung erfolgen, indem der Variable ein Wert zugewiesen wird
  • Variablennamen sollten mit einem Buchstaben beginnen, können auch Zahlen enthalten und sollten keine Umlaute enthalten
while-Schleife:
while(Bedingung) {
//wiederhole das hier
}
  • Zweck: Wiederholung eines Codeblocks, solange eine Bedingung zutrifft
  • Beispiel:
    var i=0;
    while (i<10) {
    alert("Die Zahl ist " + i);
    i++;
    }