Photoshop
Cinema 4d
Fotografie
Weitere Grafiksoftware
HTML / CSS
JavaScript
Flash
PHP
Webserver
Sonstige
JavaScript Part II (JavaScript Tutorial)
Tutorial erstellt von Jatzia, letzte Änderung am 16.03.2008
JavaScript ermöglicht, wie viele andere Sprachen auch, die Verarbeitung von Informationen. Damit dies auch funktionieren kann, muss unsere Scriptsprache auch in der Lage sein, Daten zu speichern. Dies geschieht mit Hilfe von Variablen.
Doch einfaches Speichern von Daten innerhalb von Variablen wäre ja langweilig. Wir wollen mit unseren gespeicherten Daten ja auch arbeiten können. Damit dies funktioniert gibt es die so genannten Operatoren.
Variablen
Erklären wir den Nutzen von Variablen am Besten an dem Beispiel einer ganz normalen Matherechnung. So absurd es jetzt vielleicht auch sein mag, aber man kann mit JavaScript auch Matheaufgaben berechnen und dazu braucht man Variablen. Man stelle sich vor, wir wollen 5+8 rechnen. Also brauchen wir zwei Variablen, eine um die 5 zu speichern und eine weitere um die 8 zu speichern. Jeder Wert, also jede einzelne Information brauch somit auch eine eigene Variable.
Doch nun kommen wir dazu, wie man so eine Variable in JavaScript denn definiert. Hierzu schreiben wir als erstes das Wort „var“ welches in JavaScript eine Variablendeklaration einleitet und danach den Namen der Variable. Der Code für die Variablendeklaration unserer beiden Zahlen würde zum Beispiel so aussehen:
Code:
Sollte man viele Variablen benötigen, kann es auch von Vorteil sein, wenn man diese alle in einer Zeile deklarieren kann, um ewig viele Codezeilen sparen zu können. Die Variablen werden einfach hintereinander geschrieben und durch ein Komma voneinander getrennt. Der Code für eine derartige Variablendeklaration könnte in unserem Fall so aussehen:
Code:
Den ersten Schritt haben wir nun geschafft und unsere Variablen deklariert. Nun können wir auf diese über den Variablennamen zugreifen und sie benutzen. Doch bevor wir unsere Rechnung ausführen können, müssen wir unseren deklarierten Variablen erst einmal unsere Zahlenwerte zuweisen, sie also initialisieren. Der Code dafür könnte insgesamt dann so aussehen:
Code:
Weiß man zu Beginn der Deklaration bereits, welchen Informationen bzw. Startwert die Variablen haben sollen, so können wir diese auch direkt bei der Deklaration schon initialisieren. Das Ganze würde dann so aussehen:
Code:
Doch natürlich können wir in unsere Variablen auch andere Dinge außer Zahlen speichern. JavaScript ermöglicht auch das Speichern von Wörtern oder ganzen Sätzen bzw. Zeichenketten. Während wir Zahlen direkt nach dem Gleichzeichen einfach angeben können, so müssen wir Wörter, Zeichenketten etc. jedoch in Hochkommas oder Anführungszeichen setzen. Sollte man eine Zahl in Anführungszeichen setzen, so erkennt JavaScript diese jedoch nicht als Zahl, sondern als Zeichenkette. Das Rechnen mit dieser Variable ist dann nicht möglich. Eine Textinitialisierung in JavaScript könnte also so aussehen:
Code:
Zeichenketten bezeichnet man in JavaScript, wie auch in vielen anderen Sprachen als String. Doch neben den Zahlen und Strings gibt es noch einen Datentyp, den wir hier verwenden können: Bool. Dieser Datentyp speichert so genannte Wahrheitswerte. Hier kann man nur zwei verschiedene Werte speichern: true oder false. Sie werden wie die Zahlen auch ohne Anführungszeichen oder Hochkommas definiert, da sie ansonsten ja eine Zeichenkette wären. Boolsche Werte können zum Beispiel zu Überprüfungen genutzt werden. Mehe dazu jedoch ein anderes Mal. Eine Initialisierung von boolschen Datentypen könnte so aussehen:
Code:
Operatoren
Nun aber genug zu Variablen, beschäftigen wir uns nun mit Operatoren, damit wir unsere Rechnung auch wirklich zu Ende führen können. Während Variablen dazu da sind, um Informationen zu speichern, so bieten Operatoren die Möglichkeit, Variablen miteinander zu verknüpfen. Wie ihr euch sicher schon denken könnt, gehören die Rechenoperatoren wie +, -, * und / natürlich auch dazu. Im Folgenden will ich euch ein paar der wichtigsten Operatoren vorstellen:
Arithmetische Operatoren (Arbeiten mit Zahlen):
+ Addiert eine Zahl zu einer anderen c = a + b;
- Subtrahiert eine Zahl von einer anderen c = a – b;
* Multipliziert eine Zahl mit einer zweiten c = a * b;
/ Dividiert die erste durch die zweite Zahl c = a / b;
++ Addiert zu einer Zahl 1 hinzu a++;
-- Subtrahiert 1 von einer Zahl a--;
% Dividiert zwei Zahlen durcheinander und gibt den Rest zurück c = a % b;
String-Operatoren:
+ Fügt zwei Zeichenketten zusammen c = a + b;
+= Fügt einer Zeichenkette einen weiteren String hinzu a += b;
Logische Operatoren (Für Bedingungen):
== Überprüft, ob z.B. zwei Werte gleich sind a == b;
!= Überprüft, ob z.B. zwei Werte ungleich sind a != b;
< Überprüft, ob die erste Aussage kleiner ist als die zweite a < b;
> Überprüft, ob die zweite Aussage kleiner ist als die erste a > b;
<= Überprüft, ob die erste Aussage kleiner oder gleich der zweiten ist a <= b;
>= Überprüft, ob die zweite Aussage kleiner oder gleich der ersten ist a >= b;
&& Verbindet zwei Aussagen mit einem UND a == b && c == d;
|| Verbindet zwei Aussagen mit einem ODER a <= b || a <= c;
! Negiert eine Aussage mit NICHT !(a == b);
So, das soll es erst einmal gewesen sein mit den Operatoren-Vorstellungen. Nun ein paar Anwendungsbeispiele, damit ihr seht, wie der Quellcode aussehen könnte:
Code:
Wie man Bedingungen und deren Abfragen in JavaScript erstellt, werden wir in einem anderen Tutorial behandeln. Ich hoffe, ich konnte euch ein wenig weiterhelfen.
Liebe Grüße
Tina
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Doch einfaches Speichern von Daten innerhalb von Variablen wäre ja langweilig. Wir wollen mit unseren gespeicherten Daten ja auch arbeiten können. Damit dies funktioniert gibt es die so genannten Operatoren.
Variablen
Erklären wir den Nutzen von Variablen am Besten an dem Beispiel einer ganz normalen Matherechnung. So absurd es jetzt vielleicht auch sein mag, aber man kann mit JavaScript auch Matheaufgaben berechnen und dazu braucht man Variablen. Man stelle sich vor, wir wollen 5+8 rechnen. Also brauchen wir zwei Variablen, eine um die 5 zu speichern und eine weitere um die 8 zu speichern. Jeder Wert, also jede einzelne Information brauch somit auch eine eigene Variable.
Doch nun kommen wir dazu, wie man so eine Variable in JavaScript denn definiert. Hierzu schreiben wir als erstes das Wort „var“ welches in JavaScript eine Variablendeklaration einleitet und danach den Namen der Variable. Der Code für die Variablendeklaration unserer beiden Zahlen würde zum Beispiel so aussehen:
Code:
<script language="JavaScript">
var rechenvariable1 ;
var rechenvariable2 ;
var ergebnis ;
</script>
var rechenvariable1 ;
var rechenvariable2 ;
var ergebnis ;
</script>
Sollte man viele Variablen benötigen, kann es auch von Vorteil sein, wenn man diese alle in einer Zeile deklarieren kann, um ewig viele Codezeilen sparen zu können. Die Variablen werden einfach hintereinander geschrieben und durch ein Komma voneinander getrennt. Der Code für eine derartige Variablendeklaration könnte in unserem Fall so aussehen:
Code:
<script language="JavaScript">
var rechenvariable1, rechenvariable2, ergebnis;
</script>
var rechenvariable1, rechenvariable2, ergebnis;
</script>
Den ersten Schritt haben wir nun geschafft und unsere Variablen deklariert. Nun können wir auf diese über den Variablennamen zugreifen und sie benutzen. Doch bevor wir unsere Rechnung ausführen können, müssen wir unseren deklarierten Variablen erst einmal unsere Zahlenwerte zuweisen, sie also initialisieren. Der Code dafür könnte insgesamt dann so aussehen:
Code:
<script language="JavaScript">
var rechenvariable1, rechenvariable2, ergebnis;
rechenvariable1 = 5;
rechenvariable2 = 8;
</script>
var rechenvariable1, rechenvariable2, ergebnis;
rechenvariable1 = 5;
rechenvariable2 = 8;
</script>
Weiß man zu Beginn der Deklaration bereits, welchen Informationen bzw. Startwert die Variablen haben sollen, so können wir diese auch direkt bei der Deklaration schon initialisieren. Das Ganze würde dann so aussehen:
Code:
<script language="JavaScript">
var rechenvariable1 = 5, rechenvariable2 = 8, ergebnis;
</script>
var rechenvariable1 = 5, rechenvariable2 = 8, ergebnis;
</script>
Doch natürlich können wir in unsere Variablen auch andere Dinge außer Zahlen speichern. JavaScript ermöglicht auch das Speichern von Wörtern oder ganzen Sätzen bzw. Zeichenketten. Während wir Zahlen direkt nach dem Gleichzeichen einfach angeben können, so müssen wir Wörter, Zeichenketten etc. jedoch in Hochkommas oder Anführungszeichen setzen. Sollte man eine Zahl in Anführungszeichen setzen, so erkennt JavaScript diese jedoch nicht als Zahl, sondern als Zeichenkette. Das Rechnen mit dieser Variable ist dann nicht möglich. Eine Textinitialisierung in JavaScript könnte also so aussehen:
Code:
<script language="JavaScript">
var wort, text;
wort = „Hallo“;
text = „Wie geht es dir?“;
</script>
var wort, text;
wort = „Hallo“;
text = „Wie geht es dir?“;
</script>
Zeichenketten bezeichnet man in JavaScript, wie auch in vielen anderen Sprachen als String. Doch neben den Zahlen und Strings gibt es noch einen Datentyp, den wir hier verwenden können: Bool. Dieser Datentyp speichert so genannte Wahrheitswerte. Hier kann man nur zwei verschiedene Werte speichern: true oder false. Sie werden wie die Zahlen auch ohne Anführungszeichen oder Hochkommas definiert, da sie ansonsten ja eine Zeichenkette wären. Boolsche Werte können zum Beispiel zu Überprüfungen genutzt werden. Mehe dazu jedoch ein anderes Mal. Eine Initialisierung von boolschen Datentypen könnte so aussehen:
Code:
<script language="JavaScript">
var test1, test2;
test1 = true;
test2 = false;
</script>
var test1, test2;
test1 = true;
test2 = false;
</script>
Operatoren
Nun aber genug zu Variablen, beschäftigen wir uns nun mit Operatoren, damit wir unsere Rechnung auch wirklich zu Ende führen können. Während Variablen dazu da sind, um Informationen zu speichern, so bieten Operatoren die Möglichkeit, Variablen miteinander zu verknüpfen. Wie ihr euch sicher schon denken könnt, gehören die Rechenoperatoren wie +, -, * und / natürlich auch dazu. Im Folgenden will ich euch ein paar der wichtigsten Operatoren vorstellen:
Arithmetische Operatoren (Arbeiten mit Zahlen):
+ Addiert eine Zahl zu einer anderen c = a + b;
- Subtrahiert eine Zahl von einer anderen c = a – b;
* Multipliziert eine Zahl mit einer zweiten c = a * b;
/ Dividiert die erste durch die zweite Zahl c = a / b;
++ Addiert zu einer Zahl 1 hinzu a++;
-- Subtrahiert 1 von einer Zahl a--;
% Dividiert zwei Zahlen durcheinander und gibt den Rest zurück c = a % b;
String-Operatoren:
+ Fügt zwei Zeichenketten zusammen c = a + b;
+= Fügt einer Zeichenkette einen weiteren String hinzu a += b;
Logische Operatoren (Für Bedingungen):
== Überprüft, ob z.B. zwei Werte gleich sind a == b;
!= Überprüft, ob z.B. zwei Werte ungleich sind a != b;
< Überprüft, ob die erste Aussage kleiner ist als die zweite a < b;
> Überprüft, ob die zweite Aussage kleiner ist als die erste a > b;
<= Überprüft, ob die erste Aussage kleiner oder gleich der zweiten ist a <= b;
>= Überprüft, ob die zweite Aussage kleiner oder gleich der ersten ist a >= b;
&& Verbindet zwei Aussagen mit einem UND a == b && c == d;
|| Verbindet zwei Aussagen mit einem ODER a <= b || a <= c;
! Negiert eine Aussage mit NICHT !(a == b);
So, das soll es erst einmal gewesen sein mit den Operatoren-Vorstellungen. Nun ein paar Anwendungsbeispiele, damit ihr seht, wie der Quellcode aussehen könnte:
Code:
<script language="JavaScript">
var rechenvariable1 = 5, rechenvariable2 = 8, ergebnis;
ergebnis = rechenvariable1 + rechenvariable2; //Ergebnis hat nun den Wert 13
ergebnis = rechenvariable2 – rechenvariable1; //Ergebnis hat nun den Wert 3
ergebnis = rechenvariable1 % rechenvariable2; //Ergebnis hat nun den Wert 5
</script>
var rechenvariable1 = 5, rechenvariable2 = 8, ergebnis;
ergebnis = rechenvariable1 + rechenvariable2; //Ergebnis hat nun den Wert 13
ergebnis = rechenvariable2 – rechenvariable1; //Ergebnis hat nun den Wert 3
ergebnis = rechenvariable1 % rechenvariable2; //Ergebnis hat nun den Wert 5
</script>
Wie man Bedingungen und deren Abfragen in JavaScript erstellt, werden wir in einem anderen Tutorial behandeln. Ich hoffe, ich konnte euch ein wenig weiterhelfen.
Liebe Grüße
Tina
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!