Javascript
Dieses Tutorial behandelt JavaScript.Ich setze hierfür grundlegende Html-Kenntnisse voraus.
JavaScript ist eine clientseitige Skriptsprache.
Sie wird also im Browser ausgeführt.
Wenn man in den Quelltext einer Homepage mit JavaScript Inhalten schaut kann man den JavaScript-Code sehen.
Zuerst noch ein paar wichtige Sachen:
JavaScript kann man in den meisten Browsern deaktivieren, was auch manche Leute tun.
Also sollte JavaScript nur zur Erweiterung verwendet werden und nicht beispielsweise für die Navigation.
Außerdem sollten Sie mit den JavaScript-Effekten nicht übertreiben, das das auch sehr leicht Besucher Ihrer Homepage verjagt.
Da JavaScript, wie Php, Java und viele andere Sprachen, auf C/C++ aufbaut wird Ihnen wahrscheinlich sehr viel bekannt vorkommen.
Sie können die Skripte beispielsweise auf Webspace laden, um sie auszuprobieren.
Denn wenn sie das Php-Tutorial schon gelesen haben, brauchen sie nicht schon wieder ein neues Programm installieren!
Vermutlich wird Ihnen dann auch der folgende Text bekannt vorkommen.
Webspace können Sie hier bekommen:
bplaced
Funpic
Kilu
Sie müssen dort aber auch eine Website machen, da es nicht erlaubt ist, dort nur Datein abzulagern.
Dann brauchen Sie noch ein Ftp-Programm, um Dateien auf Ihre Webspace hochzuladen, wie zum Beispiel FileZilla.In diesem Programm müssen Sie dann noch die Ftp-Anmelde-Daten, die Sie bei der Anmeldung bei bplaced etc. bekommen haben, angeben und schon können Sie Datein auf den Server übertragen.
Wenn sie beispielsweise eine Datei mit dem Namen "TestDokument.html" auf den Server laden ist die Datei dann unter meineSeite.de/TestDokument.html erreichbar.
Nun folgt das letzte Programm, welches sie brauchen.
Nämlich ein Text-Editor.
Dafür reicht auch schon der bei Ihrem Betriebssystem mitgelieferte Editor, der bei Windows unter Zubehör oder Extras zu finden ist.
Dort schreiben Sie dann ihren Code hinein, speichern ihn als .php Datei.
Sie können natürlich auch einen anderen Editor nehmen, wie z.B.:
Notepad++ oder
Weaverslave
Diese heben dann Befehle im JavaScript-Code farblich hervor und links sehen Sie auch die Zeilennummern.
Nun wollen wir aber zur Praxis übergehen:
JavaScripte bindet man folgendermaßen in ein Html-Dokument ein:
/*Dieses einfache Skript ist ein Bestandteil
des Tutorials von
http://philipp7.de.tl */
<html>
<head>
</head>
<body>
<script type="text/javascript">
// Das Skript gibt Hello world aus
alert("Hello world!");
</script>
</body>
</html>
des Tutorials von
http://philipp7.de.tl */
<html>
<head>
</head>
<body>
<script type="text/javascript">
// Das Skript gibt Hello world aus
alert("Hello world!");
</script>
</body>
</html>
In diesem Beispiel sehen Sie auch schon einen kurzen JavaScript-Code.
Gehen wir ihn von oben bis unten durch.
In den ersten 3 Zeilen sehen Sie einen Kommentar.
Mit Kommentare kann man den Quelltext eines Skripts dokumentieren etc.
Mit /* */ kann man einen Kommentar über mehrere Zeilen machen.
Mit // geht der Kommentar nur noch bis zum Zeilenende.
Den JavaScript-Code bindet man mit
<script type="text/javascript">
</script>
in ein Html-Dokument ein.
Und mit dem Befehl alert wird ein kleines (nerviges) Fenster mit dem Text in den Anführungszeichen, also Hello World! ausgegeben.
Da Hello World! ein Text ist werden die Anführungszeichen benötigt.
Wie in den meisten anderen Sprachen wird ein Befehl wieder mit dem ; (Semikolon) abgeschlossen.
Ab jetzt werde ich nur noch den JavaScript-Code hinschreiben und lasse die script-Tags und die anderen einfachen Html-Tags weg.
Nun will man nicht immer Text in einem alert Fenster ausgeben, da das Besucher abschreckt:
document.write ("Ein ganz normaler Text!");
document ist immer die aktuelle Seite.Und wenn man auf dieser Seite write aufruft wird logischerweise ein Text ausgegeben.
Nun werde ich einfach den Text vom Php Tutorial, nur mit anderen Codebeispielen, hier rein kopieren.
Nun kommen wir auch schon zu sogenannten Variablen.
Diese kann man sich wie eine Schublade mit Inhalt vorstellen, auf der außen ein passender Bezeichner, wie z.B.: Schuhe steht.
Wieder ein Codebeispiel:
<html>
<head>
<title>
</title>
</head>
<body>
<script type="text/javascript">
var text = "Das hier ist einText!";
alert (text);
var lieblingszahl = 7;
alert ("Meine Lieblingszahl ist " + lieblingszahl);
lieblingszahl = 10;
alert ("Jetzt ist sie "+lieblingszahl);
</script>
</body>
</html>
Die "Bezeichner der Schubladen" sind hier text und lieblingszahl.<head>
<title>
</title>
</head>
<body>
<script type="text/javascript">
var text = "Das hier ist einText!";
alert (text);
var lieblingszahl = 7;
alert ("Meine Lieblingszahl ist " + lieblingszahl);
lieblingszahl = 10;
alert ("Jetzt ist sie "+lieblingszahl);
</script>
</body>
</html>
Wir sehen also schon, dass Variablen verschiedene Datentypen aufnehmen können.
Also z.B.: Nummern und Texte.
Wenn man eine Variable initialisiert ("macht") stellt man zuerst das var vor den Bezeichener.
Wenn man eine Variable überscheibt, wie wir es hier machen:
lieblingszahl = 10;
brauchen wir das var nicht mehr.
Mit dem Zuweisungsoperator = wird dem "Schubladenbezeichner" dann ein Inhalt zugewiesen.
Die Variablen geben wir dann alle in einem kleinen Fenster aus.
Wenn man Text und Variablen ausgeben will macht man das mit dem "Verkettungsoperator" +.
Dieser hängt dann die Variable an den Text.
Bei Variablen und Zahlen werden aber keine " gebraucht, da kein Text ausgegeben werden soll.
Was vielleicht auch noch wichtig zu wissen ist, dass man in JavaScript den Typ der Variable nicht angeben muss.
Nun zu den Kontrollstrukturen.
Als erstes wieder die einfache if-else Anweisung.
<html>
<head>
</head>
<body>
<script type="text/javascript">
var zahl = 7;
if (zahl >= 10) {
document.write("Eine mehrstellige Zahl");
} else if (zahl < 10) {
document.write("Eine einstellige Zahl");
} else {
document.write("<font color=red>Ein Fehler ist aufgetreten</font>");
}
</script>
</body>
</html>
Es wird zuerst eine Variable mit der Zahl 7 definiert.<head>
</head>
<body>
<script type="text/javascript">
var zahl = 7;
if (zahl >= 10) {
document.write("Eine mehrstellige Zahl");
} else if (zahl < 10) {
document.write("Eine einstellige Zahl");
} else {
document.write("<font color=red>Ein Fehler ist aufgetreten</font>");
}
</script>
</body>
</html>
Dann kommt das if-Konstrukt.
Zuerst wird überprüft ob die Variable größer oder gleich 10 ist.
Wenn das der Fall wäre würde "Eine mehrstellige Zahl" ausgegeben werden.
Da die Anweisung auf die Variable nicht zutrifft wird der Block übersprungen und zur nächsten Bedinung gegangen.
Dort wird überprüft ob die Zahl kleiner als 10 ist.
Da diese Bedingung zutrifft wird "Eine einstellige Zahl" ausgegeben.
Wenn aber beide Bedinungen nicht zutreffen würden, würde das else-Konstrukt zum Zug kommen.
Das würde in roter Farbe "Ein Fehler ist aufgetreten" ausgeben.
Wie Sie sehen können Sie also auch Html-Tags in ein document.write-Konstrukt einbauen.
Sie können beim if-else Konstrukt so viele else if Anweisungen schreiben, wie sie möchten.
Am besten probieren Sie dieses Beispiel selber aus und geben bei der Variable einmal 11 und einmal "hallo" an.
Hier nun eine Tabelle mit den wichtigsten Operatoren:
| Operator | Beschreibung |
| == | gleich |
| < | kleiner |
| > | größer |
| <= | kleiner oder gleich |
| >= | größer oder gleich |
| != | ungleich |
Vielleicht fragen Sie sich wieso der gleich-Operator nicht so aussieht: =.
Das liegt daran, dass = schon der Zuweisungsoperator ist und so würden Sie nicht den Wert der Variablen vergleichen, sondern überschreiben.
Nun zu den Schleifen.
Mit Schleifen kann man die selben Anweisungen immer wieder ausführen.
Beginnen wir mit der for-Schleife:
<html>
<head>
</head>
<body>
<script type="text/javascript">
for (var i = 0;i <= 10;i++) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
}
</script>
</body>
</html>
<head>
</head>
<body>
<script type="text/javascript">
for (var i = 0;i <= 10;i++) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
}
</script>
</body>
</html>
Das Skript gibt folgendes aus:
Wir befinden uns bei Zahl Nummer 0
Wir befinden uns bei Zahl Nummer 1
Wir befinden uns bei Zahl Nummer 2
Wir befinden uns bei Zahl Nummer 3
Wir befinden uns bei Zahl Nummer 4
Wir befinden uns bei Zahl Nummer 5
Wir befinden uns bei Zahl Nummer 6
Wir befinden uns bei Zahl Nummer 7
Wir befinden uns bei Zahl Nummer 8
Wir befinden uns bei Zahl Nummer 9
Wir befinden uns bei Zahl Nummer 10
Mit var i = 0 wird also eine Zählervariable initialisiert.Wir befinden uns bei Zahl Nummer 1
Wir befinden uns bei Zahl Nummer 2
Wir befinden uns bei Zahl Nummer 3
Wir befinden uns bei Zahl Nummer 4
Wir befinden uns bei Zahl Nummer 5
Wir befinden uns bei Zahl Nummer 6
Wir befinden uns bei Zahl Nummer 7
Wir befinden uns bei Zahl Nummer 8
Wir befinden uns bei Zahl Nummer 9
Wir befinden uns bei Zahl Nummer 10
Es wird bei jedem Ablauf des Anweisungsblocks folgende Bedingung überprüft: i <= 10
Falls sie stimmt wird der Anweisungsblock in den geschweiften Klammern ein weiteres mal ausgeführt.
Die Zählervariable wird mit folgendem Konstrukt i++ nach jedem Ablauf inkrementiert (+1).
Es wird also einfach folgendes gerechnet:
i = i + 1;
Da das sehr lange ist und Programmierer nun mal schreibfaul sind schreibt man einfach i++.
Nun zu der while-Schleife:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var i = 0;
while (i <= 10) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
i++
}
</script>
</body>
</html>
Das Ergebnis sollte das gleiche sein.<head>
</head>
<body>
<script type="text/javascript">
var i = 0;
while (i <= 10) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
i++
}
</script>
</body>
</html>
Es ist genau das gleiche nur, dass man sich um die Zählervariable und das bearbeiten der Zählervariable am Schluss des Anweisungsblockes selber kümmern muss, was eine kleine Fehlerquelle darstellt.
Ich denke sonst erklärt sich das Beispiel schon von selbst.
Da, wie schon gesagt, nicht jeder JavaScript eingeschaltet hat, gibt es ein extra Html-tag dafür.
Das noscript-Tag.
Hier sieht man es in der Verwendung mit dem oberen Beispiel:
<html>
<head>
</head>
<body>
<noscript>
Sie müssen JavaScript einschalten um das beispiel sehen zu können!
</noscript>
<script type="text/javascript">
var i = 0;
while (i <= 10) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
i++
}
</script>
</body>
</html>
Mit aktiviertem JavaScript wird Ihnen nichts neues auffallen, aber wenn sie es aussschalten sehen sie den Text in den noscript-Tags.<head>
</head>
<body>
<noscript>
Sie müssen JavaScript einschalten um das beispiel sehen zu können!
</noscript>
<script type="text/javascript">
var i = 0;
while (i <= 10) {
document.write ("Wir befinden uns bei Zahl Nummer ");
document.write (i);
document.write ("<br />");
i++
}
</script>
</body>
</html>
Der Inhalt des Tags wird nämlich nur angezeigt wenn JavaScript ausgeschaltet ist.
Ich hoffe das Tutorial hat Ihnen gefallen.
Sie brauchen Hilfe?
Dann schreiben Sie mir hier.
Kommentar zu dieser Seite hinzufügen: