BG/BRG/BORG Eisenstadt - Seite 1 - Javascript

Transkript

1 BG/BRG/BORG Eisenstadt - Seite 1 - Javascript Inhalt 1 Überblick Javascript Was ist Javascript? Variablen Arrays Wodurch wird Javascript-Code ausgelöst? Wohin schreibt man Javascript-Code? Zugriff auf HTML-Elemente Stylesheets in Javascript Übersicht über wichtige Stylesheets in Javascript Zugriff auf Elemente über Knoten ( nodes ) Beispiele Elemente ein-/ausblenden Der fertige Quelltext zu "Elemente ein-/ausblenden Fenster öffnen MouseOver über ImageMaps Der fertige Quellcode zu "Imagemaps":... 9

2 BG/BRG/BORG Eisenstadt - Seite 2 - Javascript 1 Überblick Javascript 1.1 Was ist Javascript? Javascript ist eine Scriptsprache, die in html-dokumenten eingebaut und auf dem Client (nicht auf dem Webserver) vom Browser ausgeführt wird. Sie ist standardisiert und wird deshalb von allen modernen Browsern verstanden. Sie verwendet weitgehend die C-Syntax, die wir von Java u.a. kennen. Ausnahmen: Variablen Variablen werden mit dem Schlüsselwort var deklariert, es ist keine Typangabe nötig (ob Zahl, Text oder boolean wird automatisch erkannt). Variablen können bei der Deklaration auch initialisiert (mit einem Startwert gefüllt) werden. Ein- und dieselbe Variable kann sogar den Typ ändern, wenn man ihr einen entsprechenden neuen Wert zuweist: var x; // Variable deklarieren. Momentan undefined, kann alles aufnehmen (Zahl, Text, ) var y = 100; // Variable deklarieren und initialisieren. Momentan Zahl y = 'abc'; // jetzt String y = "abc"; // doppelte oder einfache Anführungszeichen möglich x = 10; // ab jetzt ist x nicht mehr undefined, sondern eine Integer-Variable x = "Hallo"; // und ab jetzt ein String Man benötigt keine Anweisungen zur Umwandlung von Text und Zahl, das geschieht automatisch: var x = 10; // Zahl var s = ' Tage'; // Text var z = x + s; // Zahl und Text gemischt ergibt: "10 Tage" Arrays Arrays funktionieren wie ArrayLists, d.h. sie vergrößern sich automatisch, wenn Elemente hinzugefügt werden. Erzeugt werden sie mit new Array(), in Klammern entweder nichts (ein leeres Array) oder die Anzahl der Elemente oder die Werte selbst (deren Anzahl bestimmt die Anfangsgröße des Arrays): var zahlen1 = new Array(); // leeres Array erzeugen var zahlen2 = new Array(2,5,23,19); // Array wird erzeugt und mit 4 Integer-Werten initialisiert var zahlen3 = new Array(100); // Array wird für 100 Elemente erzeugt, aber nicht initialisiert (alle Elemente haben den Wert "undefined") Hinzufügen eines neuen Elements (ans Ende des Arrays) mit der Methode push : zahlen2.push(217); // Zahl 217 wird ans Ende des Arrays angehängt; das Array wird automatisch (in diesem Beispiel auf 5 Elemente) vergrößert Löschen eines oder mehrerer Elemente mit der Methode splice : zahlen2.splice(1,2); // löscht 2 Elemente (= 2.Parameter) ab dem 2. (1.Parameter = Startindex). Array enthält jetzt nur mehr 3 Elemente Es ist sogar möglich, einen außerhalb der momentanen Größe liegenden Index für den Zugriff zu verwenden. Das Array wird automatisch auf die benötigte Größe erweitert: zahlen2[17] = 9; // ein neues Element mit dem Wert "9" wird an Position 16 eingefügt und das Array automatisch auf diese Größe erweitert (aufgefüllt mit dem Wert "undefined") Wie in Java kennen Arrays die Eigenschaft length (= Anzahl der Elemente), die für for -Schleifen nützlich sind, um alle Elemente auszulesen bzw. zu beschreiben: for (var i = 0; i < zahlen2.length; i++) zahlen2[i] = 0; // alle Elemente des Arrays auf 0 setzen: Schleifenzähler i wird als Index verwendet 1.2 Wodurch wird Javascript-Code ausgelöst? a) In den allermeisten Fällen durch Ereignisse ( Events, z.b. Mausklick), auf die in einer Ereignisbehandlungsroutine ( Event-Handler ) reagiert wird. Sie beginnen alle mit on, dahinter folgt der Name des Ereignisses (s.liste unten). Dem

