Kurzeinstieg in JavaScript

Willemers Informatik-Ecke

Nicht JavaScript, aber Java:

Das einzig seriöse Javabuch :-) Mehr...

Errata

Bei Amazon bestellen


Ferien an der Flensburger Förde
Kurzeinstieg
Weitere JavaScript-Themen

JavaScript ist eine objektbasierende Interpretersprache, die ihre Anwendung in Webseiten findet.

Einbindung in die HTML-Seite

Im Head-Bereich einer HTML-Seite kann ein Bereich für den JavaScript-Bereich reserviert werden, indem ein Bereich mit dem Tag script eingerahmt wird. Groß- und Kleinschreibung ist - wie immer bei HTML egal.

Sie können mit dem Attribut LANGUAGE festgelegen, welche Sprache verwendet wird. Das ist allerdings nicht erforderlich. Befehle zwischen den SCRIPT-Tags werden an Ort und Stelle ausgeführt.

<html>
<head>
<script>
document.write('Hallo!');
</script>
</head>
<body>
</body>
</html>

Wenn dieser Code eine leere Seite mit dem Text Hallo! erscheint, klappt JavaScript auf dem Browser.

Anstatt den JavaScript-Code in den Head-Bereich der HTML-Seite zu schreiben, verwendet man gern separate Dateien. Diese Einbindung muss dann auch nicht mehr im Head erfolgen. Im Gegenteil setzt man es gern nach unten, damit das Laden der JavaScript-Datei den Aufbau der Seite nicht verzögert.

<script src="hallo.js"></script>
In den Dateien steht der Code dann häufig in
Funktionen. Das Beispiel oben könnten wir in einer Funktion hallo schreiben:
function hallo() {
    document.write('Hallo!');
}
Dieser Text wird nun in der Datei hallo.js abgelegt. Im Body-Bereich wird die Datei geladen und im Tag body wird die Funktion hallo() aufgerufen. Der Befehl onload bedeutet, dass der Aufruf erfolgt, sobald die Seite geladen wird.
<html>
<head>
</head>
<body onload="hallo()">
<script src="hallo.js"></script>
</body>
</html>

Der Browser als Entwicklungsumgebung

Beim Firefox kann über das Menü Extras|Web-Entwickler|Werkzeuge ein- und ausblenden der untere Bereich freigeklappt werden. In der untersten Zeile können JavaScript-Anweisungen gegeben werden. Darüber in der Konsole werden die Anweisungen und ihre Ergebnisse angezeigt.

Unter Chromium findet man in dem Magermenü auf der rechten Seite den Punkt More Tools...|Developers tools eine vergleichbare Umgebung. Allerdings belegt sie die rechte Seite des Browsers statt die untere Hälfte.

In die Konsolenzeile kann beispielsweise concole.log("Moin!") eingegeben werden. Es gibt sogar eine Autovervollständigung. Mit diesem Tool kann man erst einmal weiterarbeiten um die Grundbefehle von JavaScript kennenzulernen.

Variablen und Typen

Im Gegensatz zu Java ist JavaScript nicht streng typisiert. Die Variablen werden nicht definiert, sondern zur Laufzeit angelegt. Der Typ der Variablen ergibt sich aus ihrer Verwendung. Die primitiven Typen von JavaScript sind Boolean, Number und String.

Arrays

Man kann Arrays anlegen. Dazu wird der new-Operator verwendet.

var wert = new Array(8);
wert[4] = 12.95;
wert[5] = 'kein Preis';

Die untere Array-Grenze ist fest 0. Mehrdimensionale Arrays werden durch Anlegen von Arrays in Array-Variablen realisiert:

var matrix = new Array(2);
matrix[0] = new Array(2);
matrix[1] = new Array(2);
matrix[0][1] = 4.97;

Objekte

Auch Objekte lassen sich anlegen. Eine Definition ist nicht zwingend erforderlich.

var dasda = new Object;

