Grundlagen JavaScript

JavaScript ist eine clientseitige und meist in HTML eingebettete Skriptsprache, die
zur Entwicklung dynamischer Webinhalte geschaffen wurde.
Verfasser: Martin Hüsler
Modul: "Internet und XML"
Fachhochschule Nordwestschweiz FHNW
November 2012
Inhaltsverzeichnis
1. Einleitung ............................................................................................................... 3
1.1 JavaScript in HTML einbauen .......................................................................... 3
1.2 Externe JavaScript-Dateien ............................................................................. 3
1.3 JavaScript-Links ............................................................................................... 3
1.4 Browser ohne JavaScript ................................................................................. 4
1.5 Client- oder serverseitig ................................................................................... 4
2. Die Textausgabe ................................................................................................... 4
2.1 alert-Ausgabe ................................................................................................... 4
2.2 document.write-Ausgabe ................................................................................. 5
3. Benutzereingaben ................................................................................................. 5
3.1 prompt-Methode ............................................................................................... 5
3.2 confirm-Methode .............................................................................................. 5
4. Kommentare einfügen ........................................................................................... 5
5. Variablen ............................................................................................................... 6
6. Operatoren ............................................................................................................ 6
7. Stringoperationen .................................................................................................. 7
7.1 Mit dem "Plus-Operator" Strings verbinden...................................................... 7
7.2 length - Längenbestimmung............................................................................ 7
7.3 charAt(x) - Zeichen der Position x .................................................................... 7
7.4 substring(start, ende) - Teilstring ..................................................................... 7
8. Arrays (Datenfelder) .............................................................................................. 8
9. Verzweigung .......................................................................................................... 8
9.1 Die if/else-Anweisung....................................................................................... 8
9.2 Die switch-Anweisung ...................................................................................... 9
10. Schleifen .............................................................................................................. 9
10.1 Die for-Schleife .............................................................................................. 9
10.2 Die while-Schleife......................................................................................... 10
10.3 Die do-while-Schleife ................................................................................... 10
11. Datum / Zeit ....................................................................................................... 10
12. DOM (Document Object Model) ........................................................................ 12
12.1 Baumstruktur................................................................................................ 12
12.2 Zugriff auf einzelne Elemente ...................................................................... 12
13. Event-Handler.................................................................................................... 13
14. Formulare überprüfen ........................................................................................ 14
15. ANHANG ........................................................................................................... 15
15.1 Funktionen ................................................................................................... 15
15.2 Webadressen ............................................................................................... 15
Fachhochschule Nordwestschweiz FHNW
2
November 2012
1. Einleitung
JavaScript wurde ursprünglich von Netscape entwickelt und ist eine clientseitige
Programmiersprache. Der JavaScript-Code wird vom Browser ausgeführt.
Ihr Code kann im Head-Bereich (Funktionen) eines HTML-Dokuments stehen, im
Body-Bereich oder auch in einer externen Datei.
1.1 JavaScript in HTML einbauen
Mit dem script-Tag wird der JavaScript-Bereich eingeleitet. Für ganz alte Browser,
welche JavaScript nicht verstehen, folgt nach dem script-Tag ein HTML-Kommentar.
Damit JavaScript das "-->" nicht auszuführen sucht, wird diese Zeile für JavaScript
auskommentiert.
<html>
<head> <title> JavaScript-Test </title> </head>
<body>
<script type="text/javascript">
<!-document.write("Guten Tag");
//-->
</script>
</body>
</html>
Sie werden in Scriptarchiven auch den Tag <script language="JavaScript">
sehen. Seit HTML 4.0 sollte aber das Attribut "type" verwendet werden.
1.2 Externe JavaScript-Dateien
Wenn Sie JavaScript-Funktionen in eine externe Datei ablegen wollen, verwenden
Sie die Endung "js" z.B. prog.js.
Wenn Sie nun einen Dateiordner mit dem Namen "scripte" erstellt haben, könnte wie
folgt darauf zugegriffen werden:
<body>
<script type="text/javascript" src="scripte/prog.js>
</script>
</body>
1.3 JavaScript-Links
HTML-Links können auf unterschiedliche URLs verweisen. Zum Beispiel kann auf
"http:" oder auf "mailto:" verwiesen werden. Genauso kann nun auch auf "javascript:"
verlinkt werden.
Beispiel: <a href="javascript:window.alert('Hallo');">Klick</a>
Fachhochschule Nordwestschweiz FHNW
3
November 2012
1.4 Browser ohne JavaScript
Falls JavaScript in einem Browser deaktiviert ist oder der alte Browser kein
JavaScript versteht, kann mit dem Tag <noscript> gearbeitet werden.
<noscript>
Sie haben JavaScript deaktiviert <br>
<A HREF="http://www.fhnw.ch/ohnejs"> Klicken Sie hier
</noscript>
1.5 Client- oder serverseitig
Es gibt neben den "clientseitigen" Skriptsprachen wie JavaScript und Java auch
"serverseitige" Skriptsprachen wie zum Beispiel PHP oder Perl. Bei JavaScript wird
der gesamte Quellcode zum Webbrowser (Client) gesandt und erst dort interpretiert
und umgesetzt.
Webserver:
Client:
Webbrowser
URL-Anfrage
Serverprogramm
(z.B. Apache)
HTML + JavaScript
Interpretation und
Umsetzung von HTML
und JavaScript!
HTML
JavaScript
Schematische Darstellung Client-Server-Beziehung
2. Die Textausgabe
2.1 alert-Ausgabe
In JavaScirpt lässt sich ganz einfach ein neues Fenster mit einer Textausgabe
öffnen.
window.alert("Guten Tag miteinander");
Weil window das Standard-Objekt ist, kann dieses auch wegelassen werden.
alert("Guten Tag miteinander");
Fachhochschule Nordwestschweiz FHNW
4
November 2012
2.2 document.write-Ausgabe
Statt ein neues Fenster zu öffnen, will man oft direkt in ein vorhandenes Dokument
(oft aktuelle Webseite) schreiben.
Dazu gibt es folgenden Befehl:
window.document.write("<b>Guten Tag miteinander</b>");
Wiederum kann das Wort window weggelassen werden.
3. Benutzereingaben
3.1 prompt-Methode
Mit dem Befehl window.prompt() erhalten Sie ein einzeiliges Texteingabefeld.
Der Rückgabewert dieser Methode ist der eingegebene Text, sofern der Anwender
auf OK klickt.
3.2 confirm-Methode
Mit der Methode window.confirm() können Sie eine Sicherheitsabfrage starten.
Wollen Sie Ihren Namen wirklich eintragen?
Diese Methode liefert die Antwort true oder false.
4. Kommentare einfügen
Bei JavaScript gibt es 2 Arten von Kommentaren.
// Einzeiliger Kommentar
/*
Das ist nun ein Mehrzeilenkommentar, wobei dieser auch mit
Hilfe des obigen Zeichens realisiert werden könnte indem
einfach z.B. vor jede Zeile ein "//" gesetzt wird.
*/
Den HTML-Kommentar benötigen wir in JavaScript um alte Browser zu schützen:
<!-wird von HTML übersprungen
//-->
Fachhochschule Nordwestschweiz FHNW
5
November 2012
5. Variablen
Variablen sind in javascript sehr einfach zu verwenden. Mit dem Schlüsselwort var
deklarieren Sie eine Variable.
Variablen:
- bestehen aus Buchstaben, Zahlen und dem "_"
- dürfen nicht mit einer Zahl beginnen
- es wird zwischen Gross- und Kleinschreibung unterschieden
- keine Sorge zu Datentypen - JavaScript wandelt je nach Daten in den jeweils
erforderlichen Datentyp um (boolean, number, string, undefined)
var KlassenGroesse = 24;
// Nach 3 Monaten
KlassenGroesse = 21;
var Meintext = "Das haben Sie gut gemacht";
Meintext = "Das haben Sie sehr gut gemacht";
6. Operatoren
Arithmetische Operatoren in JavaScript:
Operator:
+
*
/
%
-
Aktion:
Addition
Subtraktion
Multiplikation
Division
Modulo
Negation
Beispiel:
a=10 + 5
a=10 - 5
a=5 * 10
a=15 / 3
a=16 / 3
b=7
a= -b
Ergebnis:
15
5
50
5
1
-7
Modulo ermittelt den Rest einer Division!
Vergleichs-Operatoren in JavaScript:
Operator:
==
!=
>
<
>=
<=
Fachhochschule Nordwestschweiz FHNW
Bedeutung:
gleich
ungleich
grösser als
kleiner als
grösser als oder gleich
kleiner als oder gleich
6
November 2012
Boolsche Operatoren in JavaScript:
Mit den boolschen Operatoren können Wahrheitswerte miteinander verknüpft werden
(true / false).
Es gibt die Verknüpfungen:
- UND
 Operator: &&
