Dieses Tutorial richtet sich vor allem an Anfänger, welche aber HTML und grundlegende Programmier-Kentnisse haben müssen und hat keinen Anspruch auf Richtigkeit (das heißt ich nehme Verbesserungsvorschläge dankend an :))
1. Allgemeines
Dies ist ein Tutorial über Javascript, eine objektorientierte interpretierte Sprache, welche jeder moderne Browser mehr oder weniger vollständig ausführen kann. Sie dient zur dynamischen clientseitigen veränderung von Internetseiten.
Javascriptcodes sind reine Textdateien und haben die Endung ".js", können aber auch direkt in eine HTML-Datei eingegeben werden.
So ergeben sich zwei Möglichkeiten ein Javaskript in eine Internetseite einzubauen:
<html>
<head>
<title>Javascript</title>
<!-- Erste Moeglichkeit -->
<script type="text/javascript" src="sourcecode.js"></script>
<!-- Zweite Moeglichkeit -->
<script type="text/javascript">
//<![CDATA[
var variable = 0; //hier steht der Code
//]]>
</script>
</head>
<body>
</bod>
</html>
Wenn ihr einen guten Editor sucht, dann empfehle ich euch Notepad++, dieser unterstütz außerdem noch viele andere Sprachen.
2. Grunlegende Syntax / Operatoren
Javascriptbefehle enden stets durch ein Semikolon (";").
Wenn man Kommentare einleiten will verwendet man ein doppeltes "/", der Kommentar geht dann bis zum Ende der Zeile.
Javascript kennt sogennante Gültigkeitsbereiche, dies bedeutet, dass jeder Codeabschnitt der durch "{" und "}" eingegrenzt ist seine ganz eigenen Variablen haben kann diese Verfallen nach "}".
Dies zeigt man am besten an einem Beispiel:
var zahl1 = 0; //<- Diese Zeile endet mit einem ; da sie eine Anweisung darstellt
if(zahl1 == 0) //<- Diese Zeiel ist keine Anweisung (Befehl) sondern der Kopf einer Kontrollstruktur
{ //<- Hier beginnt ein neuer Gültigkeitsbereich, dieser Bereich kennt alle Variablen die vorher
//vorhanden waren wie zahl1 und kennt außerdem alle die in ihm selbst erzeugt werden
//wie zahl2, diese Variable ist aber nach der "}" nicht mehr gültig, verfällt also
var zahl2 = 4;
}
Die wichtigsten Operatoren von Javascript sind aufgeteilt in vier Gruppen, Arithmetische-, Vergleichs-, Logische- und andere Operatoren.
Arithmetisch:
+ addiert zwei Werte
- subtrahiert zwei Werte
* multipliziert zwei Werte
/ dividiert zwei Werte
% gibt den Rest einer Division zurück
Vergleich:
< kleiner als
> größer als
== gleich
!= ungleich
<= kleiner gleich
>= größer gleich
Logische:
&& logisch und
logisch oder
! logisch nicht
Andere:
. Zugriff auf Klassen- methoden / attribute (siehe Abschnitt 5)
= weist einer Variable einen Wert zu
++ erhöht den Wert einer Variable um 1
-- verringert den Wert einer Variable um 1
+= addiert den Wert hinter dem Operator auf den Wert der Variable vor dem Opertor und weist sie dieser zu
-= subtrahiert den Wert hinter dem Operator von dem Wert der Variable vor dem Opertor und weist sie dieser zu
3. Kontrollstrukturen
3.1 Bedingte Anweisungen
Javascript unterstützt zwei verschiedene Arten der Bedingten Anweisung, dies bedeutet, das ein Programmteil nur ausgeführtwird wenn eine Bedingung zutrifft.
Die erste welche ich vorstelle ist das if-else Konstrukt.
Der Grundlegende Aufbau gestalltet sich volgendermaßen:
if(Bedingung)
{
//der Code hier wird ausgeführt wenn die Bedingung wahr ist
}
else
{
//der Code hier wird ausgeführt wenn die Bedingung falsch ist
}
An diese Beispiel lässt sich gut erkennen, dass dieses Konstrukt mit "if(" anfängt. Darauf folgt eine Bedingung welche zum Beispiel mit Hilfe von Vergleichsoperatoren gebaut werden kann "zahl==2" nun folgt die schließende Klammer ")". Darauffolgend wird ein neuer Gültigkeitsbereich geöffnet "{" welcher den Code enthällt der Ausgeführt wird fals die Bedingung wahr ist, dieser Gültigkeitsbereich wird danach geschlossen "}". Nun folgt optional ein "else", welches einen weiteren folgenden Gültigkeitsbereich als nur ausführbar markiert, wenn die Bedingung falsch ist.
Alle nach diesem Konstruk folgenden Zeilen werden nach dem ausführen des Konstruktes ganz normal weiter abgearbeitet.
Fallbeispiel:
var zahl = 2; //zahl ist jetzt gleich 2
if(zahl == 2) //wenn zahl gleich zwei ist
{
zahl=4; //wird zahl auf 4 gesetzt
}
else //ansonsten
{
zahl=5; //wird zahl auf 5 gesetzt
}
zahl=6; //zahl wird, unabhängig von dem ganzen darüber auf 6 gesetztDie nächste Bedingte Anweisung ist das switch Konstrukt, welches zwischen mehr als zwei Möglichen Werten (wahr/falsch) unterscheidet. Grundsätzlich lässt sich dies auch durch verschachtelung (ineinanderfügung) mehrerer if-else Konstrukte erreichen, aber dies könnte unübersichtlich werden.
switch(Zahlenwert)
{
case "1":
//mach was wenn der Zahlenwert 1 ist
break;
case "2":
//mach was wenn der Zahlenwert 2 ist
break;
case "3":
//mach was wenn der Zahlenwert 3 ist
break;
case "4":
//mach was wenn der Zahlenwert 4 ist
break;
case "5":
//hier können noch belibig viele case folgen...
break;
default:
//default wird nur ausgeführt, wenn es kein case zu dem Zahlenwert gibt, in diesem Beispiel bei 6,7,...
break;
}Das break, welches immer nach der Anweisung steht die auf ein switch folgt muss dort stehen, da Javascript ansonsten alles nach dem case ausführt, dies bedeutet im Beispiel, das wenn der Zahlenwert 4 ist nicht nur die Anweisungen unter case 4 sondern auch für 5 ausgeführt werden, dies ist manchmal erwünscht, in so einem Fall kann das break weggelassen werden. (break wird uns im Zusammenhang mit Schleifen auch nochmal als etwas beendendes begegnen).
Fallbeispiel:
var zahl = 2;
switch(zahl)
{
case "1":
//das hier wird nicht ausgeführt
break;
case "2":
//das hier wird ausgeführt
break;
default:
//das hier würde ausgeführt bei allem außer 1 und 2
break;
}3.2 Schleifen
Javaskript unterscheidet zwischen drei Schleifentypen, while, do-while und for, welche die Grundlegende Aufgabe einen Programmteil zu wiederholen auf verschiedene Art und Weise angehen.
Ich widme mich zuerst der while-Schleife, welche den einfachsten Aufbau hat.
Der Aufbau einer while Konstruktion lautet wie folgt:
while(Bedingung)
{
// Code der so lange wiederholt ausgefüht wird wie die Bedingung zutrifft
}
Genau wie bei der Bedingten Anweisung hat die Schleife eine Einleitung, welche das Wort while enthällt, welches auch schon viel darüber aussagt wie die Schleife arbeitet (while=solange).
Jetzt werde ich die do-while Schleife erleutern, da sie ähnlich arbeitet wie die while Schleife.
Der Aufabu ist so ähnlich wie eine umgedrehte while Schleife:
do
{
// Dieser Code wird so lange wiederholt wie die Bedingung zutrifft, wird aber auf jeden Fall einmal ausgeführt
}
while(Bedingung)Der Ablauf ist ähnlich wie bei der while Schleife, aber der Code wird auch wenn die Bedingung schon vorher nicht stimmt dennoch einmal ausgeführt.
4. Datentypen
Javascript unterstützt die sogenannte dynamische Typisierung, das heißt eine Variable ist nicht von Anfang an für einen bestimmten Wert vorgesehen, sondern kann im laufe der Zeit den Inhalt auch Typübergreifend ändern, so können Zahlen oder Texte gleichermaßen abgewechselt werden.
Das einzige "Typbezeichnende" was man bei der Erzeugung vor eine Variable hängen muss ist "var", dies zeigt dem Interpreter das es sich um eine Variable handelt.
var zahl = 1; //nun ist eine Zahl gespeichert (1)
zahl += 1; //der Wert in zahl ist nun 2
zahl = "text"; //der Wert von zahl ist nun der Text "text"Eine interessante Sache ist, das man auch mit Text in welchem eine Zahl enthalten ist rechnen kann, aber nur wenn diese am Anfang steht:
var text = "123text";
text += 1; //in text steht nun 124
text = "text123";
text += 1; //ergibt einen Fehler, da keine Zahl erkannt werden kann
text = "1text23";
text += 1; //ergibt 2, da nur die 1 erkannt wirdMit freundlichen Grüßen
Lenny