3 BG/BRG/BORG Eisenstadt - Seite 3 - Javascript Ereignisnamen folgt, in Anführungszeichen und durch Strichpunkt abgeschlossen, entweder der Code (die Anweisungen) oder der Name einer Funktion, die den auszuführenden Code enthält: onclick="abc();" // Aufruf einer Funktion "abc", in der die gewünschten Javascript-Anweisungen stehen onmouseover="this.innerhtml='hallo';" // Javascript-Anweisung direkt im Eventhandler. "innerhtml" ändert den Text eines html-tags, "this" greift auf das aktuelle Element zu (= in dem sich die Javascript-Anweisung befindet) onmouseout=" ;" onmousedown=" ;" onmouseup=" ;" onkeypress=" ;" onkeydown=" ;" // Taste auf der Tastatur wird gedrückt onkeyup=" ;" // Taste auf der Tastatur wird losgelassen onblur=" ;" // ein Element verliert den Fokus (z.b. Wechsel von einem Textfeld zu einem anderen) onchange = " ;" // Inhalt eines Elements hat sich geändert (z.b. Eingabe in ein Textfeld) onsubmit = " ;" // auf den "Senden"-Button eines Formulars wurde geklickt b) Javacriptcode kann auch bereits beim Laden der Seite ausgeführt werden: entweder im Eventhandler von onload() (im <body> - Tag) oder im äußersten Block eines <script> - Bereichs (s.u. 1.3.b, S.5): <body on load() = " ;"> // wird beim Laden der Seite ausgeführt 1.3 Wohin schreibt man Javascript-Code? a) Javascript-Code wird (ähnlich Stylesheets) entweder in eine eigene Script -Datei ausgelagert oder b) in einen Script-Block (<script>...) innerhalb der Seite geschrieben oder c) direkt hinter dem Tag eingetragen, zu dem das Script gehört zu a) die externe Script-Datei muss (am besten innerhalb des <head>-bereichs) im <script> - Tag eingebunden werden (als Attribut src mit dem Dateinamen der Scriptdatei angeben). Ende-Tag nicht vergessen!: <html><head><script type="text/javascript" src="standard.js"> zu b) Der Block kann an beliebiger Stelle stehen, aber meist wird er in den <head>-bereich gesetzt: function abc()... Globale Variablen (= sind auf der ganzen Seite gültig) und Javascript-Anweisungen, die bereits beim Laden der Seite ausgeführt werden sollen, sind in diesem äußersten Script-Block, außerhalb der Funktionen, zu deklarieren: var zahlen = 100; // außerhalb der Funktion, im äußersten Block deklarierte Variable = global function abc() zahlen++; // Zugriff auf globale Variablen in allen Funktionen möglich document.getelementbyid("bild1").src='neuesbild.gif'; // Anweisung, die außerhalb der Funktion, im äußersten Block des <script>-bereichs steht, wird beim Laden der Seite ausgeführt zu c) die Befehle stehen innerhalb des Tags hinter dem Event-Handler, werden von Anführungszeichen eingerahmt und durch Strichpunkt abgeschlossen. Wenn der Befehl Textausgaben enthält, müssen daher einfache Anführungszeichen für diese Texte verwendet werden (im folgenden Beispiel wird "this" verwendet, das soviel bedeutet wie das aktuelle Element, also hier der Absatz, in dem sich das Script befindet): <p onclick="this.innerhtml='klick geglückt!';">hier klicken</p>

