Deutsch English
Dein Feedback:
Hat die Seite Deine Erwartung erfüllt? vote3 Ja
vote2 Teilweise
vote1 Nein
Noch ein Kommentar?

Nur falls, Du eine Antwort erwartest, Deine E-Mailadresse

Gegebenenfalls noch Dein Name

Do not change this:
Feedback
Suchen

JavaScript

Einige Notizen und kleine Beispiele zu JavaScript. Wenn man auch der Suche nach einer richtigen Einführung ist, siehe aufgelistet Links und Quellen, besonders das Buch von Stefan Koch "JavaScript: Einführung, Programmierung und Referenz inklusive Ajax".
04-03-2010 20.40

Versionsgeschichte

Java Script Versionsgeschichte Mittlerweile sind große Teile sind JavaScript über den ECMAScript Standard standadisiert.

BrowserJavaScript Version
Firefox 1.5JavaScript 1.6
Firefox 1.8JavaScript 1.8
InternetExplorer 6.0Jscript 5.6
InternetExplorer 7.0Jscript 5.7
InternetExplorer 8.0Jscript 6.0
ChromeJavaScript 1.6
09-04-2015 21.12

Allgemeines

Strict mode

Der Strict mode erzwingt besseren Code, z.B. kann man keine Variablen benutzen, die nicht deklariert wurden.
"use strict";
// var x;
x=42; // error!

Guter JavaScript Code

JavaScript conventions

JavaScript conventions
  • 4 Leerzeichen zum Einrücken
  • einfache Statements mit einem ; abschließen
  • komplexe Statements nicht mit einem ; abschließen
  • Klammern in der selben Zeile schon öffnen
  • Variablen und Funktionen in camelCase schreiben
  • Globale Variablen und Konstanten GROß schreiben
  • Namen nicht mit $ anfangen, werden oft in JavaScript Libraries benutzt

JavaScript Empfehlungen

JavaScript best practice
  • strict benutzen
  • Lokale Variablen mit var deklarieren
  • Variablen initialisieren
  • Deklarationen an den Anfang der Datei / Funktion
  • Für Zahlen / Strings / Boolean kein new verwenden
  • Statt === das == benutzen (schneller)
  • In Funktionen überprüfen ob argumente undefined sind und falls ja einen Default Wert anbieten
  • Jedes switch mit einem Default versehen

Typische JavaScript Fehler

JavaScript mistakes
  • Fälschlicherweise = statt == (oder ===) in Vergleichen nutzen
    if(x=10)
    das ist 10 und 10 ist immer wahr
  • switch nutzt intern === und nicht ==
  • nicht "," nach dem letzten Eintrag in einem Array oder einer Objekt Definition x=[1,2,3,]
  • so nach undefined / null testen
    if (typeof myObj !== "undefined" ¨¨ myObj !== null)
  • Wenn man einen Code Block verlässt bleiben die Variablen gefüllt!

JavaScript Performance

