Kurs in Powerpoint

document
<html>
<head>
<title>document</title>
</head>
<body>
Hier wird das document Objekt definiert.
Alle anderen Objekte sind innerhalb des Objektes document
angesiedelt.
</body>
</html>
In diesem „rohen“ Dokument (document)
werden Farbe, Textfarbe, Titel etc.
eigestellt.
Javascript in Aktion
•
•
•
•
•
•
•
<html>
<head>
<title>erstes Script</title>
</head>
<body onload="alert('Hallo AG')">
</body>
</html>
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> Javascript-Beispiel 1 </title>
<script language="JavaScript">

</script>
</head>
<body onload="meineErsteFunktion()" >
</body>
</html>
•
Siehe Beispiele „documentA.html documentB.html, documentC.html
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> Javascript-Beispiel 1 </title>
<script language="JavaScript">

</script>
</head>
<body onload="meineZweiteFunktion()" >
</body>
</html>
•
Beispiel: documentD.html
Unzulässige Zeichen
•
•
•
•
ÄäÜüÖö
ß
*+!
„
• §$%&/()=?\
• @~|³²><
• ^, . °
• Die vordefinierte Funktion alert() erzeugt eine
Dialogbox mit einer OK Schaltfläche
• Da es sich um Text handelt wird er in
Anführungszeichen gesetzt („....“)
Daten an JS übergeben
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> Javascript-Beispiel 6 </title>
<script language="JavaScript">
");
alert("Das waren deine Worte (nicht meine):
"+Eingabe);
}
//-->
</script>
</head>
<body onload="meineZweiteFunktion()" >
</body>
</html>
Beispiel: documetF.html
Mit Variablen rechnen
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> Javascript-Beispiel 7 </title>
<script language="JavaScript">
");
Flaeche = Math.PI * Radius * Radius; // Mathematische
Operation
alert("Die Fläche des Kreises ist: " +Flaeche);
}
//-->
</script>
</head>
<body onload="KreisFlaeche()" >
</body>
</html>
•
Wie könnte man die Mehrwertsteuer berechnen??
•
•
•
•
•
•
•
Mehrwertsteuer 16%
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title> Javascript-Beispiel 8
</title>
<script
language="JavaScript">
<!-function Mehrwertsteuer()
{
var Preis;
var Ergebnis;
var Betrag;
Preis = prompt("Tipp hier den
Betrag ein ---->");
Ergebnis = Preis * 16 / 100 ;
// Mathematische Operation
Betrag = (Number(Ergebnis) +
Number(Preis));
alert(Number(Betrag));
}
//-->
</script>
</head>
<body
onload="Mehrwertsteuer()" >
</body>
</html>
Rechnen mit Variablen
•
<script language="JavaScript" type="text/javascript"> var x, y; x=2; y=3; alert(x+y); </script>
Am Anfang werden die beiden Variablen x und y deklariert mit var.
Das ist zwar nicht unbedingt erforderlich, fördert aber die Übersichtlichkeit.
Dann werden die Variablen definiert und zwar mit den Werten 2 und 3.
In der folgenden Alert-box, werden die beiden Variablenwerte addiert.
An diesem Beispiel soll gezeigt werden was eine Variable ist, und wie man sie schreibt.
Ein Variable ist ein Container deren Wert sich ändern kann.
namedervariablen = wert;
•
•
•
•
•
•
•
•
•
Name
Der Name des Containers ist immer gleich, er wird frei vergeben.
In diesem Beispiel sind es die Namen x und y.
Regeln für selbstvergebene Namen
sie dürfen keine Leerzeichen enthalten
sie sollten maximal 32 Zeichen Länge haben
sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen sollte ein Buchstabe sein;
es sind Groß- und Kleinbuchstaben erlaubt. Groß- und Kleinschreibung werden unterschieden!
sie dürfen keine deutschen Umlaute oder ß enthalten
sie dürfen als einziges Sonderzeichen den Unterstrich _enthalten
sie dürfen nicht mit einem reservierten Wort identisch sein.
Ich habe es mir angewöhnt, deutsche Worte zu verwenden, die es im englischen nicht gibt.
Wert
Der Wert einer Variablen kann sich ändern.
So könnte z.B. die Varibale den Wert von der Eingabe einer Prompt Box oder einem Texteingabefeld
bekommen. Hier einige Operatoren, mit denen Javascript rechnen kann
•
OperatorBedeutungBeispiel+Additiona=b+c-Subtraktionc=b1*Multiplikation19*4/Division4/2++Addiert 1 hinzui++ oder i=i+1--Zieht 1 ab- oder i=i-1
Prompt Box mit String und Number
•
<script language="JavaScript" type="text/javascript"> var x, y; x=prompt("Zahl tippen","");
y=prompt("Zahl tippen",""); alert(Number(x)+Number(y)); </script>
Das Window Objekt Prompt Box
prompt("fenstertext" , "eingabe")
Wie man sieht kommt in die Klammern vor das Komma der Text, welcher in der Prompt Box
angezeigt wird.
Hinter dem Komma kommen in der Regel nur 2 Anführungszeichen, es sei denn man will im
Eingabefeld einen Text vorgeben.
Der Wert des Eingabefeldes wird an die Variable zurückgegeben.
Die Prompt Box gibt den Datentyp String zurück. Was heißt das denn schon wieder?
Die Flash Kundigen kennen das bereits und zwar gibt es verschiedene Datentypen, unter anderem
eben auch string und number.
Wenn ich beispielsweise 2+3 schreibe so könnte das 5 oder 23 sein.
Bei 5 würde es sich um number handeln. Die beiden Zahlen werden als Werte angesehen, mit denen
man rechnen kann.
Bei 23 wäre es string. Die beiden Zahlen werden als Zeichen oder Zeichenketten angesehen, die man
aneinandereiht.
Die Prompt Box gibt immer string Werte zurück, welche in unserem Beispiel mittels Number() in
eine numerische, rechnerische Zahl umgewandelt werden müssen.
Noch was, erinneren wir uns an das vorige Beispiel
x=2;
y=3;
alert(x+y);
Hier kamen die Werte der Variablen nicht von einer prompt box, sondern wurden im Script definiert,
daher sind es numerische Zahlenwerte, also number.
Wenn ich bei diesem Beispiel die beiden Zahlen als string Zeichenketten behandeln will, so daß 23
(zwei drei) erscheinen würde, so müßte ich die beiden Zahlen in Anführungsstriche schreiben.
x="2";
y="3"; Was würde wohl passieren wenn man es stattdessen so schreiben würde?
alert("x"+"y");
Wenn du das auf Anhieb weißt hast du es kapiert.
Eh du es jetzt ausprobierst, in der Alert Box steht dann xy
document.write
•
<script language="JavaScript"
type="text/javascript">
var nameingabe;
nameingabe=prompt("Namen tippen!","");
document.write("Tja, " + nameingabe + ", jetzt
erklär ich dir, warum dein Name hier steht.");
</script> Es ist ein bisschen abgenudelt und nervig, wenn man so
ein Script mit einem Willkommensgruß auf der Startseite seiner
Homepage einsetzt, aber als kleine Übung ist dieses Script durchaus
lehrreich.
Hier wird zuerst die Variable nameingabe deklariert.
Die Variable bekommt ein Window Objekt, eine prompt box Die
Eingabe wird in der Variablen gespeichert.
Anschließend folgt die Begrüßung auf der Seite, welche zwischen die
Klammern von document.write()eingefügt wird.
Dabei wird die Variable nameingabe mit 2 Verkettungsoperatoren +
mit dem anderen Text verknüpft.
"textstring"+variable+"textstring"
Zwischen die Anführungstriche lassen sich auch html Tags einfügen,
dazu auf der nächsten Seite mehr.
Beispiel 1: Funktionsweise von Objekten
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title>document1</title>
<script language="JavaScript">
<!-var y="Gebrüder Grimm Schule"
x=y.length
z=y.bold()
document.bgColor = "red"
document.fgColor = "black"
document.writeln("<b>"+x+"</b><br>")
document.write(z)
//-->
</script>
<noscript></noscript>
</head>
<body>
<p>Hier steht der Html Text!! </p>
</body>
</html>
•
Beispiel: document1.html
In Java Script werden die Eigenschaften
eines Objektes durch folgende Befehle
zugeordnet:
• document.bgColor = "red"
• document.fgColor = "black„
• Die Eigenschaften des Objektes werden
ausgelesen durch:
• document.write("Hintergrundfarbe dieser Seite ist
<b>"+document.bgColor+"</b>.")
• Beispiel: document2.html
Events und Event-HandlerA
• <html>
• <head>
• <title>document3</title>
•
•
•
•
</head>
<body>
<p>Hier steht der Html Text!! </p>
<a href=„#"
OnMouseOver="window.status='Keine Panik';
return true">
• <img src="../../engeln2/michaelZ_k.jpg"
width="100" height="133" border="0" >
• </body>
• </html>
• Beispie: document4.html