4 BG/BRG/BORG Eisenstadt - Seite 4 - Javascript 1.4 Zugriff auf HTML-Elemente Für den Zugriff gibt es einen Standard, der von den aktuellen Browsern weitgehend eingehalten wird: DOM ( Document Object Model ). Demnach ist der Zugriff auf fast alle HTML-Elemente möglich, wenn: a) dem HTML-Element eine Nr (Id="...") zugewiesen wurde, z.b.: <img id="bild1" src="..."> b) mit document.getelementbyid() (Groß-/Kleinschreibung beachten!) dieses Element angesprochen wird. Fast alle Attribute, die die jeweiligen HTML-Tags kennen, sind nun zugänglich. Sie werden, durch Punkt getrennt, an die getelementbyid -Anweisung angehängt (kleingeschrieben!). Der <img> - Tag z.b. kennt u.a. das Attribut src. Entsprechend lautet der Javascript-Code, um den Dateinamen des Bildes zu ändern und damit ein anderes Bild anzeigen zu lassen: document.getelementbyid("bild1").src='neuesbild.gif'; Nur wenige Attribute werden mit anderen Namen angesprochen, z.b. Padding und Spacing in Tabellen: document.getelementbyid("tabelle1").cellpadding=10; document.getelementbyid("tabelle1").cellspacing=10; c) Wenn Javascript-Code direkt in den Eventhandler (innerhalb des Tags) geschrieben wird, ist der Zugriff auf dieses Element mit this möglich. Text kann mit "innerhtml" (Groß-/Kleinschreibung beachten!) eingefügt werden: <p onclick = " this.innerhtml = 'neuer Text';"> oder: <p onclick = "this.innerhtml = 'neuer Text';"> Außerdem gibt es noch ein paar nützliche Dinge, die in HTML gar nicht, sondern nur in Javascript verfügbar sind: 1) Arrays als "Sammelcontainer" für alle Bilder, Formulare, Links und Frames des Dokuments: für Bilder: images für Formulare: forms für Links: anchors für Frames: frames Zugriff mit Index (beginnend bei 0) oder ID, falls vorhanden. Die folgenden Javascript-Beispiele ersetzen das erste Bild der aktuellen Seite durch ein anderes, indem das Attribut src geändert wird. Beide Versionen machen exakt das Gleiche, im zweiten Fall muss allerdings vorher dem Bild mit <img id='bild1'> die ID bild1 zugewiesen worden sein: document.images[0].src='neuesbild.gif'; document.images[ bild1 ].src='neuesbild.gif'; Alle diese Arrays besitzen die Eigenschaft "length", die die Anzahl der vorhandenen Elemente angibt. Im folgenden Beispiel wird die Anzahl der Links, die sich im aktuellen HTML-Dokument befinden, in die Variable 'AnzLinks' eingetragen: var AnzLinks=document.anchors.length; 2) Methoden a) Einige Methoden gehören zum "document"-objekt, werden also wie "getelementbyid" mit vorangestelltem "document" aufgerufen: document.write() und document.writeln(); Beide geben Text an der aktuellen Stelle aus. writeln erzeugt zusätzlich eine neue Zeile: document.writeln('hallo!'); b) Methoden des "Window" Objekts können mit oder ohne vorangestelltem "window" aufgerufen werden: alert() gibt ein Nachrichtenfenster aus. Erwartet in Klammer den auszugebenden String: if(x < 0) alert('wert ist negativ!'); confirm()

