Wieso JavaScript?
JavaScript ist eine mächtige, komplexe, und oft missverstandene Programmiersprache. Sie ermöglicht eine schnelle Entwicklung von Applikationen, in denen Benutzer Daten eingeben und die Ergebnisse einfach anzeigen lassen können.
Der primäre Vorteil von JavaScript, welches auch als ECMAScript bekannt ist, ist, dass es die Fähigkeit hat auf allen Plattformen, die von Webbrowsern unterstützt werden, diesselben Ergebnisse zu produzieren. Die Beispiele auf dieser Seite, sowie Google Maps, sind unter Linux, Windows, und OS X lauffähig. Mit der Zunahme von zahlreichen JavaScript Bibliotheken ist es heute einfacher in einem Dokument zu navigieren, DOM Elemente auszuwählen, Animationen zu erstellen, Events zu behandeln und Ajax Applikationen zu entwickeln. Im Gegensatz zum Hype in Bezug auf andere Technologien, welche von verschiedenen proprietären Interessen getrieben werden, ist JavaScript die einzige platformunabhängige, clientseitige Programmiersprache, die frei verfügbar und universal angepasst ist.
Was Sie schon wissen sollten
JavaScript ist eine sehr einfache Programmiersprache für Anfänger. Sie benötigen lediglich einen Texteditor und einen Webbrowser um anzufangen.
Es gibt viele verschiedene Technologien, die in JavaScript integriert oder neben JavaScript entwickelt werden können. Diese überschreiten aber den Umfang dieses Artikels. Erwarten Sie bitte nicht, das Sie eine Applikation wie Google Maps am ersten Tag erstellen können!
Getting started
Der Anfang mit JavaScript ist sehr leicht. Sie brauchen keine komplexen Programme zum Programmieren. Sie müssen sich nicht mit der Shell, dem Programm Make oder der Verwendung eines Compiler auskennen. JavaScript wird von ihrem Webbrowser interpretriert. Sie müssen ihr Programm lediglich als eine Textdatei speichern und danach mit ihrem Web0browser öffnen. Das ist Alles!
JavaScript ist eine großartige Programmiersprache für Anfänger. Sie erlaubt sofortiges Feedback für neue Studenten und zeigt ihnen Werkzeuge, welche sie im Leben nützlich finden können. Das ist ein starken Kontrast zu C, C++, und Java, welche nur für Softwareentwickler nützlich sind.
Probleme mit Webbrowserkompatibilität
Die verfügbaren Funktionalitäten unterscheiden sich zwischen verschiedenen Webbrowsern. Mozilla, Chrome, Microsoft IE, Apple Safari, und Opera variieren sich in ihrem Verhalten. Wir versuche diese Variationen zu dokumentieren. Sie können diese Probleme abschwächen, indem sie verschiedene plattformunabhängige JavaScript APIs einsetzen. Diese APIs bieten eine einheitliche Funktionalität und verbergen die Unterschiede zwischen den Webbrowsern.
Beispiele ausführen
Die folgenden Beispiele enhalten Beispielcode. Diese Beispiele können auf verschiedene Arten ausgeführt werden. Wenn Sie bereits eine eigene Website besitzen, können Sie die Beispiele einfach als neue Webseiten zu Ihrer Website hinzufügen.
Wenn Sie keine eigene Website besitzen, können Sie die Beispiele lokal auf Ihren Computer abspeichern und mit einem Webbrowser öffnen. Aus diesem Grund ist JavaScript eine sehr einfache Programmiersprache für Anfänger. Sie brauchen keinen Compiler oder eine Entwicklungsumgebung. Sie brauchen lediglich einen Texteditor und einen Webbrowser um anfangen zu können!
Sie können auch online Programme wie jsfiddle.net verwenden
Beispiel: Einen Mausklick abfangen
Die Feinheiten des Event Handling (Eventtypen, Handlerregistrierung, Ausbreitung, etc.) sind zu komplex, um sie in diesem Beispiel vollständig abzudecken. Ein kleiner Blick in das JavaScript Event System ist aber zur Veranschaulichung dieses Beispiels dennoch nötig. Wenn mehr Detail über Eent in JavaScript erfahren wollen, lesen Sie bitte mehr über das JavaScript Event System.
'Mouse' Events sind eine Teilmenge aller Events, die von einem Webbrowser als Reaktionen auf Benutzerinteraktionen ausgelöst werden. Die folgende Liste zählt alle Events auf, die als Reaktion auf Mausaktionen ausgelöst werden:
- Click - wenn der Benutzer eine einfachen Mausklick macht
- DblClick - wenn der Benutzer einen Doppelklick macht
- MouseDown - wenn der Benutzer eine Maustaste runterdrückt (erste Hälfte eines Klicks)
- MouseUp - wenn der Benutzer eine gedrückte Maustaste wieder loslässt (zweite Hälfte eines Klicks)
- MouseOut - wenn der Mauszeiger die grafischen Grenzen des Objekts überschreitet
- MouseOver - wenn der Mauszeiger die grafischen Grenzen des Objekts betritt
- MouseMove - wenn sich der Mauszeiger innerhalb der grafischen Grenzen des Objekts bewegt
- ContextMenu - wenn der Benutzer einen Mausklick mit der rechten Maustaste macht
Bitte berücksichtigen Sie, dass in den aktuellen Versionen von HTML, die Inline Event Handler (die, die als Attribute innerhalb eines Tags registriert werden) mit kleingeschriebenen Namen erwartet werden und dies ebenso bei Event Handler im Script erwartet wird.
Die einfachste Methode ein Event abzufangen ist, wenn die individuell Events mittels HTML als Attribute des Elements spezifiziert werden:
<span onclick="alert('Hello World!');">Click Here</span>
Der JavaScript Code, der ausgeführt werden soll, kann direkt im Wert des Attributs angegeben werden oder Sie rufen eine Funktion auf, die in einem <script> Block auf der HTML Seite definiert ist:
<script>
function clickHandler() {
alert("Hello, World!");
}
</script>
<span onclick="clickHandler();">Click Here</span>
Zusätzlich kann das Event Objekt, welches ausgelöst wurde, abgefangen und referenziert werden. Dies bietet dem Entwickler Zugriff auf die Eigenschaften des Events. Dazu gehören das Objekt, das das Event erhält, der Eventtyp und Informationen über die geklickte Maustaste. Unter Verwendung des Inline Beispiels ergibt sich folgender Code:
<script>
function clickHandler(event) {
var eType = event.type;
/* the following is for compatibility */
/* Moz populates the target property of the event object */
/* IE populates the srcElement property */
var eTarget = event.target || event.srcElement;
alert( "Captured Event (type=" + eType + ", target=" + eTarget + ")" );
}
</script>
<span onclick="clickHandler(event);">Click Here</span>
Neben der Registrierung der Event Handler im HTML können diesselben Attribute jedes HTMLElement Objekts über JavaScript Code gesetzt werden. Das folgende Beispiel instanziert (erstellt) ein span Object, fügt es dem body der Seite hinzu und registeriert das span Objekt damit es mouse-over, mouse-out, mouse-down, und mouse-up Events erhält.
<body></body>
<script>
function mouseeventHandler(event) {
/* The following is for compatibility */
/* IE does NOT by default pass the event object */
/* obtain a ref to the event if one was not given */
if (!event) event = window.event;
/* obtain event type and target as earlier */
var eType = event.type;
var eTarget = event.target || event.srcElement;
alert(eType +' event on element with id: '+ eTarget.id);
}
function onloadHandler() {
/* obtain a ref to the 'body' element of the page */
var body = document.body;
/* create a span element to be clicked */
var span = document.createElement('span');
span.id = 'ExampleSpan';
span.appendChild(document.createTextNode ('Click Here!'));
/* register the span object to receive specific mouse events -
notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
*/
span.onmousedown = mouseeventHandler;
span.onmouseup = mouseeventHandler;
span.onmouseover = mouseeventHandler;
span.onmouseout = mouseeventHandler;
/* display the span on the page */
body.appendChild(span);
}
window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
</script>
Beispiel: Ein Tastenevent abfangen
Das Abfangen von Tastenevents erfolgt ähnlich zum obigen Beispiel "Einen Mausklick abfangen". Tastenevents werden immer bei der Verwendung einer beliebigen Taste ausgelöst.
Die Liste der möglichen Tastenevents als Reaktion auf eine Interaktion mit der Tastatur ist kürzer als diejenige Liste für die verfügbaren Mausevents:
- KeyPress - wenn eine Taste gedrückt und wieder losgelassen wird
- KeyDown - wenn eine Taste gedückt wird aber noch nicht losgelassen worden ist
- KeyUp - wenn eine gedrückte Taste losgelassen wird
- TextInput (nur in Webkit Webbrowsern zum Zeitpunkt der Verfassung des Artikels verfügbar) - wenn Text über die Tastatur, Copy-And-Paste oder per Spracheingabe eingegeben wird. Dieses Event wird in diesem Artikel nicht weiter behandelt.
Beim keypress Event wird der Unicode-Wert der gedrückten Taste entweder in der keyCode oder der charCode Eigenschaft gesetzt. Wenn die gedrückte Taste ein Zeichen (z.B.: 'a') generiert, wird die charCode Eigenschaft mit dem Unicode-Wert gesetzt. Dabei wird auf die Großschreibung des Zeichen geachtet, wenn zusätzlich die Umschalt-Taste gedrückt wurde. Anderenfalls wird der Unicode-Wert der gedrückten Taste in der keyCode Eigenschaft gesetzt.
Die einfachste Methode um ein Tastenevent abzufangen ist die Registierung eines Event Handlers in HTML indem das individuelle Event als Attribut auf dem Element gesetzt wird.
<input type="text" onkeypress="alert ('Hello World!');">
Wie bei den Mausevents kann der auszuführende JavaScript Code direkt im Attribut oder als Aufruf einer Funktion, die in einem <script> Block auf der HTML Webseite definiert ist, angegeben werden:
<script>
function keypressHandler() {
alert ("Hello, World!");
}
</script>
<input onkeypress="keypressHandler();" />
Das Abfangen des Events und das Verweisen auf das target (z.B.: die gedrückte Taste) erfolgt parallel zu den Mausevents:
<script type="text/javascript">
function keypressHandler(evt) {
var eType = evt.type; // Will return "keypress" as the event type
/* here we again need to use a cross browser method
mozilla based browsers return which and others keyCode.
The Conditional operator or ternary is a good choice */
var keyCode = evt.which?evt.which:evt.keyCode;
var eCode = 'keyCode is ' + keyCode;
var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
}
</script>
<input onkeypress="keypressHandler(event);" />
Das Abfangen eines beliebigen Tastenevents auf der Webseite kann mit der der Registrierung des Events auf der Dokumentebene und dem Aufruf einer Event Handler Funktion erfolgen:
<script> document.onkeypress = keypressHandler; document.onkeydown = keypressHandler; document.onkeyup = keypressHandler; </script>
Hier folgt ein vollständiges Beispiel, das die Behandlung von Tastenevents veranschaulicht:
<!DOCTYPE html>
<html>
<head>
<script>
var metaChar = false;
var exampleKey = 16;
function keyEvent(event) {
var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
var keychar = String.fromCharCode(key);
if (key == exampleKey) {
metaChar = true;
}
if (key != exampleKey) {
if (metaChar) {
alert("Combination of metaKey + " + keychar)
metaChar = false;
} else {
alert("Key pressed " + key);
}
}
}
function metaKeyUp(event) {
var key = event.keyCode || event.which;
if (key == exampleKey) { metaChar = false; }
}
</script>
</head>
<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
Try pressing any key!
</body>
</html>
Fehler und Eigenarten von Webbrowsern
Die beiden Eigenschaften keyCode und charCode sind bei Tastenevents verfügbar. Die keyCode Eigenschaft verweist auf die Taste, die vom Benutzer gedrückt wurde. Währenddessen ist die charCode Eigenschaft für den ASCII-Wert der gedrückten Taste vorgesehen. Diese beiden Werte können sich aber unterscheiden. Das kleingeschriebene 'a' und das großgeschriebene 'A' haben denselben keyCode, weil der Benutzer dafür dieselbe Taste auf der Tastatur drückt. Der charCode ist aber unterschiedlich, da zwei unterschiedliche Zeichen generiert werden.
Die Interpretation der charCode Eigenschaft in Webbrowsern ist kein konsitent Vorgang. Zum Beispiel unterstützen Internet Explorer und Opera die charCode Eigenschaft nicht. Dagegen geben sie die Information über das Zeichen in der keyCode Eigenschaft an. Dies aber nür für das onkeypress Event. Der keyCode von onkeydown und onkeyup enthält die Information zur Taste. Firefox verwendet das Wort "which" um die Zeichen zu unterscheiden.
Für weitere Informationen lesen Sie bitte die Mozilla Dokumentation zu Tastenevents.
Draft
This page is not complete.
Beispiel: Bilder verschieben
Das foglende Beispiel ermöglicht das Verschieben eines Bildes auf der Webseite:
<!DOCTYPE html>
<html>
<head>
<style>
img { position: absolute; }
</style>
<script>
window.onload = function() {
movMeId = document.getElementById("ImgMov");
movMeId.style.top = "80px";
movMeId.style.left = "80px";
document.onmousedown = coordinates;
document.onmouseup = mouseup;
function coordinates(e) {
if (e == null) { e = window.event;}
// e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
// Both properties return the HTML element the event took place on.
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
if (sender.id=="ImgMov") {
mouseover = true;
pleft = parseInt(movMeId.style.left);
ptop = parseInt(movMeId.style.top);
xcoor = e.clientX;
ycoor = e.clientY;
document.onmousemove = moveImage;
return false;
}
return false;
}
function moveImage(e) {
if (e == null) { e = window.event; }
movMeId.style.left = pleft+e.clientX-xcoor+"px";
movMeId.style.top = ptop+e.clientY-ycoor+"px";
return false;
}
function mouseup(e) {
document.onmousemove = null;
}
}
</script>
</head>
<body>
<img id="ImgMov" src="/old?u=http%3A%2F%2Fplacehold.it%2F100x100%26amp%3Btext%3DJS&y=1999" width="64" height="64">
<p>Drag and drop around the image in this page.</p>
</body>
</html>
Beispiel: Objekte vergrößern oder verkleinern
<!DOCTYPE html>
<html>
<head>
<style>
#resizeImage {
margin-left: 100px;
}
</style>
<script>
window.onload = function() {
var resizeId = document.getElementById("resizeImage");
var resizeStartCoordsX,
resizeStartCoordsY,
resizeEndCoordsX,
resizeEndCoordsY;
var resizeEndCoords;
var resizing = false;
document.onmousedown = coordinatesMousedown;
document.onmouseup = coordinatesMouseup;
function coordinatesMousedown(e) {
if (e == null) {
e = window.event;
}
var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
if (element.id == "resizeImage") {
resizing = true;
resizeStartCoordsX = e.clientX;
resizeStartCoordsY = e.clientY;
}
return false;
}
function coordinatesMouseup(e) {
if (e == null) {
e = window.event;
}
if (resizing === true) {
var currentImageWidth = parseInt(resizeId.width);
var currentImageHeight = parseInt(resizeId.height);
resizeEndCoordsX = e.clientX;
resizeEndCoordsY = e.clientY;
resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
resizing = false;
}
return false;
}
}
</script>
</head>
<body>
<img id="resizeImage" src="/old?u=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fe%2Fe7%2FMozilla_Firefox_3.5_logo_256.png&y=1999"
width="64" height="64">
<p>Click on the image and drag for resizing.</p>
</body>
</html>
Beispiel: Linien zeichnen
<!DOCTYPE html>
<html>
<head>
<script>
function linedraw(ax,ay,bx,by)
{
if(ay>by)
{
bx=ax+bx;
ax=bx-ax;
bx=bx-ax;
by=ay+by;
ay=by-ay;
by=by-ay;
}
var calc=Math.atan((ay-by)/(bx-ax));
calc=calc*180/Math.PI;
var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}
</script>
</head>
<body onload="linedraw(200,400,500,900);"> <!-- Replace with your co-ordinate -->
</body>
</html>