JavaScript performance
  • nicht "with" benutzen
  • Statements in Schleifenheadern vermeiden weil sie ständig neu berechnet werden
    for (i = 0; i < myArray.length; i++) {
    statt dessen
    le = myArray.length;
    for (i = 0; i < le; i++) {
  • unnötige Variablen vermeiden
    a="a";
    b="b";
    x=a+b;
    statt dessen
    x="a"+"b";

JavaScript Reservierte Wörter

JavaScript Reserved Words

Datentypen

var u;                                // undefined
var x = null;
var n = 42; // Number
var d=34.00; // Number
var e=123e4; // Number
var s = "John Doe"; // String
var a = ["John", "Doe", "Jane"]; // Array
var o = {id:42, name:"John", age:55}; // Object
var i = 2 / 0; // Infinity
var nan= 100 / "Foo"; // Not a number
isNan(nan + 7);

typeof s; // string

Datentypen in JavaScript sind dynamisch
var x=42;
x=x+5;
x=x+"John"
x=2+3+"John"+7+3; // "5John73"

Number.MAX_VALUE;
Number.MIN_VALUE;
Number.NEGATIVE_INFINITY;
Number.POSITIVE_INFINITY;
Number.NaN;

Math

JavaScript Math

Date

Date
new Date(year, month, day, hours, minutes, seconds, milliseconds)

Erzeuge den 12.2.2010 als Datumsobjekt. Achtung, der Monat beginnt bei 0, nicht bei 1!
var d=new Date(2010, 1, 12);
Nicht
Date.getYear()
nutzen (das liefert ja nach Browser mal ein zwei oder ein vierstelliges Datum) sondern
Date.getFullYear();
(immer vierstellig).

Operators

var k="abc";
var j=new String("abc"); // avoid this
var z=new String("abc"); // avoid this

(k==j) // true, same value
(k===j) // false, different type (string vs object)
(j==z) // false, objects cannot be compared

Boolean(1 >2) // True
(1>2) // True
("2"<"12") // false, String comparison, 2 comes after 1 in alphabet

¨¨ // and
|| // or

Strings

Strings haben einige Methoden und Eigenschaften
var s="abc";
s.charAt(1);
s.length
s.substr(start, end)
s.substring(start, length)
s.search("bc");

If

if (condition1) {
...

} else if (condition2) {
...

} else {
...
}

Switch

switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day= "Unexpected";
}

Switch compares interally with === not with == so 10 and "10" do NOT match!

For

for (i = 0; i < x.length; i++) {
x[i];
}

For in
var person = {fname:"John", lname:"Doe", age:42};
var x;
for (x in person) {
...
}

While

while (i < 42) {
i++;
}

Do While
i=0;
do {
i++;
} while (i < 42);

Es gibt noch break und continue, man kann auch Label und benutzen.

Throw, try and Catch

JavaScript Errors - Throw and Try to Catch
try {
...
}
catch(err) {
...
}
finally {
...
}

10-04-2015 00.22

JavaScript einbinden


So kann man JavaScript so einbinden, dass es sowohl in Browsern funktioniert die es unterstützen, als auch in solchen die es nicht unterstützen:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>JavaScript Demo</title>
</head>
<body>

<div>
HTML.<br />

<script type="text/javascript">
<!--
alert("JavaScript 4*3="+(4*3));
// -->
</script>
<noscript>
No Script
</noscript>

</body>
</html>

Sauberer ist es aber, eine eigene Datei mit dem JavaScript Code zu importieren

FIXME, angeblich ist das darüber kein valides XHTML?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>JavaScript Demo</title>
</head>
<body>

<script type="text/javascript" src="myJavaScriptFile.js" />
<noscript>
JavaScript is not supported in your browser.
</noscript>

</body>
</html>
04-03-2010 20.40

Funktionen

Parameter in Funktionen sind Call by Value für Basistypen und Call by Reference für Objekte. Benötigt man Call by Reference muss man die Basistypen in Objekte packen. Es ist möglich, Funktionen mit einer dynamischen Anzahl an Parametern zu haben:
    function myConcat()
{
var result="";
for (var i=0; i<myConcat.arguments.length; i++)
{
result+=myConcat.arguments[i];
}
return result;
}

// ab
alert(myConcat('a', 'b'));

// Hallo Welt
alert(myConcat('Hallo', ' ', 'Welt'));


Scope

var a=1;  // global, can be read within f

function f() {
var b=2; // local, only within f
c=3; // c has never been declared, is automtically GLOBAL!
}

Bei globalen Variablen ist var optional. Innerhalb von Funktion muss var benutzt werden, sonst wird die Variable global. Nutzt man in einer Funktion let statt var, wird eine mögliche globale Variable gleichen Namens nicht überschrieben.

String nach int

Beim Umwandeln von String nach Int sollte immer das Zahlensysten angegeben werden:
var i=parseInt("09", 10);

Array

JavaScript Arrays
Join, sort, und zur Demonstration ein eigener Comperator
function myReverseComperator(a, b)
{
if(a>b) return -1;
if(a<b) return +1;
return 0;
}

var myArray = new Array();
myArray[0] = "Foo";
myArray[1] = "Bar";
myArray[2] = "Dog";
myArray[myArray.length] = "Cat";

myArray.sort();
// Bar - Cat - Dog - Foo
alert(myArray.join(" - "));

//myArray.reverse();
myArray.sort(myReverseComperator);
// Foo; Dog; Cat; Bar
alert(myArray.join("; "));

Associative Arrays do not really exist in JavaScript, they are objects, which might surprise you
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";

person.length; // 0 no array
09-04-2015 22.52

Objekte


Objekte

var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"brown"
};

Zugriff auf Objekte Attribute
person.age;
person["age"];

Methoden in Objekten
o.myMethod(); // calls the method
o.myMethod; // get the method definition

Objekt erzeugen mitter Getter und Setter
// note the , at the end of each line
var john = {
name: "Doe",
firstName: "John",
get fullName() {
return this.firstName+" "+this.name;
},
set fullName(fullName) {
name=fullName; firstName="";
return this;
}
}

Wenn man das Attribut benutzt wird statt dessen der Getter benutzt
john.fullName; // John Doe via Getter

Klassen durch Prototyping