5 BG/BRG/BORG Eisenstadt - Seite 5 - Javascript Wie "alert", aber mit zusätzlichem Button für "Abbrechen". Klick auf "Abbrechen" liefert den Rückgabewert "false", Klick auf Ok liefert "true": var erg=confirm('sind alle Angaben korrekt?'); if(erg==false)... settimeout() und setinterval() Für Animationen notwendig. Beide erwarten in Klammer die Anzahl Millisekunden, die bis zur Ausführung gewartet werden soll, und den Namen der Funktion, die nach Ablauf der Wartezeit auszuführen ist (im folgenden Beispiel wird 10 Minuten gewartet, bis die Funktion "Stunde" aufgerufen wird. Beachte, dass in diesem Beispiel "window.settimeout" nicht innerhalb einer Funktion steht es benötigt daher keinen Event-Handler, sondern wird sofort nach Programmstart ausgeführt): function Stunde() alert('sie sind seit 10 Minuten auf meiner Seite'); window.settimeout('stunde()',600000); // ms = 10 Minuten Beide können mit cleartimeout() bzw. clearinterval() vorzeitig abgebrochen werden. Diese Methoden erwarten in Klammer eine Variable, die sich auf die von settimeout() bzw. setinterval() gestartete Funktion beziehen. Daher muss zuvor der Aufruf in einer Variablen gespeichert worden sein: var timeoutvariable = window.settimeout('stunde()',600000); cleartimeout(timeoutvariable); Beispiel für setinterval() : in einer Diashow werden im Abstand von 2 Sekunden Bilder gezeigt, bis auf den Schalter Abbrechen geklickt wird. Die Bilder entnehmen wir einem Array ( bilder ), den Index dazu erhöhen wir in der Funktion diastart vor jedem Durchgang, bzw. setzen ihn auf 0, wenn das Ende des Arrays erreicht ist. Klick auf den Schalter Abbrechen ruft die Funktion diastop() auf, die mit clearintervall die Diashow beendet: var aktbild=0; var bilder=new Array("harry-potter.gif","hermine.gif","hooch.gif","ron.gif"); var diavariable=window.setinterval("diastart()",1000); function diastart() if(aktbild < 3) aktbild++; else aktbild=0; document.getelementbyid("dia").src = bilder[aktbild]; function diastop() window.clearinterval(diavariable); c) Außerdem gibt es noch das "screen"-objekt, in dem Daten zum Bildschirm gespeichert sind: availwidth und availheight enthalten Breite bzw. Höhe des verfügbaren Bildschirmbereichs (d.h. ohne Start-, Symbol- und Menüleiste, etc.) var x = screen.availwidth; var y = screen.availheight; 1.5 Stylesheets in Javascript 1) Stylesheets können direkt über das Objekt style zugewiesen oder geändert werden. Die Stylesheet-Namen müssen ohne Bindestrich geschrieben werden. Stattdessen ist das zweite Wort mit Großbuchstaben zu beginnen:

6 BG/BRG/BORG Eisenstadt - Seite 6 - Javascript document.getelementbyid('absatz1').style.fontsize='15px'; 2) Möchte man aber ganze Stylesheet-Klassen zuweisen, verwendet man das Objekt classname : document.getelementbyid('absatz1').classname='namederklasse'; Übersicht über wichtige Stylesheets in Javascript backgroundattachment backgroundcolor backgroundimage backgroundposition backgroundrepeat bordercolor borderstyle borderwidth borderbottomcolor borderbottomstyle borderbottomwidth borderleftcolor borderleftstyle borderleftwidth borderrightcolor borderrightstyle borderrightwidth bordertopcolor bordertopstyle bordertopwidth color fontfamily fontstyle fontvariant fontweight height left letterspacing lineheight liststyle liststyleimage liststyleposition liststyletype margin marginbottom marginleft marginright margintop overflow padding paddingbottom paddingleft paddingright paddingtop position right textalign textdecoration textindent top verticalalign visibility width zindex 1.6 Zugriff auf Elemente über Knoten ( nodes ) Gemäß DOM sind alle Elemente einer Webseite in einer Art Baumstruktur verbunden. Eine Tabelle z.b. enthält einen Tabellen- Körper, dieser enthält Zeilen (<tr>), diese wiederum Zellen (<td>) und diese schließlich Text (oder sonstigen Inhalt). Somit sind alle Zeilen Kinder der Tabelle, die Zellen Kinder der Zeile und die Zelleninhalte Kinder der Zelle. Alle Kinder eines Elements sind im Array childnodes gespeichert. Ob es überhaupt Kinder gibt, steht in haschild (true oder false). Das erste Kind findet sich in firstchild, das letzte in lastchild und das übergeordnete Element in parentnode. Auf der gleichen Ebene (d.h. unter "Geschwistern", z.b. alle Zellen einer Zeile) erfolgt der Zugriff über nextsibling und previoussibling. Der Inhalt der Zelle schließlich ist über firstchild.nodevalue oder (nur für Text) firstchild.data erreichbar. Derzeit haben allerdings auch aktuelle Browser noch Probleme mit manchen Befehlen (z.b. funktioniert nextsibling nicht in Firefox). <tr> (firstchild) (parentnode) (nextsibling) <td> (previoussibling) <td> (childnodes[1]) (firstchild) (parentnode) Inhalt von <td> Die folgenden Beispiele beziehen sich auf die oben abgebildete Tabelle mit 3 Zeilen und 3 Spalten. Alle Aufrufe werden von der mittleren Zelle der 2.Zeile aus (id='z5') gesehen, d.h. die Javascript-Funktionen suchen1 bis suchen4 werden durch onclick-ereignisse in die mittlere Zelle ausgelöst. Um die langen Zugriffe über document.getelementbyid zu vereinfachen, wurde eine with - Anweisung eingesetzt (der in Klammer stehende Text gilt im gesamten Block, der von einer with-anweisung eingeschlossen wird): function suchen1() with(document.getelementbyid('z5')) firstchild.nodevalue='das bin ich!'