- ODER
 Operator: ||
- NEGATION  Operator: !
7. Stringoperationen
7.1 Mit dem "Plus-Operator" Strings verbinden
Zeichenketten können mit dem "+"-Zeichen verknüpft werden.
var Text1 = "Guten";
var Text2 = "Tag";
var MeinText = Text1 + " " + Text2 + " zusammen";
//MeinText == "Guten Tag zusammen"
7.2 length - Längenbestimmung
Mit Text.length kann die Anzahl der Zeichen innerhalb eines Strings festgestellt
werden.
Beispiel:
var Text = "Guten Tag";
var Anz_Zeichen = Text.length;
//Anz_Zeichen == "24"
7.3 charAt(x) - Zeichen der Position x
Text.charAt(3) lieferte das 4. Zeichen der Stringkette. Die Zählung beginnt also
bei 0. Beispiel:
var Text = "Guten Tag";
var Viertes_Zeichen = Text.charAt(3); //Viertes_Zeichen == "e"
7.4 substring(start, ende) - Teilstring
Mit Text.substring(0,4) können Sie Teile eines Strings in eine neue Variable
schreiben.
Beispiel:
var Teil_Text = Text.substring(0,4);
Fachhochschule Nordwestschweiz FHNW
7
//Teil_Text == "Guten"
November 2012
8. Arrays (Datenfelder)
Arrays sind Datenfelder, die mehrere Werte speichern können. Auf einen einzelnen
Inhalt greift man über den Index zu.
Definition eines Arrays:
var a = new Array();
a[0] = "Januar";
a[1] = "Februar";
// usw.
Sie können das Array bei der Deklaration auch direkt abfüllen:
var a = new Array("Januar", "Februar", "März");
Kurzform:
var a = ["Januar", "Februar", "März"];
Auslesen:
document.write(a[1]);
9. Verzweigung
9.1 Die if/else-Anweisung
Verzweigungen werden wie in vielen Programmiersprachen mit der if/else Anweisung
gelöst.
Beispiel:
if (Wert1 > Wert2)
{
document.write ("Der Wert der Variable Wert1 war grösser");
return
}
else
{
document.write ("Der Wert der Variable Wert2 war grösser");
}
Kurzform:
ergebnis = (Wert1 > Wert2) ? true-Wert : false-Wert
Fachhochschule Nordwestschweiz FHNW
8
November 2012
9.2 Die switch-Anweisung
switch (name)
{
case "ludwig":
document.write("Das ist heute ein seltener Name!");
break;
case "martin":
document.write("Das ist aber ein schöner Name!");
break;
default:
document.write("Sie können ja nichts dafür, dass Sie so
heissen!");
break;
}
Die letzte Anweisung (default) ist optional. Hingegen soll man auch im letzten Fall
(case) die Anweisungen mit einem break abbrechen.
10. Schleifen
10.1 Die for-Schleife
In der for-Schleife wird die Bedingung, wie oft die Schleife durchlaufen werden soll,
vor dem Schleifenstart definiert. Sie müssen also nicht mehr innerhalb der Schleife
einen Zähler hochaddieren.
Beispiel:
for (var zahl=1; zahl<=20; zahl++)
{
document.write("Dies ist der <B>"+ zahl +".</B> Durchlauf
dieser Schleife. <BR>");
}
Das Kernstück der for-Schleife sind die drei durch ein Semikolon getrennten
Anweisungen in Klammern. Es sind die Initialisierung, Bedingung und Veränderung.
Fachhochschule Nordwestschweiz FHNW
9
November 2012
10.2 Die while-Schleife
Die einfachste Form einer Schleife ist die while-Schleife. While ist das englische Wort
für "während" oder "solange". Solange also eine bestimmte Abbruchbedingung nicht
erfüllt ist, wird diese Schleife durchlaufen. Es ist möglich, dass diese Art von Schleife
nie durchlaufen wird.
Beispiel:
Zaehler = 1;
Ende = 20;
while (Zaehler < Ende)
{
document.write("Der Wert von Zaehler ist: <b>" + Zaehler +
"</b><BR>");
Zaehler++;
}
10.3 Die do-while-Schleife
Im Gegensatz zur while-Schleife wird die do-while-Schleife immer mindestens einmal
durchlaufen.
Beispiel:
var Zaehler = 1;
var Ende = 20;
do
{
document.write("Der Wert von Zaehler ist " + Zaehler +
"<BR>");
Zaehler++;
} while (Zaehler < Ende)
11. Datum / Zeit
JavaScript wird häufig dazu gebraucht um Datumsinformationen auszugeben.
Dafür gibt es das Objekt "Date".
Vom Date-Objekt ist zuerst mal eine Instanz zu erzeugen.
var zeit= new Date();
Fachhochschule Nordwestschweiz FHNW
10
November 2012
Die Variable Zeit enthält jetzt das aktuelle Datum inkl. Uhrzeit des loklen Rechners.
Diese Information kann nun mit Methoden einzelnen Variablen zugeordnet werden:
Methoden:
getDate()
getMonth()
getYear()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
Ausgabe mit Formatbeispiel:
Tag des Monats: 1-31
Monat: 0-11
Jahr: siehe unten
Stunde: 0-23
Minuten: 00-59
Sekunden: 00-59
Millisekunden: 0-999
Beispiele:
var zeit = new Date();
var
var
var
var
var
Tag = zeit.getDate();
Monat = zeit.getMonth();
Jahr = zeit.getYear();
Stunde = zeit.getHours();
Minute = zeit.getMinutes();
Monat = Monat + 1;
document.write("Heute ist der "+ Tag + "."+ Monat +"."+Jahr+"<br>");
document.write("Es ist jetzt " + Stunde + ":" + Minute + " Uhr");
Es gibt noch die Funktion getTime(), die die Zeit seit dem 1.1.1970 zurück gibt.
Diese Funktion eignet sich um eine Differenz zwischen zwei Daten zu errechnen.
In neusten Browserversionen gibt es getFullYear(), das grundsätzlich die volle
Jahrzahl wiedergibt.
Das lokale Datumsformat kann mit der Funktion toLocalString(), ausgegeben
werden.
Fachhochschule Nordwestschweiz FHNW
11
November 2012
12. DOM (Document Object Model)
Das "Document Object Model" spezifiziert, wie man auf die Elemente eines HTMLDokuments zugreifen kann.
Es interpretiert ein HTML-Dokument als eine Baumstruktur mit einzelnen
Knotenobjekten. Mit der Methode "getElementById()" können HTML-Elemente
über das Attribut id dynamisch angepasst werden.
DOM wurde vom W3C verabschiedet und sollte deshalb von allen Browser gleich
unterstützt werden.
12.1 Baumstruktur
html
Elternelement
von p
head
body
h1
p
Kindelement
von body
Das DOM stellt eine Reihe von Objekten mit Eigenschaften (Attributen) und
Methoden (Operationen) zur Verfügung. Ein untergeordnetes Objekt erbt alle
Eigenschaften und Methoden des Elternobjekts.
window
document
forms[]
elements[]
Ausschnitt aus der
Objekthierarchie DOM
images[]
navigator
12.2 Zugriff auf einzelne Elemente
Für die meisten HTML-Elemente kann das Universalattribut id definiert werden.
Beispiel:
<body id="alles">
<h3 id="ueberschrift"> DOM-Demo </h3>
<img src="bild.jpg" id="bild1" />
</body>
So wird darauf zugegriffen:
document.getElementById("alles")
var obj = document.getElementById("bild1");
obj.src = "bild2.jpg";
Fachhochschule Nordwestschweiz FHNW
12
November 2012
13. Event-Handler
Mit Event-Handlern kann JavaScript auf Ereignisse reagieren. Für das Objekt
window stehen onload und onunload zur Verfügung. Für Elemente werden
häufig onclick und onmouseover mit dem Gegenstück onmouseout verwendet.
Mit onmouseover und onmouseout kann der bekannte Rollover-Effekt realisiert
werden.
Laut W3C gehören Event-Handler zum HTML-Sprachstandard, werden aber im
Allgemeinen in Zusammenhang mit JavaScript verwendet, da der Aufruf eines EventHandlers fast immer JavaScript-Anweisungen aktiviert.
Beispiel im "head":
<script type="text/javascript">
<!-function quadratberech(x)
{
var zahl;
zahl = x*x;
alert("Das Quadrat von " + x + " ist " + zahl);
}
// -->
</script>
Beispiel im "body":
<form name="quadrat">
<p> Bitte geben Sie eine Zahl ein.</p>
<input type="text" id="eingabe">
<input type="button" value="Quadrat berechnen"
onclick="quadratberech(document.quadrat.eingabe.value)">
</form>
onload
onunload
onclick
ondblclick
onmouseover
onmouseout
onmousedown
onmouseup
Wird aufgerufen, wenn…
… das Dokument vollständig geladen ist.
… der Browser das aktuelle Dokument verlässt.
… der Benutzer auf das Element klickt.
… der Benutzer auf das Element doppelklickt.
… sich die Maus über einem Element befindet.
… sich die Maus von einem Element wegbewegt.
… der Benutzer die Maustaste drückt.
… der Benutzer die Maustaste wieder loslässt.
Beachten Sie unter de.selfhtml.org, welche weiteren Event-Handler noch eingesetzt
werden können.
z.B. onabort, onblur, onchange, onerror, onfocus, onkeydown,
onkeypress, onkeyup, onmousemove, onreset, onsubmit
Fachhochschule Nordwestschweiz FHNW
13
November 2012
14. Formulare überprüfen
Alle Formulare werden in einem Array document.forms[ ] gespeichert. Auf dieses
Array kann über den Array-Index zugegriffen werden, wobei die Formulare in der
Reihenfolge im Array stehen, in der sie im HTML-Formular vorkommen.
document.forms[0]: 1. Formular im Dokument
document.forms[1]: 2. Formular im Dokument
Alternativ kann man über den Namen (z.B. document.eingabe-form für ein
Formular mit name="eingabe-form") zugreifen. Diese Variante hat den Vorteil,
dass man zwischen vorhandene Formulare einer Webseite ein neues Formular
einfach einfügen kann (Leider gibt dies bei einigen Browsern Probleme, weil nicht
alle Versionen dem form -Tag das Attribut name erlauben).
Ein Formular speichert all seine Elemente im Array elements. Auch hier kann man
auf die einzelnen Elemente über den Array-Index zugreifen. Auf das erste Element
im ersten Formular könnte man wie folgt zugreifen:
document.forms[0].elements[0]:
1. Element im 1. Formular
document.forms[0].elements[0].value: Mit ".value" kann auf den aktuellen
Wert des Elementes zugegriffen werden.
Alternativ kann man auch direkt über das name-Attribut des form-Tags und des
Formularelements (z.B input type="text")zugreifen.
document.forms[0].field1:
Element mit name="field1" im 1. Formular
Variablenzuweisung:
var vorname = document.fragebogen.vorname.value;
Die meisten Formularelemente haben eine Eigenschaft value, die in der Regel die
Eingabe des Benutzers angibt. Diese Eigenschaft muss oft überprüft werden.
Beispiel:
if (document.fragebogen.vorname.value == "")
{
alert("Bitte Vornamen eintragen");
}
Allgemeine Schreibweise um auf den Wert eines Formularelements zuzugreifen:
document.forms[0].elements[0].value
Fachhochschule Nordwestschweiz FHNW
14
November 2012
15. ANHANG
15.1 Funktionen
Neben den Datums- und Zeitfunktionen gibt es noch viele weitere Funktionen,
welche Sie im Web detailliert beschrieben finden.
Beispiele:
Math.round(zahl)
Rundet auf ganze Zahl.
Math.pow(Basis, Exponent)
Berechnet die Potenz einer Zahl zu einer Basis.
parseInt(zahl)
Wandelt in eine ganzzahlige Zahl.
parseFloat(zahl)
Wandelt in eine Fliesskommazahl.
isNaN(zahl)
Stellt fest, ob ein Eingabewert keine Zahl ist.
function istzahl(zahl)
{
if (!isNaN(zahl)) //Not-Operator
return true;
else
return false;
}
15.2 Webadressen
http://de.selfhtml.org/javascript
http://rhirte.de/javascript/home.htm
http://www.dcljs.de
http://www.html-seminar.de/javascript.htm
http://www.de.hscripts.com/tutorials/javascript
http://openbook.galileocomputing.de/javascript
Fachhochschule Nordwestschweiz FHNW
15
November 2012