- Script Bereich
- <script type="text/javascript">
</script>
- JavaScript Dateien
- <script src="datei.js" type="text/javascript"></script>
- Kommentare
- // einzeilig
/* mehrzeilig */
- Variablen
- var a; // Deklaration
var b = 7; // Zuweisung
// Konventionen: z.B. hausMitHund oder btnOK
- Variablen Werte
- var x = true; // false
var x = null; // kein Wert
var x = undefinde; // nicht definiert
var x = NaN; // Rückgabewert not a number; wenn mayer*meier; prüfbar mit isnan (x)
- Scope
-
var b = 6; // global - überall lesbar
c = 7; // global
function abc () {
var d = 4; // lokal
e = 2; } // global
- Variablentyp
- var a = 33;
var typ = typeof a; // typ ist hier number; weitere: boolean, string, function, object,
undefined
- Umwandlung in String
- var x = 15.5;
var y = x.toString(); // Methode: wandelt in String um
- Anführungzeichen
- var c = ' Anführungszeichen "x" ';
var c = " Anführungszeichen \"x\" ";
var c = "\t Tabulator \n Umbruch";
- Verkettung
- var c = "Text" + c;
- Kurzformen
- i = i + 1;
i += 1;
i++;
- Bildschirmausgabe
- alert ("Hallo");
console.log(this);
- Code ausführen
- eval ('alert(22);'); Die eval Funktion führt JavaScript-Code aus,
- with
- with (document) // spart Schreibarebeit, dadurch kann man oberen Ojektteil in unteren
weglassen
{
getElementsByTagName("button")[0].onclick = function(){ }
getElementsByTagName("button")[1].onclick = function(){ }
}
- Json
- var auto = { "name": "VW", alter: 18 };
auto.name; // VW
- Json
-
var auto = {
raeder:4,
tueren:5,
besitzer: { vorname: "Obi"; nachname: "Toll" },
extras: [ "Klima", "Xenon", "Automat" ]
};
auto.besitzer.vorname; // Obi
auto.extras[1]; // Xenon
- Wenn-Dann-Bedingungen
- if (a == b && c == d) {} // logisch und Vergleichsoperatoren
else if (a != b || c != d) {} // logisch oder
else if !(a >= b) {} // logisch nicht
else if (a === b) {} // Wert und Typ gleich
else {}
- Entwederoder
- var b = (a == 42) ? "bei true" : "bei false"; // Ternärer Operator
- while Schleife
- while (i > 9) { i++; }
do { i++; } // wird auf jedenfall einmal ausgeführt
while (i>9)
- for Schleife
- for (var i = 1; i <= 10; i++) { } // Initialisierung; Bedingung; Aktion
- Fallunterscheidung
- switch (a)
{
case 1:
break;
case 2:
break;
default: break;
}
- Kontrolle innerhalb von Schleifen
- break; // beendet Schleife
continue; // beendet aktuellen Durchlauf einer Schleife
- Funktion definieren
- function pruefen(a,b) // Variablen sind nur innerhalb der Funktion gültig
{
return false; // beendet Funktion
}
- Funktion aufrufen
- <a href="javascript: pruefen(2,3)">
- Funktion mit beliebig vielen Argumenten
-
function pruefen()
{
alert (arguments[0] + arguments[1]); // ersten beiden übergebenden Argumente
}
- Annonyme Funktion
-
var an = function() { alert ('annonym')};
an();
- Annonyme Funktionen
-
setTimeout(function() { alert('hello'); }, 1000);
document.getElementById("id_2").onclick = function () { pruefen(2,3); }
- Verschachtelte Funktionen
- function aussen()
{
var a = 21;
function innen() { alert (a); } // Innere Funktionen kann auf äußere Variablen zugreifen, umgekehrt nicht
innen();
}
- Array erstellen
-
var obst = ["Banane", "Orange", "Apfel", "Mango"];
alert (obst[0]); // Banane
obst[4] = "Trauben"; // Wert wird hinzugefügt
- Array erweitern
-
obst[obst.length] = "Zitronen" // neues Element drangehängt
besser
- Array-Element löschen
-
obst.pop(); // letzter Wert löschen
obst.shift(); // erster Wert löschen
- Anzahl Elemente
-
obst.length; // hier 4
- Arrayposition
- obst.indexOf("Apfel") // Position von Apfel, hier 2
- Array sortieren
- obst.sort(); // Apfel, Banane, Mango, Oragne
- Elementreihenfolge umkehren
- obst.reverse(); // Orange, Mango, Banane, Apel
- Arrays verketten
- arrayname1.concat(arrayname2);
- Teilarray extrahieren
- obst.slice (1, 3); // Anfangswert, Endwert: Orange, Apfel
- Array durchlaufen
-
for (index = 0; index < obst.length; index++)
{
text += obst[index] + "<br>";
}
- Zeichenkette in Array umwandeln
- var obst_string = "Kiwi, Kirschen";
var obst = obst_string.split(","); // Zeichenkette nach Kommas getrennt
- Array in Zeichenkette umwandeln
-
var obst_string = obst.join(","); // Parameter ist Trennzeichen
- Array in Zeichenkette umwandeln
-
alert (obst.toString());
- Länge Zeichenkette
- var wort = "Mango";
wort.length; // 5
- Position einer Zeichenkette
-
wort.indexOf("ng"); // 2 (nicht gefunden -1
- Zeichenkette ausschneiden
-
wort.substr(2,3); // ngo - Anfangposition, Länge
- Groß oder Kleinbuchstaben
-
wort.toUpperCase(); // MANGO
wort.toLowerCase(); // mango
- Zeichenkette suchen, mit Wertrückgabe
-
var str="Welt und Zelt!";
str.match(/.elt/); // Welt - beliebiges Zeichen
str.match(/welt/); // null
str.match(/welt/i); // Welt - i ignoriert Groß- und KLeinschreibung
str.match(/.elt/g); // Welt,Zelt - global, findet alle Treffer, ohne g nur Weld
var tri= str.match(/^We/); // We - muß am Anfgan sein
var tri= str.match(/Zelt|Meer/); // Zelt -Meer wäre auch gefunden worden - oder
var tri= str.match(/[Zz]elt/); // Rückgabe Zelt: mehrere Zeichen zur
Auswahl
viele weiter: selfhtml
- Zeichenkette ersetzen
-
wort.replace(/^.ango/, "Apfel"); // Apfel
- Zeichenkette suchen, mit Positionsrückgabe
-
str.search(/Welt/i)); // suchen mit regulärem Ausdruck, hier Position 0
- An Zeichenkette dranhängen
-
var str2 = " und Apfel";
var n = str.concat(str2); // Mango und Apfel
- Runden
- Math.ceil (7.1); // 8 aufrunden - Achtung Groß schreiben
Math.floor (7.7); // 7 abrunden
Math.round (7.4); // 7
- Absoluter Wert
- Math.abs (-7); // 7
- Max - Min
-
Math.max (3,5); // 5 größere zweier Zahlen
Math.min (3,5); // 3 kleinere zweier Zahlen
- Zufallszahl
- Math.random (); // zwischen 0 und 1, z.B. 0.3834417857195922
Math.round(Math.random ()*100)); // 1 bis 100
- Monatstag
- var jetzt = new Date();
var tag = jetzt.getDate(); // Monatstag
var monat = jetzt.getMonth() + 1; // Jahresmonat, liefert 0 bis 11, deshalb + 1
var jahr = jetzt.getFullYear(); // Jahr
var sekunden = jetzt.getSeconds();
var min = jetzt.getMinutes(); // Minuten
var std = jetzt.getHours(); // Tagesstunde
var timestamp = jetzt.getTime(); // Sekunden seit 1970
- Timestamp erzeugen
-
var d = new Date(1975, 10 , 1, 22, 12, 45, 59); // Millisekunden seit 1970
- Objekt erzeugen und Eigenschaften zuweisen
-
var obst = new Object(); // Obst Objekt
obst.name = "Banane";
obst.eigenschaft = new Object(); // Unterobjekt
obst.eigenschaft.gewicht = 33;
obst["preis"] = 2;
console.log (obst.eigenschaft.gewicht); // 33
console.log (obst.eigenschaft['gewicht']); // 33 - Variablen möglich
- Literal schreibweise
-
var obst = {name:"Banane", eigenschaft: { gewicht: 33}, preis: 2};
- Literale Schreibweise mit Funktionsaufruf
-
function qualitaet(x) { return 'toll'; }
var obst = { name: "Banane", quali: qualitaet(2) }; // obst.quali ist toll
- Objekt erzeugen mit Konstruktorfunktion
- var Obst = function (farbe) // Konstruktormethode zum erstellen eines Objekts
{
this.farbe = farbe;
}
var banane = new Obst ('gelb'); // Banane Objekt mit einer Eigenschaft wird erstellt
- Objekt durchlaufen
-
var x,text;
for (x in obst) { console.log (x + ' ' + obst[x]); } // name Banane ...
- Mehode
-
var obst = new Object();
obst.gewicht = 100;
obst.rechnen = function (kisten) { x=kisten*this.gewicht; return (x); }
console.log (obst.rechnen(4) ); // 8
- Mehode
-
function tuwas () {console.log (this.farbe + 'ist toll') }
var Obst = function (farbe) // Konstruktormethode mit Mehode
{
this.farbe = farbe;
this.tuwas = tuwas;
}
var banane = new Obst ('gelb');
banane.tuwas(); // gelb ist toll
- Objekt löschen
- delete obst;
- Javascript Eventhandler
-
function init() {
document.getElementsByTagName("img")[0].onclick = function () { rechnen(3); } // Parameterübergabe mit Hilfe
annonymer Funktion
}
window.onload=init; // Webseite muss erst geladen sein
- beim Anklicken
- <button onclick='rechnen(3)'>Klick</button>
- beim Anklicken
- var x = document.getElementsByTagName("img")[0];
x.onclick = function () {} // Klick
- bei Dopelklick
- x.ondblclick function () {} // Doppelklick
- drücken der Maustaste
- x.onmousedown function () {} // Maus drücken
- loslassen der Maustaste
- x.onmouseup function () {} // Maus loslassen
- überfahren von Elementen
- x.onmouseover function () {} // drüberfahren
- verlassen von Elementen
- x.onmouseout function () {} // Element verlassen
- Maus bewegen
- x.onmousemove function () {} // beim bewegen der Maus
- Taste gedrückt
- <input type="text" onkeydown="rechnen()">
- Taste gedrückt
- <input type="text" onkeypress="rechnen()">
- Taste losgelassen
- <input type="text" onkeyup="rechnen()">
- fertig geladen
- <body onload="rechnen()"> wenn Datei fertig geladen ist
- beim Verlassen
- <body onunload="rechnen()"> beim verlassen einer Datei
- Absenden Formular
- <form onsubmit="rechnen()">
- Zurücksetzen Formular
- <form onreset="rechnen()">
- beim Aktivieren
- <input type="text" onfocus="rechnen()">
- Selektieren von Text
- <input type="text" onselect="rechnen()">
- bei Änderungen
- <input type="text" onchange="rechnen()">
- beim Verlassen
- <input type="text" onblur="rechnen()">
- Confirm
- var r = confirm ("Ist das eine Frage?");
if (r == true) { console.log('ok'); }
else { console.log('nicht ok'); }
- Prompt
- var eingabe = prompt("Eingabe:", ""); // Varibale eingabe enthält
eingegebenden Wert, bei abrechen bleibt die Variable leer.
- Fenster Höhe Breite
-
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // IE Browserfixes
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // ohne Tool- Scrollbars
- Window open
-
var myfenster = window.open ("", "Title", "width=200, height=100");
myfenster.document.write("Hallo"); // Fenster ansteuern
myfenster.close();
- Window open
-
window.open("http://www.eyoo.de", "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
- Bildschirmgröße
-
console.log (screen.width); // 1680
console.log (screen.height); // 1050
- Aktuelle url
-
console.log (location.href); // http://www.eyoo.de/test.php
console.log (location.host); // www.eyoo.de
- Weiterleitung
-
window.location.href = "http://www.eyoo.de"; // Neue interne oder externe Seite laden
- Seite neu laden
- window.location.reload(); // Effekt wie Reload im Browser
- In der History springen
- history.back();
history.forward();
history.go(-3); // 3 Seiten zurück
- Eigenschaften des Browsers
- var an = navigator.appName; // Name des Browsers, z.B. Netscape
navigator.userAgent // Eigentliche Idetifikationsstring: z.B. Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0
navigator.language // Navigator Sprache
- Drucken
- window.print(); // Aktuelle Seite an Drucker schicken
- Anweisung nach Verzögerungszeit
-
var aktiv = setTimeout (function() { rechnen(3); }, 3000); // 3 Sekunden Verzögerung
clearTimeout(aktiv); // bricht Timeout ab
- Intervallwiederholung
- var aktiv = window.setInterval (function() { rechnen(3); }, 3000); // alle 3 Sekunden
window.clearInterval (aktiv); // beendet Intervall
- Cookie
-
document.cookie="cookie1=Gero; expires=Thu, 18 Dec 2015 12:00:00 UTC"; Cookie schreiben
var x = document.cookie; Cookie lesen: enthält string mit allen Cookies: cookie1=Gero; cookie2=22;
document.cookie="cookie1=Gero; expires=Thu, 01 Jan 1970 12:00:00 UTC"; Cookie löschen
- DOM erst laden
-
fuction init() { }
window.onload = init;
- Zugriff per Id
-
document.getElementById("absatz").innerHTML = "Willkommen";>
- Zugriff per Tag
- document.getElementsByTagName("p")[0].innerHTML = "Hallo"; // erstes p Element
- Zugriff per Name
- document.getElementsByName("Name")[0].checked = true;
- Attribut setzen
-
document.getElementById("id").setAttribute("class", "gruen"); // Klasse
- Attribute lesen
- document.getElementById("id").getAttribute('class'); // Attribut auslesen
- Element erzeugen
- var a = document.createElement("a"); // <a> Element wird erzeugt
a.setAttribute("href", "http://www.ripley.de/"); // Attribut wird hinzugefügt
var a_text = document.createTextNode("HSV Link"); // Textknoten wird erzeugt
a.appendChild(a_text); // <a>text</a> zu a wird a_text angehängt
body.appendChild(a); // im Body wirds eingehängt
- Auf Inhalt prüfen
- document.getElementById("id").hasChildNodes(); // true oder false
- CSS
- var absatz = document.getElementById("Absatz");
absatz.style.color = "orange"; // über Style Zugriff auf css Eigenschaften
absatz.style.backgroundColor = "black"; // Bidestrick wird entfällt, nächster Buchstabe groß
absatz.style.border= "solid red 10px";
absatz.className = "klasse"; // Klasse zuweisen
absatz.id = "andere_id"; // ID ändern
// weitere styles: backgroundImage, font, fontSize, height, textAlign, width, verticalAlign, cursor, fontWeight
- Formular
-
var textfeld = document.forms[0].elements["Name"].value; // vom ersten Formular, das Feld mit name="Name"
var textfeld = document.getElementById("id").value = "Hallo"; // Zugriff über id
Impressum: Gero Zickermann, Haasestr. 3, 10245 Berlin