BSI: JavaScript für Fortgeschrittene
Kölsch of the Week!
Inhaltsangabe:
- Funktionen
- JavaScript-Objekte
- Variablen und Parameter
- Variablen und Bedingungen
- Formulare
- Selektoren
- Bedingte Anweisungen
- Schleifen
- Arrays
Funktionen
Beispiel 4: Funktion mit Parametern
<head>
<meta charset="UTF-8">
<title>Beispiel 4</title>
<script type="text/javascript">
function rechne(zahl1,zahl2) {
var ergebnis;
ergebnis = zahl1 + zahl2;
alert(ergebnis);
}
</script>
</head>
<body>
<img alt="ein Bild" src="einBild.png" onclick="rechne(3,12)">
</body>
Beispiel 5: Funktion mit Parametern (2)
<head>
<meta charset="UTF-8">
<title>Beispiel 5</title>
<script type="text/javascript">
function Sinn(Parameter) {
var SinnDesLebens = Parameter * 2;
alert("Ausgabe: " + SinnDesLebens);
}
</script>
</head>
<body>
<img alt="ein Bild" src="img/Rechnen.jpg" onclick="Sinn(21)">
</body>
Beispiel 6: Funktion mit Input-Feldern
<head>
<meta charset="UTF-8">
<title>Beispiel 6</title>
<script type="text/javascript">
function rechne() {
var zahl1 = parseInt(document.getElementById("zahl1").value);
var zahl2 = parseInt(document.getElementById("zahl2").value);
var ergebnis;
ergebnis = zahl1 + zahl2;
//Hier gehört eine geeignete Ausgabeform rein
}
</script>
</head>
<body>
<label for="zahl1">Zahl 1: </label>
<input id="zahl1" type="text" value="">
<label for="zahl2">Zahl 2: </label>
<input id="zahl2" type="text" value="">
<button type="button" onclick="rechne()">Rechne!</button>
</body>
Beispiel 7: Funktion innerhalb einer Funktion aufrufen
<head>
<title>Beispiel 7</title>
<script type="text/javascript">
function quadrat( zahl ) {
if(zahl<1000){
var square=zahl*zahl;
alert("Das Quadrat der von Ihnen gewaehlten Zahl ("+zahl+") ist "+square+"!");
}
else{
alert("Die von Ihnen gewaehlte Zahl war zu gross!");
}
}
function eingabe() {
var meineZahl = prompt("Geben Sie eine Zahl ein!");
quadrat(meineZahl);
}
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="eingabe()">
</body>
Weitere Grundlagen zu Funktionen in Javascript werden hier ausführlich beschrieben.
Einführung in JavaScript-Objekte
Ein Objekt ist in diesem Kontext die Summe aus Variablen (Eigenschaften) und Funktionen (Methoden) innerhalb eines fest umgrenzten Datenelements. Man kann sich ein Objekt wie im echten Leben als einen Gegenstand (z.B. ein Auto) vorstellen, der Eigenschaften (Gewicht, Hubraum, maximale Geschwindigkeit) und Methoden (Fahren, Bremsen, Hupen) hat.
Objekte innerhalb von JavaScript sind häufig vordefiniert, es können aber auch eigene Objekte definiert werden.
In JavaScript gibt es viele verschiedene vordefinierte Objekte, die Methoden zur Benutzung bereitstellen. Unter dem Objekt document versteht man das das JavaScript aufrufende Dokument (z.B. die HTML-Seite). Das Objekt document besitzt diverse Methoden zur Analyse und Manipulation.
Ein Beispiel ist die Methode getElementById(), welche ein HTML Element mit einer bestimmten "id" zurückliefert. Davon zu trennen sind die Eigenschaften des Objekts document. Ein sehr anschauliches Beispiel für eine Eigenschaft ist bgColor (Hintergrundfarbe des Dokuments).
Man kann man auf die Variable bgColor folgendermaßen zugreifen:
document.bgColor = "color";
sollte die Hintergrundfarbe des Dokumentes bereits mittels CSS gesetzt sein, funktioniert dieser Zugriff nicht. CSS ist vorrangiger. Hier muss man konkreter werden:
document.body.style.backgroundColor='Farbe';
An diesem Beispiel lässt sich erkennen, dass direkt auf das DOM zugegriffen wird. body ist ein von document abgeleitetes Objekt. style ein wiederum von body abgeleitetes Objekt. backgroundColor ist eine Eigenschaft von style. Die Variable bgColor bzw. backgroundColor wird hier mit einem beliebigen Farbwert (z.B. red, blue oder #FFFFFF) gefüllt.
Variablen und Parameter
Variablen
var Ausgabe = "Der Sinn des Lebens: ";
Der Befehl var deklariert die Variable 'Ausgabe', der mittels des Operators '=' die Zeichenkette "Der Sinn des Lebens: " zugeordnet wird. Ein Semikolon kennzeichnet das Ende des Befehls.
var UnsinnDesLebens = 21;
Der Befehl var deklariert die Variable 'UnsinnDesLebens', der mittels des Operators '=' der (numerische Wert) 21 zugeordnet wird. Ein Semikolon kennzeichnet das Ende des Befehls. Werte können so zwischengespeichert, verarbeitet oder ausgegeben werden. Rechenoperationen mit Variablen sind möglich:
var Ausgabe = "Der Sinn des Lebens: ";
var UnsinnDesLebens = 21;
var SinnDesLebens = UnsinnDesLebens * 2;
alert(Ausgabe+SinnDesLebens);
Parameter
Parameter sind Werte, die an eine Funktion übergeben werden, in der sie dann weiterverarbeitet werden:
var Ausgabe = "Der Sinn des Lebens: ";
function Sinn(Parameter) {
var SinnDesLebens = Parameter * 2;
alert(Ausgabe+SinnDesLebens);
}
Sinn(21);
alert(SinnDesLebens); // FEHLER
In Zeile 1 wird die Variable Ausgabe gesetzt. In Zeile 3 wird die Funktion Sinn mit dem Parameter Parameter deklariert. Zeilen 4 und 5 definieren die Aufgabe der Funktion. In Zeile 8 wird die Funktion Sinn aufgerufen mit der Parameterübergabe 21 aufgerufen und ausgeführt.
Achtung: Zeile 9 produziert einen Fehler! Die Variable Sinn des Lebens ist nicht global deklariert, sondern "lebt" nur in der Funktion Sinn(Parameter). In diesem Kontext (Scope) kann also nicht auf sie zugegriffen werden. Umgekehrt kann in der Funktion auf die global deklarierte Variable Ausgabe zugegriffen werden.
Douglas Adams
Der Sinn des Lebens - Erfahren Sie hier mehr über Douglas Adams und "die Antwort".
Variablen und Bedingungen (Beispiel Quadratwurzel)
Quellcode
<!DOCTYPE html>
<html>
<head>
<title>Titel der Seite</title>
<script type="text/javascript">
function quadrat( zahl ){
if(zahl<1000){
var square=zahl*zahl;
alert("Das Quadrat der von Ihnen gewaehlten Zahl ("+zahl+") ist "+square+"!");
}
else{
alert("Die von Ihnen gewaehlte Zahl war zu gross!");
}
}
function eingabe(){
var meineZahl = prompt("Geben Sie eine Zahl ein!");
quadrat(meineZahl);
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Click me!" onclick="eingabe()">
</form>
</body>
</html>
JavaScript: function eingabe()
Die Funktion eingabe()definiert zunächst eine Variable (var meineZahl) und initialisiert diese mit einer Eingabe des Benutzers (über das schon bekannte Dialogfenster prompt()). Nachdem der Benutzer also seine Zahl eingegeben hat, steht sie in der Variable meineZahl zur Verfügung. In der zweiten Zeile wird diese Variable dann der Funktion (function) quadrat(zahl)übergeben, indem sie zwischen die Klammern geschrieben wird. An diesem Punkt der Funktion eingabe() wird die Funktion quadrat(zahl)aufgerufen.
JavaScript: function quadrat(zahl);
Als erstes erwartet die Funktion quadrat(zahl)ein Argument (den Wert einer Variablen). Dieser Wert ist genau der, der zuvor in der Funktion eingabe() übergeben wurde. In der ersten Zeile prüft die Funktion zunächst, ob der eingegebene Wert kleiner ist als 1000. Wenn die Bedingung erfüllt ist, wird der if-Block abgearbeitet. Ist die Zahl größer als 1000, springt die Funktion direkt in den else-Block und schickt eine Meldung an den Benutzer, das die Eingabe ungültig war. Im if-Block wird die eigentliche Berechnung durchgeführt, indem eine neue Variable (square) mit dem Ergebnis der Berechnung zahl*zahl initialisiert wird. Wurde also bei der Eingabe z.B. die Zahl 15 eingegeben, stände an dieser Stelle: Der Wert der Variable square wäre in diesem Fall 255. In der zweiten Zeile des if-Blocks wird das Ergebnis schließlich in einem alert()-Dialog ausgegeben. Zu beachten ist hier, das die Variablen vom Rest der Zeichenkette durch "+variable+" getrennt werden müssen.
Hinweis
In JavaScript gibt es nicht die Möglichkeit, eine Variable mit einem festen Datentyp wie integer oder string zu initialisieren. Daher ist es bei der vorliegenden Funktion auch möglich, ein normales Wort einzugeben und es berechnen zu lassen. Bei weiter entwickelten Scripts werden die Werte der Variablen zur Sicherheit überprüft.
Formulare in HTML 5
Im Rahmen des Seminars ist bisher eine statische Website entstanden, die zwar Informationen anbietet, aber keine wirkliche Interaktion zulässt. Die einfachste Möglichkeit, Interaktivität zu schaffen, ist der Einsatz von Formularen.
Aufbau eines Formulars
Ähnlich wie bei Tabellen gibt es auch für Formulare ein Hauptelement (<form>). In diesem Element wird das grundsätzliche Verhalten des Formulars definiert. Außerdem dient es als eine Art Container für verschiedene Typen von Eingabefeldern wie Radiobuttons oder Checkboxen, aber auch Pulldown-Menüs und normale Eingabefelder für Text. Innerhalb eines <form> Elements dürfen allerdings auch die meisten anderen HTML-Elemente vorkommen. In dem action=""Attribut wird das Ziel definiert, an das die in das Formular eingegebenen Daten versendet werden sollen. Meistens ist das ein Script (PHP, Perl), welches die Formulardaten direkt auswerten kann.
Das Element <form>
<form
action="http://lehre.hki.uni-koeln.de/wieland/formBack.php"
method="get"
accept-charset="UTF-8">
...
</form>
Das Element <form> beinhaltet weitere Elemente, die die eigentlichen Eingabefelder und -methoden definieren. Alles was innerhalb des Elements steht gehört zu einem Formular.
Elementare Attribute von <form> sind action, method und accept-charset.
| action |
deklariert die Server-Adresse, an die die eingegebenen Inhalte des Formulars gesendet werden sollen. |
| method |
deklariert die Methode, mit der die eingegebenen Inhalte des Formulars an den empfangenden Server gesendet werden sollen. get Vorteil: Kommunikation kann in der Adressleiste des Browsers beobachtet werden. post Vorteil: Eine größere Datenmenge kann versendet werden. |
| accept-charset | deklariert das Text-Encoding. Wie immer: UTF-8 ist zu bevorzugen. |
Eingabe-Elemente
Einzeilige Eingabebereiche
<input
name="nachname"
id="nachname"
type="text"
maxlength="50"
value="hier Nachnamen eingeben">
Ergebnis
| name | deklariert, mit welchem Bezeichner der eingegebene Wert an den Server übertragen wird. Beispiel: Bezeichner: nachname; Wert: Kurz |
| id |
Wie bekannt. Kann den selben Wert wie name haben, darf auf einer Seite aber nur einmal vorkommen! |
| type | deklariert, welcher Art der eingegebene Inhalt ist. Der Wert "password" beispielsweise würde den eingegebenen Text durch **** anzeigen. Eine gute Übersicht über in HTML5 erlaubte Werte finden Sie bei w3schools. Achtung: Nicht alle Browser unterstützen bereits alle neuen Types. Chrome und Opera bieten derzeit die breiteste Unterstützung für HTML5-Formulare. |
| max length |
deklariert die maximal erlaubte Zeichenzahl. Verwendung ist optional. |
| value |
deklariert den Vorgabewert. Verwendung ist optional. |
Label für Eingabebereiche
<label for="vorname"> Vorname: </label>
<input
name="vorname"
id="vorname"
type="text">
Ergebnis
Das Element <label> beschreibt die Beschriftung der Eingabefelder. Das Attribut for enthält die ID (nicht den name) desjenigen Eingabefeldes, auf das sich label bezieht.
Hinweis
form-Elemente sind inline-Elemente. D.h. sie verursachen keinen Zeilenumbruch. Eine legitime Möglichkeit einen Zeilenumbruch zu erzeugen ist hier: <br>. Eleganter ist es aber, den entsprechenden Elementen in CSS die Eigenschaft display:block; zu geben.
Mehrzeilige Eingabebereiche
<textarea
name="nachricht"
id="nachricht"
rows="10"
cols="50"
required>
Hier kann ein langer Text eingegeben werden.
</textarea>
Ergebnis
| rows |
deklariert die Höhe des Textfeldes in Zeilen. |
| cols |
deklariert die Breite des Textfeldes in Zeichen. |
| required | ein alleinstehendes Attribut. Wenn es gesetzt ist, muss das Feld vor dem Absenden ausgefüllt sein. |
Radio-Buttons
<input
type="radio"
id="anredeHerr"
name="anrede"
value="M">
<label for="anredeHerr">Herr</label>
<input
type="radio"
id="anredeFrau"
name="anrede"
value="F">
<label for="anredeFrau">Frau</label>
Ergebnis
Hinweise
Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird.
Auswahllisten
<label for="farbe">Was ist Ihre Lieblingsfarbe?</label>
<br>
<select id="farbe" name="farbe" required>
<option value="">bitte auswählen</option>
<option value="ff0000">rot</option>
<option value="00ff00">grün</option>
<option value="0000ff">blau</option>
</select>
Ergebnis
Checkboxen
<label>Kreuzen Sie alle Haustiere an</label>
<br>
<input
type="checkbox"
id="haustier1"
name="haustier"
value="zebra"
checked>
<label for="haustier1">Zebra</label>
<input
type="checkbox"
id="haustier2"
name="haustier"
value="hund">
<label for="haustier2">Hund</label>
<input
type="checkbox"
id="haustier3"
name="haustier"
value="katze">
<label for="haustier3">Katze</label>
<input
type="checkbox"
id="haustier4"
name="haustier"
value="maus">
<label for="haustier4">Maus</label>
Ergebnis
Hinweise
Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird. An den empfangenden Server werden mehrere, einer oder kein Wert für den Bezeichner (hier: haustier) übergeben.
Pflichtangaben
<label for="bname">Benutzername</label>
<input id="bname" size="30" maxlength="30" required>
<label for="passwd">Passwort</label>
<input type="password" id="passwd" size="30" maxlength="40" required>
Durch die Angabe von required kann der Benutzer zum Ausfüllen bestimmter Felder gezwungen werden. Sollte versucht werden, das Formular vorzeitig zu versenden, wird das entsprechende Formularfeld durch eine browserinterne Fehlermeldung hervorgehoben.
Der Submit-Button
Ein Formular will nicht nur ausgefüllt werden - die Inhalten würden dann ja nur in Ihrem Browser stehen und nirgends ankommen - es soll auch abgeschickt werden können:
<form
action="about:blank"
method="get"
accept-charset="UTF-8">
<label for="einText">Geben Sie irgendeinen Text ein:</label>
<input
id="einText"
name="einText"
type="text">
<input type="submit" value="absenden">
</form>
Ergebnis
Durch Auslösen des Submit-Buttons werden alle im Formular ausgefüllten bzw. ausgewählten Werte (bzw. values) mit deren jeweiligen Bezeichner an den im form-tag deklarierten empfangenden Server gesendet.
Schaltflächen - allgemein
Schaltflächen bzw. Button können zur Auslösung einer Aktion jedweder Art genutzt werden:
<input type ="button" value="Los" onclick="los();">
Ergebnis
<input height="100" src="button.png" type="image" width="200">
Ergebnis
Mit dem Tag <button> ist es ebenfalls möglich einen individuell gestaltbaren Button zu definieren:
<button><img src="tutButton.png" alt="Button" ></button>
Strukturierung des Formulars
<form
action="http://lehre.hki.uni-koeln.de/wieland/formBack.php"
method="get"
accept-charset="UTF-8">
<fieldset class="ersterBereich">
<label for="vorname"> Vorname: </label>
<input
name="vorname"
id="vorname"
type="text">
<label for="nachname"> Nachname: </label>
<input
name="nachname"
id="nachname"
type="text">
</fieldset>
<p>Erklärender Text zum Formular oder auch ein nettes Bild.</p>
<fieldset class="zweiterBereich">
...
</fieldset>
<p>Erklärender Text zum Formular oder auch ein nettes Bild.</p>
<fieldset class="dritterBereich">
...
</fieldset>
</form>
Selektoren
getElementByID()
Selektiert ein Element des DOM anhand dessen ID
Beispiel:
HTML:
...
<body>
<h1>Weihnachtslieder</h1>
<article>
<section id="lied1" onclick="zeigeInhalt();">
Weihnachtsbäckerei: </br>
In der Weihnachtsbäckerei</br>
gibt es manche Leckerei</br>
Zwischen Mehl und Milch</br>
macht so mancher Knilch</br>
eine riesengroße Kleckerei.</br>
In der Weihnachtsbäckerei</br>
In der Weihnachtsbäckerei
</section>
</br>
<section id="plaetzchen">
Du kriegst natürlich was von den Plätzchen...
</section>
</br>
<section id="lied2" onclick="translates();">
O Tannenbaum, o Tannenbaum,</br>
wie treu sind deine Blätter!</br>
Du grünst nicht nur zur Sommerzeit,</br>
nein, auch im Winter, wenn es schneit.</br>
O Tannenbaum, o Tannenbaum,</br>
wie treu sind deine Blätter!
</section>
</article>
</body>
...
Javascript:
function zeigeInhalt(){
var Inhalt = document.getElementById("plaetzchen");
alert(Inhalt.innerHTML);
}
Bei Klick in den section-Block wird die parameterlose Funktion zeigeInhalt() aufgerufen.
Es wird in die Variable Inhalt der Inhalt des Knotens mit der ID "lied1" eingelesen.
Somit wird dann der Text, der in diesem Knoten ist, im alert angezeigt. Dazu wird die Methode innerHTML verwendet.
innerHTML
innerHTML liest den Inhalt des Elements als Text und ändert den Inhalt als Text. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert.
Beispiel:
Javascript:
function translates() {
var translation = document.getElementById('lied2');
translation.innerHTML = 'O Christmas tree o Christmas tree, How loyal are your
leaves/needles! You re green not only in the summertime, No, also in winter when it snows.';
}
getElementsByName()
- Da das Attribut name für die meisten Elemente als deprecated gilt, wird dieser Selektor nur noch in Verbindung mit Formularen verwendet.
- Es werden ALLE Elemente, die ein Attribut name mit dem Inhalt des Parameters haben, selektiert und in ein Array geschrieben.
- ACHTUNG: getElementsByName() und getElementByID()!
Beispiel:
Javascript:
var alleBlumen = new Array(document.getElementsByName('blume'));
alert(alleBlumen[0].value); //Rosen
alert(alleBlumen[1].value); //Tulpen
alert(alleBlumen.length); // 2? 3?
HTML:
...
<body>
<form>
<input type="text" name="blume" id="blumen1" value="Rosen">
<input type="text" name="blume" id="blumen2" value="Tulpen">
<input type="text" name="blume" id="blumen3" value="Nelken">
<input type="submit" value="Check" onclick="blumen()"><br>
</form>
</body>
...
Tipp:
Es handelt sich hier um Eingabefelder!
Der Wert des "value"-Attributes kann also verändert werden. Javascript gibt das zurück, was gerade im Eingabefeld steht; Unabhängig vom Vorgabewert value.
Bedingte Anweisungen: if-else / switch
if-else
Syntax:
if (BEDINGUNG) {
Javascript-Code, der ausgeführt wird,
wenn BEDINGUNG wahr ist.
} else {
Javascript-Code, der ausgeführt wird,
wenn BEDINGUNG falsch ist. (*optional*)
}
function Geheim () {
var Passwort = "TheSeminarFormerlyKnownAsHKI";
var Eingabe = window.prompt("Bitte geben Sie das Passwort ein", "");
if (Eingabe != Passwort) {
alert("Falsches Passwort!");
} else {
location.href = "geheim.htm"; //Umleitung auf die "geheime" Seite
}
}
Erklärung:
Im Beispiel fordert ein Dialogfenster (window.prompt()) den Anwender auf, ein Passwort einzugeben. Der Rückgabewert, das eingegebene Passwort, wird in der Variablen Eingabe gespeichert. Mit if (Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert TheSeminarFormerlyKnownAsHKI.
Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit location.href eine andere Seite aufgerufen, nämlich die "geheime" Seite.
Vergleichsoperatoren
var SinnDesLebens = 42;
var Alter = 8;
if (SinnDesLebens == 42)
alert(1);
if (SinnDesLebens != 42)
alert(0);
if (SinnDesLebens > 42)
alert(0);
if (SinnDesLebens < 42)
alert(0);
if (Alter >= 18)
alert("SIE duerfen das hier sehen!");
if (Alter <= 17)
alert("Du darfst das hier NICHT sehen!");
Logische Operatoren
- && verknüpft zwei oder mehrere Bedinungen durch UND: Alle Bedingungen müssen wahr sein.
- || verknüpft zwei oder mehrere Bedinungen durch inklusiv durch ODER: EINE Bedingung muss wahr sein.
- ! bezieht sich auf eine Bedingung. Ausgesprochen: NOT. Interpretiert eine wahre Bedingung als falsch und umgekehrt.
Beispiel:
var meinAlter = 23;
var sehrAengstlich = new Boolean(true); // Bool-Variablen: true oder false
if (meinAlter >=21 && meinAlter <= 75 && !sehrAengstlich) {
alert('okay... Sie halten das aus!');
}
switch
Beispiel:
HTML
<form action="#">
<input type="text" id="lieblingsfarbe">
</form>
<button onclick="Psycho();">PSYCHO</button>
JS
function Psycho() {
var Farbe = document.getElementById('lieblingsfarbe').value;
switch (Farbe) {
case "blau":
alert("Sie sind sehr bescheiden");
break;
case "rot":
alert("Sie sind sehr aktiv");
break;
case "gelb":
alert("Sie haben ein sonniges Gemüt");
break;
case "schwarz":
alert("Machen wir gleich noch einen Termin.");
location.href="terminvergabe.html";
break;
default:
alert("Das nennen Sie eine Farbe?");
break;
}
}
Schleifen: While() und For()
Eine Schleife ist eine Kontrollstruktur, um eine Anweisung automatisch wiederholt auszuführen.
while-Schleife:
while (condition) {
code block to be executed
}
In der while-Schleife wird ein Code-Block so lange wiederholt, bis die Bedingung nicht mehr gültig ist.
Beispiel:
while (i < 10) {
text += "The number is " + i;
i++;
}
Solange die Variable i kleiner als 10 ist, wird bei jedem Durchlauf
- der rechte Teil der Aussage ("The number is " + i;) in die Variable "text" gespeichert und zum bisherigen Inhalt hinzugefügt (Zeile 2)
- die Variable i um 1 erhöht (Zeile 3)
Ergebnis ist also dieses:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
for-Schleife:
for (statement 1; statement 2; statement 3) {
code block to be executed
}
In der for-Schleife wird ein Code-Block so lange wiederholt, bis die Abbruchbedingung erfüllt ist.
statement 1: Hier wird die Variable initialisiert, die innerhalb der Schleife genutzt wird, bevor die Schleife zum ersten Mal läuft. In der Regel wird dafür "i" verwendet (i wie iterator).
statement 2: Hier steht die Abbruchbedingung. Wenn sie erreicht ist, wird die Schleife beendet.
statement 3: Hier wird die initialisierte Variable nach jedem Schleifendurchgang erhöht.
Beispiel:
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
- Vor dem ersten Schleifendurchgang wird die Variable i auf 0 gesetzt.
- Wenn die Variable i kleiner ist als 5, wird die Zeile "The number is " + i + "<br>" zu dem bisherigen Inhalt der Variable text hinzugefügt.
- Variable i wird um 1 erhöht. Mit dem neuen Wert von i wird die Schleife erneut durchlaufen, solange er kleiner ist als 5.
Ergebnis ist dieses:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
Arrays
Arrays sind „Behälter“ für Ketten gleichartiger Variablen.
Beispiel
var Fibonacci = [0,1,1,2,3,5,8,13];
var Beatles = ["John", "Paul", "George", "Ringo"];
alert(Fibonacci[3]);
alert(Beatles[0]);
In Zeile 1 wird das Array Fibonacci deklariert mittels der Operatoren = und new. In das Array werden die (numerischen) Werte 0, 1, 1, 2, 3, 5, 8 und 13 in dieser Reihenfolge geschrieben.
In Zeile 2 wird das Array Beatles deklariert mittels der Operatoren = und new. In das Array werden die Zeichenketten „John“, „Paul“, „George“ und „Ringo“ geschrieben.Die Zählung der Position innerhalb eines Arrays beginnt bei Javascript bei 0.
In Zeile 4 wird also der 4. gesicherte Wert ausgegeben. Die Positon innerhalb des Arrays wird mittels eckiger Klammern bestimmt. Ausgabe hier: 2
In Zeile 5 wird der erste gesicherte Wert ausgegeben. Ausgabe hier: John
Sitzungsaufgabe
Diese Woche gibt es keine Sitzungsaufgabe!
Hausaufgabe
Hier finden Sie die 7. Hausaufgabe.