|
Das unvergleichliche
DRÖPPEZ's
Einsteigerhandbuch JavaScript
Aller Anfang ist - gar nicht so schwer
|
|
JavaScript wurde entwickelt, um es in Dokumente einzubinden.
Zwar wird es inzwischen auch als dokumentunabhängige Skriptsprache eingesetzt
oder als Serverscript benutzt, ich halte das jedoch aufgrund besserer Alternativen (PHP)
für groben Unfug (persönliche Meinung)
und will uns damit auch nicht weiter belästigen.
Uns soll hier hautsächlich der Einbau in HTML- und XHTML- Seiten beschäftigen -
mit dem Hintergedanken, daß wir das beispielsweise in SVG- oder andere XML-Formate
genauso tun können.
Du solltest Dich schon ein wenig mit HTML beschäftigt haben, bevor Du mit JavaScript anfängst.
Ich werde also entweder HTML-Vorkenntnisse oder eine schnelle Auffassungsgabe bei Dir voraussetzen.
Zuerst will ich Deine HTML-Kenntnisse ein wenig auffrischen.
Es gibt ein paar Elemente/tags, die wohl jede HTML4-Seite (außer Framesets) enthält:
|
Erklärungen
|
Quelltext
|
|---|
Dokumenttyp definieren:
Beginn HTML-Quelltext, Inhalte deutsch:
Anfang des Dokumentkopfes:
Angaben zum Dokument
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
Dokument-Inhalte
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
...
</head>
<body>
...
</body>
</html>
|
Eine XML-Seite sieht da ganz ähnlich aus:
|
Erklärungen
|
Quelltext
|
|---|
it's XML, baby:
Dokumenttyp definieren:
Beginn des HTML-Quelltextes:
Anfang des Dokumentkopfes:
Angaben zum Dokument
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
Dokument-Inhalte
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
...
</head>
<body>
...
</body>
</html>
|
Um Scriptsprachen in HTML und XML einzubauen, wurde der Script-tag erfunden.
Scripts dürfen sowohl im head- als auch im body-tag eingebaut werden.
Das sieht dann bei HTML so aus:
|
Erklärungen
|
Quelltext
|
|---|
Dokumenttyp definieren:
Beginn HTML-Quelltext, Inhalte deutsch:
Anfang des Dokumentkopfes:
Angaben zum Dokument
JavaScript als allgemeine Scriptsprache:
weitere Angaben zum Dokument
Script aus extra Datei einbinden:
weitere Angaben zum Dokument
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
Dokument-Inhalte
eingebettetes Script einbinden:
als HTML-Kommentar
Script-Quelltext
Ende des HTML-Kommentars
Script-Bereich beenden:
weitere Dokument-Inhalte
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
<script type="text/javascript" src="irgendwas.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
<!--
...
//-->
</script>
...
</body>
</html>
|
Damit auch wirklich alle Scripts als JavaScript interpretiert werden, sollte man grundsätzlich
auch den Script-Inhaltstyp definieren, wie ich das im Beispiel mit dem Meta-tag getan habe.
In XHTML sieht's dann, zumindest für eingebettete Scripts, doch schon etwas anders aus:
|
Erklärungen
|
Quelltext
|
|---|
it's XML, baby:
Dokumenttyp definieren:
Beginn des HTML-Quelltextes:
Anfang des Dokumentkopfes:
Angaben zum Dokument
JavaScript als allgemeine Scriptsprache:
weitere Angaben zum Dokument
Script aus extra Datei einbinden:
weitere Angaben zum Dokument
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
Dokument-Inhalte
eingebettetes Script einbinden:
nicht darzustellender Textblock:
Script-Quelltext
Ende des Textblocks:
Script-Bereich beenden:
weitere Dokument-Inhalte
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
...
<meta http-equiv="Content-script-type" content="text/javascript">
...
<script type="text/javascript" src="irgendwas.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
<![CDATA[
...
]]>
</script>
...
</body>
</html>
|
Da kann's ja eigentlich losgehen.
Jedes Einsteigerhandbuch fängt mit einem Programm an, welches "Hallo World" sagt.
So soll es auch das Programmchen tun, was ich hiermit, in eine HTML-Seite eingebaut, vorstelle:
|
Erklärungen
|
Quelltext
|
|---|
Dokumenttyp definieren:
Beginn HTML-Quelltext, Inhalte deutsch:
Anfang des Dokumentkopfes:
JavaScript als allgemeine Scriptsprache:
Titel des Dokuments:
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
eingebettetes Script einbinden:
als HTML-Kommentar
Hello World in das Dokument schreiben:
Ende des HTML-Kommentars
Script-Bereich beenden:
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World");
//-->
</script>
</body>
</html>
|
Der Quelltext unseres Programms besteht aus exakt einer Zeile:
document.write("Hello World");
Alles andere ist HTML und kein JavaScript.
Sieh Dir jetzt bitte das Beispiel an, indem Du
diesem link hier
folgst.
Nur nochmal zur Erinnerung: der gelbe Kasten mit dem roten Rand, der immer von oben
eingeschwebt kommt, wird nur eingeblendet und gehört nicht zu der Seite, auf
der er angezeigt wird. Also nicht verwirren lassen!
Zerlegen wir das Programm in seine Bestandteile:
1. Bestandteil:
document.
heißt nichts weiter, als daß das, was nach dem Punkt kommt, sich auf das Objekt "document" bezieht.
Das Script-Objekt "document" ist eine Abbildung der meisten Eigenschaften eines HTML-/XML-Dokumentes
in den Sprachraum von JavaScript.
Zu kompliziert? Egal. Behalte es im Hinterkopf und laß Dich nicht entmutigen, wenn Dir
einiges "sehr neu" vorkommt. Wir werden das Objekt in einer späteren Lektion ausführlich behandeln.
2. Bestandteil:
write(...)
ist der Name der Funktion, die etwas in das Dokument hineinschreibt.
Sie gehört eben halt zum Objekt document.
3. Bestandteil:
"Hello World"
ist einfach die Zeichenkette, die wir von dem Programm in's Dokument reinschreiben lassen.
Merke: Zeichenketten werden immer in einfache oder doppelte Gänsefüßchen ("..." oder '...')
gestellt. Ob Du einfache oder doppelte Gänsefüßchen verwendest, bleibt meistens, aber nicht immer,
Deinem Geschmack überlassen.
Ich will mal mit etwas weitermachen, was Dir aus Mathematikunterricht oder dem täglichen
Gebrauch bekannt vorkommen dürfte: dem Rechnen.
Eigentlich gibt es nur einen wirklichen Unterschied zum Rechnen per Hand:
Der Rechner macht alles für Dich, und Du mußt ihm nur hinschreiben, wie er das tun soll.
|
Erklärungen
|
Quelltext
|
|---|
Dokumenttyp definieren:
Beginn HTML-Quelltext, Inhalte deutsch:
Anfang des Dokumentkopfes:
JavaScript als allgemeine Scriptsprache:
Titel des Dokuments:
Ende das Dokumentkopfes:
Anfang des darzustellenden Dokuments:
eingebettetes Script einbinden:
als HTML-Kommentar
a auf 3 setzen:
b auf 4 setzen:
c nach der Formel a*a+b*b berechnen:
c in das Dokument schreiben:
Ende des HTML-Kommentars
Script-Bereich beenden:
Ende des darzustellenden Dokuments:
Ende des HTML-Quelltextes:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
<!--
a=3;
b=4;
c=a*a+b*b;
document.write(c);
//-->
</script>
</body>
</html>
|
Sieht also aus wie ganz normales Rechnen, nur daß eben hinter jeder Anweisung
noch ein Semikolon stehen muß.
Sieh Dir jetzt bitte das Beispiel an, indem Du
diesem link hier
folgst.
Zeichen, die "etwas Bestimmtes" bewirken, nennt man (wie in der Mathematik) Operatoren.
Folgende Operatoren haben wir benutzt:
Zuweisungsoperator:
=
Additionsoperator:
+
Multiplikationsoperator:
*
Aber was wäre es doch für eine Welt ohne
Subtraktionsoperator:
-
Divisionsoperator:
/
Genau wie in der Mathematik haben Multiplikation/Division auch in JavaScript
Vorrang vor Addition/Subtraktion.
Genau wie in der Mathematik kann man aber auch durch runde Klammern
die Reihenfolge von Operationen frei festlegen:
alfa=(3+4)*7;
beta=(a-3.7)/2.1;
gamma=((3+4)*7-3.7)/2.1;
Ja, noch was ganz wichtiges: Nachkommastellen werden bei uns in Deutschland üblicherweise
durch Komma abgetrennt. Deshalb nennt man sie ja auch Nachkommastellen.
In allen englisch-basierten Programmiersprachen jedoch wird stattdessen der Punkt verwendet.
Der Ausdruck
3.7 entspricht also der deutschen
3,7.
Damit Du Dich mit den Operatoren zurecht findest, ist es wichtig, daß Du weißt,
wo Du die Dokumentation dazu findest.
Öffne dazu das JavaScript-Tutorial, indem Du auf die gepunktete Tasse
klickst.
Der gelbe Kasten mit dem roten Rand wird Dich zum entsprechenden Kapitel leiten.
weiter ----->