7 BG/BRG/BORG Eisenstadt - Seite 7 - Javascript function suchen2() with(document.getelementbyid('z5')) parentnode.previoussibling.childnodes[1]. firstchild.nodevalue='hallo Nachbar da oben!'; function suchen3() with(document.getelementbyid('z5')) parentnode.nextsibling.lastchild.firstchild. nodevalue='hallo Nachbar rechts unten!'; function suchen4() with(document.getelementbyid('z5')) parentnode.parentnode.firstchild.firstchild.firstchild. nodevalue='hallo links oben!'; 2 Beispiele 2.1 Elemente ein-/ausblenden Über die CSS-Eigenschaft display können Elemente sichtbar und unsichtbar gemacht werden. Das funktioniert mit fast jedem HTML-Element, besonders eignet sich dafür aber der <div> - Tag, der als Container andere Elemente aufnehmen kann. Im folgenden Beispiel soll unter einem Absatz ein Block mit zusätzlichem Inhalt erscheinen, wenn die Maus darüberbewegt wird. Der Absatz (<p>) benötigt die Eventhandler, die auf "Maus wurde über das Element bewegt" (onmouseover) und "Maus verlässt das Element" (onmouseout) reagieren. Das "<div>" benötigt eine "id", damit darauf per "getelementbyid" zugegriffen werden kann. Damit zu Beginn der Block nicht sichtbar ist, wird ihm eine Stylesheet-Klasse zu gewiesen, in der die entsprechende CSS-Eigenschaft ("display") auf den entsprechenden Wert ("none") gesetzt wurde (s.u.). <p onmouseover="aufklappen();" onmouseout="zuklappen();">infos:...</p> <div id="zusatzinfos" class="hide"> <ul> <li>zusatz 1:...</li> <li>zusatz 2...</li> </ul> </div> In der Stylesheet-Datei müssen zwei Klassen angelegt werden, die das ein- und ausblenden übernehmen (CSS - Eigenschaft "display").hide display: none; // Element wird unsichtbar.show display: block; // Element wird sichtbar border-style: solid; // Rand, damit der Block deutlicher zu erkennen ist border-width: 1px; Die beiden Javascript-Funktionen "aufklappen" und "zuklappen" greifen auf das <div> zu ("getelementbyid('zusatzinfos')") und weisen ihm ("style=") die jeweils passende der beiden Stylesheet-Klasse zu ("hide" um zu verbergen, "show" um anzuzeigen): function aufklappen() document.getelementbyid('zusatzinfos').classname='show';

