document document Hier wird das document Objekt definiert. Alle anderen Objekte sind innerhalb des Objektes document angesiedelt. In diesem „rohen“ Dokument.

Präsentation zum Thema: "document document Hier wird das document Objekt definiert. Alle anderen Objekte sind innerhalb des Objektes document angesiedelt. In diesem „rohen“ Dokument."—  Präsentation transkript:

1

2 document document Hier wird das document Objekt definiert. Alle anderen Objekte sind innerhalb des Objektes document angesiedelt. In diesem „rohen“ Dokument (document) werden Farbe, Textfarbe, Titel etc. eigestellt.

3 Javascript in Aktion erstes Script Javascript-Beispiel 1 <!-- diese zeile ist für Browser, die javascript (noch) nicht können // Ein Kommentar in JavaScript function meineErsteFunktion() { alert("Meine erste Funktion - eine Übergabe der Funktion an den EventHandler!"); } //--> Siehe Beispiele „documentA.html documentB.html, documentC.html

4 Javascript-Beispiel 1 <!-- // Ein Kommentar in JavaScript function meineZweiteFunktion() { var Ausgabe; //Definition einer Variablen Ausgabe = "Meine zweite Funktion mit einer Variablen"; alert(Ausgabe); } //--> Beispiel: documentD.html

5 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 („....“)

6 Daten an JS übergeben Javascript-Beispiel 6 <!-- diese zeile ist für Browser, die javascript (noch) nicht können // Ein Kommentar in JavaScript function meineZweiteFunktion() { var Eingabe; Eingabe = prompt("Tipp hier etwas rein ---->"); alert("Das waren deine Worte (nicht meine): "+Eingabe); } //--> Beispiel: documetF.html

7 Mit Variablen rechnen Javascript-Beispiel 7 <!-- diese zeile ist für Browser, die javascript (noch) nicht können // Ein Kommentar in JavaScript function KreisFlaeche() { var Radius; var Flaeche; Radius = prompt("Tipp hier den Radius des Kreises ein ---->"); Flaeche = Math.PI * Radius * Radius; // Mathematische Operation alert("Die Fläche des Kreises ist: " +Flaeche); } //--> Wie könnte man die Mehrwertsteuer berechnen??

8 Mehrwertsteuer 16% Javascript-Beispiel 8 <!-- 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)); } //-->

9 Rechnen mit Variablen var x, y; x=2; y=3; alert(x+y); 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 kannPrompt BoxTexteingabefeld OperatorBedeutungBeispiel+Additiona=b+c-Subtraktionc=b- 1*Multiplikation19*4/Division4/2++Addiert 1 hinzui++ oder i=i+1--Zieht 1 ab- - oder i=i-1

10 Prompt Box mit String und Number var x, y; x=prompt("Zahl tippen",""); y=prompt("Zahl tippen",""); alert(Number(x)+Number(y)); 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

11 document.write var nameingabe; nameingabe=prompt("Namen tippen!",""); document.write("Tja, " + nameingabe + ", jetzt erklär ich dir, warum dein Name hier steht."); 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.Window Objekt

12 Beispiel 1: Funktionsweise von Objekten document1 <!-- var y="Gebrüder Grimm Schule" x=y.length z=y.bold() document.bgColor = "red" document.fgColor = "black" document.writeln(" "+x+" ") document.write(z) //--> Hier steht der Html Text!! Beispiel: document1.html

13 In Java Script werden die Eigenschaften eines Objektes durch folgende Befehle zugeordnet: document.bgColor = "red"document.bgColor = "red" document.fgColor = "black„document.fgColor = "black„ Die Eigenschaften des Objektes werden ausgelesen durch: document.write("Hintergrundfarbe dieser Seite ist "+document.bgColor+".")document.write("Hintergrundfarbe dieser Seite ist "+document.bgColor+".") Beispiel: document2.htmlBeispiel: document2.html

14 Events und Event-HandlerA document3 Hier steht der Html Text!! Beispie: document4.html