dasda.name = 'Anton';
dasda.alter = 32;
dasda.jenes = new Object;
dasda.jenes.hobby = 'alles ausser Sport';
Alternativ kann statt new Object auch einfach ein paar geschweifte Klammern verwendet werden.
var sowas = {};
sowas.alter = 35;
sowas.name = "James";
Das ist insofern praktischer, weil in die geschweiften Klammern gleich die Attribute geschrieben werden können. Dazu muss allerdings zwischen die Attribute ein Komma gestellt werden. Und die Vorbelegung erfolgt durch einen Doppelpunkt und nicht durch das Gleichheitszeichen.
var sowas = {
   alter: 35,
   name : "James"
}

Assoziative Speicher

Dazu wird statt einem Attributnamen ein String verwendet.
var asso = {
   "FL" : "Flensburg",
   "HG" : "Bad Homburg"
}
console.log(asso["FL"])

Kontrollstrukturen

if ( Bedingung ) Statement else Statement
for  ( Statement ; Bedingung ; Statement ) Statement
while ( Bedingung ) Statement

Wie in C kann eine Schleife sowohl mit break als auch mit continue unterbrochen bzw. kurzgeschlossen werden.

Funktionen

function tudochwas(argument)
{
   ...
}

Die Argumente sind nicht typisiert. Bei primitiven Typen (Boolean, Numer, String) erfolgt eine Parameterübergabe als call by value. Dagegen wird bei Objekten call by reference verwendet.

Ereignisse

Name Wirkungsbereich Wirkung
onMouseOver A TEXTAREA Die Maus "betritt" das Feld
onMouseOut A TEXTAREA Die Maus verläßt das Feld
onClick BUTTON CHECKBOX RADIO A RESET SUBMIT Maustaste gedrückt, Taste ausgelöst
onFocus TEXT TEXTAREA SELECT PASSWORD Feld ist aktiviert
onLoad BODY FRAMESET Seite wurde geladen
onUnload BODY FRAMESET Seite wird verdängt
onSubmit FORM Sumbit-Button des Formulars gedrückt
onChange TEXT TEXTAREA SELECT PASSWORD Eingabefeld hat den Inhalt geändert

Zielobjekte

wahr = window.confirm('Benutzeranfrage')
Es erscheint eine Messagebox mit OK und Abbruch. Wählt der Anwender OK wird true zurückgegeben.
window.alert('Achtung: die Maustaste rostet')
Hier erscheint eine Messagebox mit angegebenen Text.
antwortstring = window.prompt('Geben Sie was ein')
In dieser Dialogbox kann ein Text eingegeben werden, der zurückgegeben wird.
window.open('/home.t-online.de/home/willemer', '_self')
Das Dokument mit der URL des ersten Parameters wird in das Target des zweiten Parameters geladen. _self steht für den aktuellen Frame.
window.frames["meinMenu"]
Man kann auf ein Frame zugreifen. In diesem Fall wird das Target mit dem Namen meinMenu angesprochen. Man kann auch frames[0] ansprechen. Durch direkte Zuweisung kann es eine neue Seite erhalten.
windows.fames.length
liefert die Anzahl der Unterframes.
parent
parent bezeichnet den Eltern-Frame.
document.bgColor='red'
Färbt den Hintergrund rot. Andere Farben sind white, black, blue, green.
history
Mit der Methode back() kann die zuletzt aufgerufene Seite geladen werden. Die Methode go('vergleichstring') lädt die Seite, deren URL den vergleichstring enthät.

Formularfelder ansprechen

Man kann auch Felder in Formularen ansprechen. Dies geschieht über die vergebenen Namen.

<FORM NAME="Adresse" ... >
<INPUT NAME="VORNAME" ... >
</FORM>

Das Eingabefeld des Vornamens kann angesprochen werden mit

document.Adresse.VORMAME


Homepage (C) Copyright 1999, 2007, 2015 Arnold Willemer