8 BG/BRG/BORG Eisenstadt - Seite 8 - Javascript function zuklappen() document.getelementbyid('zusatzinfos').classname=hide; Der fertige Quelltext zu "Elemente ein-/ausblenden <!DOCTYPE html><head> <meta charset="utf-8"> <title>ein-/ausblenden</title> <link href="ein-ausblenden.css" rel="stylesheet" type="text/css" /> function aufklappen() document.getelementbyid('zusatzinfos').classname='show'; function zuklappen() document.getelementbyid('zusatzinfos').classname='hide'; </head><body> <p onmouseover="aufklappen();" onmouseout="zuklappen();">zusätzliche Infos:</p> <div id="zusatzinfos" class="hide"> <ul> <li>zusatz 1:...</li> <li>zusatz 2...</li> </ul> </div> </body></html> 2.2 Fenster öffnen Es ist lästig, kann aber zum Glück mit jedem modernen Browser unterbunden werden: das Öffnen neuer Fenster (meist mit Werbung). Die Methode gehört zum window - Objekt und benötigt eine URL mit der Datei, die in diesem Fenster angezeigt werden soll. Den Rückgabewert speichert man in einer Variable, um das Fenster ansprechen zu können. Mit der Methode focus() wird es in den Vordergrund geholt. function FensterOeffnen (Adresse) MeinFenster = window.open(adresse, "Zweitfenster", "width=300, height=200); MeinFenster.focus(); 2.3 MouseOver über ImageMaps In Imagemaps ("<map>") werden maussensitive Bereiche mit dem Tag "<area>" definiert. Fängt man das mouseover - Ereignis in diesem <area> - Tag ab, können Beschreibungen zum Bildinhalt, über dem sich die Maus befindet, eingeblendet werden. Im folgenden Beispiel sollen die Namen der Personen, die auf einem Foto abgebildet sind, sichtbar werden. Wir benötigen die Ereignisse "onmouseover" (wenn die Maus den Bereich einer Person betritt) und "onmouseout" (wenn die Maus von einer Person zur anderen wechselt und über einen leeren Bereich des Fotos wandert). Die Namen der Personen speichern wir in einem globalen Array (global bedeutet: außerhalb einer Funktion im äußersten Block des <script> - Bereichs): var Namen = new Array("Petra Müller","Julia Mayer","Andrea Bauer"); Zwei Funktionen übernehmen die Ausgabe des Namens bzw. das Löschen in einen Absatz. Welcher Name aus dem Array geschrieben werden soll (d.h. der Index), muss als Parameter übergeben werden:

9 BG/BRG/BORG Eisenstadt - Seite 9 - Javascript function getname(i) document.getelementbyid('ausgabe').firstchild.nodevalue=namen[i]; function noname() document.getelementbyid('ausgabe').firstchild.nodevalue=' '; In der Imagemap ergänzen wir im <area>-tag die Eventhandler: <img src="foto.jpg" usemap="#klasse8b"/> <map name="klasse8b"> <area shape="rect" coords="521,145,567,195" onmouseover="getname(0);" <area shape="rect" coords="593,129,639,189" onmouseover="getname(1);" <area shape="rect" coords="495,189,551,255" onmouseover="getname(2);" </map> Dem Absatz, der die Namen anzeigen soll, geben wir mit dem Attribut "id" eine eindeutige Bezeichnung. Diese Bezeichnung wird in den oben genannten Funktionen für den Zugriff auf diesen Absatz verwendet: <p>schülername (Maus über Bild bewegen):</p> <p class="ausgabe" id="ausgabe"> </p> Der fertige Quellcode zu "Imagemaps": <!doctype html><html> <head><title>matura 2006</title><meta charset="utf-8"> var Namen = new Array("Petra Müller", "Julia Mayer", "Andrea Bauer"); function getname(i) document.getelementbyid('ausgabe').firstchild.nodevalue = Namen[i]; function noname() document.getelementbyid('ausgabe').firstchild.nodevalue = '-'; </head> <body> <h1>maturajahrgang 2006, 8bi</h1> <p>schülername (Maus über Bild bewegen):</p> <p id="ausgabe">-</p> </body> </html> <p><img src="foto.jpg" usemap="#klasse8b"/></p> <map name="klasse8b"> <area shape="rect" coords="521,145,567,195" onmouseover="getname(0);" <area shape="rect" coords="593,129,639,189" onmouseover="getname(1);" <area shape="rect" coords="495,189,551,255" onmouseover="getname(2);" </map>

10 BG/BRG/BORG Eisenstadt - Seite 10 - Javascript