Eine Klasse definieren (Prototype). Zuerst eine Funktion definieren, das wird der Konstruktor der Klasse. Die Funktion kann andere Funktionen enthalten (das werden die Klassen Methoden) oder Variablen (das werden die Klassen Attribute).
//Class via Constructor
function TransportVehicle(pName) {

this.name =pName; // public member
var _me; // private member

// manual getter / setter for public member
this.getName = function() {
console.log("getter Name called");
return this.name;
}

this.setName=function(pName) {
console.log("setter Name called with value " + pName);
this.name=pName;
return this;
}

// method defined within the constructor
this.foo = function() {
return "Foo";
}
};

So kann man ein Objekt davon erzeugen
var tv = new TransportVehicle("abc");

Bevor man das macht, vielleicht lieber noch die Getter und Setter so definieren. So umgeht man nicht versehentlich die Getter und Setter
// add implicit getters and setter via the prototype
TransportVehicle.prototype = {
get price() { console.log("getter Price called"); return this._price; },
set price(price) { console.log("setter Price called with value " + price); this._price=price; return this;}
}

// Since ECMAScript 5: Add implicit getters and setters via the prototype
Object.defineProperty(TransportVehicle.prototype, "maxSpeed", {
get: function() {return this._maxSpeed;},
set: function(maxSpeed) {this._maxSpeed = maxSpeed; return this;}
});

Benutzung
tv.getName(); // name via getter
tv.name; // name via public variable

tv.price=42; // price via setter
tv.price; // price via getter

// bmw.getPrice(); does not exit

tv.maxSpeed=203; // via setter
tv.maxSpeed; // via getter

// tv.getMaxSpeed(); does not exist

Man kann auch außerhalb des Konstruktors Methoden der Klasse hinzufügen
//method defined outside the constructor via prototype
TransportVehicle.prototype.bar = function() {
return "Bar";
}

Both will work the same way

tv.foo();
tv.bar();

Vererbung

Einfach noch eine Funktion definieren. Das wird der Konstruktor der Kind Klasse. Einfach noch prototype auf eine Instanz der Vater Klasse setzen.
// Car is a TransportVehicle
function Car(pName, pNrOfWheels) {
this.prototype=new TransportVehicle(pName);

//also add getters and setters via the prototype
Object.defineProperty(this, "nrOfWheels", {
get: function() { return this._nrOfWheels; },
set: function(nrOfWheels) { this._nrOfWheels = nrOfWheels; return this; }
});

// use setter implicitly because setter was defined before us
this.nrOfWheels=pNrOfWheels;

}



// Overwrite method in Car
Car.prototype.foo=function() {
// result from father class and change the result slightly
return this.prototype.foo()+"ooooo";
}

var bmw=new Car("BMW 3", 4);
bmw.nrOfWheels; // via implicit getter
bmw.foo(); // Fooooooo

JavaScript Object Natation (JSON)

JavaScript Object Natation (JSON), eine Kurzschreibweise für JavaObjekte
var deposit= { currency:"EUR",
value:"120,12",
getString:function() { return this.value+"("+this.currency+")"; }
}

Wichtige Objekte

ObjektAnwendung
windowz.B. window.alert();
documentZugriff auf die Webseite
locationZugriff auf die URL der aktuellen Seite
09-04-2015 23.59

JavaScript, CSS, Objekte bewegen

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>JavaScript Demo</title>

<style type="text/css">
#d1 { color:red; position:fixed; top:10px; left:10px; }
#d2 { color:blue; position:fixed; top:100px; left:100px; }
</style>
</head>
<body>

<div id="d1">Foo</div>
<div id="d2">Bar</div>

<script type="text/javascript">

var o1=document.getElementById("d1")
var o2=document.getElementById("d2")

var myCounter=0;

function moveIt()
{
o1.style.left=10+myCounter+'px';
o2.innerHTML='Value: '+myCounter;
myCounter++;
if(myCounter>100) clearInterval(myInterval);
}

var myInterval=setInterval("moveIt()", 20);

</script>

</body>
</html>
04-03-2010 20.40

DOM

Firefox DOM Inspector

DOM Level 0

Es gibt für einige Objekte Arrays (u.a. für Links und Bilder). Zum Beispiel
document.links[i];

DOM Level 2

Für alle Objekte in der HTML Seite gibt es ein Objekt.
<div id="d1">
First
<div id="d2">
Second
<ul id="d3">
<li>A</li><li>B</li>
<li>C</li>
</ul>
</div>
<span id="d4"><a href="http://www.example.com">third</a></span>
</div>

<br /><hr /><br />

<div id="result">Result:</div>

<script type="text/javascript">

var o1=document.getElementById("d1");
var o2=document.getElementById("d2");
var o3=document.getElementById("d3");
var o4=document.getElementById("d4");

var result=document.getElementById("result").childNodes[0];

// First
result.nodeValue+=" "+o1.childNodes[0].nodeValue;

// Second
result.nodeValue+=" "+o2.childNodes[0].nodeValue;

// ul
for(var i=0; i<o3.childNodes.length; i++)
{
if("object"===typeof o3.childNodes[i].childNodes[0])
{
result.nodeValue+=i+": "+o3.childNodes[i].childNodes[0].nodeValue+" ";
}
}

// a href
var ol=o4.childNodes[0];
result.nodeValue+=ol.childNodes[0].nodeValue;
result.nodeValue+=" -> "+ol.getAttribute('href')

// other possibility
result.nodeValue+="; "+o3.innerHTML;
</script>
09-04-2015 22.55

Events

Liste wichtiger Events, siehe auch DOM Events
  • onchange
  • onclick
  • onfocus
  • onload
  • onmouseon
  • onmouseover
  • onload

W3C Event Listener / IE Event Listener

W3C Event-Listener (wird nicht vom IE unterstützt) und Micrsoft Internet Explorer Events
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>JavaScript Demo</title>

<style type="text/css">
.stylA { font-size:large; color:red; }
.stylB { font-size:normal; color:green; }
</style>

<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>
<body>

<div id="d1" class="stylB" onmouseover="this.className='stylA';" onmouseout="this.className='stylB';">
Foo
</div>

<script type="text/javascript">

var o=document.getElementById("d1");

if("function"===typeof o.addEventListener)
o.addEventListener("click", myFunction, false);
else if("function"===typeof o.attachEvent)
o.attachEvent("click", myFunctionIE);

function myFunction(pEvent)
{
o.childNodes[0].nodeValue+=".("+pEvent.clientX+"/"+pEvent.clientY+"\)";
}

function myFunctionIE()
{
o.childNodes[0].nodeValue+=".("+window.event.offsetX+"/"+window.event.offsetY+"\)";
}

</script>

</body>
</html>
25-03-2013 02.15

Parameter übergeben und auslesen

var myNewURL="foo.bar?"+encodeURIComponent("Hello World!");
alert(myNewURL);

var myParams=location.search;
myParams=myParams.substring(1, myParams.length);
myParams=decodeURIComponent(myParams);
alert(myParams);

Speicherbare Links

location.hash kann dazu benutzt werden, für den Zustand einer dynamischen Seite eine URL in der Adressleiste zu erreichen, die man verlinken kann.


09-04-2015 22.55

Beispiele

Größe eines Input Elements soll mitwachsen

Ein Input Element für Texte soll mit der Größe des bereits eingegebenen Strings dynamisch mitwachsen und schrumpfen.

Der Code kann entweder direkt am Element platziert werden
<input type="text"  ... size="2" onkeyup="var newsize=this.value.length; if(newsize<2) { newsize=2; }; if(newsize>1000) { newsize=1000; }; this.setAttribute('size', newsize);" />

oder in eine Methode ausgelagert werden
<script type="text/javascript">
<!--
/* this function can be used to enlarge text input
* fields while the users enters text into it.
* Usage: <input type="text" onkeyup="enlarge_size_with_value_length(this);" ...
*/
function enlarge_size_with_value_length(o)
{
var minsize=2;
var maxsize=1023;
var newsize=o.value.length;
if(newsize<minsize) {
newsize=minsize;
};
if(newsize>maxsize) {
newsize=maxsize;
};
o.setAttribute('size', newsize);
};
//-->
</script>


<input type="text" ... size="2" onkeyup="enlarge_size_with_value_length(this)"
09-04-2015 23.47

Ajax

Asynchronous JavaScript und XML
// get XMLHttpRequest object for most browsers
function getXMLHttpRequest()
{
if(window.XMLHttpRequest) return new XMLHttpRequest();
if(typeof ActoveXObject!="undefined") return new ActiveXObject("Microsoft.XMLHTTP");
return null;
}

talk2me=getXMLHttpRequest();

talk2me.onreadystatechange=gotOne;
talk2me.open("get", "data1.xml", true);
talk2me.send(null);

function gotOne()
{
if(talk2me.readyState==4)
{
if(talk2me.status==200)
{
alert(talk2me.responseText);
}
}
}
09-04-2015 23.47

Den Browser nach der aktuellen Position auf der Erde fragen

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, onError); //
also monitor position as it changes
navigator.geolocation.watchPosition(showPosition); } else { onError();
}

function showPosition(position)
{
...
}

function onError()
{
if (navigator.geolocation)
{
// Error in geolocation service
}
else
{
// Warning: Browser does not support geolocation
}
}
22-08-2010 14.20
Powered by PHP Created with Xemacs Valid XHTML 1.0! Valid CSS!